/* ==========================================================================
   Reviews 2026 · v2 "La conversación"  (preview: ?pv_preview=reviews2026b)
   --------------------------------------------------------------------------
   Loaded after reviews-2026.css, only with the preview flag. Adds:
   - "Lo más comentado": the perfume's notes, accords and themes that the
     reviews mention most, each chip filled in proportion to its count and
     marked with the catalogue's own accord / note colour;
   - "Reseña destacada": a pull-quote on the bottle's own tint (the same
     palette the hero draws the bottle on);
   - voices: a hanging quote mark, name / date / text hierarchy, a visible
     "Responder" and indented replies.
   Same language as the rest of the page: Newsreader over Plus Jakarta Sans,
   ivory, brown ink, rust small caps, hairlines, square corners.
   ========================================================================== */

body.pv-site #pv-resenas .r26b {
  --r26b-bottle: #d9c6b4;
  --r26b-glow: #f7efe7;
  --r26b-voice-ink: #3a302a;
}

/* ── Lo más comentado ──────────────────────────────────────────────────── */
body.pv-site #pv-resenas .r26b-topics { margin: 0 0 var(--r26-s6); }
body.pv-site #pv-resenas .r26b-topics__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-bottom: var(--r26-s3);
}
body.pv-site #pv-resenas .r26 .r26b-topics__title {
  margin: 0;
  font: 700 0.75rem/1.4 var(--r26-sans) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--r26-rust);
}
body.pv-site #pv-resenas .r26b-topics__note { font-size: 0.8125rem; line-height: 1.45; color: var(--r26-muted); }
body.pv-site #pv-resenas .r26b-topics__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r26-s2);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Registered so the fill can glide from 0 to its share when the chips
   arrive on screen (JS adds .r26b-anim, then .is-in). */
@property --r26b-fill {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
body.pv-site #pv-resenas .r26b-topic {
  --r26b-tone: var(--r26b-dot, var(--r26-rust));
  --r26b-fill: var(--r26b-share, 0%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid color-mix(in oklab, var(--r26b-tone) 22%, var(--r26-line));
  background:
    linear-gradient(90deg,
      color-mix(in oklab, var(--r26b-tone) 16%, var(--r26-paper)) 0 var(--r26b-fill),
      var(--r26-paper) var(--r26b-fill) 100%);
  transition: --r26b-fill 0.9s var(--r26-ease);
  font: 600 0.875rem/1.2 var(--r26-sans);
  color: var(--r26-ink);
}
/* Every tone at the same lightness, so a pale accord (citrus yellow, fresh
   cyan) fills as visibly as a dark one (marine blue). */
@supports (color: oklch(from red l c h)) {
  body.pv-site #pv-resenas .r26b-topic {
    border-color: oklch(from var(--r26b-tone) 0.84 min(c, 0.06) h);
    background:
      linear-gradient(90deg,
        oklch(from var(--r26b-tone) 0.92 min(c, 0.065) h) 0 var(--r26b-fill),
        var(--r26-paper) var(--r26b-fill) 100%);
  }
}
body.pv-site #pv-resenas .r26b-topic.has-dot::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--r26b-dot);
  box-shadow: inset 0 0 0 1px rgba(43, 35, 32, 0.14);
}
body.pv-site #pv-resenas .r26b-topic__count {
  font: 500 1rem/1 var(--r26-serif);
  color: var(--r26-muted);
  font-variant-numeric: lining-nums tabular-nums;
}
body.pv-site #pv-resenas .r26b-anim:not(.is-in) .r26b-topic { --r26b-fill: 0%; }
body.pv-site #pv-resenas .r26b-anim .r26b-topic:nth-child(2) { transition-delay: 40ms; }
body.pv-site #pv-resenas .r26b-anim .r26b-topic:nth-child(3) { transition-delay: 80ms; }
body.pv-site #pv-resenas .r26b-anim .r26b-topic:nth-child(4) { transition-delay: 120ms; }
body.pv-site #pv-resenas .r26b-anim .r26b-topic:nth-child(n+5) { transition-delay: 160ms; }
/* The first chip is the one people talk about most: a touch more weight. */
body.pv-site #pv-resenas .r26b-topic:first-child { border-color: color-mix(in oklab, var(--r26b-tone) 40%, var(--r26-line)); }
body.pv-site #pv-resenas .r26b-topic:first-child .r26b-topic__count { color: var(--r26-ink); }

/* ── Reseña destacada ──────────────────────────────────────────────────── */
body.pv-site #pv-resenas .r26 .r26b-featured {
  position: relative;
  isolation: isolate;
  margin: 0 0 var(--r26-s6);
  padding: clamp(24px, 3.6vw, 44px) clamp(22px, 3.6vw, 48px) clamp(22px, 3vw, 34px);
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--r26b-bottle) 34%, var(--r26-line));
  border-radius: 0;
  /* The bottle's own colour, as the hero draws it: strongest where the
     quote starts, fading into the page's ivory. */
  background:
    radial-gradient(130% 120% at 0% 0%,
      color-mix(in oklab, var(--r26b-bottle) 40%, var(--r26-plate-soft)) 0%,
      color-mix(in oklab, var(--r26b-bottle) 12%, var(--r26-plate-soft)) 55%,
      var(--r26-plate-soft) 100%);
  box-shadow: none;
}
/* Any bottle, light or dark, becomes a light tint of its own hue: lightness
   is fixed and chroma capped, so the ink stays legible on it. Browsers
   without relative colours keep the mix above. */
