/* ===== SP MPC – Estilos base y tokens ===== */
:root{
  --spmpc-gap: 16px;
  --spmpc-radius: 0px;
  --spmpc-btn-radius: 0px;
  --spmpc-border: #e5e7eb;
  --spmpc-bg: #ffffff;
  --spmpc-muted: #6b7280;
  --spmpc-accent: #111827;
  --spmpc-accent-weak: #f3f4f6;
  --spmpc-dot: 38px;
  --spmpc-dot-active: #514322;
}

.sp-mpc{ --gap: var(--spmpc-gap); --dot: var(--spmpc-dot); }

.sp-mpc .sp-mpc-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:var(--gap);
}
.sp-mpc .sp-mpc-toolbar-buttons{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:var(--gap);
}
.sp-mpc .sp-mpc-search{
  flex:1 1 260px; padding:10px 12px; border:1px solid var(--spmpc-border);
  border-radius:var(--spmpc-btn-radius); background:#fff; min-width:200px;
}

.sp-mpc .sp-mpc-btn{
  display:inline-flex; align-items:center; gap:6px; padding:10px 12px;
  border:1px solid var(--spmpc-border); border-radius:var(--spmpc-btn-radius); background:var(--spmpc-bg);
  cursor:pointer; transition:background .2s, border-color .2s, color .2s;
}
.sp-mpc .sp-mpc-btn:hover{ background:var(--spmpc-accent-weak); }
.sp-mpc .sp-mpc-btn.active{ background:var(--spmpc-accent); color:#fff; border-color:var(--spmpc-accent); }

.sp-mpc .sp-mpc-filters{ display:flex; flex-wrap:wrap; gap:8px; }
.sp-mpc .sp-mpc-filter{ display:flex; align-items:center; gap:8px; }
.sp-mpc .sp-mpc-filter strong{ font-weight:600; color:var(--spmpc-accent); }
.sp-mpc .sp-mpc-filter label{ font-size:.95rem; color:var(--spmpc-accent); }

.sp-mpc .sp-mpc-content{ position:relative; }

/* Grid de cards */
.sp-mpc .sp-mpc-list{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:var(--gap);
}
.sp-mpc .sp-mpc-item{
  border:1px solid var(--spmpc-border); border-radius:var(--spmpc-radius); background:#fff; overflow:hidden;
  display:flex; flex-direction:column;
}
.sp-mpc .sp-mpc-item .thumb img{ display:block; width:100%; height:auto; }
.sp-mpc .sp-mpc-item .body{ padding:12px; display:flex; flex-direction:column; gap:8px; }
.sp-mpc .sp-mpc-item .title{ margin:0; font-size:1.05rem; }
.sp-mpc .sp-mpc-item .meta{ color:var(--spmpc-muted); font-size:.9rem; }
.sp-mpc .sp-mpc-item .actions{ margin-top:auto; }

/* Mapa */
.sp-mpc .sp-mpc-mapwrap{
  position:relative; width:100%; border:1px solid var(--spmpc-border);
  border-radius:var(--spmpc-radius); overflow:hidden; background:#fafafa;
}
.sp-mpc .sp-mpc-mapwrap img{ display:block; width:100%; height:auto; }
.sp-mpc .sp-mpc-points{ position:absolute; inset:0; }
.sp-mpc .sp-mpc-point{
  position:absolute; width:var(--dot); height:var(--dot); border-radius:50%;
  background:var(--spmpc-accent); opacity:.9; transform:translate(-50%, -50%);
  cursor:pointer; outline:4px solid rgba(0,0,0,.12); transition:transform .12s, background .2s, outline-color .2s;
}
.sp-mpc .sp-mpc-point:hover{ transform:translate(-50%, -50%) scale(1.08); }
.sp-mpc .sp-mpc-point.selected{ background:var(--spmpc-dot-active); outline-color:rgba(22,163,74,.25); }

/* Paginación */
.sp-mpc .sp-mpc-pagination{ display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--gap); }
.sp-mpc .sp-mpc-pagination .page{
  padding:6px 10px; border:1px solid var(--spmpc-border); border-radius:8px; background:#fff; cursor:pointer;
}
.sp-mpc .sp-mpc-pagination .page.active{
  background:var(--spmpc-accent); color:#fff; border-color:var(--spmpc-accent);
}

.sp-mpc .sp-mpc-hidden{ display:none !important; }

/* Responsivo fino */
@media (max-width: 640px){
  .sp-mpc .sp-mpc-search{ flex:1 1 100%; }
  .sp-mpc .sp-mpc-list{ grid-template-columns:1fr; }
}

.sp-mpc::before{
    content: "";
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    transition: all .2s;
}
.sp-mpc.sp-mpc-loading::before{
    content: "";
    display: block;
    background-color: #fff4;
    z-index: 5;
    cursor: progress;
    backdrop-filter: blur(4px);
}









