```html
<div class="modal-backdrop">
    <section class="service-modal" role="dialog" aria-modal="true">

        <!-- HEADER -->
        <header class="modal-header">
            <div>
                <h1>Seleccionar servicio</h1>
                <p>Selecciona el servicio que aplicarás a los paquetes.</p>
            </div>

            <button class="modal-close" aria-label="Cerrar">
                ×
            </button>
        </header>


        <!-- ALERTA DESCUENTO -->
        <div class="discount-alert">
            <div class="discount-alert-icon">!</div>

            <div class="discount-alert-content">
                <strong>Este cliente tiene descuentos activos</strong>
                <span>
                    Los precios mostrados ya incluyen los descuentos aplicados.
                </span>
            </div>

            <button class="discount-alert-action">
                Ver descuentos
            </button>
        </div>


        <!-- PAQUETES -->
        <div class="packages-row">
            <label for="packages">
                Paquetes totales
            </label>

            <input
                id="packages"
                type="number"
                min="1"
                value="1"
            >
        </div>


        <!-- SERVICIOS -->
        <div class="services-grid">


            <!-- EXPRESS -->
            <article
                class="service-card selected"
                data-service="express"
            >

                <button class="service-head">

                    <div class="service-icon">✈</div>

                    <div class="service-title">
                        <div class="service-name-row">
                            <h2>Express</h2>
                            <span class="service-code">EXP</span>
                        </div>

                        <span class="service-time">
                            De 1 a 3 días
                        </span>
                    </div>

                    <span class="service-check">✓</span>
                </button>


                <div class="service-body">

                    <div class="types-label">
                        Tipos disponibles
                    </div>


                    <!-- TIPO -->
                    <div class="type-row">

                        <div class="type-info">
                            <div class="type-name-row">
                                <strong>Normal</strong>
                                <span class="type-code">NOR</span>
                            </div>
                        </div>

                        <div class="type-price">
                            <div class="price-current">
                                $6.50 <small>/ lb</small>
                            </div>

                            <div class="price-old">
                                $7.50
                            </div>

                            <span class="discount-percent">
                                -13%
                            </span>
                        </div>

                    </div>


                    <!-- TIPO -->
                    <div class="type-row">

                        <div class="type-info">
                            <div class="type-name-row">
                                <strong>Congelados</strong>
                                <span class="type-code">ICE</span>
                            </div>
                        </div>

                        <div class="type-price">
                            <div class="price-current">
                                $6.50 <small>/ lb</small>
                            </div>

                            <div class="price-old">
                                $7.50
                            </div>

                            <span class="discount-percent">
                                -13%
                            </span>
                        </div>

                    </div>

                </div>

                <footer class="service-footer">
                    * Precios por libra
                </footer>

            </article>


            <!-- SEMI EXPRESS -->
            <article
                class="service-card"
                data-service="semi"
            >

                <button class="service-head">

                    <div class="service-icon">◷</div>

                    <div class="service-title">
                        <div class="service-name-row">
                            <h2>Semi-Express</h2>
                            <span class="service-code">SXP</span>
                        </div>

                        <span class="service-time">
                            De 3 a 7 días
                        </span>
                    </div>

                    <span class="service-check">✓</span>
                </button>


                <div class="service-body">

                    <div class="types-label">
                        Tipos disponibles
                    </div>

                    <div class="type-row">

                        <div class="type-info">
                            <div class="type-name-row">
                                <strong>Normal</strong>
                                <span class="type-code">NOR</span>
                            </div>
                        </div>

                        <div class="type-price">
                            <div class="price-current">
                                $5.25 <small>/ lb</small>
                            </div>

                            <div class="price-old">
                                $6.00
                            </div>

                            <span class="discount-percent">
                                -12%
                            </span>
                        </div>

                    </div>


                    <div class="type-row">

                        <div class="type-info">
                            <div class="type-name-row">
                                <strong>Congelados</strong>
                                <span class="type-code">ICE</span>
                            </div>
                        </div>

                        <div class="type-price">
                            <div class="price-current">
                                $5.25 <small>/ lb</small>
                            </div>

                            <div class="price-old">
                                $6.00
                            </div>

                            <span class="discount-percent">
                                -12%
                            </span>
                        </div>

                    </div>

                </div>

                <footer class="service-footer">
                    * Precios por libra
                </footer>

            </article>


            <!-- AEREO -->
            <article
                class="service-card"
                data-service="aereo"
            >

                <button class="service-head">

                    <div class="service-icon">✈</div>

                    <div class="service-title">
                        <div class="service-name-row">
                            <h2>Aéreo</h2>
                            <span class="service-code">AIR</span>
                        </div>

                        <span class="service-time">
                            De 7 a 15 días
                        </span>
                    </div>

                    <span class="service-check">✓</span>
                </button>


                <div class="service-body">

                    <div class="types-label">
                        Tipos disponibles
                    </div>

                    <div class="type-row">

                        <div class="type-info">
                            <div class="type-name-row">
                                <strong>Normal</strong>
                                <span class="type-code">NOR</span>
                            </div>
                        </div>

                        <div class="type-price">
                            <div class="price-current">
                                $4.25 <small>/ lb</small>
                            </div>

                            <div class="price-old">
                                $5.00
                            </div>

                            <span class="discount-percent">
                                -15%
                            </span>
                        </div>

                    </div>


                    <div class="type-row">

                        <div class="type-info">
                            <div class="type-name-row">
                                <strong>Congelados</strong>
                                <span class="type-code">ICE</span>
                            </div>
                        </div>

                        <div class="type-price">
                            <div class="price-current">
                                $4.25 <small>/ lb</small>
                            </div>

                            <div class="price-old">
                                $5.00
                            </div>

                            <span class="discount-percent">
                                -15%
                            </span>
                        </div>

                    </div>

                </div>

                <footer class="service-footer">
                    * Precios por libra
                </footer>

            </article>


            <!-- MARITIMO -->
            <article
                class="service-card"
                data-service="maritimo"
            >

                <button class="service-head">

                    <div class="service-icon">⚓</div>

                    <div class="service-title">
                        <div class="service-name-row">
                            <h2>Marítimo</h2>
                            <span class="service-code">MAR</span>
                        </div>

                        <span class="service-time">
                            De 25 a 30 días
                        </span>
                    </div>

                    <span class="service-check">✓</span>
                </button>


                <div class="service-body">

                    <div class="types-label">
                        Tipos disponibles
                    </div>


                    <!-- MISCELANEA -->
                    <div class="type-row">

                        <div class="type-info">
                            <div class="type-name-row">
                                <strong>Miscelánea</strong>
                                <span class="type-code">MSC</span>
                            </div>
                        </div>

                        <div class="type-price">
                            <div class="price-current">
                                $2.75 <small>/ lb</small>
                            </div>

                            <div class="price-old">
                                $3.25
                            </div>

                            <span class="discount-percent">
                                -15%
                            </span>
                        </div>

                    </div>


                    <!-- EQUIPOS -->
                    <div class="type-row">

                        <div class="type-info">
                            <div class="type-name-row">
                                <strong>Equipos</strong>
                                <span class="type-code">EQI</span>
                            </div>
                        </div>

                        <div class="type-price">
                            <div class="price-current">
                                $2.75 <small>/ lb</small>
                            </div>

                            <div class="price-old">
                                $3.25
                            </div>

                            <span class="discount-percent">
                                -15%
                            </span>
                        </div>

                    </div>


                    <!-- CAJA -->
                    <div class="type-row">

                        <div class="type-info">

                            <div class="type-name-row">
                                <strong>Caja 14×14×14</strong>
                                <span class="type-code">C14</span>
                            </div>

                            <div class="type-note">
                                Peso máximo 110 libras
                                <span>(solo miscelánea)</span>
                            </div>

                        </div>

                        <div class="type-price">
                            <div class="price-current">
                                $2.75 <small>/ lb</small>
                            </div>

                            <div class="price-old">
                                $3.50
                            </div>

                            <span class="discount-percent">
                                -21%
                            </span>
                        </div>

                    </div>


                    <!-- CAJA -->
                    <div class="type-row">

                        <div class="type-info">

                            <div class="type-name-row">
                                <strong>Caja 16×16×16</strong>
                                <span class="type-code">C16</span>
                            </div>

                        </div>

                        <div class="type-price">
                            <div class="price-current">
                                $2.75 <small>/ lb</small>
                            </div>

                            <div class="price-old">
                                $3.50
                            </div>

                            <span class="discount-percent">
                                -21%
                            </span>
                        </div>

                    </div>

                </div>

                <footer class="service-footer">
                    * Precios por libra
                </footer>

            </article>

        </div>


        <!-- INFO -->
        <div class="modal-info">
            <span>ⓘ</span>
            <p>
                Los precios pueden variar según la sucursal
                y el peso total del paquete.
            </p>
        </div>


        <!-- FOOTER -->
        <footer class="modal-footer">

            <button class="button secondary">
                Cancelar
            </button>

            <button class="button primary">
                Continuar
            </button>

        </footer>

    </section>
</div>
```

