/*Actualizado para Bootstrap 5*/
@import url(https://fonts.googleapis.com/css?family=Ropa+Sans);

:root {
  --bs-body-color: #6c6c5d;
  --bs-card-color: #6c6c5d;
}

/*estilos generales*/
html body{ 
  color:#6c6c5d !important;
  font-family: 'Ropa Sans', sans-serif; 
  overflow-x:hidden; 
  background-color: #EAEAEA; 
}

div.topBanner { 
  margin:0; 
  top:0; 
  background: url(../img/top_banner.jpg) no-repeat top center; 
  width: 100%; 
  height: 315px; 
  position: absolute; 
}

body a, body a:hover{ color:inherit}
.principal{ padding-bottom:40px;}
footer{ 
  background-color:#68655c; 
  position:fixed; 
  bottom:0; 
  height:40px; 
  width:100%;
}
footer p{ color:#ffffff; line-height:40px;}

header.main{ 
  background:none !important; 
  margin:30px auto 0 auto; 
  height:100px; 
  border-top:1px solid #ccc !important; 
  border-bottom:none; 
}
header.main .container{ position:relative;}
header.main h1.brand{ 
  font-weight: bold; 
  font-size: 23px; 
  font-family: Helvetica;
  position:absolute; 
  z-index:999; 
  height:135px; 
  width:290px; 
  left:15px;
  color:#2C32FF;
  padding: 55px 0 0 24px; 
  top:0px; 
  background:transparent url(../img/logo.png) no-repeat center 0; 
  margin:0;
}

header.main div.banner{ 
  background-color:#2C32FF;
  box-shadow: 3px 3px 0px 3px rgba(0, 0, 0, 0.75); 
  width:auto; 
  height:85px; 
  border-radius:2px; 
  text-align:center; 
  padding:15px 20px;
  margin-right:5px;
}

header.main div.banner p{ 
  color:#ffffff; 
  text-transform:uppercase; 
  font-size:20px; 
  line-height:30px;
}
header.main div.banner p span{ 
  font-size:36px;
  letter-spacing:-2px; 
  position:relative; 
  top:-8px;
}
header div.banner p span i{ 
  font-size:40px; 
  position:relative; 
  top:4px;
}

.jumbotron{ 
  background-color:transparent; 
  padding:0px!important; 
  margin:0 0 20px 0
}
.jumbotron .container{ 
  display:table; 
  height:190px; 
}
.jumbotron h2{ 
  color:#FFF; 
  font-size:25pt; 
  display:table-cell; 
  vertical-align:middle;
  position: relative; 
  padding-top: 20px;  
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}
.jumbotron h2 p { 
  font-size: 13pt; 
  margin-top: 5px; 
  padding-right: 80px;
}

/* Actualización para Bootstrap 5 - Cards en lugar de panels */
.card{ 
  border:none; 
  border-radius:0; 
  background:none; 
  box-shadow:none;
}
.card-body{ 
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
  background-color: #FFF;
}
.card-body p{ 
  padding:0 10px;
}
.card-header{ 
  position:relative;
  background-color: transparent;
  border-bottom: 1px solid #ddd;
  margin-bottom: 30px;
}
.card-header h3{ 
  padding-bottom:20px; 
  margin-bottom:8px; 
  font-size:22px; 
  line-height:24px;
}

/* Actualización para Bootstrap 5 - Accordion */
.accordion{
  margin-top:40px;
}
.accordion-button{
  background-color:#6c6c5d; 
  color:#fff;
}
.accordion-button:not(.collapsed){
  background-color:#2C32FF;
  color:#fff;
}
.accordion-button:focus{
  box-shadow: none;
}

aside{ 
  position:relative;
}
aside .card-body{ 
  background-color:#dddddd;
  border: 1px solid #ccc;
}
aside h3{ 
  color:#2C32FF; 
  font-size:20px; 
  text-align:center; 
  margin:0 !important; 
  padding:0 !important ; 
  border:none;
}

form label{ 
  text-transform:uppercase; 
  font-weight:100; 
  margin-bottom:0; 
  letter-spacing:1px;
}
form .btn{
  background-color:#2C32FF; 
  color:#ffffff;
  text-transform:uppercase;
  border-color: #2C32FF;
}
form .btn:hover{
  background-color:#1a1eff; 
  border-color: #1a1eff;
}

p.exp {
  font-size: 1.4em;
}

@media (max-width:650px){
  .jumbotron h2 p {padding-right: 0;}
  .card-header h3 {margin-top: 0px;}
  .jumbotron h2 {margin-top: 0;font-size:30px; text-shadow: none; color: #68655C;}
  .jumbotron{ margin:0px 0 30px; }
  .jumbotron h2, .jumbotron figure{ display:block; width:100%; margin:130px 0 20px;} 
  .jumbotron .container{ height:auto; background: url(../img/top_banner-500x200.png) no-repeat top center transparent;}
  header.main{ height:auto; border:none!important; padding-bottom:20px;}
  header.main .container{ width:100%; padding:0;}
  header.main div.banner{ float:none !important; margin:-5px 15px 0 15px;}
  header.main h1.brand{ position:relative; width:100%; background:url(../img/logoM.png) top left no-repeat transparent;}
  footer{ position:relative; height:auto; padding:10px 0; width:100%; text-align:center; bottom:auto; margin-top:20px;}
  footer p{ line-height:inherit}
  .card-header h3 br{ display:none;}
  div.topBanner {background-color: #B6B6B6;background-image: none; margin: 29px 0;top: 0;width: 100%;height: 99px;position: absolute;}
}