/* ============================================================
   SP Google Reviews Slider — Frontend CSS
   Paleta Skinperfect: #4f6c35 / #b5c268 / #ffe27c / #c9b6a1
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

/* ── VARIABLES ── */
:root {
    --sp-green:       #4f6c35;
    --sp-green-lt:    #b5c268;
    --sp-yellow:      #ffe27c;
    --sp-beige:       #c9b6a1;
    --sp-bg:          #f8f3ed;
    --sp-bg-card:     #ffffff;
    --sp-bg-pale:     #eaf0da;
    --sp-ink:         #1e2a15;
    --sp-ink-m:       #4a5c38;
    --sp-ink-l:       #8a9a7a;
    --sp-brd:         #d8cfc0;
    --sp-font-d:      'Cormorant Garamond', Georgia, serif;
    --sp-font-b:      'DM Sans', 'Helvetica Neue', sans-serif;
    --sp-radius:      6px;
    --sp-shadow:      0 3px 16px rgba(30,42,21,.07);
    --sp-shadow-hov:  0 10px 34px rgba(30,42,21,.12);
}

/* ── WRAPPER ── */
.sp-reviews-wrap {
    background: var(--sp-bg);
    padding: 80px 52px 88px;
    width: 100%;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

.sp-reviews-wrap::before,
.sp-reviews-wrap::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.sp-reviews-wrap::before {
    width: 300px; height: 300px;
    top: -80px; right: -80px;
    border: 1px solid rgba(79,108,53,.06);
}
.sp-reviews-wrap::after {
    width: 200px; height: 200px;
    bottom: -50px; left: -50px;
    border: 1px solid rgba(79,108,53,.05);
}

/* ── HEADER ── */
.sp-reviews-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    max-width: 960px;
    margin: 0 auto 48px;
    flex-wrap: wrap;
    gap: 20px;
}

.sp-eyebrow {
    font-family: var(--sp-font-b);
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--sp-green);
    opacity: .7;
    margin: 0 0 10px;
}

.sp-section-title {
    font-family: var(--sp-font-d);
    font-size: 38px;
    font-weight: 600;
    color: var(--sp-ink);
    line-height: 1.2;
    margin: 0 0 14px;
}

.sp-green-rule {
    width: 42px;
    height: 2.5px;
    background: var(--sp-green);
    border-radius: 2px;
}

/* ── SCORE GLOBAL ── */
.sp-global-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-brd);
    border-radius: var(--sp-radius);
    padding: 18px 30px;
    box-shadow: var(--sp-shadow);
    min-width: 148px;
}

.sp-score-num {
    font-family: var(--sp-font-d);
    font-size: 48px;
    font-weight: 700;
    color: var(--sp-green);
    line-height: 1;
}

.sp-score-stars .sp-star-full  { color: var(--sp-yellow); filter: drop-shadow(0 1px 2px rgba(0,0,0,.12)); }
.sp-score-stars .sp-star-empty { color: var(--sp-brd); }
.sp-score-stars .sp-star { font-size: 18px; letter-spacing: 2px; }

.sp-score-label {
    font-family: var(--sp-font-b);
    font-size: 10px;
    color: var(--sp-ink-l);
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ── SLIDER ── */
.sp-slider-outer {
    max-width: 960px;
    margin: 0 auto;
    overflow: hidden;
}

.sp-slider-track {
    display: flex;
    gap: 20px;
    transition: transform .45s cubic-bezier(.25,.46,.45,.94);
    will-change: transform;
}

/* ── CARD ── */
.sp-review-card {
    background: var(--sp-bg-card);
    border: 1px solid var(--sp-brd);
    border-radius: var(--sp-radius);
    padding: 28px 26px 24px;
    min-width: 288px;
    max-width: 288px;
    flex-shrink: 0;
    box-shadow: var(--sp-shadow);
    position: relative;
    transition: transform .25s, box-shadow .25s;
    box-sizing: border-box;
}

.sp-review-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sp-shadow-hov);
}