<style>
* {
    box-sizing: border-box;
}

:root {
    --primary: #1769ff;
    --primary-soft: #edf4ff;

    --text: #172033;
    --text-secondary: #667085;
    --border: #dfe3ea;
    --surface: #ffffff;
    --background: #f5f7fa;

    --success: #159447;
    --warning: #9a6700;
    --warning-background: #fff8e6;
    --warning-border: #f4d47c;
}


/* ================================
   BACKDROP
================================ */

.modal-backdrop {
    position: fixed;
    inset: 0;

    display: grid;
    place-items: center;

    padding: 24px;

    background: rgba(16, 24, 40, .62);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/* ================================
   MODAL
================================ */

.service-modal {
    width: min(1180px, 100%);
    max-height: calc(100vh - 48px);

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: var(--surface);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 16px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, .22);
}


/* ================================
   HEADER
================================ */

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    padding: 26px 28px 20px;
}

.modal-header h1 {
    margin: 0;

    color: var(--text);
    font-size: 22px;
    line-height: 1.2;
}

.modal-header p {
    margin: 7px 0 0;

    color: var(--text-secondary);
    font-size: 13px;
}

.modal-close {
    width: 36px;
    height: 36px;

    border: 0;
    border-radius: 8px;

    background: transparent;

    color: #344054;

    font-size: 25px;
    line-height: 1;

    cursor: pointer;
}

