/* ================ */
/* VARIABLES GLOBALES */
/* ================ */
:root {
  /* Colores */
  --primary-color: #051020;
  --secondary-color: #D4AF37;
  --accent-color: #4CAF50;
  --text-color: #333;
  --light-text: #777;
  --light-bg: #f9f9f9;
  --white: #ffffff;
  --black: #000000;
  --shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);

  /* Fuentes */
  --font-main: 'Open Sans', sans-serif;
  --font-heading: 'Montserrat', sans-serif;

  /* Espaciados */
  --space-sm: 15px;
  --space-md: 30px;
  --space-lg: 60px;
  --radius: 8px;
}

/* ================ */
/* ESTILOS BASE */
/* ================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-main);
  color: var(--text-color);
  line-height: 1.6;
  background-color: var(--light-bg);
  overflow-x: hidden; /* Asegura que no haya scroll horizontal no deseado */
  width: 100%; /* Asegura que el body ocupe el 100% del ancho */
}

.container {
  width: 90%;
  max-width: 1400px; /* Ancho base para la mayoría de los contenedores */
  margin: 0 auto;
  padding: 20px 0;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--primary-color);
}

a {
  text-decoration: none;
  color: inherit;
}

.btn {
  display: inline-block;
  padding: 12px 30px;
  background: var(--secondary-color);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn:hover {
  background-color: var(--primary-color);
  transform: translateY(-2px);
}

/* ================ */
/* CABECERA / NAVEGACIÓN */
/* ================ */
header {
  background-color: var(--white);
  padding: 15px 0;
  border-bottom: 1px solid #eee;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
}

.logo {
  font-family: var(--font-heading);
  font-size: 28px;
  color: var(--primary-color);
  font-weight: 700;
  text-decoration: none;
}

.logo span {
  color: var(--secondary-color);
}

nav ul {
  list-style: none;
  display: flex;
  gap: 30px;
}

nav ul li a {
  font-family: var(--font-main);
  font-weight: 600;
  color: var(--text-color);
  padding: 5px 0;
  transition: color 0.3s ease;
  position: relative;
}

nav ul li a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 2px;
  background-color: var(--secondary-color);
  transition: width 0.3s ease;
}

nav ul li a:hover::after,
nav ul li a.active::after {
  width: 100%;
}

nav ul li a:hover {
  color: var(--primary-color);
}

/* Menú móvil */
.menu-toggle {
  display: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--primary-color);
}


/* ================ */
/* SECCIÓN HERO (Aplicable a Index y a Inmuebles) */
/* ================ */
.hero {
  position: relative;
  background: url('../img/propiedades/gente02.webp') no-repeat center center/cover;
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  padding: 20px;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 36, 99, 0.7); /* Capa oscura azul */
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.hero h1 {
  font-size: 48px;
  margin-bottom: 15px;
  color: white;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.hero p {
  font-size: 20px;
  margin-bottom: 30px;
  color: #f0f0f0;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}

/* ================ */
/* SECCIÓN FILTROS (Solo en Inmuebles) */
/* ================ */
.property-filters {
  background-color: var(--white);
  padding: 20px 0;
  margin-bottom: 30px;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 180px;
}

.filter-group label {
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--primary-color);
}

.filter-group select,
.filter-group input[type="number"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: var(--font-main);
  font-size: 16px;
}

.filter-group .btn {
  align-self: flex-end;
  padding: 10px 25px;
}

/* ================ */
/* SECCIÓN PROPIEDADES (Solo en Inmuebles) */
/* ================ */
.property-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.property-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.property-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.property-card-image {
  width: 100%;
  height: 220px;
  overflow: hidden;
  position: relative;
}

.property-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.property-card:hover .property-card-image img {
  transform: scale(1.05);
}

.property-card-content {
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.property-type {
  background-color: var(--primary-color);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 10px;
}

.property-title {
  font-size: 22px;
  color: var(--primary-color);
  margin-bottom: 10px;
  height: 60px; /* Altura fija para el título */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Limita a 2 líneas */
  line-clamp: 2; /* Propiedad estándar */
  -webkit-box-orient: vertical;
}

.property-location {
  font-size: 16px;
  color: var(--light-text);
  margin-bottom: 15px;
}

.property-features {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 15px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.property-features span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  color: #555;
}

.property-features span i {
  color: var(--secondary-color);
  font-size: 18px;
}

.property-price {
  font-size: 26px;
  font-weight: 700;
  color: var(--primary-color);
  text-align: right;
  margin-top: auto;
}

.property-card-footer {
  padding: 15px 20px 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
}

.property-card-footer .btn {
  padding: 10px 20px;
  font-size: 16px;
}

/* Paginación */
.pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
  margin-bottom: 40px;
}

.pagination button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.pagination button:hover:not(.active) {
  background-color: var(--secondary-color);
}

.pagination button.active {
  background-color: var(--secondary-color);
  cursor: default;
}

/* ================ */
/* SECCIÓN DETALLE DE PROPIEDAD (Estilos consolidados de fichas individuales) */
/* ================ */

/* Ajuste de ancho de contenedor específico para las páginas de detalle */
.property-content .container {
    max-width: 1200px;
}

.property-content {
  background: var(--white);
  padding: 30px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-top: 30px;
}

.property-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

.property-header .property-title { /* Mayor especificidad para el título de la ficha */
  font-size: 2.5rem;
  color: var(--primary-color);
  margin: 0;
  line-height: 1.2;
  height: auto; /* Anula la altura fija del título de la tarjeta */
  -webkit-line-clamp: unset; /* Anula el límite de líneas del título de la tarjeta */
  line-clamp: unset; /* Propiedad estándar */
}

.property-ref {
  font-size: 1.1rem;
  color: var(--light-text);
  margin-top: 5px;
}

.property-header .property-price { /* Mayor especificidad para el precio de la ficha */
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--secondary-color);
  margin: 0;
  text-align: left; /* Ajuste de alineación para el encabezado */
}

/* Galería de Imágenes */
.property-gallery {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 15px;
  margin-bottom: 30px;
}

.main-image {
  height: 450px;
  overflow: hidden;
  border-radius: 8px;
  position: relative;
}

.main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumbnails {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 450px; /* Asegura que no desborde si hay muchas miniaturas */
  overflow-y: auto; /* Permite scroll si hay muchas miniaturas */
  padding-right: 5px; /* Espacio para la barra de scroll */
}

.thumbnail-item {
  height: 100px;
  overflow: hidden;
  border-radius: 5px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.thumbnail-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumbnail-item.active, .thumbnail-item:hover {
  border-color: var(--secondary-color);
}

/* Detalles de la Propiedad */
.property-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  background: var(--light-bg);
  padding: 25px;
  border-radius: var(--radius);
  margin-bottom: 30px;
}

.detail-group {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  color: var(--text-color);
}

.detail-group i {
  color: var(--primary-color);
  font-size: 1.4rem;
}

/* Descripción */
.property-description {
  margin-bottom: 30px;
}

.property-description h2 {
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: var(--primary-color);
}

.property-description p {
  line-height: 1.8;
  margin-bottom: 10px;
  color: var(--text-color);
}

/* Lista de Amenities */
.amenities-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  list-style: none;
  margin-bottom: 30px;
}

.amenities-list li {
  background: var(--white);
  padding: 10px 15px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  color: var(--primary-color);
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.amenities-list li i {
  color: var(--accent-color);
}

/* Badges de Características */
.feature-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}

