/* ======================================================
   VARIABLES GLOBALES (COLORES Y TIPOGRAFÍA)
   ====================================================== */
:root {
    --primary: #E12221;         /* ROJO OSPINA PRINCIPAL */
    --primary-hover: #C41D1D;   /* ROJO OSCURO PARA HOVER */
    --text-dark: #1A1A1A;       /* TEXTO OSCURO */
    --text-gray: #666666;       /* TEXTO GRIS (Descripciones) */
    --bg-light: #FFFAF5;        /* FONDO CREMA CARACTERÍSTICO */
    --bg-white: #FFFFFF;        /* BLANCO */
    --bg-dark: #111111;         /* FONDO NEGRO (Para contadores y alianzas) */
}

/* Reset básico para la landing */
.landing-ospina-wrapper {
    font-family: 'Roboto', sans-serif !important; 
    color: var(--text-gray) !important;
    background-color: var(--bg-white) !important;
    line-height: 1.6 !important;
}

.landing-ospina-wrapper * {
    box-sizing: border-box;
}

.landing-ospina-wrapper h1, 
.landing-ospina-wrapper h2, 
.landing-ospina-wrapper h3, 
.landing-ospina-wrapper h4 {
    font-family: 'Roboto', sans-serif !important;
    color: var(--text-dark) !important;
    font-weight: 800 !important;
    margin-top: 0;
    text-transform: none !important; /* <--- ESTO CANCELA LAS MAYÚSCULAS DEL TEMA */
}

/* Contenedor universal */
.ospina-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ======================================================
   TÍTULOS Y ETIQUETAS GLOBALES
   ====================================================== */
.section-title {
    color: var(--text-dark) !important;
    font-size: 2.8rem !important;
    font-weight: 800 !important;
    margin-bottom: 30px;
    line-height: 1.15 !important;
    text-transform: none !important; /* <--- ESTO ASEGURA EL TÍTULO DE LA SECCIÓN */
}

.section-tag {
    color: var(--primary) !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
}

.section-tag i {
    color: var(--primary) !important;
    font-size: 1rem;
}

/* Responsive global para los títulos */
@media (max-width: 768px) {
    .section-title {
        font-size: 2.2rem !important;
        text-transform: none !important; /* <--- ESTO ASEGURA EL TÍTULO DE LA SECCIÓN */
    }
}

/* ======================================================
   ESTILOS ESPECÍFICOS HERO (FONDO LADO A LADO)
   ====================================================== */

.hero-light-split {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    padding: 60px 0 0 0;
    
    /* TRUCO: Lado a lado ignorando el contenedor del tema */
    width: 100vw !important;
    position: relative !important;
    left: calc(-50vw + 50%) !important;
    box-sizing: border-box !important;
    overflow: visible;
}

.hero-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    margin-bottom: 40px;
}

.hero-left-content { padding-right: 20px; }

