@layer ficha {

@scope (.cos-ficha) {

.p1 { height: 100%; display: grid; }
.p1 .ex-cos { display: flex; }
.p1 .ex-cos > * { flex: 1; min-width: 0; }
.cartell-i-unir { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 5mm; }

.cartell { border: 3px solid var(--acento); border-radius: var(--radi); background: var(--il-groc); overflow: hidden; }
.capcartell { display: flex; justify-content: space-between; align-items: baseline; padding: 2mm 5mm; background: var(--acento); color: var(--paper); font-weight: 800; font-size: var(--t-l); }
.capcartell span { font-size: var(--t-s); font-weight: 700; }
.cartell dl { margin: 0; padding: 3mm 5mm 4mm; display: grid; gap: 2.5mm; }
.cartell dl > div { display: grid; grid-template-columns: 20mm 26mm 1fr; align-items: center; gap: 3mm; }
.ic { display: flex; border: var(--gruix) solid var(--il-contorn); border-radius: 8px; overflow: hidden; background: var(--paper); }
.ic > .img, .ic > .img-ph { width: 100%; aspect-ratio: 1; }
.cartell dt { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: var(--t-s); text-align: center; background: var(--paper); border: var(--gruix) solid var(--il-contorn); border-radius: 999px; padding: .1em 0; }
.cartell dd { margin: 0; line-height: 1.4; font-size: var(--t-m); }

.unir { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24mm; padding: 0 3mm; min-height: 0; }
.col { display: grid; grid-auto-rows: minmax(0, 1fr); gap: 3mm; }
.fila { display: flex; align-items: center; justify-content: space-between; gap: 3mm; padding: 1.5mm 4mm; border: var(--gruix) solid var(--linia); border-radius: var(--radi); background: var(--paper); font-weight: 700; }
.col + .col .fila { justify-content: flex-start; }

.p2 { height: 100%; display: grid; grid-template-rows: auto auto 1fr; gap: 4mm; }
.p2 .ex:last-child .ex-cos { display: flex; }

.respostes { display: grid; gap: 2.5mm; }
.repte { padding: 2mm 4mm; border: var(--gruix) solid var(--acento); border-radius: var(--radi); background: var(--acento-suau); }
.repte .q { font-weight: 800; margin-bottom: 1mm; }
.repte .q b { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; margin-right: .4em; border-radius: 50%; background: var(--acento); color: var(--paper); font-size: var(--t-s); }
.resp { line-height: 1.55; }
.frm { padding: .05em .25em; border-bottom: 2px dotted var(--acento); border-radius: 3px; }
.frm.on { background: var(--paper); outline: 2px solid var(--acento); font-weight: 700; }
.frm.ok { outline: 2px solid var(--ok); }
.frm.reintent { outline: 2px dashed var(--reintent); }

.preguntes { display: grid; gap: 3mm; }
.pqs { display: grid; grid-template-columns: 1fr 1fr; gap: 2mm 5mm; }
.pq { padding: 1.5mm 3mm; border: var(--gruix) solid var(--linia); border-radius: var(--radi); }
.pq .q { display: flex; align-items: center; gap: 2mm; font-weight: 700; }
.pq .q b { color: var(--acento); width: 1em; }
.pq .zona { min-width: 7em; min-height: 1.8em; padding: 0; }
.pq .a { color: var(--tinta-suau); font-style: italic; margin-top: .5mm; padding-left: 1.4em; }
.banc { justify-content: center; }
.banc-t { font-size: var(--t-s); color: var(--tinta-suau); text-transform: uppercase; letter-spacing: .05em; }

.entrevista { flex: 1; display: grid; grid-template-columns: 56mm 1fr; gap: 4mm; min-height: 0; }
.escena { align-self: stretch; min-height: 0; border: var(--gruix) solid var(--il-contorn); border-radius: var(--radi); overflow: hidden; display: flex; }
.escena > .img, .escena > .img-ph { width: 100%; height: 100%; aspect-ratio: auto; }
.treball { display: grid; grid-template-rows: auto 1fr; gap: 2mm; min-height: 0; }
.ajuda { font-size: var(--t-s); color: var(--tinta-suau); }
.escriu { border: var(--gruix) solid var(--acento); border-radius: var(--radi); background-color: var(--paper); min-height: 0; }

}
}