.elementor-2561 .elementor-element.elementor-element-d38b398{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(max-width:767px){.elementor-2561 .elementor-element.elementor-element-962207d{width:100%;max-width:100%;}.elementor-2561 .elementor-element.elementor-element-962207d > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}}@media(min-width:768px){.elementor-2561 .elementor-element.elementor-element-d38b398{--width:100%;}}/* Start custom CSS for shortcode, class: .elementor-element-962207d *//* ═══════════════════════════════════════════════════════════
   CSS PROYECTOS V4 - CENTRADO FORZADO CON MARGIN AUTO
   
   SOLUCIÓN DEFINITIVA PARA CENTRADO MÓVIL
   ═══════════════════════════════════════════════════════════ */

:root {
    --pi-primary: #4D58F0;
    --pi-primary-dark: #3d46c9;
    --pi-success: #10b981;
    --pi-gray-50: #f9fafb;
    --pi-gray-100: #f3f4f6;
    --pi-gray-200: #e5e7eb;
    --pi-gray-400: #9ca3af;
    --pi-gray-500: #6b7280;
    --pi-gray-600: #4b5563;
    --pi-gray-900: #111827;
}

/* ═══════════════════════════════════════════════════════════
   WRAPPER - FORZAR FULL WIDTH
   ═══════════════════════════════════════════════════════════ */

body div.pi-shortcode-wrapper,
body .pi-shortcode-wrapper,
div.pi-shortcode-wrapper,
.pi-shortcode-wrapper {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding: 0 !important;
    clear: both !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    transform: translateX(-50%) !important;
}

/* ═══════════════════════════════════════════════════════════
   GRID - AUTO-FIT CON CENTRADO AUTOMÁTICO
   ═══════════════════════════════════════════════════════════ */

body div.pi-shortcode-wrapper div.pi-properties-grid,
body .pi-shortcode-wrapper .pi-properties-grid,
div.pi-properties-grid,
.pi-properties-grid {
    display: grid !important;
    width: 100% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding: 3rem 3rem !important;
    gap: 2.5rem !important;
    list-style: none !important;
    box-sizing: border-box !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 400px)) !important;
    justify-content: center !important;
    align-items: start !important;
}

/* Desktop muy grande: más espaciado */
@media screen and (min-width: 1800px) {
    body div.pi-properties-grid,
    body .pi-properties-grid,
    div.pi-properties-grid {
        max-width: 1800px !important;
        padding: 3rem 4rem !important;
        gap: 3rem !important;
        grid-template-columns: repeat(auto-fit, minmax(340px, 420px)) !important;
    }
}

/* Desktop: mantener espaciado */
@media screen and (min-width: 1200px) and (max-width: 1799px) {
    body div.pi-properties-grid,
    body .pi-properties-grid,
    div.pi-properties-grid {
        padding: 2.5rem 3rem !important;
        gap: 2.5rem !important;
    }
}

/* Laptop: reducir un poco */
@media screen and (min-width: 769px) and (max-width: 1199px) {
    body div.pi-properties-grid,
    body .pi-properties-grid,
    div.pi-properties-grid {
        padding: 2rem 2rem !important;
        gap: 2rem !important;
        grid-template-columns: repeat(auto-fit, minmax(300px, 400px)) !important;
    }
}

