@layer finca {

:root {
  --c-acento:       #9E4B5C;   
  --c-acento-claro: #B86579;
}

.espacios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--e-2);
}

.espacio {
  border: 1px solid var(--c-linea);
  border-radius: var(--r-md);
  padding: var(--e-3);
  background: var(--c-fondo);
  transition: border-color var(--d-rapida) var(--curva),
              box-shadow var(--d-rapida) var(--curva);
}
@media (hover: hover) {
  .espacio:hover {
    border-color: var(--c-acento);
    box-shadow: var(--s-md);
  }
}

.espacio__tipo {
  font-size: var(--t-xs);
  letter-spacing: var(--ls-ancho);
  text-transform: uppercase;
  color: var(--c-tinta-suave);
}
.espacio h3 {
  font-size: var(--t-lg);
  margin-block: 4px var(--e-1);
}
.espacio__pax {
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  line-height: 1;
  color: var(--c-acento);
}
.espacio__pax span {
  font-family: var(--f-texto);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-ancho);
  text-transform: uppercase;
  color: var(--c-tinta-suave);
  margin-left: 4px;
}

.espacio__barra {
  height: 3px;
  background: var(--c-linea);
  margin-top: var(--e-2);
  overflow: hidden;
}
.espacio__barra i {
  display: block;
  height: 100%;
  width: var(--proporcion, 50%);
  background: var(--c-acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--curva-suave);
}
.anim .espacio.visible .espacio__barra i { transform: scaleX(1); }

.simultaneos {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3);
  border-left: 2px solid var(--c-acento);
  background: var(--c-fondo-alt);
}
.simultaneos strong {
  font-family: var(--f-display);
  font-size: var(--t-3xl);
  font-weight: 400;
  line-height: 1;
  color: var(--c-acento);
  flex-shrink: 0;
}
.simultaneos p {
  font-size: var(--t-sm);
  color: var(--c-tinta-suave);
  margin: 0;
}

@media (min-width: 620px) {
  .espacios { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1180px) {
  .espacios { grid-template-columns: repeat(5, 1fr); }
}

}