.feature-badge {
  background-color: var(--secondary-color);
  color: var(--white);
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.feature-badge i {
  font-size: 1rem;
}

/* Certificado Energético */
.energy-certificate {
  background: var(--primary-color);
  color: var(--white);
  padding: 20px;
  border-radius: var(--radius);
  text-align: center;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.energy-certificate h3 {
  color: var(--secondary-color);
  margin-bottom: 10px;
}

.energy-certificate .grade {
  font-size: 3rem;
  font-weight: 700;
  background: var(--white);
  color: var(--primary-color);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 10px;
}

.energy-certificate p {
  font-size: 1.1rem;
  line-height: 1.5;
}

/* Herramientas */
.property-tools {
  margin: 30px 0;
  background: var(--white);
  padding: 25px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Centrar botones */
  gap: 15px;
}

.property-tools h3 {
  width: 100%;
  font-family: var(--font-heading);
  color: var(--primary-color);
  margin-bottom: 15px;
  font-size: 1.4rem;
  text-align: center;
}

.download-btn, .print-btn {
  background: var(--accent-color); /* Usar accent-color para descarga/impresión */
  color: var(--white);
  border: none;
  padding: 12px 25px;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  transition: all 0.3s;
}

.download-btn:hover, .print-btn:hover {
  background: #3e8e41; /* Tono más oscuro de accent-color */
  transform: translateY(-2px);
}

/* Tour Virtual / Mapa */
.virtual-tour, .property-map {
  margin: 30px 0;
  background: var(--white);
  padding: 25px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.virtual-tour h3, .property-map h3 {
  font-family: var(--font-heading);
  color: var(--primary-color);
  margin-bottom: 15px;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.virtual-tour .video-container, .property-map .map-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  border-radius: 8px;
}

.virtual-tour iframe, .property-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Contacto Agente */
.agent-contact {
  margin: 30px 0;
  background: var(--white);
  padding: 25px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center; /* Centrar contenido */
  text-align: center;
}

.agent-contact h3 {
  font-family: var(--font-heading);
  color: var(--primary-color);
  margin-bottom: 20px;
  font-size: 1.6rem;
  width: 100%;
}

.agent-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.agent-info img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--secondary-color);
}

.agent-info p {
  font-size: 1.1rem;
  color: var(--text-color);
}

.agent-info p strong {
  display: block;
  font-size: 1.3rem;
  color: var(--primary-color);
}

.agent-social {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.agent-social a {
  font-size: 28px;
  color: var(--primary-color);
  transition: color 0.3s ease;
}

.agent-social a:hover {
  color: var(--secondary-color);
}

.agent-contact .btn {
  width: fit-content;
  padding: 10px 25px;
  font-size: 18px;
  background: var(--primary-color); /* Botón de contacto principal */
}

.agent-contact .btn:hover {
  background: var(--secondary-color);
}

/* Compartir Propiedad */
.property-share {
  margin: 30px 0;
  background: var(--white);
  padding: 25px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.property-share h3 {
  font-family: var(--font-heading);
  color: var(--primary-color);
  margin-bottom: 15px;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.share-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.share-buttons a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border-radius: 5px;
  font-weight: 600;
  color: var(--white);
  transition: opacity 0.3s ease;
}
.share-buttons a:hover {
  opacity: 0.8;
}

.share-buttons .whatsapp { background-color: #25D366; }
.share-buttons .twitter { background-color: #1DA1F2; }
.share-buttons .facebook { background-color: #1877F2; }
.share-buttons .linkedin { background-color: #0A66C2; }
.share-buttons .email { background-color: #D44638; }


/* ================ */
/* FOOTER */
/* ================ */
footer {
  background-color: var(--primary-color);
  color: white;
  padding: 40px 0 20px;
  font-family: var(--font-main);
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-column {
  margin-bottom: 20px;
}

.footer-column p,
.footer-column a {
  font-size: 15px;
  line-height: 1.8;
  color: white; /* Asegurar que los enlaces tengan color blanco */
}

.footer-column a:hover {
  text-decoration: underline;
}

.footer-title {
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--secondary-color);
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 10px;
}

.footer-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 2px;
  background-color: white;
}

.footer-social {
  display: flex;
  gap: 15px;
  margin-top: 15px;
}

.footer-social a {
  color: white;
  font-size: 20px;
  transition: color 0.3s ease;
}

.footer-social a:hover {
  color: var(--secondary-color);
}

.footer-list {
  list-style: none;
}

.footer-list li {
  margin-bottom: 10px;
}

.footer-copyright {
  text-align: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 14px;
  color: rgba(255,255,255,0.7);
}

/* ================ */
/* BOTÓN "SUBIR ARRIBA" */
/* ================ */
#btn-top {
  display: none; /* Oculto por defecto, JS lo muestra */
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 50%; /* Hace que el botón sea circular */
  width: 50px;
  height: 50px;
  font-size: 24px;
  line-height: 50px; /* Centra el texto verticalmente */
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 999;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

#btn-top:hover {
  background-color: var(--secondary-color);
  transform: translateY(-3px);
}

/* ================ */
/* MEDIA QUERIES (RESPONSIVE) */
/* ================ */

@media (max-width: 992px) { /* Añadido para la galería de propiedades */
  .property-gallery {
    grid-template-columns: 1fr;
  }
  .thumbnails {
    flex-direction: row;
    overflow-x: auto;
    max-height: none;
    padding-bottom: 5px;
    padding-right: 0;
  }
  .thumbnail-item {
    min-width: 120px;
    height: 80px;
  }
}

@media (max-width: 768px) {
  .header-container {
    padding: 0 15px; /* Ajuste para móviles */
  }

  nav {
    display: none;
    width: 100%;
    position: absolute;
    top: 70px;
    left: 0;
    background-color: var(--white);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    z-index: 999;
  }

  nav.active {
    display: block;
  }

  nav ul {
    flex-direction: column;
    gap: 0;
  }

  nav ul li {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #eee;
  }

  nav ul li:last-child {
    border-bottom: none;
  }

  nav ul li a {
    display: block;
    padding: 15px 0;
  }

  .menu-toggle {
    display: block;
  }

  .hero h1 {
    font-size: 36px;
  }

  .hero p {
    font-size: 18px;
  }

  .property-grid {
    grid-template-columns: 1fr;
    padding: 0 10px;
  }

  .footer-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-title::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .footer-social {
    justify-content: center;
  }

  .property-filters {
    flex-direction: column;
    gap: 15px;
    padding: 20px;
  }

  .filter-group {
    min-width: unset;
    width: 100%;
  }

  .filter-group .btn {
    margin-top: 15px;
  }

  /* Puedes necesitar ajustar esto si tienes una sección de equipo en tu index */
  .team-grid {
    grid-template-columns: 1fr;
    max-width: none;
  }

  /* Estilos responsive específicos para las páginas de detalle de propiedad */
  .container {
    padding: 0 15px;
  }
  .property-content, .property-tools, .virtual-tour, .property-map, .agent-contact, .property-share {
    padding: 20px;
  }
  .property-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .property-header .property-title {
    font-size: 2rem;
  }
  .property-header .property-price {
    font-size: 2.2rem;
  }
  .main-image {
    height: 300px;
  }
  .property-details {
    grid-template-columns: 1fr;
  }
  .amenities-list {
    grid-template-columns: 1fr;
  }
  .property-tools {
    flex-direction: column;
  }
  .download-btn, .print-btn {
    width: 100%;
    justify-content: center;
  }
  .agent-contact {
    padding: 20px;
  }
}

/* Estilos para impresión (Actualizado y consolidado de fichas individuales) */
@media print {
  .property-content {
    background: var(--white);
    padding: 20px;
    border-radius: var(--radius);
    box-shadow: none;
  }

  header, footer, .property-tools,
  .agent-contact, .virtual-tour, .property-share,
  .menu-toggle, #btn-top { /* Se añadió .virtual-tour y #btn-top para ocultar en impresión */
    display: none !important;
  }

  .container {
    width: 100%;
    padding: 0;
  }

  .property-gallery {
    grid-template-columns: 1fr !important;
  }

  .main-image {
    height: 300px !important;
  }

  .thumbnails {
    display: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.4;
    color: #000;
    background: none;
  }

  .property-price {
    color: #000 !important;
  }

  .property-features, .property-details {
    page-break-inside: avoid;
  }

  .energy-certificate, .feature-badge {
    background-color: transparent !important;
    color: #000 !important;
    padding: 0;
    box-shadow: none;
    border: none;
    border-radius: 0;
    margin: 0;
  }

  .energy-certificate h3, .feature-badge i {
    color: #000 !important;
  }

  .energy-certificate .grade {
    background: none !important;
    color: #000 !important;
    border: 1px solid #ccc;
  }

  .share-buttons {
    display: none !important;
  }

  .property-description h2 {
    color: #000 !important;
  }
}

/* Sección Hero de Propiedades */
.properties-hero {
  /* Combinamos el color semi-transparente y la imagen en una sola propiedad background */
  background: linear-gradient(rgba(10, 36, 99, 0.7), rgba(10, 36, 99, 0.7)), /* Capa azul con 70% de opacidad (0.7) */
              url('../img/inmuebles/Puesta.JPG') no-repeat center center / cover; /* La imagen de fondo */
  
  /* Puedes ajustar la opacidad cambiando el '0.7' a un valor entre 0 (totalmente transparente) y 1 (totalmente opaco) */

  color: var(--white); /* El texto seguirá siendo blanco */
  padding: 80px 0;
  text-align: center;
  /* ... el resto de tus estilos para .properties-hero ... */
}

.properties-hero {
  background-color: var(--primary-color); /* Esto aplicará el color azul definido en tus variables */
  color: var(--white); /* El texto será blanco para contrastar */
  padding: 80px 0; /* Espaciado arriba y abajo */
  text-align: center; /* Centrar el texto */
}

.properties-hero h1 {
  font-size: 3em; /* Tamaño grande para el título */
  margin-bottom: 15px; /* Espacio debajo del título */
}

.properties-hero p {
  font-size: 1.2em; /* Tamaño para el subtítulo */
  max-width: 800px; /* Limitar el ancho del párrafo para mejor lectura */
  margin: 0 auto; /* Centrar el párrafo */
}

.property-card .reference-number {
  font-size: 0.9em;
  color: #777;
  margin-top: 5px; /* Ajusta según necesites */
  text-align: right; /* O left, center */
}

.property-card .reference-number .ref-value {
  font-weight: bold;
  color: #333; /* O un color que resalte */
}

/* --- Estilos para el Carrusel en la Sección Hero --- */

.hero-home {
    position: relative; /* Esencial para posicionar el contenido y los botones del carrusel */
    overflow: hidden; /* Oculta cualquier parte de las imágenes que se salga del contenedor */
    height: 70vh; /* Altura de la sección hero, ajusta según necesites */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff; /* Asegura que el texto principal sea blanco */
    background-color: #333; /* Color de fondo mientras carga o si no hay imágenes */
}

.carousel-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* Usamos flexbox para alinear las diapositivas */
    transition: transform 0.8s ease-in-out; /* Transición suave para el movimiento del carrusel */
}

.carousel-slide {
    min-width: 100%; /* Cada diapositiva ocupa el 100% del ancho del contenedor */
    height: 100%;
    position: relative; /* Para que la imagen ocupe todo el slide */
    overflow: hidden; /* Por si la imagen es demasiado grande */
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra el espacio sin distorsionarse */
    object-position: center; /* Centra la imagen */
    display: block; /* Elimina espacio extra debajo de la imagen */
}

/* Contenido del Hero (texto y botones) */
.hero-content {
    position: relative; /* Asegura que el contenido esté por encima del carrusel */
    z-index: 2; /* Mayor que las imágenes del carrusel */
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.4); /* Fondo semi-transparente para mejor legibilidad */
    border-radius: 8px;
    max-width: 800px;
    margin: 0 auto;
}

.hero-content h1 {
    font-size: 3em;
    margin-bottom: 15px;
}

.hero-content p {
    font-size: 1.2em;
    margin-bottom: 30px;
}

.hero-buttons .btn {
    margin: 0 10px;
}

/* Botones de navegación (flechas) */
.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 15px 20px;
    cursor: pointer;
    font-size: 1.5em;
    z-index: 3; /* Para que estén por encima de todo */
    border-radius: 50%; /* Botones redondos */
    transition: background-color 0.3s ease;
}

.carousel-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.carousel-button.prev {
    left: 20px;
}

.carousel-button.next {
    right: 20px;
}

/* Indicadores de diapositivas (puntos) */
.carousel-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 10px;
}

.dot {
    height: 12px;
    width: 12px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.dot.active {
    background-color: #fff;
    transform: scale(1.2); /* Un poco más grande cuando está activo */
}

/* --- Adaptación Responsive --- */
@media (max-width: 768px) {
    .hero-home {
        height: 60vh; /* Ajusta la altura en móviles */
    }

    .hero-content h1 {
        font-size: 2em;
    }

    .hero-content p {
        font-size: 1em;
    }

    .carousel-button {
        padding: 10px 15px;
        font-size: 1.2em;
    }

    .carousel-button.prev {
        left: 10px;
    }

    .carousel-button.next {
        right: 10px;
    }
}

@media (max-width: 480px) {
    .hero-home {
        height: 50vh;
    }
    .hero-content h1 {
        font-size: 1.8em;
    }
    .hero-buttons {
        flex-direction: column; /* Botones apilados en móviles muy pequeños */
    }
    .hero-buttons .btn {
        margin: 10px 0;
    }
}


/* --- Estilos para la Sección de Inmuebles Destacados --- */

.section#inmuebles .section-text {
    /* Ajusta si es necesario para que el contenido se vea bien con el grid */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el texto y el grid */
    text-align: center; /* Centra el texto */
}

.featured-properties-grid {
    display: grid;
    /* Define columnas: 3 columnas en pantallas grandes, con espacio entre ellas */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px; /* Espacio entre las tarjetas */
    margin-top: 40px; /* Espacio superior para separar del texto introductorio */
    margin-bottom: 40px; /* Espacio inferior para separar del botón "Ver todas" */
    width: 100%; /* Ocupa todo el ancho disponible del contenedor */
    max-width: 1200px; /* Ancho máximo para el grid */
    padding: 0 15px; /* Pequeño padding lateral para móviles */
}

.property-card {
    background-color: #ffffff; /* Fondo blanco para las tarjetas */
    border-radius: 10px; /* Bordes redondeados */
    overflow: hidden; /* Asegura que la imagen no se salga de los bordes redondeados */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Sombra sutil para un efecto de elevación */
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición para efectos hover */
}

.property-card:hover {
    transform: translateY(-5px); /* Pequeño levantamiento al pasar el ratón */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada al pasar el ratón */
}

.property-card img {
    width: 100%;
    height: 200px; /* Altura fija para las imágenes de las tarjetas */
    object-fit: cover; /* Asegura que la imagen cubra el espacio sin distorsionarse */
    display: block; /* Elimina espacio extra debajo de la imagen */
    border-bottom: 1px solid #eee; /* Pequeña línea divisoria */
}

.card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Permite que el contenido se expanda y empuje el botón hacia abajo */
    text-align: left; /* Alinea el texto a la izquierda dentro de la tarjeta */
}

