/* ==========================================================================
   Clínica LaFam — public site
   Mobile-first. Design language: Apple Human Interface principles for the
   web (system type with optical tracking, translucent materials, critically
   damped motion, 44 px touch targets, reduced motion/contrast).
   Brand palette sampled from the clinic's logo (brand/source/logo-lafam.png):
   one magenta, #C91180 (5.4:1 on white, AA for text and buttons). Darker and
   lighter tints of the same hue carry hierarchy; no second brand color.
   The legacy token names (--indigo, --royal, --plum, --sky…) are kept so the
   shared platform CSS keeps working; they now hold magenta tints.
   No inline styles anywhere (CSP style-src 'self').
   ========================================================================== */

:root {
  --magenta: #c91180;
  --indigo: #8c0b59;
  --indigo-strong: #6e0846;
  --royal: #b0106f;
  --plum: #7a1a5c;
  --lilac: #e58bc0;
  --sky: #a30d68;
  --sky-bright: #f06bb5;
  --emergency: #c91180;
  --emergency-strong: #a30d68;
  --ok: #136a39;

  --bg: #fbf7fa;
  --bg-tint: #f8edf3;
  --surface: #ffffff;
  --surface-2: #f9f1f6;
  --text: #2a1424;
  --text-2: #5c4656;
  --muted: #6b5866;
  --line: rgba(42, 20, 36, .09);
  --line-strong: rgba(42, 20, 36, .16);
  --link: #a30d68;
  --accent: #c91180;
  --tile-bg: #fbe7f2;
  --tile-fg: #a30d68;
  --tile-red-bg: #fbe7f2;
  --tile-green-bg: #e3f4ea;
  --footer-bg: #f8eef4;
  --cta-bg: linear-gradient(135deg, #fde9f3 0%, #f9e4f0 55%, #fdf0f6 100%);
  --accent-contrast: #fff;
  --focus: #a30d68;

  --glass: rgba(255, 255, 255, .72);
  --glass-strong: rgba(255, 255, 255, .86);
  --glass-edge: rgba(255, 255, 255, .6);
  --scrim: rgba(31, 10, 25, .38);

  --shadow-sm: 0 1px 2px rgba(42, 20, 36, .06), 0 1px 1px rgba(42, 20, 36, .04);
  --shadow-md: 0 8px 24px -8px rgba(42, 20, 36, .16), 0 2px 6px rgba(42, 20, 36, .05);
  --shadow-lg: 0 30px 60px -20px rgba(110, 8, 70, .30), 0 8px 20px -10px rgba(42, 20, 36, .16);

  --grad-brand: linear-gradient(135deg, #d4198b 0%, #c91180 45%, #8c0b59 100%);
  --grad-wing: linear-gradient(120deg, #f06bb5 0%, #c91180 50%, #8c0b59 100%);
  --grad-text: linear-gradient(120deg, #d4198b 0%, #c91180 45%, #8c0b59 100%);
  --grad-soft: linear-gradient(160deg, #fdeef6 0%, #fbf3f8 50%, #fdf6fa 100%);

  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --gutter: 20px;
  --header-h: 64px;

  /* Motion: critically damped by default (no overshoot), ~0.35 s response. */
  --ease: cubic-bezier(.22, .9, .26, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 140ms;
  --t: 340ms;
  --t-slow: 600ms;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

@media not all /* dark theme: off, the hospital site is always light */ {
  :root {
    --indigo: #a9adff;
    --royal: #8fb2f5;
    --plum: #e2a6e3;
    --lilac: #d9b0db;
    --sky: #6ccdf5;
    --sky-bright: #6ccdf5;
    --emergency: #ff5b52;
    --emergency-strong: #ff7a72;
    --ok: #4cd681;
    --bg: #0c0e1d;
    --bg-tint: #12142a;
    --surface: #161935;
    --surface-2: #1c1f3f;
    --text: #eef0fb;
    --text-2: #c4c7e0;
    --muted: #a0a3c2;
    --line: rgba(238, 240, 251, .1);
    --line-strong: rgba(238, 240, 251, .18);
    --link: #aeb3ff;
    --accent: #7d84ff;
    --accent-contrast: #0c0e1d;
    --tile-bg: rgba(143, 178, 245, .16);
    --tile-fg: #b9cdfa;
    --tile-red-bg: rgba(255, 91, 82, .16);
    --tile-green-bg: rgba(76, 214, 129, .16);
    --footer-bg: #11132a;
    --cta-bg: linear-gradient(135deg, #182447 0%, #1f1a40 55%, #2a1838 100%);
    --glass: rgba(22, 25, 53, .66);
    --glass-strong: rgba(22, 25, 53, .86);
    --glass-edge: rgba(255, 255, 255, .08);
    --scrim: rgba(0, 0, 0, .55);
    --shadow-md: 0 10px 30px -10px rgba(0, 0, 0, .6);
    --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, .7);
    --grad-soft: linear-gradient(160deg, #1b1533 0%, #121735 50%, #0d1f33 100%);
    --grad-text: linear-gradient(120deg, #6ccdf5 0%, #a9adff 45%, #e2a6e3 100%);
    color-scheme: dark;
  }
}

/* ---------- Accessibility preferences (panel + system settings) ---------- */
html { font-size: 100%; }
html[data-text="1"] { font-size: 112.5%; }
html[data-text="2"] { font-size: 125%; }
html.a11y-contrast {
  --text: #000; --text-2: #111; --muted: #2b2b2b; --bg: #fff; --surface: #fff; --surface-2: #fff;
  --line: #000; --line-strong: #000; --indigo: #5e0640; --link: #5e0640; --accent: #5e0640;
  --glass: #fff; --glass-strong: #fff; --emergency: #8c0b59;
}
@media not all {
  html.a11y-contrast {
    --text: #fff; --text-2: #fff; --muted: #e5e5e5; --bg: #000; --surface: #000; --surface-2: #000;
    --line: #fff; --line-strong: #fff; --indigo: #c9ccff; --link: #fff; --accent: #c9ccff; --accent-contrast: #000;
    --glass: #000; --glass-strong: #000;
  }
}
html.a11y-contrast .card, html.a11y-contrast .service-card, html.a11y-contrast .area-card, html.a11y-contrast .stat { border: 2px solid var(--line); box-shadow: none; }
html.a11y-contrast .site-header, html.a11y-contrast .sheet, html.a11y-contrast .action-bar { backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--line); }
html.a11y-links a:not(.btn):not(.brand):not(.pill) { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: .08em; }
html.a11y-spacing body { letter-spacing: .03em; word-spacing: .12em; line-height: 1.85; }
html.a11y-spacing p, html.a11y-spacing li { line-height: 1.85; }
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation: none !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
@media (prefers-contrast: more) {
  :root { --line: rgba(0, 0, 0, .5); --glass: var(--surface); --muted: var(--text-2); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: var(--surface); --glass-strong: var(--surface); }
  .site-header, .sheet, .action-bar, .glass { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 1rem/1.6 var(--font); letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { font-family: var(--font-display); color: var(--text); margin: 0; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 6.4vw + .4rem, 4.4rem); line-height: 1.04; letter-spacing: -.035em; }
h2 { font-size: clamp(1.85rem, 3.4vw + .6rem, 3rem); line-height: 1.08; letter-spacing: -.028em; }
h3 { font-size: 1.15rem; line-height: 1.3; letter-spacing: -.012em; font-weight: 650; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--accent); color: var(--accent-contrast); padding: 10px 16px; border-radius: 12px; font-weight: 600; transition: top var(--t-fast) var(--ease); }
.skip-link:focus { top: 12px; }
.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)); }
.muted { color: var(--muted); }
.small { font-size: .875rem; line-height: 1.5; }
.nowrap { white-space: nowrap; }
.eyebrow { font-size: .8125rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--plum); margin-bottom: 12px; }
.lead { font-size: 1.0625rem; line-height: 1.6; color: var(--text-2); margin-top: 16px; max-width: 62ch; }
em { font-style: normal; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.a11y-contrast em { background: none; color: inherit; text-decoration: underline; text-decoration-thickness: .06em; }

/* ---------- Buttons: instant feedback on press ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: 1rem; line-height: 1.2; letter-spacing: -.01em; text-decoration: none !important; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), background-color var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:active { transform: scale(.97); transition-duration: 80ms; }
.btn-lg { min-height: 54px; padding: 14px 26px; font-size: 1.0625rem; }
.btn-small { min-height: 40px; padding: 8px 16px; font-size: .9375rem; }
.btn-block { display: flex; width: 100%; }
.btn-primary { background: var(--accent); color: var(--accent-contrast); box-shadow: 0 8px 20px -8px rgba(201, 17, 128, .45); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 86%, #000); }
@media not all { .btn-primary:hover { background: #9298ff; } }
.btn-emergency { background: var(--emergency); color: #fff; box-shadow: 0 10px 24px -10px rgba(201, 17, 128, .5); }
.btn-emergency:hover { background: var(--emergency-strong); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-glass { background: var(--glass); color: var(--text); border-color: var(--glass-edge); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: var(--shadow-sm); }
.btn-glass svg { color: #1faa59; }
.btn-light { background: #fff; color: #8c0b59; }
.btn-light:hover { background: #fdf0f7; }
.text-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; min-height: 44px; }
.text-link svg { width: 16px; height: 16px; transition: transform var(--t) var(--ease); }
.text-link:hover svg { transform: translateX(3px); }
.link-btn { background: none; border: 0; color: var(--link); font-weight: 600; min-height: 44px; padding: 0 4px; }
.icon-btn {
  display: inline-grid; place-items: center; gap: 4px; grid-auto-flow: column;
  min-width: 44px; height: 44px; padding: 0 10px; border-radius: 999px; border: 0;
  background: transparent; color: var(--text); transition: background-color var(--t) var(--ease), transform var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:hover { background: var(--surface-2); }
.icon-btn:active { transform: scale(.92); }
@media (max-width: 479px) { .header-actions .lang-btn { display: none; } }
@media (min-width: 1080px) { .lang-sheet { display: none; } }
.lang-btn span { font-size: .8125rem; font-weight: 700; letter-spacing: .02em; }

/* ---------- Header: content scrolls under a translucent material ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  padding-top: env(safe-area-inset-top);
  transition: background-color var(--t) var(--ease), box-shadow var(--t) var(--ease), backdrop-filter var(--t) var(--ease);
}
.site-header.is-scrolled {
  background: var(--glass); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 1px 0 var(--line), 0 10px 30px -24px rgba(21, 23, 46, .5);
}
.header-inner { height: 100%; display: flex; align-items: center; gap: 8px; }
@media (max-width: 400px) { :root { --gutter: 16px; } .header-actions { gap: 0; } .brand { gap: 8px; } }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none !important; min-height: 44px; }
.brand-logo, .brand-logo img { display: block; height: 40px; width: auto; }
@media (min-width: 1080px) { .site-header .brand-logo, .site-header .brand-logo img { height: 48px; } }
.brand-sm .brand-logo, .brand-sm .brand-logo img { height: 34px; }
.brand-logo-img { height: 48px; width: auto; }
.doc-logo img { height: 64px; width: auto; margin-bottom: 8px; }
@media (max-width: 400px) { .site-header .brand-logo, .site-header .brand-logo img { height: 34px; } }
.nav-desktop { display: none; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.pill { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; font-weight: 650; font-size: .875rem; text-decoration: none !important; }
.pill svg { width: 18px; height: 18px; }
.pill-emergency { background: var(--emergency); color: #fff; margin-right: 4px; transition: transform var(--t-fast) var(--ease), background-color var(--t) var(--ease); }
.pill-emergency:hover { background: var(--emergency-strong); }
.pill-emergency:active { transform: scale(.96); }
.pill-emergency span:last-child { display: none; }
.pill .pulse { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); animation: pulse 2.4s var(--ease-out) infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); } 70%, 100% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); } }
@media (min-width: 560px) { .pill-emergency span:last-child { display: inline; } }
@media (max-width: 559px) { .pill-emergency { width: 44px; height: 44px; padding: 0; justify-content: center; margin-right: 2px; } .pill-emergency .pulse { display: none; } }
@media (min-width: 1080px) {
  :root { --header-h: 72px; }
  .menu-btn { display: none; }
  .nav-desktop { display: flex; gap: 2px; margin-left: 28px; }
  .nav-desktop a { position: relative; padding: 10px 12px; border-radius: 999px; color: var(--text-2); font-weight: 550; font-size: .9375rem; text-decoration: none; transition: color var(--t) var(--ease), background-color var(--t) var(--ease); }
  .nav-desktop a:hover { color: var(--text); background: var(--surface-2); }
  .nav-desktop a[aria-current] { color: var(--indigo); background: color-mix(in srgb, var(--indigo) 10%, transparent); }
}

/* ---------- Sheets (<dialog>): enter and leave along the same path ---------- */
.sheet {
  border: 0; padding: 0; margin: 0; color: var(--text); background: var(--glass-strong);
  backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow: var(--shadow-lg); max-width: none; max-height: none; overflow: auto; overscroll-behavior: contain;
  opacity: 0; transition: transform var(--t) var(--ease-out), opacity var(--t) var(--ease-out);
}
.sheet:not([open]) { display: none !important; }
.sheet::backdrop { background: var(--scrim); opacity: 0; transition: opacity var(--t) var(--ease-out); }
.sheet.is-open, .sheet.is-open::backdrop { opacity: 1; }
.sheet.is-closing { transition-duration: 240ms; }
html.has-sheet { overflow: hidden; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 6px 20px; }
.sheet-head h2 { font-size: 1.25rem; letter-spacing: -.02em; }
.sheet-side { position: fixed; inset: 0 0 0 auto; width: min(380px, 88vw); height: 100%; display: flex; flex-direction: column; transform: translateX(100%); border-radius: 28px 0 0 28px; padding-bottom: env(safe-area-inset-bottom); }
.sheet-side.is-open { transform: none; }
.mobile-links { display: grid; padding: 10px 12px; }
.mobile-links a { display: flex; align-items: center; min-height: 54px; padding: 0 12px; border-radius: 14px; font-size: 1.25rem; font-weight: 650; letter-spacing: -.02em; color: var(--text); text-decoration: none; transition: background-color var(--t-fast) var(--ease); }
.mobile-links a:active { background: var(--surface-2); }
.sheet-foot { margin-top: auto; padding: 16px 20px 24px; display: grid; gap: 10px; }
/* Accessibility: bottom sheet on phones, popover from its button on desktop. */
.sheet-pop { position: fixed; inset: auto 0 0 0; width: 100%; border-radius: 28px 28px 0 0; padding: 4px 4px calc(20px + env(safe-area-inset-bottom)); transform: translateY(100%); }
.sheet-pop.is-open { transform: none; }
.sheet-pop > p, .sheet-pop > .a11y-row, .sheet-pop > .btn { margin-inline: 16px; }
.sheet-pop > p { margin-bottom: 8px; }
.sheet-pop > .btn { margin-top: 12px; width: calc(100% - 32px); }
@media (min-width: 720px) {
  .sheet-pop { inset: calc(var(--header-h) + 6px) 16px auto auto; width: 360px; border-radius: 24px; transform: scale(.92) translateY(-8px); transform-origin: top right; padding-bottom: 16px; }
  .sheet-pop.is-open { transform: none; }
}
.a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 6px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; width: calc(100% - 32px); text-align: left; font-weight: 550; }
.segmented { display: inline-flex; background: var(--surface-2); padding: 3px; border-radius: 12px; gap: 2px; }
.segmented button { min-width: 44px; height: 38px; border: 0; border-radius: 10px; background: transparent; font-weight: 700; transition: background-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.segmented button[aria-pressed="true"] { background: var(--surface); box-shadow: var(--shadow-sm); color: var(--indigo); }
.segmented .a-md { font-size: 1.15rem; } .segmented .a-lg { font-size: 1.35rem; }
.switch { position: relative; flex: none; width: 51px; height: 31px; border-radius: 999px; background: var(--line-strong); transition: background-color var(--t) var(--ease); }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .18); transition: transform var(--t) var(--ease); }
.switch-row[aria-checked="true"] .switch { background: var(--ok); }
.switch-row[aria-checked="true"] .switch::after { transform: translateX(20px); }
.switch-row:active .switch::after { width: 31px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 28px 0 40px; margin-top: calc(var(--header-h) * -1); padding-top: calc(var(--header-h) + 28px); overflow: hidden; isolation: isolate; }
.hero:focus { outline: none; }
.hero-bg { position: absolute; inset: 0; z-index: -1; background: var(--grad-soft); }
.orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; }
.orb-a { width: 60vmax; height: 60vmax; left: -25vmax; top: -30vmax; background: radial-gradient(circle, #f6c6e1 0%, transparent 65%); }
.orb-b { width: 50vmax; height: 50vmax; right: -20vmax; top: -10vmax; background: radial-gradient(circle, #fbd9ea 0%, transparent 65%); }
.orb-c { width: 40vmax; height: 40vmax; left: 30%; bottom: -30vmax; background: radial-gradient(circle, #f3d2e6 0%, transparent 65%); }
@media not all { .orb { opacity: .28; } }
.hero-grid { display: grid; gap: 32px; align-items: center; }
.status-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-edge); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-size: .8125rem; font-weight: 600; color: var(--text-2); margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.status-chip .dot, .visit-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.hero h1 { max-width: 15ch; }
.hero .lead { font-size: 1.125rem; }
.hero-ctas { display: grid; gap: 12px; margin-top: 28px; }
.badges { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 24px; }
.badges li { display: inline-flex; align-items: center; gap: 6px; font-size: .9375rem; color: var(--text-2); font-weight: 500; }
.badges svg { width: 18px; height: 18px; color: var(--ok); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 48px; }
.stat { background: var(--glass); border: 1px solid var(--glass-edge); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); }
.stat dd { display: grid; gap: 4px; }
.stat-value { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 750; letter-spacing: -.04em; line-height: 1; color: var(--indigo); font-variant-numeric: tabular-nums; }
.stat-label { font-size: .875rem; color: var(--text-2); line-height: 1.35; }
@media (min-width: 560px) { .hero-ctas { display: flex; flex-wrap: wrap; } }
@media (min-width: 900px) {
  .hero { padding-bottom: 64px; padding-top: calc(var(--header-h) + 56px); }
  .hero-grid { grid-template-columns: 1.25fr .9fr; gap: 48px; }
  .stats { grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 72px; }
  .stat { padding: 22px 24px; }
}
@keyframes float-in { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: none; } }

/* ---------- Sections ---------- */
.section { padding: 72px 0; }
.section-head { max-width: 720px; margin-bottom: 36px; }
@media (min-width: 900px) { .section { padding: 112px 0; } .section-head { margin-bottom: 52px; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }

/* Services: Emergency and Laboratory take two columns so the grid closes evenly. */
.services-grid { display: grid; gap: 14px; }
.service-card {
  position: relative; display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; isolation: isolate;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--indigo) 22%, var(--line)); }
.service-body { display: flex; flex-direction: column; gap: 10px; padding: 24px; flex: 1; position: relative; }
.service-card p { color: var(--text-2); font-size: .975rem; flex: 1; }
.service-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 2px; }
.service-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: var(--tile-fg); background: var(--tile-bg); margin-bottom: 6px; }
.service-icon svg { width: 28px; height: 28px; }

@media (min-width: 620px) { .services-grid { grid-template-columns: 1fr 1fr; } .service-card:first-child { grid-column: span 2; } }
@media (min-width: 960px) { .services-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }

/* Maternity */
.maternity { background: var(--grad-soft); }
.maternity-grid { display: grid; gap: 32px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cta-row.center { justify-content: center; }
.feature-list { display: grid; gap: 20px; margin-top: 40px; }
.feature-list li { padding-left: 18px; border-left: 3px solid; border-image: var(--grad-wing) 1; }
.feature-list p { color: var(--text-2); margin-top: 6px; font-size: .975rem; }
@media (min-width: 640px) { .feature-list { grid-template-columns: 1fr 1fr; gap: 28px 32px; } }
@media (min-width: 1000px) { .maternity-grid { grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: start; } .bag { position: sticky; top: calc(var(--header-h) + 24px); } }
.bag { padding: 24px; border-radius: var(--radius-lg); background: var(--glass-strong); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: var(--shadow-md); }
.bag-head { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; }
.bag-head h3 { font-size: 1.3rem; margin-bottom: 6px; }
.ring { --p: 0; width: 56px; height: 56px; flex: none; }
.ring circle { fill: none; stroke: var(--line-strong); stroke-width: 3.5; }
.ring[data-empty] .ring-fill { opacity: 0; }
.ring .ring-fill { stroke: var(--ok); stroke-linecap: round; stroke-dasharray: calc(var(--p) * 100) 100; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dasharray var(--t-slow) var(--ease); }
.bag-progress { font-weight: 650; font-size: .875rem; color: var(--ok); margin: 10px 0 6px; min-height: 1.4em; }
.bag-list { display: grid; margin-bottom: 14px; }
.bag-item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--line); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bag-item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bag-item .box { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 2px solid var(--line-strong); display: grid; place-items: center; transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t-fast) var(--ease); }
.bag-item .box svg { width: 16px; height: 16px; color: #fff; opacity: 0; transform: scale(.4); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
.bag-item input:checked + .box { background: var(--ok); border-color: var(--ok); }
.bag-item input:checked + .box svg { opacity: 1; transform: none; }
.bag-item input:checked ~ span:last-child { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.bag-item:active .box { transform: scale(.88); }
.bag-item input:focus-visible + .box { outline: 3px solid var(--focus); outline-offset: 2px; }

/* About */
.about-grid { display: grid; gap: 32px; align-items: center; }
.about-art { margin: 0; position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3.4; background: var(--grad-brand); box-shadow: var(--shadow-lg); }
.about-illus { position: absolute; inset: 0; display: grid; place-items: center; }
.about-illus svg { width: 46%; height: 46%; filter: brightness(1.8) saturate(.4) drop-shadow(0 20px 30px rgba(0, 0, 0, .25)); opacity: .9; }
.about-photo { width: 100%; height: 100%; object-fit: cover; }
.about-art figcaption { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 12px 16px; border-radius: 16px; background: rgba(15, 17, 40, .45); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); color: #fff; font-size: .9375rem; font-weight: 550; letter-spacing: .005em; }
.mv { display: grid; gap: 14px; margin-top: 28px; }
.mv-card { padding: 20px 22px; }
.mv-card h3 { color: var(--indigo); margin-bottom: 6px; }
.mv-card p { color: var(--text-2); font-size: .975rem; }
@media (min-width: 640px) { .mv { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .about-grid { grid-template-columns: 1fr 1.1fr; gap: 64px; } }

/* Facilities */
.facilities { background: var(--bg-tint); }
.areas-grid { display: grid; gap: 16px; }
.area-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.area-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.area-art, .area-photo { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
.area-art { display: grid; place-items: center; color: rgba(255, 255, 255, .92); }
.area-art svg { width: 30%; height: 30%; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .18)); }
.area-art.a1 { background: linear-gradient(135deg, #d4198b, #8c0b59); }
.area-art.a2 { background: linear-gradient(135deg, #f06bb5, #b0106f); }
.area-art.a3 { background: linear-gradient(135deg, #c91180, #6e0846); }
.area-art.a4 { background: linear-gradient(135deg, #f4a3cf, #c91180); }
.area-art.a5 { background: linear-gradient(135deg, #b0106f, #5e0640); }
.area-art.a6 { background: linear-gradient(135deg, #e58bc0, #a30d68); }
.area-body { padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.area-body p { color: var(--text-2); font-size: .95rem; flex: 1; }
.tag { align-self: flex-start; display: inline-block; font-size: .75rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; color: var(--plum); background: color-mix(in srgb, var(--plum) 12%, transparent); }
.area-open { align-self: flex-start; margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; font-weight: 600; color: var(--text); transition: background-color var(--t) var(--ease), transform var(--t-fast) var(--ease); }
.area-open svg { width: 18px; height: 18px; transition: transform var(--t) var(--ease); }
.area-open:hover { background: var(--surface-2); }
.area-open:hover svg { transform: translateX(3px); }
.area-open:active { transform: scale(.96); }
/* The whole card is the touch target; the button stays the accessible control. */
.area-open::after { content: ""; position: absolute; inset: 0; }
@media (min-width: 620px) { .areas-grid { grid-template-columns: 1fr 1fr; } .area-art, .area-photo { aspect-ratio: 4 / 3; } }
@media (min-width: 960px) { .areas-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

/* Gallery sheet */
.sheet-gallery { position: fixed; inset: 0; width: 100%; height: 100%; background: var(--surface); transform: translateY(40px) scale(.98); display: flex; flex-direction: column; }
.sheet-gallery.is-open { transform: none; }
.gallery-media { position: relative; background: #0d0f1f; }
.gallery-slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; aspect-ratio: 4 / 3; }
.gallery-slides::-webkit-scrollbar { display: none; }
.gallery-slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; display: grid; place-items: center; }
.gallery-slide img { width: 100%; height: 100%; object-fit: cover; }
.gallery-slide.is-placeholder { place-items: stretch; }
.gallery-slide.is-placeholder > svg { margin: auto; width: 30%; height: 30%; color: #fff; }
.gallery-nav { position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: opacity var(--t) var(--ease), transform var(--t-fast) var(--ease); }
.gallery-nav svg { width: 22px; height: 22px; }
.gallery-nav.prev { left: 12px; } .gallery-nav.prev svg { transform: scaleX(-1); }
.gallery-nav.next { right: 12px; }
.gallery-nav:disabled { opacity: 0; pointer-events: none; }
.gallery-nav:active { transform: scale(.9); }
.gallery-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 2px; }
.gallery-dots button { width: 24px; height: 24px; border: 0; background: none; padding: 0; display: grid; place-items: center; }
.gallery-dots button::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .5); transition: width var(--t) var(--ease), background-color var(--t) var(--ease); }
.gallery-dots button[aria-current="true"]::before { width: 20px; background: #fff; }
.gallery-close { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 10px; color: #fff; background: rgba(0, 0, 0, .35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.gallery-close:hover { background: rgba(0, 0, 0, .5); }
.gallery-body { padding: 22px 22px 28px; display: grid; gap: 8px; }
.gallery-body h3 { font-size: 1.5rem; letter-spacing: -.02em; }
.gallery-body p { color: var(--text-2); }
@media (min-width: 760px) {
  .sheet-gallery { inset: 0; margin: auto; width: min(760px, 92vw); height: auto; max-height: 92vh; border-radius: 28px; overflow: hidden; }
}

/* Patients */
.steps { display: grid; gap: 14px; counter-reset: s; margin-bottom: 72px; }
.step { position: relative; padding: 22px 22px 22px 76px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.step-n { position: absolute; left: 20px; top: 20px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 750; color: var(--tile-fg); background: var(--tile-bg); font-variant-numeric: tabular-nums; }
.step p { color: var(--text-2); margin-top: 6px; font-size: .95rem; }
@media (min-width: 760px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 112px; }
  .step { padding: 76px 22px 24px; }
  .step-n { top: 22px; left: 22px; }
}
.patients-grid { display: grid; gap: 28px; }
.patients-grid > *, .maternity-grid > *, .contact-grid > *, .about-grid > *, .hero-grid > * { min-width: 0; }
.tabs { position: relative; display: flex; gap: 2px; padding: 4px; margin-top: 28px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs [role="tab"] { position: relative; z-index: 1; flex: 1 1 0; min-height: 44px; padding: 6px 10px; line-height: 1.2; font-size: .9375rem; border: 0; border-radius: 10px; background: transparent; font-weight: 600; color: var(--text-2); transition: color var(--t) var(--ease); -webkit-tap-highlight-color: transparent; }
.tabs [role="tab"][aria-selected="true"] { color: var(--text); }
.tab-indicator { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-sm), 0 0 0 .5px var(--line); transition: transform var(--t) var(--ease), width var(--t) var(--ease); }
.tab-panel { padding-top: 20px; }
.tab-panel:focus-visible { outline-offset: 8px; }
.check-list { display: grid; gap: 4px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--text-2); }
.check-list li:last-child { border-bottom: 0; }
.check-list svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--plum); }
.check-list.compact li { padding: 8px 0; }
.patients-side { display: grid; gap: 16px; align-content: start; }
.visit-card, .ext-card { padding: 22px 24px; }
.visit-hours { text-wrap: balance; font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; margin: 8px 0 14px; color: var(--indigo); }
.visit-status { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--surface-2); font-size: .9375rem; }
.visit-status [data-role="detail"] { display: block; color: var(--text-2); font-size: .875rem; }
.visit-status[data-state="closed"] .dot { background: var(--muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted) 22%, transparent); }
.visit-status[data-state="open"] { background: color-mix(in srgb, var(--ok) 12%, var(--surface)); }
.ext-list { display: grid; margin: 12px 0; }
.ext-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ext-list dt { color: var(--text-2); }
.ext-list dd { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ext-main a { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; min-height: 44px; }
.ext-main svg { width: 20px; height: 20px; }
@media (min-width: 960px) { .patients-grid { grid-template-columns: 1.5fr 1fr; gap: 56px; } .patients-side { padding-top: 120px; } }

/* Insurance */
.insurance-grid { display: grid; gap: 16px; }
.ins-card { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.ins-card .text-link { margin-top: auto; align-self: flex-start; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 8px 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-weight: 600; font-size: .9375rem; }
.chips-lg li { padding: 12px 18px; font-size: 1rem; background: var(--surface); box-shadow: var(--shadow-sm); }
.ins-main { background: var(--grad-soft); }
@media (min-width: 760px) { .insurance-grid { grid-template-columns: 1fr 1fr; } .ins-main { grid-column: span 2; } }
@media (min-width: 1080px) { .insurance-grid { grid-template-columns: 1.4fr 1fr 1fr; } .ins-main { grid-column: auto; } }

/* CTA band */
.cta-band { padding: 0; }
.cta-inner { display: grid; gap: 22px; padding: 36px 28px; border-radius: var(--radius-lg); background: var(--cta-bg); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow-md); position: relative; overflow: hidden; }
.cta-inner::after { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(201, 17, 128, .14), transparent 70%); }
.cta-inner h2 { color: var(--text); }
.cta-inner p { color: var(--text-2); margin-top: 8px; max-width: 52ch; }
.cta-inner .btn { justify-self: start; position: relative; z-index: 1; white-space: normal; }
@media (min-width: 860px) { .cta-inner { grid-template-columns: 1fr auto; align-items: center; padding: 52px 56px; } }

/* FAQ */
.faq-grid { display: grid; gap: 8px; }
@media (min-width: 960px) { .faq-grid { grid-template-columns: .8fr 1.4fr; gap: 56px; align-items: start; } .faq-grid .section-head { position: sticky; top: calc(var(--header-h) + 24px); } }
.faq-list { display: grid; gap: 10px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: box-shadow var(--t) var(--ease); }
.faq-item[open] { box-shadow: var(--shadow-md); }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; padding: 16px 20px; cursor: pointer; font-weight: 620; list-style: none; -webkit-tap-highlight-color: transparent; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); transition: transform var(--t) var(--ease), background-color var(--t) var(--ease); }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--text); transition: transform var(--t) var(--ease); }
.faq-icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-icon { background: var(--accent); }
.faq-item[open] .faq-icon::before, .faq-item[open] .faq-icon::after { background: var(--accent-contrast); }
.faq-item[open] .faq-icon::after { transform: rotate(0deg); }
.faq-a { padding: 0 20px 20px; color: var(--text-2); }
.faq-item[open] .faq-a { animation: faq-in var(--t) var(--ease-out); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Contact */
.contact-grid { display: grid; gap: 36px; }
.contact-list { display: grid; gap: 18px; margin-top: 28px; }
.contact-list li { display: flex; gap: 14px; }
.contact-list .icn { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--indigo) 10%, transparent); color: var(--indigo); }
.contact-list .icn svg { width: 22px; height: 22px; }
.contact-list strong { display: block; font-size: .8125rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 2px; }
.contact-list a { font-weight: 600; }
.contact-list li > span:last-child { min-width: 0; overflow-wrap: anywhere; } /* a long e-mail wraps at 320 px instead of widening the page */
.map-card { position: relative; display: grid; gap: 14px; margin-top: 28px; padding: 22px; border-radius: var(--radius-lg); overflow: hidden; color: var(--text); text-decoration: none !important; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.map-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.map-card:active { transform: scale(.985); }
.map-grid { position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(circle at 75% 30%, #000, transparent 70%); -webkit-mask-image: radial-gradient(circle at 75% 30%, #000, transparent 70%); }
.map-pin { position: relative; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--surface); box-shadow: var(--shadow-md); }
.map-pin svg { width: 36px; height: 36px; }
.map-text { position: relative; display: grid; gap: 2px; }
.map-text span { color: var(--text-2); font-size: .9375rem; }
.map-card .btn { position: relative; justify-self: start; }
.contact-form { padding: 26px 22px; }
.form-title { font-size: 1.4rem; letter-spacing: -.02em; }
.privacy-hint { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 18px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--sky) 10%, var(--surface)); color: var(--text-2); font-size: .875rem; line-height: 1.5; }
.privacy-hint svg { width: 20px; height: 20px; flex: none; color: var(--sky); margin-top: 1px; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 1fr 1.1fr; gap: 64px; } .contact-form { padding: 34px 32px; } }

/* Form fields (markup generated by cms/src/Publisher.php) */
#contactForm { display: grid; gap: 16px; }
.form-row { display: grid; gap: 16px; }
@media (min-width: 560px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; min-width: 0; }
.field > label, .field legend { font-weight: 600; font-size: .9375rem; }
.field fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.field-opt { font-weight: 400; color: var(--muted); }
.field-help { color: var(--muted); font-size: .8125rem; }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-strong);
  background: var(--surface); font-size: 1rem; /* ≥16px: no zoom on iOS */
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  -webkit-appearance: none; appearance: none;
}
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 22%, transparent); }
.field .err { display: none; align-items: center; gap: 6px; color: var(--emergency); font-size: .8125rem; font-weight: 550; }
.field .err-icon { width: 14px; height: 14px; flex: none; }
.field.invalid .err { display: flex; }
.field.invalid input:not([type="checkbox"]):not([type="radio"]), .field.invalid select, .field.invalid textarea { border-color: var(--emergency); }
.choices { display: grid; gap: 4px; }
.choice { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 0; cursor: pointer; font-weight: 450; font-size: .9375rem; color: var(--text-2); }
.choice input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: var(--indigo); }
.consent-field .choice { line-height: 1.45; }
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-summary { padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--emergency) 10%, var(--surface)); color: var(--emergency); font-weight: 600; font-size: .9375rem; }
.form-summary:focus { outline: 2px solid var(--emergency); }
.form-captcha { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .8125rem; }
.form-captcha-icon { width: 16px; height: 16px; }
.form-captcha[data-state="ok"] { color: var(--ok); }
.form-captcha[data-state="error"] { color: var(--emergency); }
.form-note, .form-fallback { color: var(--muted); font-size: .8125rem; line-height: 1.5; }
.form-status { display: none; padding: 12px 14px; border-radius: 14px; font-weight: 600; font-size: .9375rem; background: var(--surface-2); }
.form-status.show { display: block; }
.form-status.ok { background: color-mix(in srgb, var(--ok) 14%, var(--surface)); color: var(--ok); }
.form-status.error { background: color-mix(in srgb, var(--emergency) 10%, var(--surface)); color: var(--emergency); }
.form-turnstile:empty { display: none; }
button[type="submit"]:disabled { opacity: .6; cursor: progress; }

