/* Sistema propio de resenas — CSS empaquetado.
   Generado por empaquetar.sh el 2026-09-10 11:37. NO editar a mano:
   los archivos fuente estan en widget/. */

/* ── resenas-widget.css ───────────────────────────────── */
/* Inter auto-hospedada. SIL Open Font License 1.1.
   Servida desde nuestro dominio: sin peticiones a Google desde la tienda. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fuentes/inter-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fuentes/inter-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fuentes/inter-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fuentes/inter-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fuentes/inter-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fuentes/inter-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fuentes/inter-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fuentes/inter-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/*
 * resenas-widget.css
 * Widget de lectura de reseñas — clon estético del widget de Loox.
 * Prefijo obligatorio: rsn- . Cero selectores globales (body, *, img, button a secas).
 * Medidas y tokens extraídos de investigacion/02-loox-estetica/widget.css (CSS real de Loox)
 * y de la sección 3 de ESPECIFICACION.md.
 */

.rsn-widget {
  /* ---- Tokens (sección 3.2 de la especificación) ---- */
  --rsn-card-bg: #ffffff;
  --rsn-text: #333333;
  --rsn-card-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  --rsn-card-radius: 16px;
  --rsn-star: #3e3e3e; /* configurable por producto vía data-star-color */
  --rsn-bar-bg: rgba(0, 0, 0, 0.04);
  --rsn-bar-fill: #7b7b7b;
  --rsn-btn-border: #e8e8e8;
  --rsn-verified: #282828;
  --rsn-summary: #3e3e3e;
  --rsn-muted: #767676;
  --rsn-incentivada-bg: #f0f1f1;
  --rsn-reply-bg: rgba(0, 0, 0, 0.03);
  --rsn-gap: 14px;

  display: block;
  box-sizing: border-box;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: var(--rsn-text);
  min-height: 335px; /* reserva de altura: evita salto de layout (CLS) */
}

@media (max-width: 600px) {
  .rsn-widget {
    min-height: 315px;
  }
}

.rsn-widget, .rsn-widget * {
  box-sizing: border-box;
}

/* Margen lateral y ancho de lectura. El widget se inserta a ancho completo en
   la ficha y quedaba pegado a los bordes de la pantalla, tanto en móvil como
   en pantallas grandes. */
.rsn-widget {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

@media (min-width: 750px) {
  .rsn-widget {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   RESET DEFENSIVO — el widget vive DENTRO del tema de la tienda, y los temas
   estilizan etiquetas sueltas. Dawn aplica a `table:not([class]) td` un
   padding de 1em y un borde: sin esto, cada celda de la distribucion salia
   con su propio recuadro y las filas median el doble.
   Regla para el futuro: no confiar en que el tema deje en paz una etiqueta.
   ══════════════════════════════════════════════════════════════════════ */
.rsn-widget table,
.rsn-widget thead,
.rsn-widget tbody,
.rsn-widget tr,
.rsn-widget th,
.rsn-widget td {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  vertical-align: middle;
  box-shadow: none;
}

/* Muchos temas (el de esta tienda incluido) traen una regla de "limpieza"
   del tipo `div:empty, section:empty { display:none }`. Nuestros elementos
   decorativos SON divs vacios a proposito — el relleno de la barra de
   distribucion, por ejemplo, solo tiene ancho y color — y desaparecian.
   Mas especifico que `div:empty`, asi que gana sin necesidad de !important. */
.rsn-widget div:empty,
.rsn-widget span:empty,
.rsn-widget i:empty {
  display: block;
}

.rsn-widget span:empty {
  display: inline-block;
}

.rsn-widget table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  table-layout: auto;
}

.rsn-widget p,
.rsn-widget h2,
.rsn-widget h3 {
  margin: 0;
  padding: 0;
}

.rsn-widget a {
  color: inherit;
  text-decoration: none;
}

.rsn-widget button {
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
  min-height: 0;
  box-shadow: none;
}

/* ---------------------------------------------------------------------- */
/* Estado de carga                                                        */
/* ---------------------------------------------------------------------- */

.rsn-cargando {
  padding: 40px 10px;
  text-align: center;
  color: var(--rsn-muted);
  font-size: 14px;
}

.rsn-error {
  padding: 24px 10px;
  text-align: center;
  color: #b42318;
  font-size: 14px;
}

/* ---------------------------------------------------------------------- */
/* Cabecera (sección 3.6)                                                 */
/* ---------------------------------------------------------------------- */

.rsn-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.rsn-header__avg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 140px;
}

.rsn-header__avg-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rsn-header__avg-row .rsn-estrella {
  width: 38px;
  height: 38px;
  color: var(--rsn-star);
}

.rsn-header__avg-num {
  font-size: 45px;
  font-weight: 600;
  line-height: 1;
  color: var(--rsn-summary);
  overflow: visible;
}

.rsn-header__count {
  margin-top: 12px;
  font-size: 16px;
  color: var(--rsn-summary);
}

.rsn-header__dist {
  flex: 1 1 320px;
  max-width: 420px;
}

.rsn-header__dist table {
  width: 100%;
  border-collapse: collapse;
}

.rsn-dist-row {
  cursor: pointer;
  border: none;
  background: transparent;
}

.rsn-dist-row:focus-visible .rsn-bar {
  filter: brightness(0.96);
}

@media (hover: hover) and (pointer: fine) {
  .rsn-dist-row:hover .rsn-bar { filter: brightness(0.96); }
}

.rsn-dist-row--activa .rsn-dist-row__count {
  font-weight: 700;
}

.rsn-dist-row td {
  padding: 4px 0;
  vertical-align: middle;
}

/* Medidas tomadas del widget real de Loox a 390px: estrella de 18px y celda
   de 104px. Con 13px la fila se veía raquítica y estirada, que es justo lo que
   hacía que "no se pareciera a Loox". */
.rsn-dist-row__stars {
  display: flex;
  gap: 2px;
  width: 104px;
}

.rsn-dist-row__stars .rsn-estrella {
  width: 18px;
  height: 18px;
  color: var(--rsn-star);
}

.rsn-dist-row__count {
  min-width: 40px;
}

.rsn-dist-row__bar {
  width: 100%;
  padding: 0 12px;
}

.rsn-bar {
  width: 100%;
  height: 10px;
  border-radius: 2px;
  background: var(--rsn-bar-bg);
  overflow: hidden;
}

.rsn-bar__fill {
  height: 100%;
  border-radius: 2px;
  background: var(--rsn-bar-fill);
  transition: width 0.5s ease;
}

.rsn-dist-row__count {
  text-align: left;
  font-size: 14px;
  color: var(--rsn-summary);
  white-space: nowrap;
}

.rsn-header__actions {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.rsn-btn {
  font-size: 16px;
  border: 1px solid var(--rsn-btn-border);
  /* Píldora, como el referente (.header-btn de Loox: 40px de alto, radio 16). */
  border-radius: 16px;
  height: 40px;
  padding: 0 16px;
  background: #fff;
  cursor: pointer;
  color: #000000;
  transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
  white-space: nowrap;
}

.rsn-btn:focus-visible {
  background: var(--rsn-btn-border);
  color: #000000;
}

@media (hover: hover) and (pointer: fine) {
  .rsn-btn:hover { background: var(--rsn-btn-border); color: #000000; }
}

.rsn-btn:focus-visible {
  outline: 2px solid var(--rsn-verified);
  outline-offset: 2px;
}

/* Ancho flexible: se come el espacio que dejaba el rótulo "Ordenar" (medido
   235px de 390 frente a los 332px del referente). El widget tiene 16px de
   padding lateral, así que "ancho" nunca significa pegado al borde: quedan
   márgenes a ambos lados, que es lo que pidió Nestor (9-sep-2026). */
.rsn-btn--escribir {
  font-weight: 500;
  flex: 1 1 auto;
  min-width: 0;
}

/* A partir de aquí la cabecera cabe en una sola fila y el botón deja de tener
   una fila para él: estirarlo lo llevaba a 394px sobre 1280, muy por encima
   del referente, que en escritorio lo deja compacto (`flex-grow` solo en su
   modo compacto). Medido con el widget real, 9-sep-2026. */
@media (min-width: 900px) {
  .rsn-btn--escribir {
    flex: 0 1 auto;
  }

  .rsn-header__actions {
    flex: 0 0 auto;
  }
}

.rsn-sort {
  position: relative;
}

/* Botón de solo icono. Loox lo resuelve con `.menu-icon` a 37px de ancho;
   aquí 40px porque es el mínimo tocable cómodo en Android y el alto ya es 40. */
.rsn-btn--ordenar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  padding: 0;
  flex: 0 0 auto;
}

.rsn-btn--ordenar svg {
  width: 20px;
  height: 20px;
  display: block;
}

.rsn-btn--ordenar[aria-expanded="true"] {
  background: var(--rsn-btn-border);
}

.rsn-sort__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 8px;
  min-width: 200px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.2);
}

