/* Dental Master Ultimate — transparent header, full-screen navigation, mobile action rail */
:root { --nav-gold: #D1B886; }

#header.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: flex-start; gap: 16px;
  width: 100%; min-height: 78px; padding: 0 clamp(20px, 5vw, 72px);
  color: #fff; background: transparent; border: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
}
#header.header.scrolled {
  background: rgba(10, 10, 10, .85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.1); box-shadow: none;
}
#header .brand { display: flex; align-items: center; gap: 10px; min-width: 0; margin-right: auto; color: #fff; filter: drop-shadow(0 2px 7px rgba(0,0,0,.7)); }
#header .brand-glyph { color: var(--nav-gold); font-size: 20px; }
#header .brand-text strong { color: #fff; font-size: 19px; }
#header .brand-sub { color: var(--nav-gold); font-size: 8px; letter-spacing: .19em; }
#header .head-actions { display: flex; align-items: center; gap: 0; margin-left: auto; }
.header-phone, #header .hamb { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; color: var(--nav-gold); background: transparent; border: 0; filter: drop-shadow(0 1px 5px rgba(0,0,0,.75)); cursor: pointer; }
.header-phone svg, .nav-overlay-phone svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#header .hamb { display: grid; font-size: 20px; }
#header .hamb:hover, .header-phone:hover { color: #fff; transform: translateY(-1px); }

