/* Resenas de Google en el footer
   Todo va prefijado con .grf- y hereda la tipografia del tema.
   Para cambiar el aspecto, toca solo las variables de abajo. */

.grf-block {
  --grf-star: #f5a623;
  --grf-star-off: rgba(128, 128, 128, .35);
  --grf-border: rgba(128, 128, 128, .22);
  --grf-muted: .7;
  --grf-radius: 6px;
  --grf-gap: 20px;
  /* Aire por encima del bloque cuando va el primero del footer */
  --grf-pad-top: 48px;

  padding: 28px 0;
  border-top: 1px solid var(--grf-border);
  font-size: .9rem;
  line-height: 1.5;
}

/* Cabecera --------------------------------------------------------------- */

.grf-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin-bottom: 18px;
}

.grf-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.grf-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.grf-score {
  font-weight: 700;
  font-size: 1.05rem;
}

.grf-count {
  opacity: var(--grf-muted);
  font-size: .82rem;
}

/* Estrellas -------------------------------------------------------------- */

.grf-star {
  color: var(--grf-star-off);
  letter-spacing: .5px;
}

.grf-star.is-on {
  color: var(--grf-star);
}

/* Lista de resenas ------------------------------------------------------- */

.grf-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--grf-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.grf-item {
  border: 1px solid var(--grf-border);
  border-radius: var(--grf-radius);
  padding: 16px;
}

.grf-item-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.grf-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.grf-author {
  display: block;
  font-weight: 600;
}

.grf-when {
  display: block;
  font-size: .78rem;
  opacity: var(--grf-muted);
}

.grf-item-stars {
  margin: 0 0 8px;
}

.grf-text {
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  font-style: normal;
  /* Recorta a 5 lineas para que todas las tarjetas queden a la misma altura */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.grf-link,
.grf-foot a {
  font-size: .82rem;
  text-decoration: underline;
}

.grf-foot {
  margin: 16px 0 0;
}

/* Accesibilidad y movil -------------------------------------------------- */

.grf-link:focus-visible,
.grf-foot a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

@media (max-width: 575px) {
  .grf-block {
    padding: 20px 0;
  }

  .grf-list {
    grid-template-columns: 1fr;
  }
}

/* Modo widget externo ---------------------------------------------------- */

.grf-embed .grf-embed-slot {
  /* Reserva alto mientras el widget carga, para no provocar salto de layout */
  min-height: 180px;
}

.grf-embed .grf-title {
  margin-bottom: 14px;
}

/* Colocacion en el tema tv_electronic_electron_1_7_v1 -------------------- */
/* El tema pinta el logo (displayFooterPart2) y las columnas de enlaces
   (displayFooterPart1) antes que displayFooter, asi que el bloque cae al
   final. Con esto sube al principio del contenedor del footer.
   Si cambias de tema, borra este bloque. */

.tvfooter-logo-link-wrapper {
  display: flex;
  flex-direction: column;
}

.tvfooter-logo-link-wrapper .grf-block {
  order: -1;
  border-top: 0;
  /* Al ir arriba del todo necesita mas aire por encima que por debajo.
     Ajusta --grf-pad-top arriba del archivo si quieres mas o menos. */
  padding-top: var(--grf-pad-top);
  padding-bottom: 28px;
  margin-bottom: 8px;
}

@media (max-width: 575px) {
  .tvfooter-logo-link-wrapper .grf-block {
    padding-top: calc(var(--grf-pad-top) * 0.6);
  }
}