.rsn-sort__menu[hidden] {
  display: none;
}

.rsn-sort__opcion {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  font-size: 14px;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--rsn-text);
}

.rsn-sort__opcion:focus-visible {
  background: #f2f2f2;
}

@media (hover: hover) and (pointer: fine) {
  .rsn-sort__opcion:hover { background: #f2f2f2; }
}

.rsn-sort__opcion[aria-checked="true"] {
  font-weight: 700;
}

@media (max-width: 600px) {
  .rsn-header {
    flex-direction: column;
    align-items: stretch;
  }

  .rsn-header__avg {
    align-items: center;
    text-align: center;
    width: 100%;
  }

  /* Zonas tocables: 28px de alto es poco para el pulgar, sobre todo en Android.
     Se agrandan solo en móvil; en escritorio se conserva la proporción
     compacta de Loox. `height` (no `min-height`): la regla base la fija. */
  .rsn-dist-row td {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .rsn-header__dist {
    max-width: none;
    width: 100%;
    /* En columna, el `flex-basis: 320px` del escritorio pasa a ser ALTURA y
       dejaba ~180px de hueco bajo la distribucion. Aqui manda el contenido. */
    flex: 0 0 auto;
  }

  /* Lo mismo para los demas hijos de la cabecera cuando se apilan. */
  .rsn-header__avg,
  .rsn-header__acciones,
  .rsn-header__actions {
    flex: 0 0 auto;
  }

  .rsn-header__actions {
    width: 100%;
  }

}

/* ---------------------------------------------------------------------- */
/* Atajos de filtro por sentimiento (sección 3.12)                        */
/* Conviven con el filtro por estrella individual de la distribución: las */
/* de 3 estrellas quedan fuera de ambos atajos a propósito.               */
/* ---------------------------------------------------------------------- */

.rsn-atajos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.rsn-atajo {
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--rsn-btn-border);
  border-radius: 90px;
  height: 32px;
  padding: 0 14px;
  background: #fff;
  color: var(--rsn-summary);
  cursor: pointer;
  transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.rsn-atajo:focus-visible {
  background: var(--rsn-btn-border);
}

@media (hover: hover) and (pointer: fine) {
  .rsn-atajo:hover { background: var(--rsn-btn-border); }
}

.rsn-atajo__conteo {
  color: var(--rsn-muted);
}

.rsn-atajo--activo {
  background: var(--rsn-verified);
  border-color: var(--rsn-verified);
  color: #fff;
}

.rsn-atajo--activo .rsn-atajo__conteo {
  color: #fff;
  opacity: 0.8;
}

/* ---------------------------------------------------------------------- */
/* Filtro activo                                                          */
/* ---------------------------------------------------------------------- */

.rsn-filtro-activo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--rsn-muted);
}

.rsn-filtro-activo button {
  border: none;
  background: transparent;
  color: var(--rsn-verified);
  text-decoration: underline;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
}

/* ---------------------------------------------------------------------- */
/* Cuadrícula masonry (sección 3.4) — CSS columns, sin librería JS         */
/* ---------------------------------------------------------------------- */

/* Masonry por columnas reales (ver `recolocar()` en el JS). Se abandonó
   `column-count` porque reparte en bloque y dejaba huecos enormes al final de
   cada columna cuando las reseñas tienen alturas muy distintas. */
.rsn-grid {
  display: flex;
  align-items: flex-start;
  gap: var(--rsn-gap);
  width: 100%;
}

.rsn-grid__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rsn-gap);
}

@media (min-width: 1150px) {
  .rsn-grid { column-count: 5; }
}

@media (min-width: 1380px) {
  .rsn-grid { column-count: 6; }
}

/* Tandas (sección 3.12): tarjeta cargada en el DOM (hasta 24 por lote) pero
   todavía no revelada. Google sigue indexando el texto: solo se oculta por
   CSS, no se deja de traer del backend. Con `display:none` el navegador
   tampoco descarga la foto de `loading="lazy"` hasta que se revela. */
/* Selector compuesto (.rsn-card.rsn-card--oculta), no solo .rsn-card--oculta:
   necesita más especificidad que ".rsn-card{display:block}" (sección 3.5,
   definida después en esta misma hoja) para ganar siempre, sin depender del
   orden de las reglas. */
