html { scroll-behavior: smooth; }
:root { --font-brand: 'Nunito', sans-serif; --font-professional: 'Inter', sans-serif; }
body { font-family: var(--font-professional); }
h1,h2,h3,.font-hand,.font-doodle,.font-pen,.font-round { font-family: var(--font-brand); }
.font-sans,.font-mono,.font-serif,table,input,select,textarea { font-family: var(--font-professional); }
.font-mono,table { font-variant-numeric: tabular-nums; }
h1 { letter-spacing: -.025em; line-height: 1.12 !important; font-weight: 900; }
h2,h3 { letter-spacing: -.015em; }
.font-pen { font-weight: 700; }
.icon-art { display: inline-block; transform-origin: 50% 70%; }
@keyframes icon-wiggle {
  0%,100% { transform: translateY(0) rotate(0) scale(1); }
  25% { transform: translateY(-4px) rotate(-12deg) scale(1.08); }
  55% { transform: translateY(-2px) rotate(10deg) scale(1.08); }
  78% { transform: translateY(-3px) rotate(-5deg) scale(1.04); }
}
@media (hover: hover) {
  .icon-hover-motion:hover .icon-art,
  .home-game:hover .icon-art,
  .game-detail:hover .game-icon .icon-art { animation: icon-wiggle 600ms ease-in-out; }
  .fokito-companion img:hover,.avatar-peek:hover { animation: icon-wiggle 650ms ease-in-out; }
}
.home-game:focus-visible .icon-art,.icon-hover-motion:active .icon-art { animation: icon-wiggle 600ms ease-in-out; }
body { margin: 0; }
/* Cuaderno celeste: tintas oficiales sobre un fondo suave de marca. */
body.bg-grid-notebook {
  background-color: color-mix(in srgb, #8ABBE6 32%, #FFFDF5);
  background-image: linear-gradient(rgb(15 23 42 / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(15 23 42 / .07) 1px, transparent 1px);
  background-size: 28px 28px;
}
main > header, main > section, main > div > article { background-color: #FFF6CC; }
/* Reserva superior común para que los títulos respiren dentro de cada bloque. */
main > :is(header, section):not(.game-catalog),
main :is(section, article).hand-border {
  padding-block-start: clamp(24px, 3vw, 40px);
}
/* Las secciones sin marco también tienen un fondo y necesitan margen interior. */
main > section:not(.hand-border):not(.game-catalog) {
  padding-inline: clamp(18px, 3vw, 32px);
  padding-block-end: clamp(24px, 3vw, 40px);
}
main .bg-white { background-color: #FFFDF5; }
nav, footer { background-color: #FFF6CC !important; }
.brand-logo { width: 160px; height: auto; object-fit: contain; transition: transform 180ms ease-out; }
.group:hover .brand-logo { transform: rotate(-2deg); }
.fokito-companion { display: flex; align-items: center; gap: 20px; padding: 22px 28px; background: #FFF6CC; border: 2px dashed #0F172A; border-radius: 26px 12px 24px 16px; margin-top: 36px; }
.fokito-companion img { width: 100px; height: 120px; object-fit: contain; animation: companion-hello 4.8s ease-in-out infinite; transform-origin: center bottom; }
.fokito-companion p { flex: 1; margin: 0; }
.fokito-companion strong { display: block; font: 700 30px 'Nunito',sans-serif; }
.fokito-companion span { display: block; font: 14px/1.6 'Inter',sans-serif; }
.motion-toggle { font: 12px 'Inter',sans-serif; min-height: 44px; padding: 10px 14px; border: 1px solid #0F172A; border-radius: 12px; background: #FFFDF5; color: #0F172A; cursor: pointer; }
@keyframes companion-hello { 0%,70%,100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-6px) rotate(-3deg); } 50% { transform: translateY(-3px) rotate(2deg); } }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
.home-game-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.home-game { display: block; padding: 22px; border: 2px solid #0F172A; border-radius: 16px 22px 14px 18px; background: #FFFDF5; transition: transform 180ms ease-out; }
.home-game:hover { transform: translateY(-3px); }
.home-game > span { font-size: 28px; }
.home-game h3 { font: 700 25px 'Nunito',sans-serif; }
.home-game p { font: 13px/1.6 'Inter',sans-serif; }
@media(max-width: 640px) { .brand-logo { width: 135px; } .fokito-companion { gap: 12px; padding: 18px; flex-wrap: wrap; } .fokito-companion img { width: 75px; height: 90px; } .fokito-companion strong { font-size: 25px; } .home-game-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
img { max-width: 100%; }
a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #0F172A; outline-offset: 5px; }
.skip-link { position: fixed; top: -100px; left: 16px; padding: 12px 18px; background: #2DD4BF; color: #0F172A; z-index: 100; border: 2px solid #0F172A; }
.skip-link:focus { top: 12px; }
nav a { min-height: 44px; }
nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
main p { text-wrap: pretty; }
.site-notice { margin: 1rem 0; padding: 16px; border: 2px dashed #0F172A; border-radius: 12px; background: #FFF6CC; font: 14px/1.6 'Inter', sans-serif; }
dialog { width: min(440px, calc(100% - 40px)); padding: 28px; background: #FFFDF5; color: #0F172A; border: 3px solid #0F172A; border-radius: 22px; font: 16px/1.6 'Inter', sans-serif; }
dialog::backdrop { background: rgb(15 23 42 / .45); }
dialog h2 { font: 700 30px 'Nunito', sans-serif; margin: 0 0 12px; }
dialog button { margin-top: 20px; background: #2DD4BF; border: 2px solid #0F172A; border-radius: 10px; padding: 10px 24px; color: #0F172A; cursor: pointer; }
@media (max-width: 640px) { nav { position: relative !important; } nav > div > div { gap: 8px; } main { overflow-x: clip; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }