
:root {
    --mk-color-bg: #ffffff;
    --mk-color-primary: #1a1a1a;
    --mk-color-secondary: #4a5568;
    --mk-color-muted: #737373;
    --mk-color-border: #eae9e9;
    --mk-color-brand: #bc0000;
    --mk-color-surface: #f8fafc;
    --mk-color-black-btn: #000000;
    --mk-color-black-hover: #1e293b;
    --mk-transition-ui: cubic-bezier(0.4, 0, 0.2, 1);
}

.mk-main-wrapper { 
    font-family: 'Inter', system-ui, -apple-system, sans-serif; 
    padding: clamp(2rem, 5vh, 3.5rem) 0 1.5rem 0; 
    background: var(--mk-color-bg); 
    color: var(--mk-color-primary);
    -webkit-font-smoothing: antialiased;
}

.mk-container { 
    max-width: 75rem; 
    margin: 0 auto; 
    padding: 0 1.25rem; 
}

.mk-top-layout { 
    display: flex; 
    gap: 2.5rem; 
    align-items: stretch; 
    margin-bottom: 2rem; 
}

.mk-visual-column { 
    flex: 1; 
    min-width: 0; 
}

.mk-main-slider { 
    border-radius: 0.25rem; 
    overflow: hidden; 
    aspect-ratio: 16 / 10; 
    box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.04);
    cursor: grab;
}

.mk-main-slider:active { cursor: grabbing; }

.mk-main-slider--vendido .mk-img-main {
    filter: grayscale(80%) contrast(0.95);
    opacity: 0.9;
}

.mk-img-main { width: 100%; height: 100%; object-fit: cover; }
.mk-thumbs-slider { margin-top: 0.9375rem; }

.mk-img-thumb { 
    aspect-ratio: 16 / 10; 
    object-fit: cover; 
    width: 100%; 
    cursor: pointer; 
    border-radius: 0.1875rem; 
    transition: all 0.25s var(--mk-transition-ui);
    opacity: 0.55;
    filter: brightness(0.9);
}

.mk-img-thumb:hover { 
    opacity: 0.85; 
    filter: brightness(1); 
}

/* Miniatura activa */
.swiper-slide-thumb-active .mk-img-thumb {
    opacity: 1;
    filter: brightness(1);
    outline: none;
}

/* BARRA DE ICONOS */
.mk-v-icons-bar { 
    display: flex; 
    justify-content: space-around; 
    align-items: center; 
    flex-wrap: wrap; 
    gap: 1rem; 
    margin-top: 2rem; 
    padding: 1.5rem; 
    background: #fdfdfd; 
    border: 1px solid #f1f5f9; 
    border-radius: 0.5rem; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01); 
}

.mk-v-icon-box { 
    font-size: 0.875rem; 
    display: flex; 
    align-items: center; 
    gap: 0.75rem; 
    color: var(--mk-color-primary); 
}

.mk-v-icon-box i { 
    color: #444242; 
    font-size: 1.35rem; 
    line-height: 1; 
}

.mk-data-text { font-weight: 600; font-size: 1rem; color: #2d3748; }

/* SIDEBAR CARD */
.mk-sidebar-column { 
    width: 25rem; 
    display: flex; 
    position: sticky; 
    top: 120px; 
}

.mk-trust-card { 
    border: 1px solid var(--mk-color-border); 
    padding: 2.25rem 1.875rem; 
    border-radius: 0.5rem; 
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.03); 
    background: var(--mk-color-bg); 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    position: relative; 
    overflow: hidden; 
}

.mk-trust-card::before { 
    content: ""; 
    position: absolute; 
    top: 0; left: 0; right: 0; 
    height: 4px; 
    background: var(--mk-color-brand); 
}

.mk-trust-card--vendido::before { 
    background: #64748b; 
}

.mk-trust-card--reservado::before { 
    background: #d97706; 
}

/* BADGES DE ESTADO COMERCIAL */
.mk-status-badge-wrapper {
    margin-bottom: 0.75rem;
}

.mk-status-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.mk-status-pill--vendido {
    background: #fee2e2;
    color: #b91c1c;
}

.mk-status-pill--reservado {
    background: #fef9c3;
    color: #a16207;
}

.mk-vehicle-title-card { 
    font-size: 1.625rem; 
    font-weight: 700; 
    color: var(--mk-color-primary); 
    margin-bottom: 0.5rem; 
    line-height: 1.2; 
    letter-spacing: -0.02em; 
    text-transform: uppercase; 
}

.mk-quick-data { 
    font-size: 0.875rem; 
    color: var(--mk-color-muted); 
    font-weight: 500; 
    margin-bottom: 1.5rem; 
}

