/* ResupplyAI · Sazón v6 (2 oct 2026). Propio del estudio.
   Secciones de datos públicos (cifras + barras + fuente), su movimiento y las microinteracciones del sitio.
   El movimiento solo existe bajo html.sz-on (lo pone sazon.js si no hay Reducir movimiento). Sin JS: todo dibujado y quieto. */

/* ---------- 1. Cifras ---------- */
.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); margin: 0 0 clamp(36px, 5vw, 60px); }
.figs.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fig-s { border-top: 1px solid var(--navy-d); padding-top: 18px; margin: 0; }
.fig-n { display: block; font: 500 clamp(2.75rem, 1.6rem + 4vw, 4.75rem)/.95 var(--display); letter-spacing: -.045em; color: var(--navy-d); font-variant-numeric: tabular-nums; }
.fig-l { display: block; margin-top: 12px; font: 700 clamp(1rem, .95rem + .2vw, 1.125rem)/1.4 var(--display); letter-spacing: -.01em; color: var(--navy-d); max-width: 28ch; }
.band-deep .fig-s, .band-navy .fig-s { border-top-color: rgba(255, 255, 255, .5); }
.band-deep .fig-n, .band-navy .fig-n, .band-deep .fig-l, .band-navy .fig-l { color: #fff; }

/* contorno que se rellena: la cifra cuenta en contorno y se llena al terminar */
.sz-on .fig-s[data-fill] .fig-n { color: transparent; -webkit-text-stroke: 1.5px var(--navy-d); transition: color 650ms var(--ease) 1000ms; }
.sz-on .fig-s[data-fill].is-in .fig-n { color: var(--navy-d); }
.sz-on .band-deep .fig-s[data-fill] .fig-n, .sz-on .band-navy .fig-s[data-fill] .fig-n { -webkit-text-stroke-color: #fff; }
.sz-on .band-deep .fig-s[data-fill].is-in .fig-n, .sz-on .band-navy .fig-s[data-fill].is-in .fig-n { color: #fff; }
@supports not (-webkit-text-stroke: 1px #000) { .sz-on .fig-s[data-fill] .fig-n { color: inherit; } }

/* ---------- 2. Gráfico de barras ---------- */
.chart { margin: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; padding: clamp(20px, 3vw, 36px); }
.chart-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 24px; margin-bottom: clamp(18px, 2.4vw, 28px); }
.chart-t { margin: 0; font: 700 clamp(1.0625rem, 1rem + .25vw, 1.25rem)/1.35 var(--display); letter-spacing: -.01em; color: var(--navy-d); max-width: 40ch; }
.chart-k { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: .875rem; color: var(--grey); }
.chart-k li { display: inline-flex; align-items: center; gap: 8px; }
.chart-k i { width: 18px; height: 10px; border-radius: 2px; background: var(--navy-d); }
.chart-k i.is-b, .bar-f.is-b { background: repeating-linear-gradient(135deg, var(--navy) 0 3px, #7f8bc0 3px 6px); }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.bar { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr) 5.75rem; gap: 6px 18px; align-items: center; padding: 9px 10px; margin: 0 -10px; border-radius: 10px; transition: background-color 200ms ease; }
.bar-l { font-size: .9688rem; line-height: 1.35; color: var(--ink); }
.bar-l .mono { font: 500 .8125rem/1 var(--mono); color: var(--grey); margin-right: .55em; }
.bar-t { position: relative; height: 12px; border-radius: 6px; background: var(--tint-1); overflow: hidden; }
.bar-f { position: absolute; inset: 0; background: var(--navy-d); transform-origin: 0 50%; transform: scaleX(var(--v, 0)); }
.bar-v { font: 700 .9688rem/1.2 var(--display); color: var(--navy-d); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (hover: hover) { .bar:hover { background: var(--paper); } .bar:hover .bar-f:not(.is-b) { background: var(--navy); } }

/* tramos de tamaño: dos barras por tramo (awards y dólares) */
.tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 2vw, 20px); }
.tier { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 4px 18px; align-items: center; padding-top: clamp(14px, 2vw, 20px); border-top: 1px solid var(--line); }
.tier:first-child { border-top: 0; padding-top: 0; }
.tier-l { font: 700 1rem/1.3 var(--display); color: var(--navy-d); }
.tier-l small { display: block; margin-top: 4px; font: 400 .8125rem/1.4 var(--text); color: var(--grey); }
.tier .bars { gap: 0; }
.tier .bar { grid-template-columns: 4.5rem minmax(0, 1fr) 4.75rem; padding: 5px 10px; }
.tier .bar-l { font-size: .875rem; color: var(--grey); }

/* dibujo al entrar */
.sz-on [data-draw] .bar-f { transition: transform 1100ms var(--ease) calc(var(--i, 0) * 70ms + 120ms); }
.sz-on [data-draw]:not(.is-in) .bar-f { transform: scaleX(0); }
.sz-on [data-draw] .bar-v { transition: opacity 400ms ease calc(var(--i, 0) * 70ms + 500ms); }
.sz-on [data-draw]:not(.is-in) .bar-v { opacity: 0; }

/* la línea de la cadena (portada) se traza de izquierda a derecha */
.sz-on .chain[data-draw]::before { transform-origin: 0 50%; transition: transform 1400ms var(--ease) 200ms; }
.sz-on .chain[data-draw]:not(.is-in)::before { transform: scaleX(0); }

.dv-source { margin: 18px 0 0; font-size: .8125rem; line-height: 1.55; color: var(--grey); max-width: 92ch; }
.dv-source a { color: inherit; text-underline-offset: 3px; }
.band-deep .dv-source, .band-navy .dv-source { color: var(--tint-3); }

/* ---------- 3. Lo que pide la trazabilidad (tarjetas numeradas) ---------- */
.evs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: ev; }
.ev { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 250px; padding: 24px 24px 0; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.ev h3 { font-size: 1.125rem; line-height: 1.3; margin-bottom: 8px; }
.ev p { margin: 0 0 96px; color: var(--grey); font-size: .9688rem; max-width: 32ch; }
.ev .on-num { --on-stroke: rgba(33, 50, 95, .35); --on-fill: var(--navy-d); }
.evs + .figs { margin-top: clamp(36px, 5vw, 56px); margin-bottom: 0; }

/* ---------- 4. Bandas navy: trama en parallax leve y costura de entrada ---------- */
.sz-on .sz-band > .dots-bg { inset: -48px 0; transform: translate3d(0, calc(var(--py, 0) * 40px), 0); will-change: transform; }
.sz-on .sz-band.sz-seam-on { clip-path: inset(0 calc(var(--seam, 0) * min(2.6vw, 34px)) round calc(var(--seam, 0) * 28px)); }

/* ---------- 5. Microinteracciones (respuesta al presionar, sin esperar al clic) ---------- */
.btn { transition-property: background-color, box-shadow, transform; }
.btn:active { transform: translateY(1px) scale(.97); transition-duration: 90ms; }
.sx-chip:active, .ml-toggle:active, .fl-tab:active, .cn-toggle:active, .cn-signin:active { transform: scale(.96); }
.sx-chip, .fl-tab, .cn-toggle, .cn-signin { transition: transform 120ms ease-out, background-color 200ms ease, border-color 200ms ease, color 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .way, .src-card, .on-card, .ev { transition: transform 300ms var(--ease), box-shadow 300ms var(--ease), border-color 300ms ease; }
  .way:hover { transform: translateY(-4px); }
  .src-card:hover, .on-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(8, 14, 34, .55); }
  .ev:hover { transform: translateY(-3px); border-color: var(--navy-m); box-shadow: var(--shadow-1); }
  .ev:hover .on-num { color: var(--on-fill); -webkit-text-stroke-color: var(--on-fill); }
}

/* ---------- 6. Celular y tablet ---------- */
@media (max-width: 960px) {
  .evs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tier { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .figs, .figs.is-two { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .bar { grid-template-columns: minmax(0, 1fr) 5.25rem; }
  .bar > .bar-l { grid-column: 1 / -1; }
  .tier .bar { grid-template-columns: 4.25rem minmax(0, 1fr) 3.5rem; }
  .tier .bar > .bar-l { grid-column: auto; }
  .evs { grid-template-columns: minmax(0, 1fr); }
  .ev { min-height: 0; }
  .ev p { margin-bottom: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn:active, .sx-chip:active, .ml-toggle:active, .fl-tab:active, .cn-toggle:active, .cn-signin:active { transform: none; }
  .way:hover, .src-card:hover, .on-card:hover, .ev:hover { transform: none; }
}
@media print { .sz-on .sz-band.sz-seam-on { clip-path: none; } .bar-f { transform: scaleX(var(--v, 0)) !important; } }