.modal-close:hover {
    background: #f2f4f7;
}


/* ================================
   DISCOUNT ALERT
================================ */

.discount-alert {
    display: flex;
    align-items: center;
    gap: 13px;

    margin: 0 28px;

    padding: 13px 14px;

    border: 1px solid var(--warning-border);
    border-radius: 9px;

    background: var(--warning-background);
}

.discount-alert-icon {
    flex: 0 0 auto;

    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #ffca3a;
    color: #4d3600;

    font-weight: 800;
}

.discount-alert-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 2px;
}

.discount-alert-content strong {
    color: #4d3600;
    font-size: 13px;
}

.discount-alert-content span {
    color: #765d1b;
    font-size: 12px;
}

.discount-alert-action {
    margin-left: auto;

    flex: 0 0 auto;

    padding: 7px 11px;

    border: 1px solid #e7c96f;
    border-radius: 7px;

    background: rgba(255,255,255,.65);

    color: #684d00;

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
}


/* ================================
   PACKAGES
================================ */

.packages-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;

    padding: 18px 28px 14px;
}

.packages-row label {
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}

.packages-row input {
    width: 130px;
    height: 38px;

    padding: 0 12px;

    border: 1px solid var(--border);
    border-radius: 8px;

    outline: none;

    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}

.packages-row input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(23, 105, 255, .10);
}


/* ================================
   SERVICES
================================ */

.services-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;

    padding: 0 28px 20px;

    overflow-y: auto;
}


/* ================================
   SERVICE CARD
================================ */

.service-card {
    min-width: 0;

    display: flex;
    flex-direction: column;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: #fff;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.service-card:hover {
    border-color: #b8c0cc;
}

.service-card.selected {
    border: 2px solid var(--primary);
    box-shadow:
        0 0 0 1px rgba(23, 105, 255, .04);
}


/* ================================
   SERVICE HEADER
================================ */

.service-head {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 16px;

    border: 0;

    background: transparent;

    text-align: left;

    cursor: pointer;
}

.service-icon {
    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    background: var(--primary-soft);

    color: var(--primary);

    font-size: 21px;
}

.service-title {
    min-width: 0;
}

.service-name-row {
    display: flex;
    align-items: center;
    gap: 7px;
}

.service-name-row h2 {
    margin: 0;

    color: var(--text);

    font-size: 15px;
    font-weight: 700;
}

.service-code {
    padding: 2px 5px;

    border: 1px solid #b9d0ff;
    border-radius: 5px;

    color: var(--primary);

    font-size: 10px;
    font-weight: 700;
}

.service-time {
    display: block;

    margin-top: 3px;

    color: var(--text-secondary);

    font-size: 11px;
}

.service-check {
    width: 20px;
    height: 20px;

    display: grid;
    place-items: center;

    margin-left: auto;

    border-radius: 50%;

    background: transparent;

    color: transparent;

    font-size: 12px;
    font-weight: 800;
}

.selected .service-check {
    background: var(--primary);
    color: white;
}


/* ================================
   SERVICE BODY
================================ */

.service-body {
    flex: 1;

    padding: 0 16px;
}

.types-label {
    padding: 5px 0 9px;

    border-bottom: 1px solid #edf0f3;

    color: var(--text);

    font-size: 11px;
    font-weight: 600;
}


/* ================================
   TYPE
================================ */

.type-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 10px;

    padding: 13px 0;

    border-bottom: 1px solid #edf0f3;
}

.type-info {
    min-width: 0;
}