/* TEXTOS EN BLANCO (Para resaltar en el fondo oscuro) */
.hero-tag {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.hero-tag i {
    color: var(--primary) !important; /* Ícono rojo */
}

/* --- Título principal en blanco forzado --- */
.landing-ospina-wrapper .hero-main-title {
    font-size: 4rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    color: #ffffff !important; /* Ahora sí, blanco puro garantizado */
    margin-bottom: 20px;
}

/* Si usas <span> dentro del título en ACF, lo mantendrá rojo */
.landing-ospina-wrapper .hero-main-title span { 
    color: var(--primary) !important; 
}

.hero-paragraph {
    color: rgba(255, 255, 255, 0.9) !important; /* Texto blanco 90% */
    font-size: 1rem !important;
    margin-bottom: 30px;
    max-width: 90%;
    line-height: 1.6 !important;
}
/* --- BOTÓN INDEPENDIENTE DEL SLIDE --- */
.btn-hero-slide {
    display: inline-block !important;
    background-color: var(--primary) !important;
    color: #ffffff !important;
    padding: 14px 35px;
    border-radius: 4px;
    font-weight: 700 !important;
    text-decoration: none !important;
    font-size: 1.05rem;
    transition: background-color 0.3s ease;
    margin-top: 10px; /* Separación con el párrafo */
}

.btn-hero-slide:hover {
    background-color: var(--primary-hover) !important;
}

/* LADO DERECHO (Slider y Tarjeta Flotante) */
.hero-right-visuals { position: relative; width: 100%; }

.hero-slider-rounded {
    width: 100%;
    height: 390px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.hero-slide-item {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    opacity: 0; transition: opacity 1s ease-in-out;
}

.hero-slide-item.active { opacity: 1; z-index: 2; }

/* Tarjeta flotante "33" */
.hero-floating-stat {
    position: absolute;
    bottom: 20px;
    left: -30px; 
    background: #ffffff !important;
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    display: flex; align-items: center; gap: 15px;
    z-index: 10;
}
.icono-tarjeta {
    width: 80px; /* O el tamaño que prefieras */
    height: auto;
    margin-bottom: 15px;
    display: block;
}
.hero-floating-stat i { font-size: 2rem; color: var(--primary) !important; }
.stat-info strong { display: block; font-size: 1.5rem !important; color: var(--text-dark) !important; line-height: 1; margin-bottom: 2px; }
.stat-info span { font-size: 0.85rem !important; color: var(--text-gray) !important; }

/* --- BARRA DE BÚSQUEDA HORIZONTAL SUPERPUESTA --- */
.hero-advanced-searchbar {
    background: #cdcfdb !important; /* Nuevo color de fondo */
    padding: 20px; /* Un poquito más de padding para que respire por dentro */
    border-radius: 8px;
    
    /* TRUCO SOMBRA DURA: El '0px' elimina el difuminado, haciéndola sólida */
    box-shadow: 0 12px 10px rgba(0, 0, 0, 0.12) !important; 
    border: 1px solid #b8bac7; /* Borde sutil acorde al nuevo fondo */
    
    margin: 0 auto;
    max-width: 900px;
    position: relative;
    z-index: 20;
    transform: translateY(50%);
}

.form-fields-wrapper {
    display: flex; align-items: center; gap: 15px;
}

.select-col {
    flex: 1; border: 1px solid #e0e0e0; border-radius: 4px; background-color: #fcfcfc !important;
}
/* --- TAMAÑO FIJO PARA LOS ÍCONOS BRANDED (SVG / PNG) --- */
.custom-brand-icon {
    width: 100px !important; /* Ancho fijo */
    height: 100px !important; /* Alto fijo */
    object-fit: contain !important; /* Evita que la imagen se estire o se deforme */
    margin: 0 auto 20px auto !important; /* Centra la imagen y le da espacio abajo */
    display: block !important;
    transition: transform 0.3s ease;
}

/* El efecto de "saltito" al pasar el mouse */
.osp-cat-item:hover .custom-brand-icon {
    transform: translateY(-5px) scale(1.05);
}
.form-fields-wrapper select {
    width: 100%; border: none; background: transparent; padding: 12px 15px;
    color: var(--text-dark) !important; font-size: 0.95rem;
    outline: none; cursor: pointer; -webkit-appearance: none;
}

.boton-busqueda-form {
    background-color: var(--primary) !important;
    color: #ffffff !important; border: none; padding: 14px 30px; border-radius: 4px;
    font-weight: 600; font-size: 1rem; cursor: pointer; transition: 0.3s;
    display: flex; align-items: center; gap: 8px; white-space: nowrap;
}

.boton-busqueda-form:hover { background-color: var(--primary-hover) !important; }

.texto-seo-hero {
    text-align: center;
    margin-top: 40px; 
    font-size: 0.85rem !important;
    color: #1a1a1a;
    padding: 0 20px;
}

/* RESPONSIVE HERO */
@media (max-width: 992px) {
    .hero-grid-layout { grid-template-columns: 1fr; text-align: center; gap: 40px; }
    .hero-left-content { padding-right: 0; display: flex; flex-direction: column; align-items: center; }
    .hero-main-title { font-size: 3rem !important; }
    .hero-floating-stat { left: 20px; }
    .hero-advanced-searchbar { transform: translateY(20px); }
    .form-fields-wrapper { flex-wrap: wrap; }
    .select-col { flex: 1 1 45%; }
}

@media (max-width: 768px) {
    .hero-light-split { padding: 40px 0 100px 0; }
    .hero-main-title { font-size: 2.2rem !important; }
    .hero-slider-rounded { height: 300px; }
    .select-col { flex: 1 1 100%; }
    .boton-busqueda-form { width: 100%; justify-content: center; }
}

/* --- ANIMACIÓN PARA TEXTOS DEL SLIDER --- */
.hero-text-slider {
    position: relative;
    min-height: 250px; 
}

.hero-text-slide {
    display: none; 
    animation: fadeTextIn 0.8s ease-out forwards;
}

.hero-text-slide.active {
    display: block; 
}

@keyframes fadeTextIn {
    from { 
        opacity: 0; 
        transform: translateY(15px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* ======================================================
   SECCIÓN 2: GESTIONA TU INMUEBLE (TARJETAS)
   ====================================================== */
.osp-categories {
    padding: 140px 0;
    background-color: var(--bg-white) !important;
}

.osp-categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin: 40px auto 0 auto;
    max-width: 1000px;
}

.osp-cat-item-link {
    text-decoration: none !important;
    color: inherit !important;
    display: block;
}

.osp-cat-item {
    background-color: #fff !important;
    border: 1px solid #2a2f3561 !important;
    text-align: center;
    padding: 40px 20px;
    border-radius: 12px;
    transition: all 0.3s ease;
    height: 100%;
}

.osp-cat-item:hover {
    box-shadow: 0 15px 30px rgba(225, 34, 33, 0.08); 
    transform: translateY(-5px);
}

.osp-cat-item i {
    font-size: 3rem;
    color: var(--primary) !important; 
    margin-bottom: 20px;
}

.osp-cat-item h4 {
    font-size: 1.4rem !important;
    color: var(--text-dark) !important;
    margin-bottom: 10px;
    font-weight: 700 !important;
}

.osp-cat-item p {
    font-size: 0.95rem !important;
    color: var(--text-gray) !important;
    margin: 0;
}
/* ==========================================
   ESTILOS DEL POPUP DE AYUDA (100% DINÁMICO Y RESPONSIVE)
   ========================================== */
.osp-custom-popup {
    background: #ffffff;
    padding: 40px 30px;
    max-width: 520px; /* Ancho máximo solicitado para Desktop */
    margin: 40px auto; /* Centrado automático */
    border-radius: 12px;
    position: relative;
    text-align: center;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.osp-custom-popup h3 {
    font-weight: 800 !important;
    color: var(--text-dark) !important;
    margin-bottom: 30px;
    font-size: 1.6rem !important;
}

.popup-links-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.popup-btn-link {
    display: block;
    padding: 18px 15px;
    background: #fcfcfc; /* Fondo clarito como en las tarjetas */
    color: var(--primary) !important;
    text-decoration: none !important;
    font-weight: 700;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
    line-height: 1.4;
}

.popup-btn-link span {
    font-size: 0.85rem;
    color: var(--text-gray);
    font-weight: 400;
    display: block;
    margin-top: 5px;
}

/* Efecto al pasar el mouse */
.popup-btn-link:hover {
    background: var(--primary);
    color: #ffffff !important;
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(225, 34, 33, 0.15);
}

.popup-btn-link:hover span {
    color: #f0f0f0;
}

/* El botón de cerrar (la "X") que inyecta Magnific Popup por defecto */
.mfp-close {
    color: var(--text-dark) !important;
    font-size: 32px !important;
    opacity: 0.6 !important;
}

.mfp-close:hover {
    opacity: 1 !important;
    color: var(--primary) !important;
}

/* Responsive del Popup para móviles */
@media (max-width: 768px) {
    .osp-custom-popup {
        padding: 30px 20px;
        margin: 20px;
        width: auto;
    }
}
/* ======================================================
   SECCIÓN 3: SOBRE NOSOTROS (ESTILO IMAGEN MITAD DE PANTALLA)
   ====================================================== */
.osp-about {
    background-color: #e1e6ec85 !important;
    padding: 0 !important; /* Quitamos el padding para que la foto toque los bordes arriba y abajo */
    width: 100vw !important;
    position: relative !important;
    left: calc(-50vw + 50%) !important;
    box-sizing: border-box !important;
    display: flex;
    align-items: center;
}

.osp-about-grid {
    display: flex;
    justify-content: flex-end; /* Empuja el contenedor de texto hacia la derecha */
    width: 100%;
    padding: 80px 20px; /* Restauramos el aire vertical para el texto aquí adentro */
    position: static; /* Vital para que la imagen salga de este contenedor */
}

/* La imagen se sale del flujo y se pega a la izquierda de la pantalla */
.about-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 50vw; /* Ocupa exactamente la mitad de la pantalla */
    height: 100%;
}

.about-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 !important; /* Quitamos los bordes redondos */
    box-shadow: none !important; /* Quitamos la sombra para un aspecto plano */
}

/* El texto se queda contenido en la mitad derecha de la caja de 1200px */
.about-content-wrapper {
    width: 50%;
    padding-left: 60px; /* Aire entre la foto y los textos */
    position: relative;
    z-index: 2;
}

/* --- AJUSTES INTERNOS DE TEXTO Y CARACTERÍSTICAS --- */
.about-description {
    font-size: 1.05rem !important;
    color: var(--text-gray) !important;
    margin-bottom: 30px;
    line-height: 1.6 !important;
}

.about-features-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.about-feature-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.feature-icon-circle {
    width: 60px;
    height: 60px;
    background-color: var(--bg-white) !important;
    color: var(--primary) !important;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    flex-shrink: 0;
}

.feature-text-content h4 {
    font-size: 1.15rem !important;
    color: var(--text-dark) !important;
    margin-bottom: 5px;
    font-weight: 700 !important;
}

.feature-text-content p {
    font-size: 0.95rem !important;
    color: var(--text-gray) !important;
    margin: 0;
    line-height: 1.5 !important;
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .osp-about-grid {
        flex-direction: column;
        padding: 0;
    }
    .about-image-wrapper {
        position: relative;
        width: 100vw;
        height: 50px;
    }
    .about-content-wrapper {
        width: 100%;
        padding: 60px 20px;
    }
    
}
@media (max-width: 992px) {
    .hero-grid-layout { grid-template-columns: 1fr; text-align: center; gap: 40px; }
    .hero-left-content { padding-right: 0; display: flex; flex-direction: column; align-items: center; }
    .hero-main-title { font-size: 3rem !important; }
    .hero-floating-stat { left: 20px; }
    .hero-advanced-searchbar { transform: translateY(20px); }
    .form-fields-wrapper { flex-wrap: wrap; }
    .select-col { flex: 1 1 45%; }
    
    /* 👇 AGREGAS ESTO PARA CENTRAR EL PÁRRAFO 👇 */
    .hero-paragraph {
        margin: 0 auto 30px auto !important; /* Auto a los lados centra la caja, 30px mantiene el espacio abajo */
        text-align: center !important; /* Centra las letras por dentro */
    }
}
@media (max-width: 768px) {
    .osp-categories-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
    .osp-about {
        padding: 50px 0;
    }
    .about-image-wrapper img {
        display: none; 
    }
}

/* ======================================================
   SECCIÓN 4: NUESTROS SERVICIOS
   ====================================================== */
.osp-services {
    padding: 80px 0;
    background-color: var(--bg-white) !important;
}

/* Encabezado */
.services-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 50px;
    gap: 40px;
}

.services-header-left {
    flex: 1;
}

.services-header-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.services-description {
    color: var(--text-gray) !important;
    font-size: 1rem !important;
    margin-bottom: 20px;
    max-width: 450px;
}

.section-tag.border-tag {
    border: 1px solid #f2e8e3;
    padding: 6px 15px;
    border-radius: 4px;
    display: inline-flex;
    margin-bottom: 15px;
}

.btn-pill-red {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: background-color 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-pill-red:hover {
    background-color: var(--primary-hover) !important;
}

/* Grillas de Contenido */
.services-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
/* --- CONTENEDOR DEL CARRUSEL --- */
.partners-carousel-container {
    width: 100%;
    overflow: hidden; /* Oculta los logos que están fuera del área visible */
    position: relative;
    padding: 20px 0;
}

/* --- EL RIEL QUE SE MUEVE --- */
.partners-carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Animación suave al deslizar */
    align-items: center;
}

/* --- CADA ITEM (Logo) --- */
.alianza-item {
    flex: 0 0 calc(100% / 4); /* 3 logos visibles en Desktop */
    text-align: center;
    padding: 0 15px; /* Espaciado entre logos */
    box-sizing: border-box;
}

.logo-alianza-img {
    width: auto;
    max-width: 180px; 
    height: 60px;     
    object-fit: contain;
    filter: brightness(0) invert(1); /* Efecto blanco (negativo) */
    opacity: 0.8;
    transition: all 0.3s ease;
}

.logo-alianza-img:hover {
    opacity: 1;
    transform: scale(1.05);
}

/* --- RESPONSIVE: 1 LOGO EN MÓVIL --- */
@media (max-width: 768px) {
    .alianza-item {
        flex: 0 0 100%; /* 1 solo logo visible en Móviles */
    }
}
@media (max-width: 768px) {
    /* ... (aquí tendrás el resto de tus estilos móviles) ... */

    /* 👇 Ocultar el slider y la estadística en celulares 👇 */
    .hero-right-visuals {
        display: none !important;
    }
}
/* Tarjeta Principal (Izquierda) */
.main-service-card {
    background-color: #fff !important;
    border: 1px solid #f2e8e3;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.main-service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(225, 34, 33, 0.08);
}

.main-service-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 25px;
}

.main-service-content {
    padding: 0 10px 10px 10px;
}

.service-title-group {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}
/* --- Ícono personalizado de la tarjeta principal (50x50) --- */
.icon-servicio-principal {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain !important;
    flex-shrink: 0; /* Evita que el título lo aplaste si es muy largo */
}

.service-title-group i {
    font-size: 2rem;
    color: var(--primary) !important;
}

.service-title-group h3 {
    font-size: 1.6rem !important;
    color: var(--text-dark) !important;
    margin: 0;
}

.main-service-content p {
    color: var(--text-gray) !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin-bottom: 20px;
}

/* Tarjetas Secundarias (Derecha 2x2) */
.secondary-services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.secondary-service-card {
    background-color: #fff !important;
    border: 1px solid #2a2f355e;
    border-radius: 16px;
    padding: 35px 25px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.secondary-service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(225, 34, 33, 0.08);
}

.secondary-service-card i {
    font-size: 2.5rem;
    color: var(--primary) !important;
    margin-bottom: 20px;
}

.secondary-service-card h4 {
    font-size: 1.2rem !important;
    color: var(--text-dark) !important;
    margin-bottom: 15px;
}

.secondary-service-card p {
    color: var(--text-gray) !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin-bottom: 20px;
}

/* Enlaces Ver Más */
.read-more-link {
    color: var(--primary) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s ease;
}
/* Corrección: Evitar que la flecha herede el tamaño gigante del ícono principal */
.read-more-link i,
.btn-pill-red i {
    font-size: 0.9rem !important; /* Regresa al tamaño normal del texto */
    margin-bottom: 0 !important;  /* Le quita el margen inferior que tenía el ícono grande */
}

.read-more-link:hover {
    color: var(--text-dark) !important;
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .services-header {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .services-header-right {
        align-items: flex-start;
        text-align: left;
    }
    .services-content-grid {
        grid-template-columns: 1fr;
    }
    .main-service-card img {
        height: auto;
        max-height: 400px;
    }
}

@media (max-width: 768px) {
    .secondary-services-grid {
        grid-template-columns: 1fr;
    }
    .osp-services {
        padding: 50px 0;
    }
}

/* ======================================================
   SECCIÓN 5: ALIANZAS Y CTA FLOTANTE
   ====================================================== */
.partners-cta-section {
    position: relative;
    background-color: var(--bg-white) !important;
    padding-bottom: 80px; 
}

/* Fondo oscuro y logos (LADO A LADO) */
.partners-bg-wrapper {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--bg-dark) !important;
    padding: 80px 0 180px 0; 
    text-align: center;
    color: #ffffff !important;
    /* TRUCO LADO A LADO SEGURO */
    width: 100vw !important;
    position: relative !important;
    left: calc(-50vw + 50%) !important;
    box-sizing: border-box !important;
}

.partners-header h2 {
    color: #ffffff !important;
    font-size: 2.8rem !important;
    font-weight: 700 !important;
    margin-bottom: 15px;
}

.partners-header p {
    color: rgba(255, 255, 255, 0.8) !important;
    max-width: 700px;
    margin: 0 auto 40px auto;
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
}

.partners-logos-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 40px;
}

