/* TAKI · app de concepto. Colores de la web de TAKI (demos/bali/styles.css). */
:root {
  --bg: #0e1410;
  --stone: #1b211c;
  --stone2: #232a24;
  --line: rgba(242, 235, 221, 0.12);
  --rice: #f2ebdd;
  --muted: rgba(242, 235, 221, 0.66);
  --brass: #c8a46a;
  --lacquer: #a3402e;
  --serif: "Cormorant Garamond", "Hiragino Mincho ProN", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #070a08; color: var(--rice); font-family: var(--sans); -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }

/* En ordenador se ve como un móvil en el centro; en el móvil ocupa toda la pantalla. */
.phone { position: relative; width: 100%; max-width: 430px; height: 100dvh; margin: 0 auto; background: var(--bg); overflow: hidden; display: flex; flex-direction: column; }
@media (min-width: 600px) {
  body { display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #1d241e, #070a08 70%); }
  .phone { height: min(880px, 94dvh); border-radius: 44px; border: 10px solid #000; box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.8); }
}

.top { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: calc(14px + var(--safe-t)) 18px 10px; pointer-events: none; }
.top__brand { font-family: var(--serif); font-size: 1.35rem; letter-spacing: 0.18em; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
.top__brand i { font-style: normal; color: var(--brass); letter-spacing: 0; }
.top__lang { pointer-events: auto; border: 1px solid var(--line); background: rgba(14, 20, 16, 0.6); backdrop-filter: blur(8px); border-radius: 999px; padding: 6px 12px; font-size: 0.75rem; letter-spacing: 0.12em; }

.views { flex: 1; position: relative; overflow: hidden; }
.view { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(96px + var(--safe-b)); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 280ms var(--ease), transform 280ms var(--ease), visibility 0s 280ms; }
.view.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 280ms var(--ease), transform 280ms var(--ease); }
.pad { padding: 18px; }
.view:not(#v-home) .pad { padding-top: calc(64px + var(--safe-t)); }

.hero { position: relative; height: 56dvh; max-height: 470px; }
.hero img { width: 100%; height: 100%; object-fit: cover; }
.hero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 20, 16, 0.25) 0%, rgba(14, 20, 16, 0) 35%, rgba(14, 20, 16, 0.95) 100%); }
.hero__copy { position: absolute; left: 18px; right: 18px; bottom: 18px; }
.kicker { margin: 0 0 6px; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass); }
.hero h1, .h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 2.3rem; line-height: 1.02; }
.h1 { font-size: 2rem; margin-bottom: 14px; }
.h2 { margin: 26px 0 10px; font-family: var(--serif); font-weight: 400; font-size: 1.45rem; }

.card { margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--stone); }
.card b { display: block; margin-bottom: 4px; }
.card p { margin: 0 0 10px; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.next { border-color: rgba(200, 164, 106, 0.45); background: linear-gradient(135deg, rgba(200, 164, 106, 0.16), var(--stone)); }
.next .kicker { margin-bottom: 4px; }
.next b { font-family: var(--serif); font-size: 1.4rem; font-weight: 400; }

.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.quick__b { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--stone); text-align: left; transition: transform 160ms var(--ease); }
.quick__b:active { transform: scale(0.97); }
.quick__b span { color: var(--brass); font-size: 1.2rem; }
.quick__b b { font-weight: 500; font-size: 0.85rem; }

