/* =========================================================
   OUTFIT CHECK — CHARTS
   Todos los charts usan --chart-* de theme.css.
   Para copiar un chart a otra slide, copia su bloque HTML
   y las clases correspondientes de este archivo.
   ========================================================= */

/* =========================================================
   1. GAUGE / ARC (19,3 %)
   ========================================================= */
.gauge{
  position:relative;width:560px;height:560px;margin:0 auto;
}
.gauge svg{width:100%;height:100%;overflow:visible}
.gauge__track{
  fill:none;stroke:var(--chart-track);stroke-width:14;stroke-linecap:round;
}
.gauge__value{
  fill:none;stroke:url(#gaugeGradient);stroke-width:14;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100;
  filter:drop-shadow(0 0 14px rgba(111,227,219,.42));
  transition:stroke-dashoffset 1.8s var(--ease) .25s;
}
.slide.visible .gauge__value{stroke-dashoffset:calc(100 - var(--gauge-value,0))}
.gauge__tick{
  stroke:var(--chart-grid);stroke-width:2;opacity:0;
  transition:opacity .5s var(--ease);
  transition-delay:calc(var(--i) * 6ms + .2s);
}
.gauge__tick--major{stroke:var(--muted);stroke-width:2.4}
.slide.visible .gauge__tick{opacity:1}
.gauge__dot{
  fill:var(--chart-main);opacity:0;
  filter:drop-shadow(0 0 10px rgba(111,227,219,.9));
  transition:opacity .4s var(--ease) 1.75s;
}
.slide.visible .gauge__dot{opacity:1}
.gauge__center{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;pointer-events:none;
}
.gauge__center b{
  font-family:var(--font-mono);font-size:118px;font-weight:500;line-height:.82;
  letter-spacing:-.09em;color:var(--paper);
}
.gauge__center b span{font-size:38px;letter-spacing:-.03em;color:var(--chart-main);vertical-align:top}
.gauge__center small{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
}
.gauge__caption{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;
}
.gauge__pulse{
  position:absolute;width:8px;height:8px;border-radius:50%;
  background:var(--chart-main);box-shadow:0 0 0 0 rgba(111,227,219,.45);
  animation:pulse 2.4s ease-out infinite;pointer-events:none;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(111,227,219,.35)}
  70%{box-shadow:0 0 0 16px rgba(111,227,219,0)}
  100%{box-shadow:0 0 0 0 rgba(111,227,219,0)}
}

/* =========================================================
   2. LOLLIPOP / RANGE COMPARISON (25–30 % vs 15,8 %)
   ========================================================= */
.lollipop{width:100%;max-width:1480px;margin:0 auto}
.lollipop svg{width:100%;height:auto;overflow:visible}
.lollipop__grid line{stroke:var(--chart-grid);stroke-width:1;stroke-dasharray:2 8}
.lollipop__axis text{
  font-family:var(--font-mono);font-size:12px;fill:var(--muted);
  letter-spacing:.06em;
}
.lollipop__label{
  font-family:var(--font-ui);font-size:20px;fill:var(--muted-2);font-weight:500;
}
.lollipop__value{
  font-family:var(--font-mono);font-size:15px;fill:var(--paper);
}
.lollipop__value--main{fill:var(--chart-main)}
.lollipop__line{
  stroke:var(--chart-dim);stroke-width:3;stroke-dasharray:100;stroke-dashoffset:100;
  transition:stroke-dashoffset 1.25s var(--ease) .25s;
}
.slide.visible .lollipop__line{stroke-dashoffset:0}
.lollipop__dot{
  fill:var(--paper);opacity:0;transform:scale(.2);transform-box:fill-box;transform-origin:center;
  transition:opacity .45s var(--ease),transform .6s var(--ease-out);
  transition-delay:.85s;
}
.slide.visible .lollipop__dot{opacity:1;transform:scale(1)}
.lollipop__dot--main{
  fill:var(--chart-main);filter:drop-shadow(0 0 10px rgba(111,227,219,.6));
}
.lollipop__range{
  fill:rgba(111,227,219,.16);stroke:var(--chart-main);stroke-width:2;
  transform:scaleX(0);transform-box:fill-box;transform-origin:left;
  transition:transform 1.1s var(--ease) .55s;
}
.slide.visible .lollipop__range{transform:scaleX(1)}
.lollipop__bracket{stroke:var(--chart-main);stroke-width:1.2;fill:none;opacity:.55}

