/* =========================
   CONTENEDOR GENERAL DETAIL
========================= */

.asofix-detail {
    display: grid;
    grid-template-columns: 520px 1fr;
    grid-template-rows: auto auto;
    gap: 30px 40px;
    align-items: start;
    margin-top: 30px;
}

/* =========================
   IMAGEN (MÁS GRANDE)
========================= */

.asofix-detail-image {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.asofix-detail-image img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    object-fit: cover;
    box-shadow: 0 12px 30px rgba(0,0,0,0.5);
}

/* =========================
   INFO VEHÍCULO
========================= */

.asofix-detail-info {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.asofix-detail-info h1 {
    margin-top: 0;
}

/* =========================
   FORMULARIO (ABAJO Y A LA IZQ)
========================= */

/* el form vive dentro de .asofix-detail-info,
   así que lo empujamos hacia abajo */
.asofix-detail-info .asofix-lead-form {
    margin-top: 40px;     /* más abajo */
    max-width: 520px;     /* más chico */
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1024px) {

    .asofix-detail {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .asofix-detail-image,
    .asofix-detail-info {
        grid-column: 1 / -1;
    }

    .asofix-detail-info .asofix-lead-form {
        max-width: 100%;
    }
}

/* =========================
   GALERÍA
========================= */

.asofix-detail-image {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* imagen principal */
.asofix-main-image {
    width: 100%;
    border-radius: 14px;
    cursor: zoom-in;
    box-shadow: 0 12px 30px rgba(0,0,0,0.5);
}

/* miniaturas */
.asofix-thumbnails {
    display: flex;
    gap: 10px;
}

.asofix-thumb {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    opacity: 0.7;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.asofix-thumb:hover,
.asofix-thumb.active {
    opacity: 1;
    border-color: #f5c400;
}