@layer ficha {

@scope (.cos-ficha) {

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


.lg-avisos { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 5mm; align-items: stretch; }
.lg-aviso { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 2mm; }
.lg-cartell { display: grid; align-content: center; justify-items: center; gap: 2mm; padding: 3mm; border: 1.2mm solid var(--tinta); border-radius: 8px; background: var(--paper); text-align: center; }
.lg-a { background: var(--il-groc); }
.lg-a b { font-size: calc(var(--t-xl) * 1.1); font-weight: 900; color: var(--il-vermell); line-height: 1.05; }
.lg-a span { font-size: var(--t-l); font-weight: 700; line-height: 1.3; }
.lg-b span { font-size: calc(var(--t-l) * 1.1); font-weight: 500; line-height: 1.5; }
.lg-ops { justify-self: center; font-weight: 800; }
.lg-foto-a { height: 100%; aspect-ratio: 3 / 4; display: grid; min-height: 0; }


.lg-gelats { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5mm; }
.lg-cartell-gelats { min-height: 0; display: grid; grid-template-rows: repeat(4, auto); align-content: space-evenly; justify-items: center; gap: 3mm; padding: 4mm; background: var(--il-cel); border: 1.4mm solid var(--tinta); border-radius: 12px; }
button.lg-m { font: inherit; color: var(--tinta); background: transparent; border: 0; border-radius: 6px; padding: .5mm 3mm; }
button.lg-m.on { background: var(--realce-suau); outline: 1.2mm double var(--realce); outline-offset: -1mm; }
button.lg-m.lg-gran { font-size: calc(var(--t-xl) * 2.1); font-weight: 900; line-height: 1.05; letter-spacing: 2px; }
button.lg-m.lg-mitja { font-size: calc(var(--t-xl) * 1.5); font-weight: 800; }
button.lg-m.lg-petita { font-size: calc(var(--t-xl) * 1.1); font-weight: 700; }
button.lg-m.lg-mini { font-size: var(--t-l); font-weight: 600; }
.lg-foto-b { height: 100%; aspect-ratio: 4 / 5; display: grid; min-height: 0; }


.lg-ordre { height: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5mm; }
.lg-foto-c { height: 100%; aspect-ratio: 3 / 4; display: grid; min-height: 0; }
.lg-linies { min-height: 0; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 3mm; }
.lg-l { display: flex; align-items: center; gap: 5mm; padding: 0 5mm; background: var(--paper); border: var(--gruix) solid var(--realce-fosc); border-radius: var(--radi); }
.lg-l .ordre { flex: none; width: 11mm; height: 11mm; background: var(--paper); }
.lg-l b { flex: 1; text-align: center; line-height: 1; }
.lg-l1 b { font-size: calc(var(--t-xl) * 2); font-weight: 900; }
.lg-l2 b { font-size: calc(var(--t-xl) * 1.3); font-weight: 800; }
.lg-l3 b { font-size: 1.05em; font-weight: 700; }
.lg-l4 b { font-size: .8em; font-weight: 600; }


.lg-obert { height: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5mm; }
.lg-foto-d { height: 100%; aspect-ratio: 4 / 3; display: grid; min-height: 0; }

}
}