/* Tablet: márgenes medios */
@media screen and (min-width: 600px) and (max-width: 768px) {
    body div.pi-properties-grid,
    body .pi-properties-grid,
    div.pi-properties-grid {
        padding: 1.5rem 1rem !important;
        gap: 1.5rem !important;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   MÓVIL: CENTRADO CON MARGIN AUTO EN TARJETAS
   ═══════════════════════════════════════════════════════════ */

/* Móvil grande: CENTRADO FORZADO */
@media screen and (min-width: 480px) and (max-width: 599px) {
    body div.pi-properties-grid,
    body .pi-properties-grid,
    div.pi-properties-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 1.5rem 0.75rem !important;
        gap: 1.5rem !important;
    }
    
    /* Tarjeta con ancho máximo y centrada */
    body div.pi-property-card,
    body .pi-property-card,
    div.pi-property-card {
        width: 100% !important;
        max-width: 500px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Móvil pequeño: CENTRADO FORZADO */
@media screen and (max-width: 479px) {
    body div.pi-properties-grid,
    body .pi-properties-grid,
    div.pi-properties-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 1.25rem 0.5rem !important;
        gap: 1.25rem !important;
    }
    
    /* Tarjeta con ancho máximo y centrada */
    body div.pi-property-card,
    body .pi-property-card,
    div.pi-property-card {
        width: 100% !important;
        max-width: 500px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Reset floats */
body div.pi-properties-grid::before,
body div.pi-properties-grid::after,
body .pi-properties-grid::before,
body .pi-properties-grid::after {
    display: none !important;
    content: none !important;
}

body div.pi-properties-grid > *,
body .pi-properties-grid > * {
    float: none !important;
}

/* ═══════════════════════════════════════════════════════════
   TARJETAS
   ═══════════════════════════════════════════════════════════ */

body div.pi-property-card,
body .pi-property-card,
div.pi-property-card {
    background: white !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    border: 1px solid var(--pi-gray-200) !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

body div.pi-property-card:hover,
body .pi-property-card:hover {
    box-shadow: 0 8px 24px rgba(77,88,240,0.15) !important;
    transform: translateY(-4px) !important;
}

/* Imagen */
body div.pi-property-image,
body .pi-property-image,
div.pi-property-image {
    position: relative !important;
    width: 100% !important;
    padding-bottom: 60% !important;
    overflow: hidden !important;
    background: var(--pi-gray-100) !important;
}

body div.pi-property-image img,
body .pi-property-image img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.3s ease !important;
}

body div.pi-property-card:hover div.pi-property-image img,
body .pi-property-card:hover .pi-property-image img {
    transform: scale(1.05) !important;
}

/* Badge */
body div.pi-property-badge,
body div.pi-property-status,
body .pi-property-badge,
body .pi-property-status {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    padding: 0.5rem 1rem !important;
    border-radius: 2rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    background: var(--pi-success) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(16,185,129,0.3) !important;
    z-index: 2 !important;
}

/* Contenido */
body div.pi-property-content,
body .pi-property-content {
    padding: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    flex: 1 !important;
}

/* Título */
body h3.pi-property-title,
body .pi-property-title {
    margin: 0 !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--pi-gray-900) !important;
    line-height: 1.3 !important;
}

/* Ubicación */
body p.pi-property-location,
body .pi-property-location {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    color: var(--pi-gray-600) !important;
    font-size: 0.875rem !important;
    margin: 0 !important;
}

body .pi-property-location svg {
    flex-shrink: 0 !important;
    color: var(--pi-primary) !important;
}

/* Extracto */
body div.pi-property-excerpt,
body .pi-property-excerpt {
    color: var(--pi-gray-600) !important;
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
}

/* Stats */
body div.pi-property-stats,
body .pi-property-stats {
    display: flex !important;
    gap: 1rem !important;
    padding: 1rem !important;
    background: var(--pi-gray-50) !important;
    border-radius: 0.5rem !important;
}

body div.pi-stat,
body .pi-stat {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
    flex: 1 !important;
}

body span.pi-stat-label,
body .pi-stat-label {
    font-size: 0.75rem !important;
    color: var(--pi-gray-500) !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}

body span.pi-stat-value,
body .pi-stat-value {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--pi-gray-900) !important;
}

body span.pi-stat-highlight,
body .pi-stat-highlight {
    color: var(--pi-primary) !important;
}

/* Meta */
body div.pi-property-meta,
body .pi-property-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid var(--pi-gray-200) !important;
}

body span.pi-meta-item,
body .pi-meta-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.875rem !important;
    color: var(--pi-gray-600) !important;
}

body .pi-meta-item svg {
    flex-shrink: 0 !important;
    color: var(--pi-gray-400) !important;
}

/* Plazas */
body div.pi-plazas-info,
body .pi-plazas-info {
    margin-top: 1rem !important;
}

body div.pi-plazas-header,
body .pi-plazas-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 0.5rem !important;
}