.card-content h3 {
    font-size: 1.5em;
    color: #333; /* Color oscuro para el título */
    margin-bottom: 10px;
    min-height: 2em; /* Asegura un mínimo de altura para el título */
}

.card-content p {
    font-size: 0.95em;
    color: #666; /* Color gris para el párrafo */
    line-height: 1.6;
    margin-bottom: 15px;
    flex-grow: 1; /* Permite que el párrafo ocupe el espacio disponible */
}

.property-price {
    font-size: 1.3em;
    font-weight: 700; /* Negrita */
    color: #051020; /* Un color distintivo para el precio (puedes usar tu color principal) */
    margin-top: auto; /* Empuja el precio y el botón hacia abajo */
    margin-bottom: 15px;
    text-align: right; /* Alinea el precio a la derecha */
}

.card-btn {
    display: inline-block; /* Para que el padding y los márgenes funcionen bien */
    width: auto; /* Ancho automático, no 100% de la tarjeta */
    align-self: flex-end; /* Alinea el botón a la derecha dentro de la columna */
    text-align: center;
    padding: 10px 20px;
    font-size: 0.9em;
    border-radius: 5px;
    background-color: #007bff; /* O el color principal de tu marca */
    color: white;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.card-btn:hover {
    background-color: #0056b3; /* Color más oscuro al pasar el ratón */
}

/* --- Adaptación Responsive para Inmuebles Destacados --- */
@media (max-width: 992px) {
    .featured-properties-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 2 columnas en tablets */
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .featured-properties-grid {
        grid-template-columns: 1fr; /* 1 columna en móviles */
        gap: 20px;
        padding: 0 20px; /* Más padding para los lados en móviles */
    }

    .property-card img {
        height: 250px; /* Ajustar altura de imagen en móvil si es necesario */
    }

    .card-content {
        padding: 15px;
    }

    .card-content h3 {
        font-size: 1.3em;
    }

    .card-content p {
        font-size: 0.9em;
    }
    
    .card-btn {
        width: 100%; /* Botón al 100% en móvil */
        align-self: center; /* Centrar botón en móvil */
    }
}


#testimonios .section-text {
    /* Ajustes para el texto general de la sección de testimonios */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.testimonials-slider-container {
    position: relative;
    width: 100%;
    max-width: 800px; /* Ancho máximo del slider de testimonios */
    margin: 40px auto 0; /* Margen para centrar y separar del texto superior */
    overflow: hidden; /* Oculta los testimonios que no están activos */
    border-radius: 10px;
    background-color: #f9f9f9; /* Un fondo ligeramente diferente para el slider */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.testimonials-slide-wrapper {
    display: flex; /* Permite que los slides se alineen horizontalmente */
    transition: transform 0.8s ease-in-out; /* Transición suave para el movimiento del slider */
}

.testimonial-slide {
    min-width: 100%; /* Cada slide de testimonio ocupa el 100% del ancho del contenedor */
    box-sizing: border-box; /* Incluye padding y border en el ancho */
    padding: 30px 50px; /* Padding dentro de cada slide */
    text-align: center;
    display: flex; /* Para centrar contenido verticalmente si es necesario */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.testimonial-card {
    /* Ajustes para el contenido interno de cada testimonio, si es una tarjeta */
    width: 100%;
    max-width: 600px; /* Ancho máximo del contenido del testimonio dentro del slide */
}

.testimonial-card blockquote {
    font-size: 1.2em;
    font-style: italic;
    color: #555;
    margin-bottom: 20px;
    line-height: 1.6;
    quotes: "“" "”" "‘" "’"; /* Define comillas para blockquote */
}

.testimonial-card blockquote::before {
    content: open-quote;
    font-size: 2em;
    color: #007bff; /* Color de las comillas (ajusta a tu marca) */
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.4em;
}

.testimonial-card blockquote::after {
    content: close-quote;
    font-size: 2em;
    color: #007bff; /* Color de las comillas (ajusta a tu marca) */
    line-height: 0.1em;
    margin-left: 0.25em;
    vertical-align: -0.4em;
}

.testimonial-card .client-name {
    font-weight: 600;
    color: #333;
    margin-top: 15px;
    font-size: 1.1em;
}

/* Opcional: Estilos para la foto del cliente si la añades */
.testimonial-card .client-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
    border: 3px solid #007bff; /* Borde alrededor de la foto */
}

/* Botones de navegación (flechas) del slider de testimonios */
.slider-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1.2em;
    z-index: 10; /* Asegura que estén por encima del contenido */
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.slider-button:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

.slider-button.prev-testimonial {
    left: 10px;
}

.slider-button.next-testimonial {
    right: 10px;
}

/* Puntos de navegación (dots) del slider de testimonios */
.testimonials-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 8px;
}

.testimonials-dots .dot {
    height: 10px;
    width: 10px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.testimonials-dots .dot.active {
    background-color: #007bff; /* Color de tu marca para el dot activo */
    transform: scale(1.2);
}

/* --- Adaptación Responsive para Testimonios --- */
@media (max-width: 768px) {
    .testimonials-slider-container {
        max-width: 100%; /* Ocupa todo el ancho disponible en móviles */
        margin-left: 20px; /* Pequeño margen para los lados */
        margin-right: 20px;
    }

    .testimonial-slide {
        padding: 20px 30px; /* Ajusta el padding en móviles */
    }

    .testimonial-card blockquote {
        font-size: 1.1em;
    }

    .slider-button {
        padding: 8px 12px;
        font-size: 1em;
    }

    .slider-button.prev-testimonial {
        left: 5px;
    }

    .slider-button.next-testimonial {
        right: 5px;
    }

    .testimonials-dots {
        bottom: 10px;
    }
}

@media (max-width: 480px) {
    .testimonial-slide {
        padding: 15px 20px;
    }
    .testimonial-card blockquote {
        font-size: 1em;
    }
    .testimonial-card .client-name {
        font-size: 0.95em;
    }
}


.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 3 columnas en pantallas grandes, ajustables */
    gap: 30px; /* Espacio entre los elementos */
    margin-top: 40px; /* Margen superior para separarse del párrafo */
    margin-bottom: 40px; /* Margen inferior para separarse del botón */
    padding: 0 20px; /* Pequeño padding lateral */
    width: 100%;
    max-width: 900px; /* Ancho máximo para el grid de contadores */
    justify-content: center; /* Centra el grid si hay menos de 3 columnas */
    align-items: start; /* Alinea los elementos al inicio verticalmente */
}

