/* Carga y desplazamiento más fluidos en landing, tendencias y planificador */
:root{
  --app-nav-h:64px;
  scroll-padding-top:calc(var(--app-nav-h) + 12px);
}
html{
  scroll-behavior:auto;
  -webkit-text-size-adjust:100%;
  scrollbar-gutter:stable;
  background:#0b1118;
}
html[data-app-shell="planner"]{background:#0f172a}
html[data-app-shell="trends"]{background:#020617}

/* Velo al cambiar de pantalla: solo color sólido, sin ver la carga */
html.app-veiling{
  background:var(--app-veil-color,#0b1118);
}
html.app-veiling::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:2147483646;
  background:var(--app-veil-color,#0b1118);
  pointer-events:none;
}
#app-nav-veil{
  position:fixed;
  inset:0;
  z-index:2147483647;
  pointer-events:none;
  opacity:0;
  transition:none;
}
#app-nav-veil.is-active{
  opacity:1;
}

/* Sin JS: la página se muestra con normalidad */
html.js:not(.app-ready) body{
  visibility:hidden;
}
html.js.app-veiling:not(.app-ready) body{
  visibility:hidden;
}
html.js.app-ready body{
  visibility:visible;
  animation:app-body-in .14s ease-out;
}
html.js.app-ready.app-instant body{
  animation:none;
}
@keyframes app-body-in{
  from{opacity:0}
  to{opacity:1}
}

/* Mientras arranca, sin esqueletos ni reveals vacíos */
html.js:not(.app-ready) .reveal,
html.js.app-boot .reveal{
  opacity:1!important;
  transform:none!important;
  transition:none!important;
}
html.js:not(.app-ready) .kitchen-elev .cab,
html.js.app-boot .kitchen-elev .cab{
  opacity:1!important;
  animation:none!important;
}

body{
  overflow-x:hidden;
  overscroll-behavior-y:auto;
  -webkit-overflow-scrolling:touch;
}
main,section,footer,article,.max-w-7xl{
  touch-action:pan-y;
}
[id],.year-card,.reveal{
  scroll-margin-top:calc(var(--app-nav-h) + 12px);
}
.year-card,.reveal{
  content-visibility:auto;
  contain-intrinsic-size:auto 480px;
}
@media (pointer:fine){
  html::-webkit-scrollbar{width:10px;height:10px}
  html::-webkit-scrollbar-track{background:transparent}
  html::-webkit-scrollbar-thumb{
    background:rgba(148,163,184,.32);
    border-radius:6px;
    border:2px solid transparent;
    background-clip:padding-box;
  }
  html::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.48);background-clip:padding-box}
}
@media (max-width:768px){
  .app-nav,.nav-shell.sticky,.sticky.top-0{
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.year-card{content-visibility:visible}
  html.js.app-ready body,
  html.js.app-ready.app-instant body{animation:none}
}