.rsn-card.rsn-card--oculta {
  display: none;
}

/* Difuminado en TODOS los tamaños. Se probó "corte limpio en móvil" siguiendo
   la recomendación de NN/g, pero en la ficha real el corte seco deja un borde
   duro que parece un fallo de carga: el difuminado comunica mejor que "hay
   más". Decisión de Nestor con el resultado delante, 10-sep-2026.
   (antes: SOLO en escritorio ≥920px)
   `mask-image`, no una capa de color: no depende de conocer el fondo, así
   que no se rompe con otro fondo ni en modo oscuro. */
.rsn-grid--difuminada {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 90px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 90px), transparent 100%);
}

@media (min-width: 920px) {
  .rsn-grid--difuminada {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 120px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 120px), transparent 100%);
  }
}

/* ---------------------------------------------------------------------- */
/* Tarjeta de reseña (sección 3.5)                                        */
/* ---------------------------------------------------------------------- */

.rsn-card {
  display: block;
  width: 100%;
  /* El hueco entre tarjetas lo pone el `gap` de la columna, no el margen:
     con margen quedaba un espacio de más al final de cada columna. */
  margin: 0;
  background: var(--rsn-card-bg);
  color: var(--rsn-text);
  border-radius: var(--rsn-card-radius);
  box-shadow: var(--rsn-card-shadow);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  border: none;
  padding: 0;
  font: inherit;
}

.rsn-card:focus-visible {
  background: #f8f8f8;
}

