/* GENERADO por assets/_generators/marcos.cjs: no editar a mano. Lo común sale de assets/_generators/marcos-base.css. */
/* Marcos para fotos (src/lib/marcos.js, assets/_generators/marcos.cjs).
   Cada marco es un WebP con la pantalla transparente: la foto va DEBAJO, en el hueco (sus medidas en
   la parte generada de esta hoja), y el marco encima. La sombra dura sigue la silueta del
   aparato (drop-shadow sin desenfoque), como una pegatina recortada. */
.mk { position: relative; display: inline-block; width: var(--mk-w, 300px); max-width: 100%; margin: 6px; vertical-align: top; text-align: center; }
.mk .mk__caja { position: relative; display: block; aspect-ratio: var(--mk-ar, 1); filter: drop-shadow(3px 3px 0 #000); }
/* El hueco recorta la foto (su sitio en la parte generada); dentro, la foto cubre el hueco y se encuadra con
   --mk-fx / --mk-fy (punto que se ve, en %) y --mk-z (zoom), que ponen las clases .mk-x-N .mk-y-N .mk-z-N. */
.mk .mk__hueco { position: absolute; display: block; overflow: hidden; background: #000; }
.mk .mk__foto { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--mk-fx, 50%) var(--mk-fy, 50%); transform: scale(var(--mk-z, 1)); transform-origin: var(--mk-fx, 50%) var(--mk-fy, 50%); }
.mk .mk__marco { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.mk figcaption { display: inline-block; max-width: 100%; margin-top: 10px; padding: 3px 7px; font: 8px/1.3 var(--font-pixel); color: #111; text-transform: uppercase; letter-spacing: 1px; background: var(--bb-cream); box-shadow: 2px 2px 0 #000; transform: rotate(-1.5deg); overflow-wrap: anywhere; }
.mk a { display: block; }

/* Bloque de Texto: el marco va flotando junto al texto (como la polaroid), más pequeño y un poco torcido. */
.mk--flota { float: left; width: calc(var(--mk-w, 300px) * .62); max-width: 46%; margin: 4px 16px 10px 2px; transform: rotate(-2deg); }
.mk--flota.mk--derecha { float: right; margin: 4px 2px 10px 16px; transform: rotate(2deg); }

/* Los marcos de siempre, también flotando en el bloque de Texto (la polaroid ya flotaba). */
.cms-figure--flota { float: left; width: 200px; max-width: 46%; margin: 4px 16px 10px 2px; transform: rotate(-1.5deg); }
.cms-figure--flota.cms-figure--derecha { float: right; margin: 4px 2px 10px 16px; transform: rotate(1.5deg); }
.cms-figure--flota img { width: 100%; }

/* Ficha de artista: el marco en la columna de la foto (230 px), en lugar de la polaroid. */
.art-profile__marco { width: min(var(--mk-w, 300px), 240px); margin: 6px 0 4px; }

/* Galería: cada foto con el mismo marco, del ancho de su celda. */
.cms-gallery .mk { display: block; width: min(100%, var(--mk-w, 300px)); margin: 0 auto; }
.cms-gallery__polaroid { float: none; display: block; margin: 4px; }
.cms-gallery__polaroid a { display: block; }
.cms-gallery__polaroid img { width: 100%; height: auto; }
.cms-gallery li:nth-child(even) .cms-gallery__polaroid { transform: rotate(3deg); }
.cms-gallery li:nth-child(odd) .mk { transform: rotate(-1.5deg); }
.cms-gallery li:nth-child(even) .mk { transform: rotate(1.5deg); }
.cms-gallery .mk img { aspect-ratio: auto; }

/* Foto de perfil con marco (tema: avatarFrame). La foto (cuadrada) se recorta a la pantalla del aparato. */
.pf-marco { width: 100%; margin: 0 0 4px; }
/* El ancho y el alto de la foto los pone el hueco del marco (va después, en la parte generada). */
.pf-marco .pf-avatar { aspect-ratio: auto; border: 0; outline: 0; }
.pe-pv__ava.mk { float: left; width: 58px; margin: 0 8px 2px 0; }
.pe-pv__ava.mk .pe-pv__avatar { margin: 0; border: 0; }

/* Página de marcos del perfil (/cuenta/perfil/marco): tu foto dentro de cada marco. Cada baldosa encaja
   el marco en 150×190 según su proporción. */
.mkp__grupo { margin: 12px 0 0; padding: 6px 8px 10px; border: 1px solid #333; }
.mkp__grupo legend { padding: 0 6px; font: 16px var(--font-pixel); text-transform: uppercase; color: var(--bb-pink); }
.mkp__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.mkp__tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; min-height: 236px; padding: 12px 6px 8px; text-align: center; background: #070707 url(/s/assets/textures/checker-cyan-dark-64.b0eb5f9978.png); border: 2px outset #555; }
.mkp__tile input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; z-index: 1; }
.mkp__tile:hover { border-color: var(--bb-cyan-edge); }
.mkp__tile:has(input:checked) { background-color: #002024; border: 2px inset var(--bb-cyan); box-shadow: inset 0 0 0 2px var(--bb-cyan-edge), 0 0 12px rgba(3, 247, 254, .45); }
.mkp__tile:has(input:checked) .mkp__name { color: #002024; background: var(--gel-cyan); }
.mkp__tile:has(input:focus-visible) { outline: 1px dotted var(--bb-cyan); outline-offset: 3px; }
.mkp__mk { width: min(150px, calc(190px * var(--mk-ar))); margin: auto 0 0; }
.mkp__sin { display: block; margin: auto 0 0; }
.mkp__sin img { display: block; width: 120px; height: 120px; object-fit: cover; border: 3px solid #000; outline: 2px solid #444; }
.mkp__name { display: inline-block; padding: 2px 6px; font: var(--font-ui); text-transform: uppercase; color: var(--bb-white); background: #000; border: 1px solid #333; }
.mkp__bar { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px -8px -8px; padding: 10px 8px; background: rgba(0, 0, 0, .92); border-top: 2px solid var(--bb-pink); }

/* Editor de encuadre (partials/encuadre.eta): la foto en su marco, que se arrastra y se amplía, y los tres
   deslizadores que se guardan. El marco de la vista previa encaja en 220×280 según su proporción. */
.mke { margin: 10px 0 0; padding: 8px 10px 10px; border: 1px dotted #444; }
.mke[hidden] { display: none; }
.mke legend { padding: 0 4px; }
.mke__grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 14px; align-items: center; }
.mke__pv { display: grid; place-items: center; min-height: 220px; padding: 10px; background: #070707 url(/s/assets/textures/checker-cyan-dark-64.b0eb5f9978.png); border: 2px inset #444; }
.mke__mk { width: min(220px, calc(280px * var(--mk-ar, 1))); margin: 0; }
.mke .mk__hueco { cursor: grab; touch-action: none; }
.mke .mk__hueco.is-dragging { cursor: grabbing; }
.mke__ctrl .bb-label { display: flex; justify-content: space-between; margin-top: 6px; }
.mke__ctrl output { font: 16px var(--font-term); color: var(--bb-cyan); }
.mke__range { width: 100%; margin: 2px 0 0; accent-color: var(--bb-cyan); }
.mke__acciones { margin: 8px 0 0; }
.bb-modal .mke { border-color: #aca899; }
.bb-modal .mke__ctrl output { color: #0a246a; }

/* Selector de marcos (editor de bloques del CMS y paso 2 del editor de perfil): baldosas con una foto
   de muestra dentro. El radio queda encima, invisible pero enfocable; la baldosa marca el elegido. */
.mk-picker { margin: 8px 0 0; padding: 6px 8px 8px; border: 1px dotted #444; }
.mk-picker legend { padding: 0 4px; }
.mk-picker__grupo { margin: 8px 0 3px; font: var(--font-ui); text-transform: uppercase; color: var(--bb-pink); }
.mk-picker__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.mk-picker label { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; min-height: 104px; padding: 5px 3px 4px; font-size: 10px; line-height: 1.15; text-align: center; color: #ddd; background: #0a0a0a url(/s/assets/textures/checker-cyan-dark-64.b0eb5f9978.png); border: 2px outset #555; overflow-wrap: anywhere; }
.mk-picker label img { width: auto; max-width: 76px; height: auto; max-height: 72px; object-fit: contain; }
.mk-picker label span { display: block; }
.mk-picker input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; }
.mk-picker label:hover { border-color: var(--bb-cyan-edge); }
.mk-picker label:has(input:checked) { color: #002024; background: var(--gel-cyan); border: 2px inset var(--bb-cyan-edge); font-weight: bold; }
.mk-picker label:has(input:focus-visible) { outline: 1px dotted var(--bb-cyan); outline-offset: 2px; }
.mk-picker__none { display: grid; place-items: center; width: 52px; height: 52px; font: 22px var(--font-term); color: var(--bb-muted); border: 2px dashed #555; }
/* Dentro de la ventana Win98/XP del editor de bloques. */
.bb-modal .mk-picker { border-color: #aca899; }
.bb-modal .mk-picker__grupo { color: #0a246a; }
.bb-modal .mk-picker label { color: #111; background: #fff; border-color: #d4d0c8; }
.bb-modal .mk-picker label:has(input:checked) { color: #fff; background: #316ac5; border-color: #0a246a; }
.bb-modal .mk-picker label:has(input:focus-visible) { outline-color: #000; }
.bb-modal .mk-picker__none { color: #555; border-color: #aca899; }

@media (max-width: 760px) {
  .mk--flota { max-width: 44%; margin-right: 12px; }
  .mk--flota.mk--derecha { margin-left: 12px; }
  .mk-picker__grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  .mk-picker label { min-height: 96px; }
  .mke__grid { grid-template-columns: minmax(0, 1fr); }
  .mkp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mkp__tile { min-height: 200px; }
  .mkp__mk { width: min(132px, calc(160px * var(--mk-ar))); }
  .mkp__sin img { width: 100px; height: 100px; }
  .mkp__bar { gap: 6px; padding: 8px; }
  .mkp__bar .bb-btn { flex: 1 1 0; justify-content: center; padding-left: 6px; padding-right: 6px; }
  .mkp__back { display: none; }
  /* En el perfil, la foto con marco va algo más grande que la de siempre (112 px): el marco se come sitio. */
  .pf-id > div:has(.pf-marco) { grid-template-columns: 150px minmax(0, 1fr); }
}

/* Medidas de cada marco y dónde va la foto (en % del marco). */
.mk--qwerty-rosa { --mk-w: 270px; --mk-ar: 600 / 1067; }
.mk--qwerty-rosa .mk__hueco { left: 10.222%; top: 13.058%; width: 80.111%; height: 34.927%; }
.mk--qwerty-pegatinas { --mk-w: 270px; --mk-ar: 600 / 1067; }
.mk--qwerty-pegatinas .mk__hueco { left: 10.444%; top: 12.684%; width: 80.667%; height: 35.301%; }
.mk--qwerty-azul { --mk-w: 260px; --mk-ar: 560 / 1227; }
.mk--qwerty-azul .mk__hueco { left: 10.822%; top: 13.692%; width: 78.082%; height: 34.074%; }
.mk--nokia-6680 { --mk-w: 300px; --mk-ar: 700 / 1356; }
.mk--nokia-6680 .mk__hueco { left: 17.5%; top: 20.004%; width: 64.833%; height: 39.104%; }
.mk--movil-corazones { --mk-w: 280px; --mk-ar: 640 / 1101; }
.mk--movil-corazones .mk__hueco { left: 16.967%; top: 13.598%; width: 68.766%; height: 49.014%; }
.mk--louekia-rosa { --mk-w: 270px; --mk-ar: 600 / 1246; }
.mk--louekia-rosa .mk__hueco { left: 19.241%; top: 16.135%; width: 61.911%; height: 33.531%; }
.mk--fomz-estrellas { --mk-w: 280px; --mk-ar: 600 / 1067; }
.mk--fomz-estrellas .mk__hueco { left: 9.333%; top: 15.683%; width: 81.889%; height: 56.795%; }
.mk--fomzfilm-slider { --mk-w: 270px; --mk-ar: 600 / 1267; }
.mk--fomzfilm-slider .mk__hueco { left: 6.575%; top: 11.807%; width: 86.575%; height: 49.821%; }
.mk--blackberry-rosa { --mk-w: 270px; --mk-ar: 600 / 1020; }
.mk--blackberry-rosa .mk__hueco { left: 9.914%; top: 17.28%; width: 84.7%; height: 37.44%; }
.mk--walkman-rosa { --mk-w: 240px; --mk-ar: 336 / 911; }
.mk--walkman-rosa .mk__hueco { left: 14.583%; top: 12.404%; width: 67.56%; height: 32.602%; }
.mk--walkman-verde { --mk-w: 240px; --mk-ar: 560 / 1217; }
.mk--walkman-verde .mk__hueco { left: 5.027%; top: 6.94%; width: 89.946%; height: 42.076%; }
.mk--ipod-classic-plata { --mk-w: 240px; --mk-ar: 600 / 1016; }
.mk--ipod-classic-plata .mk__hueco { left: 8.042%; top: 4.437%; width: 84.127%; height: 38.495%; }
.mk--ipod-nano-rosa { --mk-w: 400px; --mk-ar: 800 / 375; }
.mk--ipod-nano-rosa .mk__hueco { left: 5.739%; top: 11.872%; width: 46.957%; height: 76.243%; }
.mk--reproductor-gris { --mk-w: 300px; --mk-ar: 412 / 249; }
.mk--reproductor-gris .mk__hueco { left: 3.5%; top: 5.791%; width: 53.5%; height: 88.522%; }
.mk--motorola-tmobile { --mk-w: 160px; --mk-ar: 224 / 710; }
.mk--motorola-tmobile .mk__hueco { left: 16.981%; top: 13.989%; width: 69.811%; height: 26.49%; }
.mk--deslizante-rosa { --mk-w: 300px; --mk-ar: 384 / 206; }
.mk--deslizante-rosa .mk__hueco { left: 10.734%; top: 41.073%; width: 33.333%; height: 48.445%; }
.mk--ipod-classic { --mk-w: 150px; --mk-ar: 206 / 327; }
.mk--ipod-classic .mk__hueco { left: 6.186%; top: 4.546%; width: 86.598%; height: 43.513%; }
.mk--camara-oldroll { --mk-w: 320px; --mk-ar: 640 / 1138; }
.mk--camara-oldroll .mk__hueco { left: 6.556%; top: 10.248%; width: 81.111%; height: 61.863%; }
.mk--oldroll-mosaico { --mk-w: 300px; --mk-ar: 600 / 1067; }
.mk--oldroll-mosaico .mk__hueco { left: 18.667%; top: 21.306%; width: 58.222%; height: 44.611%; }
.mk--cybershot-rosa { --mk-w: 420px; --mk-ar: 800 / 525; }
.mk--cybershot-rosa .mk__hueco { left: 7.879%; top: 21.959%; width: 59.192%; height: 66.801%; }
.mk--cybershot-lila { --mk-w: 420px; --mk-ar: 800 / 523; }
.mk--cybershot-lila .mk__hueco { left: 7.625%; top: 21.415%; width: 59.25%; height: 67.208%; }
.mk--cybershot-hello-kitty { --mk-w: 420px; --mk-ar: 800 / 548; }
.mk--cybershot-hello-kitty .mk__hueco { left: 11.472%; top: 28.75%; width: 49.235%; height: 53.174%; }
.mk--nikon-lazos { --mk-w: 420px; --mk-ar: 800 / 680; }
.mk--nikon-lazos .mk__hueco { left: 11.563%; top: 23.75%; width: 50.938%; height: 45.515%; }
.mk--canon-ixus { --mk-w: 290px; --mk-ar: 600 / 922; }
.mk--canon-ixus .mk__hueco { left: 25.965%; top: 40.72%; width: 66.199%; height: 52.137%; }
.mk--nikon-roja { --mk-w: 300px; --mk-ar: 640 / 1007; }
.mk--nikon-roja .mk__hueco { left: 9.496%; top: 6.884%; width: 73.442%; height: 61.292%; }
.mk--sony-w50 { --mk-w: 280px; --mk-ar: 600 / 898; }
.mk--sony-w50 .mk__hueco { left: 13.856%; top: 8.996%; width: 67.582%; height: 60.09%; }
.mk--canon-fresas { --mk-w: 280px; --mk-ar: 600 / 932; }
.mk--canon-fresas .mk__hueco { left: 29.9%; top: 45.449%; width: 56.312%; height: 48.016%; }
.mk--nikon-blanca { --mk-w: 280px; --mk-ar: 600 / 902; }
.mk--nikon-blanca .mk__hueco { left: 15.571%; top: 8.838%; width: 62.714%; height: 55.401%; }
.mk--polaroid-onestep { --mk-w: 320px; --mk-ar: 469 / 672; }
.mk--polaroid-onestep .mk__hueco { left: 17.697%; top: 51.19%; width: 63.326%; height: 45.238%; }
.mk--camara-hello-kitty { --mk-w: 340px; --mk-ar: 597 / 494; }
.mk--camara-hello-kitty .mk__hueco { left: 13.903%; top: 23.279%; width: 46.901%; height: 44.939%; }
.mk--camara-fomz { --mk-w: 420px; --mk-ar: 830 / 467; }
.mk--camara-fomz .mk__hueco { left: 18.337%; top: 14.34%; width: 46.455%; height: 63.879%; }
.mk--camara-nikon { --mk-w: 400px; --mk-ar: 570 / 346; }
.mk--camara-nikon .mk__hueco { left: 7.143%; top: 20.004%; width: 62.143%; height: 70.014%; }
.mk--game-boy-color { --mk-w: 250px; --mk-ar: 600 / 1016; }
.mk--game-boy-color .mk__hueco { left: 21.637%; top: 10.063%; width: 56.726%; height: 30.057%; }
.mk--game-boy-dmg { --mk-w: 250px; --mk-ar: 600 / 1011; }
.mk--game-boy-dmg .mk__hueco { left: 20.516%; top: 15.745%; width: 50.591%; height: 30.598%; }
.mk--game-boy-color-amarilla { --mk-w: 250px; --mk-ar: 600 / 1005; }
.mk--game-boy-color-amarilla .mk__hueco { left: 21.619%; top: 9.928%; width: 58.647%; height: 30.049%; }
.mk--game-boy-pocket { --mk-w: 250px; --mk-ar: 600 / 983; }
.mk--game-boy-pocket .mk__hueco { left: 18.555%; top: 10.461%; width: 63.881%; height: 34.755%; }
.mk--gba-glacier { --mk-w: 400px; --mk-ar: 800 / 469; }
.mk--gba-glacier .mk__hueco { left: 26.146%; top: 19.004%; width: 45.463%; height: 52.108%; }
.mk--game-boy-llavero { --mk-w: 260px; --mk-ar: 600 / 897; }
.mk--game-boy-llavero .mk__hueco { left: 9.972%; top: 42.814%; width: 48.528%; height: 29.856%; }
.mk--ds-lite-rosa { --mk-w: 300px; --mk-ar: 640 / 854; }
.mk--ds-lite-rosa .mk__hueco { left: 23.024%; top: 8.774%; width: 54.049%; height: 30.415%; }
.mk--psp-negra { --mk-w: 440px; --mk-ar: 800 / 340; }
.mk--psp-negra .mk__hueco { left: 21.147%; top: 6.044%; width: 58.476%; height: 78.566%; }
.mk--psp-pegatinas { --mk-w: 440px; --mk-ar: 800 / 336; }
.mk--psp-pegatinas .mk__hueco { left: 21.846%; top: 6.838%; width: 56.103%; height: 73.504%; }
.mk--tamagotchi-verde { --mk-w: 260px; --mk-ar: 600 / 921; }
.mk--tamagotchi-verde .mk__hueco { left: 24.731%; top: 47.634%; width: 51.459%; height: 31.523%; }
.mk--tamagotchi-meets { --mk-w: 260px; --mk-ar: 584 / 689; }
.mk--tamagotchi-meets .mk__hueco { left: 27.911%; top: 25.98%; width: 45.034%; height: 39.913%; }
.mk--tele-crt-fucsia { --mk-w: 320px; --mk-ar: 640 / 848; }
.mk--tele-crt-fucsia .mk__hueco { left: 5.484%; top: 40.686%; width: 89.265%; height: 52.663%; }
.mk--tele-barbie { --mk-w: 360px; --mk-ar: 640 / 752; }
.mk--tele-barbie .mk__hueco { left: 13.906%; top: 30.718%; width: 72.813%; height: 46.011%; }
.mk--tele-retro-rosa { --mk-w: 380px; --mk-ar: 720 / 673; }
.mk--tele-retro-rosa .mk__hueco { left: 5.509%; top: 29.853%; width: 71.617%; height: 58.937%; }
.mk--imac-g3 { --mk-w: 360px; --mk-ar: 720 / 675; }
.mk--imac-g3 .mk__hueco { left: 9.621%; top: 10.551%; width: 74.119%; height: 59.548%; }
.mk--ibook-rosa { --mk-w: 380px; --mk-ar: 720 / 633; }
.mk--ibook-rosa .mk__hueco { left: 17.395%; top: 13.382%; width: 65.378%; height: 56.107%; }
.mk--tamagotchi { --mk-w: 230px; --mk-ar: 400 / 472; }
.mk--tamagotchi .mk__hueco { left: 27.835%; top: 27.084%; width: 44.33%; height: 39.315%; }
.mk--tele-rosa { --mk-w: 320px; --mk-ar: 448 / 296; }
.mk--tele-rosa .mk__hueco { left: 5.963%; top: 7.637%; width: 67.431%; height: 85.395%; }
.mk--nintendo-3ds { --mk-w: 300px; --mk-ar: 452 / 475; }
.mk--nintendo-3ds .mk__hueco { left: 19.545%; top: 9.516%; width: 60.909%; height: 35.035%; }
.mk--game-boy { --mk-w: 190px; --mk-ar: 288 / 482; }
.mk--game-boy .mk__hueco { left: 21.014%; top: 12.123%; width: 59.42%; height: 32.473%; }
.mk--wmp-xp { --mk-w: 420px; --mk-ar: 800 / 850; }
.mk--wmp-xp .mk__hueco { left: 1.813%; top: 18.769%; width: 96.012%; height: 62.245%; }
.mk--wmp-leopardo { --mk-w: 300px; --mk-ar: 600 / 1067; }
.mk--wmp-leopardo .mk__hueco { left: 7.778%; top: 8.997%; width: 66.556%; height: 25.867%; }
.mk--ventana-so-pretty { --mk-w: 380px; --mk-ar: 736 / 736; }
.mk--ventana-so-pretty .mk__hueco { left: 16.712%; top: 16.984%; width: 62.636%; height: 56.25%; }
.mk--paint-online { --mk-w: 330px; --mk-ar: 735 / 1238; }
.mk--paint-online .mk__hueco { left: 26.259%; top: 29.402%; width: 55.918%; height: 36.753%; }
.mk--photo-booth { --mk-w: 480px; --mk-ar: 900 / 675; }
.mk--photo-booth .mk__hueco { left: 7.563%; top: 17.833%; width: 63.625%; height: 57.083%; }
.mk--notepad-rosa { --mk-w: 320px; --mk-ar: 384 / 259; }
.mk--notepad-rosa .mk__hueco { left: 3.243%; top: 32.057%; width: 94.054%; height: 64.114%; }
.mk--paint { --mk-w: 420px; --mk-ar: 704 / 665; }
.mk--paint .mk__hueco { left: 13.913%; top: 10.433%; width: 85.797%; height: 71.497%; }
.mk--paint-rosa { --mk-w: 340px; --mk-ar: 482 / 482; }
.mk--paint-rosa .mk__hueco { left: 14.103%; top: 12.393%; width: 79.06%; height: 66.667%; }
.mk--cromo-estrellas { --mk-w: 340px; --mk-ar: 720 / 971; }
.mk--cromo-estrellas .mk__hueco { left: 7.319%; top: 3.524%; width: 87.452%; height: 93.181%; }
.mk--calaveras { --mk-w: 380px; --mk-ar: 720 / 720; }
.mk--calaveras .mk__hueco { left: 12.868%; top: 11.163%; width: 75.736%; height: 77.674%; }
.mk--cromo-tribal { --mk-w: 340px; --mk-ar: 720 / 965; }
.mk--cromo-tribal .mk__hueco { left: 7.821%; top: 5.002%; width: 84.358%; height: 90.034%; }
.mk--diamantes { --mk-w: 300px; --mk-ar: 640 / 961; }
.mk--diamantes .mk__hueco { left: 14.165%; top: 9.184%; width: 71.388%; height: 81.654%; }
.mk--ajedrez-cadenas { --mk-w: 380px; --mk-ar: 720 / 720; }
.mk--ajedrez-cadenas .mk__hueco { left: 6.993%; top: 6.993%; width: 86.014%; height: 86.014%; }
.mk--espino { --mk-w: 380px; --mk-ar: 720 / 703; }
.mk--espino .mk__hueco { left: 4.954%; top: 5.628%; width: 89.783%; height: 88.625%; }
.mk--cromo-tribal-blanco { --mk-w: 340px; --mk-ar: 720 / 840; }
.mk--cromo-tribal-blanco .mk__hueco { left: 9.63%; top: 13.174%; width: 80.156%; height: 75.375%; }
.mk--diamantes-negro { --mk-w: 300px; --mk-ar: 640 / 850; }
.mk--diamantes-negro .mk__hueco { left: 15.795%; top: 7.955%; width: 68.943%; height: 83.651%; }
.mk--cebra-cruces { --mk-w: 300px; --mk-ar: 640 / 972; }
.mk--cebra-cruces .mk__hueco { left: 16.076%; top: 10.335%; width: 67.848%; height: 79.429%; }
.mk--ajedrez-rojo { --mk-w: 300px; --mk-ar: 640 / 829; }
.mk--ajedrez-rojo .mk__hueco { left: 9.987%; top: 6.734%; width: 80.025%; height: 86.473%; }
.mk--lentejuelas-rosa { --mk-w: 290px; --mk-ar: 600 / 1067; }
.mk--lentejuelas-rosa .mk__hueco { left: 6.778%; top: 10.497%; width: 85.222%; height: 79.1%; }
.mk--estrellas-collage { --mk-w: 290px; --mk-ar: 600 / 1067; }
.mk--estrellas-collage .mk__hueco { left: 8.889%; top: 5.623%; width: 82.222%; height: 88.722%; }
.mk--llamas-cruz { --mk-w: 300px; --mk-ar: 640 / 972; }
.mk--llamas-cruz .mk__hueco { left: 16.962%; top: 11.002%; width: 66.076%; height: 75.178%; }
.mk--pelicula { --mk-w: 300px; --mk-ar: 640 / 724; }
.mk--pelicula .mk__hueco { left: 15.815%; top: 5.154%; width: 68.77%; height: 90.728%; }
.mk--tachuelas { --mk-w: 320px; --mk-ar: 736 / 1308; }
.mk--tachuelas .mk__hueco { left: 13.995%; top: 7.339%; width: 71.332%; height: 85.092%; }
.mk--gir { --mk-w: 380px; --mk-ar: 736 / 736; }
.mk--gir .mk__hueco { left: 11.141%; top: 9.918%; width: 77.446%; height: 81.114%; }

/* Encuadre de la foto dentro del hueco. */
.mk-x-0{--mk-fx:0%}.mk-x-1{--mk-fx:1%}.mk-x-2{--mk-fx:2%}.mk-x-3{--mk-fx:3%}.mk-x-4{--mk-fx:4%}.mk-x-5{--mk-fx:5%}.mk-x-6{--mk-fx:6%}.mk-x-7{--mk-fx:7%}.mk-x-8{--mk-fx:8%}.mk-x-9{--mk-fx:9%}.mk-x-10{--mk-fx:10%}.mk-x-11{--mk-fx:11%}.mk-x-12{--mk-fx:12%}.mk-x-13{--mk-fx:13%}.mk-x-14{--mk-fx:14%}.mk-x-15{--mk-fx:15%}.mk-x-16{--mk-fx:16%}.mk-x-17{--mk-fx:17%}.mk-x-18{--mk-fx:18%}.mk-x-19{--mk-fx:19%}.mk-x-20{--mk-fx:20%}.mk-x-21{--mk-fx:21%}.mk-x-22{--mk-fx:22%}.mk-x-23{--mk-fx:23%}.mk-x-24{--mk-fx:24%}.mk-x-25{--mk-fx:25%}.mk-x-26{--mk-fx:26%}.mk-x-27{--mk-fx:27%}.mk-x-28{--mk-fx:28%}.mk-x-29{--mk-fx:29%}.mk-x-30{--mk-fx:30%}.mk-x-31{--mk-fx:31%}.mk-x-32{--mk-fx:32%}.mk-x-33{--mk-fx:33%}.mk-x-34{--mk-fx:34%}.mk-x-35{--mk-fx:35%}.mk-x-36{--mk-fx:36%}.mk-x-37{--mk-fx:37%}.mk-x-38{--mk-fx:38%}.mk-x-39{--mk-fx:39%}.mk-x-40{--mk-fx:40%}.mk-x-41{--mk-fx:41%}.mk-x-42{--mk-fx:42%}.mk-x-43{--mk-fx:43%}.mk-x-44{--mk-fx:44%}.mk-x-45{--mk-fx:45%}.mk-x-46{--mk-fx:46%}.mk-x-47{--mk-fx:47%}.mk-x-48{--mk-fx:48%}.mk-x-49{--mk-fx:49%}.mk-x-50{--mk-fx:50%}.mk-x-51{--mk-fx:51%}.mk-x-52{--mk-fx:52%}.mk-x-53{--mk-fx:53%}.mk-x-54{--mk-fx:54%}.mk-x-55{--mk-fx:55%}.mk-x-56{--mk-fx:56%}.mk-x-57{--mk-fx:57%}.mk-x-58{--mk-fx:58%}.mk-x-59{--mk-fx:59%}.mk-x-60{--mk-fx:60%}.mk-x-61{--mk-fx:61%}.mk-x-62{--mk-fx:62%}.mk-x-63{--mk-fx:63%}.mk-x-64{--mk-fx:64%}.mk-x-65{--mk-fx:65%}.mk-x-66{--mk-fx:66%}.mk-x-67{--mk-fx:67%}.mk-x-68{--mk-fx:68%}.mk-x-69{--mk-fx:69%}.mk-x-70{--mk-fx:70%}.mk-x-71{--mk-fx:71%}.mk-x-72{--mk-fx:72%}.mk-x-73{--mk-fx:73%}.mk-x-74{--mk-fx:74%}.mk-x-75{--mk-fx:75%}.mk-x-76{--mk-fx:76%}.mk-x-77{--mk-fx:77%}.mk-x-78{--mk-fx:78%}.mk-x-79{--mk-fx:79%}.mk-x-80{--mk-fx:80%}.mk-x-81{--mk-fx:81%}.mk-x-82{--mk-fx:82%}.mk-x-83{--mk-fx:83%}.mk-x-84{--mk-fx:84%}.mk-x-85{--mk-fx:85%}.mk-x-86{--mk-fx:86%}.mk-x-87{--mk-fx:87%}.mk-x-88{--mk-fx:88%}.mk-x-89{--mk-fx:89%}.mk-x-90{--mk-fx:90%}.mk-x-91{--mk-fx:91%}.mk-x-92{--mk-fx:92%}.mk-x-93{--mk-fx:93%}.mk-x-94{--mk-fx:94%}.mk-x-95{--mk-fx:95%}.mk-x-96{--mk-fx:96%}.mk-x-97{--mk-fx:97%}.mk-x-98{--mk-fx:98%}.mk-x-99{--mk-fx:99%}.mk-x-100{--mk-fx:100%}
.mk-y-0{--mk-fy:0%}.mk-y-1{--mk-fy:1%}.mk-y-2{--mk-fy:2%}.mk-y-3{--mk-fy:3%}.mk-y-4{--mk-fy:4%}.mk-y-5{--mk-fy:5%}.mk-y-6{--mk-fy:6%}.mk-y-7{--mk-fy:7%}.mk-y-8{--mk-fy:8%}.mk-y-9{--mk-fy:9%}.mk-y-10{--mk-fy:10%}.mk-y-11{--mk-fy:11%}.mk-y-12{--mk-fy:12%}.mk-y-13{--mk-fy:13%}.mk-y-14{--mk-fy:14%}.mk-y-15{--mk-fy:15%}.mk-y-16{--mk-fy:16%}.mk-y-17{--mk-fy:17%}.mk-y-18{--mk-fy:18%}.mk-y-19{--mk-fy:19%}.mk-y-20{--mk-fy:20%}.mk-y-21{--mk-fy:21%}.mk-y-22{--mk-fy:22%}.mk-y-23{--mk-fy:23%}.mk-y-24{--mk-fy:24%}.mk-y-25{--mk-fy:25%}.mk-y-26{--mk-fy:26%}.mk-y-27{--mk-fy:27%}.mk-y-28{--mk-fy:28%}.mk-y-29{--mk-fy:29%}.mk-y-30{--mk-fy:30%}.mk-y-31{--mk-fy:31%}.mk-y-32{--mk-fy:32%}.mk-y-33{--mk-fy:33%}.mk-y-34{--mk-fy:34%}.mk-y-35{--mk-fy:35%}.mk-y-36{--mk-fy:36%}.mk-y-37{--mk-fy:37%}.mk-y-38{--mk-fy:38%}.mk-y-39{--mk-fy:39%}.mk-y-40{--mk-fy:40%}.mk-y-41{--mk-fy:41%}.mk-y-42{--mk-fy:42%}.mk-y-43{--mk-fy:43%}.mk-y-44{--mk-fy:44%}.mk-y-45{--mk-fy:45%}.mk-y-46{--mk-fy:46%}.mk-y-47{--mk-fy:47%}.mk-y-48{--mk-fy:48%}.mk-y-49{--mk-fy:49%}.mk-y-50{--mk-fy:50%}.mk-y-51{--mk-fy:51%}.mk-y-52{--mk-fy:52%}.mk-y-53{--mk-fy:53%}.mk-y-54{--mk-fy:54%}.mk-y-55{--mk-fy:55%}.mk-y-56{--mk-fy:56%}.mk-y-57{--mk-fy:57%}.mk-y-58{--mk-fy:58%}.mk-y-59{--mk-fy:59%}.mk-y-60{--mk-fy:60%}.mk-y-61{--mk-fy:61%}.mk-y-62{--mk-fy:62%}.mk-y-63{--mk-fy:63%}.mk-y-64{--mk-fy:64%}.mk-y-65{--mk-fy:65%}.mk-y-66{--mk-fy:66%}.mk-y-67{--mk-fy:67%}.mk-y-68{--mk-fy:68%}.mk-y-69{--mk-fy:69%}.mk-y-70{--mk-fy:70%}.mk-y-71{--mk-fy:71%}.mk-y-72{--mk-fy:72%}.mk-y-73{--mk-fy:73%}.mk-y-74{--mk-fy:74%}.mk-y-75{--mk-fy:75%}.mk-y-76{--mk-fy:76%}.mk-y-77{--mk-fy:77%}.mk-y-78{--mk-fy:78%}.mk-y-79{--mk-fy:79%}.mk-y-80{--mk-fy:80%}.mk-y-81{--mk-fy:81%}.mk-y-82{--mk-fy:82%}.mk-y-83{--mk-fy:83%}.mk-y-84{--mk-fy:84%}.mk-y-85{--mk-fy:85%}.mk-y-86{--mk-fy:86%}.mk-y-87{--mk-fy:87%}.mk-y-88{--mk-fy:88%}.mk-y-89{--mk-fy:89%}.mk-y-90{--mk-fy:90%}.mk-y-91{--mk-fy:91%}.mk-y-92{--mk-fy:92%}.mk-y-93{--mk-fy:93%}.mk-y-94{--mk-fy:94%}.mk-y-95{--mk-fy:95%}.mk-y-96{--mk-fy:96%}.mk-y-97{--mk-fy:97%}.mk-y-98{--mk-fy:98%}.mk-y-99{--mk-fy:99%}.mk-y-100{--mk-fy:100%}
.mk-z-100{--mk-z:1}.mk-z-105{--mk-z:1.05}.mk-z-110{--mk-z:1.1}.mk-z-115{--mk-z:1.15}.mk-z-120{--mk-z:1.2}.mk-z-125{--mk-z:1.25}.mk-z-130{--mk-z:1.3}.mk-z-135{--mk-z:1.35}.mk-z-140{--mk-z:1.4}.mk-z-145{--mk-z:1.45}.mk-z-150{--mk-z:1.5}.mk-z-155{--mk-z:1.55}.mk-z-160{--mk-z:1.6}.mk-z-165{--mk-z:1.65}.mk-z-170{--mk-z:1.7}.mk-z-175{--mk-z:1.75}.mk-z-180{--mk-z:1.8}.mk-z-185{--mk-z:1.85}.mk-z-190{--mk-z:1.9}.mk-z-195{--mk-z:1.95}.mk-z-200{--mk-z:2}.mk-z-205{--mk-z:2.05}.mk-z-210{--mk-z:2.1}.mk-z-215{--mk-z:2.15}.mk-z-220{--mk-z:2.2}.mk-z-225{--mk-z:2.25}.mk-z-230{--mk-z:2.3}.mk-z-235{--mk-z:2.35}.mk-z-240{--mk-z:2.4}.mk-z-245{--mk-z:2.45}.mk-z-250{--mk-z:2.5}.mk-z-255{--mk-z:2.55}.mk-z-260{--mk-z:2.6}.mk-z-265{--mk-z:2.65}.mk-z-270{--mk-z:2.7}.mk-z-275{--mk-z:2.75}.mk-z-280{--mk-z:2.8}.mk-z-285{--mk-z:2.85}.mk-z-290{--mk-z:2.9}.mk-z-295{--mk-z:2.95}.mk-z-300{--mk-z:3}