/* =========================================================
   3. RANGE PLOT (53–67 %)
   ========================================================= */
.range-chart{width:100%;max-width:1500px;margin:0 auto}
.range-chart svg{width:100%;height:auto;overflow:visible}
.range__track{fill:var(--chart-track)}
.range__band{
  fill:rgba(111,227,219,.2);stroke:var(--chart-main);stroke-width:2;
  transform:scaleX(0);transform-box:fill-box;transform-origin:left;
  transition:transform 1.35s var(--ease) .35s;
}
.slide.visible .range__band{transform:scaleX(1)}
.range__marker{
  fill:var(--paper);stroke:var(--paper);stroke-width:1;
  opacity:0;transform:scale(.2);transform-box:fill-box;transform-origin:center;
  transition:opacity .4s var(--ease),transform .55s var(--ease-out);
  transition-delay:calc(var(--i) * .16s + .9s);
}
.slide.visible .range__marker{opacity:1;transform:scale(1)}
.range__marker--main{fill:var(--chart-main);stroke:var(--chart-main);filter:drop-shadow(0 0 8px rgba(111,227,219,.65))}
.range__axis text{font-family:var(--font-mono);font-size:12px;fill:var(--muted)}
.range__source{font-family:var(--font-mono);font-size:11px;fill:var(--muted-2)}
.range__label{font-family:var(--font-ui);font-size:14px;fill:var(--muted-2)}
.range__big{
  position:absolute;right:0;top:-10px;
  font-family:var(--font-mono);font-size:100px;font-weight:500;
  letter-spacing:-.08em;line-height:.8;color:var(--paper);
}
.range__big span{color:var(--chart-main)}

/* =========================================================
   4. COST BAR (66 % / 25–35 €)
   ========================================================= */
.cost-chart{width:100%;max-width:980px}
.cost-bar{
  position:relative;height:150px;border-radius:6px;background:var(--chart-track);overflow:hidden;
}
.cost-bar__fill{
  position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(90deg,var(--chart-coral),var(--chart-amber));
  box-shadow:0 0 35px rgba(255,107,90,.35);
  transition:width 1.35s var(--ease) .3s;
}
.slide.visible .cost-bar__fill{width:66%}
.cost-bar__rest{
  position:absolute;right:0;top:0;bottom:0;left:66%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  color:var(--muted-2);text-transform:uppercase;
}
.cost-bar__mark{
  position:absolute;left:66%;top:-14px;bottom:-14px;width:1px;
  background:var(--paper);opacity:.55;
}
.cost-bar__mark span{
  position:absolute;left:12px;top:0;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  color:var(--paper);white-space:nowrap;
}
.cost-legend{display:flex;justify-content:space-between;margin-top:16px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--muted-2)}
.cost-legend b{color:var(--paper);font-weight:500}
.cost-note{margin-top:30px;font-family:var(--font-mono);font-size:11px;line-height:1.6;color:var(--muted);max-width:760px}

/* =========================================================
   5. DOT RING (85 %)
   ========================================================= */
