/* ============================
   Uso de escala de grises
============================ */

/* Fondos y bordes con grises */
.bg-gray-100 { background-color: var(--bs-gray-100) !important; }
.bg-gray-200 { background-color: var(--bs-gray-200) !important; }
.bg-gray-300 { background-color: var(--bs-gray-300) !important; }
.bg-gray-400 { background-color: var(--bs-gray-400) !important; }
.bg-gray-500 { background-color: var(--bs-gray-500) !important; }
.bg-gray-600 { background-color: var(--bs-gray-600) !important; }
.bg-gray-700 { background-color: var(--bs-gray-700) !important; }
.bg-gray-800 { background-color: var(--bs-gray-800) !important; }
.bg-gray-900 { background-color: var(--bs-gray-900) !important; }
.bg-secondary-100 {background-color: var(--bs-secondary-100) !important;}

.border-gray-100 { border-color: var(--bs-gray-100) !important; }
.border-gray-200 { border-color: var(--bs-gray-200) !important; }
.border-gray-300 { border-color: var(--bs-gray-300) !important; }
.border-gray-400 { border-color: var(--bs-gray-400) !important; }
.border-gray-500 { border-color: var(--bs-gray-500) !important; }
.border-gray-600 { border-color: var(--bs-gray-600) !important; }
.border-gray-700 { border-color: var(--bs-gray-700) !important; }
.border-gray-800 { border-color: var(--bs-gray-800) !important; }
.border-gray-900 { border-color: var(--bs-gray-900) !important; }

.text-gray-100 { color: var(--bs-gray-100) !important; }
.text-gray-200 { color: var(--bs-gray-200) !important; }
.text-gray-300 { color: var(--bs-gray-300) !important; }
.text-gray-400 { color: var(--bs-gray-400) !important; }
.text-gray-500 { color: var(--bs-gray-500) !important; }
.text-gray-600 { color: var(--bs-gray-600) !important; }
.text-gray-700 { color: var(--bs-gray-700) !important; }
.text-gray-800 { color: var(--bs-gray-800) !important; }
.text-gray-900 { color: var(--bs-gray-900) !important; }

.text-primary {color: var(--bs-primary) !important}

/* ============================
   Tamaños de fuente personalizados
============================ */

.text-base {
  font-size: var(--bs-font-size-base) !important;
}

.text-sm {
  font-size: var(--bs-font-size-sm) !important;
}

.text-lg {
  font-size: var(--bs-font-size-lg) !important;
}

.text-xl {
  font-size: var(--bs-font-size-xl) !important;
}

.text-xxl {
  font-size: var(--bs-font-size-xxl) !important;
}

/* ============================
   Ejemplo de uso en encabezados
============================ */

h1 {
  font-size: var(--bs-font-size-xxl);
}

h2 {
  font-size: var(--bs-font-size-xl);
}

h3 {
  font-size: var(--bs-font-size-lg);
}

p,
body,
li {
  font-size: var(--bs-font-size-base);
}

/* ============================
   Botones y enlaces
============================ */
.btn-primary,
button,
input[type="button"],
input[type="submit"],
.wp-block-button__link {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
  border-radius: var(--bs-border-radius, 0.375rem);
  font-size: var(--bs-font-size-base);
  font-family: var(--bs-font-sans-serif);
  text-align: center;
  display: inline-block;
  text-decoration: none;
}

.btn-primary:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
  background-color: var(--bs-primary-dark, var(--bs-primary));
  border-color: var(--bs-primary-dark, var(--bs-primary));
  color: #fff;
  text-decoration: none;
}

.btn-whatsapp {
  background-color: var(--bs-whatsapp);
  border-color: var(--bs-whatsapp);
  color: #fff;
  transition: filter 0.3s ease;
}

.btn-whatsapp:hover,
.btn-whatsapp:focus {
  background-color: var(--bs-whatsapp);
  border-color: var(--bs-whatsapp);
  filter: brightness(0.9);
  outline: none;
}