@supports (color: oklch(from red l c h)) {
  body.pv-site #pv-resenas .r26 .r26b-featured {
    border-color: oklch(from var(--r26b-bottle) 0.86 min(c, 0.05) h);
    background:
      radial-gradient(130% 120% at 0% 0%,
        oklch(from var(--r26b-bottle) 0.915 min(c, 0.055) h) 0%,
        oklch(from var(--r26b-bottle) 0.96 min(c, 0.025) h) 55%,
        var(--r26-plate-soft) 100%);
  }
  body.pv-site #pv-resenas .r26 .r26b-featured::before { color: oklch(from var(--r26b-bottle) 0.42 min(c, 0.09) h); }
  body.pv-site #pv-resenas .r26b-featured__by { border-top-color: oklch(from var(--r26b-bottle) 0.84 min(c, 0.05) h); }
}
body.pv-site #pv-resenas .r26 .r26b-featured::before {
  content: "\201C";
  position: absolute;
  z-index: -1;
  top: -0.06em;
  right: clamp(10px, 2.4vw, 28px);
  font: 500 clamp(9rem, 6rem + 9vw, 14rem)/1 var(--r26-serif);
  color: color-mix(in oklab, var(--r26b-bottle) 55%, var(--r26-rust-deep));
  opacity: 0.16;
  pointer-events: none;
  user-select: none;
}
body.pv-site #pv-resenas .r26b-featured__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  font: 700 0.75rem/1.4 var(--r26-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--r26-rust);
}
body.pv-site #pv-resenas .r26b-featured__kicker span {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.8125rem;
  color: var(--r26-muted);
}
body.pv-site #pv-resenas .r26b-featured__quote { margin: var(--r26-s4) 0 0; padding: 0; border: 0; quotes: none; }
body.pv-site #pv-resenas .r26b-featured__lead {
  max-width: 34ch;
  margin: 0 0 var(--r26-s4) !important;
  font: 500 clamp(1.5rem, 1.15rem + 1.1vw, 2.05rem)/1.22 var(--r26-serif);
  font-family: var(--r26-serif) !important;
  letter-spacing: -0.012em;
  color: var(--r26-ink);
  text-wrap: balance;
}
body.pv-site #pv-resenas .r26 .r26b-featured__text {
  margin: 0;
  max-width: 64ch;
  color: var(--r26b-voice-ink);
}
body.pv-site #pv-resenas .r26b-featured .r26-readmore { margin-left: 0; }
body.pv-site #pv-resenas .r26b-featured__by {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: var(--r26-s4);
  padding-top: var(--r26-s4);
  border-top: 1px solid color-mix(in oklab, var(--r26b-bottle) 30%, var(--r26-line));
}
body.pv-site #pv-resenas .r26b-featured__by .r26-avatar { width: 52px; height: 52px; font-size: 1.4rem; }
body.pv-site #pv-resenas .r26b-featured__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.pv-site #pv-resenas .r26b-featured__name { --pv-link: var(--r26-ink); font: 700 1rem/1.3 var(--r26-sans); color: var(--r26-ink); }
body.pv-site #pv-resenas .r26b-featured__meta { font-size: 0.8125rem; color: var(--r26-muted); }
body.pv-site #pv-resenas .r26b-featured__meta a { --pv-link: var(--r26-muted); }

/* ── composer: after the featured card, a band between hairlines rather
      than a second box (the empty state keeps its plate) ─────────────── */
body.pv-site #pv-resenas .r26b:not(.r26--empty) .r26-compose {
  padding: var(--r26-s5) 0;
  border: 0;
  border-block: 1px solid var(--r26-line);
  background: none;
}
body.pv-site #pv-resenas .r26b:not(.r26--empty) .r26-compose + .r26-toolbar { margin-top: var(--r26-s5); }

/* ── voices ────────────────────────────────────────────────────────────── */
body.pv-site #pv-resenas .r26-avatar--photo { object-fit: cover; background: var(--r26-plate); }
body.pv-site #pv-resenas .r26b .r26-review__name { font-size: 1rem; }
body.pv-site #pv-resenas .r26b .r26b-voice .r26-review__meta {
  margin-top: 3px;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body.pv-site #pv-resenas .r26b .r26b-voice > .r26-review__inner > .r26-review__text {
  margin-top: var(--r26-s3);
  color: var(--r26b-voice-ink);
}
/* The hanging quote mark sits in the gutter under the monogram. */
body.pv-site #pv-resenas .r26b .r26b-voice > .r26-review__inner > .r26-review__text::before {
  content: "\201C";
  position: absolute;
  top: -0.08em;
  left: calc(-1 * var(--r26-indent) + 9px);
  font: 500 2.75rem/1 var(--r26-serif);
  color: var(--r26-rust);
  opacity: 0.22;
  pointer-events: none;
}
body.pv-site #pv-resenas .r26b .r26b-voice.is-reply > .r26-review__inner > .r26-review__text::before { content: none; }