body .pi-plazas-header span:first-child {
    font-size: 0.875rem !important;
    color: var(--pi-gray-600) !important;
    font-weight: 500 !important;
}

body span.pi-plazas-count,
body .pi-plazas-count {
    font-weight: 700 !important;
    color: var(--pi-gray-900) !important;
}

body div.pi-progress-bar,
body .pi-progress-bar {
    height: 8px !important;
    background: var(--pi-gray-200) !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
}

body div.pi-progress-fill,
body .pi-progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, var(--pi-primary), var(--pi-primary-dark)) !important;
    transition: width 0.3s ease !important;
    border-radius: 1rem !important;
}

/* Botones */
body div.pi-property-actions,
body .pi-property-actions {
    margin-top: auto !important;
    padding-top: 1rem !important;
    display: flex !important;
    gap: 0.75rem !important;
}

body button.pi-button,
body .pi-button,
body a.pi-button {
    flex: 1 !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: none !important;
    text-decoration: none !important;
    display: inline-block !important;
}

body button.pi-button-primary,
body .pi-button-primary {
    background: var(--pi-primary) !important;
    color: white !important;
}

body button.pi-button-primary:hover,
body .pi-button-primary:hover {
    background: var(--pi-primary-dark) !important;
    transform: translateY(-1px) !important;
}

body button.pi-button-secondary,
body .pi-button-secondary {
    background: white !important;
    color: var(--pi-primary) !important;
    border: 2px solid var(--pi-primary) !important;
}

body button.pi-button-secondary:hover,
body .pi-button-secondary:hover {
    background: var(--pi-gray-50) !important;
}

/* Modal */
body div#pi-property-modal,
body #pi-property-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0,0,0,0.7) !important;
    display: none !important;
    z-index: 99999 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2rem !important;
    overflow-y: auto !important;
}

body div#pi-property-modal.active,
body #pi-property-modal.active {
    display: flex !important;
}

body div.pi-modal,
body .pi-modal {
    background: white !important;
    border-radius: 1rem !important;
    max-width: 900px !important;
    width: 100% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    position: relative !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
}

body button.pi-modal-close,
body .pi-modal-close {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    background: white !important;
    border: none !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

body button.pi-modal-close:hover,
body .pi-modal-close:hover {
    background: var(--pi-gray-100) !important;
}

body div#pi-modal-body,
body #pi-modal-body {
    padding: 2rem !important;
}

/* Responsive móvil - OPTIMIZADO */
@media screen and (max-width: 599px) {
    body .pi-property-image {
        padding-bottom: 65% !important;
    }
    
    body .pi-property-content {
        padding: 1.25rem !important;
        gap: 0.875rem !important;
    }
    
    body .pi-property-title {
        font-size: 1.125rem !important;
    }
    
    body .pi-property-stats {
        padding: 0.875rem !important;
        gap: 0.75rem !important;
    }
    
    body .pi-stat-value {
        font-size: 1.125rem !important;
    }
    
    body .pi-property-actions {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    body .pi-button {
        width: 100% !important;
        padding: 0.875rem 1.25rem !important;
    }
    
    body #pi-property-modal {
        padding: 1rem !important;
    }
    
    body .pi-modal {
        max-height: 95vh !important;
    }
    
    body #pi-modal-body {
        padding: 1.5rem !important;
    }
}

/* Móvil muy pequeño - EXTRA OPTIMIZADO */
@media screen and (max-width: 360px) {
    body .pi-property-content {
        padding: 1rem !important;
    }
    
    body .pi-property-title {
        font-size: 1rem !important;
    }
    
    body .pi-property-stats {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    body .pi-stat {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   ESTADOS ESPECIALES
   ═══════════════════════════════════════════════════════════ */

/* Loading state */
body .pi-properties-grid.loading {
    opacity: 0.6 !important;
    pointer-events: none !important;
}

/* Empty state */
body .pi-properties-empty {
    text-align: center !important;
    padding: 4rem 2rem !important;
    color: var(--pi-gray-500) !important;
}

/* ═══════════════════════════════════════════════════════════
   FIN - VERSIÓN 4.0 CON FLEXBOX EN MÓVIL
   ═══════════════════════════════════════════════════════════ *//* End custom CSS */