@layer ficha {

@scope (.cos-ficha) {

.pg { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 6mm; }
.dalt { display: grid; grid-template-columns: 1.08fr 1fr; gap: 7mm; }


.rueda { position: relative; width: 100%; aspect-ratio: 1; }
.rueda .il { width: 100%; height: 100%; }
.eti { position: absolute; transform: translate(-50%, -50%); }
.eti .r { width: 19mm; height: 1.9em; font-weight: 700; --n: 6; }
.rueda .marca { cursor: pointer; }
.rueda .marca .halo { stroke-width: 6; stroke-dasharray: none; }


.mescles { display: grid; gap: 3mm; height: 100%; align-content: space-between; }
.mescla { display: grid; gap: 1.5mm; padding: 2mm 3mm; border-bottom: var(--gruix) solid var(--acento); }
.eq { display: flex; align-items: center; gap: 2mm; font-size: var(--t-xl); }
.mostra { width: 11mm; height: 11mm; }
.ops { display: flex; flex-wrap: wrap; gap: 1.5mm 4mm; }
.op { gap: 1.5mm; }
.op .mostra { width: 7mm; height: 7mm; }


.temperatura { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 4mm; }
.grups { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; min-height: 0; }
.grup { display: grid; grid-template-rows: auto auto minmax(0, 1fr); border: var(--gruix) solid var(--il-contorn); border-radius: var(--radi); overflow: hidden; background: var(--paper); }
.grup .img, .grup .img-ph { width: 100%; border-radius: 0; border: 0; }
.banc-t { font-size: var(--t-s); color: var(--tinta-suau); text-transform: uppercase; letter-spacing: .05em; }
.grup h3 { padding: .15em .5em; text-align: center; font-size: var(--t-l); background: var(--acento-suau); border-block: 2.5px solid var(--il-contorn); }
.grup .zona { border: 0; border-radius: 0; align-content: flex-start; justify-content: center; gap: 2.5mm; padding: 4mm; min-height: 0; }
.temperatura .banc { justify-content: center; }
.arrossega { font-size: var(--t-l); }

}
}