/* ============================================================
   WaterGo · las opiniones pintadas en la ficha

   Se carga en las cinco páginas de producto (tres botellas y dos
   tapones). El bloque nace `hidden` en el HTML y solo lo destapa
   `assets/js/resenas.js` cuando la API devuelve al menos una
   opinión publicada.

   ⚠️  POR QUÉ ES UN ARCHIVO APARTE Y NO VA EN `estilo.css`
   Las botellas cargan `ficha.css` y los tapones cargan
   `pagina.css`: no hay una hoja intermedia que carguen las cinco
   y solo ellas. Meterlo en `estilo.css` lo bajaría en las
   cuarenta páginas del sitio que no enseñan opiniones.

   ⚠️  LAS ESTRELLAS SE PINTAN CON DOS CAPAS, no con medias
   estrellas ni redondeando. Un 4,3 tiene que verse 4,3: la capa
   dorada se recorta al 86 % del ancho. Redondear a 4,5 sería
   publicar una nota que no es la que dice el schema.org, y eso
   es exactamente lo que Google penaliza.
   ============================================================ */

/* El dorado. Es el mismo de las estrellas del formulario de
   /resena, y el único color del sitio que no sale de tokens.css:
   el pastel de la marca no da contraste sobre papel.

   ⚠️ Va en `:root` y NO en `.opi`. Declarado en `.opi` solo lo
   heredan sus descendientes, y las estrellas del resumen que va
   junto al PRECIO viven en `.compra`, fuera del bloque: salían
   grises las cinco. Se vio en la captura, no en el código. */
:root { --opi-oro: #E8A33D; }


/* ------------------------------------------------------------
   Resumen · la nota y el reparto
   ------------------------------------------------------------ */

.opi__resumen {
  display: grid;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding-bottom: var(--e-7);
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 720px) {
  .opi__resumen { grid-template-columns: auto 1fr; }
}

.opi__cifra {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(3.4rem, 7vw, 5rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  font-variant-numeric: tabular-nums;
}
.opi__cifra small {
  font-size: .32em;
  color: var(--color-muted);
  letter-spacing: 0;
}

.opi__cuantas { margin: var(--e-3) 0 0; color: var(--color-muted); }


/* ---------- las estrellas, en dos capas ---------- */

.opi__estrellas {
  position: relative;
  display: inline-block;
  font-size: 1.15rem;
  line-height: 1;
  letter-spacing: .1em;
  /* La capa de abajo son las cinco vacías. */
  color: var(--color-border);
  white-space: nowrap;
}
.opi__estrellas i {
  /* ⚠️ `inset: 0` NO: fijar a la vez izquierda, derecha y un `width`
     deja la caja sobredeterminada y el navegador tiene que ignorar
     uno de los tres. Se ancla solo a la izquierda y el ancho lo pone
     el JS en %, que es lo que recorta la capa dorada. */
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  color: var(--opi-oro);
  font-style: normal;
}
.opi__estrellas--grande { font-size: 1.5rem; margin-top: var(--e-2); }


/* ---------- el reparto de notas ---------- */

.opi__reparto {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e-2);
  max-width: 360px;
}
.opi__reparto li {
  display: grid;
  grid-template-columns: 2.4em 1fr 2.2em;
  gap: var(--e-3);
  align-items: center;
  font-size: var(--t-small);
  color: var(--color-secondary);
}
.opi__reparto-et { font-variant-numeric: tabular-nums; }
.opi__reparto-et::after { content: ' ★'; color: var(--opi-oro); }
.opi__reparto-n {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
}

.opi__barra {
  height: 8px;
  border-radius: var(--r-l);
  background: color-mix(in srgb, var(--color-on-background) 8%, transparent);
  overflow: hidden;
}
.opi__barra i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--opi-oro);
}


/* ------------------------------------------------------------
   La lista
   ------------------------------------------------------------ */

.opi__lista {
  list-style: none;
  margin: var(--e-7) 0 0;
  padding: 0;
  display: grid;
  gap: var(--e-6);
  /* ⚠️ `start` y no el `stretch` de serie: en una fila de dos, la
     tarjeta que lleva nuestra respuesta es el doble de alta y la de
     al lado se estiraba con ella, dejando media tarjeta en blanco.
     Cada opinión ocupa lo que ocupa. */
  align-items: start;
}
@media (min-width: 900px) {
  .opi__lista { grid-template-columns: repeat(2, 1fr); }
}

