/* =================================== SECCIÓN DATOS PEDIDOS ========================================= */

    /* -------------------- CUERPO (FORMULARIO / CONTENIDO DERECHO) -------------------- */
    .sectionDatosPedidos .sectionDatosPedidos__body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 50%;
        padding: 0;
        background-color: #fff;
        transition: 0.3s ease;
        gap: 30px;
    }

        .sectionDatosPedidos .sectionDatosPedidos__body label {
            color: #555;
        }

        .sectionDatosPedidos .sectionDatosPedidos__body .sectionDatosPedidos__body__titulo {
            text-align: center;
        }

        /* -------------------- SELECTS / FORMULARIO INTERNO -------------------- */
        .sectionDatosPedidos .sectionDatosPedidos__body .sectionDatosPedidos__body__tipoDeCompra div select,
        .sectionDatosPedidos .sectionDatosPedidos__body .sectionDatosPedidos__body__yachaywasi div select {
            background-color: #f4f4f4;
            box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
            border: none;
            color: #000;
            padding: 2vh 20px;
            border-radius: 8px;
            width: 100%;
            max-width: 249px;
            outline: none;
            appearance: none;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="50"><polygon points="0,0 100,0 50,50" style="fill:%231B2C5E;" /></svg>');
            background-position: right 15px top 50%;
            background-repeat: no-repeat;
            background-size: 15px;
        }

        /* Contenedor principal Yachaywasi */
        .sectionDatosPedidos .sectionDatosPedidos__body .sectionDatosPedidos__body__yachaywasi {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

            /* Subdivisiones internas */
            .sectionDatosPedidos .sectionDatosPedidos__body .sectionDatosPedidos__body__yachaywasi .divSelects {
                display: flex;
                flex-wrap: wrap;
                gap: 30px;
            }

                .sectionDatosPedidos .sectionDatosPedidos__body .sectionDatosPedidos__body__yachaywasi .divSelects div {
                    flex-basis: 179px;
                    flex-grow: 1;
                }

                    .sectionDatosPedidos .sectionDatosPedidos__body .sectionDatosPedidos__body__yachaywasi .divSelects div select {
                        background-image: url('../../img/Arrowhead-Down-01.png');
                        background-position: right 15px top 50%;
                        background-repeat: no-repeat;
                        background-size: 15px;
                        color: var(--Medium-green);
                        margin-top: 5px;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }

            /* Etiquetas (labels) */
            .sectionDatosPedidos .sectionDatosPedidos__body .sectionDatosPedidos__body__yachaywasi .divLabels {
                padding: 10px 0;
                border-radius: 10px;
                display: flex;
                flex-direction: column;
                gap: 15px;
            }

                .sectionDatosPedidos .sectionDatosPedidos__body .sectionDatosPedidos__body__yachaywasi .divLabels label {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                }

                    .sectionDatosPedidos .sectionDatosPedidos__body .sectionDatosPedidos__body__yachaywasi .divLabels label span {
                        font-weight: 500;
                    }

        /* -------------------- BOTÓN CONTINUAR -------------------- */
        .sectionDatosPedidos .sectionDatosPedidos__body .sectionDatosPedidos__body__btnContinuar {
            display: flex;
            justify-content: center;
        }

            .sectionDatosPedidos .sectionDatosPedidos__body .sectionDatosPedidos__body__btnContinuar a {
                background-color: var(--Medium-green);
                color: #fff;
                padding: 16px 4vw;
                border: 1px solid var(--Medium-green);
                border-radius: 21px;
                font-size: 1em;
                line-height: 0.8;
                transition: 0.3s ease background-color, 0.3s ease border;
            }

                .sectionDatosPedidos .sectionDatosPedidos__body .sectionDatosPedidos__body__btnContinuar a:hover {
                    background-color: var(--Primary-green);
                    border-color: var(--Primary-green);
                }

                .sectionDatosPedidos .sectionDatosPedidos__body .sectionDatosPedidos__body__btnContinuar a:focus {
                    background-color: var(--Intense-green);
                    border-color: var(--Intense-green);
                    outline: none;
                }

/* -------------------- ANIMACIONES -------------------- */
#selectYachayWasi.pulsando,
#btnContinuar.pulsando {
    animation: pulsar 1.5s infinite ease-in-out;
}