/* ---------- Footer ---------- */
.site-footer { background: var(--footer-bg); color: var(--text-2); border-top: 1px solid var(--line); padding: 64px 0 calc(110px + env(safe-area-inset-bottom)); margin-top: 72px; }
.site-footer a { color: var(--text); }
.footer-grid { display: grid; gap: 36px; }
.footer-brand p { margin-top: 14px; max-width: 36ch; font-size: .9375rem; }
.brand-light .brand-name { color: #fff; }
.brand-light .brand-kicker { color: rgba(255, 255, 255, .6); }
.footer-h { font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 14px; font-weight: 650; }
.site-footer ul { display: grid; gap: 8px; font-size: .9375rem; }
.site-footer ul a { display: inline-block; padding: 4px 0; }
.social { display: flex; gap: 8px; margin-top: 18px; }
.social a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); transition: background-color var(--t) var(--ease); }
.social a:hover { background: var(--tile-bg); }
.social svg { width: 22px; height: 22px; }
.footer-bottom { display: grid; gap: 8px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--muted); }
.footer-bottom a { color: var(--text-2); }
@media (min-width: 420px) and (max-width: 759px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand, .footer-grid > :last-child { grid-column: 1 / -1; } }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } .footer-bottom { grid-template-columns: 1fr auto; } }
@media (min-width: 900px) { .site-footer { padding-bottom: 48px; margin-top: 112px; } }

