/* =====================================================================
   13 · RESEÑAS DE GOOGLE (id="resenas")
   Título + botón a la izquierda, tarjetas de reseñas a la derecha.
   Cada reseña es un <article class="resena">: pega ahí el texto real.
   ===================================================================== */

.resenas__grilla {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 80px;
}

.resenas__titulo { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; position: sticky; top: calc(var(--alto-header) + 24px); align-self: start; }

/* Nota general: "4,7 ★★★★★ 1.227 opiniones en Google" */
.resenas__nota { display: flex; align-items: center; gap: 16px; }
.resenas__nota-numero { font-size: 64px; font-weight: 200; line-height: 1; letter-spacing: -0.03em; }
.resenas__nota-detalle { display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: var(--texto-suave); }

.resenas__botones { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.resenas__escribir { font-size: 15px; color: var(--cobre); text-decoration: none; }
.resenas__escribir:hover { text-decoration: underline; }

/* Las reseñas: 2 columnas */
.resenas__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

.resena { padding: 36px 40px; background: var(--tarjeta); display: flex; flex-direction: column; gap: 14px; }
.resena__estrellas { font-size: 16px; letter-spacing: 4px; color: var(--cobre-instagram); }   /* PRUEBA: antes var(--cobre) */
.resena__texto { font-size: 17px; line-height: 1.6; font-weight: 700; flex: 1; }
.resena__autor { font-size: 16px; color: var(--texto-suave); }

/* Reseña destacada: ocupa las 2 columnas y tiene la letra un poco más grande */
.resena--destacada { grid-column: 1 / -1; border-left: 3px solid var(--cobre); }
.resena--destacada .resena__texto { font-size: 20px; }


/* ---------- Tablet y celular ---------- */
@media (max-width: 1024px) {
  .resenas__grilla { grid-template-columns: 1fr; gap: 40px; }
  .resenas__titulo { position: static; }
}

@media (max-width: 700px) {
  .resenas__lista { grid-template-columns: 1fr; }
  .resena { padding: 26px 22px; }
  .resena__texto { font-size: 16px; }
  .resena--destacada .resena__texto { font-size: 17px; }
}