@layer ficha {

@scope (.cos-ficha) {
:scope {
  --realce: color-mix(in srgb, var(--il-herba) 55%, var(--paper));
  --realce-fuerte: var(--il-blau);
  --trazo-h: var(--il-contorn);
}
.cuadro-1 { height: 100%; display: grid; grid-template-rows: minmax(0, 1.6fr) minmax(0, 1fr); gap: 4mm; }
.cuadro-2 { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, .85fr); gap: 3mm; }
.cuadro-1 > .ex, .cuadro-2 > .ex { height: 100%; }


.saludos { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, .55fr); row-gap: 14mm; }
.fila-personas, .fila-frases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4mm; }
.persona { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; justify-items: center; gap: 1.5mm; padding: 2mm; border: 2px solid var(--trazo-h); border-radius: var(--radi); min-height: 0; }
.foto-pe { display: block; position: relative; width: 100%; min-height: 0; }
.foto-pe .img, .foto-pe .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.persona b { font-size: var(--t-m); line-height: 1.1; text-align: center; }
.saludo-caja { display: grid; grid-template-rows: auto minmax(0, 1fr); justify-items: center; gap: 1.5mm; padding: 2mm 3mm; border: 2px dashed var(--trazo-h); border-radius: var(--radi); background: var(--realce); text-align: center; font-weight: 700; font-size: var(--t-m); line-height: 1.2; }
.saludo-caja span { align-self: center; }


.intenciones { height: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3mm; }
.intencion { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 2mm; padding: 2mm; border: 2px solid var(--trazo-h); border-radius: var(--radi); min-height: 0; }
.foto-in { display: block; position: relative; min-height: 0; }
.foto-in .img, .foto-in .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pie-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2mm; align-items: center; }
.pie-in b { font-size: var(--t-m); line-height: 1.1; }
.ordre { width: 11mm; height: 11mm; display: grid; place-items: center; border: 2px solid var(--trazo-h); border-radius: 8px; background: var(--realce); font-weight: 800; font-size: var(--t-l); line-height: 1; }


.cortesia { height: 100%; display: grid; grid-template-rows: auto repeat(3, minmax(0, 1fr)); gap: 2mm; }
.cuadro-corto { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3mm; padding: 1.5mm 2mm; border: 2px dashed var(--trazo-h); border-radius: var(--radi); background: var(--realce); }
.cuadro-corto span { text-align: center; padding: .8mm 2mm; border: 1.5px solid var(--trazo-h); border-radius: 999px; background: var(--paper); font-weight: 800; font-size: var(--t-m); }
.regla-c { display: grid; grid-template-columns: 52mm minmax(0, 1fr); align-items: center; gap: 4mm; border-bottom: 2px dotted var(--realce-fuerte); }
.cuando { padding: 1.5mm 3mm; border-radius: 8px; background: var(--realce-fuerte); color: var(--trazo-h); font-weight: 800; font-size: var(--t-m); line-height: 1.15; }
.frase-c { font-size: var(--t-l); font-weight: 600; line-height: 1.2; padding: 1mm 0 1.5mm; }
.frase-c .r { height: 1.4em; }
.regla-c { padding-bottom: .5mm; }


.dos-personas { height: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3mm; }
.a-quien { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 1.5mm; padding: 2mm; border: 2px solid var(--trazo-h); border-radius: var(--radi); min-height: 0; }
.foto-aq { display: block; position: relative; min-height: 0; }
.foto-aq .img, .foto-aq .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.rotulo-aq { text-align: center; font-weight: 800; font-size: var(--t-m); padding: .5mm; border-radius: 6px; background: var(--realce); }
.dos-frases { display: grid; gap: 1.5mm; }
.dos-frases .tria { padding: 1mm 2mm; border: 1.5px solid var(--linia); border-radius: 8px; font-weight: 600; line-height: 1.15; font-size: var(--t-s); }


.mi-peticion { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 4mm; }
.dib-pe { display: grid; min-height: 0; }
.esc-pe { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 2mm; }
.titulo-pe { padding: 1.5mm 3mm; border-radius: 8px; background: var(--realce); border: 2px solid var(--realce-fuerte); font-weight: 800; font-size: var(--t-l); }


.burbujas { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1.1fr) minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.05fr); gap: 2mm; }
.cartel { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4mm; padding: 3mm 4mm; border-radius: var(--radi); background: var(--realce-fuerte); }
.cartel h2 { font-size: var(--t-m); line-height: 1.2; }
.sello-b { padding: .3mm 3mm; border-radius: 999px; background: var(--paper); font-weight: 800; font-size: var(--t-s); }
.burbuja { display: grid; grid-template-columns: 26mm minmax(0, 1fr); gap: 3mm; align-items: stretch; min-height: 0; }
.quien-habla { display: grid; place-content: center; text-align: center; gap: 1mm; border-radius: var(--radi); background: var(--trazo-h); color: var(--paper); padding: 2mm; }
.quien-habla b { font-size: var(--t-xl); line-height: 1; }
.quien-habla small { font-size: var(--t-s); line-height: 1.1; }
.dialogo { display: block; text-align: center; padding: 3mm 4mm; border: 2px solid var(--trazo-h); border-radius: 22px 22px 22px 4px; background: var(--realce); font-size: 1.15em; line-height: 1.3; font-weight: 600; }
.burbuja:nth-of-type(2) .dialogo { font-size: 1.22em; }
.burbuja:nth-of-type(3) .dialogo { font-size: 1.25em; }
.burbuja:nth-of-type(4) .dialogo { font-size: 1.22em; }
.dialogo i { font-style: normal; font-weight: 800; border-bottom: 2px solid var(--trazo-h); }

}
}