.dot-ring{
  position:relative;width:620px;height:620px;margin:0 auto;
}
.dot-ring::before{
  content:"";position:absolute;inset:54px;border-radius:50%;
  border:1px solid var(--line-soft);
}
.dot-ring i{
  position:absolute;width:7px;height:7px;border-radius:50%;
  background:var(--chart-main);box-shadow:0 0 8px rgba(111,227,219,.45);
  transform:translate(-50%,-50%) scale(0);
  transition:transform .45s var(--ease-out),opacity .45s;
  transition-delay:calc(var(--i) * 8ms + .2s);
}
.dot-ring i.off{
  background:transparent;border:1px solid var(--line-strong);box-shadow:none;
}
.slide.visible .dot-ring i{transform:translate(-50%,-50%) scale(1)}
.dot-ring__center{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;pointer-events:none;
}
.dot-ring__center b{
  font-family:var(--font-mono);font-size:132px;font-weight:500;line-height:.82;
  letter-spacing:-.09em;color:var(--paper);
}
.dot-ring__center b span{font-size:44px;color:var(--chart-main);vertical-align:top}
.dot-ring__center small{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.dot-ring__caption{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;
}

/* =========================================================
   6. IMPACT / WATERFALL + INSET (100k → 2.5k → €)
   ========================================================= */
.impact-chart{display:grid;grid-template-columns:1.35fr .65fr;gap:70px;align-items:center;width:100%}
.impact-bars{display:flex;flex-direction:column;gap:8px}
.impact-row{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.impact-row span{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.impact-row b{font-family:var(--font-mono);font-size:36px;font-weight:500;letter-spacing:-.04em;color:var(--paper)}
.impact-track{
  position:relative;height:66px;border-radius:4px;background:var(--chart-track);overflow:hidden;margin:8px 0 26px;
}
.impact-returns{
  position:absolute;left:0;top:0;bottom:0;width:0;
  background:rgba(242,239,232,.16);
  transition:width 1.35s var(--ease) .25s;
}
.slide.visible .impact-returns{width:25%}
.impact-saved{
  position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(90deg,var(--chart-main-2),var(--chart-main));
  box-shadow:0 0 26px rgba(111,227,219,.45);
  transition:width 1.35s var(--ease) .5s;
}
.slide.visible .impact-saved{width:2.5%}
.impact-track__label{
  position:absolute;left:26%;top:50%;transform:translateY(-50%);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--paper);white-space:nowrap;
}
.impact-track__zoom{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;
  color:var(--muted);text-transform:uppercase;
}
.impact-inset{display:flex;flex-direction:column;align-items:center;gap:12px}
.impact-donut{position:relative;width:210px;height:210px}
.impact-donut svg{transform:rotate(-90deg)}
.impact-donut circle{fill:none;stroke-width:10}
.impact-donut .track{stroke:var(--chart-track)}
.impact-donut .val{
  stroke:var(--chart-main);stroke-linecap:butt;stroke-dasharray:100;stroke-dashoffset:100;
  filter:drop-shadow(0 0 10px rgba(111,227,219,.5));
  transition:stroke-dashoffset 1.25s var(--ease) .55s;
}
.slide.visible .impact-donut .val{stroke-dashoffset:90}
.impact-donut b{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:46px;font-weight:500;letter-spacing:-.05em;color:var(--paper);
}
.impact-donut span{
  position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap;
}
.impact-inset__copy{text-align:center;font-size:13px;line-height:1.4;color:var(--muted-2);max-width:220px}
.impact-inset__copy b{color:var(--paper);font-weight:500}
.impact-money{
  grid-column:1 / -1;display:flex;align-items:baseline;justify-content:space-between;
  margin-top:18px;padding-top:22px;border-top:1px solid var(--line);
}
.impact-money span{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.impact-money b{
  font-family:var(--font-mono);font-size:78px;font-weight:500;line-height:.9;letter-spacing:-.07em;
  background:linear-gradient(90deg,var(--paper),var(--chart-main));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* =========================================================
   7. SMALL LEGEND / ANNOTATIONS
   ========================================================= */
.chart-source{
  position:absolute;right:0;bottom:-30px;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;color:var(--muted);
}
.chart-annotation{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-2);
}
.chart-annotation i{width:7px;height:7px;border-radius:50%;background:var(--chart-main);box-shadow:0 0 8px rgba(111,227,219,.45)}

/* =========================================================
   8. CHART WRAPPERS / SMALL COMPLEMENTS
   ========================================================= */
.stat-stage--full{position:relative}
.chart-callout{position:absolute;right:0;top:-6px;z-index:4;text-align:right}
.chart-callout b{
  display:block;font-family:var(--font-mono);font-size:108px;font-weight:500;
  line-height:.8;letter-spacing:-.08em;color:var(--paper);
}
.chart-callout b span{font-size:40px;color:var(--chart-main);vertical-align:top}
.chart-callout small{
  display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:10px;
}
.range-wrap{position:relative}
.range-wrap .range__big{top:-6px}
.stat-secondary{
  display:flex;align-items:baseline;gap:14px;padding-top:16px;
  border-top:1px solid var(--line);margin-top:22px;
}
.stat-secondary b{
  font-family:var(--font-mono);font-size:38px;font-weight:500;
  letter-spacing:-.05em;color:var(--chart-main);white-space:nowrap;
}
.stat-secondary span{font-size:13px;line-height:1.35;color:var(--muted-2);max-width:420px}

/* Volume bar (100k → 25k) */
.volume-chart{width:100%;max-width:920px}
.volume-units{display:flex;gap:18px}
.volume-unit{width:130px;height:220px;border:1px solid var(--line);border-radius:10px;background:var(--chart-track);opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .6s var(--ease-out),background .5s;transition-delay:calc(var(--i) * .1s + .2s)}
.volume-unit.on{background:linear-gradient(160deg,var(--chart-main-2),var(--chart-main));border-color:var(--chart-main);box-shadow:0 0 30px rgba(111,227,219,.25)}
.slide.visible .volume-unit{opacity:1;transform:none}
.volume-bar{
  position:relative;height:96px;border-radius:6px;overflow:hidden;
  background:var(--chart-track);
}
.volume-fill{
  position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(90deg,var(--chart-main-2),var(--chart-main));
  box-shadow:0 0 35px rgba(111,227,219,.35);
  transition:width 1.35s var(--ease) .3s;
}
.slide.visible .volume-fill{width:25%}
.volume-mark{
  position:absolute;left:25%;top:-12px;bottom:-12px;width:1px;
  background:var(--paper);opacity:.55;
}
.volume-mark span{
  position:absolute;left:12px;top:0;font-family:var(--font-mono);
  font-size:10px;letter-spacing:.12em;color:var(--paper);white-space:nowrap;
}
.volume-labels{
  display:flex;justify-content:space-between;gap:20px;margin-top:18px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;color:var(--muted);
}
.volume-labels b{color:var(--paper);font-weight:500}

/* Money block */
.money-block{
  background:
    radial-gradient(120% 120% at 80% 0%,rgba(111,227,219,.28),transparent 60%),
    linear-gradient(160deg,var(--teal-deep),#0A4B4B);
  border:1px solid rgba(111,227,219,.3);border-radius:14px;
  padding:36px 40px 32px;color:var(--paper);
  box-shadow:0 40px 100px rgba(0,0,0,.45),0 0 60px rgba(22,184,176,.1);
}
.money-block span{
  display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(242,239,232,.75);
}
.money-block b{
  display:block;font-family:var(--font-mono);font-size:78px;font-weight:500;
  line-height:.9;letter-spacing:-.07em;margin-top:22px;white-space:nowrap;
}
.money-block small{
  display:block;font-size:13px;line-height:1.4;color:rgba(242,239,232,.78);margin-top:16px;
}

/* Big donut variant */
.impact-donut--big{width:340px;height:340px}
.impact-donut--big b{font-size:72px}
.impact-donut-wrap{display:flex;flex-direction:column;align-items:center;gap:20px}
.impact-donut-wrap .stat-secondary{align-self:stretch}