.partner-logo-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
}

.partner-logo-item i {
    font-size: 2rem;
}

/* Tarjeta CTA Flotante */
.cta-floating-container {
    position: relative;
    z-index: 10;
    margin-top: -120px; 
    max-width: 1050px;
}

.cta-floating-card {
    background-color: #fffaf5 !important;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: stretch;
    padding: 50px;
    gap: 40px;
}

.cta-floating-content {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.cta-floating-tag {
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    color: var(--text-dark) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 20px;
}

.cta-floating-title {
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    color: var(--text-dark) !important;
    line-height: 1.2 !important;
    margin-bottom: 20px;
    border-left: 5px solid var(--primary); 
    padding-left: 20px;
}

.cta-floating-desc {
    color: var(--text-gray) !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-bottom: 30px;
}

.cta-floating-image {
    flex: 0.8;
}

.cta-floating-image img {
    width: 100%;
    height: 100%;
    min-height: 350px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .cta-floating-card {
        flex-direction: column;
        padding: 40px 30px;
    }
    .cta-floating-title {
        font-size: 1.8rem !important;
    }
    .cta-floating-image img {
        min-height: 250px;
    }
}

@media (max-width: 768px) {
    .partners-header h2 { font-size: 2.2rem !important; }
    .partners-bg-wrapper { padding-bottom: 120px; }
    .cta-floating-container { margin-top: -60px; }
    .partner-logo-item { width: 40%; justify-content: center; }
}

/* ======================================================
   SECCIÓN 6: NUESTRA EXPERIENCIA (COLLAGE)
   ====================================================== */
.osp-experience {
    padding: 100px 0;
    background-color: var(--bg-white) !important;
    overflow: hidden;
}

.experience-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
}

