/* ==========================================================================
   11 · OPINIONES
   Porte 1:1 del componente entregado (Marquee + LiquidCard de designali-in).
   Cada regla lleva al lado la clase de Tailwind que replica.

   Por decisión explícita del cliente esta sección NO sigue la guía de marca.

   Los grupos de la marquesina se escriben en el HTML, igual que hace
   `Array(repeat).fill(0).map(...)` en React. Así todas las animaciones
   arrancan en el mismo instante. Generarlos por JS después de la carga fue lo
   que desfasaba los grupos y hacía que las tarjetas se solaparan.
   ========================================================================== */

.opiniones {
  /* Fondo liso y claro a propósito: el filtro de vidrio desplaza el fondo
     120 px; sobre una fotografía el resultado es un borrón ilegible. */
  background: linear-gradient(180deg, var(--celeste-palido) 0%, var(--blanco) 55%, var(--celeste-palido) 100%);
}

.opiniones__encabezado {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: 2rem;
  margin-bottom: var(--space-block);
}
.opiniones__encabezado .h2 { max-width: 16ch; margin-top: 1.25rem; }
.opiniones__bajada { color: var(--ink-70); max-width: 38ch; }

/* --- Marquee -------------------------------------------------------------
   group flex overflow-hidden p-1 [--gap:6px] [gap:var(--gap)] [--duration:40s]
   ------------------------------------------------------------------------- */

.marquee {
  --gap: 6px;
  --duration: 40s;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  padding: .25rem;                 /* p-1 */
  gap: var(--gap);
}

/* flex shrink-0 justify-around [gap:var(--gap)] animate-marquee flex-row */
.marquee__grupo {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  justify-content: space-around;
  gap: var(--gap);
  animation: marquee var(--duration) linear infinite;
}

/* group-hover:[animation-play-state:paused] */
.marquee:hover .marquee__grupo,
.marquee:focus-within .marquee__grupo { animation-play-state: paused; }

/* [animation-direction:reverse] */
.marquee--reverse .marquee__grupo { animation-direction: reverse; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% - var(--gap))); }
}

/* --- LiquidCard ----------------------------------------------------------
   mx-1 rounded-3xl w-80 h-full
   + bg-transparent flex flex-col gap-6 rounded-xl border py-6 shadow-[...]
   ------------------------------------------------------------------------- */

.liquid-card {
  margin-inline: .25rem;           /* mx-1  */
  width: 20rem;                    /* w-80  */
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;                     /* gap-6 */
  padding-block: 1.5rem;           /* py-6  */
  border-radius: 1.5rem;           /* rounded-3xl */
  border: 1px solid rgba(15, 40, 48, .10);
  /* El filtro de vidrio va como estilo EN LINEA en cada tarjeta, igual que en
     el componente (style={{ backdropFilter: 'url("#container-glass")' }}).
     Una url() de solo fragmento dentro de una hoja externa se resuelve contra
     la URL de la hoja, no del documento: en cuanto el CSS cambia de ruta el
     filtro deja de encontrarse. En linea siempre resuelve contra el documento.
     Esta base con blur es la que ven Safari y Firefox, que no soportan
     filtros SVG en backdrop-filter. */
  background: rgba(255, 255, 255, .42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  box-shadow:
    0 0 6px rgba(0, 0, 0, .03),
    0 2px 6px rgba(0, 0, 0, .08),
    inset 3px 3px .5px -3px rgba(0, 0, 0, .9),
    inset -3px -3px .5px -3px rgba(0, 0, 0, .85),
    inset 1px 1px 1px -.5px rgba(0, 0, 0, .6),
    inset -1px -1px 1px -.5px rgba(0, 0, 0, .6),
    inset 0 0 6px 6px rgba(0, 0, 0, .12),
    inset 0 0 2px 2px rgba(0, 0, 0, .06),
    0 0 12px rgba(255, 255, 255, .15);
  transition: all .2s var(--ease-out);
}

/* CardContent · p-6 py-0  →  px-6 */
.liquid-card__contenido { padding-inline: 1.5rem; padding-block: 0; }

/* --- Contenido ------------------------------------------------------------ */

/* mb-4 flex items-center space-x-3 */
.opinion__persona {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* h-10 w-10 object-cover rounded-full */
.opinion__avatar {
  height: 2.5rem;
  width: 2.5rem;
  flex: none;
  object-fit: cover;
  border-radius: 9999px;
}

.opinion__nombre { font-weight: 600; font-size: 1rem; line-height: 1.4; }   /* font-semibold */
.opinion__cargo  { font-size: .875rem; line-height: 1.35; color: rgba(15, 40, 48, .60); }  /* text-sm text-primary/60 */

.opinion__texto { margin-bottom: .75rem; font-size: .9375rem; line-height: 1.5; }  /* mb-3 */

/* flex space-x-1 */
.opinion__estrellas { display: flex; gap: .25rem; }
/* h-4 w-4 fill-[#fff200] text-[#fff200] */
.opinion__estrellas svg {
  height: 1rem;
  width: 1rem;
  display: block;
  fill: #fff200;
  stroke: #fff200;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Pie de sección ------------------------------------------------------- */

.opiniones__pie {
  margin-top: var(--space-block);
  padding-top: 1.5rem;
  border-top: var(--rule) solid var(--ink);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.opiniones__pie p { font-size: var(--fs-small); color: var(--ink-70); max-width: 52ch; }

/* --- Sin animación -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee__grupo { animation: none; }
  .marquee__grupo:not(:first-child) { display: none; }
  .liquid-card { transition: none; }
}

@media (max-width: 900px) {
  .opiniones__encabezado { grid-template-columns: minmax(0, 1fr); }
  .liquid-card { width: 17.5rem; }
}