/* Casa Robles look for the embedded agenda: same palette and fonts as the
   site (Cormorant Garamond for headings, Lora for text, gold #b68235). */
.dp-embed {
  --dp-bg: #14120f;
  --dp-surface: rgba(243, 242, 242, 0.06);
  --dp-text: #f3f2f2;
  --dp-muted: #9b9797;
  --dp-border: rgba(243, 242, 242, 0.16);
  --dp-primary: #b68235;
  --dp-primary-text: #14120f;
  --dp-danger: #e5675c;
  --dp-success: #e1ad66;
  --dp-whatsapp: #1f7a5c;
  --dp-focus: #facb8d;
  --dp-font-body: "Lora", Georgia, serif;
  --dp-font-heading: "Cormorant Garamond", Georgia, serif;
  --dp-radius: 4px;
}
.dp-embed.dp-modal { border-color: rgba(182, 130, 53, 0.45); }
.dp-embed .button--ghost { color: #e1ad66; border-color: #b68235; }
.dp-embed .link-button { color: #e1ad66; }
.dp-embed .field select option { background: #14120f; color: #f3f2f2; }
/* Customer page (cita.html) */
body:has(> .cita-shell) { background: #0f0d0b; }

/* Phones: the page never moves sideways on a horizontal swipe (D-73).
   overflow-x: clip (not hidden) keeps the design's sticky header working;
   overscroll-behavior-x stops the sideways bounce. */
html, body { overflow-x: clip; overscroll-behavior-x: none; }

/* Phones: the design's sticky header took a third of the screen (menu in three
   rows). Two rows instead: logo with ES/EN and Reservar, then the menu in one
   line (with Membresía, D-74, it wraps to two only on the narrowest phones). The design styles inline (its template writes "position: sticky" with or
   without the space), hence the attribute selectors and !important. */
@media (max-width: 700px) {
  :is(div[style*="position:sticky"], div[style*="position: sticky"]) > nav {
    display: grid !important; grid-template-columns: 1fr auto; align-items: center;
    gap: 8px 10px !important; padding: 8px 16px 6px !important;
  }
  :is(div[style*="position:sticky"], div[style*="position: sticky"]) > nav > :nth-child(1) { grid-column: 1; grid-row: 1; gap: 10px !important; }
  :is(div[style*="position:sticky"], div[style*="position: sticky"]) > nav > :nth-child(1) img { width: 36px !important; height: 36px !important; }
  :is(div[style*="position:sticky"], div[style*="position: sticky"]) > nav > :nth-child(3) { grid-column: 2; grid-row: 1; gap: 8px !important; }
  :is(div[style*="position:sticky"], div[style*="position: sticky"]) > nav > :nth-child(3) > button { padding: 8px 12px !important; }
  :is(div[style*="position:sticky"], div[style*="position: sticky"]) > nav > :nth-child(2) {
    grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap !important; justify-content: space-between; gap: 2px 8px !important;
  }
  :is(div[style*="position:sticky"], div[style*="position: sticky"]) > nav > :nth-child(2) button,
  :is(div[style*="position:sticky"], div[style*="position: sticky"]) > nav > :nth-child(2) button span { font-size: 11px !important; letter-spacing: 0.04em !important; padding-top: 2px !important; padding-bottom: 4px !important; white-space: nowrap; }
}