@layer ficha {

@scope (.cos-ficha) {

.pg { height: 100%; display: grid; grid-template-rows: auto auto auto; align-content: space-between; gap: 4mm; }
.ex-cos { flex: none; min-height: auto; display: grid; gap: 2.5mm; align-content: start; }


.circuit { border: var(--gruix) solid var(--il-contorn); border-radius: var(--radi); overflow: hidden; }
.pastilla { display: grid; place-items: center; width: 2.1em; height: 2.1em; margin: -1.05em 0 0 -1.05em; border-radius: 50%; background: var(--il-groc); color: var(--il-contorn); border: 2.5px solid var(--il-contorn); font-style: normal; font-weight: 800; }
.arrossega { font-size: var(--t-m); }
.banc { justify-content: center; }
.banc-t { font-size: var(--t-s); color: var(--tinta-suau); text-transform: uppercase; letter-spacing: .05em; }


.habits { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3mm; }
.targeta { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1mm; padding: 2mm 1.5mm; border-radius: var(--radi); font-weight: 700; font-size: var(--t-s); line-height: 1.2; }
.targeta .img, .targeta .img-ph { width: 28mm; }
button.targeta.on { background: var(--acento-suau); color: inherit; border-width: 3.5px; }
.targeta.on::after { content: "✓"; position: absolute; top: .5mm; right: 2mm; color: var(--acento); font-size: 1.3em; }


.sessio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; }
.fase { display: grid; grid-template-columns: 26mm 1fr; grid-template-areas: "i t" "i r"; align-items: center; gap: 1.5mm 3mm; padding: 2mm 3mm; border: var(--gruix) solid var(--acento); border-radius: var(--radi); background: var(--acento-suau); }
.fase .img, .fase .img-ph { grid-area: i; width: 26mm; }
.fase span { grid-area: t; font-weight: 700; font-size: var(--t-s); line-height: 1.25; }
.fase .r { grid-area: r; justify-self: start; }
.fase .r { --n: 1; width: 2.2em; }

}
}