/* Google Reviews - Systems & Services
   Sin colores ni fuentes propias: todo sale de los tokens del kit de Elementor,
   con valores de reserva por si el plugin se usa fuera de este sitio. */

/* El shortcode escribe --ss-gr-cols-base inline. La variable que se usa de
   verdad se deriva aqui, para que las media queries de abajo puedan cambiarla:
   un custom property inline no hay hoja de estilos que lo pise. El control
   responsive del widget de Elementor si gana, porque su selector pesa mas. */
.ss-gr {
  --ss-gr-cols: var(--ss-gr-cols-base, 3);
  --ss-gr-line: var(--e-global-color-paperline, rgba(0, 0, 0, 0.16));
  --ss-gr-muted: var(--e-global-color-text, #5e6666);
  --ss-gr-star: var(--e-global-color-accent, #5f6e72);
  --ss-gr-gap: 40px;
}

/* ---------- resumen ---------- */

.ss-gr__summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 44px;
}

.ss-gr__score {
  font-family: var(--e-global-typography-secondary-font-family, Georgia), serif;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.02em;
}

.ss-gr__count,
.ss-gr__link,
.ss-gr__when {
  font-family: var(--e-global-typography-micro-font-family, sans-serif), sans-serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ss-gr-muted);
}

.ss-gr__link {
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* ---------- rejilla ---------- */

.ss-gr__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ss-gr-gap);
  grid-template-columns: repeat(var(--ss-gr-cols), minmax(0, 1fr));
}

.ss-gr--list .ss-gr__list {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ss-gr-gap);
}

.ss-gr--list .ss-gr__item {
  border-top: 1px solid var(--ss-gr-line);
  padding-top: 28px;
}

