/* ==================================================================
   COMPARADOR DE CREATINA — overlay a pantalla completa
   Reutiliza las variables definidas en css/styles.css (misma paleta,
   tipografías y radios). No redefine tokens, solo los usa.
   ================================================================== */

.quiz-overlay,
.analysis-overlay{
  position:fixed; inset:0; z-index:200;
  background:var(--paper);
  overflow-y:auto;
  animation:overlayFadeIn .5s var(--ed-ease, cubic-bezier(.22,.61,.36,1)) both;
}
.quiz-overlay[hidden],
.analysis-overlay[hidden]{ display:none; }

.quiz-overlay-inner,
.analysis-inner{
  animation:overlayRiseIn .55s var(--ed-ease, cubic-bezier(.22,.61,.36,1)) .06s both;
}

@keyframes overlayFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes overlayRiseIn{
  from{ opacity:0; transform:translateY(14px) scale(.99); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .quiz-overlay, .analysis-overlay, .quiz-overlay-inner, .analysis-inner{ animation:none !important; }
}

/* ---------------- Quiz top bar ---------------- */
.quiz-overlay-inner{ min-height:100%; display:flex; flex-direction:column; }
.quiz-top{
  display:flex; align-items:center; gap:14px;
  height:68px; flex-shrink:0;
  border-bottom:1px solid var(--line);
}
.quiz-icon-btn{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:8px; flex-shrink:0;
  background:transparent; border:1px solid var(--line-strong); color:var(--ink);
  transition:border-color .15s ease, color .15s ease;
}
.quiz-icon-btn svg{ width:16px; height:16px; }
.quiz-icon-btn:hover{ border-color:var(--ink); }

.quiz-rail{ flex:1; height:6px; background:var(--line); border-radius:100px; overflow:hidden; }
.quiz-rail-fill{
  height:100%; width:0%; background:var(--cobalt); border-radius:100px;
  transition:width .32s cubic-bezier(.22,.61,.36,1);
}
.quiz-step-lbl{ font-size:12.5px; color:var(--ink-faint); white-space:nowrap; }

/* ---------------- Quiz question body ---------------- */
.quiz-body{
  flex:1; display:flex; flex-direction:column; justify-content:center;
  max-width:640px; padding-top:36px; padding-bottom:48px;
}
.quiz-question{ animation:quizIn .32s cubic-bezier(.22,.61,.36,1) both; }
@keyframes quizIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }

.quiz-q-eyebrow{
  font-family:var(--font-mono); font-size:12.5px; color:var(--cobalt);
  text-transform:uppercase; letter-spacing:0.05em; margin-bottom:10px;
}
.quiz-q{ font-size:clamp(23px,4.6vw,32px); margin-bottom:28px; }

