@layer ficha {

@scope (.cos-ficha) {

:scope { --realce: var(--il-blau); --realce-fosc: var(--il-blau-fosc); --realce-suau: var(--il-cel); }
.pg { height: 100%; display: grid; gap: 4mm; }
.pp-p1 { grid-template-rows: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
.pp-p2 { grid-template-rows: minmax(0, 1.7fr) minmax(0, 1fr); }
.pg > .ex { min-height: 0; }


.pp-uneix { height: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) 7mm 7mm auto; column-gap: 5mm; padding: 1mm 2mm; }
.pp-img { min-height: 0; padding: 1.5mm; border: var(--gruix) solid var(--realce); border-radius: var(--radi); background: var(--paper); display: grid; }
.pp-img > * { min-height: 0; }
.pp-punt-a, .pp-punt-b { display: grid; place-items: center; }
.pp-paraula { text-align: center; font-size: var(--t-xl); font-weight: 800; line-height: 1.2; padding: 1.5mm 0; border: var(--gruix) solid var(--realce-fosc); border-radius: var(--radi); background: var(--realce-suau); }


.pp-sil-graella { height: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 3mm 6mm; }
.pp-sil-fila { display: flex; align-items: center; justify-content: space-between; gap: 2mm; padding: 2.5mm 3mm; border: var(--gruix) solid var(--realce); border-radius: var(--radi); }
.pp-sils { display: inline-flex; flex: none; gap: 1.2mm; }
.pp-sils b { flex: none; white-space: nowrap; padding: .1em .35em; font-size: var(--t-m, 1em); line-height: 1.3; background: var(--realce-suau); border: var(--gruix) solid var(--realce-fosc); border-radius: 6px; }
.pp-fletxa { font-size: var(--t-l); color: var(--realce-fosc); }


.pp-estany { height: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 3mm 5mm; padding: 2mm 3mm; background: var(--realce-suau); border: var(--gruix) dashed var(--realce-fosc); border-radius: 18px; }
button.pp-peix { position: relative; display: grid; place-items: center; font: inherit; padding: 0 8mm 0 3mm; border: var(--gruix) solid var(--realce-fosc); border-radius: 50% 40% 40% 50% / 60% 60% 60% 60%; background: var(--paper); color: var(--tinta); }
button.pp-peix::after { content: ""; position: absolute; right: 1.2mm; top: 50%; width: 0; height: 0; margin-top: -3mm; border-top: 3mm solid transparent; border-bottom: 3mm solid transparent; border-left: 4mm solid var(--realce-fosc); }
button.pp-peix::before { content: ""; position: absolute; left: 5mm; top: 3mm; width: 1.4mm; height: 1.4mm; border-radius: 50%; background: var(--realce-fosc); }
.pp-peix-cos { font-size: var(--t-l); font-weight: 800; line-height: 1.2; }
button.pp-peix.on { background: var(--realce); color: var(--paper); border-style: double; border-width: 1.2mm; }


.pp-tres { height: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5mm; }
.pp-targeta { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 3mm; padding: 2mm; border: var(--gruix) solid var(--realce); border-radius: var(--radi); }
.pp-foto { min-height: 0; display: grid; }
.pp-foto > * { min-height: 0; }
.pp-opcions { display: grid; gap: 2.5mm; padding: 0 2mm 1mm; font-size: var(--t-l); font-weight: 700; }


.pp-obert { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 3mm; }

}
}