/* Fun Fashion: probador de logos (/prueba-tu-logo/). Usa los colores y tipografias de main.css. */
.tl__drop{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;padding:26px;background:#fff;border:2px dashed #B9C2D0;transition:border-color .2s,background .2s}
.tl__drop.is-over{border-color:var(--cyan-d);background:var(--cyan-s)}
.tl__drop p{margin:0;color:var(--ink2);font-size:15.5px;max-width:58ch}
.tl__drop input:focus-visible+label{outline:3px solid var(--cyan-d);outline-offset:3px}
.tl__reset{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--cyan-d);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.tl__drop .tl__msg{flex-basis:100%;max-width:none;font-weight:700;color:var(--ink)}
.tl__drop .tl__msg.is-err{color:var(--red)}
.tl__msg:empty{display:none}
.tl h2{font-size:clamp(22px,2.4vw,28px);margin:48px 0 16px}
.tl__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tl__item{margin:0;background:#fff;border:1px solid var(--line);min-width:0}
.tl__stage{position:relative;aspect-ratio:4/5;overflow:hidden}
.tl__stage>img:first-child{display:block;width:100%;height:100%;object-fit:contain}
/* el logo va en la zona de marcaje de cada producto: --x, --y, --w, --h y --r salen de assets/img/base/zonas.json */
.tl__logo{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);object-fit:contain;transform:rotate(var(--r,0deg));opacity:.93;pointer-events:none}
.tl__item.is-multiply .tl__logo{mix-blend-mode:multiply}
.tl__item figcaption{padding:11px 14px 13px;border-top:1px solid var(--line);font:500 16px/1.25 var(--fd)}
@media (max-width:900px){.tl__grid{grid-template-columns:repeat(2,1fr)}.tl__drop{padding:20px}}