/* shared by /dibujo/ and /musica/: ES/EN toggle, cross-door footer, message box. Needs the Pluma tokens (shared/pluma-tokens.css). */
.langtoggle{font:400 var(--fs-caption)/1 var(--font-display);letter-spacing:.26em;text-transform:uppercase;background:transparent;color:inherit;border:1px solid color-mix(in srgb,currentColor 45%,transparent);border-radius:999px;padding:var(--space-1) var(--space-2);min-width:48px;cursor:pointer;transition:background-color .3s,color .3s}
.langtoggle:hover{background:var(--blush);color:var(--laguna);border-color:var(--blush)}

/* cross-door: ONE half of the crest, two-ink (blush on laguna). The half is the full crest masked to its left or right 50%. */
.xfoot{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--space-3) var(--space-5);margin:var(--space-5) 0 var(--space-3)}
.xdoor{display:inline-flex;align-items:center;gap:var(--space-2);text-decoration:none;font:400 var(--fs-caption)/1 var(--font-display);letter-spacing:.3em;text-transform:uppercase;color:var(--blush);padding:var(--space-1) 0}
.xdoor .xhalf{display:block;width:34px;height:56px;background:var(--blush);transition:transform .6s cubic-bezier(.16,1,.3,1),background-color .4s;-webkit-mask-image:url(/orn/crest.svg);mask-image:url(/orn/crest.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:auto 100%;mask-size:auto 100%}
.xdoor.to-musica .xhalf{-webkit-mask-position:left center;mask-position:left center}
.xdoor.to-dibujo .xhalf{-webkit-mask-position:right center;mask-position:right center;order:2}
.xdoor:hover .xhalf,.xdoor:focus-visible .xhalf{transform:scale(1.07);background:#F07A45}
.xhome{color:var(--blush);text-decoration:none;font:400 var(--fs-caption)/1 var(--font-display);letter-spacing:.3em;text-transform:uppercase;border-bottom:1px solid transparent;padding:var(--space-1) 0}
.xhome:hover{border-bottom-color:currentColor}

/* message box: slides up 8 s after load, then stays docked to the bottom. Never modal; minimizes to a slim bar. */
:root{--mbox-h:0px}
.mbox{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--laguna);color:var(--blush);border-top:1px solid color-mix(in srgb,var(--blush) 30%,transparent);box-shadow:0 -18px 40px -24px rgb(0 0 0/.6);max-height:min(82svh,600px);overflow:auto;padding-bottom:env(safe-area-inset-bottom);visibility:hidden;transform:translateY(105%);--ink:var(--orange)}
.mbox.show{visibility:visible}
.mbox.in{transform:none;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.mbox-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-2) var(--space-3);min-height:56px}
.mbox-bar h2{font:400 var(--fs-caption)/1.3 var(--font-display);letter-spacing:.24em;text-transform:uppercase;margin:0}
.mbox.min .mbox-bar h2{cursor:pointer}
.mbox-toggle{flex:none;background:transparent;color:inherit;border:1px solid color-mix(in srgb,currentColor 40%,transparent);border-radius:999px;padding:var(--space-1) var(--space-2);font:400 .72rem/1 var(--font-display);letter-spacing:.22em;text-transform:uppercase;cursor:pointer}
.mbox-toggle:hover{border-color:var(--blush)}
.mbox-body{display:grid;gap:var(--space-2);padding:0 var(--space-3) var(--space-3)}
.mbox-body[hidden]{display:none}
.mbox label{display:grid;gap:6px;font:400 .72rem/1.2 var(--font-display);letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb,var(--blush) 80%,var(--laguna))}
.mbox input,.mbox select,.mbox textarea{font:400 16px/1.4 'EB Garamond',var(--font-body);color:var(--blush);background:color-mix(in srgb,var(--blush) 9%,var(--laguna));border:1px solid color-mix(in srgb,var(--blush) 34%,transparent);border-radius:var(--radius-md);padding:10px 12px;width:100%;letter-spacing:0;text-transform:none}
.mbox select option{color:#0A4249;background:#FEE5D2}
.mbox textarea{min-height:84px;resize:vertical}
.mbox :focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.mbox-send{font:700 .78rem/1.3 var(--font-display);letter-spacing:.2em;text-transform:uppercase;border:0;border-radius:999px;background:var(--blush);color:var(--laguna);padding:14px var(--space-3);cursor:pointer;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.mbox-send:hover{transform:translateY(-2px)}
.mbox-hint{font-size:.9rem;color:color-mix(in srgb,var(--blush) 70%,var(--laguna));margin:0}
@media (min-width:760px){.mbox{left:auto;right:24px;width:400px;border:1px solid color-mix(in srgb,var(--blush) 30%,transparent);border-bottom:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0}}
@media (prefers-reduced-motion:reduce){.mbox.in{transition:none}.xdoor .xhalf{transition:none}}