/* Full-screen black overlay; visibility prevents hidden menu controls entering tab order. */
.nav-overlay {
  position: fixed; inset: 0; z-index: 2000; width: 100vw; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(20px, 4vw, 42px) clamp(22px, 7vw, 96px);
  color: #F5F5F0; background: #0A0A0A; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .4s ease, visibility .4s ease;
}
.nav-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; }
.nav-overlay-backdrop { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: default; }
.nav-overlay-inner { position: relative; z-index: 1; display: flex; flex-direction: column; width: min(1060px, 100%); min-height: 100%; margin: 0 auto; }
.nav-overlay-header { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.1); }
.nav-overlay-header .brand { display: inline-flex; align-items: center; gap: 9px; color: #F5F5F0; font-family: 'Playfair Display', Georgia, serif; font-size: 15px; }
.nav-overlay-header .brand-glyph { color: var(--nav-gold); }
.nav-overlay-phone { position: absolute; left: 50%; display: inline-flex; align-items: center; gap: 9px; color: var(--nav-gold); font: 600 12px/1 'Inter', sans-serif; letter-spacing: .04em; transform: translateX(-50%); }
.nav-overlay-phone:hover { color: #fff; }
.mobile-nav-close { display: grid; place-items: center; width: 42px; height: 42px; margin-left: auto; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: #F5F5F0; background: rgba(255,255,255,.04); font-size: 20px; cursor: pointer; }
.mobile-nav-close:hover { color: var(--nav-gold); border-color: var(--nav-gold); }
.nav-overlay-links { display: flex; flex-direction: column; width: min(760px, 100%); margin: auto; padding: 20px 0; }
.nav-overlay-link { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 72px; padding: 14px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.1); color: #F5F5F0; background: transparent; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(30px, 5vw, 40px); line-height: 1.08; text-align: left; cursor: pointer; transition: color .2s ease, padding .2s ease; }
.nav-overlay-link > span:last-child { color: var(--nav-gold); font-family: 'Inter', sans-serif; font-size: 17px; transition: transform .2s ease; }
.nav-overlay-link:hover { color: var(--nav-gold); padding-left: 7px; }
.nav-overlay-link:hover > span:last-child { transform: translate(3px,-3px); }
.nav-services-toggle .nav-chevron { width: 24px; height: 24px; fill: none; stroke: var(--nav-gold); stroke-width: 1.7; transition: transform .24s ease; }
.nav-services-toggle[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
.sub-menu[hidden] { display: none; }
.sub-menu:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px 32px; padding: 22px 0 27px; border-bottom: 1px solid rgba(255,255,255,.1); }
.nav-service-category p { margin: 0 0 7px; color: var(--nav-gold); font: 700 10px/1.4 'Inter', sans-serif; letter-spacing: .19em; text-transform: uppercase; }
.nav-service-category a { display: block; padding: 8px 0; color: #E0E0E0; font: 400 15px/1.5 'Inter', sans-serif; transition: color .18s ease, padding-left .18s ease; }
.nav-service-category a:hover { padding-left: 4px; color: var(--nav-gold); }
.nav-overlay-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); }
.nav-bottom-controls { display: flex; align-items: center; gap: 14px; }
.nav-overlay .lang-switch { min-height: 42px; padding: 8px 15px; border-color: rgba(255,255,255,.2); color: #E0E0E0; background: transparent; }
.nav-overlay .lang-switch .active { color: var(--nav-gold); }
.nav-overlay .theme-toggle-menu { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 8px 13px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #E0E0E0; background: transparent; font: 600 11px 'Inter', sans-serif; cursor: pointer; }
.nav-overlay .theme-toggle-menu i { color: var(--nav-gold); }
.nav-overlay .theme-toggle-menu:hover { border-color: var(--nav-gold); color: var(--nav-gold); }
.nav-booking { display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px; color: #111; background: linear-gradient(135deg, #D1B886, #E5C995); font: 700 11px 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.nav-booking:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* Floating three-action mobile rail: call · booking · AI assistant */
.floating-bottom-bar { display: none; }
@media (max-width: 768px) {
  body { padding-bottom: 100px !important; }
  .floating-bottom-bar {
    position: fixed; z-index: 999; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom));
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: calc(100% - 56px); max-width: 300px; height: 56px; padding: 0 8px;
    border: 1px solid rgba(255,255,255,.15); border-radius: 50px;
    color: #F5F5F0; background: rgba(20,20,20,.9); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 10px 30px rgba(0,0,0,.5); transform: translateX(-50%);
  }
  .mobile-bar-icon, .mobile-ai-trigger { display: grid; flex: 0 0 36px; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; color: var(--nav-gold); background: transparent; cursor: pointer; }
  .mobile-bar-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-ai-trigger { border: 1px solid rgba(229,201,149,.55); color: #111; background: linear-gradient(145deg, #f5ddb0, #c7a86c); box-shadow: 0 4px 14px rgba(209,184,134,.28); }
  .mobile-ai-trigger i { font-size: 15px; line-height: 1; }
  .mobile-ai-trigger:hover, .mobile-ai-trigger[aria-expanded="true"] { color: #111; background: linear-gradient(145deg, #ffeac0, #d1b886); transform: translateY(-1px); }
  .btn-gold-center { display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; min-width: 0; min-height: 38px; padding: 10px 14px; border: 0; border-radius: 30px; color: #000; background: linear-gradient(135deg, #D1B886, #E5C995); font: 600 10px/1 'Inter', sans-serif; letter-spacing: .07em; text-align: center; text-transform: uppercase; white-space: nowrap; }
  .btn-gold-center:hover { filter: brightness(1.06); transform: translateY(-1px); }
  .ai-widget { right: 20px; bottom: calc(76px + env(safe-area-inset-bottom)); }
  .ai-widget .ai-launcher { display: none; }
  .ai-widget .ai-panel { right: -2px; bottom: 0; width: min(390px, calc(100vw - 32px)); height: min(570px, calc(100dvh - 185px)); min-height: 300px; }
}
@media (min-width: 769px) {
  body { padding-bottom: 0 !important; }
  .floating-bottom-bar { display: none !important; }
}
@media (max-width: 520px) {
  #header.header { min-height: 68px; padding-inline: 18px; }
  #header .brand-text strong { font-size: 16px; }
  #header .brand-sub { font-size: 7px; }
  #header .head-actions { gap: 12px; }
  .nav-overlay { padding: 18px 22px calc(24px + env(safe-area-inset-bottom)); }
  .nav-overlay-header { padding-bottom: 15px; }
  .nav-overlay-header .brand { font-size: 12px; }
  .nav-overlay-phone span { display: none; }
  .nav-overlay-links { margin: 18px 0; }
  .nav-overlay-link { min-height: 59px; font-size: 29px; }
  .sub-menu:not([hidden]) { grid-template-columns: 1fr; gap: 14px; padding-top: 17px; }
  .nav-overlay-bottom { align-items: stretch; flex-direction: column; gap: 12px; padding-top: 14px; }
  .nav-bottom-controls { justify-content: space-between; }
  .nav-booking { justify-content: center; }
  .floating-bottom-bar { width: calc(100% - 56px); max-width: 300px; padding-inline: 8px; }
  .btn-gold-center { padding-inline: 10px; font-size: 9px; letter-spacing: .05em; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-overlay, .nav-overlay * { transition-duration: .01ms !important; }
}

@media print {
  body.booking-pass-open * { visibility: hidden !important; }
  body.booking-pass-open .booking-success-overlay,
  body.booking-pass-open .booking-success-overlay * { visibility: visible !important; }
  body.booking-pass-open .booking-success-overlay { position: absolute; inset: 0; display: block !important; width: auto; height: auto; padding: 0; background: #fff; opacity: 1; overflow: visible; }
  body.booking-pass-open .booking-pass-card { width: 100%; max-height: none; border: 0; border-radius: 0; box-shadow: none; animation: none; }
  body.booking-pass-open .booking-pass-close,
  body.booking-pass-open .booking-pass-tools,
  body.booking-pass-open .booking-pass-done { display: none !important; }
}


/* Final reference layout: wordmark left; phone and hamburger grouped on the right. */
#header.header { justify-content: space-between; gap: 18px; }
#header .brand { margin-right: 0; }
#header .head-actions { gap: 12px; margin-left: 0; }
#header .header-phone { width: 50px; height: 50px; border: 1px solid rgba(209,184,134,.48); border-radius: 50%; background: rgba(10,10,10,.12); }
#header .header-phone svg { width: 21px; height: 21px; }
#header .hamb { width: 38px; height: 44px; margin-left: 2px; border-radius: 0; background: transparent; box-shadow: none; }

/* Compact bottom pill follows the reference: call · schedule · accessibility. */
@media (max-width: 768px) {
  body { padding-bottom: 90px !important; }
  .floating-bottom-bar { width: min(300px, calc(100% - 52px)); max-width: 300px; height: 56px; gap: 6px; padding: 0 8px; bottom: calc(16px + env(safe-area-inset-bottom)); }
  .mobile-bar-icon { display: grid; flex: 0 0 40px; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; color: var(--nav-gold); background: transparent; cursor: pointer; touch-action: manipulation; }
  .mobile-bar-icon:hover { color: #fff; background: rgba(255,255,255,.1); }
  .btn-gold-center { display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 9px; min-width: 0; min-height: 42px; padding: 9px 12px; border: 0; border-radius: 30px; color: #111; background: linear-gradient(135deg, #D1B886, #E5C995); font: 700 10px/1 'Inter', sans-serif; letter-spacing: .13em; text-align: center; text-transform: uppercase; white-space: nowrap; cursor: pointer; touch-action: manipulation; }
  .btn-gold-center svg { flex: 0 0 17px; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .ai-widget { right: 20px; bottom: calc(72px + env(safe-area-inset-bottom)); }
  .ai-widget .ai-launcher { display: none; }
  .mobile-accessibility-panel { position: fixed; z-index: 1001; right: max(26px, calc((100vw - 300px) / 2)); bottom: calc(82px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 5px; width: min(242px, calc(100vw - 52px)); padding: 9px; border: 1px solid rgba(209,184,134,.34); border-radius: 18px; color: #F5F5F0; background: rgba(15,15,15,.96); box-shadow: 0 16px 42px rgba(0,0,0,.48); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(7px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; }
  .mobile-accessibility-panel.active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
  .mobile-a11y-option { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 8px 10px; border: 0; border-radius: 10px; color: inherit; background: transparent; font: 600 12px 'Inter', sans-serif; text-align: left; cursor: pointer; }
  .mobile-a11y-option:hover, .mobile-a11y-option[aria-pressed="true"] { color: var(--nav-gold); background: rgba(255,255,255,.08); }
  .a11y-option-icon { display: grid; flex: 0 0 24px; place-items: center; width: 24px; height: 24px; color: var(--nav-gold); font-weight: 800; }
}
@media (min-width: 769px) { .mobile-accessibility-panel { display: none; } }
@media (max-width: 520px) {
  #header.header { justify-content: space-between; min-height: 68px; padding-inline: 18px; }
  #header .brand-text strong { font-size: 16px; }
  #header .brand-sub { font-size: 7px; }
  #header .head-actions { gap: 8px; }
  #header .header-phone { width: 42px; height: 42px; }
  #header .hamb { width: 34px; }
  .floating-bottom-bar { width: min(300px, calc(100% - 52px)); max-width: 300px; height: 56px; }
  .btn-gold-center { padding-inline: 9px; font-size: 9px; letter-spacing: .11em; }
}

/* One-tap accessibility settings, available from the single mobile pill. */
html.a11y-large-text { font-size: 110%; }
body.a11y-high-contrast { --muted: #222; --line: rgba(0,0,0,.45); --line-strong: rgba(0,0,0,.7); }
body.dark.a11y-high-contrast { --muted: #F1F1F1; --line: rgba(255,255,255,.48); --line-strong: rgba(255,255,255,.72); }
body.a11y-high-contrast :focus-visible { outline: 3px solid #E1B34F !important; outline-offset: 3px; }

/* Booking success focus mode: blur and darken the page, never the pass card. */
body.booking-pass-open { overflow: hidden !important; }
.booking-success-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; height: 100dvh; padding: 20px; background: rgba(4,31,32,.58); backdrop-filter: blur(18px) saturate(.72); -webkit-backdrop-filter: blur(18px) saturate(.72); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .28s ease, visibility .28s ease; }
.booking-success-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; }
.booking-success-backdrop { position: absolute; inset: 0; }
.booking-pass-card { --pass-accent: #D1B886; --pass-deep: #0A5A5C; --pass-header: #0B5558; position: relative; z-index: 1; width: min(680px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 0 24px 24px; border: 1px solid color-mix(in srgb, var(--pass-accent) 72%, #fff); border-radius: 28px; color: #123337; background: #F8F7F1; box-shadow: 0 32px 100px rgba(0,0,0,.55); filter: none; backdrop-filter: none; -webkit-backdrop-filter: none; animation: bookingPassReveal .46s cubic-bezier(.2,.8,.2,1) both; }
.booking-pass-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 -24px 0; padding: 24px 24px 30px; border-radius: 28px 28px 0 0; color: #F8F7F1; background: radial-gradient(circle at 78% 5%, rgba(80,164,153,.45), transparent 34%), linear-gradient(135deg, var(--pass-header), #06373A); position: relative; overflow: hidden; }
.booking-pass-header::after { content: ''; position: absolute; left: -5%; right: -5%; bottom: -22px; height: 48px; border-radius: 50%; background: #F8F7F1; transform: rotate(-2deg); }
.booking-pass-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(0,0,0,.12); border-radius: 50%; color: #343630; background: transparent; font-size: 25px; line-height: 1; cursor: pointer; }
.booking-pass-close:hover { color: #000; background: rgba(0,0,0,.06); }
.booking-pass-brand { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 2px 8px; max-width: calc(100% - 38px); }
.booking-pass-mark { grid-row: span 2; color: var(--pass-accent); font-size: 29px; }
.booking-pass-brand strong { overflow: hidden; color: #F8F7F1; font: 700 17px/1.1 'Inter', sans-serif; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.booking-pass-brand small { color: var(--pass-accent); font: 700 8px/1.4 'Inter', sans-serif; letter-spacing: .15em; }
.booking-pass-status { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 9px 13px; border: 1px solid rgba(202,240,207,.32); border-radius: 999px; color: #DFF5E4; background: rgba(83,178,108,.6); font: 700 9px 'Inter', sans-serif; letter-spacing: .12em; }
.booking-pass-status > span:first-child { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; color: #fff; background: #507A53; font-size: 11px; }
.booking-pass-heading { position: relative; z-index: 2; padding: 5px 10px 21px; text-align: center; }
.booking-pass-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 4px 0 8px; color: #8C6C3B; font: 700 9px 'Inter', sans-serif; letter-spacing: .2em; }
.booking-pass-eyebrow::before, .booking-pass-eyebrow::after { content: ''; width: 34px; height: 1px; background: var(--pass-accent); }
.booking-pass-card h2 { margin: 0 0 7px; color: var(--pass-deep); font: 600 clamp(28px, 5vw, 42px)/1.05 'Playfair Display', Georgia, serif; letter-spacing: -.035em; }
.booking-pass-copy { max-width: 520px; margin: 0 auto; color: #4D6668; font: italic 400 17px/1.4 'Inter', sans-serif; }
.booking-pass-date-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0 0 16px; overflow: hidden; border: 1px solid rgba(10,90,92,.12); border-radius: 15px; background: rgba(10,90,92,.12); }
.booking-pass-date-item { display: flex; align-items: center; gap: 13px; min-width: 0; padding: 16px; background: #FFFEFA; }
.booking-pass-date-item > i { color: var(--pass-deep); font-size: 25px; }
.booking-pass-date-item dt, .booking-pass-date-item dd { margin: 0; }
.booking-pass-date-item dt { color: #527174; font: 700 9px 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.booking-pass-date-item dd { margin-top: 5px; overflow-wrap: anywhere; color: #14393D; font: 700 16px/1.25 'Inter', sans-serif; }
.booking-pass-details { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 1px; margin: 0 0 16px; overflow: hidden; border: 1px solid rgba(0,0,0,.1); border-radius: 14px; background: rgba(0,0,0,.1); }
.booking-pass-details > div { min-width: 0; padding: 13px; background: #FBFAF6; }
.booking-pass-details dt { margin: 0 0 5px; color: #668082; font: 700 8px 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.booking-pass-details dd { margin: 0; overflow-wrap: anywhere; color: #163B3F; font: 600 12px/1.4 'Inter', sans-serif; }
.booking-pass-reference { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; padding: 14px; border: 1px solid rgba(10,90,92,.16); border-radius: 14px; background: #fff; }
.booking-pass-reference-text { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.booking-pass-reference-text > span { color: #76786F; font: 700 8px 'Inter', sans-serif; letter-spacing: .12em; }
.booking-pass-reference-text strong { overflow-wrap: anywhere; color: #161715; font: 700 14px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.booking-pass-qr-block { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 0 0 82px; }
.booking-pass-qr { display: grid; place-items: center; width: 76px; height: 76px; padding: 5px; border: 1px solid #E1DED5; border-radius: 8px; background: #fff; }
.booking-pass-qr svg { display: block; width: 100%; height: 100%; shape-rendering: crispEdges; }
.booking-pass-qr-block small { max-width: 100px; color: #76786F; font: 500 7px/1.3 'Inter', sans-serif; text-align: center; }
.booking-pass-protected { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 17px; padding: 13px 18px; border: 1px solid rgba(10,90,92,.18); border-radius: 15px; color: var(--pass-deep); background: #E6F4F1; text-align: left; }
.booking-pass-protected > i { font-size: 28px; color: var(--pass-deep); }
.booking-pass-protected strong, .booking-pass-protected span { display: block; }
.booking-pass-protected strong { margin-bottom: 2px; font: 700 13px 'Inter', sans-serif; }
.booking-pass-protected span { font: 400 11px/1.4 'Inter', sans-serif; }
.booking-pass-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0 0 10px; }
.booking-pass-tool { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 9px 10px; border: 1px solid rgba(10,90,92,.22); border-radius: 999px; color: var(--pass-deep); background: rgba(230,244,241,.72); font: 700 9px/1.2 'Inter', sans-serif; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.booking-pass-tool:hover { background: #E6F4F1; transform: translateY(-1px); }
.booking-pass-tool i { font-size: 13px; }
.booking-pass-done { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 46px; padding: 0 18px; border: 0; border-radius: 999px; color: #151612; background: linear-gradient(135deg, #D1B886, #E5C995); font: 700 10px 'Inter', sans-serif; letter-spacing: .11em; text-transform: uppercase; cursor: pointer; }
.booking-pass-done:hover { filter: brightness(1.04); transform: translateY(-1px); }
@keyframes bookingPassReveal { from { opacity: 0; transform: translateY(18px) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 520px) {
  .booking-success-overlay { padding: 13px; }
  .booking-pass-card { max-height: calc(100dvh - 26px); padding: 0 14px 17px; border-radius: 21px; }
  .booking-pass-header { margin-inline: -14px; padding: 20px 16px 26px; border-radius: 21px 21px 0 0; }
  .booking-pass-brand strong { font-size: 14px; }
  .booking-pass-heading { padding-inline: 2px; }
  .booking-pass-copy { font-size: 14px; }
  .booking-pass-date-item { gap: 8px; padding: 11px 9px; }
  .booking-pass-date-item > i { font-size: 19px; }
  .booking-pass-date-item dd { font-size: 12px; }
  .booking-pass-status { margin-top: 0; }
  .booking-pass-details { grid-template-columns: 1fr 1fr; }
  .booking-pass-details > div { padding: 10px; }
  .booking-pass-details > div:last-child { grid-column: 1 / -1; }
  .booking-pass-reference { gap: 10px; padding: 11px; }
  .booking-pass-reference-text strong { font-size: 12px; }
  .booking-pass-qr-block { flex-basis: 72px; }
  .booking-pass-qr { width: 68px; height: 68px; }
  .booking-pass-tools { grid-template-columns: 1fr; gap: 7px; }
  .booking-pass-tool { min-height: 40px; font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) { .booking-pass-card, .booking-success-overlay { animation: none; transition-duration: .01ms !important; } }

@media (max-width: 768px) {
  .whatsapp-btn, .to-top { display: none !important; }
}

/* Compact clinic wordmark inspired by the reference lockup, using this site's own brand data. */
#header .brand, .nav-overlay-header .brand { gap: 0; padding: 5px 10px 5px 5px; border: 1px solid rgba(255,255,255,.78); background: rgba(8,8,8,.24); }
#header .brand-glyph, .nav-overlay-header .brand-glyph { display: grid; flex: 0 0 30px; place-items: center; width: 30px; height: 30px; margin-right: 8px; color: #101010; background: #F7F5EE; font-size: 16px; }
#header .brand-text strong, .nav-overlay-header .brand-text strong { display: block; max-width: 150px; overflow: hidden; color: #fff; font: 700 12px/1.2 'Inter', sans-serif; letter-spacing: .11em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
#header .brand-sub, .nav-overlay-header .brand-sub { display: block; margin-top: 2px; color: var(--nav-gold); font: 600 6px/1.2 'Inter', sans-serif; letter-spacing: .17em; }
@media (max-width: 520px) { #header .brand { padding: 4px 7px 4px 4px; } #header .brand-glyph { flex-basis: 27px; width: 27px; height: 27px; margin-right: 7px; } #header .brand-text strong { max-width: 122px; font-size: 10px; } #header .brand-sub { font-size: 5px; } }

@media (max-width: 900px) {
  .hero { height: auto; max-height: none; align-items: flex-start; }
  .hero-grid { align-items: start; }
}

@media (max-width: 768px) {
  .mobile-ai-trigger { color: var(--nav-gold); }
  .mobile-ai-trigger i { font-size: 15px; line-height: 1; }
  .mobile-ai-trigger[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.1); }
}

/* Mobile polish: keep the gallery controls anchored to the image, not the viewport. */
.gallery-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.gallery-modal-card { position: relative; display: flex; align-items: center; justify-content: center; width: min(100%, 1100px); max-height: calc(100dvh - 48px); }
.gallery-modal-figure { position: relative; width: 100%; margin: 0; }
.gallery-modal-figure img { display: block; width: 100%; max-height: calc(100dvh - 100px); object-fit: contain; border-radius: 16px; }
.gallery-modal-close { position: absolute; top: 14px; right: 14px; z-index: 3; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: #fff; background: rgba(15,15,15,.58); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; }
.gallery-nav { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: #fff; background: rgba(15,15,15,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; transform: translateY(-50%); }
.gallery-prev { left: 14px; }
.gallery-next { right: 14px; }
.gallery-nav:hover, .gallery-modal-close:hover { color: var(--nav-gold); background: rgba(15,15,15,.82); }
@media (max-width: 768px) {
  body { padding-bottom: 120px !important; }
  .floating-bottom-bar { height: 50px; padding: 0 7px; gap: 5px; align-items: center; }
  .mobile-bar-icon, .mobile-ai-trigger { flex-basis: 36px; width: 36px; height: 36px; }
  .btn-gold-center { min-height: 36px; padding-block: 8px; }
  .gallery-modal { padding: 18px; }
  .gallery-modal-card { max-height: calc(100dvh - 36px); }
  .gallery-modal-close { top: 10px; right: 10px; width: 38px; height: 38px; }
  .gallery-nav { width: 40px; height: 40px; }
  .gallery-prev { left: 10px; }
  .gallery-next { right: 10px; }
}
@media (max-width: 768px) { #header.header.scrolled { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; } }

/* Requested glass header: clear at the top, translucent once scrolling begins. */
#header.header { background: transparent; }
#header.header.scrolled {
  background: rgba(15, 15, 15, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 768px) {
  #header.header.scrolled {
    background: rgba(15, 15, 15, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .cookie-banner { bottom: calc(100px + env(safe-area-inset-bottom)); }
}

/* Premium wordmark: prevent letter collision and preserve a crisp two-line lockup. */
#header .brand-text { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
#header .brand-text strong { display: block; color: #fff; font: 700 12px/1.2 'Inter', sans-serif; letter-spacing: .085em; word-spacing: normal; white-space: nowrap; transform: none; }
#header .brand-sub { display: block; color: var(--nav-gold); font: 600 7px/1.25 'Inter', sans-serif; letter-spacing: .16em; white-space: nowrap; }
@media (max-width: 520px) {
  #header .brand-text strong { font-size: 10.5px; letter-spacing: .065em; line-height: 1.25; }
  #header .brand-sub { font-size: 6.5px; letter-spacing: .13em; }
}
/* Native exclusive accordions: one category open at a time, no menu JavaScript required. */
.nav-overlay-links { width: min(760px, 100%); }
.nav-overlay-link { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; letter-spacing: -.015em; border-bottom: 1px solid rgba(255,255,255,.12); }
.nav-accordion { width: 100%; border-bottom: 1px solid rgba(255,255,255,.12); }
.nav-accordion > .nav-overlay-link { list-style: none; border-bottom: 0; }
.nav-accordion > summary::-webkit-details-marker { display: none; }
.nav-accordion > summary::marker { content: ''; }
.nav-accordion .nav-chevron { flex: 0 0 23px; width: 23px; height: 23px; fill: none; stroke: var(--nav-gold); stroke-width: 1.8; transition: transform .28s ease; }
.nav-accordion[open] > summary .nav-chevron { transform: rotate(180deg); }
.nav-link-arrow { color: var(--nav-gold); font: 400 17px/1 'Inter', sans-serif; }
.nav-accordion-panel { display: block !important; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .42s cubic-bezier(.2,.7,.2,1), opacity .28s ease; }
.nav-accordion[open] > .nav-accordion-panel { max-height: 640px; opacity: 1; }
.nav-accordion-panel-inner { overflow: hidden; }
.nav-accordion .sub-menu { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 32px; margin: 0; padding: 10px 0 24px 10px; border: 0; }
.nav-accordion .nav-simple-submenu { grid-template-columns: 1fr; padding-top: 5px; }
.nav-accordion .nav-service-category p { margin: 0 0 8px; color: var(--nav-gold); font: 700 10px/1.5 'Inter', sans-serif; letter-spacing: .22em; text-transform: uppercase; }
.nav-accordion .nav-service-category a { display: block; padding: 6px 0; color: rgba(245,245,240,.86); font: 400 14px/1.5 'Inter', sans-serif; letter-spacing: .01em; }
.nav-accordion .nav-service-category a:hover { color: var(--nav-gold); padding-left: 4px; }
.nav-accordion #serviceSubMenu[hidden] { display: grid !important; }
@media (max-width: 768px) {
  .nav-overlay-links { margin: 12px 0 18px; padding: 8px 0; }
  .nav-overlay-link { min-height: 58px; padding: 12px 0; font-size: clamp(27px, 8vw, 34px); line-height: 1.16; }
  .nav-accordion .sub-menu { grid-template-columns: 1fr; gap: 13px; padding: 8px 0 19px 8px; }
  .nav-accordion .nav-service-category p { font-size: 9px; letter-spacing: .2em; }
  .nav-accordion .nav-service-category a { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-accordion-panel, .nav-accordion .nav-chevron { transition-duration: .01ms !important; }
}

/* Final premium header: floating wordmark and quiet, functional right-side controls. */
#header.header { background: transparent; }
#header.header.scrolled { background: rgba(15,15,15,.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.1); }
#header .brand { gap: 9px; margin-right: auto; padding: 0; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none; filter: drop-shadow(0 2px 7px rgba(0,0,0,.52)); }
#header .brand-glyph { display: grid; flex: 0 0 28px; place-items: center; width: 28px; height: 28px; margin: 0; color: var(--nav-gold); background: transparent !important; font-size: 22px; line-height: 1; }
#header .brand-text { display: block; min-width: 0; }
#header .brand-text strong { display: block; max-width: none; overflow: visible; color: #fff; font: 600 12px/1.25 'Inter', sans-serif; letter-spacing: .075em; text-overflow: clip; text-transform: uppercase; white-space: nowrap; }
#header .head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-left: 18px; }
#header .header-control, #header .hamb { display: grid; flex: 0 0 36px; place-items: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 1px solid rgba(209,184,134,.32); border-radius: 50%; color: var(--nav-gold); background: transparent; box-shadow: none; filter: none; font-size: 15px; cursor: pointer; }
#header .header-control:hover, #header .hamb:hover { color: #fff; border-color: rgba(255,255,255,.48); background: rgba(255,255,255,.035); transform: none; }
#header .header-lang { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 55px; min-height: 32px; margin: 0; padding: 0 8px; border: 1px solid rgba(209,184,134,.32); border-radius: 999px; color: rgba(255,255,255,.78); background: transparent; font: 600 10px/1 'Inter', sans-serif; letter-spacing: .08em; }
#header .header-lang .lang-es.active, #header .header-lang .lang-en.active { color: var(--nav-gold); }
#header .header-lang:hover { border-color: rgba(255,255,255,.48); background: rgba(255,255,255,.035); }
@media (max-width: 520px) {
  #header.header { padding-inline: 14px; }
  #header .brand { gap: 6px; }
  #header .brand-glyph { flex-basis: 24px; width: 24px; height: 24px; font-size: 20px; }
  #header .brand-text strong { max-width: 138px; font-size: 10px; letter-spacing: .055em; }
  #header .head-actions { gap: 5px; margin-left: 8px; }
  #header .header-control, #header .hamb { flex-basis: 32px; width: 32px; height: 32px; font-size: 14px; }
  #header .header-lang { min-width: 48px; min-height: 30px; gap: 3px; padding-inline: 5px; font-size: 9px; }
}

/* Precise macOS glass treatment for the sticky header. */
#header.header {
  background-color: rgba(0, 0, 0, 0) !important;
  border-bottom: 0 solid transparent;
  box-shadow: none;
  transition: background-color .32s ease, backdrop-filter .32s ease, border-color .32s ease, box-shadow .32s ease;
}
#header.header.scrolled {
  background-color: rgba(18, 18, 18, 0.65) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
}
#header .header-control, #header .header-lang, #header .hamb {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid rgba(209, 184, 134, 0.38);
  border-radius: 50%;
  color: var(--nav-gold);
  background: transparent;
  box-shadow: none;
}
#header .header-lang { display: inline-flex; align-items: center; justify-content: center; gap: 1px; font-size: 8px; letter-spacing: .025em; }
#header .header-lang .lang-es.active, #header .header-lang .lang-en.active { color: var(--nav-gold); }
#header .header-control:hover, #header .header-lang:hover, #header .hamb:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.62);
  background: transparent;
  transform: none;
}
@media (max-width: 520px) {
  #header .header-control, #header .header-lang, #header .hamb {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
  }
  #header .header-lang { font-size: 7px; }
}

/* On light interior pages, the transparent header needs a dark wordmark. */
body[data-page]:not([data-page="home"]) #header:not(.scrolled) .brand { filter: none; }
body[data-page]:not([data-page="home"]) #header:not(.scrolled) .brand-text strong { color: #24231f !important; text-shadow: none; }
body[data-page]:not([data-page="home"]) #header:not(.scrolled) .brand-glyph { color: #9a7740; }
body[data-page]:not([data-page="home"]) #header:not(.scrolled) .header-control,
body[data-page]:not([data-page="home"]) #header:not(.scrolled) .header-lang,
body[data-page]:not([data-page="home"]) #header:not(.scrolled) .hamb { color: #866632; border-color: rgba(134, 102, 50, .48); }
body[data-page]:not([data-page="home"]) #header.scrolled .brand-text strong { color: #fff !important; }
body[data-page]:not([data-page="home"]) #header.scrolled .header-control,
body[data-page]:not([data-page="home"]) #header.scrolled .header-lang,
body[data-page]:not([data-page="home"]) #header.scrolled .hamb { color: var(--nav-gold); border-color: rgba(209, 184, 134, .38); }
@media (max-width: 520px) { #header .header-lang { font-size: 8px; } }


/* Header lockup matching the user's reference: fixed glass rail, boxed clinic mark, call and menu. */
#header.header {
  position: fixed;
  z-index: 1000;
  min-height: 84px;
  justify-content: space-between;
  gap: 24px;
  padding: 12px clamp(20px, 5vw, 72px);
  color: #f4f2ec;
  background-color: rgba(18, 22, 29, .82) !important;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 4px 28px rgba(0,0,0,.12);
  transition: background-color .3s ease, backdrop-filter .3s ease, border-color .3s ease, box-shadow .3s ease;
}
#header.header.scrolled {
  background-color: rgba(18, 22, 29, .9) !important;
  backdrop-filter: blur(16px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(165%) !important;
  border-bottom-color: rgba(255,255,255,.13) !important;
  box-shadow: 0 4px 30px rgba(0,0,0,.16) !important;
}
#header .brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  width: fit-content;
  min-height: 58px;
  margin: 0 auto 0 0;
  padding: 6px 15px 6px 6px;
  border: 1px solid rgba(255,255,255,.94) !important;
  border-radius: 0;
  color: #151515;
  background: #f3f2ed !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.16);
  filter: none;
  text-decoration: none;
}
#header .brand-glyph {
  display: grid;
  flex: 0 0 56px;
  place-items: center;
  width: 56px;
  height: 42px;
  margin: 0;
  border-right: 1px solid rgba(22,22,22,.22);
  color: #222;
  background: transparent !important;
  font: 500 19px/1 'Playfair Display', Georgia, serif;
  letter-spacing: -.09em;
}
#header .brand-text { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
#header .brand-text strong { display: block; max-width: none; overflow: visible; color: #171717 !important; font: 600 11px/1.15 'Inter', sans-serif; letter-spacing: .19em; text-overflow: clip; text-transform: uppercase; white-space: nowrap; }
#header .brand-sub { display: block; margin: 0; color: #4d4b45; font: 600 6px/1.1 'Inter', sans-serif; letter-spacing: .23em; text-transform: uppercase; white-space: nowrap; }
#header .head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin: 0 0 0 auto; }
#header .header-phone {
  display: grid;
  flex: 0 0 50px;
  place-items: center;
  width: 50px;
  height: 50px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(209,184,134,.68);
  border-radius: 50%;
  color: #e0c78e;
  background: transparent;
  filter: none;
  box-shadow: none;
}
#header .header-phone svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#header .hamb {
  display: grid;
  flex: 0 0 54px;
  place-items: center;
  width: 54px;
  height: 50px;
  margin: 0;
  padding: 0 3px;
  border: 0;
  border-radius: 0;
  color: #e0c78e;
  background: transparent;
  filter: none;
  box-shadow: none;
}
#header .hamb svg { display: block; width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }
#header .header-phone:hover { color: #fff; border-color: rgba(255,255,255,.82); transform: translateY(-1px); }
#header .hamb:hover { color: #fff; transform: translateY(-1px); }
/* Breadcrumb is content, not part of the fixed brand row. */
.page-intro { position: relative; z-index: 1; padding-top: 100px !important; }
@media (max-width: 520px) {
  #header.header { min-height: 72px; gap: 10px; padding: 9px 14px; }
  #header .brand { min-height: 50px; gap: 8px; padding: 4px 9px 4px 4px; }
  #header .brand-glyph { flex-basis: 48px; width: 48px; height: 38px; font-size: 17px; }
  #header .brand-text { gap: 3px; }
  #header .brand-text strong { font-size: 9px; letter-spacing: .13em; }
  #header .brand-sub { font-size: 5px; letter-spacing: .17em; }
  #header .head-actions { gap: 10px; }
  #header .header-phone { flex-basis: 42px; width: 42px; height: 42px; }
  #header .header-phone svg { width: 20px; height: 20px; }
  #header .hamb { flex-basis: 44px; width: 44px; height: 42px; }
  #header .hamb svg { width: 30px; height: 30px; }
  .page-intro { padding-top: 88px !important; }
}

/* Responsive interaction baseline: preserve the clinic lockup and existing palette. */
#header.header {
  top: 0;
  min-height: calc(84px + env(safe-area-inset-top));
  padding: calc(10px + env(safe-area-inset-top)) clamp(14px, 4vw, 56px) 10px;
  padding-inline: max(env(safe-area-inset-left), clamp(14px, 4vw, 56px)) max(env(safe-area-inset-right), clamp(14px, 4vw, 56px));
}
#header .head-actions { gap: clamp(6px, 1.3vw, 14px); }
#header .header-phone, #header .hamb {
  flex: 0 0 48px;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  touch-action: manipulation;
}
#header :focus-visible, .nav-overlay :focus-visible, .floating-bottom-bar :focus-visible,
.mobile-accessibility-panel :focus-visible, .gallery-modal :focus-visible {
  outline: 3px solid #E1B34F;
  outline-offset: 3px;
}
.nav-overlay {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: calc(22px + env(safe-area-inset-top)) clamp(20px, 6vw, 72px) calc(24px + env(safe-area-inset-bottom));
  padding-inline: max(env(safe-area-inset-left), clamp(20px, 6vw, 72px)) max(env(safe-area-inset-right), clamp(20px, 6vw, 72px));
}
.nav-overlay-header .mobile-nav-close { width: 48px; height: 48px; min-width: 48px; min-height: 48px; }
.nav-overlay-phone { min-height: 44px; }
.nav-overlay .lang-switch, .nav-overlay .theme-toggle-menu { min-height: 44px; touch-action: manipulation; }
.nav-overlay .nav-booking { min-height: 48px; touch-action: manipulation; }
.nav-accordion > .nav-overlay-link, .nav-overlay-link { min-height: 48px; touch-action: manipulation; }
.nav-accordion .nav-service-category a { min-height: 44px; display: flex; align-items: center; touch-action: manipulation; }
.page-intro { padding-top: calc(122px + env(safe-area-inset-top)) !important; }
.service-filters .filter { min-height: 44px; touch-action: manipulation; }
.faq-question { min-height: 48px; touch-action: manipulation; }
.swiper-prev, .swiper-next { min-width: 44px; min-height: 44px; touch-action: manipulation; }
.mobile-a11y-option { min-height: 44px; touch-action: manipulation; }
.booking-pass-close { width: 44px; min-width: 44px; height: 44px; min-height: 44px; touch-action: manipulation; }
.booking-pass-tool { min-height: 44px; touch-action: manipulation; }

@media (max-width: 768px) {
  body { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
  .floating-bottom-bar {
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: min(320px, calc(100% - 32px));
    height: 64px;
    min-height: 64px;
    gap: 6px;
    padding: 0 8px;
  }
  .mobile-bar-icon, .mobile-ai-trigger {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }
  .btn-gold-center { min-height: 44px; touch-action: manipulation; }
  .ai-widget { right: max(16px, env(safe-area-inset-right)); bottom: calc(84px + env(safe-area-inset-bottom)); }
  .mobile-accessibility-panel { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .cookie-banner { bottom: calc(100px + env(safe-area-inset-bottom)); }
  .gallery-modal { padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .gallery-modal-close, .gallery-nav { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  .gallery-modal-close { top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); }
  .gallery-prev { left: max(10px, env(safe-area-inset-left)); }
  .gallery-next { right: max(10px, env(safe-area-inset-right)); }
  .page-intro { padding-top: calc(104px + env(safe-area-inset-top)) !important; }
}
@media (max-width: 520px) {
  #header.header { min-height: calc(72px + env(safe-area-inset-top)); padding: calc(8px + env(safe-area-inset-top)) 14px 8px; }
  #header.header { padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right)); }
  #header .header-phone, #header .hamb { flex-basis: 48px; width: 48px; min-width: 48px; height: 48px; min-height: 48px; }
  #header .head-actions { gap: 6px; margin-left: 6px; }
  #header .brand { max-width: calc(100% - 108px); }
  #header .brand-text { min-width: 0; }
  #header .brand-text strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  #header .brand-sub { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .nav-overlay { padding-inline: max(18px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-right)); }
  .nav-overlay-bottom { padding-bottom: max(0px, env(safe-area-inset-bottom)); }
  .page-intro { padding-top: calc(96px + env(safe-area-inset-top)) !important; }
}
@media (max-width: 360px) {
  #header.header { padding-inline: 10px; }
  #header.header { padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)); }
  #header .brand { gap: 4px; }
  #header .brand-glyph { flex-basis: 22px; width: 22px; }
  #header .brand-text strong { font-size: 9px; letter-spacing: .035em; }
  #header .head-actions { gap: 4px; }
  .floating-bottom-bar { width: calc(100% - 24px); }
}
@media (min-width: 769px) {
  body { padding-bottom: 0 !important; }
  .floating-bottom-bar { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  #header.header, .nav-overlay, .nav-overlay *, .floating-bottom-bar *, .gallery-modal * { scroll-behavior: auto; transition-duration: .01ms !important; }
}


/* Explicit notice for this public fictitious-data demonstration. */
.demo-disclosure {
  position: relative;
  z-index: 2;
  width: min(1040px, calc(100% - 32px));
  margin: 88px auto 18px;
  padding: 13px 17px;
  border: 1px solid rgba(209, 184, 134, .62);
  border-left: 4px solid #D1B886;
  border-radius: 12px;
  color: #F5F2E9;
  background: rgba(20, 23, 25, .96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  font: 500 13px/1.55 'Inter', sans-serif;
}
.demo-disclosure strong { display: block; margin-bottom: 3px; color: #E5C995; font-size: 11px; letter-spacing: .11em; }
.demo-disclosure .i18n-en { display: none; }
html[lang="en"] .demo-disclosure .i18n-es { display: none; }
html[lang="en"] .demo-disclosure .i18n-en { display: inline; }
.page-intro + .demo-disclosure { margin-top: 0; }
@media (max-width: 768px) {
  .demo-disclosure { margin-top: 76px; padding: 12px 14px; font-size: 12px; }
  .page-intro + .demo-disclosure { margin-top: 0; }
}

/* Shared accessible status treatments for loading, form errors and partial-success notices. */
.dynamic-status,
.booking-form-status,
.booking-result-notice {
  margin: 14px 0;
  padding: 12px 15px;
  border: 1px solid color-mix(in srgb, var(--accent, #b89a62) 38%, transparent);
  border-left: 3px solid var(--accent, #b89a62);
  border-radius: 12px;
  color: var(--ink, #27251f);
  background: color-mix(in srgb, var(--surface, #fff) 92%, var(--accent, #b89a62));
  font-size: 14px;
  line-height: 1.55;
}
.booking-form-status[hidden],
.booking-result-notice[hidden] { display: none !important; }
body.dark .dynamic-status,
body.dark .booking-form-status,
body.dark .booking-result-notice { color: #f5f2ea; background: rgba(255,255,255,.06); }
@media (max-width: 520px) {
  .dynamic-status, .booking-form-status, .booking-result-notice { font-size: 13px; }
}

.auto-log.simulated strong::before { content: '●'; margin-right: 7px; color: var(--accent, #b89a62); }
.auto-log.simulated small { color: var(--muted, #76736d); }


/* Reference lockup: white outlined Mercado wordmark, square light monogram, phone ring and menu. */
#header.header {
  min-height: 88px;
  padding: 10px clamp(18px, 7.3vw, 72px);
  color: #f7f6f2;
  background: rgba(25, 30, 37, .64);
  border-bottom: 1px solid rgba(255,255,255,.13);
  backdrop-filter: blur(12px) saturate(125%);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
}
#header .brand {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100% - 132px);
  min-height: 68px;
  margin: 0 auto 0 0;
  padding: 5px 14px 5px 5px;
  border: 2px solid rgba(255,255,255,.94);
  border-radius: 0;
  color: #fff;
  background: transparent;
  box-shadow: none;
  filter: none;
  text-decoration: none;
}
#header .brand-glyph {
  display: grid;
  flex: 0 0 62px;
  place-items: center;
  width: 62px;
  height: 54px;
  margin: 0;
  border: 0;
  color: #202020;
  background: #f5f4ef;
}
#header .mercado-mark { display: block; width: 46px; height: 40px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: square; stroke-linejoin: miter; }
#header .brand-text { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; }
#header .brand-text strong { display: block; max-width: none; overflow: visible; color: #fff; font: 500 16px/1.12 'Inter', sans-serif; letter-spacing: .17em; text-overflow: clip; text-transform: uppercase; white-space: nowrap; }
#header .brand-sub { display: block; margin: 0; color: rgba(255,255,255,.92); font: 500 8px/1.2 'Inter', sans-serif; letter-spacing: .31em; text-transform: uppercase; white-space: nowrap; }
#header .head-actions { gap: clamp(13px, 2.5vw, 24px); margin-left: auto; }
#header .header-phone { flex: 0 0 56px; width: 56px; height: 56px; border: 1px solid rgba(224,199,142,.62); border-radius: 50%; color: #e0c78e; background: rgba(255,255,255,.015); }
#header .header-phone svg { width: 25px; height: 25px; }
#header .hamb { flex: 0 0 52px; width: 52px; height: 54px; color: #e0c78e; background: transparent; }
#header .hamb svg { width: 40px; height: 40px; stroke-width: 1.65; }
.nav-overlay-header .brand { gap: 9px; padding: 4px 10px 4px 4px; border: 1px solid rgba(255,255,255,.86); border-radius: 0; background: transparent; }
.nav-overlay-header .brand-glyph { display: grid; place-items: center; width: 34px; height: 34px; color: #222; background: #f5f4ef; }
.nav-overlay-header .mercado-mark { display: block; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.nav-overlay-header .brand-text { display: flex; flex-direction: column; gap: 2px; }
.nav-overlay-header .brand-text strong { color: #fff; font: 600 11px/1.1 'Inter', sans-serif; letter-spacing: .13em; }
.nav-overlay-header .brand-sub { color: rgba(255,255,255,.85); font: 500 6px/1.1 'Inter', sans-serif; letter-spacing: .2em; }
@media (max-width: 520px) {
  #header.header { min-height: calc(76px + env(safe-area-inset-top)); padding: calc(8px + env(safe-area-inset-top)) 12px 8px; }
  #header.header { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
  #header .brand { max-width: calc(100% - 104px); min-height: 58px; gap: 7px; padding: 4px 8px 4px 4px; border-width: 1.5px; }
  #header .brand-glyph { flex-basis: 48px; width: 48px; height: 46px; }
  #header .mercado-mark { width: 37px; height: 34px; }
  #header .brand-text strong { font-size: 12px; letter-spacing: .12em; }
  #header .brand-sub { font-size: 6.5px; letter-spacing: .22em; }
  #header .head-actions { gap: 5px; margin-left: 5px; }
  #header .header-phone, #header .hamb { flex-basis: 44px; width: 44px; min-width: 44px; height: 46px; min-height: 46px; }
  #header .header-phone { height: 44px; border-radius: 50%; }
  #header .header-phone svg { width: 22px; height: 22px; }
  #header .hamb svg { width: 34px; height: 34px; }
}
@media (max-width: 360px) {
  #header .brand { max-width: calc(100% - 98px); gap: 5px; }
  #header .brand-glyph { flex-basis: 42px; width: 42px; }
  #header .mercado-mark { width: 33px; height: 30px; }
  #header .brand-text strong { font-size: 10px; letter-spacing: .09em; }
  #header .brand-sub { font-size: 5.5px; letter-spacing: .17em; }
  #header .head-actions { gap: 3px; }
  #header .header-phone, #header .hamb { flex-basis: 42px; width: 42px; min-width: 42px; }
}

/* Compact mobile-first header controls: theme and language stay visible above the hero. */
#header .header-theme-toggle,
#header .header-lang {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 42px;
  width: 42px; min-width: 42px; height: 42px; min-height: 42px; padding: 0;
  border: 1px solid rgba(224,199,142,.62); border-radius: 50%; color: #e0c78e;
  background: rgba(10,10,10,.22); cursor: pointer; filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
}
#header .header-theme-toggle { font-size: 17px; }
#header .header-lang { gap: 2px; font: 700 10px/1 'Inter', sans-serif; letter-spacing: .02em; }
#header .header-lang .active { color: #fff; }
#header .header-theme-toggle:hover, #header .header-lang:hover { color: #fff; border-color: #e0c78e; }
@media (max-width: 520px) {
  #header .head-actions { gap: 5px; }
  #header .header-theme-toggle, #header .header-lang { flex-basis: 36px; width: 36px; min-width: 36px; height: 36px; min-height: 36px; }
  #header .hamb { flex-basis: 38px; width: 38px; min-width: 38px; height: 42px; }
  #header .hamb svg { width: 30px; height: 30px; }
}
@media (max-width: 380px) {
  #header .brand { max-width: calc(100% - 130px); }
  #header .head-actions { gap: 3px; }
  #header .header-theme-toggle, #header .header-lang { flex-basis: 33px; width: 33px; min-width: 33px; height: 33px; min-height: 33px; }
  #header .hamb { flex-basis: 35px; width: 35px; min-width: 35px; }
}

/* Light floating action pill; dark mode adapts automatically without losing contrast. */
@media (max-width: 768px) {
  .floating-bottom-bar {
    color: #1a1a1a; background: rgba(255,255,255,.96); border-color: rgba(26,26,26,.08);
    box-shadow: 0 8px 28px rgba(26,26,26,.18);
  }
  .mobile-profile-link { color: #4a4234; }
  .mobile-profile-link svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  body.dark .floating-bottom-bar { color: #f5f5f0; background: rgba(25,25,25,.95); border-color: rgba(255,255,255,.14); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
  body.dark .mobile-profile-link { color: var(--nav-gold); }
  .btn-gold-center { color: #fff; background: #9c7b38; }
  .btn-gold-center:hover { background: #84672f; }
}
@media (max-width: 768px) {
  /* Keep the existing FAQ assistant available separately from the requested profile action. */
  .ai-widget { right: 20px; bottom: calc(88px + env(safe-area-inset-bottom)); }
  .ai-widget .ai-launcher { display: grid !important; }
}


/* Final mobile polish based on the supplied reference: compact porcelain-white pill. */
#header .header-lang .lang-sep,
#header .header-lang .lang-es:not(.active),
#header .header-lang .lang-en:not(.active) { display: none; }
#header .header-lang { overflow: hidden; white-space: nowrap; font-size: 10px; line-height: 1; }
@media (max-width: 380px) {
  #header .header-lang { flex-basis: 34px; width: 34px; min-width: 34px; height: 34px; min-height: 34px; font-size: 9px; }
}
@media (max-width: 768px) {
  .floating-bottom-bar {
    width: min(280px, calc(100% - 76px)); height: 50px; gap: 6px; padding: 0 6px;
    color: #3b3b3d; background: rgba(250,250,250,.97); border: 1px solid #e3e3e5;
    box-shadow: 0 5px 18px rgba(0,0,0,.13); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  }
  .mobile-bar-icon, .mobile-ai-trigger { flex-basis: 34px; width: 34px; height: 34px; color: #77787b; background: transparent; }
  .mobile-bar-icon svg { width: 19px; height: 19px; }
  .mobile-ai-trigger { display: grid; flex: 0 0 34px; place-items: center; padding: 0; border: 0; border-radius: 50%; box-shadow: none; cursor: pointer; }
  .mobile-ai-trigger .ai-sparkle-mark { width: 21px; height: 21px; color: #77787b; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-ai-trigger:hover, .mobile-ai-trigger[aria-expanded="true"] { color: #292a2c; background: #ededee; transform: none; }
  .mobile-ai-trigger:hover .ai-sparkle-mark, .mobile-ai-trigger[aria-expanded="true"] .ai-sparkle-mark { color: #292a2c; }
  .btn-gold-center { min-height: 36px; padding: 8px 12px; color: #fff; background: #9c7b38; font-size: 9px; letter-spacing: .055em; }
  .btn-gold-center svg { width: 17px; height: 17px; }
  body.dark .floating-bottom-bar { color: #eee; background: rgba(35,35,37,.96); border-color: rgba(255,255,255,.12); box-shadow: 0 5px 18px rgba(0,0,0,.32); }
  body.dark .mobile-bar-icon, body.dark .mobile-ai-trigger, body.dark .mobile-ai-trigger .ai-sparkle-mark { color: #d0d0d2; }
}
@media (max-width: 360px) {
  .floating-bottom-bar { width: min(270px, calc(100% - 64px)); height: 48px; gap: 4px; padding-inline: 5px; }
  .mobile-bar-icon, .mobile-ai-trigger { flex-basis: 32px; width: 32px; height: 32px; }
  .mobile-ai-trigger { flex-basis: 32px; }
  .btn-gold-center { min-height: 34px; padding-inline: 8px; font-size: 8px; }
}


/* Full-screen clinic menu: editorial black canvas, fine dividers and clear actions. */
.nav-overlay-links { width: 100%; max-width: 920px; margin: auto; }
.nav-overlay-link { min-height: 74px; font-size: clamp(29px, 4.4vw, 38px); border-bottom: 1px solid rgba(255,255,255,.1); }
.nav-accordion { border-bottom: 1px solid rgba(255,255,255,.1); }
.nav-accordion > .nav-overlay-link { border-bottom: 0; }
.nav-overlay-bottom { width: 100%; align-items: stretch; flex-direction: column; gap: 14px; padding: 24px 0 max(10px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.12); }
.nav-booking { width: 100%; min-height: 62px; justify-content: center; border-radius: 999px; color: #111; background: linear-gradient(135deg, #D6B977, #E6CE9D); font-size: 12px; letter-spacing: .2em; }
.nav-call { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 58px; padding: 10px 18px; border: 1px solid rgba(209,184,134,.5); border-radius: 999px; color: #D1B886; font: 700 11px/1.4 'Inter', sans-serif; letter-spacing: .15em; text-align: center; text-transform: uppercase; }
.nav-call:hover { color: #F2E2BD; border-color: #D1B886; background: rgba(209,184,134,.05); }
.nav-call strong { color: #E5E5E5; font-weight: 600; letter-spacing: .08em; }
.nav-clinic-info { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 18px; padding-top: 23px; border-top: 1px solid rgba(255,255,255,.12); }
.nav-clinic-info > div, .nav-clinic-info > a { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; min-width: 0; color: rgba(245,245,240,.76); font: 400 14px/1.55 'Inter', sans-serif; }
.nav-clinic-info > a { position: relative; padding-right: 22px; }
.nav-clinic-info > a:hover { color: #fff; }
.nav-info-label { color: #D1B886; font: 700 10px/1.3 'Inter', sans-serif; letter-spacing: .22em; }
.nav-clinic-info strong { color: #F5F5F0; font-weight: 600; }
.nav-info-arrow { position: absolute; top: 0; right: 0; color: #D1B886; }
@media (max-width: 520px) {
  .nav-overlay { padding: calc(18px + env(safe-area-inset-top)) 22px calc(20px + env(safe-area-inset-bottom)); }
  .nav-overlay-header { min-height: 60px; }
  .nav-overlay-header .brand { padding: 3px; }
  .nav-overlay-header .brand-glyph { width: 42px; height: 42px; }
  .nav-overlay-header .mercado-mark { width: 31px; height: 31px; }
  .nav-overlay-phone { left: auto; right: 58px; transform: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(209,184,134,.38); border-radius: 50%; }
  .nav-overlay-phone svg { width: 20px; height: 20px; }
  .nav-overlay-links { margin: 16px 0 20px; padding: 0; }
  .nav-overlay-link { min-height: 58px; padding: 13px 0; font-size: clamp(26px, 7.4vw, 32px); }
  .nav-overlay-bottom { gap: 11px; padding-top: 18px; }
  .nav-booking { min-height: 54px; font-size: 11px; }
  .nav-call { min-height: 50px; font-size: 10px; letter-spacing: .11em; }
  .nav-clinic-info { gap: 18px; margin-top: 10px; padding-top: 18px; }
  .nav-clinic-info > div, .nav-clinic-info > a { gap: 7px; font-size: 12px; }
  .nav-info-label { font-size: 9px; }
}
@media (max-width: 360px) {
  .nav-overlay { padding-inline: 18px; }
  .nav-clinic-info { gap: 12px; }
  .nav-clinic-info > div, .nav-clinic-info > a { font-size: 11px; }
}

/* Refined compact actions: three evenly weighted controls on a smaller floating rail. */
@media (max-width: 768px) {
  .floating-bottom-bar {
    width: min(258px, calc(100% - 92px)); height: 46px; gap: 5px; padding: 0 5px;
    background: rgba(250,250,251,.98); border-color: #e1e1e3;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
  }
  .mobile-bar-icon, .mobile-ai-trigger { flex-basis: 32px; width: 32px; height: 32px; }
  .mobile-ai-trigger { flex-basis: 32px; }
  .mobile-bar-icon svg { width: 20px; height: 20px; }
  .mobile-ai-trigger .ai-sparkle-mark { width: 21px; height: 21px; }
  .btn-gold-center { min-height: 34px; gap: 8px; padding: 7px 10px; font-size: 8px; }
  .btn-gold-center svg { flex: 0 0 21px; width: 21px; height: 21px; }
  body.dark .floating-bottom-bar { background: rgba(35,35,37,.97); border-color: rgba(255,255,255,.12); }
}
@media (max-width: 360px) {
  .floating-bottom-bar { width: min(248px, calc(100% - 78px)); height: 44px; gap: 4px; }
  .btn-gold-center { min-height: 32px; padding-inline: 8px; font-size: 7.5px; }
  .btn-gold-center svg { flex-basis: 20px; width: 20px; height: 20px; }
}

/* Light Apple-like mobile menu: soft whites, graphite typography, quiet gray dividers. */
.nav-overlay {
  color: #28282a; background: #f7f7f8;
}
.nav-overlay-backdrop { background: transparent; }
.nav-overlay-header { border-bottom-color: #dedee0; }
.nav-overlay-header .brand { border-color: #c9c9cc; background: #fff; }
.nav-overlay-header .brand-glyph { color: #252527; background: #f0f0f1; }
.nav-overlay-header .brand-text strong { color: #242426; }
.nav-overlay-header .brand-sub { color: #77787b; }
.nav-overlay-phone { color: #6f7073; }
.nav-overlay-phone:hover { color: #242426; }
.nav-overlay-phone svg { stroke: currentColor; }
.mobile-nav-close { border-color: #dedee0; color: #55565a; background: #fff; }
.mobile-nav-close:hover { color: #222; border-color: #b8b8bc; background: #f0f0f1; }
.nav-overlay-link { color: #28282a; border-bottom-color: #e1e1e3; }
.nav-overlay-link:hover { color: #77787b; }
.nav-overlay-link > span:last-child, .nav-services-toggle .nav-chevron, .nav-accordion .nav-chevron { color: #77787b; stroke: #77787b; }
.nav-accordion, .nav-accordion .nav-overlay-link { border-bottom-color: #e1e1e3; }
.nav-accordion .nav-service-category p { color: #77787b; }
.nav-accordion .nav-service-category a { color: #4b4c4f; }
.nav-accordion .nav-service-category a:hover { color: #1f2022; }
.nav-overlay-bottom { border-top-color: #dedee0; }
.nav-booking { color: #fff; background: #292a2d; }
.nav-booking:hover { color: #fff; background: #414246; }
.nav-call { color: #55565a; border-color: #d2d2d5; background: #fff; }
.nav-call strong { color: #292a2d; }
.nav-call:hover { color: #292a2d; border-color: #bdbdc1; background: #f1f1f2; }
.nav-clinic-info { border-top-color: #dedee0; }
.nav-clinic-info > div, .nav-clinic-info > a { color: #66676a; }
.nav-clinic-info > a:hover { color: #242426; }
.nav-info-label { color: #77787b; }
.nav-clinic-info strong { color: #292a2d; }
.nav-info-arrow { color: #77787b; }
@media (max-width: 768px) {
  .nav-overlay { color: #28282a; background: #f7f7f8; }
  .nav-overlay-links { background: transparent; }
}

/* More restrained mobile header with pill-shaped language and theme controls. */
@media (max-width: 520px) {
  #header.header {
    min-height: calc(64px + env(safe-area-inset-top));
    padding: calc(5px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-left)) 5px max(16px, env(safe-area-inset-right));
  }
  #header .brand { min-height: 46px; max-width: calc(100% - 136px); gap: 5px; padding: 3px 6px 3px 3px; }
  #header .brand-glyph { flex-basis: 38px; width: 38px; height: 38px; margin-right: 6px; }
  #header .mercado-mark { width: 30px; height: 28px; }
  #header .brand-text strong { font-size: 10px; letter-spacing: .09em; }
  #header .brand-sub { font-size: 5.5px; letter-spacing: .14em; }
  #header .head-actions { gap: 4px; margin-left: 3px; }
  #header .header-theme-toggle,
  #header .header-lang {
    flex: 0 0 auto; width: auto; min-width: 36px; height: 32px; min-height: 32px;
    padding: 0 10px; border-radius: 999px; border-color: rgba(224,199,142,.62);
    background: rgba(10,10,10,.28); font-size: 10px;
  }
  #header .header-theme-toggle { min-width: 34px; padding-inline: 10px; font-size: 14px; }
  #header .hamb { flex: 0 0 34px; width: 34px; min-width: 34px; height: 36px; min-height: 36px; }
  #header .hamb svg { width: 27px; height: 27px; }
}
@media (max-width: 380px) {
  #header .brand { max-width: calc(100% - 127px); }
  #header .header-theme-toggle, #header .header-lang { min-width: 32px; height: 30px; min-height: 30px; padding-inline: 8px; font-size: 9px; }
  #header .header-theme-toggle { min-width: 31px; font-size: 13px; }
  #header .hamb { flex-basis: 32px; width: 32px; min-width: 32px; }
}

/* Homepage hero inspired by the reference site's editorial layout, using local brand assets. */
.hero {
  min-height: min(900px, 100svh); height: 100svh; max-height: 1000px;
  align-items: center; justify-content: center; padding: 116px 24px 92px;
  color: #171715; background: #f4f1eb;
}
.hero-bg {
  inset: 0; background-position: center 48%; transform: none; filter: none;
}
.hero-video { display: none !important; }
.hero-overlay {
  background: linear-gradient(180deg, rgba(248,246,241,.68) 0%, rgba(248,246,241,.58) 48%, rgba(248,246,241,.74) 100%);
}
.hero-grid { display: block; width: min(100%, 1120px); margin: 0 auto; text-align: center; }
.hero-content { width: 100%; max-width: 1000px; margin: 0 auto; }
.hero .eyebrow { justify-content: center; gap: 9px; color: #8e7039; font: 700 10px/1.5 'Inter', sans-serif; letter-spacing: .22em; }
.hero .eyebrow-dot { width: 5px; height: 5px; box-shadow: none; }
.hero-title {
  max-width: 100%; margin: 22px auto 0; color: #1b1a18;
  font: 500 clamp(46px, 7.6vw, 88px)/.98 'Playfair Display', Georgia, serif;
  letter-spacing: -.045em; text-wrap: balance;
}
.hero-title > em { font-style: italic; font-weight: 500; }
.hero-title-accent { color: #8e7039; }
.hero-doctor { margin: 24px auto 0; color: #42413e; font: 400 clamp(16px, 2vw, 21px)/1.4 'Inter', sans-serif; letter-spacing: .01em; }
.hero-copy, .hero-trust-chips, .hero-visual, .scroll-cue { display: none !important; }
.hero-actions { justify-content: center; gap: 14px; margin: 31px auto 0; }
.hero-actions .pill { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 54px; padding: 0 27px; border-radius: 999px; font: 700 10px/1.2 'Inter', sans-serif; letter-spacing: .14em; text-align: center; text-transform: uppercase; }
.hero-actions .pill-glow { color: #fff; border: 1px solid #9c7b38; background: #9c7b38; box-shadow: 0 8px 22px rgba(74,59,29,.18); }
.hero-actions .pill-glow:hover { color: #fff; background: #86682f; transform: translateY(-1px); }
.hero-actions .pill-outline { color: #80632f; border: 1px solid rgba(140,110,57,.75); background: rgba(255,255,255,.32); }
.hero-actions .pill-outline:hover { color: #5e4926; background: rgba(255,255,255,.7); }
.hero-indicators { display: flex; justify-content: center; gap: 14px; margin: 34px auto 0; }
.hero-indicators span { display: block; width: 54px; height: 2px; background: rgba(52,49,42,.24); }
.hero-indicators span.active { background: #9c7b38; }
#header:not(.scrolled) .brand-text strong { color: #252420; }
#header:not(.scrolled) .brand-sub { color: #705a32; }
#header:not(.scrolled) .header-theme-toggle, #header:not(.scrolled) .header-lang { color: #35332e; border-color: rgba(60,57,50,.3); background: rgba(255,255,255,.56); filter: none; }
#header:not(.scrolled) .header-theme-toggle:hover, #header:not(.scrolled) .header-lang:hover { color: #171715; background: rgba(255,255,255,.82); }
#header:not(.scrolled) .hamb { color: #6d582f; filter: none; }
body.dark .hero { color: #f2f0ec; background: #161614; }
body.dark .hero-overlay { background: linear-gradient(180deg, rgba(18,18,17,.6), rgba(18,18,17,.72)); }
body.dark .hero-title, body.dark .hero-doctor { color: #f4f2ee; }
body.dark .hero-copy { color: #d4d0c8; }
body.dark .hero-actions .pill-outline { color: #e3d1a6; border-color: rgba(209,184,134,.7); background: rgba(20,20,18,.42); }
body.dark #header:not(.scrolled) .brand-text strong { color: #f7f5ef; }
body.dark #header:not(.scrolled) .brand-sub { color: #d1b886; }
body.dark #header:not(.scrolled) .header-theme-toggle, body.dark #header:not(.scrolled) .header-lang { color: #f2dfb7; border-color: rgba(209,184,134,.5); background: rgba(18,18,17,.45); }
body.dark #header:not(.scrolled) .hamb { color: #d1b886; }
@media (max-width: 680px) {
  .hero { min-height: 100svh; height: auto; max-height: none; padding: calc(92px + env(safe-area-inset-top)) 20px calc(104px + env(safe-area-inset-bottom)); }
  .hero-bg { background-position: 54% center; }
  .hero-overlay { background: linear-gradient(180deg, rgba(248,246,241,.66), rgba(248,246,241,.56) 46%, rgba(248,246,241,.76)); }
  .hero .eyebrow { max-width: 330px; margin: 0 auto; font-size: 9px; letter-spacing: .17em; }
  .hero-title { margin-top: 19px; font-size: clamp(39px, 10vw, 58px); line-height: 1; letter-spacing: -.05em; }
  .hero-doctor { margin-top: 19px; font-size: 16px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; width: min(100%, 430px); margin-top: 27px; }
  .hero-actions .pill { width: 100%; min-height: 52px; padding: 0 18px; font-size: 9px; letter-spacing: .12em; }
  .hero-indicators { gap: 10px; margin-top: 25px; }
  .hero-indicators span { width: 42px; }
  body.dark .hero-overlay { background: linear-gradient(180deg, rgba(18,18,17,.62), rgba(18,18,17,.55) 45%, rgba(18,18,17,.78)); }
}
@media (max-width: 360px) {
  .hero-title { font-size: clamp(36px, 9.6vw, 42px); }
  .hero .eyebrow { font-size: 8px; letter-spacing: .15em; }
  .hero-actions .pill { min-height: 48px; font-size: 8px; }
}


/* Keep the assistant entry only in the bottom action rail, never as a second floating button. */
@media (max-width: 768px) {
  .ai-widget .ai-launcher { display: none !important; }
  .ai-widget { right: 16px; bottom: calc(78px + env(safe-area-inset-bottom)); }
  .ai-widget .ai-panel { bottom: 0; }
}

/* Narrow centered capsule header and calmer, less oversized hero typography. */
@media (max-width: 680px) {
  #header.header {
    top: calc(7px + env(safe-area-inset-top)); left: 50%; right: auto;
    width: min(430px, calc(100% - 30px)); min-height: 54px;
    padding: 5px 8px; border: 1px solid rgba(70,68,62,.14);
    border-radius: 999px; background: rgba(250,250,249,.84);
    box-shadow: 0 5px 18px rgba(0,0,0,.08);
    backdrop-filter: blur(18px) saturate(135%); -webkit-backdrop-filter: blur(18px) saturate(135%);
    transform: translateX(-50%);
  }
  #header.header.scrolled { background: rgba(24,24,23,.92); border-color: rgba(255,255,255,.12); }
  #header .brand { flex: 0 1 auto; max-width: calc(100% - 130px); min-height: 40px; border: 0; background: transparent; }
  #header .brand-glyph { flex-basis: 34px; width: 34px; height: 34px; }
  #header .mercado-mark { width: 27px; height: 25px; }
  #header .brand-text strong { font-size: 9px; letter-spacing: .085em; }
  #header .brand-sub { font-size: 5px; letter-spacing: .13em; }
  #header .head-actions { flex: 0 0 auto; gap: 4px; margin-left: auto; }
  #header .header-theme-toggle, #header .header-lang { height: 29px; min-height: 29px; min-width: 31px; padding-inline: 7px; font-size: 9px; }
  #header .header-theme-toggle { min-width: 30px; font-size: 12px; }
  #header .hamb { flex-basis: 30px; width: 30px; min-width: 30px; height: 32px; min-height: 32px; }
  #header .hamb svg { width: 24px; height: 24px; }
  #header:not(.scrolled) .brand-text strong { color: #252420; }
  #header:not(.scrolled) .brand-sub { color: #705a32; }
  #header:not(.scrolled) .header-theme-toggle, #header:not(.scrolled) .header-lang { background: rgba(255,255,255,.45); }
  .hero { padding-top: calc(91px + env(safe-area-inset-top)); }
  .hero-title { font-size: clamp(37px, 9.2vw, 52px); line-height: 1.06; letter-spacing: -.045em; }
  .hero-doctor { margin-top: 16px; }
  .hero-actions { margin-top: 23px; }
  .hero-indicators { display: none !important; }
}
@media (max-width: 360px) {
  #header.header { width: calc(100% - 24px); }
  #header .brand { max-width: calc(100% - 118px); }
  #header .header-theme-toggle, #header .header-lang { min-width: 29px; padding-inline: 6px; }
  #header .hamb { flex-basis: 28px; width: 28px; min-width: 28px; }
  .hero-title { font-size: 36px; }
}


/* Reference-style transparent header: no full-width or capsule panel over the hero. */
@media (max-width: 680px) {
  #header.header {
    top: calc(4px + env(safe-area-inset-top)); left: 50%; right: auto;
    width: calc(100% - 28px); max-width: 980px; min-height: calc(60px + env(safe-area-inset-top));
    padding: calc(5px + env(safe-area-inset-top)) 0 5px;
    border: 0; border-radius: 0; background: transparent; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none; transform: translateX(-50%);
  }
  #header.header.scrolled { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  #header .brand { flex: 0 1 auto; max-width: calc(100% - 128px); min-height: 42px; padding: 3px 8px 3px 3px; border: 1px solid rgba(22,22,21,.85); border-radius: 0; background: rgba(18,18,17,.94); }
  #header .brand-glyph { flex-basis: 36px; width: 36px; height: 36px; margin-right: 6px; color: #171715; background: #f4f1eb; }
  #header .mercado-mark { width: 29px; height: 27px; }
  #header .brand-text strong { color: #fff; font-size: 9px; letter-spacing: .09em; }
  #header .brand-sub { color: #d1b886; font-size: 5.5px; letter-spacing: .14em; }
  #header .head-actions { flex: 0 0 auto; gap: 5px; margin-left: auto; }
  #header .header-theme-toggle, #header .header-lang {
    min-width: 36px; height: 31px; min-height: 31px; padding: 0 8px;
    border: 1px solid rgba(145,118,65,.52); border-radius: 999px;
    color: #5a4728; background: rgba(250,249,246,.88); filter: none;
  }
  #header .header-theme-toggle { min-width: 34px; font-size: 13px; }
  #header .hamb { flex-basis: 34px; width: 34px; min-width: 34px; height: 38px; min-height: 38px; padding: 0; border: 0; color: #9c7b38; background: transparent; filter: none; }
  #header .hamb svg { width: 30px; height: 30px; }
  #header:not(.scrolled) .brand-text strong, #header .brand-text strong { color: #fff; }
  #header:not(.scrolled) .brand-sub, #header .brand-sub { color: #d1b886; }
  .hero-bg { background-position: 52% center; }
}
@media (max-width: 380px) {
  #header.header { width: calc(100% - 24px); }
  #header .brand { max-width: calc(100% - 120px); }
  #header .header-theme-toggle, #header .header-lang { min-width: 33px; padding-inline: 7px; }
  #header .header-theme-toggle { min-width: 32px; }
}


/* Final mobile identity: transparent header; the logo and controls stay individually legible. */
@media (max-width: 680px) {
  #header.header, #header.header.scrolled {
    top: calc(4px + env(safe-area-inset-top)); left: 50%; right: auto;
    width: calc(100% - 28px); max-width: 980px; min-height: calc(60px + env(safe-area-inset-top));
    padding: calc(5px + env(safe-area-inset-top)) 0 5px;
    border: 0 !important; border-radius: 0 !important; background: transparent !important;
    box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    transform: translateX(-50%);
  }
  #header .brand {
    flex: 0 1 auto; max-width: calc(100% - 128px); min-height: 42px; gap: 7px;
    padding: 3px 8px 3px 3px; border: 1px solid #252525; border-radius: 0;
    background: rgba(255,255,255,.96); box-shadow: 0 2px 10px rgba(0,0,0,.07);
  }
  #header .brand-glyph { flex: 0 0 36px; width: 36px; height: 36px; margin-right: 0; color: #fff; background: #111; }
  #header .mercado-mark { width: 29px; height: 27px; }
  #header .brand-text strong { color: #171717 !important; font-size: 9px; letter-spacing: .09em; }
  #header .brand-sub { color: #595959 !important; font-size: 5.5px; letter-spacing: .14em; }
  #header .head-actions { flex: 0 0 auto; gap: 5px; margin-left: auto; }
  #header .header-theme-toggle, #header .header-lang {
    min-width: 36px; height: 32px; min-height: 32px; padding: 0 8px;
    border: 1px solid rgba(145,118,65,.58); border-radius: 999px;
    color: #4b3b20; background: rgba(255,255,255,.92); box-shadow: 0 2px 8px rgba(0,0,0,.07);
  }
  #header .header-theme-toggle { min-width: 34px; font-size: 13px; }
  #header .hamb { flex: 0 0 36px; width: 36px; min-width: 36px; height: 38px; min-height: 38px; padding: 0; border: 0; border-radius: 0; color: #8a6b34; background: transparent; filter: none; }
  #header .hamb svg { width: 30px; height: 30px; }
  body.dark #header .header-theme-toggle, body.dark #header .header-lang { color: #f4dfb6; border-color: rgba(209,184,134,.58); background: rgba(31,31,30,.92); }
  body.dark #header .hamb { color: #d1b886; }
}

/* The menu follows the selected page theme instead of remaining light in dark mode. */
body.dark .nav-overlay { color: #f1f1f2; background: #171819; }
body.dark .nav-overlay-header { border-bottom-color: #343537; }
body.dark .nav-overlay-link { color: #f1f1f2; border-bottom-color: #343537; }
body.dark .nav-overlay-link:hover { color: #d1b886; }
body.dark .nav-overlay-link > span:last-child, body.dark .nav-services-toggle .nav-chevron, body.dark .nav-accordion .nav-chevron { color: #d1b886; stroke: #d1b886; }
body.dark .nav-accordion, body.dark .nav-accordion .nav-overlay-link { border-bottom-color: #343537; }
body.dark .nav-accordion .nav-service-category p { color: #d1b886; }
body.dark .nav-accordion .nav-service-category a { color: #d5d5d6; }
body.dark .nav-overlay-bottom { border-top-color: #343537; }
body.dark .nav-booking { color: #29251e; background: #d1b886; }
body.dark .nav-booking:hover { color: #181818; background: #e0c997; }
body.dark .nav-call { color: #ddd; border-color: #454649; background: #222325; }
body.dark .nav-call strong, body.dark .nav-clinic-info strong { color: #f1f1f2; }
body.dark .nav-call:hover { color: #fff; border-color: #777; background: #2c2d2f; }
body.dark .nav-clinic-info { border-top-color: #343537; }
body.dark .nav-clinic-info > div, body.dark .nav-clinic-info > a { color: #c1c2c4; }
body.dark .nav-info-label, body.dark .nav-info-arrow { color: #d1b886; }
body.dark .nav-overlay .lang-switch, body.dark .nav-overlay .theme-toggle-menu { color: #e0e0e2; border-color: #454649; }
body.dark .nav-overlay .lang-switch .active, body.dark .nav-overlay .theme-toggle-menu i { color: #d1b886; }

/* Lower actions, cookie notice, and accessibility controls stay neutral in both themes. */
.nav-booking { color: #333438; background: #e5e5e7; }
.nav-booking:hover { color: #202124; background: #d9d9dc; }
.cookie-accept { color: #fff; background: #8e7039; border-color: #8e7039; }
.cookie-accept:hover { color: #fff; background: #725a2e; border-color: #725a2e; }
.cookie-reject { color: #424348; background: #f1f1f2; border-color: #d8d8db; }
.cookie-reject:hover { color: #202124; background: #e8e8ea; border-color: #bfc0c3; }
body.dark .cookie-banner { color: #f1f1f2; background: rgba(30,31,32,.96); border-color: rgba(255,255,255,.12); }
body.dark .cookie-banner p { color: #c7c7c9; }
body.dark .cookie-accept { color: #29251e; background: #d1b886; border-color: #d1b886; }
body.dark .cookie-accept:hover { background: #e0c997; border-color: #e0c997; }
body.dark .cookie-reject { color: #e1e1e2; background: #292a2c; border-color: #4a4b4d; }
body.dark .cookie-reject:hover { color: #fff; background: #353638; border-color: #65666a; }
.mobile-ai-trigger .ai-sparkle-mark { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
body.dark .mobile-ai-trigger { color: #d1b886; }
body.dark .mobile-ai-trigger:hover, body.dark .mobile-ai-trigger[aria-expanded="true"] { color: #f2dfb7; background: rgba(209,184,134,.12); }
.mobile-accessibility-panel { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.mobile-a11y-option { color: var(--ink); background: var(--surface-2); border-color: var(--line); }
body.dark .mobile-accessibility-panel { background: #202123; color: #f0f0f1; border-color: #3b3c3e; }
body.dark .mobile-a11y-option { color: #f0f0f1; background: #2b2c2e; border-color: #444548; }


/* High-contrast mark on a white outlined wordmark, without a dark header slab. */
@media (max-width: 680px) {
  #header.header, #header.header.scrolled { background: transparent !important; background-color: transparent !important; }
  #header .brand { background: rgba(255,255,255,.97) !important; }
  #header .brand-glyph { display: grid; place-items: center; overflow: hidden; background: #090909 !important; color: #fff !important; border: 1px solid #090909; }
  #header .brand-glyph .mercado-mark { display: block; color: #fff !important; stroke: #fff !important; }
  #header .brand-text strong, #header .brand-sub { color: #171717 !important; }
  body.dark #header .brand { background: rgba(255,255,255,.97) !important; }
  body.dark #header .brand-text strong, body.dark #header .brand-sub { color: #171717 !important; }
}
@media (max-width: 768px) {
  .cookie-banner { left: 12px; right: 12px; width: auto; max-width: 440px; margin-inline: auto; bottom: calc(82px + env(safe-area-inset-bottom)) !important; z-index: 1050; }
}
body.dark .nav-overlay { background: #171819 !important; color: #f1f1f2 !important; }
body.dark .nav-overlay .brand { background: #fff; }
body.dark .nav-overlay .brand-text strong, body.dark .nav-overlay .brand-sub { color: #171717; }

/* No card around the brand lockup: only the symbol itself is a black square. */
@media (max-width: 680px) {
  #header .brand {
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    padding: 0 !important; filter: none !important;
  }
  #header .brand-glyph {
    flex: 0 0 38px; width: 38px; height: 38px; margin: 0;
    background: #080808 !important; color: #fff !important; border: 0;
  }
  #header .brand-text strong { color: #191919 !important; text-shadow: 0 1px 5px rgba(255,255,255,.65); }
  #header .brand-sub { color: #52462f !important; text-shadow: 0 1px 5px rgba(255,255,255,.72); }
  body.dark #header .brand-text strong { color: #fff !important; text-shadow: 0 1px 5px rgba(0,0,0,.55); }
  body.dark #header .brand-sub { color: #e0c997 !important; text-shadow: 0 1px 5px rgba(0,0,0,.55); }
}
.nav-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; }
body.dark .nav-overlay.active { background-color: #171819 !important; }
@media (max-width: 680px) {
  body.dark #header .brand { background: transparent !important; border: 0 !important; box-shadow: none !important; }
  body.dark #header .brand-text strong { color: #fff !important; }
  body.dark #header .brand-sub { color: #e0c997 !important; }
}

/* Explicit menu-link contrast (ID-level specificity for the fixed mobile navigation). */
.nav-overlay-header .brand { background: transparent !important; border: 0 !important; box-shadow: none !important; filter: none !important; }
.nav-overlay-header .brand-glyph { background: #080808 !important; color: #fff !important; }
.nav-overlay-header .brand-text strong { color: #202124 !important; }
.nav-overlay-header .brand-sub { color: #666 !important; }
#mobileNav .nav-overlay-link { color: #28282a; }
body.dark #mobileNav .nav-overlay-link { color: #f1f1f2 !important; border-bottom-color: #343537; }
body.dark #mobileNav .nav-overlay-link:hover { color: #d1b886 !important; }
body.dark #mobileNav .nav-overlay-header .brand-text strong { color: #f1f1f2 !important; }
body.dark #mobileNav .nav-overlay-header .brand-sub { color: #d1b886 !important; }
body.dark #mobileNav .nav-overlay-header .brand { background: transparent !important; }
body.dark #mobileNav .nav-overlay-link > span:first-child { color: #f1f1f2 !important; }
body.dark #mobileNav .nav-accordion .nav-overlay-link > span:first-child { color: #f1f1f2 !important; }
body.dark .hero-actions .pill-outline { color: #f4e5c0 !important; background: rgba(18,18,17,.78) !important; border-color: rgba(209,184,134,.82) !important; }
body.dark .hero-actions .hero-gallery { color: #f4e5c0 !important; background: #171819 !important; border-color: #d1b886 !important; }
body.dark .hero-actions .hero-gallery span { color: #f4e5c0 !important; }

/* Dark mode: replace champagne/yellow accents with neutral white throughout. */
body.dark {
  --accent-2: #fff;
  --nav-gold: #fff;
  --star: #fff;
}
body.dark #header .brand-sub,
body.dark #header .header-theme-toggle,
body.dark #header .header-lang,
body.dark #header .hamb,
body.dark #header .header-phone { color: #fff !important; }
body.dark #header .header-theme-toggle,
body.dark #header .header-lang { border-color: rgba(255,255,255,.62) !important; }
body.dark .hero-title-accent,
body.dark .hero .eyebrow,
body.dark .hero .eyebrow-dot,
body.dark .hero .scroll-cue,
body.dark .hero-actions .pill-glow i { color: #fff !important; }
body.dark .hero-actions .pill-glow { color: #171819 !important; background: #fff !important; border-color: #fff !important; }
body.dark .hero-actions .pill-glow span { color: #171819 !important; }
body.dark .hero-actions .hero-gallery,
body.dark .hero-actions .hero-gallery span { color: #fff !important; border-color: #fff !important; }
body.dark .hero-actions .hero-gallery { background: rgba(18,18,18,.82) !important; }
body.dark .nav-overlay-header .brand-sub,
body.dark #mobileNav .nav-overlay-header .brand-sub,
body.dark #mobileNav .nav-overlay-link:hover,
body.dark #mobileNav .nav-overlay-link > span:last-child,
body.dark #mobileNav .nav-services-toggle .nav-chevron,
body.dark #mobileNav .nav-accordion .nav-chevron,
body.dark .nav-overlay-phone,
body.dark .nav-overlay-phone:hover,
body.dark .nav-info-label,
body.dark .nav-info-arrow,
body.dark .nav-overlay .lang-switch .active,
body.dark .nav-overlay .theme-toggle-menu i { color: #fff !important; stroke: #fff !important; }
body.dark .nav-booking,
body.dark .cookie-accept,
body.dark .btn-gold-center { color: #171819 !important; background: #fff !important; border-color: #fff !important; }
body.dark .nav-booking:hover,
body.dark .cookie-accept:hover,
body.dark .btn-gold-center:hover { color: #171819 !important; background: #f0f0f0 !important; border-color: #f0f0f0 !important; }
body.dark .nav-call,
body.dark .nav-call strong,
body.dark .nav-call svg,
body.dark .mobile-ai-trigger,
body.dark .mobile-ai-trigger .ai-sparkle-mark,
body.dark .nav-overlay .lang-switch,
body.dark .nav-overlay .theme-toggle-menu { color: #fff !important; border-color: rgba(255,255,255,.6) !important; }
body.dark .nav-call { background: #222325 !important; }
body.dark .nav-call:hover,
body.dark .mobile-ai-trigger:hover,
body.dark .mobile-ai-trigger[aria-expanded="true"] { color: #fff !important; background: rgba(255,255,255,.12) !important; }
body.dark .fa-star,
body.dark .rating-star,
body.dark .star-rating,
body.dark [class*="star"] { --star: #fff; }
/* Ajuste solicitado: reemplazar únicamente textos de acento amarillo/dorado. */
:root:not(.dark) .loadnum,
:root:not(.dark) .gold-text,
:root:not(.dark) .text-gold,
:root:not(.dark) .eyebrow,
:root:not(.dark) .section-eyebrow,
:root:not(.dark) .hero-title-accent,
:root:not(.dark) .hero .eyebrow,
:root:not(.dark) #header .brand-sub,
:root:not(.dark) #header .header-lang .active,
:root:not(.dark) .nav-overlay-link:hover,
:root:not(.dark) .nav-accordion .nav-service-category p,
:root:not(.dark) .nav-call,
:root:not(.dark) .nav-info-label,
:root:not(.dark) .nav-info-arrow { color: #000 !important; }
body.dark .loadnum,
body.dark .gold-text,
body.dark .text-gold,
body.dark .eyebrow,
body.dark .section-eyebrow,
body.dark .hero-title-accent,
body.dark .hero .eyebrow,
body.dark #header .brand-sub,
body.dark #header .header-lang .active,
body.dark .nav-overlay-link:hover,
body.dark .nav-accordion .nav-service-category p,
body.dark .nav-call,
body.dark .nav-info-label,
body.dark .nav-info-arrow { color: #fff !important; }
/* Neutralizar los últimos textos de acento dorado, sin recolorear iconos ni fondos. */
body:not(.dark) .eyebrow,
body:not(.dark) .hero-title-accent,
body:not(.dark) .metric span,
body:not(.dark) .page-intro .kicker,
body:not(.dark) .section-kicker,
body:not(.dark) .loadnum,
body:not(.dark) .cta-band .kicker,
body:not(.dark) .cta-band h2,
body:not(.dark) .cta-band h2 em,
body:not(.dark) .cta-band .cta-band-sub,
body:not(.dark) #header .brand-sub,
body:not(.dark) #header .header-lang .active,
body:not(.dark) .nav-info-label,
body:not(.dark) .nav-accordion .nav-service-category p,
body:not(.dark) .nav-call { color: #111 !important; }
body.dark .eyebrow,
body.dark .hero-title-accent,
body.dark .metric span,
body.dark .page-intro .kicker,
body.dark .section-kicker,
body.dark .loadnum,
body.dark .cta-band .kicker,
body.dark .cta-band h2,
body.dark .cta-band h2 em,
body.dark .cta-band .cta-band-sub,
body.dark #header .brand-sub,
body.dark #header .header-lang .active,
body.dark .nav-info-label,
body.dark .nav-accordion .nav-service-category p,
body.dark .nav-call { color: #fff !important; }
/* Menú superpuesto y avisos oscuros conservan texto claro por contraste. */
.nav-overlay .nav-info-label,
.nav-overlay .nav-accordion .nav-service-category p,
.demo-disclosure strong { color: #fff !important; }
/* Texto interactivo del encabezado y menú: neutral, respetando el contraste del overlay oscuro. */
body:not(.dark) #header .header-lang,
body:not(.dark) .hero-actions .pill-outline { color: #111 !important; }
body.dark #header .header-lang,
body.dark .hero-actions .pill-outline { color: #fff !important; }
.nav-overlay-link:hover,
.nav-accordion .nav-service-category a:hover,
.nav-overlay .lang-switch .active,
.nav-overlay .theme-toggle-menu:hover { color: #fff !important; }
/* Home and public-page text accents: black in light mode, white in dark mode. */
body:not(.dark) .kicker,
body:not(.dark) .service-card-tag,
body:not(.dark) .menu-summary-link,
body:not(.dark) .google-badge-cta,
body:not(.dark) .faq-icon,
body:not(.dark) .hero-title-accent,
body:not(.dark) main h2 em,
body:not(.dark) .footer h4,
body:not(.dark) .footer-col-title { color: #111 !important; }
body.dark .kicker,
body.dark .service-card-tag,
body.dark .menu-summary-link,
body.dark .google-badge-cta,
body.dark .faq-icon,
body.dark .hero-title-accent,
body.dark main h2 em,
body.dark .footer h4,
body.dark .footer-col-title { color: #fff !important; }
/* Remaining public link text and footer labels use the same neutral theme colors. */
body:not(.dark) .contact-link,
body:not(.dark) .footer-col strong,
body:not(.dark) .nav-overlay .nav-link-arrow,
body:not(.dark) .nav-overlay-link > span:last-child { color: #111 !important; }
body.dark .contact-link,
body.dark .footer-col strong,
body.dark .nav-overlay .nav-link-arrow,
body.dark .nav-overlay-link > span:last-child { color: #fff !important; }
/* Confirmation and appointment-pass labels also follow the neutral text palette. */
body:not(.dark) #bookingModal .success-icon,
body:not(.dark) #exitModal .exit-badge span,
body:not(.dark) .booking-pass-mark,
body:not(.dark) #bookingPassBrandLabel { color: #111 !important; }
body.dark #bookingModal .success-icon,
body.dark #exitModal .exit-badge span,
body.dark .booking-pass-mark,
body.dark #bookingPassBrandLabel { color: #fff !important; }
/* Screen-wide final neutralization: active breadcrumbs and AI assistant accents. */
body:not(.dark) .page-breadcrumb a:hover,
body:not(.dark) .page-breadcrumb [aria-current="page"] { color: #111 !important; }
body.dark .page-breadcrumb a:hover,
body.dark .page-breadcrumb [aria-current="page"] { color: #fff !important; }
body:not(.dark) .ai-launcher { color: #fff !important; background: linear-gradient(145deg, #111 0%, #292929 100%) !important; border-color: rgba(17,17,17,.55) !important; box-shadow: 0 12px 34px rgba(0,0,0,.20) !important; }
body.dark .ai-launcher { color: #111 !important; background: linear-gradient(145deg, #f5f5f5 0%, #d3d3d3 100%) !important; border-color: rgba(255,255,255,.72) !important; box-shadow: 0 12px 34px rgba(0,0,0,.36) !important; }
body:not(.dark) .ai-head { background: var(--surface) !important; }
body.dark .ai-head { background: var(--surface) !important; }
body:not(.dark) .ai-avatar { color: #fff !important; background: linear-gradient(145deg, #111 0%, #292929 100%) !important; box-shadow: 0 5px 14px rgba(0,0,0,.16) !important; }
body.dark .ai-avatar { color: #111 !important; background: linear-gradient(145deg, #f5f5f5 0%, #d3d3d3 100%) !important; box-shadow: 0 5px 14px rgba(0,0,0,.28) !important; }
body:not(.dark) .ai-msg.user, body:not(.dark) .ai-send { color: #fff !important; background: #111 !important; }
body.dark .ai-msg.user, body.dark .ai-send { color: #111 !important; background: #fff !important; }
body:not(.dark) .ai-suggestions button:hover { color: #111 !important; border-color: #111 !important; background: #f0f0f0 !important; }
body.dark .ai-suggestions button:hover { color: #fff !important; border-color: #fff !important; background: #303234 !important; }
body:not(.dark) .ai-input:focus { border-color: #111 !important; }
body.dark .ai-input:focus { border-color: #fff !important; }
body:not(.dark) .ai-typing i { background: #111 !important; }
body.dark .ai-typing i { background: #fff !important; }
/* Remaining gold glyphs/numbers: neutral color only, with readable contrast in dark mode. */
body:not(.dark) .loadmark-icon,
body:not(.dark) .metric strong,
body:not(.dark) .doctor-badge-stars,
body:not(.dark) .calc-result-num,
body:not(.dark) .brand-glyph,
body:not(.dark) .a11y-option-icon { color: #111 !important; }
body.dark .loadmark-icon,
body.dark .metric strong,
body.dark .doctor-badge-stars,
body.dark .calc-result-num,
body.dark .brand-glyph,
body.dark .a11y-option-icon { color: #fff !important; }

/* Neutral text palette and clearer mobile appointment wizard. */
body:not(.dark) .hero .eyebrow,
body:not(.dark) .hero .eyebrow-dot,
body:not(.dark) .hero-title-accent,
body:not(.dark) .gold-text,
body:not(.dark) .text-gold,
body:not(.dark) .section-eyebrow,
body:not(.dark) .section-kicker,
body:not(.dark) .page-intro .kicker,
body:not(.dark) .service-card-tag,
body:not(.dark) .nav-info-label,
body:not(.dark) .nav-info-arrow,
body:not(.dark) .nav-accordion .nav-service-category p,
body:not(.dark) #header .brand-sub,
body:not(.dark) #header .header-lang .active { color: #111 !important; }
body.dark .hero .eyebrow,
body.dark .hero .eyebrow-dot,
body.dark .hero-title-accent,
body.dark .gold-text,
body.dark .text-gold,
body.dark .section-eyebrow,
body.dark .section-kicker,
body.dark .page-intro .kicker,
body.dark .service-card-tag,
body.dark .nav-info-label,
body.dark .nav-info-arrow,
body.dark .nav-accordion .nav-service-category p,
body.dark #header .brand-sub,
body.dark #header .header-lang .active { color: #fff !important; }

/* Neutral, high-contrast appointment CTAs; retain the rounded pill silhouette. */
body:not(.dark) .hero-actions .pill-glow,
body:not(.dark) .btn-gold-center,
body:not(.dark) #bookingModal .wizard-btn.pill-glow,
body:not(.dark) #exitModal .exit-cta {
  color: #fff !important;
  background: #171819 !important;
  border: 1px solid #171819 !important;
  border-radius: 9999px !important;
}
body:not(.dark) .hero-actions .pill-glow span,
body:not(.dark) .hero-actions .pill-glow i { color: #fff !important; }
body:not(.dark) .hero-actions .pill-glow:hover,
body:not(.dark) .btn-gold-center:hover,
body:not(.dark) #bookingModal .wizard-btn.pill-glow:hover,
body:not(.dark) #exitModal .exit-cta:hover {
  color: #111 !important;
  background: #fff !important;
  border-color: #171819 !important;
}
body.dark .hero-actions .pill-glow,
body.dark .btn-gold-center,
body.dark #bookingModal .wizard-btn.pill-glow,
body.dark #exitModal .exit-cta {
  color: #111 !important;
  background: #fff !important;
  border: 1px solid #fff !important;
  border-radius: 9999px !important;
}
body.dark .hero-actions .pill-glow span,
body.dark .hero-actions .pill-glow i { color: #111 !important; }
body.dark .hero-actions .pill-glow:hover,
body.dark .btn-gold-center:hover,
body.dark #bookingModal .wizard-btn.pill-glow:hover,
body.dark #exitModal .exit-cta:hover {
  color: #fff !important;
  background: #171819 !important;
  border-color: #fff !important;
}

@media (max-width: 680px) {
  #bookingModal .modal-card { padding-top: 28px; }
  #bookingModal .modal-close { top: 9px; right: 9px; width: 38px; height: 38px; min-width: 38px; min-height: 38px; }
  #bookingModal .wizard-steps {
    justify-content: flex-start;
    gap: clamp(3px, 1.2vw, 7px);
    padding-right: 46px;
    margin-bottom: 16px;
  }
  #bookingModal .wizard-step { gap: 4px; font-size: clamp(8px, 2.25vw, 10px); letter-spacing: .055em; white-space: nowrap; }
  #bookingModal .wizard-line { flex: 0 1 20px; width: clamp(10px, 4vw, 20px); min-width: 8px; }
  #bookingModal .wizard-num { flex: 0 0 26px; width: 26px; height: 26px; }
  #bookingModal .wizard-nav .wizard-btn { min-height: 48px; padding: 11px 20px; border-radius: 9999px !important; }
}

/* Apple-inspired white/silver replacement for remaining champagne accents. */
:root {
  --nav-gold: #f5f5f7;
  --accent-2: #f5f5f7;
  --accent-soft: rgba(29,29,31,.06);
  --accent-glow: rgba(29,29,31,.12);
  --star: #8e8e93;
}
body.dark {
  --nav-gold: #f5f5f7;
  --accent-2: #f5f5f7;
  --accent-soft: rgba(255,255,255,.08);
  --accent-glow: rgba(255,255,255,.14);
  --star: #d1d1d6;
}
/* Main hero actions: porcelain white and Apple graphite, never gold. */
.hero-actions .pill-glow,
.hero-actions .hero-gallery {
  color: #1d1d1f !important;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid #d1d1d6 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.08) !important;
}
.hero-actions .pill-glow span,
.hero-actions .pill-glow i,
.hero-actions .hero-gallery span { color: #1d1d1f !important; }
.hero-actions .pill-glow:hover,
.hero-actions .hero-gallery:hover { background: #f5f5f7 !important; border-color: #a1a1a6 !important; }
body.dark .hero-actions .pill-glow,
body.dark .hero-actions .hero-gallery {
  color: #1d1d1f !important;
  background: #f5f5f7 !important;
  border-color: #f5f5f7 !important;
}
/* Header controls and mobile booking dock use soft silver surfaces. */
#header .header-control,
#header .hamb,
#header .header-theme-toggle,
#header .header-lang {
  color: #1d1d1f !important;
  border-color: #d1d1d6 !important;
}
#header .hamb { background: transparent !important; }
body.dark #header .header-control,
body.dark #header .hamb,
body.dark #header .header-theme-toggle,
body.dark #header .header-lang {
  color: #f5f5f7 !important;
  border-color: rgba(245,245,247,.55) !important;
}
.floating-bottom-bar {
  background: rgba(255,255,255,.94) !important;
  border: 1px solid #e5e5ea !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.12) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
}
.floating-bottom-bar .btn-gold-center,
.btn-gold-center {
  color: #1d1d1f !important;
  background: #f5f5f7 !important;
  border: 1px solid #d1d1d6 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.06) !important;
}
.floating-bottom-bar .btn-gold-center:hover,
.btn-gold-center:hover { background: #e5e5ea !important; border-color: #c7c7cc !important; }
body.dark .floating-bottom-bar {
  background: rgba(38,38,40,.94) !important;
  border-color: rgba(255,255,255,.16) !important;
}
body.dark .floating-bottom-bar .btn-gold-center,
body.dark .btn-gold-center {
  color: #1d1d1f !important;
  background: #f5f5f7 !important;
  border-color: #f5f5f7 !important;
}
.mobile-bar-icon, .mobile-ai-trigger { color: #636366 !important; }
body.dark .mobile-bar-icon, body.dark .mobile-ai-trigger { color: #d1d1d6 !important; }
/* Dental/service icons and small feature chips: graphite on a soft silver tile. */
.menu-summary-icon,
.service-icon,
.faq-icon,
.a11y-option-icon {
  color: #636366 !important;
  background-color: #f5f5f7 !important;
}
.menu-summary-icon i, .service-icon i { color: #636366 !important; }

/* Dark-mode contrast fixes for the homepage gallery action and mobile menu wordmark. */
body.dark .hero-actions .hero-gallery,
body.dark .hero-actions .hero-gallery span,
body.dark .hero-actions .hero-gallery i,
body.dark .hero-actions .hero-gallery > * {
  color: #1d1d1f !important;
}
body.dark .hero-actions .hero-gallery {
  background: #f5f5f7 !important;
  border: 1px solid #d1d1d6 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.22) !important;
}
body.dark .hero-actions .hero-gallery:hover { background: #e5e5ea !important; border-color: #c7c7cc !important; }
body.dark #mobileNav .nav-overlay-header .brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 5px 11px 5px 5px !important;
  border: 1px solid #d1d1d6 !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.24) !important;
}
body.dark #mobileNav .nav-overlay-header .brand-glyph {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  color: #fff !important;
  background: #1d1d1f !important;
}
body.dark #mobileNav .nav-overlay-header .brand-glyph .mercado-mark { color: #fff !important; stroke: #fff !important; }
body.dark #mobileNav .nav-overlay-header .brand-text strong { color: #1d1d1f !important; }
body.dark #mobileNav .nav-overlay-header .brand-sub { color: #636366 !important; }


/* Scroll reveal: the reference site's soft rise/slide-in with staggered cards. */
html.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
html.js-reveal [data-reveal="fade"] { transform: none; }
html.js-reveal [data-reveal="left"] { transform: translateX(-32px); }
html.js-reveal [data-reveal="right"] { transform: translateX(32px); }
html.js-reveal [data-reveal].is-revealed { opacity: 1; transform: translate(0); }
html.js-reveal [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1);
}
html.js-reveal [data-reveal-stagger].is-revealed > * { opacity: 1; transform: none; }
html.js-reveal [data-reveal-stagger].is-revealed > :nth-child(1) { transition-delay: 0ms; }
html.js-reveal [data-reveal-stagger].is-revealed > :nth-child(2) { transition-delay: 90ms; }
html.js-reveal [data-reveal-stagger].is-revealed > :nth-child(3) { transition-delay: 180ms; }
html.js-reveal [data-reveal-stagger].is-revealed > :nth-child(4) { transition-delay: 270ms; }
html.js-reveal [data-reveal-stagger].is-revealed > :nth-child(5) { transition-delay: 360ms; }
html.js-reveal [data-reveal-stagger].is-revealed > :nth-child(6) { transition-delay: 450ms; }
html.js-reveal [data-reveal-stagger].is-revealed > :nth-child(7) { transition-delay: 540ms; }
html.js-reveal [data-reveal-stagger].is-revealed > :nth-child(8) { transition-delay: 630ms; }
@media (max-width: 900px) {
  html.js-reveal [data-reveal="left"], html.js-reveal [data-reveal="right"] { transform: translateY(24px); }
}
@media (prefers-reduced-motion: reduce) {
  html.js-reveal [data-reveal], html.js-reveal [data-reveal-stagger] > * {
    opacity: 1 !important; transform: none !important; transition: none !important; will-change: auto !important;
  }
}
/* Keep the gallery and menu wordmark legible in dark mode with the latest cache-busted stylesheet. */
body.dark .hero-actions .hero-gallery,
body.dark .hero-actions .hero-gallery span,
body.dark .hero-actions .hero-gallery i { color: #1d1d1f !important; }
body.dark .hero-actions .hero-gallery { background: #f5f5f7 !important; border: 1px solid #d1d1d6 !important; }
body.dark #mobileNav .nav-overlay-header .brand { background: #fff !important; border: 1px solid #d1d1d6 !important; border-radius: 12px !important; padding: 5px 11px 5px 5px !important; }
body.dark #mobileNav .nav-overlay-header .brand-glyph { background: #1d1d1f !important; color: #fff !important; }
body.dark #mobileNav .nav-overlay-header .brand-text strong { color: #1d1d1f !important; }
body.dark #mobileNav .nav-overlay-header .brand-sub { color: #636366 !important; }


/* Menu wordmark: a consistent light lockup keeps the SVG mark visible in either theme. */
#mobileNav .nav-overlay-header .brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 50px;
  padding: 5px 12px 5px 5px !important;
  border: 1px solid #d1d1d6 !important;
  border-radius: 11px !important;
  background: #fff !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.14) !important;
}
#mobileNav .nav-overlay-header .brand-glyph {
  display: grid !important;
  flex: 0 0 40px !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  overflow: hidden;
  border: 0 !important;
  color: #fff !important;
  background: #1d1d1f !important;
}
#mobileNav .nav-overlay-header .brand-glyph .mercado-mark {
  display: block !important;
  width: 31px !important;
  height: 30px !important;
  fill: none !important;
  color: #fff !important;
  stroke: #fff !important;
  stroke-width: 2.4 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
#mobileNav .nav-overlay-header .brand-text { display: flex !important; flex-direction: column; gap: 3px; min-width: 0; }
#mobileNav .nav-overlay-header .brand-text strong { color: #1d1d1f !important; font: 600 12px/1.1 'Inter', sans-serif; letter-spacing: .14em; }
#mobileNav .nav-overlay-header .brand-sub { color: #636366 !important; font: 600 7px/1.15 'Inter', sans-serif; letter-spacing: .18em; }

/* Escritorio en oscuro: el glifo blanco necesita su propio bloque grafito para no perderse sobre la placa clara. */
@media (min-width: 681px) {
  body.dark #header .brand-glyph {
    display: grid !important;
    flex: 0 0 44px !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    overflow: hidden;
    color: #fff !important;
    background: #1d1d1f !important;
    border: 0 !important;
  }
  body.dark #header .brand-glyph .mercado-mark {
    display: block !important;
    width: 34px !important;
    height: 31px !important;
    fill: none !important;
    color: #fff !important;
    stroke: #fff !important;
    stroke-width: 2.4 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
}


/* Compact the mobile cookie notice so it does not cover the hero gallery action. */
@media (max-width: 680px) {
  .cookie-banner { padding: 14px 16px; }
  .cookie-banner h4 { margin-bottom: 6px; }
  .cookie-banner p { margin-bottom: 10px; line-height: 1.45; }
}


/* Neutral Apple-style cookie actions; avoid champagne/gold text and hover colors. */
body:not(.dark) .cookie-accept,
body:not(.dark) .cookie-accept:hover { color: #fff !important; background: #1d1d1f !important; border-color: #1d1d1f !important; }
body.dark .cookie-accept,
body.dark .cookie-accept:hover { color: #1d1d1f !important; background: #f5f5f7 !important; border-color: #d1d1d6 !important; }
body:not(.dark) .cookie-reject:hover { color: #1d1d1f !important; border-color: #1d1d1f !important; }
body.dark .cookie-reject:hover { color: #f5f5f7 !important; border-color: #f5f5f7 !important; }