@layer ficha {

@scope (.cos-ficha) {
:scope { --realce: var(--il-lila); }
.pg { height: 100%; display: grid; gap: 4mm; min-height: 0; }
.pg-comparar { grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr); }
.pg-causes { grid-template-rows: minmax(0, .8fr) minmax(0, .62fr) minmax(0, 1.2fr); }
.pg .ex { height: 100%; }
.pg .ex-cos { display: grid; grid-template-rows: minmax(0, 1fr); min-height: 0; }
.pg .ex-cos > * { min-height: 0; }

.quatre { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 3mm; }
.nens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4mm; }
.infant { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; justify-items: center; gap: 1mm; padding: 2mm; border: var(--gruix) solid var(--linia); border-radius: var(--radi); background: var(--paper); }
.infant .im { width: 100%; height: 100%; }
.infant b { font-size: var(--t-l); line-height: 1; }
.resultat { padding: .05em .8em; font-weight: 800; font-size: var(--t-l); border-radius: 999px; background: color-mix(in srgb, var(--realce) 40%, var(--paper)); border: var(--gruix) solid var(--linia); }
.preguntes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 4mm; }
.q1, .q2 { padding: 2mm 4mm; border: var(--gruix) solid var(--linia); border-radius: var(--radi); background: var(--paper); font-weight: 700; }
.q1 { display: grid; grid-template-rows: auto 12mm; gap: 2mm; align-content: center; }
.q1 .r.caixa { width: 100%; height: 100%; font-size: var(--t-l); }
.q2 { display: grid; grid-template-rows: auto auto; gap: 1mm; }
.q2 span { display: flex; justify-content: space-between; gap: 2mm; }

.pams { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 5mm; }
.pams-dib { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 3mm; padding: 3mm; border: var(--gruix) solid var(--linia); border-radius: var(--radi); background: var(--paper); }
.pam-fila { display: grid; grid-template-columns: 14mm minmax(0, 1fr); align-items: center; gap: 2mm; }
.pam-fila b { font-size: var(--t-s); }
.taula-llarga { height: 70%; border: var(--gruix) solid var(--linia); border-radius: 4px; background: color-mix(in srgb, var(--il-marro) 45%, var(--paper)); }
.pam-cadena { display: flex; height: 70%; width: 100%; }
.pam-cadena i { flex: 0 0 calc(100% / 24 * (24 / var(--p))); display: grid; place-items: center; font-style: normal; font-weight: 800; line-height: 1; border: var(--gruix) solid var(--linia); background: color-mix(in srgb, var(--realce) 45%, var(--paper)); }
.pams-q { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 3mm; }
.pq { display: grid; align-content: start; gap: 1.5mm; padding: 2mm 3mm; border: var(--gruix) solid var(--linia); border-radius: var(--radi); background: var(--paper); font-weight: 700; line-height: 1.2; }
.pq span { display: flex; justify-content: space-between; gap: 2mm; }
.pq span.v { flex-direction: column; justify-content: flex-start; gap: 2mm; }
.pq .tria { align-items: flex-start; }

.causes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 3mm 5mm; }
.causes .tria { align-items: center; padding: 2mm 4mm; border: var(--gruix) solid var(--linia); border-radius: var(--radi); background: var(--paper); font-weight: 700; font-size: var(--t-l); line-height: 1.15; }
.causes .tria input { flex: none; }

.dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 18mm auto; align-content: space-evenly; gap: 3mm 5mm; }
.jo { display: grid; grid-template-columns: minmax(0, 1fr) 24mm auto; align-items: center; gap: 3mm; padding: 2mm 4mm; border: var(--gruix) solid var(--linia); border-radius: var(--radi); background: var(--paper); }
.jo b { line-height: 1.15; }
.caixa-cm { align-self: stretch; border: var(--gruix) solid var(--acento); border-radius: var(--radi); background: color-mix(in srgb, var(--realce) 25%, var(--paper)); }
.jo i { font-style: normal; font-weight: 800; }
.encercla { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 6mm; font-weight: 800; font-size: var(--t-l); }
.encercla span { padding: .1em 1.2em; border: var(--gruix) solid var(--linia); border-radius: 999px; background: var(--paper); }

.flors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.4fr); gap: 5mm; }
.flor { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: 2mm; padding: 2mm; border: var(--gruix) solid var(--linia); border-radius: var(--radi); background: var(--paper); }
.flor .il { height: 100%; width: auto; max-width: 100%; }
.flor-f { display: flex; align-items: center; gap: 3mm; font-weight: 800; font-size: var(--t-l); line-height: 1; }
.flor-f .r.caixa { height: 1.4em; width: 2.2em; }
.frases-f { display: grid; align-content: space-evenly; gap: 2mm; padding: 2mm 3mm; border: var(--gruix) solid var(--linia); border-radius: var(--radi); background: var(--paper); }
.frases-f > p { font-weight: 800; }
.frases-f .tria { align-items: flex-start; font-weight: 700; line-height: 1.2; }

}
}