/* Artículo "¿Cuánto cuesta una taza?": calculadora y señales */
.calc, .chk { margin: clamp(28px, 4vw, 48px) 0; padding: clamp(20px, 3vw, 32px); background: var(--crema, #F1ECE6); border: 1px solid var(--linea, rgba(35,25,21,.18)); border-top: 3px solid var(--cereza, #A3132B); border-radius: var(--radius, 8px); }
.calc h2, .chk h2 { margin: 0 0 8px; }
.calc__lead, .chk__lead { margin: 0 0 22px; color: var(--tinta-suave, #5A524D); }
.calc__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
.calc__field { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin-bottom: 20px; }
.calc__field label { font-weight: 700; }
.calc__field output { font: 700 18px var(--sans, sans-serif); color: var(--cereza, #A3132B); font-variant-numeric: tabular-nums; }
.calc__field input[type=range] { grid-column: 1 / -1; width: 100%; height: 44px; margin: 0; accent-color: var(--cereza, #A3132B); cursor: pointer; }
.calc__field input[type=range]:focus-visible { outline: 3px solid #1D4F91; outline-offset: 2px; }
.calc__viz { display: grid; justify-items: center; gap: 12px; }
.calc__cup { width: min(100%, 240px); height: auto; overflow: visible; }
.calc__body { fill: #fff; stroke: var(--tinta, #231915); stroke-width: 4; stroke-linejoin: round; }
.calc__handle { fill: none; stroke: var(--tinta, #231915); stroke-width: 4; stroke-linecap: round; }
.calc__steam { fill: none; stroke: var(--tinta, #231915); stroke-width: 3; stroke-linecap: round; opacity: .35; }
.calc__fill { fill: var(--tinta, #231915); transform-box: fill-box; transform-origin: bottom; transform: scaleY(var(--fill, .18)); transition: transform .6s var(--ease, cubic-bezier(.16, 1, .3, 1)); }
.calc__legend { margin: 0; font-size: 13.5px; color: var(--tinta-suave, #5A524D); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; justify-content: center; }
.calc__legend i { width: 12px; height: 12px; border-radius: 3px; background: var(--tinta, #231915); display: inline-block; }
.calc__legend b { width: 12px; height: 12px; border-radius: 3px; background: #fff; border: 1.5px solid var(--tinta, #231915); display: inline-block; }
.calc__results { margin: 0; width: 100%; display: grid; gap: 0; border-top: 1px solid var(--linea, rgba(35,25,21,.18)); }
.calc__results > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea, rgba(35,25,21,.18)); }
.calc__results dt { color: var(--tinta-suave, #5A524D); font-size: 15px; }
.calc__results dd { margin: 0; font: 700 18px var(--sans, sans-serif); font-variant-numeric: tabular-nums; color: var(--tinta, #231915); }
.calc__sum { margin: 18px 0 0; font-weight: 700; }
.calc__note { margin: 8px 0 0; font-size: 13.5px; color: var(--tinta-suave, #5A524D); }
@media (max-width: 760px) { .calc__grid { grid-template-columns: 1fr; } }

.chk__list { list-style: none; margin: 0 0 20px; padding: 0; border-top: 1px solid var(--linea, rgba(35,25,21,.18)); }
.chk__list li { border-bottom: 1px solid var(--linea, rgba(35,25,21,.18)); }
.chk__list label { display: flex; gap: 14px; align-items: center; padding: 14px 0; cursor: pointer; line-height: 1.4; }
.chk__list input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--cereza, #A3132B); }
.chk__list input:focus-visible { outline: 3px solid #1D4F91; outline-offset: 2px; }
.chk__list input:checked + span { font-weight: 700; }
.chk__result { display: flex; align-items: center; gap: 18px; }
.chk__beans { display: flex; gap: 6px; flex: none; }
.chk__beans i { width: 22px; height: 30px; border-radius: 50%; background: rgba(35,25,21,.12); border: 1.5px solid rgba(35,25,21,.25); transition: background .35s var(--ease, ease), transform .45s var(--ease, ease), border-color .35s; }
.chk__beans i.on { background: var(--tinta, #231915); border-color: var(--tinta, #231915); transform: rotate(-12deg) scale(1.08); }
.chk__result p { margin: 0; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .calc__fill, .chk__beans i { transition: none; } }