/* --- COLLAGE DE IMÁGENES (IZQUIERDA) --- */
.experience-collage-wrapper {
    position: relative;
    width: 100%;
    height: 550px;
}

.collage-img {
    position: absolute;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.img-top-right {
    top: 0;
    right: 0;
    width: 65%;
    height: 280px;
    z-index: 1;
}

.img-bottom-left {
    bottom: 0;
    left: 0;
    width: 55%;
    height: 250px;
    z-index: 2;
}

.img-center {
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%);
    width: 55%;
    height: 320px;
    z-index: 3;
    border: 8px solid #ffffff; 
}

/* Etiquetas Flotantes (Checks) */
.collage-floating-tag {
    position: absolute;
    background: #ffffff !important;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    z-index: 10;
    white-space: nowrap;
}

.collage-floating-tag i {
    color: var(--primary) !important;
    font-size: 1.1rem;
}

.tag-pos-1 { top: 40%; left: -5%; } 
.tag-pos-2 { top: 55%; right: -5%; } 
.tag-pos-3 { bottom: 10%; left: 15%; } 

/* --- CARACTERÍSTICAS (DERECHA) --- */
.experience-content-wrapper {
    padding-left: 20px;
}

.experience-content-wrapper .section-title {
    margin-bottom: 40px;
    font-size: 2.5rem !important;
    line-height: 1.15 !important;
}

