/* --- VARIABLES DE COLOR --- */
:root {
    --brand: #53A69C;
    --brand-2: #0d6efd;
}

/* --- ESTILOS BASE DEL SITIO --- */
body {
    font-family: 'PT Serif', serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial;
}

.texto-justificado {
    text-align: justify;
}

.navbar {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

.nav-link {
    color: #333;
    transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link:focus {
    color: var(--brand) !important;
}

.nav-link:active {
    color: #59f316 !important;
}

/* --- ESTILOS DE PÁGINAS GENERALES (propiedades) --- */
.card {
    position: relative;
    overflow: hidden;
}

.property-card {
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    transition: transform .25s ease, box-shadow .25s ease;
    position: relative; /* Asegura que z-index funcione correctamente */
    z-index: 2; /* Las tarjetas de propiedad siempre por encima del carrusel control */
}

.property-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
}

.property-img {
    height: 240px;
    object-fit: cover;
    transition: transform .5s ease;
}

.property-img:hover {
    transform: scale(1.06);
}

.badge-op {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 600;
}

.badge-venta {
    background: #198754;
    color: #fff;
}

.badge-arriendo {
    background: #0d6efd;
    color: #fff;
}

.video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: .9;
}

.card-footer {
    background: #fff;
}

/* Ajuste de las tarjetas de servicio para el index */
.service-box {
    background: #e9f5f5; /* Color de fondo de la tarjeta de la página de servicios */
    border: 1px solid #d1e8e8; /* Borde de la tarjeta de la página de servicios */
    border-radius: 14px;
    padding: 18px;
    height: 100%;
    /* La transición se mantiene para que el efecto del hover sea suave */
    transition: all .4s ease;
}

/* Reglas de animación al pasar el cursor (efecto de movimiento horizontal) */
.service-box-animated-right:hover {
    transform: translateX(-30px); /* Se mueve 30px a la izquierda al pasar el cursor */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Agrega una sombra sutil */
    background-color: #d1e8e8; /* Se vuelve un verde más oscuro */
}

.service-box-animated-left:hover {
    transform: translateX(30px); /* Se mueve 30px a la derecha al pasar el cursor */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Agrega una sombra sutil */
    background-color: #d1e8e8; /* Se vuelve un verde más oscuro */
}

/* Color de los íconos de los servicios en el index */
.service-box i {
    color: var(--brand);
}

/* --- ESTILOS DE PÁGINAS GENERALES (propiedades) --- */
.filter-bar .form-select,
.filter-bar .form-control {
    border-radius: 12px;
}

.filter-bar .btn {
    border-radius: 12px;
}

.small-muted {
    font-size: .875rem;
    color: #6c757d;
}

.estado-band {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--brand);
    color: white;
    text-align: center;
    padding: 5px 0;
    font-weight: bold;
    z-index: 99;
}

.estado-band-detail {
    background-color: var(--brand);
    color: white;
    text-align: center;
    padding: 10px 0;
    font-size: 1.5rem;
    font-weight: bold;
}

/* Estilos para el carrusel y las flechas */
.carousel-control-prev,
.carousel-control-next {
    z-index: 1; /* Asegura que las flechas estén en una capa inferior */
}

/* --- ESTILOS DE LA PÁGINA DE SERVICIOS (Ajustes recientes) --- */
.titulo-brand {
    color: #000000;
}

.subtitulo-brand {
    color: var(--brand);
}

/* Título principal de la sección de servicios, con ajustes de tamaño y espaciado. */
#servicios-page .section-title {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2.0rem; /* Tamaño del título ajustado */
}

/* Animación para el título principal. */
.animated-title {
    animation: title-move 3s infinite alternate ease-in-out;
}

@keyframes title-move {
    0% {
        transform: skewX(-2deg);
        opacity: 0.8;
    }
    100% {
        transform: skewX(2deg);
        opacity: 1;
    }
}

/* Tarjetas de servicio en la página de servicios. */
#servicios-page .service-card {
    background-color: #e9f5f5;
    border: none;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, background-color 0.4s ease;
    border-radius: 14px;
}

#servicios-page .service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    background-color: #d1e8e8;
}

/* Íconos de Font Awesome en las tarjetas de servicio. */
#servicios-page .service-icon {
    color: var(--brand); /* Aplica el color de la marca a los íconos de la página de servicios */
    transition: transform 0.4s ease;
}

#servicios-page .service-card:hover .service-icon {
    transform: rotate(10deg) scale(1.2);
}

/* Estilo para el GIF en la tarjeta de servicio. */
#servicios-page .service-card img {
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    display: block;
    max-width: 100%;
    height: auto;
}

/* --- ESTILOS DEL FOOTER --- */
/* Estilos para los enlaces de redes sociales. */
.footer-social a {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff; /* Círculo blanco por defecto */
    text-decoration: none;
    border: 1px solid #eaeaea;
    transition: all 0.3s ease; /* Suaviza la transición */
}

/* Colores de los íconos por defecto */
.footer-social a.wsp i {
    color: #25d366; /* Líneas de WhatsApp verdes por defecto */
}

.footer-social a.ig i {
    color: #d62976; /* Líneas de Instagram rosas por defecto */
}

/* Efecto de hover */
.footer-social a.wsp:hover {
    background: #25d366; /* Círculo verde al pasar el cursor */
    border: 1px solid #25d366;
}

.footer-social a.wsp:hover i {
    color: #fff; /* Líneas blancas al pasar el cursor */
}

.footer-social a.ig:hover {
    background: #d62976; /* Círculo rosa al pasar el cursor */
    border: 1px solid #d62976;
}

.footer-social a.ig:hover i {
    color: #fff; /* Líneas blancas al pasar el cursor */
}
/* Animación logo quienes-somos */
@keyframes aparecer-y-rebotar {
  /* Fase de aparición */
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  70% { /* Justo antes del rebote */
    opacity: 1;
    transform: scale(1);
  }
  /* Fase de rebote */
  90% {
    transform: scale(1.2); /* Un poco más grande */
  }
  100% {
    transform: scale(1); /* Vuelve a su tamaño normal */
  }
}

.logo-animado-combinado {
  animation: aparecer-y-rebotar 1.5s ease-out forwards; /* Ajusta la duración y añade 'forwards' */
}