@media (hover: hover) and (pointer: fine) {
  .rsn-card:hover { background: #f8f8f8; }
}

.rsn-card:focus-visible {
  outline: 2px solid var(--rsn-verified);
  outline-offset: -2px;
}

.rsn-card--sin-foto {
  padding-top: 10px;
}

.rsn-card__img {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #eee;
}

.rsn-card__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rsn-card__mas {
  position: absolute;
  right: 8px;
  top: 8px;
  border-radius: 90px;
  opacity: 0.85;
  background: #fff;
  display: flex;
  gap: 2px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 6px;
  align-items: center;
  justify-content: center;
  color: #000;
  pointer-events: none;
}

.rsn-card__mas svg {
  width: 15px;
  height: 15px;
}

.rsn-card__block {
  padding: 10px 10px 0;
}

.rsn-card__block:last-child {
  padding-bottom: 10px;
}

.rsn-card__title {
  padding: 0 10px 0;
  margin-top: 10px;
  font-weight: bold;
  font-size: 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
}

/* Agrupa avatar + nombre para que nunca se separen al hacer wrap; lo que
   puede pasar a su propia línea es el sello de verificado. */
.rsn-card__quien {
  display: flex;
  /* Arriba, no centrado: con nombre + edad + departamento el texto puede
     ocupar dos o tres lineas y el avatar centrado queda flotando. */
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

/* Nombre + sello viajan juntos: nunca se separan al envolver la linea. */
/* Edad y departamento: segundo nivel bajo el nombre. Son datos de contexto,
   no protagonistas — así el nombre conserva su renglón y su peso, como en
   Loox. Todo en una línea no cabía: la tarjeta mide ~157px en un móvil de
   360px y "Saul T., 32 · Arequipa" ocupaba dos renglones. */
.rsn-card__meta {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--rsn-muted);
}

.rsn-nombre-sello {
  white-space: nowrap;
}

.rsn-card__nombre {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------- */
/* Avatar (sección 3.11): foto de perfil o círculo con inicial            */
/* ---------------------------------------------------------------------- */

.rsn-card__avatar {
  --rsn-avatar-color: #767676;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--rsn-avatar-color);
  color: #ffffff;
}

.rsn-card__avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rsn-card__avatar__inicial {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  user-select: none;
}

.rsn-icono-verificado {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--rsn-verified);
  margin-left: 5px;
  /* Va dentro del nombre, en linea con el texto: se alinea a la altura de la
     mayuscula y lleva su propio espacio a la izquierda. */
  display: inline-block;
  vertical-align: -2px;
}

.rsn-card__estrellas {
  height: 27px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.rsn-card__estrellas .rsn-estrella {
  width: 18px;
  height: 18px;
  color: var(--rsn-star);
}

.rsn-card__fecha {
  padding: 4px 10px 0;
  font-size: 11px;
  color: var(--rsn-muted);
}

.rsn-card__texto {
  font-size: 14px;
  line-height: 19px;
  white-space: pre-wrap;
  margin: 0;
  overflow-wrap: anywhere;
}

/* Respuestas a las preguntas guiadas. Se distinguen del testimonio con la
   etiqueta en gris, no con un recuadro: son parte de la misma reseña, no un
   apartado nuevo, y encajonarlas rompería la tarjeta de Loox. */
.rsn-card__datos {
  padding-top: 0;
}

.rsn-card__dato {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 18px;
  overflow-wrap: anywhere;
}

.rsn-card__dato:last-child {
  margin-bottom: 0;
}

.rsn-card__dato-etiqueta {
  color: var(--rsn-muted);
}

.rsn-card__incentivada {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  background-color: var(--rsn-incentivada-bg);
  color: #4a4a4a;
  padding: 4px 8px;
  margin: 10px 10px 0;
  border-radius: 8px;
  font-size: 12px;
  line-height: 16px;
}

.rsn-card__incentivada svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.rsn-card__respuesta {
  margin: 10px 0 0;
  padding: 10px 10px 10px;
  background: var(--rsn-reply-bg);
  border-top: 1px solid #e2e2e2;
}

.rsn-card__respuesta-etiqueta {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--rsn-verified);
  margin-bottom: 3px;
}

.rsn-card__respuesta-texto {
  font-size: 13px;
  line-height: 18px;
  color: #4a4a4a;
  margin: 0;
  white-space: pre-wrap;
}

/* ---------------------------------------------------------------------- */
/* Botón "Ver más reseñas" (sección 3.7)                                  */
/* ---------------------------------------------------------------------- */

.rsn-pie {
  text-align: center;
  padding: 20px 0 10px;
}

.rsn-btn--cargar-mas {
  padding: 0 24px;
}

.rsn-btn--cargar-mas[disabled] {
  opacity: 0.6;
  cursor: default;
}

/* ---------------------------------------------------------------------- */
/* Estado vacío                                                           */
/* ---------------------------------------------------------------------- */

.rsn-vacio {
  padding: 48px 16px;
  text-align: center;
  border: 1px dashed var(--rsn-btn-border);
  border-radius: 16px;
}

.rsn-vacio__texto {
  margin: 0 0 20px;
  font-size: 16px;
  color: var(--rsn-summary);
}

/* ---------------------------------------------------------------------- */
/* Icono estrella reutilizable (media estrella vía clip-path)             */
/* ---------------------------------------------------------------------- */

.rsn-estrella {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.rsn-estrella__base,
.rsn-estrella__lleno {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.rsn-estrella__base {
  color: var(--rsn-star);
  opacity: 0.25;
}

.rsn-estrella__lleno {
  color: var(--rsn-star);
  clip-path: inset(0 calc(100% - var(--rsn-pct, 100%)) 0 0);
}

/* ---------------------------------------------------------------------- */
/* Accesibilidad                                                          */
/* ---------------------------------------------------------------------- */

.rsn-widget :focus-visible {
  outline: 2px solid var(--rsn-verified);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .rsn-bar__fill {
    transition: none;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   BADGE DE ESTRELLAS (snippets/resenas-badge.liquid)
   Solo lo usa Sebicure, cuya ficha es un advertorial sin los bloques nativos
   de Dawn. Vive FUERA de .rsn-widget (va pegado al <h1> del hero), asi que
   no puede heredar nada de alli: todo lo que necesita esta aqui.
   Ojo: sin estas reglas salia como un enlace del tema — azul y subrayado.
   ══════════════════════════════════════════════════════════════════════ */
.rsn-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  font-size: 15px;
  line-height: 1;
  vertical-align: middle;
}

.rsn-badge:hover,
.rsn-badge:focus {
  text-decoration: none;
  color: inherit;
}

/* Las estrellas se dibujan con texto en dos capas: la gris de fondo y la de
   color recortada al porcentaje real. Nada de <span> vacio: los temas suelen
   ocultar los elementos sin contenido con `div:empty{display:none}`. */
.rsn-badge__stars {
  position: relative;
  display: inline-block;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 2px;
  color: rgba(0, 0, 0, 0.18);
  white-space: nowrap;
}

.rsn-badge__stars::before {
  content: "★★★★★";
}

.rsn-badge__stars::after {
  content: "★★★★★";
  position: absolute;
  /* `inset: 0` junto a `width` NO es un error, aunque lo parezca: cuando left,
     width y right vienen todos dados, CSS descarta `right` (en LTR), no el
     ancho. Comprobado midiendo las dos formas en el navegador, 10-sep-2026.
     Anotado aquí porque ya intenté "arreglarlo" una vez sin que hiciera falta. */
  inset: 0;
  overflow: hidden;
  width: var(--rsn-pct, 0%);
  color: var(--rsn-star, #3E3E3E);
  white-space: nowrap;
}

.rsn-badge__count {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.55);
  text-decoration: none;
}

.rsn-badge--vacio {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.55);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ══════════════════════════════════════════════════════════════════════
   ZONAS TOCABLES EN MÓVIL — al final de la hoja a propósito: con la misma
   especificidad gana la última regla, y las reglas base de estos elementos
   están más arriba. Objetivo: nada por debajo de 40px de alto para el pulgar,
   que es donde falla un Android de pantalla pequeña.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 749px) {
  .rsn-atajo {
    height: 40px;
  }

  .rsn-btn--escribir,
  .rsn-btn--cargar-mas,
  .rsn-sort__boton {
    min-height: 44px;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   SEÑALES DE QUE ALGO SE PUEDE TOCAR
   Investigación en 08-senales-de-clicabilidad.md y 09-como-lo-hacen-los-grandes.md

   El problema: en móvil no existe el cursor ni el hover, así que las filas de
   la distribución y las tarjetas no daban ninguna pista de ser tocables.
   NN/g midió que con señales débiles la gente tarda un 22% más y necesita un
   25% más de fijaciones: no es que no las vea, es que NO SE FÍA.

   Qué se hace y qué no:
   · Baymard: el 90% de quien quiere filtrar YA intenta tocar la barra por su
     cuenta. No hace falta un cartel; hace falta CONFIRMAR que responde. Por eso
     la señal principal es el estado de pulsación, no un texto explicativo.
   · El 86% sufre "ceguera a los banners": cuantos más adornos, más se ignoran
     todos. Se añade lo mínimo.
   · Se descarta el chevron: NN/g dice que no es una pista estándar. Sí la lupa,
     que es el icono reconocido de "esto se amplía" en comercio electrónico.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Respuesta al toque ───────────────────────────────────────────── */
.rsn-dist-row,
.rsn-card,
.rsn-atajo,
.rsn-btn {
  -webkit-tap-highlight-color: transparent;  /* el gris de iOS, sustituido por lo de abajo */
  transition: background-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

.rsn-dist-row:active {
  background: rgba(0, 0, 0, 0.05);
}

.rsn-dist-row:active .rsn-bar {
  filter: brightness(0.9);
}

/* La tarjeta se "hunde" un poco: el gesto físico que la gente reconoce como
   pulsar algo. Sutil a propósito — 1,5% de escala, no un rebote. */
.rsn-card:active {
  transform: scale(0.985);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.16);
}

.rsn-atajo:active,
.rsn-btn:active {
  background: var(--rsn-btn-border);
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  .rsn-dist-row,
  .rsn-card,
  .rsn-atajo,
  .rsn-btn {
    transition: none;
  }
  .rsn-card:active,
  .rsn-atajo:active,
  .rsn-btn:active {
    transform: none;
  }
}

/* ── 2. La foto se amplía: lupa en la esquina ────────────────────────── */
/* Va abajo a la derecha para no chocar con el contador "+N" de varias fotos,
   que ocupa la esquina de arriba. */
.rsn-card__img {
  position: relative;
}

.rsn-card__lupa {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #ffffff;
  pointer-events: none;   /* decorativa: el toque lo recibe la tarjeta */
}

.rsn-card__lupa svg {
  width: 15px;
  height: 15px;
  display: block;
}

.rsn-card:active .rsn-card__lupa {
  background: rgba(0, 0, 0, 0.65);
}


/* ══════════════════════════════════════════════════════════════════════
   SEÑAL EN REPOSO — lo que faltaba
   El estado de pulsación solo se ve MIENTRAS tocas: confirma el toque, pero
   no enseña de antemano que el elemento responde. Son dos problemas distintos
   (08-senales-de-clicabilidad.md) y antes solo estaba resuelto el segundo.
   ══════════════════════════════════════════════════════════════════════ */

/* Filas LIMPIAS, como Loox: sin fondo, sin esquinas, sin separación. Se probó
   con fondo tenue para que parecieran pulsables y el resultado se alejaba
   demasiado del referente (decisión de Nestor, 10-sep-2026).
   Lo que queda como señal es lo que NO se ve hasta que tocas: el estado de
   pulsación. Loox tampoco señala nada aquí; su limpieza y la falta de pista
   son la misma decisión vista por las dos caras. */
.rsn-dist-row:active td {
  background: rgba(0, 0, 0, 0.06);
}

/* Fila con el filtro puesto: esta sí se marca, porque informa de un estado
   activo, no es un adorno. */
.rsn-dist-row--activa td {
  background: rgba(0, 0, 0, 0.075);
}

/* La lupa, algo más presente: a 45% de opacidad pasaba desapercibida sobre
   fotos claras, que son la mayoría (cajas de cartón y producto blanco). */
.rsn-card__lupa {
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.58);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.rsn-card__lupa svg {
  width: 17px;
  height: 17px;
}

/* ── resenas-popup.css ───────────────────────────────── */
/*
 * Sistema propio de reseñas — Pop-up de reseña (lightbox)
 * Réplica del quickview de Loox (ver investigacion/02-loox-estetica/).
 * Prefijo obligatorio .rsn- en TODO selector. Cero selectores globales.
 *
 * Breakpoint móvil elegido para este componente: 640px.
 * (El original de Loox no documenta el quiebre exacto; se infiere de
 * `.main { min-width:375px }` y de su propio corte real en `max-width:620px`.
 * Usamos 640px porque coincide con el ancho de prueba pedido, 390px, con margen.)
 */

:root {
  --rsn-overlay: rgba(0, 0, 0, 0.7);
  --rsn-card-bg: #ffffff;
  --rsn-text: #282828;
  --rsn-muted: #767676;
  --rsn-verified: #282828;
  --rsn-star: #3e3e3e;
  --rsn-star-vacia: #d9d9d9;
  --rsn-card-radius: 8px;
  --rsn-focus: #1a73e8;
}

/* ---------- overlay ---------- */

.rsn-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--rsn-overlay);
  animation: rsn-popup-fade-in 0.15s ease-out;
}

@keyframes rsn-popup-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .rsn-popup-overlay { animation: none; }
}

body.rsn-scroll-bloqueado {
  overflow: hidden;
}

/* ---------- tarjeta ---------- */

.rsn-popup {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 813px;
  max-height: min(584px, 100%);
  background: var(--rsn-card-bg);
  border-radius: var(--rsn-card-radius);
  box-shadow: 0 0 35px -10px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  font-family: inherit;
  color: var(--rsn-text);
}

.rsn-popup--sin-foto {
  max-width: 450px;
  max-height: min(80vh, 620px);
}

/* ---------- panel de foto (izquierda, ~53%) ---------- */

.rsn-popup__media {
  position: relative;
  flex-basis: 53%;
  min-width: 320px;
  background: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.rsn-popup__track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .rsn-popup__track { transition: none; }
}

.rsn-popup__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rsn-popup__slide img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.rsn-popup__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 6px;
  border: 0;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  cursor: pointer;
}

.rsn-popup__nav:hover {
  background: rgba(0, 0, 0, 0.6);
}

.rsn-popup__nav:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.rsn-popup__nav svg {
  width: 100%;
  height: 100%;
}

.rsn-popup__nav--prev { left: 16px; }
.rsn-popup__nav--next { right: 16px; }

.rsn-popup__nav[hidden] { display: none; }

/* ---------- miniaturas ---------- */

.rsn-popup__thumbs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-x: auto;
}

