/* v25 · Método.
   1. «El perfil, a la vista»: las cinco dimensiones como tablas de un barril.
      El agua sube hasta la más corta (nivel declarado); el promedio queda
      marcado con trazo para ver lo que escondería. Se actualiza con la matriz.
   2. En la práctica: el ciclo vuelve a empezar cada año. */

/* 1 · Barril */
.mbar{ margin:var(--e-md) 0 0; padding:var(--e-md) 0 0; border-top:1px solid rgba(216,203,179,.16) }
.mbar__lam{ position:relative; height:12rem; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:.25rem; --pie:1.5rem; --alto:calc(100% - var(--pie) - 1.4rem) }
.mbar__d{ position:relative; height:100% }
.mbar__d i{ position:absolute; left:16%; right:16%; bottom:var(--pie); height:calc(var(--alto) * var(--v) / 5);
  border-radius:5px 5px 2px 2px; background:linear-gradient(180deg, #A9C3C6, #6F9296); transition:height .45s var(--curva), background-color .3s }
.mbar__d[data-baja] i{ background:linear-gradient(180deg, #E8BE63, var(--sol-hondo)) }
.mbar__d span{ position:absolute; left:0; right:0; bottom:0; text-align:center; font-family:var(--sans); font-size:.78rem; font-weight:600; color:var(--suave-claro) }
.mbar__d[data-baja] span{ color:var(--sol) }

.mbar__agua{ position:absolute; z-index:2; left:-.25rem; right:-.25rem; bottom:var(--pie); height:calc(var(--alto) * var(--n) / 5);
  background:linear-gradient(180deg, rgba(124,196,190,.26), rgba(124,196,190,.12)); border-top:2px solid #9FD6D0; border-radius:0 0 6px 6px;
  transition:height .45s var(--curva); pointer-events:none }
.mbar__prom{ position:absolute; z-index:3; left:-.25rem; right:-.25rem; bottom:calc(var(--pie) + var(--alto) * var(--p) / 5); height:0;
  border-top:1.5px dashed rgba(244,242,238,.75); transition:bottom .45s var(--curva); pointer-events:none }
.mbar__agua span,.mbar__prom span{ position:absolute; bottom:100%; margin-bottom:.3rem; font-family:var(--sans); font-size:.76rem; font-weight:600; white-space:nowrap; line-height:1.2;
  padding:.12rem .4rem; border-radius:4px; background:rgba(10,26,47,.85) }
.mbar__agua span{ left:.25rem; color:#BFE6E1 }
.mbar__prom span{ right:.25rem; color:var(--papel) }
.mbar__prom[data-oculto]{ opacity:0 }
.mbar__agua b,.mbar__prom b{ font-weight:700 }
.mbar__pie{ margin-top:var(--e-sm); font-family:var(--sans); font-size:.9rem; line-height:1.55; color:#C9D3D6; max-width:44ch }
.mbar__pie b{ color:var(--papel); font-weight:650 }

@media (prefers-reduced-motion:reduce){
  .mbar__d i,.mbar__agua,.mbar__prom{ transition:none }
}

/* 2 · El ciclo vuelve a empezar */
.mpra__vuelta{ display:flex; align-items:center; justify-content:center; gap:.55rem; max-width:76rem; margin:var(--e-lg) auto 0;
  font-family:var(--sans); font-size:.98rem; font-weight:600; color:var(--petroleo); text-align:center; text-wrap:balance; padding-inline:.5rem }
.mpra__vuelta svg{ width:1.25rem; height:1.25rem; flex:none }
@media (min-width:60rem){
  .mpra__vuelta{ position:relative; padding-top:2.1rem; margin-top:var(--e-md) }
  .mpra__vuelta::before{ content:""; position:absolute; top:0; left:12.5%; right:12.5%; height:1.1rem;
    border:2px solid rgba(20,80,79,.45); border-top:0; border-radius:0 0 14px 14px }
  .mpra__vuelta::after{ content:""; position:absolute; top:-.2rem; left:calc(12.5% - 5px); width:0; height:0;
    border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:8px solid rgba(20,80,79,.7) }
  .mpra__vuelta svg{ display:none }
}