.btn-x {
  background-color: var(--bs-x);
  border-color: var(--bs-x);
  color: #fff;
  transition: filter 0.3s ease;
}

.btn-x:hover,
.btn-x:focus {
  background-color: var(--bs-x);
  border-color: var(--bs-x);
  filter: brightness(0.9);
  outline: none;
}

.btn-facebook {
  background-color: var(--bs-facebook);
  border-color: var(--bs-facebook);
  color: #fff;
  transition: filter 0.3s ease;
}

.btn-facebook:hover,
.btn-facebook:focus {
  background-color: var(--bs-facebook);
  border-color: var(--bs-facebook);
  filter: brightness(0.9);
  outline: none;
}


/* Enlaces */
a,
a:not(.btn):visited {
  color: var(--bs-primary);
  text-decoration: underline;
  transition: color 0.3s ease;
}

a:hover,
a:focus {
  color: var(--bs-primary-dark, var(--bs-primary));
  text-decoration: none;
  outline: none;
}

/* ============================
   Tipografía y textos
============================ */
body,
p,
li,
dt,
dd {
  font-family: var(--bs-font-sans-serif);
  font-size: var(--bs-font-size-base);
  color: var(--bs-body-color, var(--bs-dark));
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--bs-dark);
  font-family: var(--bs-font-sans-serif);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
  line-height: 1.2;
}

strong,
b {
  color: var(--bs-primary);
  font-weight: 600;
}

/*menu mobile*/

.navbar .navbar-toggler:hover {
  background-color: var(--neutro-600);
  border-color: transparent;
}

@media screen and (max-width: 992px) {
  .navbar-collapse {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, .975);
    z-index: 99;
  }
}

/* ============================
   Formularios
============================ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
textarea,
select {
  border: 1px solid var(--bs-border-color, #ced4da);
  border-radius: var(--bs-border-radius, 0.375rem);
  padding: 0.5em 0.75em;
  font-family: var(--bs-font-sans-serif);
  font-size: var(--bs-font-size-base);
  color: var(--bs-body-color, var(--bs-dark));
  background-color: var(--bs-body-bg, var(--bs-light));
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  width: 100%;
  box-sizing: border-box;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
  outline: none;
}

/* ============================
   Mensajes y alertas
============================ */
.notice,
.wp-block-notice,
.alert {
  border-left: 4px solid var(--bs-primary);
  background-color: var(--bs-light);
  padding: 1em;
  margin-bottom: 1em;
  color: var(--bs-dark);
  border-radius: var(--bs-border-radius, 0.375rem);
}

/* ============================
   Tablas
============================ */
table,
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--bs-font-sans-serif);
  margin-bottom: 1.5rem;
}

table th,
.wp-block-table th {
  background-color: var(--bs-primary);
  color: #fff;
  padding: 0.75em;
  text-align: left;
  border: 1px solid var(--bs-primary);
}