.rsn-popup__thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: transparent;
  cursor: pointer;
  box-sizing: border-box;
}

.rsn-popup__thumb.is-activo {
  border-color: #ffffff;
}

.rsn-popup__thumb:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.rsn-popup__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- cerrar ---------- */

.rsn-popup__close {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 6px;
  border: 0;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.1s ease-in;
}

.rsn-popup__close:hover {
  background: rgba(0, 0, 0, 0.7);
}

.rsn-popup__close:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.rsn-popup__close svg {
  width: 100%;
  height: 100%;
}

/* reseña sin foto: el cierre pasa a un botón claro arriba a la derecha,
   porque ya no hay fondo oscuro de foto sobre el que resaltar una X blanca */
.rsn-popup--sin-foto .rsn-popup__close {
  top: 12px;
  left: auto;
  right: 12px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--rsn-text);
}

.rsn-popup--sin-foto .rsn-popup__close:hover {
  background: rgba(0, 0, 0, 0.12);
}

/* ---------- panel de detalle (derecha, ~47%, blanco) ---------- */

.rsn-popup__detail {
  position: relative;
  flex-basis: 47%;
  flex-grow: 1;
  min-width: 375px;
  display: flex;
  flex-direction: column;
  background: var(--rsn-card-bg);
}

.rsn-popup--sin-foto .rsn-popup__detail {
  min-width: 0;
}

.rsn-popup__header {
  padding: 24px 24px 16px;
}

.rsn-popup__top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

/* Agrupa avatar + nombre para que no se separen al hacer wrap; lo que puede
   pasar a su propia línea es el sello "Compra verificada". */
.rsn-popup__quien {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.rsn-popup__nombre {
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---------- avatar (sección 3.11): foto de perfil o inicial ---------- */

.rsn-popup__avatar {
  --rsn-avatar-color: #767676;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--rsn-avatar-color);
  color: #ffffff;
}

.rsn-popup__avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rsn-popup__avatar__inicial {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  user-select: none;
}

.rsn-popup__verificado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 18px;
  color: var(--rsn-verified);
  padding-left: 8px;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.rsn-popup__verificado svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.rsn-popup__estrellas {
  display: flex;
  align-items: center;
  gap: 2px;
}

.rsn-popup__estrellas svg {
  width: 18px;
  height: 18px;
}

.rsn-popup__estrella--llena { color: var(--rsn-star); }
.rsn-popup__estrella--vacia { color: var(--rsn-star-vacia); }

/* ---------- cuerpo (scrollable) ---------- */

.rsn-popup__cuerpo {
  padding: 0 24px 24px;
  overflow-y: auto;
  flex-grow: 1;
}

.rsn-popup__texto {
  font-size: 14px;
  line-height: 19px;
  white-space: pre-wrap;
  color: var(--rsn-text);
}

.rsn-popup__incentivo {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f5f1e6;
  color: #6b5a1e;
  font-size: 12px;
  line-height: 17px;
}

.rsn-popup__incentivo svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}

.rsn-popup__respuesta {
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
}

.rsn-popup__respuesta-titulo {
  font-size: 12px;
  font-weight: 700;
  color: var(--rsn-text);
  margin-bottom: 2px;
}

.rsn-popup__respuesta-texto {
  font-size: 13px;
  line-height: 18px;
  color: var(--rsn-text);
}

.rsn-popup__respuesta-fecha {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--rsn-muted);
}