.sig { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sig li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sig b { font-weight: 500; }
.sig small { display: block; color: var(--muted); margin-top: 3px; font-size: 0.8rem; line-height: 1.35; }
.price { color: var(--brass); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hours { margin-top: 18px; color: var(--muted); font-size: 0.8rem; line-height: 1.6; }

.btn { display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 13px 20px; border: 0; border-radius: 999px; background: var(--rice); color: #10150f; font-weight: 600; font-size: 0.9rem; transition: transform 160ms var(--ease), opacity 160ms; }
.btn:active { transform: scale(0.97); }
.btn--block { width: 100%; }
.btn--ghost { background: transparent; color: var(--rice); border: 1px solid rgba(242, 235, 221, 0.3); }

.chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -18px; padding: 0 18px 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; font-size: 0.85rem; white-space: nowrap; }
.chip[aria-selected="true"] { background: var(--brass); border-color: var(--brass); color: #10150f; font-weight: 600; }
.intro { color: var(--muted); font-size: 0.9rem; line-height: 1.5; margin: 14px 0 4px; }
.dishes { list-style: none; margin: 0; padding: 0; }
.dishes li { display: flex; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.dishes b { font-weight: 500; }
.dishes small { display: block; color: var(--muted); margin-top: 4px; font-size: 0.82rem; line-height: 1.4; }
.firma { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(163, 64, 46, 0.25); color: #e3a08f; font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 2px; }
.note { color: var(--muted); font-size: 0.75rem; line-height: 1.5; margin: 14px 0 0; }

.lbl { display: block; margin: 18px 0 8px; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
label.lbl span { display: block; margin-bottom: 8px; }
.lbl input { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--stone); font-size: 16px; letter-spacing: 0; text-transform: none; outline: none; }
.lbl input:focus { border-color: var(--brass); }
.days, .slots { display: flex; gap: 8px; overflow-x: auto; margin: 0 -18px; padding: 0 18px 4px; scrollbar-width: none; }
.slots { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
.day, .slot { flex: none; border: 1px solid var(--line); background: var(--stone); border-radius: 14px; }
.day { width: 58px; padding: 10px 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.day small { font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.day b { font-family: var(--serif); font-size: 1.4rem; font-weight: 400; }
.slot { padding: 9px 13px; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.day[aria-pressed="true"], .slot[aria-pressed="true"] { background: var(--brass); border-color: var(--brass); color: #10150f; }
.day[aria-pressed="true"] small { color: #10150f; }
.day:disabled { opacity: 0.35; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--stone); }
.stepper button { width: 44px; height: 44px; border: 0; background: transparent; font-size: 1.3rem; }
.stepper output { min-width: 32px; text-align: center; font-family: var(--serif); font-size: 1.4rem; }
.book .btn { margin-top: 24px; }
.err { color: #e3a08f; font-size: 0.85rem; min-height: 1.2em; }
.done { text-align: center; padding: 26px 18px; }
.done .tick { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: var(--brass); color: #10150f; font-size: 1.6rem; }
.done b { font-family: var(--serif); font-size: 1.6rem; font-weight: 400; }
.done .actions { display: grid; gap: 10px; margin-top: 16px; }

.member { position: relative; height: 190px; border-radius: 20px; overflow: hidden; border: 1px solid rgba(200, 164, 106, 0.4); }
.member img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) brightness(0.55); }
.member__in { position: absolute; inset: 0; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; }
.member__brand { font-family: var(--serif); font-size: 1.4rem; letter-spacing: 0.14em; }
.member__brand i { font-style: normal; color: var(--brass); letter-spacing: 0; }
.member__id { font-variant-numeric: tabular-nums; letter-spacing: 0.2em; font-size: 0.85rem; color: var(--muted); }
.pts__p { margin: 18px 0 10px; color: var(--muted); line-height: 1.5; }
.pts__p b { color: var(--rice); }
.stamps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.stamps li { aspect-ratio: 1; border-radius: 50%; border: 1px dashed rgba(242, 235, 221, 0.25); display: grid; place-items: center; font-family: var(--serif); color: var(--muted); }
.stamps li.on { border: 0; background: var(--brass); color: #10150f; animation: pop 380ms var(--ease); }
.stamps li.gift { border-color: var(--lacquer); color: #e3a08f; }
@keyframes pop { from { transform: scale(0.4); } }

.tabs { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 8px calc(8px + var(--safe-b)); background: rgba(14, 20, 16, 0.88); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.tabs__b { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; border: 0; background: transparent; color: var(--muted); }
.tabs__b span { font-size: 1.1rem; }
.tabs__b b { font-weight: 500; font-size: 0.68rem; letter-spacing: 0.04em; }
.tabs__b.is-on { color: var(--brass); }

.ribbon { position: absolute; z-index: 7; left: 50%; bottom: calc(70px + var(--safe-b)); translate: -50% 0; padding: 5px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); color: var(--muted); font-size: 0.65rem; letter-spacing: 0.06em; text-decoration: none; white-space: nowrap; }
.toast { position: absolute; z-index: 9; left: 16px; right: 16px; top: calc(16px + var(--safe-t)); padding: 14px 16px; border-radius: 16px; background: var(--rice); color: #10150f; font-size: 0.88rem; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); transform: translateY(calc(-100% - 40px)); transition: transform 380ms var(--ease); }
.toast.is-on { transform: none; }
.toast b { display: block; }

@media (prefers-reduced-motion: reduce) { .view, .toast, .stamps li.on { transition: none; animation: none; } }