/* ===================== Componentes ===================== */
.icon { width: 22px; height: 22px; flex: none; }

/* Botones: mayúsculas espaciadas como la rotulación de la fachada */
.btn {
  --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--line);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: .85rem 1.7rem;
  background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  font-family: var(--f-sans); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn--sm { min-height: 42px; padding: .6rem 1.2rem; }
.btn--block { width: 100%; }
.btn--glow { --btn-bg: var(--c-glow); --btn-fg: var(--c-ink); --btn-bd: var(--c-glow); }
.btn--glow:hover { --btn-bg: #E2BA7E; box-shadow: 0 8px 28px -10px rgba(214, 168, 102, .7); }
.btn--ink { --btn-bg: var(--text); --btn-fg: var(--bg); --btn-bd: var(--text); }
.btn--ink:hover { --btn-bg: var(--c-glow); --btn-bd: var(--c-glow); --btn-fg: var(--c-ink); }
.btn--line:hover { --btn-bd: var(--text); }
.btn--ghost-light { --btn-fg: #F4EFE7; --btn-bd: rgba(244, 239, 231, .45); }
.btn--ghost-light:hover { --btn-bd: #F4EFE7; --btn-bg: rgba(244, 239, 231, .08); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn.is-loading { pointer-events: none; opacity: .7; }

.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  background: transparent; border: 1px solid transparent; border-radius: 50%; color: inherit;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.icon-btn:hover { background: rgba(127, 120, 110, .14); }
.icon-btn--line { border-color: var(--line); }
.icon-btn[disabled] { opacity: .35; cursor: default; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem; color: var(--accent-text);
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  padding-block: .5rem; border-bottom: 1px solid currentColor;
}
.link-arrow:hover { color: var(--text); }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  min-height: 40px; padding: .4rem 1rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: var(--fs-sm);
  transition: all var(--dur) var(--ease);
}
.chip:hover { color: var(--text); border-color: var(--text); }
.chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }

.note { font-size: var(--fs-xs); color: var(--muted); }
.badge { display: inline-block; font-size: var(--fs-xs); padding: .15rem .65rem; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--muted); }
.badge--ok { color: var(--c-sage); border-color: currentColor; }
.badge--warn { color: var(--accent-text); border-color: currentColor; }

/* ---------- Cabecera ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  color: #F4EFE7;
  transition: background-color .5s var(--ease), backdrop-filter .5s var(--ease), box-shadow .5s var(--ease);
}
.site-header.is-solid { background: rgba(28, 26, 23, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(244, 239, 231, .08); }
.site-header__inner { height: var(--header-h); display: flex; align-items: center; gap: 1.5rem; }
.site-header__logo { flex: none; display: block; }
.site-header__logo img { width: 74px; height: auto; }
.main-nav { margin-inline: auto; }
.main-nav__list { display: flex; gap: clamp(1rem, 2.2vw, 2.1rem); }
.main-nav a { font-size: var(--fs-sm); text-decoration: none; opacity: .82; padding-block: .5rem; position: relative; transition: opacity .3s; }
.main-nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: .2rem; height: 1px; background: var(--c-glow); transition: right .4s var(--ease); }
.main-nav a:hover, .main-nav a[aria-current="true"] { opacity: 1; }
.main-nav a:hover::after, .main-nav a[aria-current="true"]::after { right: 0; }
.site-header__actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.main-nav + .site-header__actions { margin-left: 0; }
.nav-toggle { display: none; }

@media (max-width: 1020px) {
  .main-nav { display: none; }
  .nav-toggle { display: inline-grid; }
}
@media (max-width: 480px) {
  .site-header__actions [data-open-account] { display: none; }
  .site-header__actions .btn { padding-inline: 1rem; letter-spacing: .16em; }
}

.mobile-menu {
  position: fixed; inset: 0; z-index: 45; background: var(--c-ink); color: #F4EFE7;
  padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 1.5rem) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
  display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto;
  opacity: 0; transition: opacity .35s var(--ease);
}
.mobile-menu.is-open { opacity: 1; }
.mobile-menu__list a {
  display: block; font-family: var(--f-display); font-weight: 300; font-size: clamp(2rem, 9vw, 2.8rem);
  line-height: 1.25; text-decoration: none; padding-block: .2rem;
  opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
.mobile-menu.is-open .mobile-menu__list a { opacity: 1; transform: none; }
.mobile-menu__list a:hover { color: var(--c-glow); }
.mobile-menu__foot { display: grid; gap: .75rem; margin-top: 2rem; }

/* ---------- Formularios ---------- */
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .35rem; }
.field-row { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.field label, .label { font-size: var(--fs-sm); color: var(--muted); }
.optional { opacity: .75; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: .75rem 1rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 1rem; /* 16px evita el zoom en iOS */
  transition: border-color .3s, box-shadow .3s;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--c-glow); box-shadow: 0 0 0 3px rgba(214, 168, 102, .22); }