/* ---------- móvil: apilado ---------- */

@media (max-width: 640px) {
  .rsn-popup-overlay {
    padding: 0;
    align-items: stretch;
  }

  .rsn-popup {
    flex-direction: column;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
  }

  .rsn-popup--sin-foto {
    height: auto;
    max-height: 100%;
    margin: auto;
    border-radius: var(--rsn-card-radius);
  }

  .rsn-popup__media {
    flex-basis: auto;
    min-width: 0;
    min-height: 60vw;
    max-height: 60vh;
  }

  .rsn-popup__detail {
    min-width: 0;
    flex-basis: auto;
    overflow-y: auto;
  }

  .rsn-popup__nav {
    width: 36px;
    height: 36px;
  }
}

/* ── resenas-form.css ───────────────────────────────── */
/*
 * Sistema propio de reseñas — Formulario de reseña (modal sobre la ficha de producto)
 * Mismo lenguaje visual que el pop-up (resenas-popup.css). Prefijo .rsn- obligatorio.
 *
 * Breakpoint móvil: 640px (mismo criterio que resenas-popup.css).
 */

:root {
  --rsn-overlay: rgba(0, 0, 0, 0.7);
  --rsn-card-bg: #ffffff;
  --rsn-text: #282828;
  --rsn-muted: #767676;
  --rsn-borde: #e8e8e8;
  --rsn-star: #3e3e3e;
  --rsn-star-vacia: #d9d9d9;
  --rsn-card-radius: 8px;
  --rsn-error: #c0392b;
  --rsn-error-bg: #fdecea;
  --rsn-exito: #2e7d32;
  --rsn-focus: #1a73e8;
}

.rsn-form-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--rsn-overlay);
  animation: rsn-form-fade-in 0.15s ease-out;
}

@keyframes rsn-form-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .rsn-form-overlay { animation: none; }
}

body.rsn-scroll-bloqueado {
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════
   RESET DEFENSIVO — el formulario se monta en el <body> de la tienda, fuera
   de .rsn-widget, así que NO hereda el blindaje de aquel. Muchos temas (el
   de esta tienda incluido) traen `div:empty { display: none }` como regla de
   limpieza, y el relleno de la barra del cupón es justo eso: un div vacío
   con solo ancho y color. Sin esta regla la barra se ve gris del todo y
   nunca avanza — lo vio Nestor en su iPad el 10-sep-2026.
   Más específico que `div:empty`, así que gana sin !important.
   ══════════════════════════════════════════════════════════════════════ */
.rsn-form-overlay div:empty:not([hidden]),
.rsn-form-overlay span:empty:not([hidden]) {
  display: block;
}

.rsn-form-overlay span:empty:not([hidden]) {
  display: inline-block;
}

/* `:not([hidden])` NO es un adorno: sin él, esta misma regla destapaba el
   spinner del botón de enviar —un <span> vacío con [hidden]— y salía girando
   sin que se estuviera enviando nada. Es la segunda vez que un reset a lo
   ancho pisa un [hidden] en este proyecto. */
.rsn-form-overlay [hidden] {
  display: none !important;
}

.rsn-form {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: min(90vh, 720px);
  background: var(--rsn-card-bg);
  border-radius: var(--rsn-card-radius);
  box-shadow: 0 0 35px -10px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  font-family: inherit;
  color: var(--rsn-text);
}

/* El diálogo recibe el foco al abrirse (para el lector de pantalla), pero no
   necesita anillo: el modal entero YA es la señal de dónde estás, y el anillo
   dibujaba un recuadro de color alrededor de todo. */
.rsn-form:focus,
.rsn-form:focus-visible {
  outline: none;
}

.rsn-form__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 8px;
  border: 0;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--rsn-text);
  cursor: pointer;
}

.rsn-form__close:hover { background: rgba(0, 0, 0, 0.12); }
.rsn-form__close:focus-visible { outline: 2px solid var(--rsn-focus); outline-offset: 2px; }
.rsn-form__close svg { width: 100%; height: 100%; }

.rsn-form__scroll {
  overflow-y: auto;
  padding: 32px 24px 24px;
}

.rsn-form__titulo {
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
  margin: 0 0 4px;
}

.rsn-form__producto {
  font-size: 13px;
  color: var(--rsn-muted);
  margin: 0 0 20px;
}

.rsn-form__campo {
  margin-bottom: 20px;
}

.rsn-form__campo > label,
.rsn-form__campo > .rsn-form__label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--rsn-text);
}

.rsn-form__ayuda {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 17px;
  color: var(--rsn-muted);
}

.rsn-form__error {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--rsn-error);
}

.rsn-form__error[hidden] { display: none; }

.rsn-form__campo--con-error input,
.rsn-form__campo--con-error textarea {
  border-color: var(--rsn-error);
}

/* ---------- estrellas: el campo más importante, grande y tocable ---------- */

.rsn-form__estrellas {
  display: flex;
  gap: 4px;
}

.rsn-form__estrella {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--rsn-star-vacia);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.rsn-form__estrella svg {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.rsn-form__estrella:hover,
.rsn-form__estrella:hover ~ .rsn-form__estrella {
  color: var(--rsn-star-vacia);
}

.rsn-form__estrellas:hover .rsn-form__estrella.es-hover,
.rsn-form__estrellas .rsn-form__estrella.es-hover {
  color: var(--rsn-star);
}

.rsn-form__estrella.esta-elegida,
.rsn-form__estrella.esta-elegida ~ .rsn-form__estrella.esta-elegida {
  color: var(--rsn-star);
}

.rsn-form__estrella:focus-visible {
  outline: 2px solid var(--rsn-focus);
  outline-offset: 2px;
  border-radius: 8px;
}

.rsn-form__estrellas-texto {
  margin-top: 6px;
  font-size: 13px;
  color: var(--rsn-muted);
  min-height: 18px;
}

/* ---------- inputs ---------- */

/* ⚠️ 16px NO es una elección estética: Safari en iOS hace zoom automático
   sobre cualquier campo cuya letra mida menos de 16px, y al volver deja la
   página ampliada y descolocada. Con 14px pasaba en todos los campos del
   formulario (lo vio Nestor en su iPhone, 10-sep-2026). No se arregla con
   `maximum-scale=1` en el viewport: eso impediría al usuario ampliar la
   página a mano, que es una barrera de accesibilidad real. */
.rsn-form__campo input[type='text'],
.rsn-form__campo input[type='email'],
.rsn-form__campo input[type='tel'],
.rsn-form__campo select,
.rsn-form__campo textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  font-family: inherit;
  color: var(--rsn-text);
  background: #ffffff;
  border: 1px solid var(--rsn-borde);
  border-radius: 6px;
  box-sizing: border-box;
}