.experience-features-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.exp-feature-card {
    background-color: #2a2f35 !important;
    border-radius: 12px;
    padding: 10px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid transparent;
}

.exp-feature-card:hover {
    transform: translateX(5px);
    box-shadow: 0 10px 25px rgba(225, 34, 33, 0.05);
    border-color: #f2e8e3;
}

.exp-feature-icon {
   
    color: #ffffff !important;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    
}

.exp-feature-text h4 {
    font-size: 1.15rem !important;
    color: #fff !important;
    margin-bottom: 5px;
    font-weight: 700 !important;
}

.exp-feature-text p {
    font-size: 0.95rem !important;
    color: #fff !important;
    margin: 0;
    line-height: 1.6 !important;
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .experience-grid {
        grid-template-columns: 1fr;
        gap: 80px;
    }
    .experience-content-wrapper {
        padding-left: 0;
    }
}

@media (max-width: 768px) {
    .osp-experience { padding: 60px 0; }
    .experience-collage-wrapper { height: 450px; }
    .img-center { width: 70%; height: 280px; left: 50%; }
    .tag-pos-1 { left: 5%; }
    .tag-pos-2 { right: 5%; }
    /* 👇 Corrección para mantener el ícono y el texto en la misma línea 👇 */
    .exp-feature-card {
        flex-direction: row !important; /* Fuerza la distribución en fila */
        align-items: flex-start !important; /* Alinea los elementos a la parte superior */
        padding: 15px !important; /* Un poco menos de padding para que respire mejor en móvil */
        gap: 15px !important; /* Espacio moderado entre ícono y texto */
    }
}


/* ======================================================
   SECCIÓN 7: CONTADORES (STATS BANNER LADO A LADO)
   ====================================================== */
.osp-stats-banner {
    background-color: #2a2f35 !important; 
    padding: 30px 0;
    /* TRUCO LADO A LADO SEGURO */
    width: 100vw !important;
    position: relative !important;
    left: calc(-50vw + 50%) !important;
    box-sizing: border-box !important;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.stat-item i {
    font-size: 2.8rem;
    color: var(--primary) !important;
    margin-bottom: 20px;
}

.stat-item h3 {
    color: #fff !important;
    font-size: 3.2rem !important;
    font-weight: 800 !important;
    margin: 0 0 10px 0;
    line-height: 1 !important;
}

.stat-item p {
    color: #fff !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    margin: 0;
    max-width: 200px;
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 50px 30px;
    }
}

@media (max-width: 768px) {
    .osp-stats-banner {
        padding: 50px 0;
    }
    .stat-item h3 {
        font-size: 2.5rem !important;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 15px; 
    }
    .stat-item p {
        font-size: 0.85rem !important;
    }
}

/* ======================================================
   SECCIÓN 9: TESTIMONIOS
   ====================================================== */
.osp-testimonials {
    background-color: var(--bg-white) !important;
    padding: 80px 0;
}

