/* The Cool Tour · Área Guías — estilos base (tokens del design system) */
:root {
  --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --font-text:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --safe-top:     env(safe-area-inset-top, 0px);
  --safe-bottom:  env(safe-area-inset-bottom, 0px);
}

* { -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body { background: #EEEAE0; font-family: var(--font-text); color: #0B0B0B; overscroll-behavior: none; }
/* Móvil: fondo negro como la cabecera, para que en Safari (iOS 26 tiñe la barra de estado con el
   fondo de la página) no aparezca una franja clara arriba. */
@media (max-width: 519px) { html, body { background: #0B0B0B; } }
button, input, select { font-family: inherit; }
button { -webkit-appearance: none; }
button:disabled { cursor: not-allowed; }
a { color: #C9890A; }
input::placeholder { color: #A19C8C; opacity: 1; }
:focus-visible { outline: 3px solid rgba(249,181,35,.55); outline-offset: 2px; }

/* Contenedor de la app: pantalla completa en móvil, columna centrada en escritorio */
.app {
  position: relative; width: 100%; max-width: 480px; margin: 0 auto;
  height: 100vh; height: 100dvh; overflow: hidden;
  background: #FAF8F3; display: flex; flex-direction: column;
}
@media (min-width: 520px) { .app { box-shadow: 0 0 0 1px #E5E1D5, 0 24px 60px rgba(11,11,11,.12); } }

.icon { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Interacciones (equivalen a style-active / style-focus del prototipo) */
.press:active:not(:disabled) { transform: translate(2px,2px); box-shadow: none !important; }
.focus-gold:focus { box-shadow: 0 0 0 3px rgba(249,181,35,.55) !important; outline: none; }
.row-btn:last-child { border-bottom: none !important; }

.scroll { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.fade-in { animation: fadeIn 180ms ease-out; }
.sheet-in { animation: sheetIn 240ms cubic-bezier(.22,1,.36,1); }
.drop-in { animation: dropIn 260ms cubic-bezier(.22,1,.36,1); }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes sheetIn { from { transform: translateY(100%); } }
@keyframes riseIn { from { transform: translateY(24px); opacity: 0; } }
.rise-in { animation: riseIn 260ms cubic-bezier(.22,1,.36,1); }
@keyframes dropIn { from { transform: translateY(-120%); opacity: 0; } }
@keyframes bump { 40% { transform: scale(1.3); } }
.bump { animation: bump 180ms ease-out; }
@media (prefers-reduced-motion: reduce) { .bump { animation: none; } }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(249,181,35,.12); } }
.pulse { animation: pulse 1.6s ease-in-out infinite; }

input[type=range] { accent-color: #F9B523; }

@media (prefers-reduced-motion: reduce) {
  .fade-in, .sheet-in, .drop-in, .pulse { animation: none; }
}