/* ==================  PALETA Y VARIABLES GLOBALES  ================== */
:root{
  --clr-accent: #c7ac7d;   /* beige / café claro */
  --clr-dark:   #203745;   /* azul-verdoso oscuro */
  --clr-brand:  #bdac79;   /* dorado suave del logotipo */
}

/* ==================  RESET / BASE  ================== */
html, body{
  height: 100% ;               /* garantiza cuerpo pantalla completa */
}
body{

  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;


  color: #333;
  background-color: #fafafa;
  font-size: 1rem;
  min-height: 100vh;          /* cubre viewport aunque no haya contenido */
  display: flex;
  flex-direction: column;     /* permite footer sticky si lo necesitas */
  min-height: 100vh; 
}
main{
  flex: 1 0 auto;         /* grow = 1   shrink = 0   basis = auto */
}
/* ==================  BOTONES  ================== */
/* ---------- Outline Secondary ---------- */
.btn-outline-secondary{
  background-color: var(--clr-dark) !important;
  border-color: var(--clr-dark) !important;
  color: #fff !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus{
  background-color: #b89e7a !important;
  border-color: #b89e7a !important;
  color: #fff !important;
}

/* ---------- Primary & Outline Primary ---------- */
.btn-primary{
  background-color: #b89e7a !important;
  border-color: #b89e7a !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus{
  background-color: var(--clr-accent) !important;
  border-color: var(--clr-accent) !important;
}
.btn-outline-primary{
  color: #b89e7a !important;
  border-color: #b89e7a !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus{
  background-color: #b89e7a !important;
  border-color: #b89e7a !important;
  color: #fff !important;
}

/* ==================  TABS (nav-pills)  ================== */
.nav-pills .nav-link{
  color: var(--clr-accent) !important;
  background-color: transparent !important;
  border: 1px solid var(--clr-accent) !important;
  margin: 0 5px;
}
.nav-pills .nav-link:hover{
  background-color: var(--clr-accent) !important;
  color: var(--clr-dark) !important;
}
.nav-pills .nav-link.active{
  background-color: var(--clr-accent) !important;
  color: var(--clr-dark) !important;
  border-color: var(--clr-accent) !important;
}

/* ==================  TIPOGRAFÍA Y UTILITARIOS  ================== */
h1,h2,h3,.h1,.h2,.h3{
  font-weight: 600;
  letter-spacing: 1px;
}
.blockquote-footer{
  color: var(--clr-brand);
}
.pagination{
  justify-content: center;
}

/* ==================  NAVBAR MEJORADO  ================== */
.navbar-munoz{
  background: var(--clr-dark);
  font-family: 'Orbitron', sans-serif;
  letter-spacing: .03rem;
  position: sticky;
  top: 0;
  z-index: 999;
  transition: background .3s ease, box-shadow .3s ease;
}
.navbar-munoz.scrolled{
  box-shadow: 0 2px 8px rgb(0 0 0 / .18);
}
.navbar-munoz .navbar-brand{
  color: var(--clr-brand);
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
}
.navbar-munoz .navbar-brand img{
  width: 72px;
  height: auto;
}
.navbar-munoz .nav-link{
  color: var(--clr-accent) !important;
  position: relative;
  padding: .4rem .9rem;
  transition: color .25s ease;
}
.navbar-munoz .nav-link::after{
  content:'';
  position:absolute; left:0; bottom:0;
  height:2px; width:0;
  background: var(--clr-accent);
  transition: width .25s ease;
}
.navbar-munoz .nav-link:hover,
.navbar-munoz .nav-link:focus{
  color:#fff !important;
}
.navbar-munoz .nav-link:hover::after,
.navbar-munoz .nav-link.active::after{
  width:100%;
}
.navbar-munoz .navbar-toggler{
  border-color: var(--clr-accent);
}
.navbar-munoz .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='%23c7ac7d' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ==================  BACKGROUND HELPERS  ================== */
.bg-fondo{ background-color: var(--clr-dark); }

/* ==================  HERO ================== */
.hero{
  background-color: var(--clr-dark);
  color: var(--clr-brand);
  min-height: 60vh;
  display: flex; align-items:center; justify-content:center;
  text-align:center;
}
.hero h1{ color:#E3D5BF; font-size:3rem; margin-bottom:1rem; }
.hero p { color:#E3D5BF; font-size:1.2rem; max-width:600px; margin:0 auto 2rem; }
.hero .btn-hero{ padding:.8rem 1.5rem; font-size:1.1rem; border-radius:30px; }

/* ==================  SECTIONS & FOOTER  ================== */
section{ padding:3rem 0; }
footer{
  background: var(--clr-dark);
  color:#fff;
  margin-top:auto;           /* empuja footer al fondo si hay poco contenido */
  padding:1.5rem 0;
  text-align:center;
}

/* ==================  RESPONSIVE HERO  ================== */
@media (max-width:768px){
  .hero h1{ font-size:2.2rem; }
  .hero p { font-size:1rem; }
}

/* ==================  CARD & IMAGES  ================== */
.card img,
.card-custom .card-img-top{
  height:300px;
  object-fit:cover;
}
.card-custom{
  border:none;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 2px 8px rgb(0 0 0 / .1);
  transition:transform .3s ease, box-shadow .3s ease;
}
.card-custom:hover{
  transform:translateY(-5px);
  box-shadow:0 8px 20px rgb(0 0 0 / .2);
}
.card-custom .card-body{ background:#fdfdfd; padding:1.5rem; }
.card-custom .card-title{ color:#2a2a2a; font-weight:bold; }
.card-custom .card-text { color:#555; }
.shadow-custom{ box-shadow:0 4px 12px rgb(0 0 0 / .15); }

/* ==================  ÍCONOS “por qué elegirnos”  ================== */
.icon{
  font-size:3rem;
  color:#0d6efd;
  margin-bottom:1rem;
}