.testimonials-header {
    text-align: center;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
}

/* Imagen Izquierda */
.testimonials-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* Lista Derecha */
.testimonials-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.testimonial-card {
    background-color: var(--bg-light) !important; /* Fondo crema */
    border: 1px solid #f2e8e3 !important; /* Borde sutil añadido */
    padding: 35px 40px;
    border-radius: 12px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    transition: transform 0.3s ease;
}

.testimonial-card:hover {
    transform: translateX(5px);
}

.quote-icon {
    font-size: 3rem;
    color: #f7d2d2 !important; /* Rojo claro sólido para simular marca de agua */
    line-height: 1;
    margin-top: -5px;
}

.testimonial-content {
    flex: 1;
}

.quote-text {
    font-size: 1.05rem !important;
    color: var(--text-dark) !important;
    font-style: italic;
    line-height: 1.6 !important;
    margin-bottom: 20px;
}

.quote-author {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--text-gray) !important;
    margin: 0;
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .testimonials-image {
        text-align: center;
    }
    .testimonials-image img {
        max-height: 400px;
        width: auto;
    }
}

@media (max-width: 768px) {
    .osp-testimonials { padding: 50px 0; }
    .testimonial-card {
        flex-direction: column;
        padding: 25px;
        gap: 10px;
    }
    .quote-icon {
        margin-bottom: 10px;
    }
}