/* What each review mentions: the "Lo más comentado" chip, smaller and
   without a count (same border, tint and colour dot). */
body.pv-site #pv-resenas .r26b-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--r26-s3) 0 0 var(--r26-indent);
  padding: 0;
  list-style: none;
}
body.pv-site #pv-resenas .r26b-featured .r26b-tags { margin-left: 0; }
body.pv-site #pv-resenas .r26b-tag {
  --r26b-tone: var(--r26b-dot, var(--r26-rust));
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  margin: 0;
  padding: 0 9px;
  border: 1px solid color-mix(in oklab, var(--r26b-tone) 22%, var(--r26-line));
  background: color-mix(in oklab, var(--r26b-tone) 12%, var(--r26-paper));
  font: 600 0.75rem/1.2 var(--r26-sans);
  color: var(--r26-ink);
}
@supports (color: oklch(from red l c h)) {
  body.pv-site #pv-resenas .r26b-tag {
    border-color: oklch(from var(--r26b-tone) 0.84 min(c, 0.06) h);
    background: oklch(from var(--r26b-tone) 0.93 min(c, 0.058) h);
  }
}
body.pv-site #pv-resenas .r26b-tag.has-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--r26b-dot);
  box-shadow: inset 0 0 0 1px rgba(43, 35, 32, 0.14);
}
body.pv-site #pv-resenas .r26b .r26b-tags + .r26-review__take { margin-top: var(--r26-s3); }

/* A visible "Responder". */
body.pv-site #pv-resenas .r26b .r26b-reply a {
  --pv-link: var(--r26-rust);
  gap: 8px;
  font: 700 0.75rem/1.2 var(--r26-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
body.pv-site #pv-resenas .r26b .r26b-reply a::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.pv-site #pv-resenas .r26b .r26b-reply a:hover { --pv-link: var(--r26-ink); }
body.pv-site #pv-resenas .r26b .r26b-reply a::before { transition: transform 0.25s var(--r26-ease); }
body.pv-site #pv-resenas .r26b .r26b-reply a:hover::before { transform: translateX(-3px); }

/* Replies: indented under the voice they answer, on a thread line. */
body.pv-site #pv-resenas .r26b .r26-review .children {
  position: relative;
  margin: 0 0 var(--r26-s4) var(--r26-indent);
  padding: 0 0 0 var(--r26-s4);
  border-left: 1px solid var(--r26-line-strong);
}
body.pv-site #pv-resenas .r26b .r26-review .children > .r26-review { border-top: 0; border-bottom: 0; }
body.pv-site #pv-resenas .r26b .r26-review .children .r26-review__inner { padding: var(--r26-s3) 0; }
body.pv-site #pv-resenas .r26b .r26-review .children .r26-avatar { width: 34px; height: 34px; font-size: 1rem; }
body.pv-site #pv-resenas .r26b .r26-review .children .r26-review__head { grid-template-columns: 34px minmax(0, 1fr) auto; }
body.pv-site #pv-resenas .r26b .r26-review .children { --r26-indent: 48px; }

/* ── phones ────────────────────────────────────────────────────────────── */
@media (max-width: 599.98px) {
  body.pv-site #pv-resenas .r26b-topic { min-height: 36px; padding: 0 12px; font-size: 0.8125rem; gap: 8px; }
  body.pv-site #pv-resenas .r26 .r26b-featured { margin-inline: -4px; }
  body.pv-site #pv-resenas .r26b-featured__lead { font-size: 1.375rem; line-height: 1.25; }
  body.pv-site #pv-resenas .r26b-featured__by .r26-avatar { width: 44px; height: 44px; font-size: 1.2rem; }
  /* A narrow gutter on phones, just wide enough for a smaller quote mark. */
  body.pv-site #pv-resenas .r26b .r26b-voice { --r26-indent: 22px; }
  body.pv-site #pv-resenas .r26b .r26b-voice > .r26-review__inner > .r26-review__text::before { left: -24px; top: -0.02em; font-size: 2rem; }
  body.pv-site #pv-resenas .r26b .r26-review .children { margin-left: 12px; padding-left: 14px; }
  body.pv-site #pv-resenas .r26b .r26-review .children { --r26-indent: 0px; }
}

@media (prefers-reduced-motion: reduce) {
  body.pv-site #pv-resenas .r26b-topic { transition: none; }
  body.pv-site #pv-resenas .r26b-anim:not(.is-in) .r26b-topic { --r26b-fill: var(--r26b-share, 0%); }
}