/* ===================================== */
/* Container width */
.img-wrapper{
  background-color:#000000;
}
.titlecontainer{
    border-radius:15px;
    position: absolute;
    text-align: center;
    width: 100%;
    color:#FFFFFF;
    background-color:#00000060;
    height:100%;
    transition: background-color .4s ease;
  font-size:20px;
}
.titlecontainer p {
  line-height:30px;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.titlecontainer:hover{
  background-color:#00000090;
}
.image-fondo{
  width:100%;
  border-radius:15px;
}
.contenedor-full {
  display: block;
  float: none !important;
  position: relative;
  max-width: 100%;
  margin: 0 auto !important;
  padding: 0 15px;
}
.contenedor {
  display: block;
  float: none !important;
  position: relative;
  max-width: 980px;
  margin: 0 auto !important;
  padding: 0 15px;
}
.contenedor-small {
  display: block;
  float: none !important;
  position: relative;
  max-width: 700px;
  margin: 0 auto !important;
  padding: 0 15px;
}

.contenedor-full p:last-child, .contenedor p:last-child, .contenedor-small p:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .contenedor-small,
  .contenedor,
  .contenedor-full {
    display: block !important;
  }
  .contenedor-small .span12,
  .contenedor .span12,
  .contenedor-full .span12 {
    width: 100% !important;
    margin-bottom: 30px;
  }
} 

/* ===================================== */
/* Align vertical */

.aligner_item_top {
  align-self: flex-start;
}
.aligner_item_bottom {
  align-self: flex-end;
}
.aligner_item_middle {
  align-self: auto;
}

*, *::before, *::after{
  box-sizing: border-box;
}
*{
  margin: 0;
  padding: 0;
}
body{
  font-size: 16px;
}

#contenedor-principal h2{
  margin: 20px auto;
}
#contenedor-buscador{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 40px;
}
#contenedor-buscador form{
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}
#contenedor-buscador form select{
  width: 47%;
  -webkit-appearance: menulist;
  font-family: 'Spectral', serif;
}
.contenedor-botones{
   width: 70%;
   margin: auto;
}
#contenedor-desarrollos{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}
.tarjeta-desarrollo-link{
  border-radius:15px;
  width: 30.3%;
  margin: 10px 15px;
  text-decoration: none !important;
  position:relative;
}
.tarjeta-desarrollo{
  border-radius:15px;
  width: 100%;
  height:300px;
  overflow:hidden;
}
.tarjeta-desarrollo figure{
  height:300px;
  width: 100%;
}
.tarjeta-desarrollo figure img{
  width: 100%;
}
.nombre-desarrollo{
}
.ver_mas{
 color:#FF5900;
 display:block;
  font-size:15px;
}
@media screen and (max-width: 990px) {
  #contenedor-principal{
    width: 100%;
  }
  #contenedor-buscador form{
    width: 100%;
  }
  .tarjeta-desarrollo-link{
    width: 46%;
  }
  #contenedor-buscador form select{
    width: 300px !important;
  }
}
@media screen and (max-width: 720px){
  .tarjeta-desarrollo-link{
    width: 90%;
    margin: 10px auto;
  }
  #contenedor-buscador form{
    width: 100%;
    padding: 5px 20px;
  }
  #contenedor-buscador form select{
    width: 100%;
    height: 50px;
    font-size: 16px;
  }
  .nombre-desarrollo{
    font-size: 20px;
  }
  #contenedor-principal{
  width: 100%;
  }
  .tarjeta-desarrollo-link{
   text-decoration: none !important;
  }
  
}

/*----------tabla costos ------------------*/
.tabla-responsive-wrapper {
  position: relative;
  width: 100%; 
}

/* Difuminado para indicar scroll horizontal */
.tabla-responsive-wrapper::after {
  content: '';
  display: block;
  width: 50px; 
  height: 100%;
  
  /* Ajusta #FFFBF8 si el color de fondo de tu sección es otro */
  background: linear-gradient(to left, #FFFBF8 0%, rgba(255, 251, 248, 0) 100%);
  
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none; /* Permite hacer clic "a través" del difuminado */
}
/* NUEVO Contenedor INTERNO: Es el que hace el scroll */
.tabla-scrollable-content {
  overflow-x: auto; 
  width: 100%; /* <-- AÑADE ESTO DE VUELTA */
  /* padding-right: 50px; <-- ASEGÚRATE DE QUE ESTO NO ESTÉ */
}
/* --- Estilos para Firefox --- */
.tabla-scrollable-content {
  scrollbar-width: thin; /* Barra de scroll delgada */
  scrollbar-color: #CCCCCC #F8F8F8; /* (Color del pulgar) (Color del riel) */
}

/* --- Estilos para WebKit (Chrome, Safari, Edge) --- */

/* 1. La barra de scroll completa */
.tabla-scrollable-content::-webkit-scrollbar {
  height: 10px; /* Altura de la barra horizontal */
}

/* 2. El "riel" o fondo de la barra */
.tabla-scrollable-content::-webkit-scrollbar-track {
  background: #F8F8F8; /* Un color claro, similar al fondo de la tabla */
  border-radius: 5px;
}

/* 3. El "pulgar" o la parte que se mueve */
.tabla-scrollable-content::-webkit-scrollbar-thumb {
  background-color: #CCCCCC; /* Un gris medio y neutral */
  border-radius: 5px;
  border: 2px solid #F8F8F8; /* Un borde para que parezca más delgada */
}

/* 4. (Opcional) Al pasar el mouse sobre el pulgar */
.tabla-scrollable-content::-webkit-scrollbar-thumb:hover {
  background-color: #AAAAAA; /* Un gris más oscuro */
}

.rwd-table 
  margin: auto;
  min-width: 300px;
  border-collapse: collapse;
  margin-bottom:50px;
}

