/* Opiniones de Google */

/* La «G» va en sus cuatro colores: las condiciones de marca de Google prohíben
   recolorearla. Convive con la paleta del taller por tamaño y por aire, no por color. */
.mp-gr__g{ flex:0 0 auto; display:block }

.mp-gr__eti{ display:inline-flex; align-items:center; gap:.45rem }
/* la etiqueta va en versalitas y el logo no: se baja un pelo para que asienten igual */
.mp-gr__eti .mp-gr__g{ transform:translateY(-1px) }

.mp-gr__fila{ display:flex; align-items:center; justify-content:space-between; gap:.75rem }
.mp-gr__fila .mp-gr__g{ opacity:.85 }

.mp-gr__resumen{ text-align:right }
.mp-gr__resumen p{ margin:.3rem 0 0 }
.mp-gr__resumen a{ color:var(--mp-vino); text-decoration:underline; text-underline-offset:3px }

.mp-gr__estrellas{ display:inline-flex; gap:2px; line-height:0 }
.mp-gr__estrella{ fill:var(--mp-hilo) }
.mp-gr__estrella.is-llena{ fill:var(--mp-vino) }

.mp-gr__lista{
  list-style:none; margin:0; padding:0;
  /* 22rem y no 17: con tarjetas angostas caben cuatro y las seis opiniones dejan
     dos huecos en la segunda fila. A 22rem entran tres, que son dos filas justas
     y una medida de línea que se lee, no un boletín de frases apretadas. */
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap:var(--mp-e3);
}

.mp-gr__op{
  background:var(--mp-papel); border:1px solid var(--mp-hilo);
  padding:1.5rem 1.4rem; display:flex; flex-direction:column; gap:.9rem;
}

/* la cita en serif y sin comillas dibujadas: el bloque ya se lee como una cita */
.mp-gr__texto{
  margin:0; font-family:var(--mp-serif); font-size:1rem; line-height:1.55;
  color:var(--mp-tinta);
}

/* el autor va pegado a su texto, no empujado al fondo: con `margin:auto` quedaba a
   distinta altura en cada tarjeta según tuviera respuesta o no. Lo que se ancla abajo
   es la respuesta, que funciona como pie. */
.mp-gr__quien{
  margin:0; display:flex; align-items:center; gap:.65rem;
  font-size:.8125rem; color:var(--mp-tinta-2);
}
/* la inicial en un círculo: no hay foto de la clienta y un hueco gris se ve peor */
.mp-gr__inicial{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--mp-lino); color:var(--mp-tinta); font-weight:500;
}
.mp-gr__fecha{ display:block; color:var(--mp-tinta-3); font-size:.75rem }

.mp-gr__respuesta{
  margin:auto 0 0; padding-top:.9rem; border-top:1px solid var(--mp-hilo);
  font-size:.8125rem; color:var(--mp-tinta-2);
}
.mp-gr__respuesta .mp-etq{ display:block; margin-bottom:.25rem; color:var(--mp-tinta-3) }

@media (max-width:640px){
  .mp-gr__resumen{ text-align:left; margin-top:.8rem }
  .mp-gr__op{ padding:1.25rem 1.15rem }
}