/* ======================================================
   SECCIÓN 10: BLOG / NOTICIAS
   ====================================================== */
.osp-blog-section {
    background-color: var(--bg-white) !important;
    padding: 80px 0 100px 0;
}

/* Grilla de 3 columnas para los posts */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

/* Tarjeta individual de blog */
.blog-card {
    background-color: var(--bg-light) !important; /* Fondo crema de la tarjeta */
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #f2e8e3 !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.06);
}

.blog-card-img-link {
    display: block;
    width: 100%;
    height: 220px;
    overflow: hidden;
}

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

.blog-card:hover .blog-card-img-link img {
    transform: scale(1.05); /* Efecto de zoom suave en la foto al hacer hover */
}

.blog-card-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Metadatos (Autor y Fecha) */
.blog-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
}

.meta-item {
    font-size: 0.85rem !important;
    color: var(--text-dark) !important;
    font-weight: 700 !important;
    display: flex;
    align-items: center;
    gap: 6px;
}

.meta-item i {
    color: var(--primary) !important; /* Iconos en rojo */
    font-size: 0.9rem;
}


/* Título de la noticia */
.blog-card-content h3 {
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    text-align: left !important; /* Fuerza la alineación como en el diseño */
}

.blog-card-content h3 a {
    color: var(--text-dark) !important;
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-card-content h3 a:hover {
    color: var(--primary) !important; /* El título se pone rojo al pasar el mouse */
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .osp-blog-section { padding: 50px 0; }
    .blog-grid {
        grid-template-columns: 1fr;
    }
    .blog-card-img-link {
        height: 250px;
    }
}

/* ======================================================
   SECCIÓN 11: CTA FINAL (PREGUNTAS)
   ====================================================== */
.osp-final-cta-section {
    background-color: var(--bg-white) !important; 
    padding: 80px 0 0 0; 
}

.final-cta-card {
    display: flex;
    background-color: var(--primary) !important; 
    border-radius: 16px;
    overflow: hidden; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    
    /* EL TRUCO PARA MONTARSE EN EL FOOTER */
    position: relative;
    z-index: 50;
    margin-bottom: -80px; 
}

.final-cta-content {
    flex: 1;
    padding: 60px 50px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.final-cta-content h2 {
    color: #ffffff !important;
    font-size: 2.8rem !important;
    font-weight: 800 !important;
    margin-bottom: 15px;
    line-height: 1.1 !important;
}

.final-cta-content p {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    margin-bottom: 40px;
    max-width: 90%;
}

.final-cta-contactos {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 20px;
}

.contact-icon {
    width: 60px;
    height: 60px;
    background-color: #ffffff !important;
    color: var(--primary) !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.contact-text {
    display: flex;
    flex-direction: column;
}

.contact-text span {
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85) !important;
    margin-bottom: 4px;
}

.contact-text strong {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1;
}

.final-cta-image {
    flex: 1;
}

.final-cta-image img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .final-cta-card {
        flex-direction: column;
        margin-bottom: -60px;
    }
    .final-cta-content {
        padding: 40px 30px;
    }
    .final-cta-content h2 {
        font-size: 2.2rem !important;
    }
    .final-cta-image img {
        height: 350px;
        min-height: 350px;
    }
}

@media (max-width: 768px) {
    .osp-final-cta-section { padding-top: 50px; }
    .final-cta-content h2 { font-size: 2rem !important; }
    .contact-text strong { font-size: 1.2rem !important; }
}
.properties-header {
    text-align: center;
    margin-bottom: 50px;
    margin-top: 60px; /* <--- Agrega esta línea y ajústala a tu gusto */
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* --- Tamaño controlado para los íconos (Imágenes) de Experiencia --- */
.custom-exp-icon {
    width: 45px !important;  /* Ajusta según el diseño de tu ícono */
    height: 45px !important;
    object-fit: contain !important; /* Mantiene la proporción sin deformar */
    display: block;
    margin: 0 auto;
}

/* Opcional: Si el contenedor .exp-feature-icon tiene un fondo y quieres centrarlo */
.exp-feature-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}