.stat-item {
    text-align: center;
    padding: 20px;
    background-color: #f0f8ff; /* Un fondo ligeramente azulado */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.stat-item .stat-icon {
    font-size: 3.5em; /* Tamaño del icono */
    color: #007bff; /* Color principal de tu marca */
    margin-bottom: 15px;
}

.stat-item .stat-number {
    font-size: 3em; /* Tamaño del número */
    font-weight: 700;
    color: #333;
    line-height: 1; /* Elimina espacio extra de línea */
}

.stat-item .stat-suffix {
    font-size: 2em; /* Tamaño del sufijo (ej. '+') */
    font-weight: 700;
    color: #333;
    vertical-align: super; /* Coloca el sufijo ligeramente arriba */
    margin-left: 5px; /* Espacio entre número y sufijo */
}

.stat-item .stat-text {
    font-size: 1.1em;
    color: #666;
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Adaptación Responsive para Contadores --- */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* 2 columnas en tablets */
        gap: 20px;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .stat-item .stat-icon {
        font-size: 3em;
    }

    .stat-item .stat-number {
        font-size: 2.5em;
    }

    .stat-item .stat-suffix {
        font-size: 1.8em;
    }

    .stat-item .stat-text {
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr; /* 1 columna en móviles muy pequeños */
        gap: 15px;
        padding: 0 15px;
    }

    .stat-item {
        padding: 15px;
    }

    .stat-item .stat-icon {
        font-size: 2.8em;
    }

    .stat-item .stat-number {
        font-size: 2.2em;
    }

    .stat-item .stat-suffix {
        font-size: 1.6em;
    }

    .stat-item .stat-text {
        font-size: 0.95em;
    }
}

.section#servicios .section-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.services-grid {
    display: grid;
    /* Define columnas: 3 columnas en pantallas grandes, con espacio entre ellas */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px; /* Espacio entre las tarjetas de servicio */
    margin-top: 40px; /* Espacio superior para separar del texto introductorio */
    margin-bottom: 40px; /* Espacio inferior para separar del botón "Ver todos" */
    width: 100%;
    max-width: 1000px; /* Ancho máximo para el grid de servicios */
    padding: 0 15px; /* Pequeño padding lateral para móviles */
}

.service-card {
    background-color: #ffffff; /* Fondo blanco para las tarjetas */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición para efectos hover */
}

.service-card:hover {
    transform: translateY(-5px); /* Pequeño levantamiento al pasar el ratón */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada */
}

.service-card .service-icon {
    font-size: 3.5em; /* Tamaño del icono */
    color: #007bff; /* Color principal de tu marca (ajusta si es necesario) */
    margin-bottom: 20px;
}

.service-card .service-content h4 {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 10px;
}

.service-card .service-content p {
    font-size: 0.95em;
    color: #666;
    line-height: 1.6;
}

/* --- Adaptación Responsive para Servicios --- */
@media (max-width: 992px) {
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 2 columnas en tablets */
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr; /* 1 columna en móviles */
        gap: 20px;
        padding: 0 20px;
    }

    .service-card {
        padding: 25px;
    }

    .service-card .service-icon {
        font-size: 3em;
    }

    .service-card .service-content h4 {
        font-size: 1.3em;
    }

    .service-card .service-content p {
        font-size: 0.9em;
    }
}

/* Hero de la Página de Servicios (adaptado a .hero-page) */
.hero-page.services-hero { /* Asegúrate que estas clases están en tu HTML */
    background-color: var(--primary-color); /* Usamos tu variable de color principal */
    color: var(--white); /* Texto blanco */
    padding: 80px 20px;
    text-align: center;
    /* Temporalmente comentado para depuración: */
    /* background-image: url('../img/servicios/hero-servicios.webp'); */
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1; /* Para asegurar que el texto esté sobre la imagen/color */
}

/* Temporalmente comentado para depuración: */
/*
.hero-page.services-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); // Overlay oscuro sobre la imagen
    z-index: -1;
}
*/

.hero-page.services-hero h1 {
    font-size: 3.2em;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Sombra para el texto */
}

.hero-page.services-hero p {
    font-size: 1.3em;
    max-width: 800px;
    margin: 0 auto;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Sombra para el texto */
}


/* El resto de estilos de la página de servicios que te di anteriormente */
/* Asegúrate de que los estilos para .servicio-seccion y .cta-section-servicios también estén en tu CSS */

/* Secciones de Detalle de Servicios (adaptado a .servicio-seccion) */
#services-detail {
    padding: 60px 0;
    background-color: var(--light-bg);
}