/* Comillas decorativas */
.sp-review-card::before {
    content: '"';
    position: absolute;
    top: 8px; left: 16px;
    font-family: var(--sp-font-d);
    font-size: 80px;
    color: var(--sp-green);
    opacity: .06;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

/* Estrellas de la card */
.sp-card-stars {
    margin-bottom: 12px;
}
.sp-card-stars .sp-star-full  { color: var(--sp-yellow); filter: drop-shadow(0 1px 2px rgba(0,0,0,.1)); }
.sp-card-stars .sp-star-empty { color: var(--sp-brd); }
.sp-card-stars .sp-star { font-size: 14px; letter-spacing: 2px; }

/* Texto reseña */
.sp-card-text {
    font-family: var(--sp-font-d);
    font-size: 15px;
    font-style: italic;
    color: var(--sp-ink);
    line-height: 1.75;
    margin: 0 0 20px;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Footer de la card */
.sp-card-author {
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid #ede3d4;
    padding-top: 14px;
}

.sp-card-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--sp-bg-pale);
    border: 1.5px solid var(--sp-brd);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sp-font-d);
    font-size: 13px;
    font-weight: 700;
    color: var(--sp-green);
    flex-shrink: 0;
    overflow: hidden;
}

.sp-card-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.sp-card-name {
    font-family: var(--sp-font-b);
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-ink);
    display: block;
}

.sp-card-time {
    font-family: var(--sp-font-b);
    font-size: 10px;
    color: var(--sp-ink-l);
    display: block;
    margin-top: 1px;
}

.sp-card-google-badge {
    margin-left: auto;
    opacity: .3;
    flex-shrink: 0;
}

/* ── CONTROLES ── */
.sp-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 36px;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

.sp-btn-prev,
.sp-btn-next {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--sp-bg-card);
    border: 1.5px solid var(--sp-brd);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sp-ink-m);
    transition: all .22s;
    flex-shrink: 0;
}

.sp-btn-prev:hover,
.sp-btn-next:hover {
    background: var(--sp-green);
    border-color: var(--sp-green);
    color: #fff;
    box-shadow: 0 4px 16px rgba(79,108,53,.35);
}

.sp-btn-prev:disabled,
.sp-btn-next:disabled {
    opacity: .3;
    cursor: default;
    pointer-events: none;
}

/* Dots */
.sp-dots {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 200px;
}

.sp-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--sp-brd);
    border: none;
    cursor: pointer;
    transition: all .25s;
    padding: 0;
    flex-shrink: 0;
}

.sp-dot.active {
    background: var(--sp-green);
    width: 22px;
    border-radius: 4px;
}

/* ── CTA ── */
.sp-reviews-cta {
    text-align: center;
    margin-top: 28px;
}

.sp-reviews-cta a {
    font-family: var(--sp-font-b);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sp-green);
    text-decoration: none;
    border-bottom: 1px solid rgba(79,108,53,.3);
    padding-bottom: 2px;
    transition: border-color .2s;
}

.sp-reviews-cta a:hover {
    border-color: var(--sp-green);
}

/* ── ESTADO VACÍO ── */
.sp-reviews-empty {
    font-family: var(--sp-font-b);
    font-size: 13px;
    color: var(--sp-ink-l);
    text-align: center;
    padding: 40px;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */
@media (max-width: 960px) {
    .sp-review-card { min-width: 260px; max-width: 260px; }
}

@media (max-width: 768px) {
    .sp-reviews-wrap { padding: 60px 24px 72px; }
    .sp-section-title { font-size: 28px; }
    .sp-reviews-head { flex-direction: column; align-items: flex-start; }
    .sp-review-card {
        min-width: calc(100vw - 72px);
        max-width: calc(100vw - 72px);
    }
}

@media (max-width: 480px) {
    .sp-review-card {
        min-width: calc(100vw - 48px);
        max-width: calc(100vw - 48px);
    }
    .sp-reviews-wrap { padding: 48px 24px 60px; }
}