/* =====================================================================
   Beneficios — historia 3D guiada por scroll + gráfico de retorno
   Hereda tokens, cabecero, menú, botones y pie de styles.css
   ===================================================================== */

/* ---------- Cabecera de página ---------- */
.page-head {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  padding: calc(var(--header-h) + var(--header-top) + 80px) var(--gutter) 60px;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin: 0 auto;
}
.page-head__title {
  max-width: 14ch;
  font-size: clamp(42px, 7vw, 104px);
  line-height: .98;
  letter-spacing: -.04em;
  color: var(--white);
}
.page-head__lead {
  max-width: 52ch;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.35;
  color: var(--grey);
}
.page-head__hint { display: flex; align-items: center; gap: 12px; margin-top: 8px; color: var(--grey-muted); }
.page-head__hint svg { width: 14px; height: 14px; animation: arrowBounce 2.2s ease-in-out infinite; }

/* ---------- Historia anclada ---------- */
.story { position: relative; z-index: 5; }
.story__track { position: relative; height: 560vh; }
.story__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(60% 55% at 62% 48%, rgba(213, 224, 33, .07) 0%, rgba(213, 224, 33, 0) 70%),
    var(--ink);
}
.story__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* Veladura para que el texto se lea sobre la maqueta clara */
.story__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(11, 13, 16, .92) 0%, rgba(11, 13, 16, .55) 26%, rgba(11, 13, 16, 0) 52%),
    linear-gradient(to top, rgba(11, 13, 16, .85) 0%, rgba(11, 13, 16, 0) 38%);
}
html.no-3d .story__canvas { display: none; }

/* Etiquetas proyectadas desde la escena */
.hotspot {
  position: absolute;
  z-index: 3;
  left: 0; top: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translate(-6px, -6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--ease);
  white-space: nowrap;
}
.hotspot.is-on { opacity: 1; }
.hotspot.is-behind { opacity: 0 !important; }
.hotspot__dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 4px rgba(213, 224, 33, .18);
  flex-shrink: 0;
}
.hotspot__line { width: 22px; height: 1px; background: rgba(216, 216, 216, .5); }
.hotspot__tag {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px 7px 8px;
  border: 1px solid rgba(216, 216, 216, .28);
  background: rgba(11, 13, 16, .72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hotspot__n {
  display: grid;
  place-items: center;
  min-width: 20px; height: 20px;
  padding: 0 4px;
  background: var(--sun);
  color: var(--ink);
  font-weight: 500;
}
.hotspot__sub { color: var(--grey-muted); margin-left: 2px; }
.hotspot--left { flex-direction: row-reverse; transform: translate(6px, -6px) translateX(-100%); }

/* Tarjetas de fase */
.story__cards {
  position: absolute;
  left: var(--gutter);
  bottom: calc(var(--gutter) + 22px);
  z-index: 3;
  width: min(520px, calc(100% - 2 * var(--gutter)));
  pointer-events: none;
}
.story__card {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.story__card.is-on { opacity: 1; transform: none; pointer-events: auto; }
.story__card .label { display: block; margin-bottom: 14px; }
.story__card h2 {
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.02;
  letter-spacing: -.03em;
  color: var(--white);
  margin-bottom: 16px;
}
.story__card p {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.4;
  color: var(--grey);
  max-width: 46ch;
}
.story__card p + p { margin-top: 10px; }

/* Índice 0.1 … 0.4 */
.story__progress {
  position: absolute;
  right: var(--gutter);
  bottom: calc(var(--gutter) + 76px);
  z-index: 3;
  display: grid;
  gap: 12px;
  justify-items: end;
}
.story__idx { display: flex; gap: 18px; }
.story__idx span {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--grey-muted);
  transition: color .3s;
}
.story__idx span.is-active { color: var(--sun); }
.story__idx span.is-active::before { content: "["; }
.story__idx span.is-active::after { content: "]"; }
.story__bar { position: relative; width: 180px; height: 1px; background: var(--line); overflow: hidden; }
.story__bar i { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: var(--sun); transform-origin: left; transform: scaleX(0); }

.story__hint {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--grey-muted);
  transition: opacity .4s;
}
.story__hint svg { width: 14px; height: 14px; animation: arrowBounce 2.2s ease-in-out infinite; }
.story__stage.is-advanced .story__hint { opacity: 0; }

/* Sin WebGL: la historia sigue funcionando con las tarjetas */
html.no-3d .story__track { height: auto; }
html.no-3d .story__stage { position: relative; height: auto; padding: 60px var(--gutter); }
html.no-3d .story__cards, html.no-3d .story__card { position: static; opacity: 1; transform: none; width: auto; margin-bottom: 40px; }
html.no-3d .story__progress, html.no-3d .story__hint, html.no-3d .hotspot { display: none; }

/* ---------- Gráfico de retorno ---------- */
.roi {
  position: relative;
  z-index: 5;
  padding: 120px var(--gutter) 60px;
  background: var(--ink);
  border-top: 1px solid var(--line);
}
.roi__inner { max-width: var(--max); margin: 0 auto; }
.roi__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-bottom: 56px; }
.roi__head h2 { font-size: clamp(36px, 5vw, 72px); line-height: 1.02; letter-spacing: -.03em; color: var(--white); }
.roi__head p { font-size: 20px; line-height: 1.35; color: var(--grey); max-width: 46ch; }