/* ---------- Floating actions ---------- */
/* Phones: one translucent action bar (call, WhatsApp, directions) in thumb reach. */
.action-bar {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 6px; border-radius: 22px;
  background: var(--glass-strong); border: 1px solid var(--glass-edge); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: var(--shadow-lg);
}
.action-bar a { display: grid; justify-items: center; gap: 2px; min-height: 52px; padding: 7px 4px; border-radius: 16px; font-size: .75rem; font-weight: 650; color: var(--text); text-decoration: none; transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); -webkit-tap-highlight-color: transparent; }
.action-bar a:active { transform: scale(.94); background: var(--surface-2); }
.action-bar svg { width: 22px; height: 22px; }
.action-bar .ab-call { background: var(--emergency); color: #fff; }
.action-bar .ab-wa svg { color: #1faa59; }
.wa-fab { display: none; }
.back-to-top { position: fixed; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 39; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--glass-edge); display: grid; place-items: center; color: var(--text); background: var(--glass-strong); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow-md); opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
.back-to-top svg { width: 20px; height: 20px; }
.back-to-top.show { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 900px) {
  .action-bar { display: none; }
  .wa-fab { display: grid; place-items: center; position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 60px; height: 60px; border-radius: 50%; background: #1faa59; color: #fff; box-shadow: 0 14px 30px -10px rgba(31, 170, 89, .7); transition: transform var(--t) var(--ease); }
  .wa-fab svg { width: 32px; height: 32px; }
  .wa-fab:hover { transform: scale(1.06); }
  .wa-fab:active { transform: scale(.94); }
  .back-to-top { right: 32px; bottom: 100px; }
}

/* ---------- Reveal on scroll (only when JS is running and motion is welcome) ---------- */
.js-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.js-reveal .reveal.in { opacity: 1; transform: none; }
.js-reveal .reveal.i2 { transition-delay: 60ms; }
.js-reveal .reveal.i3 { transition-delay: 120ms; }
.js-reveal .reveal.i4 { transition-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .sheet, .sheet::backdrop, .back-to-top { transition: opacity 180ms ease !important; transform: none !important; }
  .service-card:hover, .area-card:hover, .map-card:hover { transform: none; }
}

/* ==========================================================================
   Real photography, quick facts and the hospital's own features (v8)
   ========================================================================== */

/* Hero: a bento of the clinic's ultrasounds. One tall photo and two squares
   stacked beside it, same gap and radius, no frames. The tiles are dark, like the
   ultrasound renders themselves, so any black in a photo reads as part of it. */
.hero-art { position: relative; display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: auto auto; gap: 12px; margin: 0; }
.hero-photo { position: relative; margin: 0; border-radius: 22px; overflow: hidden; background: #0b0508; aspect-ratio: 1; isolation: isolate;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 0 0 1px rgba(42, 10, 30, .06), 0 24px 48px -24px rgba(120, 10, 70, .35); }
.hero-photo.p1 { grid-row: 1 / span 2; aspect-ratio: auto; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-photo.p1 img { object-position: 35% 40%; }
.hero-wing { display: none; }
@media (min-width: 900px) {
  .hero-art { gap: 16px; max-width: 560px; margin-left: auto; width: 100%; }
  .hero-photo { border-radius: 28px; }
  .hero-photo.p1 { border-radius: 32px; }
}
/* Entrance: each print settles into place, once (Ken Burns on the main photo). */
.js-motion .hero-photo { animation: print-in 900ms var(--ease-out) both; }
.js-motion .hero-photo.p2 { animation-delay: 140ms; }
.js-motion .hero-photo.p3 { animation-delay: 260ms; }
.js-motion .hero-photo.p1 img { animation: kenburns 2.4s var(--ease-out) both; }
@keyframes print-in { from { opacity: 0; transform: translateY(28px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes wing-in { from { opacity: 0; transform: translate(-16px, 12px) rotate(-8deg) scale(.9); } to { opacity: 1; transform: none; } }
[data-parallax] { will-change: transform; }

/* Quick facts: the four things people come for, one tap each. */
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 32px; }
.quick-tile a { height: 100%; display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--radius); color: var(--text); text-decoration: none !important;
  background: var(--glass-strong); border: 1px solid var(--glass-edge); backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%); box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); -webkit-tap-highlight-color: transparent; }
.quick-tile a:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.quick-tile a:active { transform: scale(.97); transition-duration: 80ms; }
.quick-icon { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; color: var(--tile-fg); background: var(--tile-bg); }
.quick-icon svg { width: 22px; height: 22px; }
.q-emergency .quick-icon { color: var(--emergency); background: var(--tile-red-bg); }
.q-wa .quick-icon { color: var(--ok); background: var(--tile-green-bg); }
.quick-text { display: grid; gap: 2px; min-width: 0; }
.quick-label { font-size: .75rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.quick-value { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; overflow-wrap: anywhere; }
.q-emergency .quick-value { color: var(--emergency); font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.q-wa .quick-value { font-variant-numeric: tabular-nums; }
.q-visits .quick-value, .q-map .quick-value { font-size: .975rem; }
.quick-status { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .8125rem; font-weight: 600; color: var(--text-2); }
.quick-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.quick-status[data-state="open"] { color: var(--ok); }
.quick-status[data-state="open"] .dot { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
@media (max-width: 420px) { .quick-tile a { flex-direction: column; gap: 10px; padding: 14px; } }
@media (min-width: 960px) { .quick { grid-template-columns: 1.1fr 1fr 1.1fr 1.2fr; gap: 14px; margin-top: 52px; } .quick-tile a { padding: 18px 20px; } }

/* Services with the hospital's photos */
.service-media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-2); }
.service-photo { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.service-art { display: grid; place-items: center; background: var(--grad-soft); }
.service-art img { width: auto; height: 46%; opacity: .9; }
.service-card:hover .service-photo { transform: scale(1.05); }
.service-card.has-photo .service-icon { margin-top: -50px; border: 4px solid var(--surface); width: 60px; height: 60px; border-radius: 18px; }
.service-open { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-weight: 600; color: var(--text); transition: background-color var(--t) var(--ease), transform var(--t-fast) var(--ease), border-color var(--t) var(--ease); }
.service-open svg { width: 18px; height: 18px; transition: transform var(--t) var(--ease); }
.service-open:hover { border-color: var(--accent); }
.service-open:hover svg { transform: translateX(3px); }
.service-open:active { transform: scale(.96); }
/* LaFam: four equal cards, no featured first card. */


/* Service details sheet: bottom sheet on phones, centred card on larger screens. */
.sheet-service { position: fixed; inset: auto 0 0 0; width: 100%; max-height: 92vh; border-radius: 28px 28px 0 0; background: var(--surface); transform: translateY(100%); padding-bottom: env(safe-area-inset-bottom); }
.sheet-service.is-open { transform: none; }
.service-hero { aspect-ratio: 16 / 9; overflow: hidden; background: var(--grad-brand); }
.service-hero:empty { aspect-ratio: auto; height: 12px; background: none; }
.service-hero img { width: 100%; height: 100%; object-fit: cover; }
.sheet-service.is-open .service-hero img { animation: kenburns 1.6s var(--ease-out) both; }
.sheet-close { position: absolute; top: 12px; right: 12px; color: #fff; background: rgba(0, 0, 0, .38); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.sheet-close:hover { background: rgba(0, 0, 0, .55); }
.service-sheet-body { padding: 0 24px 28px; display: grid; gap: 12px; }
.service-sheet-body .service-icon { margin-top: -30px; border: 4px solid var(--surface); }
.service-icon.is-emergency { color: var(--emergency); background: var(--tile-red-bg); }
.service-sheet-body h2 { font-size: clamp(1.6rem, 4vw, 2.1rem); }
.service-text { display: grid; gap: 12px; color: var(--text-2); }
.service-text p { white-space: pre-line; }
.service-sheet-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.service-sheet-actions .btn-primary svg { color: #fff; }
@media (min-width: 760px) {
  .sheet-service { inset: 0; margin: auto; width: min(640px, 92vw); height: fit-content; max-height: 90vh; border-radius: 28px; transform: scale(.94) translateY(16px); }
  .sheet-service.is-open { transform: none; }
  .service-sheet-body { padding: 0 32px 32px; }
}

/* Maternity photo */
.maternity-side { display: grid; gap: 20px; align-content: start; }
.maternity-photo { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; }
.maternity-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (min-width: 1000px) { .maternity-photo { aspect-ratio: 4 / 4.2; } .bag { position: static; } }

/* About: what sets us apart */
.why { margin-top: 28px; }
.why-title { font-size: 1rem; color: var(--text-2); font-weight: 650; margin-bottom: 12px; }
.why-list { display: flex; flex-wrap: wrap; gap: 8px; }
.why-list li { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-weight: 600; font-size: .9375rem; }
.why-list svg { width: 18px; height: 18px; color: var(--sky); }
.about-art.has-photo .about-photo { transition: transform 900ms var(--ease-out); }
.about-art.has-photo:hover .about-photo { transform: scale(1.03); }
.about-illus img { width: 40%; height: auto; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .25)); }

/* Facilities: amenities */
.amenities { margin-top: 64px; }
.amenities-title { font-size: clamp(1.3rem, 2vw + .6rem, 1.75rem); letter-spacing: -.02em; margin-bottom: 24px; }
.amenities-grid { display: grid; gap: 10px; }
.amenity { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.amenity:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.amenity-icon { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; color: var(--royal); background: color-mix(in srgb, var(--sky-bright) 14%, var(--surface)); }
.amenity-icon svg { width: 24px; height: 24px; }
.amenity strong { display: block; font-size: 1rem; letter-spacing: -.01em; margin-bottom: 2px; }
.amenity span span { color: var(--text-2); font-size: .9375rem; line-height: 1.45; }
@media (min-width: 620px) { .amenities-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .amenities-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 1180px) { .amenities-grid { grid-template-columns: repeat(4, 1fr); } }
.area-card.has-photo .area-photo { transition: transform 700ms var(--ease-out); }
.area-card.has-photo:hover .area-photo { transform: scale(1.05); }
.area-card { isolation: isolate; }
.area-card > img, .area-card > .area-art { overflow: hidden; }

/* Insurers: logos on white tiles (logos need a light backdrop in both themes). */
.ins-desc { color: var(--text-2); font-size: .9375rem; margin-top: -6px; }
.chips.has-logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.chips.has-logos li { display: grid; place-items: center; min-height: 76px; padding: 12px 16px; border-radius: 16px; background: #fff; border: 1px solid rgba(21, 23, 46, .08); box-shadow: var(--shadow-sm); font-weight: 600; color: #15172e; text-align: center; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.chips.has-logos li:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ins-logo img { max-height: 46px; width: auto; max-width: 100%; object-fit: contain; }
@media (min-width: 560px) { .chips.has-logos { grid-template-columns: repeat(3, 1fr); } }

/* Contact: map on request, Waze, save contact */
.map-box { position: relative; margin-top: 28px; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; }
.map-placeholder { position: absolute; inset: 0; display: grid; align-content: center; justify-items: start; gap: 12px; padding: 24px; }
.map-pin { width: 64px; height: 64px; }
.map-pin img { width: 40px; height: auto; }
.map-note { position: relative; color: var(--muted); }
.map-box .btn { position: relative; }
.map-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity var(--t-slow) var(--ease-out); }
.map-box.is-loaded iframe { opacity: 1; }
.map-box.is-loaded .map-placeholder { visibility: hidden; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.contact-actions svg { color: var(--indigo); }
@media (min-width: 560px) { .map-box { aspect-ratio: 16 / 10; } }

/* Scroll-linked image reveal: photos unveil with a soft clip as they enter. */
.js-reveal .reveal .service-media, .js-reveal .area-card.reveal > img { clip-path: inset(8% 8% 8% 8% round 18px); transition: clip-path 900ms var(--ease-out); }
.js-reveal .reveal.in .service-media, .js-reveal .area-card.reveal.in > img { clip-path: inset(0 0 0 0 round 0); }

@media (prefers-reduced-motion: reduce) {
  .js-motion .hero-photo, .js-motion .hero-photo.p1 img, .js-motion .hero-wing, .sheet-service.is-open .service-hero img { animation: none !important; }
  .service-card:hover .service-photo, .area-card.has-photo:hover .area-photo, .about-art.has-photo:hover .about-photo, .quick-tile a:hover, .amenity:hover, .chips.has-logos li:hover { transform: none; }
  [data-parallax] { transform: none !important; }
}
html.a11y-motion [data-parallax] { transform: none !important; }
html.a11y-contrast .quick-tile a, html.a11y-contrast .amenity, html.a11y-contrast .why-list li { border: 2px solid var(--line); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ---------- Motion polish (v11): materialize, settle, press ----------
   Content materializes (opacity + a little blur + rise) instead of only fading;
   photos settle from a slight zoom as their frame opens; cards answer the press
   at once. Everything here is skipped with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .reveal { filter: blur(6px); transform: translateY(22px) scale(.985); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out), filter 700ms var(--ease-out); }
  .js-reveal .reveal.in { filter: none; transform: none; }
  .js-reveal .reveal.i2 { transition-delay: 80ms; }
  .js-reveal .reveal.i3 { transition-delay: 160ms; }
  .js-reveal .reveal.i4 { transition-delay: 240ms; }
  .js-reveal .reveal .service-photo, .js-reveal .area-card.reveal > .area-photo { scale: 1.08; transition: scale 1.4s var(--ease-out), transform 700ms var(--ease-out), opacity 500ms var(--ease-out); }
  .js-reveal .reveal.in .service-photo, .js-reveal .area-card.reveal.in > .area-photo { scale: 1; }
  .service-card:active, .area-card:active, .amenity:active, .map-card:active { transform: scale(.985); transition-duration: 90ms; }
  .service-photo, .area-photo, .about-photo, .maternity-img, .hero-photo img { transition-property: transform, scale, opacity; }
  img.is-loading { opacity: 0; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: var(--ease); }
}
.service-photo, .area-photo, .about-photo, .maternity-img, .hero-photo img { opacity: 1; }
.area-card > .area-photo { background: var(--surface-2); }
html.a11y-motion .js-reveal .reveal, html.a11y-motion img.is-loading { filter: none; opacity: 1; }

/* ---------- Secondary pages (privacy notice, 404) ---------- */
.doc-page { background: var(--bg); }
.doc-header { position: sticky; top: 0; z-index: 10; background: var(--glass); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-bottom: 1px solid var(--line); }
.doc-header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 12px; }
.doc { max-width: 760px; padding-top: 48px; padding-bottom: 72px; }
.doc h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 8px; }
.doc h2 { font-size: 1.3rem; letter-spacing: -.015em; margin: 36px 0 10px; }
.doc p { color: var(--text-2); margin-bottom: 12px; }
.doc .lead { margin-bottom: 8px; }
.doc-center { text-align: center; display: grid; justify-items: center; gap: 10px; min-height: 100vh; align-content: center; }
.doc-center .lead { margin-inline: auto; }
.doc-footer { border-top: 1px solid var(--line); padding: 24px 0 40px; color: var(--muted); font-size: .875rem; }

@media print {
  .site-header, .action-bar, .wa-fab, .back-to-top, .hero-bg, .contact-form, .sheet { display: none !important; }
  body { background: #fff; color: #000; }
  .js-reveal .reveal { opacity: 1; transform: none; }
}

/* Links inside running text are underlined, so they never rely on color alone (WCAG 1.4.1). */
p a:not(.btn):not([class*="pill"]), .form-note a, .form-fallback a, .doc li a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.footer-bottom a, .social a { text-decoration: none; }
@media not all {
  :root:not([data-theme="light"]) .nav-desktop a[aria-current] { color: #fff; }
  :root:not([data-theme="light"]) .pill-emergency, :root:not([data-theme="light"]) .btn-emergency, :root:not([data-theme="light"]) .action-bar .ab-call { background: #a30d68; }
  :root:not([data-theme="light"]) .pill-emergency:hover, :root:not([data-theme="light"]) .btn-emergency:hover { background: #8c0b59; }
}

/* ==========================================================================
   Clínica LaFam blocks
   ========================================================================== */
/* Hero without photos: the clinic's own logo on a soft, lifted card. */
.hero-art-brand { display: grid; place-items: center; grid-template-columns: 1fr; }
.hero-brand-card { position: relative; width: min(100%, 420px); aspect-ratio: 1; border-radius: 36px; display: grid; place-items: center; background: var(--surface); box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.hero-brand-card::before { content: ""; position: absolute; inset: -14px; z-index: -1; border-radius: 46px; background: var(--grad-wing); opacity: .16; filter: blur(18px); }
.hero-brand-card img { width: 64%; height: auto; }
@media (max-width: 899px) { .hero-brand-card { width: min(72%, 320px); border-radius: 28px; } }
@media (min-width: 900px) { .hero-art.hero-art-brand { height: auto; display: grid; } }
.js-motion .hero-brand-card { animation: brand-in 900ms 120ms var(--ease-out) both; }
@keyframes brand-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* Service cards and brand panels without a photo: white heart on magenta. */
.service-art { background: var(--grad-brand); }
.service-art img { height: 52%; opacity: .95; }
.maternity-art { width: 100%; min-width: 0; border-radius: var(--radius-lg); aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--grad-brand); box-shadow: var(--shadow-lg); }
.maternity-art img { width: 34%; height: auto; max-width: 220px; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .2)); }
@media (min-width: 1000px) { .maternity-art { aspect-ratio: 4 / 4.2; } }

/* Ultrasound prices */
.price-card { padding: 22px 24px; margin-top: 28px; }
.price-head { font-size: 1.05rem; margin: 0 0 6px; }
.price-list { margin: 0; }
.price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.price-row:last-child { border-bottom: 0; padding-bottom: 0; }
.price-row dt { color: var(--text-2); min-width: 0; }
.price-row dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); white-space: nowrap; letter-spacing: -.01em; }

/* Ways to book: large, tappable rows (44 px+). */
.book-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.book-item { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--text); text-decoration: none; transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease); }
.book-item:hover { box-shadow: var(--shadow-md); }
.book-item:active { transform: scale(.98); }
.book-item > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.book-item strong { font-weight: 600; }
.book-item > span:nth-child(2) > span { color: var(--muted); font-size: .92rem; }
.book-icon { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--tile-bg); color: var(--tile-fg); }
.book-icon svg { width: 22px; height: 22px; }
.book-wa .book-icon { background: #e3f6ea; color: #138a45; }
.book-fb .book-icon { background: #e8effc; color: #1b5fc9; }
.book-chev { flex: none; width: 18px; height: 18px; color: var(--muted); }
.btn-call svg { color: var(--accent); }
.area-art img { width: auto; height: 46%; filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .18)); }
/* Four services: two by two on tablets and up. */
@media (min-width: 620px) { .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .service-card:first-child { grid-column: auto; } }
.service-media.service-art img, .area-art img { width: auto; height: 46%; max-height: 150px; object-fit: contain; aspect-ratio: auto; }

/* LaFam minimal layout: no form until the clinic has an email; contact info centred alone. */
.contact-solo { grid-template-columns: minmax(0, 720px) !important; justify-content: center; }
.contact-solo .contact-form-wrap { display: none; }
@media (min-width: 960px) { .quick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .maternity-grid { grid-template-columns: 1fr 1fr; align-items: center; } }
@media (max-width: 959px) { .quick .q-map { grid-column: 1 / -1; } }
@media (max-width: 619px) { .hero-brand-card { max-width: 220px; margin-inline: auto; } }
@media (min-width: 620px) { .areas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .areas-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ======================== Ultrasound gallery & clips ========================
   Masonry columns keep every ultrasound whole (no cropping). Tiles are never
   wider than the photos themselves (WhatsApp exports, ~400-900 px), so they
   stay sharp on phones and retina screens. */
/* Gallery: an even grid of same-shape tiles (4:5) with a large 2x2 "feature" tile
   every 13 tiles, so rows line up at every width (36 photos + 3 clips fill the grid
   exactly with 2, 3 or 4 columns). Photos fill their tile (object-fit: cover); the
   whole photo opens in the viewer. Frames match the hero collage: white border,
   soft shadow, generous radius. Collapsed: 3 rows (feature + the next tiles). */
.gal-grid { --gap: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: var(--gap); margin-top: 8px; }
@media (min-width: 720px) { .gal-grid { --gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .gal-grid { --gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gal-item { display: block; aspect-ratio: 4 / 5; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 20px; overflow: hidden; background: #0b0508; position: relative; isolation: isolate; box-shadow: 0 0 0 1px rgba(42, 10, 30, .06), 0 10px 30px -18px rgba(120, 10, 70, .35); transition: transform 240ms var(--ease-out, cubic-bezier(.2, .8, .2, 1)), box-shadow 240ms ease; -webkit-tap-highlight-color: transparent; }
.gal-feature { grid-column: span 2; aspect-ratio: 1 / 1; }
@media (min-width: 720px) { .gal-feature { grid-row: span 2; aspect-ratio: auto; } .gal-feature-r { grid-column: 2 / span 2; } }
@media (min-width: 1100px) { .gal-feature-r { grid-column: 3 / span 2; } }
@media (min-width: 720px) { .gal-feature { border-radius: 28px; } }
.gal-item img, .gal-item video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.gal-photo, .gal-anim { cursor: zoom-in; }
.gal-item img { transition: transform 600ms var(--ease-out, cubic-bezier(.2, .8, .2, 1)); }
@media (hover: hover) { .gal-item:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(42, 10, 30, .08), 0 18px 40px -18px rgba(120, 10, 70, .45); } .gal-item:hover img { transform: scale(1.03); } }
.gal-item:active { transform: scale(.985); transition-duration: 100ms; }
.gal-item:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.gal-chip { position: absolute; left: 10px; bottom: 10px; padding: 5px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; letter-spacing: .01em; color: #fff; background: rgba(20, 8, 16, .55); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); pointer-events: none; }
@media (prefers-reduced-transparency: reduce) { .gal-chip { background: rgba(20, 8, 16, .9); -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* Collapsed: phones feature + 4 tiles; tablets feature + 5; computers feature + 8. */
.gal-grid:not(.is-open):not(.is-filtered) > :nth-child(n+6) { display: none; }
@media (min-width: 720px) { .gal-grid:not(.is-open):not(.is-filtered) > :nth-child(n+6) { display: block; } .gal-grid:not(.is-open):not(.is-filtered) > :nth-child(n+7) { display: none; } }
@media (min-width: 1100px) { .gal-grid:not(.is-open):not(.is-filtered) > :nth-child(n+7) { display: block; } .gal-grid:not(.is-open):not(.is-filtered) > :nth-child(n+10) { display: none; } }
.gal-actions { justify-content: center; margin-top: 32px; }
.gal-more[hidden] { display: none; }
.gal-grid.is-open + .gal-actions .gal-more svg { transform: rotate(-90deg); }
.gal-more svg { transform: rotate(90deg); transition: transform 200ms ease; }

/* Viewer: show each ultrasound whole on black, at most its own size. */
.sheet-gallery .gallery-media, .sheet-gallery .gallery-slides { background: #0b0508; }
.sheet-gallery .gallery-slide { height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sheet-gallery .gallery-slide img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
/* Phones: the viewer is a full-screen black stage; the caption stays small. */
@media (max-width: 899px) {
  .sheet-gallery { background: #0b0508; }
  .sheet-gallery .gallery-media { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .sheet-gallery .gallery-slides { flex: 1; min-height: 0; aspect-ratio: auto; }
  .sheet-gallery .gallery-body { padding: 14px 20px calc(18px + env(safe-area-inset-bottom)); background: #0b0508; }
  .sheet-gallery .gallery-body h3 { color: #fff; font-size: 1.1rem; }
  .sheet-gallery .gallery-body .tag { justify-self: start; }
}
.sheet-gallery #galleryDesc:empty { display: none; }
.sheet-gallery .gallery-body .tag { justify-self: start; }
@media (min-width: 900px) { .sheet-gallery.is-open { height: fit-content; } .sheet-gallery .gallery-body { padding-bottom: 22px; } }

/* Ultrasound gallery viewer: a dark stage on every screen, the photo as large as
   it stays sharp, and its description plus its place (4 / 33) as the caption. */
.sheet-gallery.is-ultra { background: #0b0508; }
.sheet-gallery.is-ultra .gallery-body { background: #0b0508; color: #fff; border-top: 1px solid rgba(255, 255, 255, .08); }
.sheet-gallery.is-ultra .gallery-body h3 { color: #fff; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
.sheet-gallery.is-ultra .gallery-body .tag { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .85); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .sheet-gallery.is-ultra { width: min(880px, 92vw); }
  .sheet-gallery.is-ultra .gallery-slides { aspect-ratio: auto; height: min(74vh, 720px); }
  .sheet-gallery.is-ultra .gallery-slide img { padding: 12px; }
  .sheet-gallery.is-ultra .gallery-body { padding: 16px 24px 20px; }
}

/* ======================== Gallery filters (Todas / 4D / 5D) ======================== */
.gal-filter { display: inline-flex; gap: 4px; padding: 5px; margin: 4px 0 22px; border-radius: 999px; background: var(--surface, #fff); box-shadow: var(--shadow-sm, 0 1px 2px rgba(42, 20, 36, .08)); }
.gal-tab { appearance: none; border: 0; margin: 0; background: transparent; font: inherit; font-weight: 600; font-size: .95rem; letter-spacing: -.005em; color: var(--text-2); min-height: 44px; padding: 0 18px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: background-color 200ms ease, color 200ms ease, transform 100ms ease-out; -webkit-tap-highlight-color: transparent; }
.gal-tab:hover { color: var(--text); }
.gal-tab:active { transform: scale(.96); }
.gal-tab[aria-pressed="true"] { background: var(--accent); color: var(--accent-contrast, #fff); }
.gal-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.gal-count { min-width: 1.6em; padding: 1px 7px; border-radius: 999px; font-size: .75rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.gal-tab[aria-pressed="true"] .gal-count { background: rgba(255, 255, 255, .22); color: inherit; }
/* A type shows every tile of it, same shape, centred: an incomplete last row sits in the middle. */
.gal-grid.is-filtered { display: flex; flex-wrap: wrap; justify-content: center; }
.gal-grid.is-filtered > * { flex: 0 0 calc((100% - var(--gap)) / 2); }
@media (min-width: 720px) { .gal-grid.is-filtered > * { flex-basis: calc((100% - 2 * var(--gap)) / 3); } }
@media (min-width: 1100px) { .gal-grid.is-filtered > * { flex-basis: calc((100% - 3 * var(--gap)) / 4); } }
.gal-grid.is-filtered > .is-out { display: none; }
.gal-grid.is-filtered .gal-feature { aspect-ratio: 4 / 5; border-radius: inherit; }
@media (min-width: 720px) { .gal-grid.is-filtered .gal-feature { border-radius: 20px; } }
.js-motion .gal-grid.is-filtered > :not(.is-out) { animation: gal-in 360ms var(--ease-out, cubic-bezier(.2, .8, .2, 1)) both; }
@keyframes gal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.gal-video { cursor: zoom-in; }
/* Clips behave like moving photos: the video never takes the pointer, so the
   browser never draws its own play/next control over the tile. */
.gal-item video, .hero-photo video { pointer-events: none; }
.gal-item video::-webkit-media-controls, .gal-item video::-webkit-media-controls-panel,
.gal-item video::-webkit-media-controls-start-playback-button, .gal-item video::-webkit-media-controls-overlay-play-button,
.uv-media::-webkit-media-controls, .uv-media::-webkit-media-controls-panel,
.uv-media::-webkit-media-controls-start-playback-button, .uv-media::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }
.gal-video:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ======================== Gallery viewer ========================
   A floating card over the dimmed, blurred page: a dark stage for the picture
   (ultrasounds are rendered on black) and a light caption bar below. Never a
   full-screen black screen; the page stays visible around it. */
.uv { position: fixed; inset: 0; margin: auto; padding: 0; border: 0; overflow: hidden; color: var(--text);
  width: min(880px, calc(100vw - 48px)); height: min(820px, calc(100dvh - 64px));
  max-width: none; max-height: none; border-radius: 28px; background: var(--surface, #fff);
  box-shadow: 0 30px 80px -20px rgba(42, 10, 30, .45), 0 0 0 1px rgba(255, 255, 255, .5); }
.uv::backdrop { background: rgba(38, 14, 30, .5); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
@media (prefers-reduced-transparency: reduce) { .uv::backdrop { background: rgba(38, 14, 30, .82); -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* Phones: the card hugs the picture (ultrasounds are about 4:5) instead of the whole screen. */
@media (max-width: 719px) { .uv { width: calc(100vw - 24px); height: min(calc(100dvh - 40px), calc((100vw - 40px) * 1.25 + 16px)); border-radius: 24px; } }
.uv:focus { outline: none; }
.uv-track { position: absolute; inset: 8px; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-x pinch-zoom; outline: none; border-radius: 21px; background: #0b0508; }
@media (max-width: 719px) { .uv-track { border-radius: 18px; } }
.uv-track::-webkit-scrollbar { display: none; }
.uv-slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; display: grid; place-items: center; padding: 8px; position: relative; }
@media (min-width: 900px) { .uv-slide { padding: 20px 76px; } }
.uv-media { width: 100%; height: 100%; max-width: var(--mw, 100%); max-height: var(--mh, 100%); object-fit: contain; border-radius: 12px; display: block; will-change: transform; user-select: none; -webkit-user-drag: none; }
.uv-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 68px; height: 68px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; }
.uv-play::before { content: ""; position: absolute; left: 27px; top: 22px; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff; }
.uv-play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.uv-nav, .uv-close { position: absolute; z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); cursor: pointer; transition: background-color 200ms ease, opacity 200ms ease, transform 100ms ease-out; }
.uv-nav:hover, .uv-close:hover { background: rgba(255, 255, 255, .22); }
.uv-nav:active, .uv-close:active { transform: scale(.92); }
.uv-nav:focus-visible, .uv-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.uv-nav svg, .uv-close svg { width: 22px; height: 22px; }
.uv-nav { top: 50%; translate: 0 -50%; }
.uv-nav.prev { left: 22px; } .uv-nav.prev svg { transform: scaleX(-1); }
.uv-nav.next { right: 22px; }
.uv-nav:disabled { opacity: 0; pointer-events: none; }
@media (max-width: 899px), (hover: none) { .uv-nav { display: none; } }
.uv-close { top: 18px; right: 18px; width: 40px; height: 40px; }
.uv-close svg { width: 18px; height: 18px; }
.uv-caption { position: absolute; left: 20px; top: 20px; z-index: 2; pointer-events: none; }
.uv-count { display: inline-block; padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.uv-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.uv.is-open { animation: none; }

/* Phones: the three filters share the width evenly on one line; counts drop below 480 px. */
@media (max-width: 599px) {
  .gal-filter { display: grid; grid-template-columns: auto 1fr 1fr; width: 100%; }
  .gal-tab { padding: 0 12px; font-size: .875rem; white-space: nowrap; justify-content: center; }
}
@media (max-width: 479px) { .gal-tab .gal-count { display: none; } }

/* Hero: give the bento room beside the headline. */
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 56px; } }
@media (hover: hover) { .hero-photo img { transition: transform 600ms var(--ease-out, cubic-bezier(.2, .8, .2, 1)); } .hero-photo:hover img { transform: scale(1.03); } }

/* First-screen fact: the 4D and 5D prices, quiet, under the buttons. */
.hero-prices { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 20px 0 0; padding: 0; }
.hero-prices a { display: inline-flex; align-items: baseline; gap: 8px; min-height: 40px; align-items: center; padding: 0 14px; border-radius: 999px; font-size: .9rem; color: var(--text-2); text-decoration: none; background: color-mix(in srgb, var(--surface, #fff) 70%, transparent); box-shadow: 0 0 0 1px rgba(42, 10, 30, .08); transition: background-color 200ms ease, transform 100ms ease-out; }
.hero-prices a:hover { background: var(--surface, #fff); }
.hero-prices a:active { transform: scale(.97); }
.hero-prices strong { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 559px) { .hero-prices { gap: 6px; } .hero-prices a { font-size: .78rem; padding: 0 11px; gap: 6px; white-space: nowrap; } }
@media (max-width: 399px) { .gal-tab { padding: 0 8px; font-size: .8rem; } .gal-filter { gap: 2px; padding: 4px; } }
@media (max-width: 359px) { .hero-ctas .btn { font-size: .95rem; padding-inline: 16px; white-space: normal; } }

/* ---------- Launch polish (v22): first screen and scroll ----------
   The first screen writes itself in, line by line; lists settle one item after
   another as they arrive; gallery tiles rise into place as they scroll in
   (scroll-driven, no script, only where the browser supports it). Everything
   here is off with "less motion" (system or the site's own switch). */
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.js-motion .hero-copy > * { animation: rise-in 760ms var(--ease-out) both; }
.js-motion .hero-copy > :nth-child(2) { animation-delay: 70ms; }
.js-motion .hero-copy > :nth-child(3) { animation-delay: 140ms; }
.js-motion .hero-copy > :nth-child(4) { animation-delay: 210ms; }
.js-motion .hero-copy > :nth-child(5) { animation-delay: 280ms; }
.js-reveal .reveal .price-row, .js-reveal .faq-list.reveal > .faq-item { opacity: 0; transform: translateY(10px); transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); }
.js-reveal .reveal.in .price-row, .js-reveal .faq-list.reveal.in > .faq-item { opacity: 1; transform: none; }
.js-reveal .reveal.in .price-row:nth-child(2), .js-reveal .faq-list.reveal.in > .faq-item:nth-child(2) { transition-delay: 60ms; }
.js-reveal .reveal.in .price-row:nth-child(3), .js-reveal .faq-list.reveal.in > .faq-item:nth-child(3) { transition-delay: 120ms; }
.js-reveal .reveal.in .price-row:nth-child(4), .js-reveal .faq-list.reveal.in > .faq-item:nth-child(4) { transition-delay: 180ms; }
.js-reveal .faq-list.reveal.in > .faq-item:nth-child(5) { transition-delay: 240ms; }
.js-reveal .faq-list.reveal.in > .faq-item:nth-child(6) { transition-delay: 300ms; }
.js-reveal .faq-list.reveal.in > .faq-item:nth-child(n+7) { transition-delay: 360ms; }
@supports (animation-timeline: view()) {
  @keyframes tile-in { from { opacity: 0; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: none; } }
  .js-motion .gal-grid > .gal-item { animation: tile-in linear backwards; animation-timeline: view(); animation-range: entry 0% entry 55%; }
}
/* Buttons: a soft light passes over the main call to action on hover. */
@media (hover: hover) {
  .btn-emergency, .btn-primary { position: relative; overflow: hidden; isolation: isolate; }
  .btn-emergency::after, .btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-120%); transition: transform 700ms var(--ease-out); pointer-events: none; }
  .btn-emergency:hover::after, .btn-primary:hover::after { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .js-motion .hero-copy > *, .js-motion .gal-grid > .gal-item { animation: none !important; }
  .js-reveal .reveal .price-row, .js-reveal .faq-list.reveal > .faq-item { opacity: 1; transform: none; transition: none; }
}
html.a11y-motion .hero-copy > *, html.a11y-motion .gal-grid > .gal-item { animation: none !important; }
html.a11y-motion .js-reveal .reveal .price-row, html.a11y-motion .js-reveal .faq-list.reveal > .faq-item { opacity: 1; transform: none; transition: none; }