/* ===================== Booking form ===================== */
.turno { padding: clamp(90px, 14vw, 180px) var(--pad) clamp(40px, 6vw, 80px); }
.turno__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }

.tform { display: grid; gap: 22px; padding: clamp(22px, 3vw, 40px); border-radius: 26px; background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)); border: 1px solid rgba(214, 173, 79, .22); }
.tform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; min-width: 0; border: 0; margin: 0; padding: 0; }
.field > span, .field legend { font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); padding: 0; }
.field i { font-style: normal; color: var(--gold); }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 17px; color: var(--text); background: rgba(10, 10, 11, .6);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: 15px 16px; outline: none; resize: vertical;
  transition: border-color .3s, box-shadow .3s, background .3s; color-scheme: dark;
}
.field input::placeholder, .field textarea::placeholder { color: #6f6d68; }
.field input:hover, .field textarea:hover { border-color: rgba(255, 255, 255, .22); }
.field input:focus, .field textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(214, 173, 79, .14); background: rgba(10, 10, 11, .9); }
.field__err { display: none; color: #f0a5a0; font-size: 13px; }
.field.is-invalid .field__err { display: block; }
.field.is-invalid input, .field.is-invalid .chips { border-color: #e0786f; }
.field.is-invalid { animation: shake .45s var(--ease); }
@keyframes shake { 20%, 60% { transform: translateX(-6px) } 40%, 80% { transform: translateX(6px) } }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; border: 1px solid transparent; border-radius: 16px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); font-size: 15px; color: #d6d3cc; transition: all .3s var(--ease); user-select: none; }
.chip span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(214, 173, 79, .7); transition: all .3s var(--ease); }
.chip:hover span { border-color: rgba(214, 173, 79, .6); color: #fff; }
.chip input:checked + span { background: var(--gold-grad); background-size: 200% 100%; color: #14110a; border-color: transparent; font-weight: 500; }
.chip input:checked + span::before { background: #14110a; border-color: #14110a; }
.chip input:focus-visible + span { outline: 2px solid var(--gold-2); outline-offset: 3px; }

.seg { display: flex; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: 4px; background: rgba(10, 10, 11, .6); }
.seg label { flex: 1; cursor: pointer; position: relative; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: block; text-align: center; padding: 10px 6px; border-radius: 10px; font-size: 15px; color: var(--muted); transition: all .3s var(--ease); }
.seg input:checked + span { background: rgba(214, 173, 79, .16); color: var(--gold-2); box-shadow: inset 0 0 0 1px rgba(214, 173, 79, .5); }
.seg input:focus-visible + span { outline: 2px solid var(--gold-2); }

.tform__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; }
.tform__actions .btn { cursor: pointer; font-family: inherit; border: 0; height: 60px; }
.tform__actions .btn--ghost { border: 1px solid rgba(214, 173, 79, .45); background: transparent; }
.tform__note { color: var(--muted); font-size: 14px; }

/* WhatsApp-style live preview */
.chat { position: sticky; top: 100px; border-radius: 26px; overflow: hidden; border: 1px solid var(--line); background: #0d1418; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); }
.chat__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: #1b2429; }
.chat__head img { border-radius: 50%; }
.chat__head b { display: block; font-weight: 500; }
.chat__head small { color: #8fa2ab; font-size: 13px; }
.chat__body { padding: 22px 18px 26px; min-height: 360px; display: grid; align-content: end; gap: 10px;
  background: radial-gradient(circle at 20% 20%, rgba(214, 173, 79, .06), transparent 40%), repeating-linear-gradient(45deg, rgba(255, 255, 255, .012) 0 12px, transparent 12px 24px), #0b1216; }
.chat__bubble { justify-self: end; max-width: 92%; background: #005c4b; color: #e9f3ef; padding: 12px 14px 22px; border-radius: 14px 4px 14px 14px; font-size: 15px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; position: relative; }
.chat__bubble::after { content: "\2713\2713"; position: absolute; right: 10px; bottom: 4px; font-size: 11px; color: #53bdeb; letter-spacing: -2px; }
.chat__bubble b { font-weight: 600; }
.chat__bubble .ph { color: rgba(233, 243, 239, .45); font-style: italic; }
.chat__bubble.pulse { animation: pop .35s var(--ease); }
@keyframes pop { 50% { transform: scale(1.015) } }
.chat__hint { justify-self: end; color: #6b7c84; font-size: 12px; }

.toast { position: fixed; left: 50%; bottom: 28px; z-index: 80; transform: translate(-50%, 160%); padding: 14px 22px; border-radius: 999px; background: #14110a; color: var(--gold-2); border: 1px solid rgba(214, 173, 79, .5); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .8); font-size: 15px; transition: transform .6s var(--ease), visibility 0s linear .6s; pointer-events: none; visibility: hidden; }
.toast.is-on { transform: translate(-50%, 0); visibility: visible; transition: transform .6s var(--ease), visibility 0s; }

@media (max-width: 900px) {
  .turno__grid { grid-template-columns: 1fr; }
  .chat { position: relative; top: 0; }
  .chat__body { min-height: 0; }
}
@media (max-width: 640px) {
  .tform__row { grid-template-columns: 1fr; }
  .tform__actions .btn { width: 100%; }
  .chip span { font-size: 14px; padding: 10px 14px; }
}