/**
 * reviews.css — Ajustes del widget de Google Reviews embebido en la landing.
 *
 * Plugin: "widget-google-reviews" (RichPlugins), shortcode [grw id=101410],
 * dentro de <div class="shortcode shortcode-live-reviews"> en template.php.
 *
 * NOTAS
 *  - Todo va scopeado a .shortcode-live-reviews para no tocar nada mas.
 *  - El CSS del plugin declara casi todo con !important y con selectores tipo
 *    `.wp-gr .clase`, asi que aqui subimos especificidad (prefijo .wp-gr) y
 *    usamos !important para poder ganar.
 *  - El plugin maqueta con "flex por variables": .rpi-flx lee --dir, --align,
 *    --gap, etc. Cambiando esas variables se recoloca sin pelear cada propiedad.
 *
 * CONTENIDO
 *  1) Aislar el reset global de la landing (para que no rompa el widget).
 *  2) Cabecera (.grw-header-inner) reestilizada como nuestra .google-badge.
 */

/* ═══════════════ 1. AISLAR EL RESET GLOBAL ═══════════════
   El reset de la landing (*{}, img,svg{display:block;max-width:100%},
   a{color:inherit}) se cuela en el widget embebido y le descuadra estrellas,
   iconos y avatares. Dentro del widget devolvemos los valores por defecto. */
   
.shortcode-live-reviews{
  margin: 30px 20px;
}
   
.shortcode-live-reviews img,
.shortcode-live-reviews svg{display:revert;max-width:revert;vertical-align:revert}
.shortcode-live-reviews a{color:revert}

.shortcode-live-reviews > div{
  display: flex !important;
  flex-direction: column;
  gap: 25px;
}

/* ═══════════════ 2. CABECERA TIPO "GOOGLE-BADGE" ═══════════════
   Convierte SOLO el bloque de resumen (foto + nombre + nota + "reseñas" +
   powered by Google) en una pastilla blanca redondeada, al estilo de
   .google-badge del resto de la pagina. Estructura del plugin:
     .grw-header > .grw-header-inner.rpi-flx  (foto | columna de datos)

   IMPORTANTE: todo va scopeado bajo .grw-header para NO tocar las tarjetas de
   reseñas (.grw-review-inner), que usan las mismas clases (.wp-google-name,
   .rpi-stars, ...). Asi el layout (grid/lista) de las reseñas queda intacto. */

/* Centrar la pastilla dentro de su fila (grw-header es un bloque normal). */
.shortcode-live-reviews .wp-gr .grw-header{
  text-align:center!important;
}

/* La pastilla: fila horizontal, blanca, borde suave y bordes redondeados. */
.shortcode-live-reviews .wp-gr .grw-header-inner{
  --dir:row!important;          /* anula el --dir:column que trae inline */
  --gap:14px!important;         /* separacion foto <-> datos */
  --img-size:54px!important;    /* tamano del avatar del negocio */
  display:inline-flex!important;
  align-items:center!important;
  width:auto!important;         /* el plugin fuerza width:100% */
  max-width:100%!important;
  margin:0!important;           /* el plugin mete margin:4px */
  padding:10px 30px 10px 15px!important;  /* el plugin mete padding:16px */
  background:#fff!important;
  border:1px solid var(--border-cream)!important;
  border-radius:var(--r-full)!important;
  box-shadow:0 6px 20px rgba(42,32,38,.06)!important;
  text-align:left!important;
}

.shortcode-live-reviews .wp-gr .grw-review-inner{
    padding: 17px 28px !important;
}


/* Columna de datos a la derecha del avatar: pegada y compacta. */
.shortcode-live-reviews .wp-gr .grw-header-inner>.rpi-flx{
  display: block !important;
  --gap:1px!important;
  width:auto!important;
  overflow:visible!important;
}

/* Titulo "Calificaciones en Google" encima del nombre del negocio (lo inserta
   reviews.js). Icono = el mismo sprite #grw-google que ya trae el plugin. */
.shortcode-live-reviews .wp-gr .grw-header .vpro-rev-title{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  margin:0 0 4px!important;
  color:var(--ink-soft)!important;
  font-size:.72rem!important;
  font-weight:700!important;
  text-transform:uppercase!important;
  letter-spacing:.03em!important;
}
.shortcode-live-reviews .wp-gr .grw-header .vpro-rev-title svg{
  width:13px!important;height:13px!important;flex:none!important;
}

/* Nombre del negocio: nuestra tipografia de titulos, tono oscuro. */
.shortcode-live-reviews .wp-gr .grw-header .wp-google-name,
.shortcode-live-reviews .wp-gr.rpi .grw-header .wp-google-name a{
  --align: start!important;
  color:var(--ink)!important;
  font-family:var(--font-title)!important;
  font-size:1rem!important;
  font-weight:700!important;
}

/* Estrellas + nota "4.8" (SOLO la cabecera): estrellas en nuestro dorado,
   numero en tono oscuro. Si el relleno parcial de las estrellas se ve raro,
   quita la linea --rpi-star-color (el plugin volvera al amarillo Google). */
.shortcode-live-reviews .wp-gr .grw-header .rpi-stars{
  --rpi-star-color:var(--gold)!important;
  --rpi-star-size:15px!important;
  color:var(--ink)!important;
  font-weight:700!important;
}

/* "Basado en N reseñas": texto secundario pequeño. */
.shortcode-live-reviews .wp-gr .grw-header .wp-google-based{
  position: relative;
  float: right;
  margin-left: 10px !important;
  margin-top: 5px !important;
  color:var(--ink-soft)!important;
  font-size:.8rem!important;
}

/* "powered by Google": pequeño y discreto (las letras de Google conservan su
   color, que viene en estilo inline). */
.shortcode-live-reviews .wp-gr .grw-header .wp-google-powered{
  display: none !important;
  color:var(--ink-soft)!important;
  font-size:.72rem!important;
  font-weight:600!important;
}


/* corrections reviews size scale */
.shortcode-live-reviews .grw-reviews{
  max-width: 100%;
}


@media(max-width: 520px){
    .shortcode-live-reviews .wp-gr .grw-header .wp-google-based{
        width: 100%;
    }
    
    .shortcode-live-reviews .wp-gr .grw-header-inner{
        display: flex !important;
        flex-direction: column !important;
        text-align: center !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
    }
    .shortcode-live-reviews .wp-gr .grw-header .vpro-rev-title{
        justify-content: center;
    }
    .shortcode-live-reviews .wp-gr .grw-header .wp-google-name, .shortcode-live-reviews .wp-gr.rpi .grw-header .wp-google-name a{
        --align: center !important;
    }
    
}