/* ===================================================
   FORMULARIO
=================================================== */

.khr-container{

    max-width:700px;

    margin:80px auto;

    padding:45px;

    background:#fff;

    border-radius:20px;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

}

.khr-header{

    text-align:center;

    margin-bottom:35px;

}

.khr-header h2{

    margin-bottom:10px;

}

.khr-header p{

    color:#777;

}

.khr-field{

    margin-bottom:22px;

}

.khr-field label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

}

.khr-field input,
.khr-field textarea,
.khr-field select{

    width:100%;

    padding:15px;

    border:1px solid #ddd;

    border-radius:12px;

    box-sizing:border-box;

    font-size:15px;

}

.khr-field input:focus,
.khr-field textarea:focus,
.khr-field select:focus{

    outline:none;

    border-color:#8b6b46;

}

.khr-btn{

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    width:auto !important;

    padding:16px 36px !important;

    background:#fff !important;

    color:#111 !important;

    border:2px solid #111 !important;

    border-radius:999px !important;

    cursor:pointer !important;

    transition:.25s !important;

    font-size:14px !important;

    font-weight:700 !important;

    letter-spacing:.18em !important;

    text-transform:uppercase !important;

    box-shadow:none !important;

}

.khr-btn:hover{

    background:#111 !important;

    color:#fff !important;

    border-color:#111 !important;

}

/* estrellas */

.khr-rating{

    display:flex;

    flex-direction:row-reverse;

    justify-content:center;

    margin-bottom:30px;

}

.khr-rating input{

    display:none !important;

}

.khr-rating label{

    font-size:42px;

    color:#d8d8d8;

    cursor:pointer;

    transition:.2s;

}

.khr-rating label:hover,
.khr-rating label:hover~label{

    color:#d4a017;

}

.khr-rating input:checked~label{

    color:#d4a017;

}

/* ===================================================
   TESTIMONIOS
=================================================== */

.khr-testimonials{

    background:#f8f5f1;

    padding:80px 40px;

    border-radius:25px;

}

.khr-testimonials-header{

    text-align:center;

    max-width:700px;

    margin:0 auto 55px;

}

.khr-big-stars{

    font-size:30px;

    color:#c99827;

    letter-spacing:4px;

}

.khr-testimonials-header h2{

    margin:18px 0 10px;

    font-size:34px;

}

.khr-testimonials-header p{

    color:#8b6b46;

    font-weight:600;

    margin-bottom:12px;

}

.khr-testimonials-header span{

    color:#777;

}

.khr-reviews-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(360px,1fr));

    gap:30px;

}

.khr-review-card{

    background:#fffdf9;

    border:1px solid #eadfce;

    border-radius:20px;

    overflow:hidden;

    transition:.25s;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.khr-review-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 50px rgba(0,0,0,.10);

}

.khr-card-top{

    height:6px;

    background:#8b6b46;

}

.khr-stars{

    color:#c99827;

    font-size:22px;

    padding:28px 28px 10px;

}

.khr-review-text{

    padding:0 28px;

    font-size:17px;

    font-style:italic;

    line-height:1.8;

    color:#555;

    min-height:120px;

}

.khr-review-footer{

    margin-top:30px;

    border-top:1px solid #ece5da;

    padding:22px 28px;

    display:flex;

    align-items:center;

    gap:15px;

}

.khr-avatar{

    width:52px;

    height:52px;

    border-radius:50%;

    background:linear-gradient(135deg,#a37d55,#6e5131);

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    font-weight:700;

}

.khr-author-name{

    font-weight:700;

    color:#222;

}

.khr-review-city{

    color:#777;

    font-size:14px;

    margin-top:3px;

}

.khr-review-product{

    margin-top:6px;

    color:#8b6b46;

    font-size:14px;

    font-weight:600;

}

@media(max-width:768px){

    .khr-testimonials{

        padding:50px 20px;

    }

    .khr-reviews-grid{

        grid-template-columns:1fr;

    }

}

.khr-verified{

    display:inline-flex;

    align-items:center;

    gap:6px;

    margin-top:8px;

    padding:5px 10px;

    background:#eef8f1;

    color:#2f7d32;

    border-radius:999px;

    font-size:13px;

    font-weight:600;

}

.khr-featured{

display:inline-block;

margin:18px 24px 5px;

padding:7px 14px;

background:#fff6df;

color:#b37a00;

border:1px solid #f0d37b;

border-radius:999px;

font-size:13px;

font-weight:700;

}

.khr-error-message{

    display:none;

    margin:15px auto 25px;

    padding:12px 16px;

    max-width:420px;

    background:#fff2f2;

    border:1px solid #f5b5b5;

    border-radius:10px;

    color:#c62828;

    font-size:15px;

    font-weight:600;

    text-align:center;

}

.khr-spinner{
    width:16px;
    height:16px;
    display:inline-block;
    margin-right:8px;
    border:2px solid rgba(255,255,255,.35);
    border-top-color:#fff;
    border-radius:50%;
    vertical-align:middle;
    animation:khr-spin .8s linear infinite;
}

@keyframes khr-spin{

    to{

        transform:rotate(360deg);

    }

}

.khr-field-error{

    border-color:#dc3545 !important;

    box-shadow:0 0 0 3px rgba(220,53,69,.15);

}

.khr-success{

    background:#eaf8ec;
    border:1px solid #b7e4c7;
    color:#1f6d35;

    padding:18px;

    border-radius:10px;

    margin-bottom:20px;

    text-align:center;

    font-size:15px;

}

#khr-preview{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:15px;

}

.khr-preview-image{

    width:120px;

    height:120px;

    object-fit:cover;

    border-radius:10px;

    border:1px solid #ddd;

    box-shadow:0 2px 8px rgba(0,0,0,.08);

    transition:.2s;

}

.khr-preview-image:hover{

    transform:scale(1.05);

}

.khr-submit{

    display:flex;

    justify-content:center;

    margin-top:30px;

}

#khr-upload-progress{
    display:none;
    margin-top:20px;
}

.khr-progress-bar{
    width:100%;
    height:8px;
    background:#ececec;
    border-radius:999px;
    overflow:hidden;
}

.khr-progress-fill{
    width:0%;
    height:100%;
    background:#8b6b46;
    transition:width .15s linear;
}

.khr-progress-text{
    text-align:center;
    margin-top:8px;
    font-size:14px;
    color:#666;
}