/* NOTICES DINÁMICOS */
.mk-financia-block { 
    background: var(--mk-color-surface); 
    padding: 1.15rem 1.25rem; 
    border-radius: 0.5rem; 
    margin-bottom: 1.5rem; 
    border-left: 4px solid var(--mk-color-brand); 
}

.mk-financia-block p { 
    font-size: 0.9rem; 
    font-weight: 600; 
    color: #1a202c; 
    line-height: 1.4; 
    margin: 0; 
}

.mk-status-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.15rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

.mk-status-notice i {
    font-size: 1.2rem;
    line-height: 1.2;
    flex-shrink: 0;
}

.mk-status-notice p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.4;
    font-weight: 500;
}

.mk-status-notice--vendido {
    background: #fef2f2;
    border-left: 4px solid #b91c1c;
    color: #991b1b;
}

.mk-status-notice--reservado {
    background: #fffbeb;
    border-left: 4px solid #d97706;
    color: #92400e;
}

.mk-trust-features { 
    display: flex; 
    justify-content: space-between; 
    padding: 1.15rem 0; 
    border-top: 1px solid #f0f0f0; 
    border-bottom: 1px solid #f0f0f0; 
    margin-bottom: 1.5rem; 
}

.mk-feature { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
    gap: 0.4rem; 
}

.mk-feature i { 
    color: var(--mk-color-brand); 
    font-size: 1.15rem; 
    background: #fff5f5; 
    width: 2.5rem; 
    height: 2.5rem; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 50%; 
    transition: transform 0.2s ease; 
}

.mk-trust-card--vendido .mk-feature i {
    color: #64748b;
    background: #f1f5f9;
}

.mk-feature:hover i { transform: scale(1.05); }

.mk-feature span { 
    font-size: 0.75rem; 
    font-weight: 600; 
    color: var(--mk-color-secondary); 
    line-height: 1.3; 
}

/* BOTONES DE ACCIÓN */
.mk-actions { 
    display: flex; 
    flex-direction: column; 
    gap: 0.65rem; 
}

.mk-btn-whatsapp { 
    background: var(--mk-color-black-btn); 
    color: #ffffff !important; 
    padding: 0.8rem 1.25rem; 
    border-radius: 0.35rem; 
    font-weight: 600; 
    text-decoration: none; 
    text-align: center; 
    font-size: 0.9375rem; 
    letter-spacing: 0.02em; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 0.55rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); 
    transition: all 0.2s var(--mk-transition-ui); 
}

.mk-btn-whatsapp i {
    font-size: 1.15rem;
    line-height: 1;
}

.mk-btn-whatsapp:hover { 
    background: var(--mk-color-black-hover); 
    transform: translateY(-1px); 
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); 
}

.mk-btn-whatsapp--secondary {
    background: #334155;
}

.mk-btn-whatsapp--secondary:hover {
    background: #1e293b;
}

.mk-btn-more { 
    border: 1px solid #cbd5e1; 
    padding: 0.75rem 1.25rem; 
    border-radius: 0.35rem; 
    font-weight: 600; 
    color: var(--mk-color-secondary); 
    text-decoration: none; 
    font-size: 0.8125rem; 
    text-align: center; 
    letter-spacing: 0.03em;
    transition: all 0.2s var(--mk-transition-ui); 
    background: transparent; 
}

.mk-btn-more:hover { 
    background: var(--mk-color-surface); 
    border-color: #94a3b8; 
    color: var(--mk-color-primary); 
}

/* COMPARTIR */
.mk-card-footer { 
    margin-top: 1.25rem; 
    padding-top: 1rem; 
    border-top: 1px solid #f0f0f0; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 1rem; 
}

.mk-share-label { 
    font-size: 0.8125rem; 
    font-weight: 600; 
    color: #a0aec0; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
}

.mk-share-icons { display: flex; gap: 0.75rem; }

.mk-share-icons a { 
    color: var(--mk-color-muted); 
    font-size: 0.95rem; 
    text-decoration: none; 
    width: 2rem; 
    height: 2rem; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background: var(--mk-color-surface); 
    border-radius: 50%; 
    transition: all 0.25s var(--mk-transition-ui); 
}

.mk-share-icons a:hover { 
    color: #ffffff; 
    background: var(--mk-color-brand); 
    transform: translateY(-2px); 
}

@media (max-width: 991px) {
    .mk-top-layout { flex-direction: column; gap: 1.875rem; }
    .mk-sidebar-column { width: 100%; position: static; }
    .mk-trust-card { min-height: auto; gap: 1.5rem; padding: 2rem 1.5rem; }
}

/* =========================================================
   FIX FOUC SWIPER: Previene el salto visual en la carga inicial
   ========================================================= */
.swiper {
    overflow: hidden; 
}

.mk-thumbs-slider:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    gap: 10px; 
}

.mk-thumbs-slider:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 40px) / 5); 
    flex-shrink: 0;
}