.opi__item {
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: var(--r-m);
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-on-background) 6%, transparent);
  box-shadow: var(--sombra-s);
}
.opi__item[hidden] { display: none; }

.opi__cab {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  align-items: baseline;
  justify-content: space-between;
}
.opi__fecha { color: var(--color-muted); }

.opi__titulo {
  margin: var(--e-4) 0 0;
  font-family: var(--f-display);
  font-size: var(--t-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.opi__texto {
  margin: var(--e-3) 0 0;
  line-height: var(--lh-body);
  /* El texto del cliente llega con los saltos de línea que escribió. */
  white-space: pre-line;
  overflow-wrap: break-word;
}

.opi__firma {
  margin: var(--e-4) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-3);
  align-items: center;
  color: var(--color-muted);
}
.opi__firma b { color: var(--color-on-surface); }

/* El sello de comprobada. No es decoración: es la prueba de que la
   dejó quien compró, y por eso va junto a la firma y no en un
   rincón. El texto de CÓMO se comprueba va abajo, en `.opi__verif`,
   porque la ley obliga a publicarlo. */
.opi__sello {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-success);
}
.opi__sello svg { width: 13px; height: 13px; flex: none; }

/* Nuestra contestación. Va dentro de la tarjeta y sangrada: es una
   respuesta a esa opinión, no otra opinión. */
.opi__respuesta {
  margin: var(--e-4) 0 0;
  padding: var(--e-4);
  border-left: 2px solid var(--color-border-strong);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  background: var(--color-surface-alt);
  font-size: var(--t-small);
  line-height: 1.55;
}
.opi__respuesta > p { margin: var(--e-2) 0 0; white-space: pre-line; }


/* ------------------------------------------------------------
   Pie · el botón de ver más y el texto que exige la ley
   ------------------------------------------------------------ */

.opi__mas { margin-top: var(--e-6); }

/* ⚠️ Directiva Ómnibus (RDL 24/2021): quien diga que sus opiniones
   son de compradores reales tiene que publicar QUÉ hace para
   comprobarlo. El texto lo manda la API dentro del JSON para que
   ninguna página que las pinte pueda quedarse sin él. Aquí solo se
   le da forma — y se le da forma de leerse, no de letra pequeña. */
.opi__verif {
  margin: var(--e-7) 0 0;
  padding: var(--e-5);
  border-radius: var(--r-m);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--color-secondary);
  max-width: 86ch;
}
.opi__verif b { color: var(--color-on-background); }


/* ------------------------------------------------------------
   El resumen de arriba, al lado del precio
   ------------------------------------------------------------ */

.compra__opinion { margin: var(--e-4) 0 0; }
.compra__opinion a {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  color: inherit;
  text-decoration: none;
  min-height: 32px;
}
.compra__opinion a:hover .compra__opinion-txt { text-decoration: underline; }
.compra__opinion a:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 3px;
  border-radius: var(--r-s);
}
.compra__opinion-txt {
  font-size: var(--t-small);
  color: var(--color-secondary);
  text-underline-offset: 3px;
}
.compra__opinion-txt b { color: var(--color-on-background); }


/* ------------------------------------------------------------
   La estrella en la tarjeta del catálogo
   ------------------------------------------------------------
   ⚠️ NO es un enlace, y no puede serlo: `.nueve__nombre a::after`
   estira el enlace del nombre por encima de toda la tarjeta, así
   que la tarjeta entera YA lleva a la ficha. Un enlace aquí dentro
   sería un enlace dentro de otro — HTML inválido — y además
   quedaría tapado por ese `::after`.
   ------------------------------------------------------------ */

.opi-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: var(--e-1) 0 0;
  font-size: .78rem;
}
.opi-mini[hidden] { display: none; }
.opi-mini .opi__estrellas { font-size: .92rem; letter-spacing: .06em; }
.opi-mini__txt {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
}
.opi-mini__txt b { color: var(--color-on-background); font-weight: 500; }