.type-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;
}

.type-name-row strong {
    color: var(--text);

    font-size: 13px;
    font-weight: 600;
}

.type-code {
    padding: 2px 5px;

    border: 1px solid #c8d7ee;
    border-radius: 5px;

    background: #f7f9fc;

    color: #47617d;

    font-size: 9px;
    font-weight: 700;
}

.type-note {
    max-width: 150px;

    margin-top: 6px;

    color: #b45309;

    font-size: 10px;
    line-height: 1.35;
}

.type-note span {
    display: block;
}


/* ================================
   PRICE
================================ */

.type-price {
    flex: 0 0 auto;

    display: grid;
    grid-template-columns: auto auto;
    align-items: center;

    column-gap: 6px;
}

.price-current {
    grid-column: 1 / -1;

    color: var(--text);

    font-size: 13px;
    font-weight: 700;

    text-align: right;
}

.price-current small {
    color: var(--text-secondary);

    font-size: 10px;
    font-weight: 500;
}

.price-old {
    color: #8b929d;

    font-size: 10px;

    text-decoration: line-through;
    text-align: right;
}

.discount-percent {
    color: var(--success);

    font-size: 10px;
    font-weight: 700;
}


/* ================================
   CARD FOOTER
================================ */

.service-footer {
    margin-top: auto;

    padding: 14px 16px;

    color: #737b87;

    font-size: 10px;
}


/* ================================
   INFO
================================ */

.modal-info {
    display: flex;
    align-items: center;
    gap: 9px;

    margin: 0 28px 18px;

    padding: 10px 12px;

    border: 1px solid #cfe0ff;
    border-radius: 8px;

    background: #f3f7ff;

    color: #174ea6;
}

.modal-info span {
    flex: 0 0 auto;

    font-size: 14px;
}

.modal-info p {
    margin: 0;

    font-size: 11px;
}


/* ================================
   FOOTER
================================ */

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;

    padding: 16px 28px;

    border-top: 1px solid #edf0f3;

    background: #fff;
}

.button {
    min-width: 120px;
    height: 42px;

    padding: 0 18px;

    border-radius: 8px;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
}

.button.secondary {
    border: 1px solid var(--border);

    background: #fff;

    color: var(--text);
}

.button.primary {
    border: 1px solid var(--primary);

    background: var(--primary);

    color: white;
}


/* ================================
   MOBILE
================================ */

@media (max-width: 700px) {

    .modal-backdrop {
        padding: 0;
    }

    .service-modal {
        width: 100%;
        height: 100%;
        max-height: none;

        border-radius: 0;
    }

    .modal-header {
        padding: 20px 18px 16px;
    }

    .modal-header h1 {
        font-size: 19px;
    }

    .modal-header p {
        font-size: 12px;
    }

    .discount-alert {
        margin: 0 18px;

        align-items: flex-start;

        padding: 11px;
    }

    .discount-alert-action {
        display: none;
    }

    .packages-row {
        justify-content: space-between;

        padding: 15px 18px 12px;
    }

    .packages-row input {
        width: 105px;
    }


    /*
       En móvil los servicios pasan
       a funcionar como acordeones.
    */

    .services-grid {
        display: flex;
        flex-direction: column;

        gap: 8px;

        padding: 0 18px 16px;

        overflow-y: auto;
    }

    .service-card {
        flex: 0 0 auto;
    }

    .service-head {
        padding: 13px;
    }

    .service-icon {
        width: 31px;
        height: 31px;

        font-size: 18px;
    }

    .service-body,
    .service-footer {
        display: none;
    }

    .service-card.selected .service-body,
    .service-card.selected .service-footer {
        display: block;
    }

    .service-card.selected .service-head {
        padding-bottom: 10px;
    }

    .service-body {
        padding: 0 13px;
    }

    .service-footer {
        padding: 11px 13px;
    }

    .modal-info {
        margin: 0 18px 12px;
    }

    .modal-footer {
        padding: 12px 18px;

        margin-top: auto;
    }

    .button {
        flex: 1;
    }
}


/* ================================
   VERY SMALL SCREENS
================================ */

@media (max-width: 380px) {

    .discount-alert-content span {
        font-size: 11px;
    }

    .service-name-row h2 {
        font-size: 14px;
    }

    .type-row {
        gap: 6px;
    }

    .price-current {
        font-size: 12px;
    }
}


</style>


<script>
document.querySelectorAll('.service-card').forEach(card => {

    const head = card.querySelector('.service-head');

    head.addEventListener('click', () => {

        document.querySelectorAll('.service-card')
            .forEach(item => {
                item.classList.remove('selected');
            });

        card.classList.add('selected');
    });

});


</script>