/* Safari y Chrome pintan de amarillo lo que autorrellenan y no hay forma de
   cambiar ese fondo: se tapa con una sombra interior del color de la caja.
   `-webkit-text-fill-color` porque el color del texto también lo fuerzan. */
.rsn-form__campo input:-webkit-autofill,
.rsn-form__campo input:-webkit-autofill:hover,
.rsn-form__campo input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px #ffffff inset;
  -webkit-text-fill-color: var(--rsn-text);
  caret-color: var(--rsn-text);
}

.rsn-form__campo textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 19px;
}

.rsn-form__campo select {
  /* Altura de toque cómoda en móvil y flecha nativa del sistema. */
  min-height: 44px;
  appearance: auto;
}

.rsn-form__campo select:focus-visible,
.rsn-form__campo input:focus-visible,
.rsn-form__campo textarea:focus-visible {
  outline: 2px solid var(--rsn-focus);
  outline-offset: 1px;
  border-color: var(--rsn-focus);
}

/* A la izquierda, no a la derecha: el botón de cerrar flota fijo en la
   esquina superior derecha y el contador se le metía debajo al hacer scroll
   ("Te faltan 31 caracteres" tapado por la X). Además así se lee en el mismo
   sitio que el resto de las ayudas. */
.rsn-form__contador {
  margin-top: 4px;
  font-size: 11px;
  color: var(--rsn-muted);
  text-align: left;
}

/* ---------- fotos ---------- */

.rsn-form__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 12px;
  border: 1px dashed var(--rsn-borde);
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  color: var(--rsn-muted);
  font-size: 13px;
}

.rsn-form__dropzone:focus-visible {
  outline: 2px solid var(--rsn-focus);
  outline-offset: 2px;
}

.rsn-form__dropzone.esta-arrastrando {
  border-color: var(--rsn-focus);
  background: rgba(26, 115, 232, 0.05);
  color: var(--rsn-text);
}

.rsn-form__dropzone svg {
  width: 28px;
  height: 28px;
  color: var(--rsn-muted);
}

.rsn-form__dropzone-enlace {
  color: var(--rsn-focus);
  text-decoration: underline;
}