table td,
.wp-block-table td {
  border: 1px solid var(--bs-border-color, #dee2e6);
  padding: 0.75em;
}

/* ============================
   Listas
============================ */
ul,
ol {
  margin-bottom: 1rem;
  padding-left: 2rem;
  color: var(--bs-body-color, var(--bs-dark));
  font-family: var(--bs-font-sans-serif);
}

ul li::marker {
  color: var(--bs-primary);
}

ol li {
  margin-bottom: 0.5rem;
}

/* ============================
   Citas
============================ */
blockquote {
  border-left: 4px solid var(--bs-primary);
  padding-left: 1em;
  color: var(--bs-secondary);
  font-style: italic;
  background-color: var(--bs-light);
  margin: 1rem 0;
  border-radius: var(--bs-border-radius, 0.375rem);
}

/* ============================
   Widgets, sidebar y footer
============================ */
.widget,
.footer-widgets,
.sidebar {
  color: var(--bs-secondary);
  font-family: var(--bs-font-sans-serif);
  font-size: var(--bs-font-size-base);
}

/* ============================
   Breadcrumbs
============================ */
.breadcrumb {
  background-color: transparent;
  padding: 0;
  margin-bottom: 1rem;
  list-style: none;
  font-size: var(--bs-font-size-sm);
}

.breadcrumb li {
  display: inline;
  color: var(--bs-secondary);
}

.breadcrumb li + li::before {
  content: ">";
  padding: 0 0.5rem;
  color: var(--bs-secondary);
}

.breadcrumb a {
  color: var(--bs-primary);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* ============================
   Responsive helpers
============================ */
@media (max-width: 768px) {
  body {
    font-size: var(--bs-font-size-sm);
  }

  .btn-primary,
  button,
  input[type="button"],
  input[type="submit"],
  .wp-block-button__link {
    font-size: var(--bs-font-size-sm);
    padding: 0.4rem 0.8rem;
  }

  h1 {
    font-size: 1.5rem;
  }
}


input, select, textarea {
  padding: calc(var(--spacers-1) + 0.1725rem) var(--spacers-2);
  border: 1px solid var(--neutro-400);
  border-radius: var(--border-radius);
}

/* Iconos dentro de .btn */

.btn svg,
.btn img {
  height: 18px;
}

/* Botón general, que no sea .btn-link */

/* Botón primary */
.btn:not(.btn-link).btn-primary {
  color: var(--white);
}

/* Botón outline primary */
.btn:not(.btn-link).btn-outline-primary:hover i {
  color: var(--white) !important;
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary)
}

/* Botón blanco */
.btn:not(.btn-link).btn-white {
  background: var(--white);
}

/* Hover general en btn:not(.btn-link) */
.btn:not(.btn-link):hover {
  color: var(--white);
}

/* Botón outline secondary */
.btn:not(.btn-link).btn-outline-secondary {
  background-color: var(--white);
  color: var(--bs-secondary);
}

.btn:not(.btn-link).btn-outline-secondary.active {
  background-color:  var(--bs-secondary);
  color:var(--white);
}

.btn:not(.btn-link).btn-outline-secondary:hover {
  background-color: #c1c9e7; 
  color: var(--bs-secondary);
}

/*paginador carusel*/

.swiper {
  border-radius: var(--bs-border-radius-xl);
}

.swiper .swiper-pagination {
  text-align: center;
  margin-top: 1rem;
  position: inherit;
}

.swiper .swiper-pagination-bullet {
  width: 35px;
  height: 35px;
  background: transparent;
  color: var(--neutro-200);
  opacity: 1;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  cursor: pointer;
  margin: 0 5px;
  user-select: none;
  transition: background-color 0.3s, color 0.3s;
  font-weight: normal;
}

.swiper .swiper-pagination-bullet-active {
  background: var(--bs-primary); /* color activo */
  color: white;
}

.swiper .swiper-button-next, .swiper .swiper-button-prev {
  top: auto;
  bottom: 3.5%;
  color: var(--bs-primary);
  font-weight: bold;
}

.swiper-button-next:after, .swiper-button-prev:after {
  --swiper-navigation-size: 1rem
}

/*buscador*/

.search-overlay .btn-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1rem;
  padding: var(--spacers-3);
  border-radius: 50%;
}

.navbar-collapse .btn-close {
  padding: var(--spacers-3);
  border-radius: 50%;
}

.search-overlay .btn-close:hover, .navbar-collapse .btn-close:hover {
  background-color: var(--neutro-600);
  border-color: transparent;
}

.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--white);
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  padding: var(--spacers-5);
  transition: all ease-in-out .2s;
}

.search-overlay #search-form {
  margin-top: var(--spacers-5);
}

.search-overlay .search-box {
  max-width: 660px;
  margin: 0 auto;
  font-size: 28px;
}

.search-overlay .input-group-text, .search-overlay .form-control {
  border-color: var(--neutro-400);
}

.search-overlay .input-group:focus-within {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
    border-radius: var(--border-radius-sm);
}