.quiz-options{ display:grid; gap:12px; }
.quiz-option{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  border:1.5px solid var(--line-strong); border-radius:var(--radius-m);
  padding:17px 18px;
  background:var(--paper-raised);
  font-family:inherit; font-size:15.5px; font-weight:500; color:var(--ink);
  text-align:left; width:100%;
  opacity:0; transform:translateY(8px);
  animation:quizOptIn .28s cubic-bezier(.22,.61,.36,1) both;
  transition:border-color .2s ease, background-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.quiz-options .quiz-option:nth-child(1){ animation-delay:.02s; }
.quiz-options .quiz-option:nth-child(2){ animation-delay:.05s; }
.quiz-options .quiz-option:nth-child(3){ animation-delay:.08s; }
.quiz-options .quiz-option:nth-child(4){ animation-delay:.11s; }
.quiz-options .quiz-option:nth-child(5){ animation-delay:.14s; }
.quiz-options .quiz-option:nth-child(6){ animation-delay:.17s; }
@keyframes quizOptIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
.quiz-option:hover{ border-color:var(--cobalt); background:var(--cobalt-tint); transform:translateY(-1px); box-shadow:0 8px 18px -12px rgba(29,43,107,.35); }
.quiz-option:active{ transform:scale(0.995); }
.quiz-option.is-selected{ border-color:var(--cobalt); background:var(--cobalt-tint); }
.quiz-option .opt-check{
  width:20px; height:20px; border-radius:50%; border:1.5px solid var(--line-strong); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition:background-color .18s ease, border-color .18s ease, transform .22s cubic-bezier(.34,1.56,.64,1);
}
.quiz-option.is-selected .opt-check{ background:var(--cobalt); border-color:var(--cobalt); transform:scale(1.08); }
.quiz-option.is-selected .opt-check svg{ width:12px; height:12px; }

/* opción "próximamente" dentro de "¿Qué suplemento buscas?" */
.quiz-option.is-disabled{ opacity:.45; cursor:not-allowed; pointer-events:none; }
.quiz-option.is-disabled small{ font-weight:400; color:var(--ink-faint); }

@media (prefers-reduced-motion: reduce){
  .quiz-option{ animation:none !important; opacity:1; transform:none; }
}

/* ==================================================================
   PASO 0 — "¿QUÉ SUPLEMENTO BUSCAS?"
   Pantalla de selección de categoría dentro del comparador. Usa la
   paleta cálida de la identidad editorial de la web (--ed-*) para
   sentirse parte del mismo sitio, con tarjetas grandes y visuales en
   vez de una lista de opciones tipo formulario.
   ================================================================== */

#quizBody.is-select{ max-width:1080px; }

.quiz-question--select{ width:100%; }

.qs-intro{
  text-align:center; max-width:640px; margin:0 auto clamp(32px, 5vw, 48px);
}
.qs-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ed-gold, #B08D4F); margin-bottom:14px;
}
.qs-eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--ed-gold, #B08D4F);
}
.qs-heading{
  font-family:var(--font-display); font-weight:700; color:var(--ed-charcoal, #1C1A15);
  font-size:clamp(28px, 4.6vw, 42px); line-height:1.15; margin:0 0 16px;
}
.qs-circle{ position:relative; display:inline-block; padding:0 2px; }
.qs-circle-svg{
  position:absolute; left:-12%; top:-32%; width:124%; height:170%;
  z-index:-1; pointer-events:none;
}
.qs-circle-svg path{ stroke:var(--ed-gold, #B08D4F); }
.qs-sub{ font-size:15.5px; color:var(--ed-charcoal-soft, #57503f); max-width:52ch; margin:0 auto; }

/* ---------------- Grid de tarjetas ---------------- */
.qs-grid{
  display:grid; grid-template-columns:1fr; gap:14px;
  margin-bottom:clamp(28px, 5vw, 44px);
}
@media (min-width:640px){ .qs-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .qs-grid{ grid-template-columns:repeat(3,1fr); gap:16px; } }

.qs-card{
  display:flex; align-items:flex-start; gap:14px; text-align:left; width:100%;
  background:var(--ed-cream-deep, #F1E9D8);
  border:1px solid var(--ed-cream-line, #E4D9C2);
  border-radius:var(--ed-radius-l, 28px);
  padding:20px;
  font-family:inherit;
  opacity:0; transform:translateY(12px);
  animation:qsCardIn .45s cubic-bezier(.22,.61,.36,1) both;
  transition:transform .3s var(--ed-ease, ease), box-shadow .3s var(--ed-ease, ease), border-color .3s var(--ed-ease, ease);
}
.qs-grid .qs-card:nth-child(1){ animation-delay:.03s; }
.qs-grid .qs-card:nth-child(2){ animation-delay:.07s; }
.qs-grid .qs-card:nth-child(3){ animation-delay:.11s; }
.qs-grid .qs-card:nth-child(4){ animation-delay:.15s; }
.qs-grid .qs-card:nth-child(5){ animation-delay:.19s; }
.qs-grid .qs-card:nth-child(6){ animation-delay:.23s; }
@keyframes qsCardIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } }

.qs-card-media{
  flex-shrink:0; width:78px; height:128px;
  display:flex; align-items:center; justify-content:center;
}
.qs-card-media img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block;
  filter:drop-shadow(0 12px 16px rgba(20,42,30,.18));
  transition:transform .4s var(--ed-ease, ease);
}

.qs-card-body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.qs-card-icon{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  border:1.5px solid var(--ed-gold, #B08D4F); color:var(--ed-gold, #B08D4F);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:12px;
}
.qs-card-icon svg{ width:19px; height:19px; }
.qs-card-name{
  font-family:var(--font-display); font-weight:600; font-size:18.5px; color:var(--ed-charcoal, #1C1A15);
  margin:0 0 4px;
}
.qs-card-desc{ font-size:13px; color:var(--ed-charcoal-soft, #57503f); margin:0 0 14px; }
.qs-card-cta{
  margin-top:auto; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ed-forest, #22402F);
}
.qs-card-cta svg{ width:13px; height:13px; transition:transform .25s var(--ed-ease, ease); }

.qs-badge{
  align-self:flex-start; margin-top:auto;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ed-charcoal-soft, #57503f);
  background:var(--ed-cream, #F8F3E8); border:1px solid var(--ed-cream-line, #E4D9C2);
  padding:5px 11px; border-radius:100px;
}

.qs-card.is-live{ cursor:pointer; }
.qs-card.is-live:hover,
.qs-card.is-live:focus-visible{
  transform:translateY(-4px);
  border-color:var(--ed-sand, #C9A876);
  box-shadow:0 20px 34px -22px rgba(20,42,30,.32);
}
.qs-card.is-live:hover .qs-card-media img{ transform:translateY(-3px) scale(1.03); }
.qs-card.is-live:hover .qs-card-cta svg{ transform:translateX(3px); }
.qs-card.is-soon{ opacity:.7; cursor:not-allowed; }

@media (prefers-reduced-motion: reduce){
  .qs-card{ animation:none !important; opacity:1; transform:none; }
}

/* ---------------- Banda "El cambio empieza eligiendo bien" ----------------
   Único elemento con texto en movimiento continuo, tal y como se pidió.
   Se sangra a todo el ancho de la pantalla aunque el contenido esté en
   un contenedor centrado (truco calc(50% - 50vw)). */
.qs-marquee{
  position:relative;
  margin:0 calc(50% - 50vw);
  overflow:hidden;
  background:var(--ed-forest, #22402F);
  padding:13px 0;
  transform:rotate(-1deg);
}
.qs-marquee-track{
  display:flex; align-items:center; gap:14px; width:max-content; white-space:nowrap;
  animation:qsMarquee 26s linear infinite;
}
.qs-marquee-track span{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ed-sand, #C9A876);
}
.qs-marquee-track .qs-marquee-dot{ color:var(--ed-gold, #B08D4F); font-size:11px; }

/* mueve el contenido de izquierda a derecha: como el track está
   duplicado dos veces, ir de -50% a 0% produce un bucle continuo sin
   salto visible */
@keyframes qsMarquee{
  from{ transform:translateX(-50%); }
  to{ transform:translateX(0%); }
}

@media (prefers-reduced-motion: reduce){
  .qs-marquee-track{ animation:none !important; }
}

/* ==================================================================
   PIEL VISUAL PREMIUM — SOLO CREATINA
   Todo lo de aquí abajo vive detrás de .quiz-overlay.is-creatina,
   que js/quiz.js solo activa mientras se muestra una pregunta del
   cuestionario de Creatina. El paso "¿Qué suplemento buscas?" y
   cualquier cuestionario futuro de otra categoría NO heredan nada de
   este bloque — siguen usando el aspecto base de arriba.
   ================================================================== */

/* ---------------- Fondo cálido + halos muy sutiles ---------------- */
.quiz-overlay.is-creatina{
  background:
    radial-gradient(1200px 800px at 82% -10%, var(--ed-cream-deep, #F1E9D8) 0%, transparent 60%),
    radial-gradient(1000px 700px at -10% 110%, var(--ed-forest-tint, #E4EBE3) 0%, transparent 55%),
    var(--ed-cream, #F8F3E8);
}

.quiz-decor{
  position:fixed; inset:0; z-index:0; overflow:hidden;
  pointer-events:none;
  opacity:0; transition:opacity .6s ease;
}
.quiz-overlay.is-creatina .quiz-decor{ opacity:1; }

.qd-halo{
  position:absolute; border-radius:50%; filter:blur(70px);
  will-change:transform;
}
.qd-halo--a{
  width:min(46vw,460px); height:min(46vw,460px);
  right:-10%; top:-12%;
  background:radial-gradient(circle, var(--ed-sand, #C9A876) 0%, transparent 70%);
  opacity:.35;
  animation:qdFloatA 26s ease-in-out infinite alternate;
}
.qd-halo--b{
  width:min(38vw,380px); height:min(38vw,380px);
  left:-8%; bottom:-10%;
  background:radial-gradient(circle, var(--ed-forest-tint, #E4EBE3) 0%, transparent 70%);
  opacity:.55;
  animation:qdFloatB 30s ease-in-out infinite alternate;
}
.qd-halo--c{
  width:min(24vw,240px); height:min(24vw,240px);
  left:38%; top:60%;
  background:radial-gradient(circle, var(--ed-gold, #B08D4F) 0%, transparent 70%);
  opacity:.14;
  animation:qdFloatC 22s ease-in-out infinite alternate;
}
@keyframes qdFloatA{ from{ transform:translate(0,0); } to{ transform:translate(-18px,16px); } }
@keyframes qdFloatB{ from{ transform:translate(0,0); } to{ transform:translate(16px,-14px); } }
@keyframes qdFloatC{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-12px,-10px) scale(1.06); } }

/* bote de creatina — elemento decorativo secundario, discreto,
   ligeramente más presente a medida que avanza el cuestionario */
.qd-bottle{
  position:absolute; right:6%; bottom:-6%;
  width:min(22vw,220px); height:auto;
  opacity:calc(0.12 + var(--quiz-progress, 0) * 0.10);
  transform:translateY(0) scale(calc(0.96 + var(--quiz-progress, 0) * 0.05));
  filter:drop-shadow(0 20px 30px rgba(20,42,30,.12));
  transition:opacity .5s ease, transform .5s ease;
  animation:qdBottleBob 7s ease-in-out infinite;
}
@keyframes qdBottleBob{ 0%,100%{ margin-top:0; } 50%{ margin-top:-10px; } }

@media (max-width:760px){
  .qd-bottle{ width:min(30vw,150px); right:-4%; bottom:-4%; opacity:calc(0.08 + var(--quiz-progress, 0) * 0.06); }
  .qd-halo--c{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .qd-halo, .qd-bottle{ animation:none !important; }
}

/* ---------------- Cabecera (progreso + volver) ---------------- */
.quiz-overlay.is-creatina .quiz-top{
  border-bottom-color:var(--ed-cream-line, #E4D9C2);
  position:relative; z-index:2;
}
.quiz-overlay.is-creatina .quiz-icon-btn{
  border-color:var(--ed-cream-line, #E4D9C2); color:var(--ed-charcoal, #1C1A15);
  transition:border-color .25s var(--ed-ease, ease), color .25s var(--ed-ease, ease), transform .25s var(--ed-ease, ease);
}
.quiz-overlay.is-creatina .quiz-icon-btn:hover{
  border-color:var(--ed-forest, #22402F); color:var(--ed-forest, #22402F);
  transform:translateY(-1px);
}
.quiz-overlay.is-creatina .quiz-rail{ background:var(--ed-cream-line, #E4D9C2); }
.quiz-overlay.is-creatina .quiz-rail-fill{
  background:linear-gradient(90deg, var(--ed-sand, #C9A876), var(--ed-gold, #B08D4F));
  box-shadow:0 0 8px rgba(176,141,79,.4);
  transition:width .38s var(--ed-ease, cubic-bezier(.22,.61,.36,1));
}
.quiz-overlay.is-creatina .quiz-step-lbl{ color:var(--ed-charcoal-soft, #57503f); }

/* ---------------- Cuerpo de la pregunta: protagonista, con espacio ---------------- */
.quiz-overlay.is-creatina .quiz-body{
  position:relative; z-index:1;
  max-width:720px;
  padding-top:clamp(28px, 6vw, 64px);
  padding-bottom:clamp(40px, 8vw, 80px);
}
.quiz-question--creatina{
  animation:quizInCreatina .38s var(--ed-ease, cubic-bezier(.22,.61,.36,1)) both;
}
@keyframes quizInCreatina{
  from{ opacity:0; transform:translateY(14px) scale(.99); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.quiz-overlay.is-creatina .quiz-q-eyebrow{
  font-family:var(--ed-font-mono, var(--font-mono)); color:var(--ed-gold, #B08D4F);
  display:flex; align-items:center; gap:8px;
}
.quiz-overlay.is-creatina .quiz-q-eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--ed-gold, #B08D4F); flex-shrink:0;
}
.quiz-overlay.is-creatina .quiz-q{
  font-size:clamp(26px, 5vw, 40px); line-height:1.15;
  color:var(--ed-charcoal, #1C1A15);
  margin-bottom:clamp(24px, 4vw, 38px);
}

/* ---------------- Tarjetas de opciones: grandes y visuales ---------------- */
@media (min-width:640px){
  .quiz-overlay.is-creatina .quiz-options{
    grid-template-columns:repeat(2, 1fr);
    gap:14px;
  }
}
.quiz-overlay.is-creatina .quiz-option{
  border-radius:var(--ed-radius-m, 18px);
  border-color:var(--ed-cream-line, #E4D9C2);
  background:var(--ed-cream, #F8F3E8);
  padding:20px 20px;
  gap:14px;
  transition:border-color .22s var(--ed-ease, ease), background-color .22s var(--ed-ease, ease),
             transform .22s var(--ed-ease, ease), box-shadow .22s var(--ed-ease, ease), opacity .22s ease;
}
.quiz-overlay.is-creatina .opt-icon{
  font-size:22px; line-height:1; flex-shrink:0;
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--ed-forest-tint, #E4EBE3);
}
.quiz-overlay.is-creatina .opt-label{ flex:1; }
.quiz-overlay.is-creatina .quiz-option .opt-check{
  border-color:var(--ed-cream-line, #E4D9C2);
}

.quiz-overlay.is-creatina .quiz-option:hover{
  border-color:var(--ed-sand, #C9A876);
  background:var(--ed-cream-deep, #F1E9D8);
  transform:translateY(-3px);
  box-shadow:0 16px 30px -18px rgba(20,42,30,.35);
}
.quiz-overlay.is-creatina .quiz-option:active{ transform:translateY(-1px) scale(.99); }

.quiz-overlay.is-creatina .quiz-option.is-selected{
  border-color:var(--ed-forest, #22402F);
  background:var(--ed-forest-tint, #E4EBE3);
  transform:translateY(-2px) scale(1.012);
  box-shadow:0 18px 32px -18px rgba(20,42,30,.4);
  animation:quizOptPulse .22s var(--ed-ease, ease);
}
@keyframes quizOptPulse{
  0%{ transform:scale(1); }
  45%{ transform:scale(1.03); }
  100%{ transform:translateY(-2px) scale(1.012); }
}
.quiz-overlay.is-creatina .quiz-option.is-selected .opt-icon{
  background:var(--ed-forest, #22402F);
}
.quiz-overlay.is-creatina .quiz-option.is-selected .opt-check{
  background:var(--ed-forest, #22402F); border-color:var(--ed-forest, #22402F);
}

/* al confirmar una respuesta, las demás opciones bajan de intensidad
   de forma suave mientras se prepara la transición a la pregunta siguiente */
.quiz-overlay.is-creatina .quiz-option.is-dimmed{
  opacity:.4; transform:scale(.98);
  box-shadow:none;
}

@media (prefers-reduced-motion: reduce){
  .quiz-question--creatina{ animation:none !important; }
  .quiz-overlay.is-creatina .quiz-option.is-selected{ animation:none !important; }
}

/* ---------------- Analysis screen ---------------- */
.analysis-overlay{
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(900px 620px at 85% -10%, var(--ed-cream-deep, #F1E9D8) 0%, transparent 60%),
    radial-gradient(760px 560px at -10% 110%, var(--ed-forest-tint, #E4EBE3) 0%, transparent 55%),
    var(--ed-cream, #F8F3E8);
}
.analysis-overlay.is-leaving{
  animation:analysisLeave .32s ease both;
}
@keyframes analysisLeave{ to{ opacity:0; transform:scale(.98); } }

.analysis-inner{
  position:relative; z-index:1;
  text-align:center; padding:40px 24px; max-width:440px;
  display:flex; flex-direction:column; align-items:center;
}

/* halo + partículas de fondo — muy sutiles, lentas */
.an-decor{ position:absolute; inset:-40px; z-index:0; pointer-events:none; overflow:visible; }
.an-halo{
  position:absolute; left:50%; top:44%; width:min(70vw,360px); height:min(70vw,360px);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, var(--ed-sand, #C9A876) 0%, transparent 68%);
  opacity:.32; filter:blur(30px);
  animation:anHaloPulse 5s ease-in-out infinite;
}
@keyframes anHaloPulse{
  0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:.28; }
  50%{ transform:translate(-50%,-50%) scale(1.06); opacity:.4; }
}

/* partículas: pequeñas motas cálidas (p.ej. "polvo" de creatina),
   discretas y con un movimiento casi imperceptible */
.an-particle{
  position:absolute; border-radius:50%;
  background:var(--ed-sand, #C9A876);
  animation:anParticleFloat 6s ease-in-out infinite;
}
.an-particle--a{ width:6px; height:6px; left:30%; top:24%; opacity:.55; animation-delay:0s; }
.an-particle--b{ width:4px; height:4px; left:68%; top:30%; opacity:.4; background:var(--ed-gold,#B08D4F); animation-delay:.8s; }
.an-particle--c{ width:5px; height:5px; left:24%; top:64%; opacity:.45; animation-delay:1.6s; }
.an-particle--d{ width:3px; height:3px; left:74%; top:66%; opacity:.5; background:var(--ed-gold,#B08D4F); animation-delay:2.4s; }
.an-particle--e{ width:4px; height:4px; left:50%; top:16%; opacity:.35; animation-delay:1.2s; }
.an-particle--f{ width:3px; height:3px; left:44%; top:78%; opacity:.4; animation-delay:2s; }
@keyframes anParticleFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-9px); }
}

/* anillo de progreso — se completa en sincronía con las fases */
.an-ring{
  position:relative; width:128px; height:128px; margin-bottom:28px;
}
.an-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.an-ring-track{
  fill:none; stroke:var(--ed-cream-line, #E4D9C2); stroke-width:5;
}
.an-ring-fill{
  fill:none; stroke:var(--ed-gold, #B08D4F); stroke-width:5; stroke-linecap:round;
  transition:stroke-dashoffset .6s var(--ed-ease, cubic-bezier(.22,.61,.36,1));
}
.an-ring-icon{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--ed-forest, #22402F);
}
.an-ring-icon svg{ width:34px; height:34px; }

.an-heading{
  font-size:22px; color:var(--ed-charcoal, #1C1A15); margin-bottom:8px;
}
.an-phase-text{
  color:var(--ed-charcoal-soft, #57503f); font-size:14.5px; min-height:20px;
  transition:opacity .18s ease, transform .18s ease;
  opacity:1; transform:translateY(0);
}
.an-phase-text.is-fading{ opacity:0; transform:translateY(4px); }

/* pasos del análisis: hilera de puntos minimalista, sin texto
   repetido — el texto real vive en .an-phase-text de arriba */
.an-dots{ display:flex; align-items:center; gap:8px; margin-top:22px; }
.an-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--ed-cream-line, #E4D9C2);
  transition:background-color .3s ease, transform .3s var(--ed-ease, ease), box-shadow .3s ease;
}
.an-dot.is-active{
  background:var(--ed-gold, #B08D4F);
  transform:scale(1.3);
  box-shadow:0 0 6px rgba(176,141,79,.5);
}
.an-dot.is-done{
  background:var(--ed-forest, #22402F);
  transform:scale(1);
  box-shadow:none;
}

@media (max-width:480px){
  .an-ring{ width:104px; height:104px; margin-bottom:22px; }
  .an-ring-icon svg{ width:28px; height:28px; }
  .an-heading{ font-size:19px; }
}

@media (prefers-reduced-motion: reduce){
  .an-halo, .an-particle{ animation:none !important; }
  .analysis-overlay.is-leaving{ animation:none !important; opacity:0; }
}