/* ==========================================================================
   ALCO Inmobiliaria - Catálogo de propiedades
   Listing (property-grid.html) and detail pages (propiedad-*.html).
   Loaded after alco-theme.css; reuses its --alco-* tokens. Every rule is
   scoped to body.alco-catalog so no other page is affected.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page header band (replaces the template's page-title image)
   -------------------------------------------------------------------------- */
.alco-catalog .main-header.header-style-one {
  background-color: var(--alco-blue-dark);
}

.alco-catalog .alco-page-title {
  background: linear-gradient(180deg, var(--alco-blue-dark) 0%, var(--alco-blue-deep) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  min-height: 0;
  padding: 70px 0 64px;
}

.alco-catalog .alco-page-title:before {
  display: none;
}

.alco-catalog .alco-page-title .title {
  color: #FFFFFF;
  margin-bottom: 10px;
}

.alco-catalog .alco-page-title .page-breadcrumb li,
.alco-catalog .alco-page-title .page-breadcrumb li a {
  color: rgba(255, 255, 255, 0.78);
}

.alco-catalog .alco-page-title .page-breadcrumb li a:hover {
  color: var(--alco-lime);
}

/* --------------------------------------------------------------------------
   Listing cards
   -------------------------------------------------------------------------- */
.alco-catalog .alco-catalog-list {
  background-color: #F4F6F8;
}

.alco-catalog .alco-catalog-list .row {
  justify-content: center;
}

.alco-catalog .property-box .alco-card-image {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}

.alco-catalog .property-box .alco-card-image img {
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Card covers that reuse the homepage carousel flyers. The flyers carry their
   own text and logo, so they are shown whole (contain, never cropped or
   stretched) in a 4:5 frame — close to the flyers' own shape — on the same
   navy the carousel uses for its letterboxing. */
.alco-catalog .property-box .alco-card-flyer {
  aspect-ratio: 4 / 5;
  background-color: #051A25;
}

.alco-catalog .property-box .alco-card-flyer img {
  object-fit: contain;
}

/* The flyers already show "EN VENTA" and the ALCO logo; the card's own tag
   would sit on top of that logo, so it is hidden on flyer covers only. */
.alco-catalog .property-box .alco-card-flyer ~ .tag {
  display: none;
}

/* States that the flyer is retouched / includes a restoration mock-up. */
.alco-catalog .property-box .alco-flyer-note {
  background-color: rgba(5, 26, 37, 0.88);
  border-left: 3px solid var(--alco-lime);
  border-radius: 4px;
  bottom: 10px;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 500;
  left: 10px;
  line-height: 1.35;
  max-width: calc(100% - 20px);
  padding: 6px 10px;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.alco-catalog .property-box .image-box .tag span {
  background-color: var(--alco-lime);
  color: var(--alco-blue-dark);
  font-weight: 700;
}

.alco-catalog .property-box .content-box .price {
  color: var(--alco-blue-dark);
}

.alco-catalog .alco-currency {
  font-size: 0.6em;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-left: 2px;
  opacity: 0.75;
}

.alco-catalog .property-box .content-box .title {
  margin-bottom: 6px;
}

.alco-catalog .property-box .content-box .title a {
  color: var(--alco-blue-dark);
}

.alco-catalog .property-box .content-box .title a:hover {
  color: var(--alco-blue);
}

.alco-catalog .property-box .content-box .location,
.alco-catalog .property-box .feature-list li {
  color: #4A5966;
}

.alco-catalog .property-box .content-box .location i,
.alco-catalog .property-box .feature-list li .icon {
  color: var(--alco-lime);
}

.alco-catalog .property-box .property-footer .read-more {
  color: var(--alco-blue-dark);
  font-weight: 700;
  letter-spacing: 0.6px;
}

.alco-catalog .property-box .property-footer .read-more:hover {
  color: var(--alco-blue);
}

/* --------------------------------------------------------------------------
   Detail page
   -------------------------------------------------------------------------- */
.alco-property-page .alco-property {
  background-color: #F4F6F8;
}

.alco-property .sproperty-header .title,
.alco-property .sproperty-header .price {
  color: var(--alco-blue-dark);
}

.alco-property .sproperty-header .location,
.alco-property .sproperty-header .price-per-sqft {
  color: #4A5966;
}

.alco-property .sproperty-tag span {
  background-color: var(--alco-lime);
  border-radius: 4px;
  color: var(--alco-blue-dark);
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  padding: 9px 16px;
}

.alco-property .breadcrumb__item {
  color: #4A5966;
}

.alco-property .breadcrumb__item:hover {
  color: var(--alco-blue);
}

/* Gallery: the original photos are mostly vertical, so they are shown whole
   (contain) on a navy stage instead of being cropped or stretched. */
.alco-property .sproperty-banner .ps_mainSwiper .sproperty-large-thumb {
  aspect-ratio: 16 / 10;
  background-color: var(--alco-blue-deep);
  border-radius: 8px;
}

.alco-property .sproperty-banner .ps_mainSwiper .sproperty-large-thumb:before {
  pointer-events: none;
}

.alco-property .sproperty-banner .ps_mainSwiper .sproperty-large-thumb img {
  cursor: zoom-in;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.alco-property .sproperty-banner .ps_mainSwiper .sproperty-large-thumb .more-photo {
  border-radius: 4px;
  color: var(--alco-blue-dark);
  font-weight: 600;
}

.alco-property .sproperty-banner .ps_mainSwiper .sproperty-large-thumb .more-photo:hover {
  background-color: var(--alco-lime);
  color: var(--alco-blue-dark);
}

.alco-property .sproperty-banner .ps_thumbSwiper .swiper-slide {
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
}

.alco-property .sproperty-banner .ps_thumbSwiper .swiper-slide img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.alco-property .sproperty-banner .ps_thumbSwiper .swiper-slide-thumb-active {
  outline: 3px solid var(--alco-lime);
  outline-offset: -3px;
}

.alco-property .sproperty-panel .title,
.alco-property .sproperty-panel .sproperty-item-header {
  color: var(--alco-blue-dark);
}

.alco-property .sproperty-overview-grid .overview-item .icon-wrap {
  background: rgba(var(--theme-color1-rgb), 0.14);
}

.alco-property .sproperty-overview-grid .overview-item:hover .icon-wrap {
  background: rgba(var(--theme-color1-rgb), 0.24);
}

.alco-property .sproperty-overview-grid .icon-wrap svg {
  stroke: var(--alco-blue-dark);
}

/* Longer Spanish labels ("Potencial de restauración") must wrap, not clip. */
.alco-property .sproperty-overview-grid .overview-item .item-label {
  color: #33424E;
  white-space: normal;
}

@media (max-width: 575.98px) {
  .alco-property .sproperty-overview-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 375.98px) {
  .alco-property .sproperty-overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.alco-property .sproperty-panel .text p {
  margin-bottom: 14px;
}

.alco-property .sproperty-panel .text .alco-note {
  border-left: 3px solid var(--alco-lime);
  color: #4A5966;
  font-size: 15px;
  margin-bottom: 0;
  padding-left: 14px;
}

.alco-property .features-grid .feature-item svg {
  color: var(--alco-lime);
}

/* Full-screen viewer (PhotoSwipe): caption and ALCO accents */
/* Above the GHL chat widget (z-index 99999999) while the viewer is open;
   the widget itself is not modified. */
.pswp {
  --pswp-bg: #051A29;
  z-index: 2147483000;
}

.pswp__alco-caption {
  bottom: 18px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  left: 50%;
  line-height: 1.4;
  max-width: calc(100% - 32px);
  padding: 6px 14px;
  pointer-events: none;
  position: absolute;
  text-align: center;
  transform: translateX(-50%);
}

.pswp__counter {
  font-weight: 600;
}

/* Contact card (replaces the template's fictitious agent tabs) */
.alco-contact-card {
  background-color: var(--alco-blue-dark);
  border-radius: 10px;
  color: #FFFFFF;
  padding: 30px 28px 26px;
  position: sticky;
  top: 110px;
}

.alco-contact-card__header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 20px;
  padding-bottom: 18px;
}

.alco-contact-card__logo {
  display: block;
  height: auto;
  width: 150px;
}

.alco-contact-card .alco-contact-card__title {
  color: #FFFFFF;
  margin-bottom: 10px;
}

.alco-contact-card__text {
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 22px;
}

.alco-contact-card .alco-contact-card__btn {
  align-items: center;
  display: flex;
  justify-content: center;
  line-height: 20px;
  margin-bottom: 12px;
  min-height: 54px;
  padding: 15px 20px;
  text-align: center;
  width: 100%;
}

.alco-contact-card .alco-btn-outline {
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.85);
  color: #FFFFFF;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.alco-contact-card .alco-btn-outline:hover {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--alco-blue-dark);
}

.alco-contact-card .alco-btn-outline i {
  margin-right: 6px;
}

.alco-contact-card__ref {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  margin: 8px 0 0;
  text-align: center;
}

@media (max-width: 991.98px) {
  .alco-contact-card {
    margin-top: 10px;
    position: static;
  }
}

@media (max-width: 767.98px) {
  .alco-catalog .alco-page-title {
    padding: 48px 0 44px;
  }

  .alco-property .sproperty-banner .ps_mainSwiper .sproperty-large-thumb {
    aspect-ratio: 4 / 5;
  }

  .alco-property .sproperty-banner .ps_mainSwiper .sproperty-large-thumb .more-photo {
    bottom: 16px;
    padding: 10px 16px;
    right: 16px;
  }
}