.servicio-seccion { /* Clase principal para cada bloque de servicio */
    display: flex;
    flex-direction: row; /* Por defecto: imagen a la izquierda, contenido a la derecha */
    align-items: center;
    gap: 40px; /* Espacio entre imagen y contenido */
    margin-bottom: 80px; /* Espacio entre cada bloque de servicio */
    padding: 30px;
    background-color: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.servicio-seccion:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.servicio-seccion.reverse { /* Para alternar el orden: contenido a la izquierda, imagen a la derecha */
    flex-direction: row-reverse;
}

.servicio-seccion .service-detail-img {
    flex: 1;
    min-width: 300px; /* Ancho mínimo para la imagen */
    text-align: center; /* Para centrar la imagen dentro de su contenedor */
}

.servicio-seccion .service-detail-img img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.servicio-seccion .service-detail-content {
    flex: 2; /* El contenido ocupa más espacio */
    padding: 10px 0; /* Pequeño padding interno */
}

.servicio-seccion .service-detail-content h2 {
    font-size: 2.2em;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.servicio-seccion .service-detail-content p {
    font-size: 1.1em;
    color: var(--text-color);
    line-height: 1.7;
    margin-bottom: 20px;
}

.servicio-seccion .service-detail-content ul {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
}

.servicio-seccion .service-detail-content ul li {
    font-size: 1em;
    color: var(--light-text);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.servicio-seccion .service-detail-content ul li .fas {
    color: var(--secondary-color); /* Color de la marca para el check */
    margin-right: 10px;
    font-size: 1.2em;
}

.servicio-seccion .btn {
    margin-top: 15px;
}

/* Sección de Llamada a la Acción (CTA) al final de la página (adaptado a .cta-section-servicios) */
.cta-section-servicios { /* Adaptado a tu clase */
    padding: 60px 20px;
    background-color: var(--primary-color); /* Usando tu color primario */
    color: var(--white);
    text-align: center;
}

.cta-section-servicios h2 {
    font-size: 2.8em;
    margin-bottom: 15px;
    color: var(--white);
}

.cta-section-servicios p {
    font-size: 1.2em;
    max-width: 700px;
    margin: 0 auto 30px auto;
}

.cta-section-servicios .btn-lg {
    padding: 15px 40px;
    font-size: 1.2em;
    border-radius: 5px;
    background-color: var(--secondary-color); /* Un color que destaque */
    color: var(--white);
    border: 2px solid var(--secondary-color);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.cta-section-servicios .btn-lg:hover {
    background-color: darken(var(--secondary-color), 10%); /* Oscurece un poco al pasar el ratón */
    border-color: darken(var(--secondary-color), 10%);
}

/* --- Responsive para la Página de Servicios --- */
@media (max-width: 992px) {
    .hero-page.services-hero h1 {
        font-size: 2.8em;
    }

    .hero-page.services-hero p {
        font-size: 1.1em;
    }

    .servicio-seccion {
        flex-direction: column; /* Apila imagen y contenido en tabletas */
        text-align: center;
        gap: 30px;
        margin-bottom: 60px;
    }

    .servicio-seccion.reverse {
        flex-direction: column; /* También apila en el caso de 'reverse' */
    }

    .servicio-seccion .service-detail-content {
        padding: 0;
    }

    .servicio-seccion .service-detail-content h2 {
        font-size: 2em;
    }

    .servicio-seccion .service-detail-content ul {
        text-align: left; /* Alinea las listas a la izquierda incluso si el resto está centrado */
        padding-left: 20px; /* Pequeño indentado para las listas */
    }

    .cta-section-servicios h2 {
        font-size: 2.4em;
    }
}

@media (max-width: 768px) {
    .hero-page.services-hero h1 {
        font-size: 2.2em;
    }

    .hero-page.services-hero p {
        font-size: 1em;
    }

    .servicio-seccion {
        padding: 20px;
        margin-bottom: 40px;
    }

    .servicio-seccion .service-detail-content h2 {
        font-size: 1.8em;
        margin-bottom: 15px;
    }

    .servicio-seccion .service-detail-content p {
        font-size: 0.95em;
        margin-bottom: 15px;
    }

    .servicio-seccion .service-detail-content ul li {
        font-size: 0.9em;
    }

    .cta-section-servicios h2 {
        font-size: 2em;
    }

    .cta-section-servicios p {
        font-size: 1em;
    }

    .cta-section-servicios .btn-lg {
        padding: 12px 30px;
        font-size: 1.1em;
    }
}

/* Hero de la página "Sobre Nosotros" */
.hero-page.about-hero {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 80px 20px;
    text-align: center;
    background-image: url('../img/nosotros/hero-nosotros.webp'); /* Asegúrate de crear esta imagen */
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
}

.hero-page.about-hero::before { /* Overlay oscuro sobre la imagen */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Ajusta la opacidad si es necesario */
    z-index: -1;
}

.hero-page.about-hero h1 {
    font-size: 3.5em;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.hero-page.about-hero p {
    font-size: 1.4em;
    max-width: 800px;
    margin: 0 auto;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* Sección de Introducción */
.about-intro {
    padding: 60px 20px;
    text-align: center;
    background-color: var(--white);
}

.about-intro .container {
    max-width: 900px;
}

.about-intro h2 {
    font-size: 2.5em;
    color: var(--primary-color);
    margin-bottom: 25px;
}

.about-intro p {
    font-size: 1.15em;
    color: var(--text-color);
    line-height: 1.8;
    margin-bottom: 20px;
}

/* Responsive para la página "Sobre Nosotros" */
@media (max-width: 992px) {
    .hero-page.about-hero h1 {
        font-size: 2.8em;
    }

    .hero-page.about-hero p {
        font-size: 1.2em;
    }

    .about-intro h2 {
        font-size: 2em;
    }

    .about-intro p {
        font-size: 1em;
    }
}

@media (max-width: 768px) {
    .hero-page.about-hero h1 {
        font-size: 2.2em;
    }

    .hero-page.about-hero p {
        font-size: 1em;
    }
}

/* --- Footer --- */
.site-footer {
    background-color: var(--primary-color);
    color: var(--white);
    padding: var(--space-lg) 0;
    font-size: 0.9em;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
}

.footer-column {
    flex: 1;
    min-width: 200px;
    max-width: 250px;
}

.footer-logo { /* ESTA ES LA CLASE QUE FALTABA Y QUE DEBES AÑADIR */
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.8em; /* Puedes ajustar este tamaño si lo ves pequeño */
    color: var(--white); /* El color blanco del texto */
    text-decoration: none;
    display: block;
    margin-bottom: 15px;
}

.footer-logo span { /* Estilo para la palabra 'SOL' */
    color: var(--secondary-color); /* El color dorado/secundario para resaltar */
}

.footer-about {
    margin-bottom: 20px;
    line-height: 1.7;
}

.footer-social {
    margin-top: 20px;
}

.footer-social a {
    color: var(--white);
    font-size: 1.5em;
    margin-right: 15px;
    transition: color 0.3s ease;
}

.footer-social a:hover {
    color: var(--secondary-color);
}

.footer-title {
    font-size: 1.2em;
    margin-bottom: 20px;
    color: var(--secondary-color); /* Títulos en color secundario para destacar */
}

.footer-list {
    list-style: none;
    padding: 0;
}

.footer-list li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.footer-list li .fas {
    margin-right: 10px;
    color: var(--white);
}

.footer-list a {
    color: var(--white);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-list a:hover {
    color: var(--secondary-color);
}

.footer-copyright {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.7);
}

/* Responsive para el Footer */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-column {
        min-width: unset;
        max-width: 100%;
        margin-bottom: 30px;
    }

    .footer-column:last-child {
        margin-bottom: 0;
    }

    .footer-list {
        align-items: center;
    }
}

/* Sección de Valores */
.valores-section {
    padding: var(--space-lg) 20px;
    background-color: var(--light-bg);
    text-align: center;
}

.valores-section h2 {
    font-size: 2.8em;
    color: var(--primary-color);
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 15px;
}

.valores-section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: var(--secondary-color);
    border-radius: 2px;
}

.valores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.valor-item {
    background-color: var(--white);
    padding: 30px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.valor-item:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
}

.valor-item .icon {
    font-size: 3.5em;
    color: var(--secondary-color);
    margin-bottom: 20px;
}

.valor-item h3 {
    font-size: 1.5em;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.valor-item p {
    font-size: 1em;
    color: var(--text-color);
    line-height: 1.7;
}

/* Responsive para la sección de Valores */
@media (max-width: 992px) {
    .valores-section h2 {
        font-size: 2.2em;
    }
    .valor-item .icon {
        font-size: 3em;
    }
    .valor-item h3 {
        font-size: 1.3em;
    }
}

@media (max-width: 768px) {
    .valores-section {
        padding: var(--space-md) 15px;
    }
    .valores-section h2 {
        font-size: 1.8em;
        margin-bottom: 30px;
    }
    .valores-grid {
        grid-template-columns: 1fr; /* Una columna en móviles */
    }
    .valor-item {
        padding: 25px;
    }
}

/* Sección de Historia/Trayectoria */
.historia-section {
    padding: var(--space-lg) 20px;
    background-color: var(--white);
}

.historia-section h2 {
    font-size: 2.8em;
    color: var(--primary-color);
    margin-bottom: 40px;
    text-align: center;
    position: relative;
    padding-bottom: 15px;
}

.historia-section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: var(--secondary-color);
    border-radius: 2px;
}

.historia-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px; /* Espacio entre las columnas */
    max-width: 1000px;
    margin: 0 auto;
}

.historia-text,
.historia-image {
    flex: 1;
    min-width: 300px; /* Permite que se apilen en pantallas pequeñas */
}

.historia-text p {
    font-size: 1.1em;
    line-height: 1.8;
    color: var(--text-color);
    margin-bottom: 15px;
}

.historia-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: block; /* Elimina espacio extra debajo de la imagen */
}

/* Responsive para la sección de Historia */
@media (max-width: 992px) {
    .historia-section h2 {
        font-size: 2.2em;
    }
    .historia-content {
        flex-direction: column; /* Apila las columnas en tabletas */
        text-align: center;
    }
    .historia-image {
        order: -1; /* Pone la imagen encima en móviles */
    }
    .historia-text p {
        font-size: 1em;
    }
}

@media (max-width: 768px) {
    .historia-section {
        padding: var(--space-md) 15px;
    }
    .historia-section h2 {
        font-size: 1.8em;
        margin-bottom: 30px;
    }
}

/* Sección de Fundadores */
.fundadores-section {
    padding: var(--space-lg) 20px;
    background-color: var(--light-bg);
    text-align: center;
}

.fundadores-section h2 {
    font-size: 2.8em;
    color: var(--primary-color);
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 15px;
}

.fundadores-section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: var(--secondary-color);
    border-radius: 2px;
}

.fundador-grid {
    display: grid; /* Cambiado de flex a grid para mejor control de columnas */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Configura 3 columnas (o las que quepan) de tamaño flexible */
    gap: 40px; /* Espacio entre las tarjetas */
    max-width: 1100px; /* Ancho máximo del grid para permitir 3 columnas */
    margin: 0 auto;
    align-items: stretch; /* Esto es CLAVE: asegura que todas las tarjetas tengan la misma altura */
}

.founder-card {
    background-color: var(--white);
    padding: 30px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Las propiedades flex y max-width se eliminan aquí porque grid las gestiona */
    text-align: center;
    display: flex; /* Mantener flexbox para alinear contenido VIRTUALMENTE dentro de cada tarjeta */
    flex-direction: column;
    align-items: center;
}

.founder-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
}

.founder-card img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
    border: 4px solid var(--secondary-color);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.founder-card h3 {
    font-size: 1.8em;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.founder-card p.title {
    font-size: 1.1em;
    color: var(--secondary-color);
    font-weight: 600;
    margin-bottom: 15px;
}

.founder-card p.bio {
    font-size: 1em;
    color: var(--text-color);
    line-height: 1.7;
    flex-grow: 1; /* Esto hace que el párrafo de la biografía ocupe el espacio restante */
    display: flex; /* Necesario para que flex-grow funcione correctamente en el texto */
    align-items: flex-end; /* Alinea el texto a la parte inferior si hay espacio */
}

/* Responsive para la sección de Fundadores */
@media (max-width: 992px) {
    .fundadores-section h2 {
        font-size: 2.2em;
    }
    .fundador-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Sigue siendo adaptativo */
    }
}

@media (max-width: 768px) {
    .fundadores-section {
        padding: var(--space-md) 15px;
    }
    .fundadores-section h2 {
        font-size: 1.8em;
        margin-bottom: 30px;
    }
    .fundador-grid {
        grid-template-columns: 1fr; /* Una columna en móviles */
    }
    .founder-card {
        padding: 25px;
    }
    .founder-card img {
        width: 120px;
        height: 120px;
    }
    .founder-card h3 {
        font-size: 1.5em;
    }
    .founder-card p.title {
        font-size: 1em;
    }

    .founder-card p.bio {
        font-size: 1em;
        color: var(--text-color);
        line-height: 1.7;
    }
}

/* Responsive para la sección de Fundadores */
@media (max-width: 992px) {
    .fundadores-section h2 {
        font-size: 2.2em;
    }
    .founder-card {
        flex: 0 1 calc(100% - 20px); /* Una columna en tabletas */
    }
}

@media (max-width: 768px) {
    .fundadores-section {
        padding: var(--space-md) 15px;
    }
    .fundadores-section h2 {
        font-size: 1.8em;
        margin-bottom: 30px;
    }
    .founder-card {
        padding: 25px;
    }
    .founder-card img {
        width: 120px;
        height: 120px;
    }
    .founder-card h3 {
        font-size: 1.5em;
    }
    .founder-card p.title {
        font-size: 1em;
    }
}
/* Hero de la página Equipo */
.hero-page.equipo-hero {
    background-image: url('../img/equipo/hero-equipo.webp'); /* Necesitarás crear esta imagen */
    background-position: center center;
}
/* Sección de Miembros del Equipo */
.team-section {
    padding: var(--space-lg) 20px;
    background-color: var(--white);
    text-align: center;
}