.roi__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 56px; }
.tile { padding: 26px 26px 24px; background: var(--ink); display: grid; gap: 10px; }
.tile .label { color: var(--grey-muted); }
.tile__value { font-size: clamp(30px, 3.4vw, 46px); line-height: 1; letter-spacing: -.03em; color: var(--white); font-variant-numeric: tabular-nums; }
.tile__value em { font-style: normal; color: var(--sun); }
.tile__note { font-size: 14px; color: var(--grey); }

.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; fill: var(--grey-muted); text-transform: uppercase; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { stroke: rgba(216, 216, 216, .45); stroke-width: 1; }
.chart .ln--red { fill: none; stroke: var(--grey); stroke-width: 1.6; }
.chart .ln--sol { fill: none; stroke: var(--sun); stroke-width: 2.2; }
.chart .area { fill: var(--sun); opacity: .1; }
.chart .mark { stroke: var(--sun); stroke-width: 1; stroke-dasharray: 4 6; }
.chart .dot { fill: var(--sun); }
.chart .dot--red { fill: var(--grey); }
.chart .lbl--sol { fill: var(--sun); }
.chart .lbl--white { fill: var(--white); }
/* dibujo progresivo al entrar en pantalla */
.chart .draw { transition: stroke-dashoffset 1.6s var(--ease); }
.chart .ln--sol.draw { transition-delay: .35s; }
.chart .area, .chart .mark, .chart .dot, .chart .lbl--end { opacity: 0; transition: opacity .8s var(--ease) 1.5s; }
.chart .area.in-hold { opacity: .1; }
.chart.in .area { opacity: .1; }
.chart.in .mark, .chart.in .dot, .chart.in .lbl--end { opacity: 1; }

.roi__legend { display: flex; flex-wrap: wrap; gap: 26px; margin: 22px 0 40px; }
.roi__legend span { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }
.roi__legend i { width: 26px; height: 2px; background: var(--grey); }
.roi__legend i.sol { background: var(--sun); }

.roi__assumptions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 28px;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--grey);
}
.roi__assumptions b { display: block; font-weight: 500; color: var(--light); font-variant-numeric: tabular-nums; }
.roi__assumptions .label { grid-column: 1 / -1; color: var(--grey-muted); }
.roi__cta { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 56px; }
.roi__cta p { color: var(--grey); font-size: 16px; max-width: 42ch; }

@media (max-width: 900px) {
  .page-head { padding-top: calc(var(--header-h) + var(--header-top) + 40px); }
  .story__track { height: 520vh; }
  .story__cards { bottom: 96px; width: calc(100% - 2 * var(--gutter)); }
  .story__card h2 { font-size: 28px; }
  .story__card p { font-size: 14px; }
  .story__progress { top: calc(var(--header-h) + var(--header-top) + 18px); bottom: auto; }
  .story__bar { width: 120px; }
  .story__hint { display: none; }
  .hotspot__tag { font-size: 10px; padding: 6px 9px 6px 6px; }
  .hotspot__sub { display: none; }
  .roi { padding: 80px var(--gutter) 40px; }
  .roi__head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 36px; }
  .roi__tiles { grid-template-columns: 1fr; }
  .chart text { font-size: 13px; }
}