.field [aria-invalid="true"] { border-color: var(--c-error); }
.field__error { color: #C8705F; font-size: var(--fs-xs); margin: 0; min-height: 0; }
.section--light .field__error, .sheet .field__error { color: var(--c-error); }
.check { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--muted); }
.check input { width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--c-glow); flex: none; }
.form__status { margin: 0; font-size: var(--fs-sm); }
.form__status.is-ok { color: var(--c-sage); }
.form__status.is-error { color: var(--c-error); }
.hp { position: absolute; left: -9999px; }

/* ---------- Hoja / diálogo ---------- */
.sheet {
  --bg: var(--c-ivory);
  width: min(640px, 100%); max-height: min(92vh, 860px); margin: auto; padding: 0;
  border: 0; border-radius: var(--r-md); background: var(--bg); color: var(--text);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5);
}
.sheet:not([open]) { display: none; }
.sheet::backdrop { background: rgba(20, 18, 16, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sheet[open] { animation: sheet-in .45s var(--ease); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(16px); } }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem 1.1rem 1.75rem; border-bottom: 1px solid var(--line); }
.sheet__title { font-size: 1.6rem; margin: 0; }
.sheet__body { padding: 1.5rem 1.75rem; overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.sheet__foot { display: flex; gap: .75rem; justify-content: space-between; padding: 1rem 1.75rem; border-top: 1px solid var(--line); background: var(--surface); }
.sheet__foot:empty { display: none; }
.sheet__foot .btn:only-child { margin-left: auto; }

@media (max-width: 640px) {
  .sheet { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; margin: 0; }
  .sheet[open] { animation: sheet-up .45s var(--ease); }
  .sheet__head { padding-top: calc(env(safe-area-inset-top, 0px) + .9rem); }
  .sheet__body { padding: 1.25rem; }
  .sheet__foot { padding: .9rem 1.25rem calc(env(safe-area-inset-bottom, 0px) + .9rem); }
  .sheet__foot .btn { flex: 1; }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } }

/* Pasos de reserva (secuencia real, por eso numerados) */
.steps { display: flex; gap: .35rem; padding: .9rem 1.75rem 0; counter-reset: step; }
.steps li { flex: 1; font-size: .72rem; color: var(--muted); counter-increment: step; }
.steps li::before { content: ''; display: block; height: 2px; border-radius: 2px; background: var(--line); margin-bottom: .4rem; transition: background .4s; }
.steps li.is-done::before, .steps li.is-current::before { background: var(--c-glow); }
.steps li.is-current { color: var(--text); }
@media (max-width: 640px) { .steps { padding-inline: 1.25rem; } .steps li span { display: none; } .steps li.is-current span { display: inline; } }

/* Tabs */
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; min-height: 44px; padding: .5rem .9rem; border: 0; background: none; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: var(--fs-sm); }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--c-glow); }

/* Opciones seleccionables (reserva) */
.options { display: grid; gap: .6rem; }
.option {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; text-align: left;
  padding: 1rem 1.15rem; min-height: 64px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .3s, background-color .3s;
}
.option:hover:not([disabled]) { border-color: var(--text); }
.option[aria-pressed="true"], .option[aria-checked="true"] { border-color: var(--c-glow); box-shadow: inset 0 0 0 1px var(--c-glow); }
.option[disabled] { opacity: .5; cursor: not-allowed; }
.option__title { display: block; font-weight: 500; }
.option__meta { display: block; font-size: var(--fs-sm); color: var(--muted); }
.option__side { text-align: right; font-size: var(--fs-sm); color: var(--muted); flex: none; }

