/* ==================================================================
   PANTALLA DE RESULTADOS — rediseño editorial completo
   Reutiliza la paleta cálida ya definida en css/editorial.css
   (--ed-*), la tipografía de la web y las clases .reveal/.reveal-item
   ya existentes (mismo lenguaje visual que la home). Los datos que
   aparecen aquí siguen viniendo tal cual de js/recommend.js — este
   archivo solo define el aspecto.
   ================================================================== */

.results-overlay{
  position:fixed; inset:0; z-index:200;
  background:var(--ed-cream, #F8F3E8);
  overflow-y:auto;
  animation:overlayFadeIn .5s var(--ed-ease, cubic-bezier(.22,.61,.36,1)) both;
}
.results-overlay[hidden]{ display:none; }
.results-overlay-inner{
  min-height:100%; display:flex; flex-direction:column;
  animation:overlayRiseIn .55s var(--ed-ease, cubic-bezier(.22,.61,.36,1)) .06s both;
}
@media (prefers-reduced-motion: reduce){
  .results-overlay, .results-overlay-inner{ animation:none !important; }
}

.results-top{
  display:flex; align-items:center; gap:12px;
  height:68px; flex-shrink:0;
  border-bottom:1px solid var(--ed-cream-line, #E4D9C2);
  position:relative; z-index:5;
}
.results-top .quiz-icon-btn{ border-color:var(--ed-cream-line, #E4D9C2); color:var(--ed-charcoal, #1C1A15); }
.results-top .quiz-icon-btn:hover{ border-color:var(--ed-forest, #22402F); color:var(--ed-forest, #22402F); }

.results-body{ padding:0 0 90px; max-width:920px; }

/* elemento reutilizable en toda la página: mini-etiqueta con punto dorado */
.rs-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ed-gold, #B08D4F); margin-bottom:10px;
}
.rs-eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--ed-gold, #B08D4F); flex-shrink:0; }

.rs-h2{
  font-size:clamp(24px, 3.6vw, 32px); color:var(--ed-charcoal, #1C1A15);
  line-height:1.2;
}

.demo-note{
  width:calc(100% - 40px); max-width:880px; margin:0 auto 8px; padding:12px 16px;
  border:1px dashed var(--ed-cream-line, #E4D9C2); border-radius:var(--radius-s);
  font-size:12.5px; color:var(--ed-charcoal-soft, #57503f);
  display:flex; gap:9px; align-items:flex-start;
  background:var(--ed-cream-deep, #F1E9D8);
}
.demo-note svg{ width:15px; height:15px; color:var(--ed-gold, #B08D4F); flex-shrink:0; margin-top:2px; }

.rs-section{ padding:64px 20px 0; max-width:880px; margin:0 auto; }
.rs-section-head{ max-width:560px; margin-bottom:32px; }
.rs-section-head p{ font-size:14px; line-height:1.55; color:var(--ed-charcoal-soft, #57503f); margin-top:10px; }
.rs-section-head p strong{ color:var(--ed-charcoal, #1C1A15); }

/* ============================================================
   1. HERO DEL RESULTADO — composición editorial asimétrica
   ============================================================ */
.rs-hero{
  position:relative;
  display:grid; grid-template-columns:1fr; gap:28px;
  padding:44px 20px 40px;
  max-width:960px; margin:0 auto;
  overflow:hidden;
}
@media (min-width:760px){
  .rs-hero{ grid-template-columns:0.85fr 1.15fr; align-items:center; gap:12px; padding-top:56px; }
}

.rs-hero-decor{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.rs-hero-halo{
  position:absolute; left:18%; top:38%; width:min(60vw,420px); height:min(60vw,420px);
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, var(--ed-sand, #C9A876) 0%, transparent 68%);
  opacity:.4; filter:blur(40px);
}
@media (min-width:760px){ .rs-hero-halo{ left:26%; } }
.rs-hero-ring{
  position:absolute; left:18%; top:38%; width:min(46vw,320px); height:min(46vw,320px);
  transform:translate(-50%,-50%); border-radius:50%;
  border:1px solid var(--ed-forest, #22402F); opacity:.14;
}
@media (min-width:760px){ .rs-hero-ring{ left:26%; } }
.rs-hero-dot{ position:absolute; width:6px; height:6px; border-radius:50%; background:var(--ed-gold, #B08D4F); }
.rs-hero-dot--a{ left:8%; top:18%; opacity:.5; }
.rs-hero-dot--b{ right:10%; bottom:14%; opacity:.4; }

.rs-hero-visual{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  min-height:220px;
}
.rs-hero-bottle{
  width:min(70vw, 360px); height:auto;
  filter:drop-shadow(0 26px 34px rgba(20,42,30,.28));
  animation:rsBottleFloat 6s ease-in-out infinite;
}
@keyframes rsBottleFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.rs-hero-thumb-wrap{ width:170px; height:170px; }
.rs-hero-thumb-wrap > div{ width:100%; height:100%; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.rs-hero-thumb-wrap svg{ width:44%; height:44%; }

.rs-hero-copy{ position:relative; z-index:1; }
.rs-hero-kicker{
  font-family:var(--ed-font-serif, var(--font-display)); font-style:italic;
  font-size:18px; color:var(--ed-charcoal-soft, #57503f); margin:0 0 4px;
}
.rs-hero-name{
  font-size:clamp(30px, 5.2vw, 48px); line-height:1.08; color:var(--ed-charcoal, #1C1A15);
  margin:0 0 6px;
}
.rs-hero-brand{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ed-charcoal-soft, #57503f); margin-bottom:22px;
}

.rs-hero-meta{ display:flex; align-items:center; gap:18px; margin-bottom:24px; }
.rs-hero-meta-item{ display:flex; flex-direction:column; }
.rs-hero-meta-num{ font-family:var(--font-display); font-weight:700; font-size:26px; color:var(--ed-forest, #22402F); }
.rs-hero-meta-lbl{ font-size:12px; color:var(--ed-charcoal-soft, #57503f); }
.rs-hero-meta-div{ width:1px; height:34px; background:var(--ed-cream-line, #E4D9C2); }

.rs-hero-price-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:20px; border-top:1px solid var(--ed-cream-line, #E4D9C2);
}
.rs-hero-price{ font-family:var(--font-mono); font-size:24px; font-weight:600; color:var(--ed-charcoal, #1C1A15); }
.rs-hero-price-sub{ font-size:11.5px; color:var(--ed-charcoal-soft, #57503f); margin-top:2px; }
.rs-hero-btn{
  background:var(--ed-sage, #7C9483); border-color:var(--ed-sage, #7C9483); display:inline-flex; align-items:center; gap:10px;
  padding:18px 30px; font-size:16.5px; font-weight:700; letter-spacing:.01em;
  box-shadow:0 12px 26px -10px rgba(124,148,131,.55), 0 0 0 0 rgba(176,141,79,.35);
  animation:rsBtnPulse 2.6s ease-in-out infinite;
  transition:transform .25s var(--ed-ease, ease), background-color .25s ease, box-shadow .25s var(--ed-ease, ease);
}
.rs-hero-btn:hover{
  background:var(--ed-forest, #22402F);
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 20px 34px -12px rgba(20,42,30,.55);
  animation-play-state:paused;
}
.rs-hero-btn img{ width:34px; height:34px; object-fit:contain; flex:0 0 34px; }

@keyframes rsBtnPulse{
  0%,100%{ box-shadow:0 12px 26px -10px rgba(124,148,131,.55), 0 0 0 0 rgba(176,141,79,.35); }
  50%{ box-shadow:0 16px 32px -10px rgba(124,148,131,.65), 0 0 0 9px rgba(176,141,79,0); }
}
@media (prefers-reduced-motion: reduce){
  .rs-hero-btn{ animation:none !important; }
}

/* ============================================================
   2. TIRA DECORATIVA — atraviesa la página, movimiento lento
   ============================================================ */
.rs-marquee{
  position:relative;
  margin:36px calc(50% - 50vw) 0;
  overflow:hidden;
  background:var(--ed-forest, #22402F);
  padding:13px 0;
  transform:rotate(-1deg);
}
.rs-marquee-track{
  display:flex; align-items:center; gap:14px; width:max-content; white-space:nowrap;
  animation:rsMarquee 32s linear infinite;
}
.rs-marquee-track span{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ed-sand, #C9A876);
}
.rs-marquee-track .rs-marquee-dot{ color:var(--ed-gold, #B08D4F); font-size:11px; }
@keyframes rsMarquee{ from{ transform:translateX(0%); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .rs-marquee-track{ animation-duration:120s; } }

/* ============================================================
   3. POR QUÉ ESTA ES TU MEJOR OPCIÓN — tarjetas asimétricas
   ============================================================ */
.rs-reasons-grid{
  display:grid; grid-template-columns:1fr; gap:14px;
}
@media (min-width:640px){
  .rs-reasons-grid{ grid-template-columns:repeat(2, 1fr); }
  .rs-reason-card.is-lead{ grid-column:1 / -1; }
}
.rs-reason-card{
  background:var(--ed-cream-deep, #F1E9D8);
  border:1px solid var(--ed-cream-line, #E4D9C2);
  border-radius:var(--ed-radius-m, 18px);
  padding:22px;
  display:flex; align-items:flex-start; gap:14px;
  transition:transform .3s var(--ed-ease, ease), box-shadow .3s var(--ed-ease, ease), border-color .3s var(--ed-ease, ease);
}
.rs-reason-card:hover{
  transform:translateY(-3px);
  border-color:var(--ed-sand, #C9A876);
  box-shadow:0 18px 30px -20px rgba(20,42,30,.28);
}
.rs-reason-card.is-lead{
  background:linear-gradient(135deg, var(--ed-forest, #22402F), var(--ed-forest-deep, #142A1E));
  border-color:var(--ed-forest, #22402F);
}
.rs-reason-card.is-lead p{ color:#F2EFE6; font-size:16px; }
.rs-reason-card.is-lead .rs-reason-icon{ background:rgba(255,255,255,.12); color:var(--ed-sand, #C9A876); }
.rs-reason-card p{ margin:0; font-size:14.5px; color:var(--ed-charcoal, #1C1A15); line-height:1.5; }
.rs-reason-icon{
  flex-shrink:0; width:38px; height:38px; border-radius:50%;
  background:var(--ed-forest-tint, #E4EBE3); color:var(--ed-forest, #22402F);
  display:flex; align-items:center; justify-content:center;
}
.rs-reason-icon svg{ width:18px; height:18px; }

/* ============================================================
   4. TU PERFIL — chips de respuestas
   ============================================================ */
.rs-section--profile{ background:var(--ed-cream-deep, #F1E9D8); border-radius:var(--ed-radius-l, 28px); padding-bottom:44px; margin-top:64px; }
.rs-chips-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:640px){ .rs-chips-grid{ grid-template-columns:repeat(2, 1fr); } }

.rs-chip{
  display:flex; align-items:center; gap:12px;
  background:var(--ed-cream, #F8F3E8);
  border:1px solid var(--ed-cream-line, #E4D9C2);
  border-radius:var(--ed-radius-m, 18px);
  padding:14px 16px;
}
.rs-chip-icon{ font-size:19px; flex-shrink:0; width:36px; height:36px; border-radius:50%; background:var(--ed-forest-tint, #E4EBE3); display:flex; align-items:center; justify-content:center; }
.rs-chip-body{ display:flex; flex-direction:column; min-width:0; }
.rs-chip-group{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ed-gold, #B08D4F); }
.rs-chip-text{ font-size:14px; color:var(--ed-charcoal, #1C1A15); font-weight:500; }

/* ============================================================
   5. COMPARATIVA — barras, no tabla
   ============================================================ */
.rs-cmp-list{ display:grid; gap:12px; }
.rs-cmp-row{
  position:relative;
  display:grid; grid-template-columns:1fr auto; gap:10px 18px; align-items:center;
  background:var(--ed-cream, #F8F3E8);
  border:1px solid var(--ed-cream-line, #E4D9C2);
  border-radius:var(--ed-radius-m, 18px);
  padding:16px 18px;
}
@media (min-width:640px){
  .rs-cmp-row{ grid-template-columns:1fr 1.3fr auto; align-items:center; }
}
.rs-cmp-row.is-top{
  background:var(--ed-forest-tint, #E4EBE3);
  border-color:var(--ed-forest, #22402F);
}
.rs-cmp-name-col{ display:flex; align-items:center; gap:12px; position:relative; }
.rs-cmp-badge{
  position:absolute; top:-30px; left:0;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  background:var(--ed-forest, #22402F); color:#F2EFE6;
  padding:4px 10px; border-radius:100px;
}
.rs-cmp-thumb{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rs-cmp-thumb svg{ width:60%; height:60%; }
.rs-product-thumb-photo{ overflow:hidden; background:transparent !important; }
.rs-product-thumb-photo img{ width:100%; height:100%; object-fit:contain; display:block; }
.rs-cmp-name{ font-size:14px; font-weight:600; color:var(--ed-charcoal, #1C1A15); }
.rs-cmp-brand{ font-size:11.5px; color:var(--ed-charcoal-soft, #57503f); }

.rs-cmp-bar-col{ grid-column:1 / -1; }
@media (min-width:640px){ .rs-cmp-bar-col{ grid-column:auto; } }
.rs-cmp-bar-track{ height:7px; border-radius:100px; background:var(--ed-cream-line, #E4D9C2); overflow:hidden; }
.rs-cmp-bar-fill{
  height:100%; width:0%; border-radius:100px;
  background:linear-gradient(90deg, var(--ed-sand, #C9A876), var(--ed-gold, #B08D4F));
  transition:width 1s var(--ed-ease, cubic-bezier(.22,.61,.36,1));
}
.rs-cmp-row.is-visible .rs-cmp-bar-fill{ width:var(--bar-w, 0%); }
.rs-cmp-row.is-top .rs-cmp-bar-fill{ background:linear-gradient(90deg, var(--ed-forest, #22402F), var(--ed-forest-deep, #142A1E)); }
.rs-cmp-bar-lbl{ font-size:11px; color:var(--ed-charcoal-soft, #57503f); margin-top:4px; display:block; }

.rs-cmp-score-col{ text-align:right; white-space:nowrap; }
.rs-cmp-score{ font-family:var(--font-mono); font-size:18px; font-weight:600; color:var(--ed-charcoal, #1C1A15); }
.rs-cmp-score-lbl{ font-size:11px; color:var(--ed-charcoal-soft, #57503f); }

/* ============================================================
   6. PUNTUACIÓN FINAL
   ============================================================ */
.rs-section--score{ text-align:center; }
.rs-score-block{ max-width:520px; margin:0 auto; }
.rs-score-block .rs-eyebrow{ justify-content:center; }
.rs-score-big{
  font-family:var(--font-display); font-weight:700; color:var(--ed-forest, #22402F);
  line-height:1;
}
.rs-score-num{ font-size:clamp(56px, 11vw, 84px); }
.rs-score-max{ font-size:clamp(22px, 4vw, 30px); color:var(--ed-charcoal-soft, #57503f); font-weight:500; }
.rs-score-caption{ font-size:13.5px; color:var(--ed-charcoal-soft, #57503f); margin:6px 0 36px; }

.rs-score-breakdown{ display:grid; gap:16px; text-align:left; }
.rs-score-row{ display:grid; grid-template-columns:130px 1fr 40px; align-items:center; gap:14px; }
.rs-score-row-lbl{ font-size:13px; color:var(--ed-charcoal, #1C1A15); }
.rs-score-row-track{ height:6px; border-radius:100px; background:var(--ed-cream-line, #E4D9C2); overflow:hidden; }
.rs-score-row-fill{
  height:100%; width:0%; border-radius:100px;
  background:var(--ed-gold, #B08D4F);
  transition:width 1s var(--ed-ease, cubic-bezier(.22,.61,.36,1));
}
.rs-score-row.is-visible .rs-score-row-fill,
.rs-score-block.is-visible .rs-score-row-fill{ width:var(--bar-w, 0%); }
.rs-score-row-num{ font-family:var(--font-mono); font-size:13px; text-align:right; color:var(--ed-charcoal-soft, #57503f); }

@media (max-width:480px){
  .rs-score-row{ grid-template-columns:1fr; gap:6px; }
  .rs-score-row-num{ text-align:left; }
}

/* ============================================================
   7. CTA FINAL
   ============================================================ */
.rs-cta{
  text-align:center; max-width:600px; margin:80px auto 0; padding:0 20px;
}
.rs-cta .rs-eyebrow{ justify-content:center; }
.rs-cta-h2{ font-size:clamp(24px, 4vw, 32px); color:var(--ed-charcoal, #1C1A15); margin-bottom:10px; }
.rs-cta-sub{ font-size:15px; color:var(--ed-charcoal-soft, #57503f); margin-bottom:28px; }
.rs-cta-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:18px; }
.rs-cta-actions .btn{ min-width:200px; }
.rs-cta-actions .btn-primary{
  background:var(--ed-forest, #22402F); border-color:var(--ed-forest, #22402F);
  transition:transform .25s var(--ed-ease, ease), background-color .25s ease;
}
.rs-cta-actions .btn-primary:hover{ background:var(--ed-forest-deep, #142A1E); transform:translateY(-2px); }
.rs-cta-actions .btn-secondary{ border-color:var(--ed-cream-line, #E4D9C2); color:var(--ed-charcoal, #1C1A15); }
.rs-cta-actions .btn-secondary:hover{ border-color:var(--ed-forest, #22402F); color:var(--ed-forest, #22402F); }
.rs-cta-link{
  background:none; border:none; padding:6px;
  font-size:13px; color:var(--ed-charcoal-soft, #57503f); text-decoration:underline;
  text-underline-offset:3px; cursor:pointer;
}
.rs-cta-link:hover{ color:var(--ed-forest, #22402F); }

/* ---------------- Comparativa completa (pantalla secundaria) ---------------- */
.compare-list{ display:grid; gap:12px; width:calc(100% - 40px); max-width:880px; margin:0 auto; }
.compare-row{
  display:grid; grid-template-columns:44px 1fr auto; gap:14px; align-items:center;
  border:1px solid var(--ed-cream-line, #E4D9C2); border-radius:var(--ed-radius-m, 18px);
  background:var(--ed-cream-deep, #F1E9D8); padding:14px 16px;
}
.compare-thumb{ width:40px; height:40px; border-radius:9px; display:flex; align-items:center; justify-content:center; }
.compare-thumb svg{ width:60%; height:60%; }
.compare-name{ font-size:14.5px; font-weight:600; color:var(--ed-charcoal, #1C1A15); }
.compare-meta{ font-size:12px; color:var(--ed-charcoal-soft, #57503f); margin-top:2px; }
.compare-score{
  font-family:var(--font-mono); font-weight:600; font-size:13.5px; color:var(--ed-forest, #22402F);
  background:var(--ed-forest-tint, #E4EBE3); border-radius:8px; padding:5px 9px; white-space:nowrap;
}
.compare-price-col{ text-align:right; }
.compare-price{ font-family:var(--font-mono); font-size:15.5px; font-weight:600; color:var(--ed-charcoal, #1C1A15); }
.compare-price-sub{ font-size:11px; color:var(--ed-charcoal-soft, #57503f); }

.results-kicker{
  font-family:var(--font-mono); font-size:12.5px; color:var(--ed-gold, #B08D4F);
  text-transform:uppercase; letter-spacing:.05em;
  width:calc(100% - 40px); max-width:880px; margin:32px auto 6px;
}
.results-h1{ font-size:clamp(24px,4vw,32px); width:calc(100% - 40px); max-width:880px; margin:0 auto 28px; color:var(--ed-charcoal, #1C1A15); }
.results-actions{ display:flex; flex-direction:column; gap:12px; width:calc(100% - 40px); max-width:880px; margin:30px auto 0; }
.results-actions .row{ display:flex; gap:12px; flex-wrap:wrap; }
.results-actions .btn{ flex:1; min-width:170px; }

@media (max-width:520px){
  .compare-row{ grid-template-columns:38px 1fr; }
  .compare-price-col{ grid-column:2 / 3; text-align:left; margin-top:6px; }
}