@keyframes pulsar {
    0% {
        box-shadow: 0 0 10px rgba(95, 175, 107, 0.6);
    }

    50% {
        box-shadow: 0 0 15px rgba(29, 124, 43, 1);
    }

    100% {
        box-shadow: 0 0 10px rgba(95, 175, 107, 0.6);
    }
}

/* =================================== MEDIA QUERIES ========================================= */

/* 1336px */
@media (max-width: 1336px) {
    .sectionDatosPedidos .sectionDatosPedidos__title {
        background-image: url(../../img/Vivir-bien-768X880.jpg);
        width: 80%;
    }

    .sectionDatosPedidos .sectionDatosPedidos__body {
        padding: 0 8vw;
    }
}

/* 1026px */
@media (max-width: 1026px) {
    .sectionDatosPedidos .sectionDatosPedidos__body,
    .sectionDatosPedidos .sectionDatosPedidos__body .sectionDatosPedidos__body__yachaywasi,
    .sectionDatosPedidos .sectionDatosPedidos__body .sectionDatosPedidos__body__yachaywasi .divSelects {
        gap: 20px;
    }

        .sectionDatosPedidos .sectionDatosPedidos__body select {
            padding: 1vh 20px;
        }
}

/* 910px */
@media (max-width: 910px) {
    .sectionDatosPedidos .sectionDatosPedidos__title {
        background-image: url(../../img/Vivir-bien-543x880.jpg);
    }

        .sectionDatosPedidos .sectionDatosPedidos__title h1 {
            position: absolute;
            top: 10%;
            padding: 0 50px;
        }

    .sectionDatosPedidos .sectionDatosPedidos__body {
        padding: 0 4vw;
    }
}

/* 820px */
@media (max-width: 820px) {
    .sectionDatosPedidos .sectionDatosPedidos__title {
        width: 70%;
    }
}

/* 768px */
@media (max-width: 768px) {
    .sectionDatosPedidos .sectionDatosPedidos__body {
        font-size: 12px;
        gap: 10px;
    }

        .sectionDatosPedidos .sectionDatosPedidos__body select {
            max-width: 100%;
        }

        .sectionDatosPedidos .sectionDatosPedidos__body .sectionDatosPedidos__body__yachaywasi .divLabels {
            gap: 10px;
        }

            .sectionDatosPedidos .sectionDatosPedidos__body .sectionDatosPedidos__body__yachaywasi .divLabels label {
                flex-direction: column;
                gap: 0;
            }

    .sectionDatosPedidos .sectionDatosPedidos__title {
        width: 60%;
    }
}

/* 540px */
@media (max-width: 540px) {
    .sectionDatosPedidos .sectionDatosPedidos__title {
        width: 50%;
    }
}

/* 500px */
@media (max-width: 500px) {
    .sectionDatosPedidos {
        margin-top: 0;
        min-height: calc(100vh - 95px);
        flex-direction: column;
    }

        .sectionDatosPedidos .sectionDatosPedidos__title {
            display: none;
        }

        .sectionDatosPedidos .sectionDatosPedidos__body {
            font-size: 10px;
            width: 100%;
            padding: 0;
            gap: 15px;
            background-color: #fff;
        }

            .sectionDatosPedidos .sectionDatosPedidos__body .sectionDatosPedidos__body__titulo h1 {
                font-size: 16px;
                color: var(--Dark-grises);
                font-weight: 500;
                margin: 0;
            }

            .sectionDatosPedidos .sectionDatosPedidos__body .sectionDatosPedidos__body__yachaywasi .divLabels {
                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
                background-color: #F9F9F9;
                padding: 2vh 10px;
                margin-bottom: 20px;
                gap: 5px;
            }

                .sectionDatosPedidos .sectionDatosPedidos__body .sectionDatosPedidos__body__yachaywasi .divLabels label {
                    flex-direction: row;
                    gap: 10px;
                }

            .sectionDatosPedidos .sectionDatosPedidos__body .sectionDatosPedidos__body__btnContinuar a {
                border-radius: 15px;
            }
}

/* Altura baja */
@media (max-height: 568px) {
    .sectionDatosPedidos .sectionDatosPedidos__body,
    .sectionDatosPedidos .sectionDatosPedidos__body .sectionDatosPedidos__body__yachaywasi,
    .sectionDatosPedidos .sectionDatosPedidos__body .sectionDatosPedidos__body__yachaywasi .divSelects {
        gap: 10px;
    }
}