.datestrip { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.datestrip button {
  flex: none; scroll-snap-align: start; width: 68px; min-height: 84px; padding: .6rem .3rem;
  display: grid; place-items: center; gap: .1rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
}
.datestrip .d-week { font-size: .72rem; color: var(--muted); text-transform: capitalize; }
.datestrip .d-num { font-family: var(--f-display); font-size: 1.7rem; line-height: 1; }
.datestrip .d-month { font-size: .72rem; color: var(--muted); }
.datestrip button[aria-pressed="true"] { border-color: var(--c-glow); box-shadow: inset 0 0 0 1px var(--c-glow); }
.datestrip button[disabled] { opacity: .35; cursor: not-allowed; }

.summary { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.5rem; margin: 0 0 1.5rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.summary dt { color: var(--muted); font-size: var(--fs-sm); }
.summary dd { margin: 0; }

.empty { padding: 2rem 1rem; text-align: center; color: var(--muted); }
.empty .btn { margin-top: 1rem; }

.success { text-align: center; padding-block: 1rem; }
.success__mark { width: 64px; height: 64px; margin: 0 auto 1.25rem; display: grid; place-items: center; border-radius: 50%; background: var(--c-glow); color: var(--c-ink); animation: pop .6s var(--ease); }
.success__mark .icon { width: 30px; height: 30px; stroke-width: 2; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }

/* ---------- Lightbox ---------- */
.lightbox { width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: rgba(18, 16, 14, .96); color: #F4EFE7; }
.lightbox:not([open]) { display: none; }
.lightbox[open] { display: grid; place-items: center; animation: fade .35s var(--ease); }
@keyframes fade { from { opacity: 0; } }
.lightbox::backdrop { background: transparent; }
.lightbox__figure { margin: 0; padding: 4rem 1rem; max-width: min(1100px, 100%); touch-action: pan-y; }
.lightbox__figure img { max-height: calc(100vh - 10rem); width: auto; max-width: 100%; margin: auto; border-radius: var(--r-sm); transition: opacity .3s; }
.lightbox__figure figcaption { text-align: center; margin-top: 1rem; font-size: var(--fs-sm); color: #CFC6B8; }
.lightbox__close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 1rem); right: 1rem; }
.lightbox__arrow { position: absolute; top: 50%; transform: translateY(-50%); border-color: rgba(244, 239, 231, .3); }
.lightbox__arrow--prev { left: 1rem; }
.lightbox__arrow--next { right: 1rem; }
@media (max-width: 640px) { .lightbox__arrow { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 1.25rem); transform: none; } }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 1.5rem); z-index: 120;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--c-ink); color: #F4EFE7; padding: .85rem 1.3rem; border-radius: var(--r-pill);
  font-size: var(--fs-sm); max-width: calc(100% - 2rem); text-align: center;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- WhatsApp flotante ---------- */
.wa-float {
  position: fixed; right: max(1rem, env(safe-area-inset-right, 0px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem); z-index: 40;
  display: inline-flex; align-items: center; gap: .55rem; min-height: 52px; padding: 0 1.1rem 0 .95rem;
  background: var(--c-ink); color: #F4EFE7; border: 1px solid rgba(214, 168, 102, .5); border-radius: var(--r-pill);
  text-decoration: none; font-size: var(--fs-sm); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5);
  transition: border-color .3s, transform .3s var(--ease), opacity .3s;
}
.wa-float .icon { color: var(--c-glow); }
.wa-float:hover { border-color: var(--c-glow); transform: translateY(-2px); }
.wa-float.is-hidden { opacity: 0; pointer-events: none; transform: translateY(10px); }
@media (max-width: 640px) { .wa-float__label { display: none; } .wa-float { padding: 0; width: 52px; justify-content: center; } }
button.link-arrow { background: none; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; font-family: var(--f-sans); }