@layer ficha {

@scope (.cos-ficha) {

.pg { height: 100%; display: grid; grid-template-columns: 1.5fr 1fr; gap: 6mm; }
.esq, .dre { display: grid; min-height: 0; gap: 5mm; }
.esq { grid-template-rows: 1fr; }
.dre { grid-template-rows: auto 1fr; }
.esq .ex { height: 100%; }
.e1 .ex-cos { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 3mm; }


.planta { container-type: size; display: grid; place-items: center; background: var(--il-cel); border: var(--gruix) solid var(--il-contorn); border-radius: var(--radi); overflow: hidden; min-height: 0; }
.pl-in { width: min(100cqw, 100cqh * 0.625); }
.e1 .banc { justify-content: center; }
.banc-t { font-size: var(--t-s); color: var(--tinta-suau); text-transform: uppercase; letter-spacing: .05em; }
.arrossega { font-size: var(--t-l); }


.necessitats { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; }
.targeta { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1mm; padding: 2mm 1mm; font-weight: 700; border-radius: var(--radi); }
.targeta .img, .targeta .img-ph { width: 21mm; }
button.targeta.on { background: var(--acento-suau); color: inherit; border-width: 3.5px; }
.targeta.on::after { content: "✓"; position: absolute; top: 1mm; right: 2mm; color: var(--acento); }


.vf { display: grid; align-content: space-between; gap: 3mm; height: 100%; }
.vf li { display: grid; gap: 1.5mm; padding: 2mm 3mm; border: var(--gruix) solid var(--acento); border-radius: var(--radi); background: var(--acento-suau); }
.vf li div { display: flex; gap: 6mm; }

}
}