.rwd-table tr:first-child {
  border-top: none;
  background: #FF5900;
  color: #fff;
}

.rwd-table tr {
  border-top: 1px solid #ddd;
 /* border-bottom: 1px solid #ddd;*/
  background-color: #F8F8F8;
}

.rwd-table tr:nth-child(odd):not(:first-child) {
  background-color: #F2F2F2;
}

.rwd-table th {
  display: none;
}

.rwd-table td {
  display: block;
}

.rwd-table td:first-child {
  margin-top: .5em;
  border-bottom: 1px solid #ccc;
}

.rwd-table td:last-child {
  margin-bottom: .5em;
}

.rwd-table td:before {
  content: attr(data-th) ": ";
  font-weight: bold;
  width: 100%;
  display: inline-block;
  color: #ff5902;
}

.rwd-table th,
.rwd-table td {
  text-align: center;
}

.rwd-table {
  color: #333;
  border-radius: .4em;
  overflow: hidden;
}

.rwd-table tr {
  border-color: #bfbfbf;
}

.rwd-table th,
.rwd-table td {
  padding: .8em .8em;
  border-bottom: 1px solid #ccc;
  font-size: 16px;
}
@media screen and (max-width: 601px) {
  .rwd-table tr:nth-child(2) {
    border-top: none;
  }
  .rwd-table th,
  .rwd-table td {
    text-align: left;
    font-size:17px;
  }
}
@media screen and (min-width: 600px) {
  .rwd-table tr:hover:not(:first-child) {
    background-color: #FFF9F5;
  }
  .rwd-table td:before {
    display: none;
  }
  .rwd-table th,
  .rwd-table td {
    display: table-cell;
    padding: .25em .5em;
  }
  .rwd-table th:first-child,
  .rwd-table td:first-child {
    padding-left: 0;
    border-bottom: 1px solid #ccc;
  }
  .rwd-table th:last-child,
  .rwd-table td:last-child {
    padding-right: 50px !important;
        border-bottom: 1px solid #ccc;
  }
  .rwd-table th,
  .rwd-table td {
    padding: .8em !important;
  }
  .rwd-table th,
  .rwd-table td {
    text-align: left;
  }
}


/* Modificaciones para la clase .btn-secondary */
.botn-secondary-2 {
  /* Fondo */
  background-color: #FF5900; /* El color naranja exacto del botón de la imagen */
  
  /* Borde redondeado */
  border-radius: 8px; /* Un radio de borde suave */
  
  /* Color de texto */
  color: #FFFFFF !important; /* Texto blanco */
  
  /* Fuente y tamaño de texto (ajusta si es necesario para que coincida exactamente) */
  font-family: Arial, sans-serif; /* O la fuente que uses en tu diseño general */
  font-size: 16px; /* Tamaño de fuente, puedes ajustarlo */
  font-weight: bold; /* Negrita */
  text-decoration: none !important; /* Asegura que no tenga subrayado */
  
  /* Espaciado interno (padding) */
  padding: 10px 5px; /* Un buen padding para que se vea como un botón, ajusta si es necesario */
  
  /* Comportamiento del botón */
  display: inline-block; /* Para que el padding funcione correctamente */
  text-align: center; /* Centra el texto dentro del botón */
  
  /* Sombra (opcional, pero ayuda a darle profundidad como el de la imagen) */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
  
  /* Transiciones para efectos hover (opcional, pero mejora la UX) */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto Hover (opcional, pero recomendado para una buena UX) */
.botn-secondary-2:hover {
  background-color: #D65A2D; /* Un tono un poco más oscuro al pasar el mouse */
  box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.15); /* Sombra ligeramente más pronunciada */
}

/* Si tu botón tiene un margin: auto; o display: block; 
   dentro de un estilo inline en el HTML, podrías necesitar esto: */
.row-fluid .span6 .botn-secondary-2 {
    display: block !important; /* Para que ocupe todo el ancho disponible */
    margin: auto !important;   /* Para centrarlo si hay espacio */
}