.search-overlay .input-group> .form-control:focus {
  box-shadow: none;
}

.search-overlay .input-group-text {
  border-top-left-radius: var(--border-radius-sm);
  border-bottom-left-radius: var(--border-radius-sm);
}

.search-overlay #search-form .btn-primary {
  border-top-right-radius: var(--border-radius-sm);
  border-bottom-right-radius: var(--border-radius-sm);
  font-size: 1.2rem;
}

.search-results li {
  padding: var(--spacers-3);
  margin-top: var(--spacers-2);
  border-radius: var(--border-radius-sm);
  animation: fadeDown ease-out .2s forwards;
}

@keyframes fadeDown {
  0% {
    opacity: 0;
    transform: translate(0,20px);
  }
  100% {
    opacity: 1;
    transform: translate(0,0);
  }
}

.search-results li a {
  font-weight: 600;
  text-decoration: none;
  color: var(--neutro-100);
}
.search-results li:hover {
  background: var(--neutro-600);
}

.search-results li a mark {
  background-color: var(--bs-primary-300);
  color: var(--black);
  border-radius: var(--border-radius-sm);
  padding-top: 0;
  padding-bottom: 0;
}
.search-snippet {
  font-size: 0.9rem;
  color: var(--neutro-100);
  margin: 0;
}

.mark, mark {
  background-color: var(--bs-primary-100);
}

.category-absolute a {
  text-decoration: none;
  color: var(--bs-secondary);
}

.category-absolute a:visited {
  text-decoration: none;
  color: var(--bs-secondary-300);
}

.category-absolute a:hover {
  text-decoration: underline;
}

/*Cards*/
.card {
  --bs-card-inner-border-radius: var(--bs-border-radius-xl);
  --bs-card-border-radius: var(--bs-border-radius-xl);
}

.footer-social a img {
  opacity: 0.8;
  transition: all ease-in-out .2s;
}

.footer-social a:hover img {
  opacity: 1;
  transform: scale(1.1);
}

.min-h-post {
  max-height: 400px;
  object-fit: cover;
}

.card-img-top {
  min-height: 190px;
  object-fit: cover;
}

.img-fluid {
  object-fit: cover;
}

.proyectosCarouseles .carousel-inner {
  padding-top: var(--spacers-4);
}

.proyectosCarouseles .type-house {
    background: rgba(255, 255, 255, 0.8);
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

.proyectosCarouseles .image-card-proyect img {
    height: 140px;
    object-fit: cover;
}


.proyectosCarouseles .carousel-control-prev, .proyectosCarouseles .carousel-control-next {
    width: 42px;
    height: 42px;
    background-color: var(--bs-primary);
    top: 0;
    bottom: 0;
    margin: auto
}

.proyectosCarouseles .carousel-control-prev:hover,.proyectosCarouseles .carousel-control-next:hover {
    background-color: var(--bs-primary-hover)
}

.proyectosCarouseles .carousel-control-prev .carousel-control-prev-icon, .proyectosCarouseles .carousel-control-prev .carousel-control-next-icon,.proyectosCarouseles .carousel-control-next .carousel-control-prev-icon,.proyectosCarouseles .carousel-control-next .carousel-control-next-icon {
    transform: inherit
}


.proyectosCarouseles .carousel-control-prev {
    left: -40px
}

.proyectosCarouseles .carousel-control-next {
    right: -40px
}

.proyectosCarouseles .card {
  transition: transform ease-in-out 0.2s;
}
/*
.proyectosCarouseles .card:hover {
  transform: scale(1.05);
}*/

.carousel-control-prev, .carousel-control-next {
    background-color: #fff;
    opacity: 1;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    top: auto;
    bottom: auto
}

@media screen and (max-width: 768px) {
    .carousel-control-prev,.carousel-control-next {
        width:80px;
        height: 80px
    }
}

div#proyectosCarousel3 {
    width: 85%;
    margin: 0 auto;
}