/*
Theme Name: Expasio Template v.2
Theme URI: https://expasio.mx/
Author: Marco Mancera
Description: Tema convertido desde un sitio estático (export).
Version: 1.0.0
Text Domain: expasio
*/

.navbar.w-nav {
  box-shadow: 0px -5px 15px #3d3d3d;
}


.pequeno {
  max-width: 85%;
  margin: 0 auto;
}

.property-slider .slide-bg,
.w-slide {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.preciostyle {
	font-size: 26px;
	font-weight: bold;
}

.house-icon-div {
	border: 1px solid #d6d6d6;
	border-radius: 10px;
	padding: 10px;
	margin-bottom: 20px !important;
	justify-content: space-around !important;
}

.home-flex-child .house-icon-div + .house-icon-div{
  margin-bottom: 50px !important;
}

.section.white-smoke .container.filtros{
  max-width: 85% !important;
  padding: 0 0 20px !important;
}

.video-embed{
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: #000;
  overflow: hidden;
  border-radius: 12px; /* opcional */
}

.video-embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.brochure-download a{
  display:inline-block;
  padding:12px 16px;
  border-radius:5px;
  text-decoration:none;
  border:1px solid black;
  color: black;
}

.videox {
  flex-direction: column;
}

.video-section {
  margin-bottom: 15px;
}

.house-item-wrapper {
  position: relative;
}

.home-name-and-address-linkblock {
  position: static;
}

.home-name-and-address-linkblock::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* El botón "VER PROPIEDAD" queda encima del overlay */
.button-div-2 {
  position: relative;
  z-index: 2;
}

.whatsapp-button {
  background-color: #04cf9c;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 50px;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  text-decoration: none;
  display: flex;
}

.whatsapp-button:hover {
  background-color: #00ac80;
  color: white;
  font-weight: bold;
}

.whatsapp-p {
    color: #fff;
    margin-bottom: 0;
    font-size: 18px;
    font-weight: bold;
    margin-left: 10px;
}

/* Breadcrumb — single propiedad */
.expasio-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.4);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.expasio-breadcrumb a {
  color: rgba(0, 0, 0, 0.55);
  text-decoration: none;
  transition: color 0.2s;
}

.expasio-breadcrumb a:hover {
  color: #000000;
}

.expasio-breadcrumb span[aria-hidden] {
  color: rgba(0, 0, 0, 0.3);
}

.expasio-breadcrumb span:not([aria-hidden]) {
  color: rgba(0, 0, 0, 0.75);
  font-weight: 500;
}

.section.no-top-padding.expg-wrap {
  padding: 0px 10px;
}
#expasio-filter-label{
  max-width:85%; 
  margin: 0 auto;
}

.pushup {
  margin-top: 50px;
}

@media (max-width: 767px){

  /* Carril full-bleed */
  .home-props-rail{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    padding: 8px 16px 16px;
    scroll-padding-left: 16px;
    scroll-padding-right: 16px;
  }

  /* 🔥 Aquí está la clave: anula el grid de Webflow */
  .home-props-rail .house-grid.w-dyn-items{
    display: grid !important;

    /* anula la definición original del grid */
    grid-template-columns: none !important;
    grid-template-rows: none !important;

    /* carrusel horizontal */
    grid-auto-flow: column !important;
    grid-auto-columns: 94% !important;

    gap: 14px !important;
    align-items: stretch !important;
    justify-content: start !important;

    scroll-snap-type: x mandatory;
  }

  /* Items */
  .home-props-rail .w-dyn-item{
    scroll-snap-align: start;
    scroll-snap-stop: always;

    /* NO colapses */
    min-width: 94% !important;   /* 🔥 evita el ancho 0 aunque algo falle */
  }
  
  .house-info-div {
    padding-right: 10px !important;
  }

  /* Card wrapper */
  .home-props-rail .house-item-wrapper{
    width: 100% !important;
    height: 100%;
    overflow: visible;
  }

  @media (max-width: 390px){
    .home-props-rail .house-grid.w-dyn-items{
      grid-auto-columns: 92% !important;
    }
    .home-props-rail .w-dyn-item{
      min-width: 92% !important;
    }
    
    .expasio-breadcrumb {
      margin-bottom: 25px;
    }
    
    .pequeno {
        max-width: 100%;
    }
    
    
    
  }
}

/* =====================================================
   EXPASIO — Arquitectura madre/hijo (Relationship ACF)
   ===================================================== */

/* Link de regreso al post madre (se muestra en posts hijo) */
.expasio-madre-link {
  margin-bottom: 12px;
}

.expasio-madre-link a {
  font-size: 14px;
  font-weight: 500;
  color: #0057ff;
  text-decoration: none;
}

.expasio-madre-link a:hover {
  text-decoration: underline;
}

/* Grid de opciones disponibles (se muestra en post madre) */
.expasio-opciones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}

.expasio-opcion-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .25s ease, transform .25s ease;
  background: #fff;
}

.expasio-opcion-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
  transform: translateY(-2px);
}

.expasio-opcion-titulo {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
}

.expasio-opcion-dato {
  font-size: 13px;
  color: #666;
}

.expasio-opcion-precio {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a2e;
}

.expasio-opcion-cta {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #0057ff;
}

@media (max-width: 767px) {
  .expasio-opciones-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .expasio-opcion-card {
    padding: 14px;
  }
}