/* Cabecera con tres posiciones independientes. */
nav.brand-header { position: sticky; top: 0; z-index: 40; padding: 14px 20px; border-bottom: 2px solid #0F172A; background: #FFF6CC; }
nav.brand-header > .header-shell { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 18px; width: 100%; max-width: none; margin: 0; }
.brand-header .header-logo { justify-self: start; display: inline-flex; align-items: center; max-width: 100%; }
.brand-header .header-logo .brand-logo { width: 148px; height: auto; }
.brand-header .header-center { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; gap: 10px; }
.brand-header .header-menu-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 9px 12px; border-radius: 12px 8px 14px 10px; color: #0F172A; font: 800 15px/1.35 var(--font-brand); text-decoration: none; white-space: nowrap; border: 1px solid transparent; transition: background 160ms ease,transform 160ms ease; }
.brand-header .header-menu-link[aria-current="page"] { background: #FFFDF5; border-color: #0F172A; text-decoration: none; box-shadow: 2px 2px 0 #0F172A; }
.brand-header .header-menu-link:hover { background: #8ABBE6; transform: translateY(-2px); }
.brand-header .header-download { justify-self: end; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 11px 18px; border: 2px solid #0F172A; border-radius: 13px 8px 15px 9px; background: #2DD4BF; color: #0F172A; font: 900 16px/1.3 var(--font-brand); box-shadow: 3px 3px 0 #0F172A; text-decoration: none; white-space: nowrap; }
.brand-header .menu-toggle { display: none; align-items: center; justify-content: center; flex-direction: column; gap: 2px; border: 2px solid #0F172A; border-radius: 12px 8px 13px 9px; background: #2DD4BF; color: #0F172A; font: 700 10px var(--font-professional); cursor: pointer; padding: 7px; }
.brand-header .download-label-short { display: none; }
main { width: 100%; max-width: 1440px !important; padding-inline: 10px !important; }
main h1[tabindex="-1"]:focus { outline: none; }
main :is(p,li,label,input,select,textarea),main p[class],main li[class] { font-size: clamp(16px, .3vw + 15px, 18px) !important; line-height: 1.7; }
main :is(.text-xs,.text-sm,.text-\[10px\],.text-\[11px\]) { font-size: 14px !important; line-height: 1.6; }
main :is(input,select,textarea) { font-size: 16px !important; }
main .home-game p { font-size: 16px !important; }
.preview-controls span,.preview-tag,.motion-toggle { font-size: 14px; }
footer { font-size: 14px !important; line-height: 1.6; }
/* Rayones vectoriales: el movimiento queda dentro del adorno. */
.scribble-heading { position: relative; padding-bottom: 14px; }
.page-scribble { display: block; position: absolute; bottom: 0; left: 0; width: 112px; height: 12px; overflow: visible; pointer-events: none; }
.page-scribble path { stroke-dasharray: 150; stroke-dashoffset: 150; animation: pencil-draw 6s ease-in-out infinite; }
.page-scribble path:nth-child(2) { animation-delay: 250ms; }
@keyframes pencil-draw { 0%,10% { stroke-dashoffset: 150; opacity: .4; } 32%,80% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -150; opacity: .4; } }
.doodle-spark { position: absolute; top: 24px; left: 24px; width: 24px; height: 24px; color: #0F172A; pointer-events: none; animation: doodle-spark 5.8s ease-in-out infinite; }
@keyframes doodle-spark { 0%,70%,100% { opacity: .45; transform: rotate(-8deg) scale(.9); } 35% { opacity: 1; transform: rotate(10deg) scale(1.12); } }
.paper-sheet:hover::before { animation: clip-nod 450ms ease-in-out; }
@keyframes clip-nod { 0%,100% { transform: rotate(12deg); } 45% { transform: rotate(20deg); } }
@media(max-width: 1100px) {
  nav.brand-header { position: relative !important; padding: 12px 10px; }
  nav.brand-header > .header-shell { grid-template-columns: minmax(0,1fr) auto auto; gap: 10px; }
  .brand-header .header-logo { grid-column: 1; grid-row: 1; }
  .brand-header .header-logo .brand-logo { width: clamp(88px,24vw,130px); }
  .brand-header .header-download { grid-column: 2; grid-row: 1; padding: 10px 12px; min-height: 48px; font-size: 14px; }
  .brand-header .header-download .ui-icon { width: 18px; height: 18px; }
  .brand-header .menu-toggle { grid-column: 3; grid-row: 1; display: flex; width: 48px; min-height: 48px; margin: 0; }
  nav.brand-header.nav-enhanced > .header-shell > .header-center { display: none; }
  nav.brand-header.menu-is-open > .header-shell > .header-center { display: flex; flex-direction: column; align-items: stretch; grid-column: 1/-1; grid-row: 2; width: 100%; padding: 14px 0 4px; border-top: 1px dashed #0F172A; }
  .brand-header .header-menu-link { white-space: normal; justify-content: flex-start; padding: 12px 16px; font-size: 16px; }
}
@media(prefers-reduced-motion:reduce) { .page-scribble path,.doodle-spark,.paper-sheet:hover::before { animation: none !important; stroke-dashoffset: 0; opacity: 1; } }
@media(max-width: 480px) {
  .brand-header .download-label-long { display: none; }
  .brand-header .download-label-short { display: inline; }
  .brand-header .header-logo { min-width: 88px; }
}