/* --- LAYOUT GENERAL --- */
    .tremble-modal {
        display: none;
        position: fixed;
        z-index: 99999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(5px);
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }

    .tremble-modal-content {
        background-color: #fff;
        margin: 5vh auto;
        width: 95%;
        max-width: 900px;
        height: 80vh;
        display: flex;
        flex-direction: row;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
        border-radius: 4px;
        overflow: hidden;
    }

    /* --- COLUMNA IMAGEN --- */
    .tremble-modal-image {
        width: 35%;
        background-color: #000;
        background-image: url('https://images.squarespace-cdn.com/content/v1/5e4aeb6628c78d6f7e747b89/1724969637476-OL0DKQ09OJMLCRBQA1W7/1B9A8112+%281%29.JPG?format=2500w');
        background-size: cover;
        background-position: center;
    }

    /* --- COLUMNA BODY --- */
    .tremble-modal-body {
        width: 65%;
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    /* --- GESTIÓN DE PASOS --- */
    .tremble-step {
        display: none;
        flex-direction: column;
        height: 100%;
    }

    .active-step {
        display: flex;
    }

    .tremble-header-nav {
        text-align: left;
        margin-bottom: 5px;
    }

    .tremble-back-link {
        background: none;
        border: none;
        color: #999;
        cursor: pointer;
        text-transform: uppercase;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1px;
        padding: 0;
    }

    .tremble-back-link:hover {
        color: #000;
        text-decoration: underline;
    }

    /* --- BREADCRUMB (NUEVO) --- */
    .tremble-breadcrumb {
        color: #aaa;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 8px;
    }

    /* --- HEADER --- */
    .tremble-header {
        padding: 30px 40px 10px 40px;
        text-align: center;
        background-color: #fff;
        flex-shrink: 0;
    }

    .tremble-modal-title {
        margin: 0;
        font-size: 14px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        font-weight: 800;
        color: #333;
    }

    .tremble-close-btn {
        position: absolute;
        top: 15px;
        right: 20px;
        font-size: 28px;
        color: #ccc;
        cursor: pointer;
        z-index: 10;
        transition: color 0.2s;
    }

    .tremble-close-btn:hover {
        color: #000;
    }

    /* --- SCROLL AREA Y GRID --- */
    .tremble-scroll-area {
        flex-grow: 1;
        overflow-y: auto;
        padding: 20px 40px;
    }

    .tremble-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    /* --- BOTONES DE SELECCIÓN --- */
    .tremble-option {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px 5px;
        background-color: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        cursor: pointer;
        text-transform: uppercase;
        font-size: 11px;
        font-weight: 700;
        color: #000;
        transition: all 0.2s ease;
        min-height: 40px;
        text-align: center;
    }

    .tremble-option:hover {
        border-color: #000;
        background-color: #fbfbfb;
    }

    .tremble-option.selected {
        border: 2px solid #000;
        background-color: #fff;
    }

    /* --- FOOTER --- */
    .tremble-footer {
        padding: 20px 40px 30px 40px;
        border-top: 1px solid #f0f0f0;
        background-color: #fff;
        flex-shrink: 0;
    }

    .tremble-btn {
        background-color: #000;
        color: #fff;
        border: none;
        padding: 16px;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 2px;
        cursor: pointer;
        text-transform: uppercase;
        width: 100%;
        border-radius: 2px;
        transition: opacity 0.3s;
    }

    .tremble-btn.disabled {
        background-color: #ddd;
        color: #888;
        cursor: not-allowed;
    }

    /* --- RESPONSIVE MOBILE --- */
    @media (max-width: 768px) {
        .tremble-modal-content {
            flex-direction: column;
            width: 100%;
            height: 100%;
            max-width: none;
            margin: 0;
            border-radius: 0;
        }

        .tremble-modal-image {
            display: none;
        }

        .tremble-modal-body {
            width: 100%;
            height: 100%;
        }

        .tremble-list {
            grid-template-columns: repeat(2, 1fr);
        }

        .tremble-scroll-area {
            padding: 20px;
        }

        .tremble-header,
        .tremble-footer {
            padding-left: 20px;
            padding-right: 20px;
        }
    }