.rsn-form__input-archivo {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.rsn-form__fotos-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.rsn-form__fotos-lista:empty { margin: 0; }

.rsn-form__foto {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  background: #f0f0f0;
}

.rsn-form__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rsn-form__foto-peso {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2px 4px;
  font-size: 9px;
  line-height: 12px;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
}

.rsn-form__foto-quitar {
  position: absolute;
  top: 3px;
  right: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 4px;
  border: 0;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  cursor: pointer;
}

.rsn-form__foto-quitar svg { width: 100%; height: 100%; }
.rsn-form__foto-quitar:focus-visible { outline: 2px solid #ffffff; outline-offset: 1px; }

/* ---------- honeypot: oculto a la vista pero presente en el DOM ---------- */

.rsn-form__trampa {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ---------- cupón (apagado por defecto, hueco reservado) ---------- */

.rsn-form__cupon-aviso {
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f5f1e6;
  color: #6b5a1e;
  font-size: 13px;
}

/* ---------- envío ---------- */

.rsn-form__error-envio {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 16px;
  padding: 12px;
  border-radius: 8px;
  background: var(--rsn-error-bg);
  color: var(--rsn-error);
  font-size: 13px;
  line-height: 18px;
}

.rsn-form__error-envio[hidden] { display: none; }

.rsn-form__reintentar {
  align-self: flex-start;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--rsn-error);
  background: #ffffff;
  border: 1px solid var(--rsn-error);
  border-radius: 6px;
  cursor: pointer;
}

.rsn-form__enviar {
  position: relative;
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  background: #282828;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.rsn-form__enviar:hover { background: #000000; }
.rsn-form__enviar:focus-visible { outline: 2px solid var(--rsn-focus); outline-offset: 2px; }

.rsn-form__enviar:disabled {
  background: #a3a3a3;
  cursor: not-allowed;
}

.rsn-form__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: rsn-form-girar 0.7s linear infinite;
}

.rsn-form__spinner[hidden] { display: none; }

@keyframes rsn-form-girar {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .rsn-form__spinner { animation-duration: 1.4s; }
}

.rsn-form__progreso {
  margin-top: 10px;
  height: 6px;
  border-radius: 3px;
  background: var(--rsn-borde);
  overflow: hidden;
}

.rsn-form__progreso[hidden] { display: none; }

.rsn-form__progreso-barra {
  height: 100%;
  width: 0%;
  background: #282828;
  transition: width 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .rsn-form__progreso-barra { transition: none; }
}

/* ---------- pantalla de agradecimiento ---------- */

.rsn-form__gracias {
  padding: 40px 8px 8px;
  text-align: center;
}

.rsn-form__gracias[hidden] { display: none; }

.rsn-form__gracias-icono {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  color: var(--rsn-exito);
}

.rsn-form__gracias-titulo {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px;
}

.rsn-form__gracias-texto {
  font-size: 14px;
  line-height: 20px;
  color: var(--rsn-text);
  margin: 0 auto 8px;
  max-width: 360px;
}

/* La segunda frase —la de que también publicamos las críticas— va más
   discreta: es una promesa, no una instrucción. */
.rsn-form__gracias-texto + .rsn-form__gracias-texto {
  color: var(--rsn-muted);
  font-size: 13px;
  line-height: 18px;
  margin-bottom: 4px;
}

.rsn-form__cupon-mensaje {
  margin: 16px auto 0;
  max-width: 360px;
}

.rsn-form__cupon-mensaje[hidden] { display: none; }

.rsn-form__gracias-cerrar {
  margin-top: 24px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--rsn-text);
  background: #ffffff;
  border: 1px solid var(--rsn-borde);
  border-radius: 6px;
  cursor: pointer;
}

.rsn-form__gracias-cerrar:hover { background: #f5f5f5; }

/* ---------- móvil ---------- */

@media (max-width: 640px) {
  .rsn-form-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .rsn-form {
    max-width: 100%;
    max-height: 92vh;
    border-radius: 12px 12px 0 0;
  }

  .rsn-form__estrella {
    width: 15vw;
    height: 15vw;
    max-width: 60px;
    max-height: 60px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   CUPÓN PROGRESIVO
   Diseño derivado de investigacion/10-incentivos-formulario/00-VEREDICTO.md.
   Dos reglas mandan aquí: el importe se muestra en SOLES (un porcentaje no
   significa nada para quien rellena), y el medidor vive pegado al botón de
   enviar — si se queda arriba, deja de existir en cuanto el usuario baja.
   ══════════════════════════════════════════════════════════════════════ */

/* Frase de incondicionalidad. Va arriba del todo y sin adornos: es la que
   evita que el cupón silencie las reseñas críticas. */
.rsn-form__honestidad {
  margin: 0 0 20px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--rsn-text);
  background: rgba(0, 0, 0, 0.03);
  border-radius: 8px;
}

/* Etiqueta "+S/5" pegada al nombre del campo. */
.rsn-form__premio {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  color: #1f6b3a;
  background: rgba(31, 107, 58, 0.09);
  border-radius: 90px;
  vertical-align: 1px;
}

/* Campo ya cobrado: la etiqueta se apaga en vez de desaparecer. Si se
   quitara del todo, el usuario perdería la referencia de qué le dio qué. */
.rsn-form__campo--cobrado .rsn-form__premio {
  color: var(--rsn-muted);
  background: rgba(0, 0, 0, 0.05);
}

.rsn-form__campo--cobrado .rsn-form__premio::before {
  content: "\2713\00a0";
}

/* ---------- pie fijo con el medidor ---------- */

.rsn-form__pie {
  position: sticky;
  /* -24px, no 0: el contenedor de scroll tiene 24px de padding inferior y
     con `bottom: 0` el pie se quedaba flotando por encima de esa franja,
     dejando ver el formulario pasar por debajo del botón de enviar. */
  bottom: -24px;
  z-index: 1;
  margin: 24px -24px -24px;
  padding: 14px 24px 20px;
  background: var(--rsn-card-bg);
  border-top: 1px solid var(--rsn-borde);
}

.rsn-form__cupon {
  margin: 0 0 12px;
}

.rsn-form__cupon-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.rsn-form__cupon-etiqueta {
  font-size: 13px;
  color: var(--rsn-muted);
}

.rsn-form__cupon-monto {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: #1f6b3a;
  font-variant-numeric: tabular-nums;
}

.rsn-form__cupon-barra {
  height: 4px;
  margin: 8px 0 6px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.07);
  overflow: hidden;
}

.rsn-form__cupon-relleno {
  height: 100%;
  width: 25%;
  border-radius: 2px;
  background: #1f6b3a;
  transition: width 0.35s ease;
}

.rsn-form__cupon-siguiente {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--rsn-muted);
}

/* Latido corto SOLO cuando el importe sube. Confirma lo que acaba de hacer
   sin convertir el medidor en algo que parpadea todo el rato. */
@keyframes rsn-form-cupon-sube {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

.rsn-form__cupon--sube .rsn-form__cupon-monto {
  animation: rsn-form-cupon-sube 0.42s ease;
  transform-origin: right center;
}

@media (prefers-reduced-motion: reduce) {
  .rsn-form__cupon--sube .rsn-form__cupon-monto { animation: none; }
  .rsn-form__cupon-relleno { transition: none; }
}

/* ---------- foto de perfil ---------- */

.rsn-form__avatar {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rsn-form__avatar-hueco {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--rsn-borde);
  border-radius: 50%;
  background: #fafafa;
  cursor: pointer;
  overflow: hidden;
  color: var(--rsn-muted);
}

.rsn-form__avatar-hueco.tiene-foto {
  border-style: solid;
  border-color: var(--rsn-borde);
}

.rsn-form__avatar-hueco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rsn-form__avatar-hueco svg {
  width: 22px;
  height: 22px;
}

.rsn-form__avatar-lado {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.rsn-form__avatar-enlace {
  font-size: 14px;
  color: var(--rsn-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.rsn-form__avatar-quitar {
  padding: 0;
  font-size: 13px;
  color: var(--rsn-muted);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rsn-form__avatar-quitar[hidden] { display: none; }

/* ---------- preguntas guiadas y campos menores ---------- */

.rsn-form__pregunta {
  margin-top: 12px;
}

.rsn-form__pregunta label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: var(--rsn-text);
}

.rsn-form__estrecho {
  max-width: 110px;
}

.rsn-form__contador {
  font-variant-numeric: tabular-nums;
}

.rsn-form__contador--ok {
  color: #1f6b3a;
}

/* ---------- casillas de permiso ---------- */

.rsn-form__permisos {
  padding-top: 4px;
}

/* Especificidad a propósito: `.rsn-form__campo > label` pone negrita, 14px y
   display:block a TODA etiqueta hija directa, y dejaba las casillas en negrita
   y sin la separación del flex. Se gana con la clase del contenedor. */
.rsn-form__permisos .rsn-form__casilla {
  font-weight: 400;
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--rsn-text);
  cursor: pointer;
}

/* 20px y no menos: es una zona de toque, y en Android una casilla de 13px
   se falla constantemente. */
.rsn-form__casilla input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: #1f6b3a;
  cursor: pointer;
}

/* ---------- agradecimiento ---------- */

.rsn-form__cupon-mensaje {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(31, 107, 58, 0.07);
}

.rsn-form__cupon-mensaje strong {
  font-size: 20px;
  color: #1f6b3a;
}

.rsn-form__cupon-mensaje span {
  font-size: 13px;
  color: var(--rsn-muted);
}



/* Aviso de compra reconocida. Verde y arriba: es lo primero que confirma al
   cliente que su cupón va en serio, antes de pedirle nada. */
.rsn-form__verificado {
  margin: 0 0 10px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  color: #1f6b3a;
  background: rgba(31, 107, 58, 0.08);
  border-radius: 8px;
}

/* "opcional" al lado del nombre del campo. En gris y en minúscula: informa
   sin competir con la etiqueta ni con el importe del cupón. */
.rsn-form__opcional {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 400;
  color: var(--rsn-muted);
}

/* Aviso de qué hace falta de verdad, arriba del formulario. */
.rsn-form__que-hace-falta {
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--rsn-muted);
}

.rsn-form__que-hace-falta strong {
  color: var(--rsn-text);
  font-weight: 600;
}