/* === RESET === */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body { height: 100%; }
img, picture, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
input, textarea { font: inherit; }

/* === GLOBAL === */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: manipulation;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--pv-deep);
  background: var(--pv-deep);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* === KIOSK FRAME ===
   Estrategia: el #app SIEMPRE renderiza a 1080×1920 (resolución del kiosco).
   En navegador desktop se aplica `transform: scale()` calculado en JS para
   que se vea proporcionalmente correcto sin importar el viewport. Así, lo
   que ves en la demo es idéntico a lo que verá el kiosco físico. */
#kiosk-frame {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pv-deep);
  overflow: hidden;
}

#app {
  --kiosk-scale: 1;
  position: relative;
  width: var(--kiosk-width);
  height: var(--kiosk-height);
  background: var(--pv-cream);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  transform: scale(var(--kiosk-scale));
  transform-origin: center center;
  flex-shrink: 0;
}

/* === TIPOGRAFÍA === */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--pv-deep);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { line-height: var(--lh-relaxed); }

/* === SCREEN BASE === */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--pv-cream);
  animation: screenIn var(--dur-base) var(--ease-snappy);
  overflow: hidden;
}

.screen-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--kiosk-padding-top) var(--kiosk-padding-x) var(--kiosk-padding-bottom);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--pv-stone-light) transparent;
}

.screen-body::-webkit-scrollbar { width: 8px; }
.screen-body::-webkit-scrollbar-thumb { background: var(--pv-stone-light); border-radius: 999px; }

/* Variantes con header sólido */
.screen.has-topbar .screen-body { padding-top: var(--space-7); }

@keyframes screenIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === UTILS === */
.stack { display: flex; flex-direction: column; }
.stack-2 { gap: var(--space-2); }
.stack-3 { gap: var(--space-3); }
.stack-4 { gap: var(--space-4); }
.stack-5 { gap: var(--space-5); }
.stack-6 { gap: var(--space-6); }
.stack-7 { gap: var(--space-7); }

.row { display: flex; align-items: center; }
.row-between { justify-content: space-between; }
.row-gap-3 { gap: var(--space-3); }
.row-gap-4 { gap: var(--space-4); }
.row-gap-5 { gap: var(--space-5); }

.text-center { text-align: center; }
.muted { color: var(--pv-stone); }
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pv-ocean);
}

.divider {
  height: 1px;
  background: var(--pv-stone-light);
  opacity: 0.5;
  border: 0;
}