/* CUSTOM NUGA */

.sp-mpc .sp-mpc-toolbar{
    display: flex;
    align-items: center;
    gap: 0px;
    margin-bottom: 0;
    flex-direction: column;
    background: var(--e-global-color-secondary);
    padding: 40px 100px;
}

.sp-mpc .sp-mpc-search{
    border: 1px solid var(--e-global-color-primary);
    background: transparent;
    color: var(--e-global-color-primary);
    text-transform: uppercase;
}

.sp-mpc .sp-mpc-filter input{
    display:none;
}

.sp-mpc .sp-mpc-btn{
    display: flex;
}

.sp-mpc .sp-mpc-btn.active{
    display: none;
}

.sp-mpc .sp-mpc-filters,
.sp-mpc .sp-mpc-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
}

.sp-mpc .sp-mpc-filters{
    flex-wrap: nowrap;
}

.sp-mpc .sp-mpc-filters .sp-btn-search{
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
}

.sp-mpc .sp-mpc-search-wrapper{
    width: 100%;
    padding-top: 40px;
}

.sp-mpc .sp-mpc-filter label{
    min-width: 200px;
    min-height: 60px;
    text-align: center;
    padding: 4px 20px;
    border-radius: var(--spmpc-btn-radius);
    border: 1px solid var(--e-global-color-primary);
    background: var(--e-global-color-secondary);
    color: var(--e-global-color-primary);
    cursor: pointer;
    text-transform: uppercase;
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    font-family: Museo Sans;
    font-weight: 300;
    font-size: 16px;

    transition: background .2s, border-color .2s, color .2s;
}

.sp-mpc .sp-mpc-filter label:hover{
    color: var(--e-global-color-accent);
    border-color: var(--e-global-color-accent);
}

/* FIX PARA LA IMAGEN ROJA */
.sp-mpc .sp-mpc-filter label:hover img{
    filter: hue-rotate(276deg) saturate(25) brightness(0.9);
}

.sp-mpc .sp-mpc-filter input:checked+label{
    background: var(--e-global-color-accent);
    color: var(--e-global-color-primary);
    border-color: var(--e-global-color-accent);
}

.sp-mpc .sp-mpc-filter input:checked+label img{
    filter: unset;
}

.sp-mpc .sp-mpc-list-item{
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: var(--e-global-color-primary);
    transition: border-color 0.3s;
}

.sp-mpc .sp-mpc-list-item.is-highlight{
    border-color: var(--e-global-color-accent);
}

.sp-mpc .sp-mpc-list-item.is-highlight h3.elementor-heading-title{
    color: var(--e-global-color-accent);
}

.sp-mpc .sp-mpc-list-item > .e-loop-item{
    height: 100%;
}

.sp-mpc .sp-mpc-filter-title{
    display: none;
}

.sp-mpc .sp-mpc-toolbar-buttons{
    padding: 40px 100px;
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 0;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.sp-mpc .sp-mpc-content {
    padding: 40px 100px;
    min-height: 200px;
}

.sp-mpc .sp-mpc-maponly{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    gap: 40px;
}

.sp-mpc .sp-mpc-list{
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.sp-mpc .sp-mpc-mapwrap{
    width: 55%;
    border: none;
    border-radius: 0;
    max-width: 1000px;
    background: transparent;
}

.sp-mpc .sp-mpc-list.sp-mpc-list-in-map{
    display: flex;
    gap: 20px;
    flex-direction: column;
    width: 45%;
    max-width: 700px;
    overflow-y: scroll;

    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox, Safari 18.2+, Chromium 121+ */
}
.sp-mpc .sp-mpc-list.sp-mpc-list-in-map::-webkit-scrollbar { 
    display: none;  /* Older Safari and Chromium */
}

.sp-mpc .sp-mpc-btn,
.sp-mpc .sp-mpc-btn:hover{ 
    font-family: Museo Sans;
    font-weight: 300;
    font-size: 16px;
    text-transform: uppercase;
    padding: 10px 12px;
    border-radius: 0;
    gap: 14px;
    background: transparent;
    border: none;
    color: var(--e-global-color-secondary);
}

.sp-mpc .sp-mpc-btn.sp-mpc-toggle-list::before,
.sp-mpc .sp-mpc-btn.sp-mpc-toggle-map::before{
    content:"";
    display: block;
    width: 28px;
    height: 28px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.sp-mpc .sp-mpc-btn.sp-mpc-toggle-list::before{
    background-image: url('../img/ver_en_listado_icon.svg');
}

.sp-mpc .sp-mpc-btn.sp-mpc-toggle-map::before{
    background-image: url('../img/ver_en_mapa_icon.svg');
}

.sp-mpc-gomap .elementor-button{
    cursor: pointer;
}

.sp-mpc .sp-mpc-point {
    position: absolute;
    border-radius: 10000px;
    background: #8B8867;
    outline: none;
    opacity: 1;
    border: 1px solid #CAD2B2;
    transition: transform .12s, background .2s, outline-color .2s;
    font-family: Museo Sans;
    font-weight: 300;
    font-size: 14px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--e-global-color-primary);
}


.sp-mpc .sp-mpc-point.selected{
    transform: translate(-50%, -50%) scale(1.5);
}


.sp-mpc .sp-mpc-pagination{
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.sp-mpc .sp-mpc-pagination .page{
    background: var(--e-global-color-primary);
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--e-global-color-secondary);
    border-radius: 0px;
    text-decoration: none;
    font-family: Museo Sans;
    font-weight: 300;
    color: var(--e-global-color-secondary);
    margin-top: 50px;
}
.sp-mpc .sp-mpc-pagination .page.active{
    background: var(--e-global-color-secondary);
    color: var(--e-global-color-primary);
    border-color: var(--e-global-color-secondary);
}

.sp-mpc .txt-no-results{
    font-family: wulkan;
    text-transform: none;
    font-style: italic;
    font-size: 40px;
    font-weight: 200;
}




@media (min-width: 992px){
    .sp-mpc-list.sp-mpc-list-in-map.haz_scroll {
        position: relative;
        overflow-y: auto;
    }

    .sp-mpc-list.sp-mpc-list-in-map.haz_scroll::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 40%;
        background: linear-gradient(0deg, var(--e-global-color-primary) 50%, transparent);
        z-index: 1;
    }

    .sp-mpc-list.sp-mpc-list-in-map.haz_scroll::before {
        content: "";
        position: absolute;
        bottom: 48px;
        left: 50%;
        transform: translateX(-50%) rotate(-45deg);
        width: 24px;
        height: 24px;
        display: block;
        border-left: 2px solid var(--e-global-color-secondary);
        border-bottom: 2px solid var(--e-global-color-secondary);
        animation: bounce_mpc 1.2s infinite;
        pointer-events: none;
        z-index: 2;
    }
}

@keyframes bounce_mpc {
  0%, 100% { transform: translate(-50%, 0) rotate(-45deg); opacity: .6; }
  50% { transform: translate(-50%, 5px) rotate(-45deg); opacity: 1; }
}




@media (max-width: 1440px){
    .sp-mpc .sp-mpc-input-wrapper{
        flex: 1;
    }

    .sp-mpc .sp-mpc-content {
        padding: 40px 20px;
    }
}

@media (max-width: 1340px){
    .sp-mpc .sp-mpc-mapwrap{
        width: 50%;
    }

    .sp-mpc .sp-mpc-list.sp-mpc-list-in-map{
        width: 50%;
    }
}


@media (max-width: 1280px){
    .sp-mpc .sp-mpc-list{
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 992px){
    .sp-mpc .sp-mpc-toolbar{
        padding: 40px 50px;
    }

    .sp-mpc .sp-mpc-toolbar-buttons{
        padding: 40px 50px;
    }

    .sp-mpc .sp-mpc-content {
        padding: 40px 50px;
    }

    .sp-mpc .sp-mpc-maponly {
        flex-direction: column;
    }

    .sp-mpc .sp-mpc-mapwrap,
    .sp-mpc .sp-mpc-list.sp-mpc-list-in-map{
        width: 100%;
        max-width: unset;
    }

    .sp-mpc .sp-mpc-list.sp-mpc-list-in-map{
        max-height: unset!important;
    }

    .sp-mpc .sp-mpc-filter label{
        min-height: 34px;
        font-size: 14px;
        min-width: unset;
    }

    .sp-mpc .sp-mpc-input-wrapper img{
        max-height: 20px;
    }

    .sp-mpc .sp-mpc-filters {
        flex-direction: column;
    }

    .sp-mpc .sp-mpc-filter {
        gap: 10px;
    }
}

@media (max-width: 768px){
    .sp-mpc .sp-mpc-content {
        padding: 40px 20px;
    }
    .sp-mpc .sp-mpc-toolbar{
        padding: 40px 20px;
    }
    .sp-mpc .sp-mpc-toolbar-buttons{
        padding: 40px 20px;
    }


    .sp-mpc .sp-mpc-list{
        gap: 0px;
    }

    .sp-mpc .sp-mpc-maponly {
        flex-direction: column;
    }

    .sp-mpc .sp-mpc-list{
        grid-template-columns: 1fr;
    }

    .sp-mpc .sp-mpc-mapwrap,
    .sp-mpc .sp-mpc-list.sp-mpc-list-in-map{
        width: 100%;
        max-width: unset;
    }

}