.ss-gr__item {
  position: relative;
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Con el autor anclado abajo las firmas quedan a la misma altura aunque las
   resenas midan muy distinto. Es lo que hace que una rejilla de resenas reales
   no parezca descuadrada. */
.ss-gr--pinned .ss-gr__author {
  margin-top: auto;
  padding-top: 20px;
}

.ss-gr__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------- estrellas ---------- */

.ss-gr__stars {
  display: inline-flex;
  gap: 3px;
  font-size: 12px;
  line-height: 1;
  margin-bottom: 18px;
  color: var(--ss-gr-line);
}

.ss-gr__star.is-on {
  color: var(--ss-gr-star);
}

/* ---------- texto ---------- */

/* Color por defecto explicito: heredar es una trampa. En este sitio el Theme
   Style pone el texto en blanco (fondo oscuro por defecto), asi que sobre una
   banda clara la resena saldria invisible. El control "Color del texto" del
   widget tiene mas especificidad y pisa esto cuando va sobre fondo oscuro. */
.ss-gr__text {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  quotes: none;
  flex: 0 1 auto;
  font-family: var(--e-global-typography-small-font-family, sans-serif), sans-serif;
  font-size: 13px;
  line-height: 1.7;
  color: var(--e-global-color-text, #5e6666);
}

.ss-gr__text p {
  margin: 0 0 12px;
}

.ss-gr__text p:last-child {
  margin-bottom: 0;
}

/* ---------- autor ---------- */

.ss-gr__author {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ss-gr--center .ss-gr__author,
.ss-gr[style*="center"] .ss-gr__author {
  justify-content: center;
}

.ss-gr__avatar {
  border-radius: 50%;
  display: block;
}

.ss-gr__name {
  color: var(--e-global-color-paperink, #182121);
  font-family: var(--e-global-typography-micro-font-family, sans-serif), sans-serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.ss-gr__name a {
  color: inherit;
  text-decoration: none;
}

/* ---------- atribucion (obligatoria por los terminos de Google) ---------- */

.ss-gr__attribution {
  margin: 36px 0 0;
  font-family: var(--e-global-typography-micro-font-family, sans-serif), sans-serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ss-gr-muted);
}

.ss-gr-empty {
  padding: 14px 18px;
  border: 1px dashed var(--ss-gr-line);
  font-size: 13px;
}

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
  .ss-gr__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ss-gr--carousel {
    --ss-gr-cols: 2;
  }
}

@media (max-width: 767px) {
  .ss-gr__list {
    grid-template-columns: minmax(0, 1fr);
  }
  .ss-gr__summary {
    margin-bottom: 32px;
  }
}

/* ============================================================
   CARRUSEL
   Movimiento con scroll nativo + scroll-snap: sin JS sigue
   siendo deslizable con el dedo. El JS solo anade flechas,
   puntos y autoplay.
   ============================================================ */

.ss-gr--carousel .ss-gr__list {
  display: flex;
  grid-template-columns: none;
  gap: var(--ss-gr-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

.ss-gr--carousel .ss-gr__list::-webkit-scrollbar {
  display: none;
}

.ss-gr--carousel .ss-gr__list:focus-visible {
  outline: 1px solid var(--ss-gr-star);
  outline-offset: 8px;
}

.ss-gr--carousel .ss-gr__item {
  flex: 0 0 calc((100% - (var(--ss-gr-cols) - 1) * var(--ss-gr-gap)) / var(--ss-gr-cols));
  scroll-snap-align: start;
}

/* ---------- controles ---------- */

.ss-gr__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--ss-gr-line);
}

.ss-gr__dots {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Sin flechas no hay nada que empujar al otro lado: los puntos se centran y
   se quita la linea, que solo tenia sentido separando dos grupos. */
.ss-gr__controls--center {
  justify-content: center;
  border-top: 0;
  padding-top: 0;
}

.ss-gr .ss-gr__dot {
  -webkit-appearance: none;
  appearance: none;
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ss-gr-line);
  cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}

.ss-gr .ss-gr__dot.is-on {
  background: var(--ss-gr-star);
  transform: scale(1.45);
}

.ss-gr__arrows {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.ss-gr .ss-gr__nav {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--ss-gr-line);
  background: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s, opacity 0.25s;
}

.ss-gr .ss-gr__nav:hover:not(:disabled) {
  border-color: currentColor;
}

.ss-gr .ss-gr__nav:disabled {
  opacity: 0.3;
  cursor: default;
}

.ss-gr .ss-gr__dot:focus-visible,
.ss-gr .ss-gr__nav:focus-visible {
  outline: 1px solid var(--ss-gr-star);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .ss-gr--carousel {
    --ss-gr-cols: 1;
  }
  .ss-gr__controls {
    margin-top: 30px;
  }
  .ss-gr .ss-gr__nav {
    width: 42px;
    height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-gr--carousel .ss-gr__list {
    scroll-behavior: auto;
  }
  .ss-gr .ss-gr__dot,
  .ss-gr .ss-gr__nav {
    transition: none;
  }
}


/* ============================================================
   TARJETA: adornos opcionales
   ============================================================ */

/* Comilla de apertura, en la serif de display del sitio. */
.ss-gr__quote {
  display: block;
  font-family: var(--e-global-typography-secondary-font-family, Georgia), serif;
  font-size: 56px;
  line-height: 0.6;
  height: 34px;
  color: var(--ss-gr-line);
  user-select: none;
}

/* Recorte a N lineas. Se puede apagar: si el cliente quiere la resena entera,
   mejor entera que cortada a la mitad. */
.ss-gr--clamped .ss-gr__text {
  display: -webkit-box;
  -webkit-line-clamp: var(--ss-gr-clamp, 6);
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ss-gr--clamped .ss-gr__text p:not(:first-child) {
  display: none;
}

/* Avatar: foto de Google, URL propia, o iniciales. */
.ss-gr__avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: block;
  object-fit: cover;
}

.ss-gr__avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ss-gr-line);
  background: none;
  font-family: var(--e-global-typography-micro-font-family, sans-serif), sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1;
  color: inherit;
}

.ss-gr__row--date .ss-gr__when {
  display: inline-block;
}

/* La tarjeta con caja necesita que el hover no salte. */
.ss-gr__item {
  transition: background-color 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}

@media (prefers-reduced-motion: reduce) {
  .ss-gr__item {
    transition: none;
  }
}