.team-section h2 {
    font-size: 2.8em;
    color: var(--primary-color);
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 15px;
}

.team-section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: var(--secondary-color);
    border-radius: 2px;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 3 o 4 columnas si caben */
    gap: 40px 30px; /* Espacio vertical y horizontal */
    max-width: 1200px;
    margin: 0 auto;
    align-items: stretch; /* Asegura la misma altura para todas las tarjetas */
}

.team-member-card {
    background-color: var(--light-bg);
    padding: 30px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.team-member-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
}

.team-member-card img {
    width: 160px; /* Tamaño del avatar */
    height: 160px;
    border-radius: 50%; /* Forma circular */
    object-fit: cover;
    margin-bottom: 20px;
    border: 5px solid var(--secondary-color); /* Borde alrededor del avatar */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.team-member-card h3 {
    font-size: 1.8em;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.team-member-card p.title {
    font-size: 1.1em;
    color: var(--text-color);
    font-weight: 600;
    margin-bottom: 15px;
}

.team-member-card p.bio {
    font-size: 0.95em;
    color: var(--light-text);
    line-height: 1.7;
    flex-grow: 1; /* Permite que el texto ocupe el espacio restante */
}

.team-member-card .social-links {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    width: 100%; /* Asegura que la línea de borde se extienda */
}

.team-member-card .social-links a {
    color: var(--primary-color);
    font-size: 1.4em;
    margin: 0 10px;
    transition: color 0.3s ease;
}

.team-member-card .social-links a:hover {
    color: var(--secondary-color);
}

/* Responsive para la sección de Equipo */
@media (max-width: 992px) {
    .team-section h2 {
        font-size: 2.2em;
    }
    .team-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Mínimo 250px en pantallas más pequeñas */
    }
    .team-member-card img {
        width: 140px;
        height: 140px;
    }
    .team-member-card h3 {
        font-size: 1.6em;
    }
    .team-member-card p.title {
        font-size: 1em;
    }
}

@media (max-width: 768px) {
    .team-section {
        padding: var(--space-md) 15px;
    }
    .team-section h2 {
        font-size: 1.8em;
        margin-bottom: 30px;
    }
    .team-grid {
        grid-template-columns: 1fr; /* Una columna en móviles */
    }
    .team-member-card {
        padding: 25px;
    }
    .team-member-card img {
        width: 120px;
        height: 120px;
    }
}
/* Estilo para el icono grande en la tarjeta de Agentes Externos */
.team-agents-summary .icon-large {
    font-size: 5em; /* Icono más grande para destacar */
    color: var(--secondary-color);
    margin-bottom: 20px;
}

/* Estilos para las poblaciones abarcadas por los agentes */
.agent-populations {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    width: 100%;
    text-align: left; /* Alinea el texto a la izquierda dentro de la tarjeta */
}

.agent-populations h4 {
    font-size: 0.9em;
    color: var(--primary-color);
    margin-bottom: 5px;
    font-weight: 600;
}

.agent-populations ul {
    list-style: none; /* Elimina los puntos de la lista */
    padding: 0;
    margin: 0;
    font-size: 0.85em;
    color: var(--light-text);
}

.agent-populations ul li {
    margin-bottom: 3px;
}

/* Estilos para los detalles de contacto en las tarjetas de equipo */
.team-member-card .contact-details {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    width: 100%; /* Asegura que la línea de borde se extienda */
    text-align: left; /* Alinea el texto a la izquierda */
}

.team-member-card .contact-details p {
    font-size: 0.9em;
    margin-bottom: 8px; /* Espacio entre teléfono y email */
    color: var(--text-color);
}

.team-member-card .contact-details p:last-child {
    margin-bottom: 0; /* No hay margen inferior en el último párrafo */
}

.team-member-card .contact-details .fas {
    margin-right: 8px;
    color: var(--primary-color); /* Color del icono */
}

.team-member-card .contact-details a {
    color: var(--text-color); /* Color del texto del enlace */
    text-decoration: none;
    transition: color 0.3s ease;
}

.team-member-card .contact-details a:hover {
    color: var(--secondary-color); /* Cambia de color al pasar el ratón */
}

/* Ajustes para social-links y agent-populations para que no queden pegados al nuevo contact-details */
.team-member-card .social-links {
    margin-top: 20px; /* Asegura un buen espacio después de contact-details o agent-populations */
}

.team-member-card .agent-populations {
    margin-top: 20px; /* Asegura un buen espacio después de contact-details */
}

.team-section {
    background-color: var(--light-bg);
}

.team-hero {
    background-color: var(--primary-color);
    /* Otros estilos como altura, padding, etc. */
}

.team-image-section {
    padding: 0; /* Ajusta el padding si lo necesitas */
    margin-top: 0; /* Asegúrate de que no haya espacio extra no deseado */
    text-align: center; /* Centra la imagen si es más pequeña que el contenedor */
}

.full-width-image {
    width: 100%;
    height: auto;
    display: block; /* Elimina espacio extra debajo de la imagen */
}

/* ================ */
/* Hero Pages (Servicios, Equipo, etc.) */
/* ================ */
.hero-page {
    background-color: var(--primary-color); /* Fondo azul */
    color: var(--white);
    padding: var(--space-lg) 0; /* Espaciado superior e inferior */
    text-align: center;
    position: relative; /* Para posibles fondos con imagen o gradientes */
    z-index: 1; /* Asegura que esté por encima de otros elementos si hay superposiciones */
    min-height: 250px; /* Altura mínima para la sección hero */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.hero-page h1 {
    font-family: var(--font-heading);
    font-size: 3.2em; /* Tamaño del título principal */
    margin-bottom: 10px;
    color: var(--white);
}

.hero-page p {
    font-size: 1.2em;
    max-width: 800px;
    margin: 0 auto;
    color: var(--white);
    opacity: 0.9;
}

/* Estilos para la imagen debajo del hero de equipo */
.team-top-image-section {
    padding: 0; /* Elimina cualquier padding predeterminado */
    margin-top: 0; /* Asegura que no haya espacio entre el hero y la imagen */
    line-height: 0; /* Evita cualquier espacio extra debajo de la imagen */
}

.team-top-image-section .full-width-image {
    width: 100%;
    height: auto;
    display: block; /* Importante para que la imagen no tenga margen inferior */
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse */
    /* max-height: 400px; Si quieres limitar la altura de la imagen */
}

/* Estilos para la sección de miembros del equipo */
.team-section {
    background-color: var(--light-bg); /* Este es el gris claro que quieres para el fondo de las tarjetas */
    padding: var(--space-lg) 0;
}

/* Asegúrate de que las tarjetas del equipo sigan con su estilo actual */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.team-member-card {
    background-color: var(--white); /* Fondo blanco para las tarjetas individuales */
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 30px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-member-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.team-member-card img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid var(--secondary-color); /* Borde dorado alrededor de la imagen */
}

.team-member-card h3 {
    font-size: 1.4em;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.team-member-card p.title {
    font-size: 1em;
    color: var(--light-text);
    margin-bottom: 15px;
}

.team-member-card p.bio {
    font-size: 0.9em;
    color: var(--text-color);
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Estilos para los detalles de contacto en las tarjetas de equipo (del paso anterior) */
.team-member-card .contact-details {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    width: 100%;
    text-align: left;
}

.team-member-card .contact-details p {
    font-size: 0.9em;
    margin-bottom: 8px;
    color: var(--text-color);
}

.team-member-card .contact-details p:last-child {
    margin-bottom: 0;
}

.team-member-card .contact-details .fas {
    margin-right: 8px;
    color: var(--primary-color);
}

.team-member-card .contact-details a {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.team-member-card .contact-details a:hover {
    color: var(--secondary-color);
}

/* Ajustes para social-links y agent-populations para que no queden pegados al nuevo contact-details */
.team-member-card .social-links {
    margin-top: 20px; /* Asegura un buen espacio después de contact-details o agent-populations */
}

.team-member-card .agent-populations {
    margin-top: 20px; /* Asegura un buen espacio después de contact-details */
    text-align: left; /* Alinea el texto de las poblaciones a la izquierda */
}

.team-member-card .agent-populations h4 {
    font-size: 1em;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.team-member-card .agent-populations ul {
    list-style: none;
    padding-left: 0;
}

.team-member-card .agent-populations ul li {
    font-size: 0.85em;
    color: var(--text-color);
    margin-bottom: 3px;
}


/* Responsive para hero-page */
@media (max-width: 768px) {
    .hero-page h1 {
        font-size: 2.5em;
    }

    .hero-page p {
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .hero-page h1 {
        font-size: 2em;
    }

    .hero-page p {
        font-size: 0.9em;
    }
}
/* En tu archivo assets/css/styles.css */

.testimonials-hero {
  background-color: var(--primary-color);  /* Un tono de azul, puedes ajustar el color hexadecimal */
  color: #fff; /* Asegura que el texto sea blanco para que contraste con el fondo azul */
  padding: 80px 0; /* Ajusta el padding según sea necesario para el espaciado */
  text-align: center; /* Centra el texto */
}

/* Opcional: Estilo para el título h1 dentro de hero si quieres ajustar algo */
.testimonials-hero h1 {
  margin-bottom: 10px; /* Un poco de espacio debajo del título */
  font-size: 2.8em; /* Ajusta el tamaño de fuente si es necesario */
}

/* Opcional: Estilo para el párrafo p dentro de hero */
.testimonials-hero p {
  font-size: 1.2em; /* Ajusta el tamaño de fuente si es necesario */
  max-width: 800px; /* Limita el ancho del párrafo para mejor legibilidad */
  margin: 0 auto; /* Centra el párrafo */
}

.testimonials-hero {
  background-color: var(--primary-color);  /* Un color de fondo azul de respaldo */
  background-image: url('../img/Fachada-oficina.png'); /* Reemplaza con la ruta de tu imagen */
  background-size: cover; /* Ajusta la imagen para cubrir todo el fondo */
  background-position: center; /* Centra la imagen en el fondo */
  background-blend-mode: overlay; /* Opcional: Mezcla la imagen con el color de fondo */
  color: #fff; /* Asegura que el texto sea blanco para que contraste con el fondo */
  padding: 80px 0;
  text-align: center;
}

/* --- CONTACTO.HTML STYLES --- */

/* Hero de Contacto */
.contact-hero {
  /* Mantener el gradiente y la imagen, pero con un overlay para legibilidad */
  background: linear-gradient(135deg, rgba(10, 36, 99, 0.8), rgba(10, 36, 99, 0.8)), /* Overlay oscuro */
              url('../img/contacto/contact.jpg') center/cover; /* Tu imagen de fondo */
  color: white;
  padding: 120px 0; /* Más padding para un efecto visual impactante */
  text-align: center;
  position: relative; /* Para el overlay si se hace con pseudo-elemento */
  overflow: hidden; /* Para asegurar que todo el contenido esté dentro */
}

/* Contenido del Hero para centrarlo y darle z-index */
.contact-hero .hero-content {
  position: relative;
  z-index: 2; /* Asegura que el texto esté sobre el overlay */
  max-width: 800px; /* Limita el ancho del texto */
  margin: 0 auto;
}

.contact-hero h1 {
  font-size: 3.2rem; /* Tamaño de fuente más grande para el título principal */
  margin-bottom: 20px;
  font-family: 'Montserrat', sans-serif; /* Consistencia de fuente */
}

.contact-hero p {
  font-size: 1.3rem; /* Tamaño de fuente más grande para la descripción */
  opacity: 0.9;
}


/* Contenedor principal de información y formulario */
.contact-info-form-section {
  padding: 60px 0; /* Padding general para la sección */
  background-color: #f9f9f9; /* Un color de fondo suave */
}

.contact-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px; /* Espacio entre columnas */
  margin-top: 50px; /* Espacio superior si la sección tiene título */
  align-items: flex-start; /* Alinea los elementos al inicio */
}

/* Tarjetas de Información de Contacto y Formulario */
.contact-info,
.contact-form {
  background: white;
  border-radius: 10px; /* Bordes más redondeados */
  padding: 40px; /* Más padding interno */
  box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Sombra más pronunciada */
  border-top: 6px solid #D4AF37; /* Borde superior más grueso */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones para hover */
}

.contact-info:hover,
.contact-form:hover {
  transform: translateY(-5px); /* Efecto de elevación al pasar el ratón */
  box-shadow: 0 15px 40px rgba(0,0,0,0.12); /* Sombra más intensa al pasar el ratón */
}

.contact-info h2,
.contact-form h2 {
  color: #0A2463;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 30px; /* Más espacio debajo del título */
  font-size: 2rem; /* Tamaño de título ajustado */
  text-align: center;
}

.contact-item {
  display: flex;
  align-items: center; /* Alinea iconos y texto verticalmente al centro */
  margin-bottom: 25px; /* Más espacio entre ítems */
}

.contact-icon {
  width: 55px; /* Icono ligeramente más grande */
  height: 55px;
  background: #0A2463;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem; /* Tamaño del icono */
  margin-right: 20px; /* Más espacio a la derecha */
  flex-shrink: 0;
}

.contact-text h3 {
  color: #0A2463;
  margin-bottom: 5px;
  font-size: 1.3rem; /* Tamaño de fuente ajustado */
}
.contact-text p a { /* Estilo para enlaces en la info de contacto */
  color: #666; /* Color de texto normal para los enlaces */
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-text p a:hover {
  color: #D4AF37; /* Cambia de color al pasar el ratón */
}


/* Formularios */
.form-group {
  margin-bottom: 25px; /* Más espacio entre grupos de formulario */
}

.form-group label {
  display: block;
  margin-bottom: 10px; /* Más espacio debajo de la etiqueta */
  font-weight: 700; /* Texto más negrita */
  color: #0A2463;
  font-size: 1.1em;
}

.form-control {
  width: 100%;
  padding: 14px 18px; /* Más padding para los inputs */
  border: 1px solid #e0e0e0; /* Borde más suave */
  border-radius: 6px; /* Bordes más redondeados */
  font-family: 'Open Sans', sans-serif;
  font-size: 1.05rem;
  transition: all 0.3s ease;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); /* Sombra interna sutil */
}

.form-control:focus {
  outline: none;
  border-color: #D4AF37; /* Color de borde al enfocar */
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2); /* Sombra de enfoque */
}

textarea.form-control {
  min-height: 180px; /* Altura mínima para el área de texto */
  resize: vertical;
}

.btn-submit {
  background: #0A2463;
  color: white;
  border: none;
  padding: 16px 35px; /* Más padding para el botón */
  border-radius: 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2rem; /* Tamaño de fuente más grande */
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  box-shadow: 0 4px 15px rgba(10, 36, 99, 0.2); /* Sombra para el botón */
}

.btn-submit:hover {
  background: #D4AF37;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
  /* Sombra más intensa al pasar el ratón */
}

/* Mapa */
.map-section {
    padding: 60px 0;
    background-color: #fff;
}

.map-container {
  margin: 40px auto 0; /* Ajuste de margen superior */
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  border-top: 6px solid #D4AF37;
}

.map-container iframe {
  width: 100%;
  height: 450px; /* Altura ajustada */
  border: none;
}

/* Equipo de Contacto */
.contact-team {
  padding: 60px 0;
  background-color: #f9f9f9;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Columnas un poco más grandes */
  gap: 30px;
  margin-top: 40px;
  justify-items: center;
}

.team-member {
  text-align: center;
  background: white;
  border-radius: 10px;
  padding: 35px 25px; /* Más padding */
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  width: 100%; /* Ocupa el 100% del espacio de la columna */
  max-width: 320px; /* Máximo ancho para evitar que se estiren demasiado */
  border-top: 4px solid #D4AF37; /* Borde superior sutil */
}

.team-member:hover {
  transform: translateY(-8px); /* Elevación suave */
  box-shadow: 0 12px 25px rgba(0,0,0,0.1); /* Sombra más marcada */
}

.team-img {
  width: 160px; /* Imagen un poco más grande */
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 25px; /* Más espacio debajo de la imagen */
  border: 6px solid #f0f0f0; /* Borde más pronunciado */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Sombra en la imagen */
}

.team-member h3 {
  color: #0A2463;
  margin-bottom: 8px; /* Más espacio */
  font-size: 1.5rem; /* Tamaño de fuente ajustado */
}

.team-member p {
  color: #555;
  margin-bottom: 20px; /* Más espacio */
  font-size: 1.05rem;
}

/* Iconos de redes sociales del equipo */
.team-social a {
  display: inline-flex; /* Usar flexbox para centrar el icono */
  align-items: center;
  justify-content: center;
  width: 45px; /* Iconos más grandes */
  height: 45px;
  background: #0A2463;
  color: white;
  border-radius: 50%;
  margin: 0 8px;
  font-size: 1.3rem; /* Tamaño del icono */
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.team-social a:hover {
  background: #D4AF37;
  transform: translateY(-3px) scale(1.05); /* Ligeramente más grande al pasar el ratón */
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Media Queries para responsividad */
@media (max-width: 992px) {
  .contact-hero h1 {
    font-size: 2.8rem;
  }
  .contact-info h2, .contact-form h2 {
    font-size: 1.8rem;
  }
  .contact-info, .contact-form {
    padding: 30px;
  }
  .team-img {
    width: 140px;
    height: 140px;
  }
}

@media (max-width: 768px) {
  .contact-hero {
    padding: 100px 0 60px; /* Ajuste de padding para móviles */
  }
  .contact-hero h1 {
    font-size: 2.5rem;
  }
  .contact-hero p {
    font-size: 1.1rem;
  }
  .contact-container {
    grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
    gap: 30px;
  }
  .map-container iframe {
    height: 350px; /* Altura del mapa ajustada */
  }
  .team-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Ajuste para grids más pequeños */
    gap: 20px;
  }
  .team-member {
    padding: 25px 15px;
  }
  .team-img {
    width: 120px;
    height: 120px;
  }
  .team-member h3 {
    font-size: 1.3rem;
  }
  .team-social a {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .contact-hero h1 {
    font-size: 2rem;
  }
  .contact-info h2, .contact-form h2 {
    font-size: 1.6rem;
  }
  .contact-info, .contact-form {
    padding: 25px;
  }
  .form-control {
    padding: 10px 12px;
    font-size: 0.95rem;
  }
  .btn-submit {
    padding: 12px 20px;
    font-size: 1rem;
  }
  .map-container iframe {
    height: 300px;
  }
}

/* Ejemplo de styles.css */
.hero-page {
    background-color: #007bff; /* O el color azul que desees */
    color: white;
    padding: 80px 0;
    text-align: center;
}

.team-hero {
    /* Estilos específicos si el hero del equipo tiene un color diferente o ajuste */
    background-color: #3f51b5; /* Un tono de azul para el hero del equipo, por ejemplo */
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.team-member-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
}

.team-member-card img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
}

.hero-page.team-hero {
    background-color: #3f51b5; /* Asegúrate de que esta regla exista con el color deseado */
    color: white;
    padding: 80px 0;
    text-align: center;
}

/* Estilos específicos para la página de equipo */
.team-hero {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 80px 0;
    text-align: center;
}

.team-hero h1 {
    font-size: 2.8em;
    margin-bottom: 15px;
}

.team-hero p {
    font-size: 1.2em;
    max-width: 800px;
    margin: 0 auto;
}

.team-top-image-section {
    padding: 0;
    margin: 0;
}

.team-top-image-section img {
    width: 100%;
    height: auto;
    display: block;
}

.team-section {
    padding: 60px 0;
    background-color: var(--light-bg);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.team-member-card {
    background-color: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 30px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-member-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.team-member-card img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid var(--secondary-color);
}

.team-member-card h3 {
    color: var(--primary-color);
    margin-bottom: 5px;
}

.team-member-card .title {
    color: var(--light-text);
    margin-bottom: 15px;
    font-weight: 600;
}

.team-member-card .bio {
    color: var(--text-color);
    margin-bottom: 15px;
}

.contact-details {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(0,0,0,0.1);
    text-align: left;
}

.contact-details p {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.agent-populations {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(0,0,0,0.1);
    text-align: left;
}

.agent-populations h4 {
    margin-bottom: 8px;
}

.social-links {
    margin-top: 15px;
}

.social-links a {
    color: var(--primary-color);
    margin: 0 5px;
    font-size: 1.2em;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: var(--secondary-color);
}  

.hero-page.team-hero {
  background-color: var(--primary-color);
  color: var(--white);
  padding: 100px 0;
  text-align: center;
  position: relative;
}

.team-hero .container {
  position: relative;
  z-index: 2;
}

/* Estilos para la sección de imagen */
.team-image-section {
  padding: 0;
  margin-top: -50px; /* Esto superpone ligeramente la imagen con el hero */
  position: relative;
  z-index: 1;
}

.team-image-section .container {
  max-width: 1200px;
  padding: 0 20px;
}

.team-image {
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  display: block;
}

/* Ajustes responsivos */
@media (max-width: 768px) {
  .hero-page.team-hero {
    padding: 80px 0;
  }
  
  .team-image-section {
    margin-top: -30px;
  }
  
  .team-image {
    max-height: 300px;
  }
}

@media (max-width: 480px) {
  .hero-page.team-hero {
    padding: 60px 0;
  }
  
  .team-image-section {
    margin-top: -20px;
  }
}

.hero-page.team-hero {
  background-color: var(--primary-color);
  color: var(--white);
  padding: 120px 0 180px; /* Más padding abajo para la superposición */
  text-align: center;
  position: relative;
}

.team-image-section {
  margin-top: -100px; /* Esto superpone la imagen sobre el hero */
  position: relative;
  z-index: 2;
}

.team-image {
  width: 90%;
  max-width: 1200px;
  height: auto;
  max-height: 400px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  margin: 0 auto;
  display: block;
  border: 5px solid var(--white);
}

.hero-page.team-hero {
  position: relative;
  background: url('../img/hero/carousel/mentalidad-positiva-agentes-.inmobiliarios.webp') center/cover;
  color: var(--white);
  padding: 150px 0;
  text-align: center;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 36, 99, 0.7); /* Color primario con opacidad */
  z-index: 1;
}

.team-hero .container {
  position: relative;
  z-index: 2;
}

.property-badge.banco {
  background-color: #004085;
  color: #fff;
  padding: 0.4em 0.7em;
  font-size: 0.75em;
  border-radius: 4px;
  margin-left: 5px;
}

.image-wrapper {
  position: relative;
  overflow: hidden;
}

/* Ribbon para propiedades de banco - versión mejorada */
.bank-ribbon {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #004085;
    color: white;
    padding: 8px 15px;
    font-size: 12px;
    font-weight: bold;
    text-align: right;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 9; /* Z-index menor para que no cubra otras cintas importantes */
    text-transform: uppercase;
    pointer-events: none;
}

.resultado-seccion {
  margin-top: 2rem;
}
.resultado-seccion h4 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: #005a87;
  border-left: 4px solid #005a87;
  padding-left: 0.5rem;
}
.resultado-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.resultado-card {
  flex: 1 1 calc(50% - 1rem);
  background: #f5fafd;
  border-left: 4px solid #0077b6;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.resultado-card.total {
  background: #e0f2f7;
  border-left-color: #003c63;
}
.resultado-card h5 {
  margin: 0;
  font-size: 1rem;
}
.resultado-valor {
  font-size: 1.1rem;
  font-weight: bold;
  color: #005a87;
}
@media (max-width: 600px) {
  .resultado-card {
    flex: 1 1 100%;
  }
}

/* Estilos para el Dropdown (Menú desplegable) */
.nav-links .dropdown {
    position: relative;
    display: inline-block;
}

.nav-links .dropdown .dropbtn {
    /* Asegura que el botón del desplegable se vea como un enlace de navegación */
    padding: 5px 0; /* Mismo padding que otros enlaces */
    position: relative;
    z-index: 1; /* Asegura que esté por encima del contenido desplegable cuando se abre */
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--white); /* Fondo blanco para el desplegable */
    min-width: 200px; /* Ancho mínimo del desplegable */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Sombra para destacarlo */
    z-index: 99; /* Asegura que esté por encima de otros elementos */
    border-radius: var(--radius); /* Bordes redondeados */
    overflow: hidden; /* Oculta cualquier desbordamiento si los enlaces son muy largos */
    padding: 10px 0; /* Espaciado interno */
    top: calc(100% + 10px); /* Posiciona debajo del elemento padre con un pequeño margen */
    left: 50%; /* Centra el desplegable con respecto a su padre */
    transform: translateX(-50%); /* Ajuste final para centrarlo horizontalmente */
    opacity: 0; /* Inicialmente invisible */
    visibility: hidden; /* Inicialmente oculto */
    transition: opacity 0.3s ease, visibility 0.3s ease, top 0.3s ease; /* Transición suave */
}

.dropdown-content a {
    color: var(--text-color); /* Color de texto para los enlaces */
    padding: 12px 16px; /* Espaciado interno para los enlaces */
    text-decoration: none;
    display: block;
    text-align: left; /* Alinea el texto a la izquierda */
    transition: background-color 0.3s ease, color 0.3s ease;
    font-weight: 400; /* Fuente normal para los elementos del submenú */
    position: relative; /* Necesario para el ::after */
}

.dropdown-content a:hover {
    background-color: var(--light-bg); /* Fondo más claro al pasar el ratón */
    color: var(--primary-color); /* Color primario al pasar el ratón */
}

/* Mostrar el menú desplegable al pasar el ratón por encima del padre (.dropdown) */
.nav-links .dropdown:hover .dropdown-content {
    display: block;
    opacity: 1;
    visibility: visible;
    top: 100%; /* Sube un poco para un efecto más suave al aparecer */
}

/* Ajuste para el subrayado activo en elementos de dropdown */
.dropdown .dropbtn::after {
    display: none; /* Deshabilita el subrayado normal para el botón del dropdown */
}

.dropdown:hover .dropbtn::after {
    width: 100%; /* Reactiva el subrayado cuando el dropdown está abierto/hovered */
    display: block;
}

/* Media query para ocultar el dropdown en móviles y mostrarlo como un enlace normal */
@media (max-width: 768px) {
    .nav-links .dropdown .dropbtn {
        display: block; /* Asegura que sea un bloque en móvil */
        width: 100%; /* Ocupa todo el ancho disponible */
        text-align: center; /* Centra el texto */
    }

    .dropdown-content {
        position: static; /* Cambia a posición estática para que fluya en el documento */
        display: block; /* Asegura que siempre sea visible en el menú móvil */
        width: 100%; /* Ocupa todo el ancho disponible */
        box-shadow: none; /* Elimina la sombra */
        padding: 0; /* Elimina el padding */
        border-top: 1px solid #eee; /* Borde para separar del elemento padre */
        opacity: 1; /* Siempre visible */
        visibility: visible; /* Siempre visible */
        transform: none; /* Elimina la transformación */
    }

    .dropdown-content a {
        padding: 10px 0; /* Ajusta el padding para elementos de submenú en móvil */
        background-color: #f0f0f0; /* Un fondo ligeramente diferente para el submenú en móvil */
        border-bottom: 1px solid #e0e0e0; /* Separador entre elementos del submenú */
    }

    .dropdown-content a:last-child {
        border-bottom: none;
    }
}

/* Estilos para los letreros de propiedades */
.property-badge {
    position: absolute;
    top: 15px;
    right: -35px;
    background-color: #e74c3c; /* Rojo llamativo */
    color: white;
    padding: 8px 40px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    transform: rotate(45deg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 3px;
}

/* Opcional: diferentes colores para diferentes tipos de letreros */
.property-badge[data-badge="oportunidad"] {
    background-color: #e67e22; /* Naranja */
}

.property-badge[data-badge="ganga"] {
    background-color: #2ecc71; /* Verde */
}

.property-badge[data-badge="ocasion"] {
    background-color: #3498db; /* Azul */
}
/* Versión alternativa para ribbon de banco con diseño diagonal */
.bank-ribbon.diagonal {
    top: 10px;
    right: -35px;
    padding: 8px 40px;
    font-size: 16px;
    transform: rotate(45deg);
    border-radius: 3px;
    z-index: 1;
}

/* Estilos para las cintas de propiedades */
.image-wrapper {
    position: relative;
    overflow: hidden;
}

.property-card {
    position: relative;
    overflow: hidden;
}