
.cual--proteina { --c: var(--vino); }
.cual--carbohidratos { --c: var(--amarillo); }
.cual--grasa { --c: var(--rojo); }
.cual--alcohol { --c: #B98AA0; }


.cual__carta { cursor: pointer; }
.cual__toque { position: absolute; inset: 0; z-index: 2; width: 100%; border: 0; padding: 0; background: transparent; border-radius: 20px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cual__toque:focus-visible { outline: 3px solid var(--rojo); outline-offset: -7px; }
.cual__toque:disabled { cursor: default; }
.cual__carta:active:not(.elegida) { transform: scale(.97); }
@media (hover: hover) { .cual__carta:hover:not(.elegida) { transform: translateY(-3px); box-shadow: 0 8px 0 -2px var(--vino); } }
.cual__carta.elegida { box-shadow: 0 0 0 4px var(--vino); }
.cual__carta.elegida.bien { box-shadow: 0 0 0 5px var(--amarillo); }
.cual__carta.tenia { box-shadow: 0 0 0 5px var(--amarillo); }
.mom__carta.cual__carta.sale { transform: translateX(-40px); opacity: 0; }
.mom__pregunta + .mom__pista { margin-top: -6px; }


.cual__ficha { display: grid; gap: 8px; padding: 14px 16px 12px; border: 2px solid var(--vino); border-radius: 22px; background: var(--crema); cursor: pointer; animation: mom-aparece .3s ease; }
.cual__ficha.se-va { opacity: 0; transition: opacity .3s ease; }
.cual__veredicto { margin: 0; text-align: center; font: 600 1.15rem/1.15 var(--f-ui); }
.cual__ficha.mal .cual__veredicto { color: var(--rojo); }
.cual__cab { margin: 0; text-align: center; font-size: .9rem; color: var(--tinta-2); }
.cual__cab b { color: var(--vino); font-weight: 600; }
.cual__sub { margin: 4px 0 0; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); }
.cual__tira { display: flex; height: 24px; border: 2px solid var(--vino); border-radius: 999px; overflow: hidden; background: #FFFDF4; }
.cual__tira span { flex: none; width: 0; background: var(--c); transition: width .55s cubic-bezier(.3, .8, .3, 1) calc(var(--k) * .28s); }
.cual__tira span + span { box-shadow: inset 2px 0 0 #FFFDF4; }
.cual__ficha.arma .cual__tira span { width: var(--w); }
.cual__macros { display: grid; gap: 5px; margin: 2px 0 0; padding: 0; list-style: none; }
.cual__macros li { display: grid; grid-template-columns: 12px 1fr auto 3.3em; align-items: center; gap: 10px; font-size: .95rem; line-height: 1.2; opacity: 0; transform: translateY(5px); transition: opacity .3s ease calc(var(--k) * .28s + .15s), transform .3s ease calc(var(--k) * .28s + .15s); }
.cual__ficha.arma .cual__macros li { opacity: 1; transform: none; }
.cual__macros i { width: 12px; height: 12px; border-radius: 4px; border: 1.5px solid var(--vino); background: var(--c); }
.cual__macros b { font-weight: 600; }
.cual__macros em { font-style: normal; text-align: right; color: var(--tinta-2); }
.cual__tiempo { height: 3px; margin-top: 4px; border-radius: 2px; overflow: hidden; background: var(--linea); }
.cual__tiempo i { display: block; height: 100%; background: var(--vino); transform-origin: left; }
.cual__ficha.arma .cual__tiempo i { transform: scaleX(0); transition: transform var(--dura, 3800ms) linear 1.1s; }

@media (prefers-reduced-motion: reduce) {
  .cual__ficha { animation: none; }
  .cual__tira span, .cual__macros li { transition: none; }
  .cual__ficha.arma .cual__tiempo i { transition-delay: 0s; }
}
