/* ZE Google Reviews — v1.0 (misma línea que ze-guides: verde ZE, Playfair + DM Sans) */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600&family=DM+Sans:wght@300;400;500;600&display=swap');

.ze-gr-wrap {
    --ze-primary:  #4A7F57;
    --ze-star:     #E8A317;
    --ze-text:     #1a1f14;
    --ze-muted:    #6b7a62;
    --ze-line:     #dde5d5;
    --ze-bg:       #f7f9f4;
    --ze-white:    #ffffff;
    --ze-radius:   12px;
    --ze-shadow:   0 2px 16px rgba(45,80,22,.08);
    --ze-cols: 3; --ze-cols-t: 2; --ze-cols-m: 1;
    --ze-gap: 24px; --ze-gap-t: 24px; --ze-gap-m: 16px;
    font-family: 'DM Sans', system-ui, sans-serif;
    color: var(--ze-text);
    box-sizing: border-box;
}
.ze-gr-wrap *, .ze-gr-wrap *::before, .ze-gr-wrap *::after { box-sizing: inherit; }

/* Estrellas (relleno parcial por --ze-fill) */
.ze-gr-stars {
    --ze-fill: 100%;
    display: inline-block;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 2px;
    background: linear-gradient(90deg, var(--ze-star) var(--ze-fill), var(--ze-line) var(--ze-fill));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.ze-gr-stars::before { content: '★★★★★'; }

/* Cabecera */
.ze-gr-head {
    display: flex; align-items: center; flex-wrap: wrap; gap: 16px;
    margin-bottom: 24px;
}
.ze-gr-score {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 48px; font-weight: 600; line-height: 1;
    color: var(--ze-primary);
}
.ze-gr-head-meta { display: flex; flex-direction: column; gap: 4px; }
.ze-gr-count { font-size: 14px; color: var(--ze-muted); }
.ze-gr-cta {
    margin-left: auto;
    padding: 10px 20px;
    border: 1.5px solid var(--ze-primary);
    border-radius: 999px;
    color: var(--ze-primary);
    font-size: 14px; font-weight: 600; text-decoration: none;
    transition: background .2s, color .2s;
}
.ze-gr-cta:hover { background: var(--ze-primary); color: #fff; }

/* Track: cuadrícula por defecto */
.ze-gr-slider { position: relative; }
.ze-gr-track {
    display: grid;
    grid-template-columns: repeat(var(--ze-cols), minmax(0, 1fr));
    gap: var(--ze-gap);
    align-items: stretch;
}

/* Carrusel: scroll-snap nativo */
.is-carousel .ze-gr-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 4px 2px 16px;
}
.is-carousel .ze-gr-track::-webkit-scrollbar { display: none; }
.is-carousel .ze-gr-card {
    flex: 0 0 calc((100% - var(--ze-gap) * (var(--ze-cols) - 1)) / var(--ze-cols));
    scroll-snap-align: start;
}

/* Card */
.ze-gr-card {
    display: flex; flex-direction: column; gap: 12px;
    padding: 24px;
    background: var(--ze-white);
    border-radius: var(--ze-radius);
    box-shadow: var(--ze-shadow);
}
.ze-gr-author { display: flex; align-items: center; gap: 12px; }
.ze-gr-author img, .ze-gr-initial {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
}
.ze-gr-initial {
    display: grid; place-items: center;
    background: var(--ze-primary); color: #fff; font-weight: 600;
}
.ze-gr-author strong { display: block; font-size: 15px; font-weight: 600; }
.ze-gr-author small  { display: block; font-size: 12px; color: var(--ze-muted); }
.ze-gr-text { margin: 0; font-size: 15px; line-height: 1.6; font-weight: 300; }

.ze-gr-attrib { margin: 12px 0 0; font-size: 12px; color: var(--ze-muted); text-align: right; }
.ze-gr-error  { padding: 12px; background: #fcf0f0; color: #b32d2e; border-radius: 8px; font-size: 14px; }

/* Flechas */
.ze-gr-nav {
    position: absolute; top: calc(50% - 16px); transform: translateY(-50%);
    z-index: 2;
    width: 40px; height: 40px; padding: 0;
    border: 0; border-radius: 50%;
    background: var(--ze-white); color: var(--ze-primary);
    font-size: 24px; line-height: 1; cursor: pointer;
    box-shadow: var(--ze-shadow);
    transition: background .2s, color .2s, opacity .2s;
}
.ze-gr-nav:hover { background: var(--ze-primary); color: #fff; }
.ze-gr-nav.is-prev { left: -12px; }
.ze-gr-nav.is-next { right: -12px; }
.ze-gr-nav[disabled] { opacity: 0; pointer-events: none; }

@media (max-width: 1024px) {
    .ze-gr-track { grid-template-columns: repeat(var(--ze-cols-t), minmax(0, 1fr)); gap: var(--ze-gap-t); }
    .is-carousel .ze-gr-track { gap: var(--ze-gap-t); }
    .is-carousel .ze-gr-card { flex-basis: calc((100% - var(--ze-gap-t) * (var(--ze-cols-t) - 1)) / var(--ze-cols-t)); }
}
@media (max-width: 767px) {
    .ze-gr-track { grid-template-columns: repeat(var(--ze-cols-m), minmax(0, 1fr)); gap: var(--ze-gap-m); }
    .is-carousel .ze-gr-track { gap: var(--ze-gap-m); }
    .is-carousel .ze-gr-card { flex-basis: calc((100% - var(--ze-gap-m) * (var(--ze-cols-m) - 1)) / var(--ze-cols-m)); }
    .ze-gr-cta { margin-left: 0; }
    .ze-gr-nav.is-prev { left: 4px; }
    .ze-gr-nav.is-next { right: 4px; }
}