/* Alethea v2 — liquid glass demo matching client mockups */
:root {
  --bg: #e9e9ea;
  --ink: #2a2a2c;
  --ink-soft: #8a8a8e;
  --ink-faint: #b0b0b4;
  --red: #e31c23;
  --beige: #c4a484;
  --blue: #3b82f6;
  --glass: rgba(255, 255, 255, 0.42);
  --glass-strong: rgba(255, 255, 255, 0.72);
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  --radius-pill: 999px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-serif: var(--font); /* single app-wide family */
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100%;
}
body { min-height: 100dvh; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }
img { display: block; max-width: 100%; }

.app {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
  background: var(--bg);
}

/* ---------- Liquid glass ---------- */
.glass {
  background: var(--glass);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(255, 255, 255, 0.15),
    0 8px 32px rgba(0, 0, 0, 0.08);
}
html.is-ios .glass-liquid {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.22) 40%,
    rgba(255, 255, 255, 0.35) 100%
  );
  backdrop-filter: blur(40px) saturate(180%) brightness(1.05);
  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.05);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.85),
    inset -1px -1px 0 rgba(255, 255, 255, 0.2),
    0 20px 60px rgba(0, 0, 0, 0.12);
}
html.is-android .glass-liquid {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

/* ---------- Brand pill ---------- */
.brand-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  font-size: 0.95rem;
  line-height: 1;
}
.brand-pill .club {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
}
.brand-pill .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--red);
  display: inline-block;
  transform: translateY(-1px);
}
.brand-pill .alethea {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ---------- HOME ---------- */
.page-home {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: calc(12px + var(--safe-t)) 16px calc(18px + var(--safe-b));
  overflow: hidden; /* clip soft bleed of droplet */
}
.home-settings {
  position: absolute;
  top: calc(14px + var(--safe-t));
  right: 18px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  opacity: 0.55;
  z-index: 5;
}
.home-settings svg { width: 22px; height: 22px; }

.home-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 62vh;
  margin: 0 -20px; /* allow droplet to bleed past app padding */
  width: calc(100% + 40px);
  overflow: visible;
}
.droplet-wrap {
  position: absolute;
  inset: -4% -18% -2%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.droplet-wrap img {
  width: 148%;
  max-width: none;
  height: auto;
  max-height: none;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  /* soft blend — no hard rect; asset already feathered into #e9e9ea */
  filter: none;
}
/* v89: .home-copy ya no está en index.html (texto central quitado); se dejan las reglas por si vuelve */
.home-copy {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: -2vh;
  pointer-events: none;
  padding: 0 12px;
  max-width: 100%;
}
.home-copy h1 {
  margin: 0;
  font-weight: 500;
  font-size: clamp(1.5rem, 5vw, 1.8rem);
  letter-spacing: -0.03em;
  color: #4a4a4e;
  white-space: nowrap;
}
.home-copy p {
  margin: 0.2rem 0 0;
  font-weight: 400;
  font-size: clamp(1.25rem, 4.4vw, 1.55rem);
  letter-spacing: -0.02em;
  color: #9a9a9e;
  white-space: nowrap;
}

.home-search {
  position: relative;
  z-index: 3;
  margin: 0.35rem auto 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.55rem 1.2rem;
  border-radius: var(--radius-pill);
  font-size: 0.95rem;
  color: #5a5a5e;
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 4px 16px rgba(0,0,0,0.05);
  align-self: center;
}
.home-search svg { width: 15px; height: 15px; opacity: 0.7; }

.home-cats {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin: 0 auto 0;
  padding: 0.4rem;
  border-radius: 22px;
  width: fit-content;
  max-width: 100%;
}
.cat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 88px;
  height: 64px;
  padding: 0.4rem 0.75rem;
  border-radius: 16px;
  font-size: 0.92rem;
  font-weight: 500;
  color: #4a4a4e;
  transition: transform 0.2s ease, background 0.2s ease;
}
.cat-btn .dot {
  width: 7px; height: 7px; border-radius: 50%;
}
.cat-btn .dot.beige { background: var(--beige); }
.cat-btn .dot.red { background: var(--red); }
.cat-btn .dot.blue { background: var(--blue); }
.cat-btn.active, .cat-btn.is-default {
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  color: #1a1a1c;
}
.cat-btn.is-default:not(.active) {
  /* keep white until another category opened */
}
.cat-btn .pet-ico { width: 28px; height: 28px; opacity: 0.85; }

.home-footer {
  display: flex;
  justify-content: center;
  margin-top: auto;
  padding-top: 1.25rem;
  position: relative;
  z-index: 3;
}

/* ---------- Category panel overlay ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(120,120,125,0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.panel {
  width: min(100%, 380px);
  max-height: min(86dvh, 720px);
  border-radius: 36px;
  padding: 1.35rem 1.4rem 1.1rem;
  display: flex;
  flex-direction: column;
  transform: translateY(18px) scale(0.98);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
.overlay.open .panel { transform: none; }
.panel-head {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 0.85rem;
}
.panel-head .label {
  font-weight: 600;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.panel-head .label .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--red);
}
.panel-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
}
.panel-list .spec {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.38rem 0;
  font-size: 1.55rem;
  letter-spacing: -0.02em;
  color: #2c2c2e;
  line-height: 1.25;
}
.panel-list .spec.featured { font-weight: 700; }
.panel-list .spec.regular { font-weight: 400; color: #3a3a3c; }
.panel-sep {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red);
  margin: 0.55rem 0 0.7rem;
}
.panel-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding-top: 1rem;
  margin-top: 0.4rem;
}
.city-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.35rem;
  border-radius: var(--radius-pill);
  background: #fff;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  letter-spacing: -0.01em;
}
.close-x {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-size: 1.55rem;
  font-weight: 300;
  color: #1a1a1c;
  line-height: 1;
}

/* city picker sheet */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,0.28);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; left: 50%; bottom: 0; z-index: 51;
  width: min(100%, 430px);
  transform: translate(-50%, 110%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 28px 28px 0 0;
  padding: 1rem 1.1rem calc(1.2rem + var(--safe-b));
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.sheet-backdrop.open + .sheet,
.sheet.open { transform: translate(-50%, 0); }
.sheet h3 {
  margin: 0.2rem 0 0.8rem;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  color: var(--ink-soft);
}
.sheet .city-option {
  display: block; width: 100%;
  text-align: left;
  padding: 0.85rem 0.6rem;
  font-size: 1.1rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.sheet .city-option.active { color: var(--red); font-weight: 700; }

/* settings menu */
.settings-menu {
  position: absolute;
  top: calc(52px + var(--safe-t));
  right: 16px;
  z-index: 20;
  min-width: 180px;
  border-radius: 16px;
  padding: 0.4rem;
  display: none;
}
.settings-menu.open { display: block; }
.settings-menu a, .settings-menu button {
  display: block; width: 100%;
  text-align: left;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  font-size: 0.95rem;
}
.settings-menu a:hover, .settings-menu button:hover { background: rgba(255,255,255,0.55); }

/* ---------- SPECIALTY PAGE ---------- */
.page-specialty {
  min-height: 100dvh;
  padding: calc(12px + var(--safe-t)) 14px calc(96px + var(--safe-b));
}
.back-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.65);
  display: grid; place-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.back-btn svg { width: 18px; height: 18px; }
.spec-title {
  text-align: center;
  margin: 0.35rem 0 1.1rem;
  font-weight: 500;
  font-size: 1.35rem;
  color: #c0c0c4;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.spec-title .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--red);
}

.oval-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 10px;
}
.oval-card {
  aspect-ratio: 0.68;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  background: #d8d8dc;
}
.oval-card::after {
  content: "";
  position: absolute;
  left: 6%; right: 6%; bottom: 1px;
  height: 2.5px;
  background: var(--red);
  border-radius: 2px;
  pointer-events: none;
  box-shadow: 0 0 0 0.5px rgba(227,28,35,0.35);
}
.oval-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}

.bottom-bar {
  position: fixed;
  left: 50%;
  bottom: calc(14px + var(--safe-b));
  transform: translateX(-50%);
  width: min(calc(100% - 24px), 400px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0.4rem;
  border-radius: var(--radius-pill);
  z-index: 30;
}
.bottom-bar .pill {
  flex: 1;
  text-align: center;
  padding: 0.7rem 0.6rem;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.7);
  font-weight: 600;
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bottom-bar .home-pill {
  flex: 0 0 auto;
  width: 52px; height: 44px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.7);
  display: grid; place-items: center;
}
.bottom-bar .home-pill svg { width: 20px; height: 20px; }

/* ---------- CLUB ---------- */
.page-club {
  min-height: 100dvh;
  padding: calc(16px + var(--safe-t)) 12px calc(90px + var(--safe-b));
}
.club-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding: 0 4px;
}
.club-header .brand-inline {
  font-size: 1.2rem;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}
.club-header .brand-inline .club {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
}
.club-header .brand-inline .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--red);
  display: inline-block; transform: translateY(-1px);
}
.club-header .brand-inline .alethea { font-weight: 700; }
.club-header .sub {
  color: var(--ink-faint);
  font-size: 0.95rem;
  font-weight: 400;
}

.masonry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
}
.masonry-col { display: flex; flex-direction: column; gap: 10px; }
.masonry-card {
  border-radius: 28px;
  overflow: hidden;
  background: #d4d4d8;
  position: relative;
}
.masonry-card.tall { aspect-ratio: 0.72; }
.masonry-card.short { aspect-ratio: 1.05; }
.masonry-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}

.club-home {
  position: fixed;
  left: 50%;
  bottom: calc(16px + var(--safe-b));
  transform: translateX(-50%);
  width: 64px; height: 48px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.75);
  display: grid; place-items: center;
  box-shadow: 0 4px 18px rgba(0,0,0,0.06);
  z-index: 30;
}
.club-home svg { width: 22px; height: 22px; }

/* ---------- PROFILE ---------- */
.page-profile {
  min-height: 100dvh;
  padding: calc(10px + var(--safe-t)) 12px calc(18px + var(--safe-b));
  display: flex;
  flex-direction: column;
}
.profile-card {
  position: relative;
  flex: 1;
  border-radius: 40px;
  overflow: hidden;
  min-height: calc(100dvh - 100px);
  background: #c8c8cc;
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}
.profile-card > img.main-photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}
.profile-card .photo2 {
  position: absolute;
  right: 16px; bottom: 18px;
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.85);
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  z-index: 2;
}
.profile-meta {
  position: absolute;
  left: 18px; bottom: 22px;
  right: 90px;
  z-index: 2;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}
.profile-meta .name-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}
.verified-badge {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--red);
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}
.verified-badge svg { width: 10px; height: 10px; }
.profile-meta .spec {
  margin-top: 0.15rem;
  font-size: 0.95rem;
  font-weight: 400;
  opacity: 0.95;
}
.profile-meta .city {
  margin-top: 0.1rem;
  font-size: 0.88rem;
  opacity: 0.9;
}
.profile-card::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
  z-index: 1;
  pointer-events: none;
}

.profile-bar {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  margin-top: 0.75rem;
  padding: 0 8px;
  position: relative;
}
.profile-bar .circle-btn,
.profile-bar .wide-btn {
  background: #fff;
  box-shadow: 0 3px 12px rgba(0,0,0,0.07);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.profile-bar .wide-btn {
  /* compact circle like mockup — not a stretched pill */
  width: 44px;
  border-radius: 50%;
}
.profile-bar .profile-bar-right {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  grid-column: 2;
  justify-self: center;
}
.profile-bar > .circle-btn:first-child {
  grid-column: 1;
  justify-self: start;
}
.profile-bar svg { width: 18px; height: 18px; }

/* action sheet on profile */
.action-sheet-wrap {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none;
}
.action-sheet-wrap.open { pointer-events: auto; }
.action-dim {
  position: absolute; inset: 0;
  background: rgba(40,40,45,0.25);
  opacity: 0; transition: opacity 0.28s ease;
}
.action-sheet-wrap.open .action-dim { opacity: 1; }
.action-sheet {
  position: relative;
  width: min(100%, 430px);
  border-radius: 40px 40px 28px 28px;
  padding: 1.6rem 1.2rem calc(1.3rem + var(--safe-b));
  margin: 0 8px 8px;
  transform: translateY(110%);
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.action-sheet-wrap.open .action-sheet { transform: none; }
html.is-ios .action-sheet {
  /* subtle concave top via mask-ish border */
  border-top-left-radius: 44px;
  border-top-right-radius: 44px;
}
.action-icons {
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  margin-bottom: 1.1rem;
}
.action-ico {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #1c1c1e;
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  transition: transform 0.15s ease;
}
.action-ico:active { transform: scale(0.94); }
.action-ico svg { width: 22px; height: 22px; }
.action-ico .uber-txt {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: -0.02em;
}
.share-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.95rem 1.2rem;
  border-radius: var(--radius-pill);
  background: #fff;
  font-weight: 600;
  font-size: 1.02rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.share-pill svg { width: 18px; height: 18px; opacity: 0.8; }

.toast {
  position: fixed;
  left: 50%; bottom: calc(100px + var(--safe-b));
  transform: translateX(-50%) translateY(20px);
  background: rgba(20,20,22,0.88);
  color: #fff;
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 80;
  white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* legacy pages (whatsapp / medicos) keep usable look */
.legacy-shell {
  max-width: 430px; margin: 0 auto;
  min-height: 100dvh; background: var(--bg);
  padding: 12px 14px calc(72px + var(--safe-b));
  font-family: var(--font);
}
.legacy-shell .topbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.legacy-shell .brand {
  font-weight: 700; display: flex; align-items: center; gap: 0.4rem;
}
.legacy-shell .brand-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--red); color: #fff;
  display: grid; place-items: center; font-size: 0.85rem;
}
.demo-banner {
  background: #fff3cd; color: #6b5300;
  padding: 0.5rem 0.75rem; border-radius: 10px;
  font-size: 0.8rem; margin-bottom: 12px;
}
.bottom-nav {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(100%, 430px);
  display: flex; background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(0,0,0,0.06);
  padding: 0.4rem 0 calc(0.4rem + var(--safe-b));
  z-index: 25;
}
.bottom-nav a {
  flex: 1; text-align: center; font-size: 0.7rem;
  color: var(--ink-soft); padding: 0.35rem;
}
.bottom-nav a.active { color: var(--red); font-weight: 600; }
.bottom-nav .ico { display: block; font-size: 1.1rem; }

/* keep old card styles for whatsapp sim if needed */
.card {
  background: #fff; border-radius: 16px; padding: 14px;
  margin-bottom: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.avatar { width: 64px; height: 76px; border-radius: 14px; object-fit: cover; }
.btn { display: inline-flex; align-items: center; justify-content: center;
  padding: 0.55rem 0.9rem; border-radius: 12px; font-weight: 600; font-size: 0.85rem; }
.btn-wa { background: #25d366; color: #fff; }
.btn-ig { background: #e1306c; color: #fff; }
.btn-call { background: #1c1c1e; color: #fff; }
.btn-secondary { background: #f0f0f2; color: var(--ink); }
.actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.doctor-row { display: flex; gap: 12px; }
.doctor-meta h3 { margin: 0 0 2px; font-size: 1rem; }
.doctor-meta .spec { color: var(--ink-soft); font-size: 0.85rem; }
.doctor-meta .place { color: var(--ink-faint); font-size: 0.8rem; }
.bio { font-size: 0.85rem; color: var(--ink-soft); margin: 6px 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chips button, .chips a {
  padding: 0.4rem 0.75rem; border-radius: 999px;
  background: #fff; font-size: 0.8rem; border: 1px solid rgba(0,0,0,0.06);
}
.search-box { display: flex; gap: 6px; margin: 10px 0; }
.search-box input {
  flex: 1; padding: 0.7rem 0.9rem; border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08); background: #fff; font-size: 1rem;
}
.search-box button {
  padding: 0.7rem 1rem; border-radius: 12px; background: var(--red); color: #fff; font-weight: 600;
}
.hero h1 { font-size: 1.5rem; margin: 0 0 0.4rem; }
.hero p { color: var(--ink-soft); margin: 0 0 1rem; }
.mic-btn {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--red); color: #fff; font-size: 1.6rem;
  box-shadow: 0 8px 24px rgba(227,28,35,0.35);
}
.mic-wrap { text-align: center; margin: 1rem 0; }
.mic-hint { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.5rem; }
.fallback-note { font-size: 0.8rem; color: var(--ink-faint); margin: 8px 0; }
.section-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); margin: 12px 0 6px; }
.results-header { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0; }
.results-header h2 { font-size: 1.1rem; margin: 0; }
.tag { font-size: 0.7rem; padding: 0.15rem 0.45rem; border-radius: 6px; background: #f0f0f2; margin-right: 4px; }
.tag.verificado { background: #ffe5e6; color: var(--red); }
.profile-hero { text-align: center; }
.profile-hero img.avatar { width: 120px; height: 144px; margin: 0 auto 12px; border-radius: 20px; }
.empty { text-align: center; padding: 2rem 1rem; color: var(--ink-soft); }

@media (min-width: 500px) {
  .app, .legacy-shell, .bottom-nav, .bottom-bar, .club-home, .sheet, .action-sheet {
    /* already max-width constrained */
  }
}


/* ===== Legacy: medicos.html + whatsapp.html ===== */
:root {
  --muted: #5a6b7c;
  --primary: #e31c23;
  --featured: #7c3aed;
  --featured-soft: #ede9fe;
  --ink-legacy: #1a1a1c;
}
.app-shell {
  max-width: 430px; margin: 0 auto; min-height: 100dvh;
  background: var(--bg); padding-bottom: calc(64px + var(--safe-b));
  font-family: var(--font);
}
.app-shell .topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; position: sticky; top: 0; z-index: 10;
  background: rgba(233,233,234,0.9); backdrop-filter: blur(10px);
}
.app-shell .brand { font-weight: 700; display: flex; align-items: center; gap: 0.4rem; }
.app-shell .brand-mark {
  width: 28px; height: 28px; border-radius: 8px; background: var(--red); color: #fff;
  display: grid; place-items: center; font-size: 0.85rem;
}
.app-shell .nav-links a { color: var(--muted); font-size: 0.9rem; margin-left: 12px; }
.app-shell .main { padding: 0 14px 20px; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-block { width: 100%; }
.plans { display: flex; flex-direction: column; gap: 12px; }
.plan {
  background: #fff; border-radius: 16px; padding: 16px;
  border: 1px solid rgba(0,0,0,0.06);
}
.plan.popular { border-color: var(--featured); box-shadow: 0 8px 28px rgba(124,58,237,.15); }
.plan h3 { margin: 0 0 4px; }
.plan .price { font-size: 1.6rem; font-weight: 800; }
.plan .price span { font-size: 0.9rem; font-weight: 500; color: var(--muted); }
.plan ul { margin: 12px 0; padding-left: 18px; color: var(--muted); font-size: 0.92rem; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.stat { background: #f6f6f8; border-radius: 12px; padding: 12px; text-align: center; }
.stat .n { font-size: 1.4rem; font-weight: 800; }
.stat .l { font-size: 0.78rem; color: var(--muted); }
.footer-note { font-size: 0.8rem; color: var(--muted); text-align: center; margin-top: 16px; }
.tag.destacado { background: var(--featured-soft); color: var(--featured); }

.wa-shell {
  max-width: 430px; margin: 0 auto; min-height: 100dvh;
  display: flex; flex-direction: column; background: #e5ddd5;
  font-family: var(--font);
}
.wa-header {
  display: flex; align-items: center; gap: 10px;
  background: #075e54; color: #fff; padding: 10px 12px;
  padding-top: calc(10px + var(--safe-t));
}
.wa-header .back { color: white; font-size: 1.2rem; }
.wa-header .avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #128c7e; }
.wa-header .info strong { display: block; font-size: 1rem; }
.wa-header .info small { opacity: .85; font-size: 0.75rem; }
.wa-demo-banner {
  background: #fff3cd; color: #6b5300; text-align: center;
  font-size: 0.75rem; padding: 6px;
}
.wa-messages {
  flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px;
}
.bubble {
  max-width: 82%; padding: 8px 10px; border-radius: 10px;
  font-size: 0.92rem; line-height: 1.35; position: relative;
  box-shadow: 0 1px 1px rgba(0,0,0,0.06);
}
.bubble.them { background: #fff; align-self: flex-start; border-top-left-radius: 0; }
.bubble.me { background: #dcf8c6; align-self: flex-end; border-top-right-radius: 0; }
.bubble .time { display: block; text-align: right; font-size: 0.65rem; color: #667; margin-top: 4px; }
.bubble a { color: #027eb5; font-weight: 600; }
.wa-composer {
  display: flex; gap: 8px; padding: 8px; background: #f0f0f0;
  padding-bottom: calc(8px + var(--safe-b));
}
.wa-composer input {
  flex: 1; border: none; border-radius: 24px; padding: 10px 14px; font-size: 1rem;
}
.wa-composer button {
  border: none; border-radius: 50%; width: 44px; height: 44px;
  background: #075e54; color: #fff; font-size: 1.1rem;
}
.wa-composer button.rec { background: #ef4444; }
.bubble.img-msg { padding: 4px; max-width: 78%; }
.bubble.img-msg .wa-img-wrap { border-radius: 8px; overflow: hidden; }
.bubble.img-msg .wa-img-wrap img { width: 100%; height: auto; display: block; }
.bubble.img-msg .wa-caption { padding: 6px 8px 4px; font-size: 0.85rem; }
.bubble.img-msg .wa-caption .links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }


/* ===== Home v2 (2026-09-24): full-screen glass-drop background + 361x83 capsule ===== */
.page-home {
  background-color: #e9e9ea;
  background-image: url("../img/brand/home-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-home .droplet-wrap { display: none; }
.home-cats {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 0;
  width: 361px;
  max-width: calc(100vw - 32px);
  height: 83px;
  padding: 0;
  margin: 0 auto;
  border-radius: 37px;
  align-self: center;
  flex-shrink: 0;
}
/* Liquid glass is the DEFAULT (iOS Safari, iOS PWA, CriOS, iPadOS, desktop); Android overrides to plain blur */
.home-cats,
html.is-ios .home-cats {
  position: relative;
  /* translucent fill (padding-box) + specular gradient border (border-box) */
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.30) 100%) padding-box,
    linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.35) 40%, rgba(255,255,255,0.15) 65%, rgba(255,255,255,0.8) 100%) border-box;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  /* inset highlights only — no outer drop shadow */
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.95),
    inset 1px 0 1px rgba(255,255,255,0.45),
    inset 0 -1px 1px rgba(255,255,255,0.55),
    inset 0 -10px 18px -10px rgba(120,120,130,0.18),
    inset 0 0 14px rgba(255,255,255,0.28);
}
/* top gloss overlay */
.home-cats::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0) 55%),
    radial-gradient(120% 90% at 18% 0%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 60%);
  pointer-events: none;
  z-index: 0;
}
.home-cats > .cat-btn { position: relative; z-index: 1; }
html.is-android .home-cats {
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.45);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: none;
}
html.is-android .home-cats::after { display: none; }
.home-cats .cat-btn {
  flex: 0 0 71px;
  width: 71px;
  min-width: 0;
  height: 69px;
  padding: 0;
  gap: 0.3rem;
  border-radius: 30px;
  background: #fff;
  color: #1a1a1c;
  font-size: 13px;
  box-shadow: none;
}
.home-cats .cat-btn.active,
.home-cats .cat-btn.is-default {
  background: #fff;
  box-shadow: none;
}
.home-cats .cat-btn:active { transform: scale(0.96); }
.home-cats .cat-btn .pet-ico { width: 26px; height: 26px; }

/* ===== Home no-scroll lock (home only; html.home-lock set in index.html) ===== */
html.home-lock,
html.home-lock body {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
html.home-lock .page-home {
  height: 100vh;            /* fallback */
  height: 100dvh;           /* Android dynamic toolbar-safe */
  height: var(--app-h, 100dvh);   /* v53: measured visible height (js/platform.js), re-measured on pageshow/resize */
  min-height: 0;
  max-height: 100dvh;
  max-height: var(--app-h, 100dvh);
  overflow: hidden;
  overscroll-behavior: none;
}
html.home-lock .home-hero {
  min-height: 0;            /* was 62vh (large viewport on Android) → could push content past dvh */
  flex: 1 1 auto;
}
html.home-lock .home-search,
html.home-lock .home-cats,
html.home-lock .home-footer { flex-shrink: 0; }

/* ===== Home v3: gradient wellness + mascotas buttons (health stays solid white) ===== */
.home-cats .cat-btn[data-cat="wellness"],
.home-cats .cat-btn[data-cat="pets"],
.home-cats .cat-btn[data-cat="wellness"].active,
.home-cats .cat-btn[data-cat="pets"].active,
.home-cats .cat-btn[data-cat="wellness"].is-default,
.home-cats .cat-btn[data-cat="pets"].is-default {
  background: linear-gradient(to top, #E7E7E7, #FEFEFE);
  border: 1px solid #fff; /* box-sizing: border-box → stays 71x69 */
  border-radius: 30px;
}

/* ===== iOS fake liquid-glass refraction (v11) =====
   .cats-lens replicates the page background aligned under the capsule (js/lens.js),
   magnified (core) + more magnified at the edges (edge ring) → lensing. Android: plain blur. */
.home-cats { overflow: hidden; isolation: isolate; }
.cats-lens { display: none; }
html:not(.is-android) .home-cats {
  border: 1px solid transparent;
  /* nearly transparent fill (padding-box) + specular rim (border-box) */
  background:
    linear-gradient(rgba(255,255,255,0.03), rgba(255,255,255,0.03)) padding-box,
    linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.75) 22%, rgba(255,255,255,0.18) 55%, rgba(255,255,255,0.08) 75%, rgba(255,255,255,0.5) 100%) border-box;
  -webkit-backdrop-filter: blur(3px) saturate(160%);
  backdrop-filter: blur(3px) saturate(160%);
  box-shadow: none;
}
html:not(.is-android) .cats-lens {
  display: block;
  position: absolute;
  inset: 0;
  border-radius: 36px;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.cats-lens > span {
  position: absolute;
  inset: 0;
  background-image: url("../img/brand/home-bg.jpg");
  background-repeat: no-repeat;
  background-size: var(--lens-bs, cover);
  background-position: var(--lens-bp, center);
  transform-origin: 50% 50%;
  will-change: transform;
}
.cats-lens .lens-edge {
  /* larger box so the minified (edge-refracted) image still covers the capsule */
  inset: -90px -120px;
  transform: scale(0.58);
  filter: blur(1px) saturate(1.5) contrast(1.12);
}
.cats-lens .lens-core {
  transform: scale(1.06);
  filter: blur(2.5px) saturate(1.3) brightness(0.99);
  /* feather out near the rim so the more-magnified edge ring shows through */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 18px), transparent 100%),
    linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 18px), transparent 100%),
    linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
  mask-composite: intersect;
}
/* specular gloss + inner edges, above the lens, below the buttons (inset only) */
html:not(.is-android) .home-cats::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 36px;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.04) 22%, rgba(255,255,255,0) 40%),
    radial-gradient(40% 90% at 10% 0%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 60%);
  box-shadow:
    inset 0 1.5px 0.5px rgba(255,255,255,0.95),
    inset 1.5px 0 1px rgba(255,255,255,0.55),
    inset -1px 0 1px rgba(255,255,255,0.25),
    inset 0 -1px 0.5px rgba(255,255,255,0.45),
    inset 0 -9px 12px -8px rgba(40,40,50,0.22),
    inset 6px 0 10px -8px rgba(120,160,255,0.18),
    inset -6px 0 10px -8px rgba(255,140,120,0.16);
}
.home-cats > .cat-btn { position: relative; z-index: 2; box-shadow: none; }
/* optional variants: ?glass=regular|tinted (default clear) */
html[data-glass="regular"]:not(.is-android) .home-cats {
  background:
    linear-gradient(rgba(255,255,255,0.30), rgba(255,255,255,0.22)) padding-box,
    linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.6) 30%, rgba(255,255,255,0.15) 65%, rgba(255,255,255,0.6) 100%) border-box;
}
html[data-glass="regular"]:not(.is-android) .cats-lens > span { filter: blur(8px) saturate(1.4) brightness(1.06); }
html[data-glass="tinted"]:not(.is-android) .home-cats {
  background:
    linear-gradient(rgba(224,49,43,0.12), rgba(224,49,43,0.12)) padding-box,
    linear-gradient(135deg, #fff 0%, rgba(255,230,228,0.6) 30%, rgba(255,255,255,0.15) 65%, rgba(255,255,255,0.6) 100%) border-box;
}

/* ===== v12: app-wide system font + new pet icon ===== */
input, textarea, select, button { font-family: inherit; }
.home-cats .cat-btn { color: #1d1d1f; }
.home-cats .cat-btn .pet-ico {
  width: auto;
  height: 28px;
  aspect-ratio: 461 / 512;
  color: #1d1d1f;
  opacity: 1;
  flex-shrink: 0;
}

/* ===== v14: dot placement per button ===== */
.home-cats .cat-btn { gap: 0; }
.home-cats .cat-btn .cat-label { position: relative; display: inline-block; line-height: 1.1; }
.home-cats .cat-btn .dot { position: absolute; width: 7px; height: 7px; }
/* wellness: dot above the "w", left-aligned with the word */
.home-cats .cat-btn[data-cat="wellness"] .dot { left: 0; bottom: calc(100% + 5px); }
/* health: text centered, dot below, centered */
.home-cats .cat-btn[data-cat="health"] .dot { left: 50%; top: calc(100% + 5px); transform: translateX(-50%); }
/* pets: dog centered, dot top-right near the head */
.home-cats .cat-btn[data-cat="pets"] .dot { top: 12px; right: 14px; }

/* v15: health label size + tighter tracking */
.home-cats .cat-btn[data-cat="health"] .cat-label { font-size: 18px; letter-spacing: -1px; }

/* v17: location pill text + magnifier in black */
.home-search, .home-search * { color: #000 !important; }
.home-search svg { stroke: #000; opacity: 1 !important; }

/* v18: wellness to left edge, pets to right edge, health centered; 7px inset = (83-69)/2 */
.home-cats { justify-content: space-between !important; padding-left: 7px !important; padding-right: 7px !important; gap: 0 !important; }

/* ===== v19: floating liquid-glass location window ===== */
.loc-backdrop {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(0, 0, 0, 0.02);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.loc-backdrop.open { opacity: 1; pointer-events: auto; }
.loc-window {
  position: fixed;
  left: 0; right: 0;
  margin: 0 auto;
  bottom: var(--loc-bottom, 120px);
  z-index: 50;
  width: 378px;
  max-width: calc(100vw - 16px);
  height: 284px;
  border-radius: 80px;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  color: #000;
  transform: translateY(110%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 420ms cubic-bezier(.2, .9, .25, 1.15),
    opacity 260ms ease,
    visibility 0s linear 420ms;
  box-shadow: none;
}
.loc-window.open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    transform 420ms cubic-bezier(.2, .9, .25, 1.15),
    opacity 220ms ease,
    visibility 0s;
}
/* iOS: clear liquid glass (same treatment as the capsule) */
html:not(.is-android) .loc-window {
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.04)) padding-box,
    linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 18%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.1) 72%, rgba(255,255,255,0.55) 100%) border-box;
  -webkit-backdrop-filter: blur(3px) saturate(160%);
  backdrop-filter: blur(3px) saturate(160%);
}
html:not(.is-android) .loc-window > .cats-lens { border-radius: 79px; }
html:not(.is-android) .loc-window .lens-core {
  transform: scale(1.04);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%),
    linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%),
    linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
html:not(.is-android) .loc-window .lens-edge { transform: scale(0.8); }
html:not(.is-android) .loc-window::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 79px;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.04) 18%, rgba(255,255,255,0) 32%),
    radial-gradient(45% 55% at 12% 0%, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 60%);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.95),
    inset 2px 0 1.5px rgba(255,255,255,0.55),
    inset -1px 0 1px rgba(255,255,255,0.3),
    inset 0 -1.5px 1px rgba(255,255,255,0.5),
    inset 0 -18px 26px -16px rgba(40,40,50,0.2),
    inset 10px 0 18px -14px rgba(120,160,255,0.16),
    inset -10px 0 18px -14px rgba(255,140,120,0.14);
}
/* Android: plain blur */
html.is-android .loc-window {
  border: 1px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.5);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
html.is-android .loc-window > .cats-lens { display: none; }
.loc-title {
  position: relative; z-index: 2;
  margin: 44px 0 0;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #000;
  line-height: 1.1;
}
.loc-scroll {
  position: relative; z-index: 2;
  flex: 1;
  margin-top: 14px;
  margin-bottom: 36px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
}
.loc-scroll::-webkit-scrollbar { display: none; }
.loc-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, 1fr);
  grid-auto-columns: max-content;
  column-gap: 40px;
  height: 100%;
  padding: 0 64px;
  width: max-content;
  align-items: center;
}
.loc-city {
  position: relative;
  scroll-snap-align: center;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #000;
  padding: 10px 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  background: none;
  -webkit-tap-highlight-color: transparent;
}
.loc-city .loc-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red, #e31c23);
  display: none;
}
.loc-city.is-selected { font-weight: 700; }
.loc-city.is-selected .loc-dot { display: inline-block; }
.loc-city:active { transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) {
  .loc-window, .loc-window.open { transition: opacity 200ms ease, visibility 0s; transform: none; }
}
/* v19 tweak: tighter two-row city grid (closer to mockup spacing) */
.loc-grid { grid-template-rows: repeat(2, 60px); align-content: center; row-gap: 8px; }

/* ===== v20: "ubicación" pill press feedback (location window itself unchanged from v19) ===== */
.home-search { transition: transform 160ms cubic-bezier(0.32, 0.72, 0, 1); -webkit-tap-highlight-color: transparent; }
.home-search.is-pressed, .home-search:active { transform: scale(0.96); transition-duration: 80ms; }
@media (prefers-reduced-motion: reduce) {
  .home-search.is-pressed, .home-search:active { transform: none; }
}

/* ===== v20: category (health/wellness/pets) panel — mounted, transform/opacity only ===== */
.overlay,
.overlay.open {
  opacity: 1;               /* never fade the ancestor of a backdrop-filter element (WebKit drops the blur) */
  transition: none;
  background: transparent;
}
.overlay { visibility: hidden; pointer-events: none; }
.overlay.open, .overlay.closing { visibility: visible; }
.overlay.open { pointer-events: auto; }
.overlay::before {           /* the dim layer fades on its own */
  content: "";
  position: absolute; inset: 0;
  background: rgba(120,120,125,0.18);
  opacity: 0;
  transition: opacity 220ms cubic-bezier(0.4, 0, 1, 1);
  pointer-events: none;
}
.overlay.open::before { opacity: 1; transition: opacity 320ms cubic-bezier(0.2, 0, 0, 1); }
.overlay .panel,
.overlay.open .panel {
  position: relative;
  transform: none;
  transition: none;
  transform-origin: 50% 100%;
}
.panel-group[hidden] { display: none; }
/* staggered item fade + rise */
.overlay .panel-rise {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 160ms ease-in, transform 160ms ease-in;
}
.overlay.open .panel-rise {
  opacity: 1;
  transform: none;
  transition:
    opacity 280ms cubic-bezier(0.2, 0, 0, 1) calc(80ms + var(--i, 0) * 24ms),
    transform 280ms cubic-bezier(0.32, 0.72, 0, 1) calc(80ms + var(--i, 0) * 24ms);
}
.overlay .panel-head, .overlay .panel-foot {
  opacity: 0;
  transition: opacity 160ms ease-in;
}
.overlay.open .panel-head, .overlay.open .panel-foot {
  opacity: 1;
  transition: opacity 260ms cubic-bezier(0.2, 0, 0, 1) 60ms;
}
@media (prefers-reduced-motion: reduce) {
  .overlay .panel-rise, .overlay.open .panel-rise { transform: none; transition: opacity 120ms linear; }
}

/* ===== v21: panel header — label left, informative city capsule centered, X top-right ===== */
.panel-head.panel-head--v21 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin: -0.35rem -0.55rem 0.85rem -0.55rem;
  padding-left: 0.55rem;
}
.panel-head--v21 .label { justify-self: start; }
.panel-head--v21 .close-x { justify-self: end; width: 40px; height: 40px; margin-right: -4px; }
.city-pill.city-pill--info {
  justify-self: center;
  cursor: default;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  padding: 0.5rem 1.1rem;
  font-size: 0.95rem;
  white-space: nowrap;
  box-shadow: none;
  transform: none !important;
}
/* v21: exact horizontal centering of the city capsule relative to the panel */
.panel-head--v21 { position: relative; }
.city-pill.city-pill--info { position: absolute; left: 0; right: 0; margin: 0 auto; width: max-content; }
.panel-head--v21 .close-x { grid-column: 3; }

/* ===== v22: informative city capsule pinned bottom-right in its own footer (no overlap with list) ===== */
.panel-head.panel-head--v21 { grid-template-columns: 1fr auto; }
.panel-head--v21 .close-x { grid-column: 2; }
.panel-foot.panel-foot--v22 {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 0.6rem;
  margin-top: 0.2rem;
  margin-right: -0.35rem;   /* sits in the corner, still inside the 36px radius curve */
  margin-bottom: -0.2rem;
}
.panel-foot--v22 .city-pill.city-pill--info {
  position: static;
  margin: 0;
  width: auto;
}

/* ===== v23: WELLNESS panel layout (health & pets unchanged) ===== */
.close-x--foot { display: none; }
.panel[data-cat="wellness"] {
  border-radius: 50px;
  height: min(600px, 76dvh);
  padding: 2rem 1.4rem 1.25rem;
}
.panel[data-cat="wellness"] .panel-head.panel-head--v21 {
  display: flex;
  justify-content: center;
  margin: 0 0 0.4rem;
  padding: 0;
}
.panel[data-cat="wellness"] #catClose { display: none; }
.panel[data-cat="wellness"] .panel-head .label {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.045em;
  color: #1d1d1f;
  gap: 3px;
  align-items: baseline;
}
.panel[data-cat="wellness"] .panel-head .label .dot {
  width: 7px; height: 7px;
  background: #1d1d1f;
  transform: translateY(-2px);
}
.panel[data-cat="wellness"] .panel-list {
  padding: 2.2rem 0 0;
  text-align: center;
}
.panel-list .spec.wellness-item {
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: #000;
  padding: 0.62rem 0;
  line-height: 1.25;
}
.panel[data-cat="wellness"] .panel-foot.panel-foot--v22 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin: 0;
  padding: 0.5rem 0 0;
}
.panel[data-cat="wellness"] .panel-foot--v22 .city-pill.city-pill--info {
  grid-column: 2;
  background: rgba(255,255,255,0.72);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.45rem 1.05rem;
  letter-spacing: -0.02em;
}
.panel[data-cat="wellness"] .close-x--foot {
  display: grid;
  grid-column: 3;
  justify-self: end;
  width: 40px; height: 40px;
  place-items: center;
  margin-right: 0.2rem;
  color: #1d1d1f;
}
.close-x--foot svg { width: 22px; height: 22px; }

/* v24: wellness panel height fits its content (no empty space at bottom) */
.panel[data-cat="wellness"] { height: auto !important; max-height: 76dvh; }
.panel[data-cat="wellness"] .panel-list { flex: 0 0 auto !important; padding: 1.4rem 0 0.9rem !important; overflow: visible; }

/* ===== v25: PETS panel layout (health & wellness unchanged) ===== */
.pet-friends { display: none; }
.panel[data-cat="pets"] {
  position: relative;
  border-radius: 50px;
  height: min(480px, 76dvh);
  padding: 2rem 1.4rem 1.2rem;
  overflow: hidden;
}
.panel[data-cat="pets"] .panel-head.panel-head--v21 {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 2;
}
.panel[data-cat="pets"] #catClose { display: none; }
.panel[data-cat="pets"] .panel-head .label { gap: 0; }
.panel[data-cat="pets"] .pet-logo { display: block; height: 26px; width: auto; }
.panel[data-cat="pets"] .panel-list {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  overflow: visible;
  padding: 0 0 38%;       /* items sit in the upper-middle, above the illustration */
  display: flex;
  align-items: center;
  justify-content: center;
}
.panel[data-cat="pets"] .panel-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  column-gap: 12px;
}
.panel[data-cat="pets"] .panel-group[hidden] { display: none; }
.panel-list .spec.pet-item {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: #000;
  padding: 0.4rem 0;
  white-space: nowrap;
}
.panel[data-cat="pets"] .pet-friends {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 62%;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
  line-height: 0;
}
.panel[data-cat="pets"] .pet-friends img { width: 100%; height: auto; display: block; }
.panel[data-cat="pets"] .panel-foot.panel-foot--v22 {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin: 0;
  padding: 0.5rem 0 0;
}
.panel[data-cat="pets"] .panel-foot--v22 .city-pill.city-pill--info {
  grid-column: 2;
  background: rgba(255,255,255,0.42);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.5);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.5rem 1.4rem;
  letter-spacing: -0.02em;
  color: #1d1d1f;
}
.panel[data-cat="pets"] .close-x--foot {
  display: grid;
  grid-column: 3;
  justify-self: end;
  width: 40px; height: 40px;
  place-items: center;
  margin-right: 0.2rem;
  color: #000;
}
.panel[data-cat="pets"] .close-x--foot svg { width: 24px; height: 24px; }

/* ===== v26: results grid — red "glitch" bar removed; verified seal for full-plan doctors ===== */
.oval-card::after { content: none !important; display: none !important; }
.oval-grid { row-gap: 20px; }
.oval-card {
  overflow: visible;
  background: transparent;
  display: block;
}
.oval-card .oval-photo {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  overflow: hidden;
  background: #d8d8dc;
}
.oval-card .oval-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.verified-seal {
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 24px; height: 24px;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 0 1.5px rgba(255,255,255,0.9));
}
/* profile (full plan): larger seal at the bottom-center of the photo */
.profile-card .verified-seal--profile {
  bottom: 14px;
  width: 32px; height: 32px;
  z-index: 3;
  filter: none;
}
.oval-card img.verified-seal {
  position: absolute; left: 50%; bottom: -12px;
  width: 24px; height: 24px;
  object-fit: contain;
  transform: translateX(-50%);
}

/* ===== v27: bottom row — Club (left) + AletheA Voice (right) ===== */
.home-footer {
  justify-content: space-between;
  align-items: stretch;
  padding-left: 10px;   /* 16px page padding + 10 = 26px ≈ mockup 32/479 scaled to 393 */
  padding-right: 10px;
}
.voice-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 0.8rem 0 0.9rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(30,30,32,0.88), rgba(8,8,10,0.92));
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(255,255,255,0.06);
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms cubic-bezier(0.32, 0.72, 0, 1);
}
.voice-pill:active { transform: scale(0.96); transition-duration: 80ms; }
.voice-pill .voice-logo { height: 13px; width: auto; display: block; }
.wave-ico { display: inline-flex; align-items: center; gap: 1.6px; height: 14px; }
.wave-ico i {
  display: block; width: 2px; height: 100%;
  border-radius: 2px;
  background: #34C759;
  transform-origin: 50% 50%;
  animation: aw-idle 1.4s ease-in-out infinite;
}
.wave-ico i:nth-child(1) { animation-delay: -0.2s; }
.wave-ico i:nth-child(2) { animation-delay: -0.55s; }
.wave-ico i:nth-child(3) { animation-delay: -0.9s; }
.wave-ico i:nth-child(4) { animation-delay: -0.35s; }
.wave-ico i:nth-child(5) { animation-delay: -0.7s; }
@keyframes aw-idle { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }

/* ===== v27: voice assistant overlay ===== */
.voice-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 10px calc(14px + var(--safe-b));
  visibility: hidden; pointer-events: none;
}
.voice-overlay.open, .voice-overlay.closing { visibility: visible; }
.voice-overlay.open { pointer-events: auto; }
.voice-overlay::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(20,20,24,0.18);
  opacity: 0; transition: opacity 220ms cubic-bezier(0.4, 0, 1, 1);
  pointer-events: none;
}
.voice-overlay.open::before { opacity: 1; transition: opacity 320ms cubic-bezier(0.2, 0, 0, 1); }
.voice-sheet {
  position: relative;
  width: min(100%, 380px);
  border-radius: 44px;
  padding: 22px 22px 18px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  transform-origin: 50% 100%;
}
.voice-close {
  position: absolute; top: 14px; right: 14px;
  width: 40px; height: 40px; display: grid; place-items: center; color: #1d1d1f;
}
.voice-close svg { width: 22px; height: 22px; }
.voice-sheet-logo { height: 15px; width: auto; filter: invert(1) hue-rotate(180deg); margin-top: 8px; }
.voice-orb {
  position: relative; width: 132px; height: 132px; margin: 22px 0 10px;
  display: grid; place-items: center; -webkit-tap-highlight-color: transparent;
}
.voice-orb .core {
  position: relative; z-index: 2;
  width: 88px; height: 88px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #3a3a3e 0%, #111114 70%);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -8px 16px rgba(0,0,0,0.35);
  transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
}
.voice-orb .ring {
  position: absolute; inset: 22px; border-radius: 50%;
  background: radial-gradient(circle, rgba(52,199,89,0.28) 0%, rgba(52,199,89,0) 70%);
  opacity: 0;
}
.voice-orb .bars { display: inline-flex; align-items: center; gap: 4px; height: 30px; }
.voice-orb .bars i {
  display: block; width: 4px; height: 100%; border-radius: 3px; background: #34C759;
  transform: scaleY(0.25); transform-origin: 50% 50%;
  animation: aw-idle 1.6s ease-in-out infinite;
}
.voice-orb .bars i:nth-child(2) { animation-delay: -0.3s; }
.voice-orb .bars i:nth-child(3) { animation-delay: -0.6s; }
.voice-orb .bars i:nth-child(4) { animation-delay: -0.9s; }
.voice-orb .bars i:nth-child(5) { animation-delay: -1.2s; }
.voice-overlay[data-state="listening"] .voice-orb .ring { animation: vo-pulse 1.6s cubic-bezier(0.2, 0, 0, 1) infinite; }
.voice-overlay[data-state="listening"] .voice-orb .ring.r2 { animation-delay: -0.8s; }
.voice-overlay[data-state="listening"] .voice-orb .bars i { animation-duration: 0.7s; }
.voice-overlay[data-state="thinking"] .voice-orb .core { transform: scale(0.94); }
.voice-overlay[data-state="speaking"] .voice-orb .bars i { animation-duration: 0.45s; }
@keyframes vo-pulse { 0% { transform: scale(0.8); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } }
.voice-status { margin: 4px 0 0; font-size: 22px; font-weight: 600; letter-spacing: -0.03em; color: #1d1d1f; min-height: 1.3em; }
.voice-transcript { margin: 6px 0 0; min-height: 2.6em; font-size: 17px; color: #3a3a3c; letter-spacing: -0.02em; line-height: 1.3; max-width: 30ch; }
.voice-form { display: none; width: 100%; gap: 8px; margin-top: 10px; }
.voice-overlay.text-mode .voice-form { display: flex; }
.voice-overlay.text-mode .voice-type-toggle { display: none; }
.voice-input {
  flex: 1; min-width: 0; height: 46px; padding: 0 18px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.8); font-size: 16px; color: #000; outline: none;
}
.voice-input:focus { border-color: rgba(0,0,0,0.25); }
.voice-send {
  flex: 0 0 46px; height: 46px; border-radius: 50%;
  background: #111; color: #fff; display: grid; place-items: center;
}
.voice-send svg { width: 20px; height: 20px; }
.voice-type-toggle { margin-top: 8px; font-size: 14px; color: #6e6e73; padding: 8px 12px; }
@media (prefers-reduced-motion: reduce) {
  .wave-ico i, .voice-orb .bars i, .voice-orb .ring { animation: none !important; }
}

/* ===== v28: Club pill uses the logo image; Voice pill inner glass edge ===== */
.home-footer .brand-pill,
.home-footer .voice-pill { height: 31.6px; box-sizing: border-box; align-self: center; }
.home-footer .brand-pill {
  align-items: center;
  padding: 0 0.95rem;
}
.brand-pill .club-logo { height: 15px; width: auto; display: block; }
.voice-pill {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.35),
    inset 0 0 7px rgba(255,255,255,0.18),
    inset 0 1px 0 rgba(255,255,255,0.28);
}

/* ===== v29: Club pill top-left, Voice pill bottom-center (larger), capsule group raised ===== */
.page-home > .brand-pill#clubPill {
  position: absolute;
  top: calc(16px + var(--safe-t));      /* vertically centred with the settings gear */
  left: 26px;
  height: 31.6px;
  box-sizing: border-box;
  align-items: center;
  padding: 0 0.95rem;
  z-index: 5;
}
.home-footer { justify-content: center; }
/* free space split: hero grows 1, footer area grows ~0.5 → capsule + ubicación rise */
html.home-lock .home-footer {
  flex: 0.55 1 0;
  min-height: 0;
  align-items: flex-end;
  padding-top: 1.25rem;
}
.home-footer .voice-pill {
  height: 36px;
  align-self: flex-end;
  gap: 9px;
  padding: 0 0.95rem 0 1.05rem;
  box-shadow:
    inset 0 0 0 0.5px rgba(255,255,255,0.14),
    inset 0 0 13px rgba(255,255,255,0.14),
    inset 0 1px 6px rgba(255,255,255,0.10);
}
.home-footer .voice-pill { border-color: rgba(255,255,255,0.08); }
.home-footer .voice-pill .voice-logo { height: 14.8px; }
.home-footer .voice-pill .wave-ico { height: 16px; gap: 1.8px; }
.home-footer .voice-pill .wave-ico i { width: 2.3px; }

/* ===== v30: quieter Club pill; capsule + ubicación group lowered ===== */
.page-home > .brand-pill#clubPill {
  height: 24px;
  top: calc(20px + var(--safe-t));      /* centre 32px = settings gear centre */
  padding: 0 0.7rem;
  background: rgba(255,255,255,0.42);
  border-color: rgba(255,255,255,0.4);
}
.page-home > .brand-pill#clubPill .club-logo { height: 11.3px; opacity: 0.82; }
/* Footer no longer shares free space; its top padding is the gap above Voice.
   gap = 24.4dvh − 103px → 852h: ~105px (group −100px vs v29), 667h: ~60px (−78), 640h: ~53px (−75); min 24px */
html.home-lock .home-footer {
  flex: 0 0 auto;
  padding-top: max(24px, calc(24.4vh - 103px));
  padding-top: max(24px, calc(24.4dvh - 103px));
}

/* ===== v31: Voice pill ~10px narrower, everything scaled ×0.94 ===== */
.home-footer .voice-pill {
  height: 33.85px;
  gap: 8.46px;
  padding: 0 0.893rem 0 0.987rem;
}
.home-footer .voice-pill .voice-logo { height: 13.9px; }
.home-footer .voice-pill .wave-ico { height: 15px; gap: 1.7px; }
.home-footer .voice-pill .wave-ico i { width: 2.16px; }

/* ===== v32: AletheA Voice pill — tinted black liquid glass ===== */
.home-footer .voice-pill {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.home-footer .voice-pill > .voice-logo,
.home-footer .voice-pill > .wave-ico { position: relative; z-index: 3; }
.home-footer .voice-pill .voice-logo { filter: drop-shadow(0 0 0.5px rgba(0,0,0,0.35)); }
.home-footer .voice-pill .wave-ico i { background: #3DDC6A; }
/* smoky tint (::before) + specular/edge glow (::after), both above the lens */
.home-footer .voice-pill::before,
.home-footer .voice-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.home-footer .voice-pill::before {
  z-index: 1;
  background: linear-gradient(180deg, rgba(22,22,26,0.58) 0%, rgba(8,8,10,0.66) 100%);
}
.home-footer .voice-pill::after {
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 38%, rgba(255,255,255,0) 55%),
    radial-gradient(38% 110% at 14% 0%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 62%);
  box-shadow:
    inset 0 1px 0.5px rgba(255,255,255,0.42),
    inset 0 -1px 0.5px rgba(255,255,255,0.10),
    inset 0 0 13px rgba(255,255,255,0.14),
    inset 0 1px 6px rgba(255,255,255,0.10);
}
/* iOS / non-Android: refraction lens under the tint */
html:not(.is-android) .home-footer .voice-pill {
  background: transparent;
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.18) 35%, rgba(255,255,255,0.06) 65%, rgba(255,255,255,0.30) 100%) border-box;
  -webkit-backdrop-filter: blur(3px) saturate(150%);
  backdrop-filter: blur(3px) saturate(150%);
  box-shadow: none;
}
html:not(.is-android) .home-footer .voice-pill > .cats-lens { border-radius: 999px; z-index: 0; }
html:not(.is-android) .home-footer .voice-pill .lens-edge {
  inset: -40px -60px;
  transform: scale(0.72);
  filter: blur(1px) saturate(1.4) contrast(1.15);
}
html:not(.is-android) .home-footer .voice-pill .lens-core {
  transform: scale(1.08);
  filter: blur(2px) saturate(1.2);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 7px, #000 calc(100% - 7px), transparent 100%),
    linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 7px, #000 calc(100% - 7px), transparent 100%),
    linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  mask-composite: intersect;
}
/* Android: dark blur */
html.is-android .home-footer .voice-pill {
  background: rgba(14,14,16,0.52);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: none;
}
html.is-android .home-footer .voice-pill::before { background: linear-gradient(180deg, rgba(20,20,24,0.22), rgba(6,6,8,0.30)); }
/* v32 tune: deeper smoky tint so it reads as black glass over the light background */
.home-footer .voice-pill::before { background: linear-gradient(180deg, rgba(18,18,22,0.74) 0%, rgba(4,4,6,0.84) 100%); }
.home-footer .voice-pill::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.03) 36%, rgba(255,255,255,0) 52%),
    radial-gradient(36% 110% at 14% 0%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 62%);
}
html.is-android .home-footer .voice-pill { background: rgba(10,10,12,0.62); }
html.is-android .home-footer .voice-pill::before { background: linear-gradient(180deg, rgba(18,18,22,0.30), rgba(4,4,6,0.40)); }

/* ===== v33: doctor profile — fixed 359×710 portrait photo, right-aligned data, + / shield pair, SENESCYT modal ===== */
.page-profile {
  /* photo width: 359px on 393-wide screens; scales down (aspect 359:710) to fit narrower/shorter screens.
     reserved vertical space ≈ top 10 + gap 12 + bar 46 + bottom 14 = 82px (+ safe areas) */
  --pw: max(220px, min(359px, calc(100vw - 34px), calc((100vh - 82px - var(--safe-t) - var(--safe-b)) * 0.50563)));
  --pw: max(220px, min(359px, calc(100vw - 34px), calc((100dvh - 82px - var(--safe-t) - var(--safe-b)) * 0.50563)));
  --pw: max(220px, min(359px, calc(100vw - 34px), calc((var(--app-h, 100dvh) - 82px - var(--safe-t) - var(--safe-b)) * 0.50563)));
  min-height: 100dvh;
  padding: calc(10px + var(--safe-t)) 0 calc(14px + var(--safe-b));
  align-items: center;
  justify-content: center;
}
.page-profile .profile-card {
  flex: none;
  width: var(--pw);
  height: calc(var(--pw) * 710 / 359);
  min-height: 0;
  border-radius: calc(var(--pw) * 0.108);   /* ≈ 39px at 359 */
  box-shadow: none;
  background: #cfcfd3;
}
/* bevel: soft inner highlight on the rim, inset only */
.page-profile .profile-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
  box-shadow:
    inset 0 1px 0.5px rgba(255,255,255,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.16),
    inset 0 -1px 0.5px rgba(255,255,255,0.18);
}
/* legibility gradient: bottom, weighted to the right where the data sits */
.page-profile .profile-card::before {
  height: 40%;
  background:
    radial-gradient(90% 75% at 100% 100%, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0) 70%),
    linear-gradient(to top, rgba(0,0,0,0.48) 0%, rgba(0,0,0,0.18) 45%, rgba(0,0,0,0) 100%);
}
.page-profile .profile-meta {
  left: 22%;
  right: 20px;
  bottom: 24px;
  text-align: right;
}
.page-profile .profile-meta .name-row { justify-content: flex-end; line-height: 1.2; }
.page-profile .profile-meta .spec,
.page-profile .profile-meta .city { text-align: right; }
.page-profile .profile-card .photo2 { display: none; }  /* removed small photo/icon */

/* bottom bar spans the photo width; + and shield centred as a pair */
.page-profile .profile-bar {
  width: var(--pw);
  margin-top: 12px;
  padding: 0;
  grid-template-columns: 46px 1fr 46px;
  flex: none;
}
.page-profile .profile-bar .circle-btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(to top, #E9E9EA, #FEFEFE);
  border: 1px solid #fff;
  box-shadow: none;
  color: #1d1d1f;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms cubic-bezier(0.32, 0.72, 0, 1);
}
.page-profile .profile-bar .circle-btn:active { transform: scale(0.94); transition-duration: 80ms; }
.page-profile .profile-bar .profile-bar-right { gap: 14px; }
.page-profile .profile-bar svg { width: 20px; height: 20px; }
.page-profile .profile-bar #btnShield img { width: 22px; height: 22px; display: block; }

/* ===== v34: SENESCYT uses the same bottom sheet component as the "+" contact sheet
   (.action-sheet-wrap / .action-dim / .action-sheet.glass.glass-liquid). Only content styles below,
   using the "+" sheet's row style (.share-pill: white pill, 1.02rem/600) and typography scale. ===== */
.action-sheet-wrap .action-sheet { touch-action: none; }  /* swipe-down to dismiss */
.sen-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
  min-height: 52px;               /* = height of the "+" sheet icon row */
  margin-bottom: 1.1rem;           /* = .action-icons margin */
  padding: 0 52px;
}
.sen-head h2 { margin: 0; font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; color: #1d1d1f; }
.sen-ico { width: 22px; height: 22px; display: block; }
.sen-x {
  position: absolute; right: 0; top: 50%;
  width: 52px; height: 52px;       /* same size as the "+" sheet round icons */
  margin-top: -26px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.7);
  color: #1d1d1f;
  transition: transform 0.15s ease;
}
.sen-x:active { transform: scale(0.94); }
.sen-x svg { width: 20px; height: 20px; }
.sen-rows { margin: 0; display: grid; gap: 0.55rem; }
.sen-row {
  /* same row material as .share-pill */
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.95rem 1.2rem;
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.sen-row dt { font-size: 0.85rem; color: #6e6e73; white-space: nowrap; }
.sen-row dd { margin: 0; font-size: 1.02rem; font-weight: 600; text-align: right; color: #1d1d1f; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sen-row dd.sen-num { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.sen-note { margin: 0.75rem 0 0; text-align: center; font-size: 0.78rem; color: #8e8e93; }
.sen-sheet .action-sheet { min-width: 0; max-width: calc(100% - 16px); }
.sen-rows { grid-template-columns: minmax(0, 1fr); }
.sen-row { min-width: 0; }
/* never truncate data: if a value doesn't fit next to its label, it wraps under it (right-aligned) */
.sen-row { flex-wrap: wrap; row-gap: 0.1rem; }
.sen-row dd { overflow: visible; text-overflow: clip; margin-left: auto; max-width: 100%; white-space: normal; }
.sen-row dd.sen-num { white-space: nowrap; }

/* ===== v35: SENESCYT sheet without X — title row truly centred (no side padding reserved for the X) ===== */
.sen-head { padding: 0; min-height: 52px; margin-bottom: 1.1rem; }
.sen-head h2 { line-height: 1.2; }

/* ===== v36: profile — mockup bottom row (← · AletheA verificated · +) and glass name pill (full plan)
   Geometry measured on Pancho's mockup and expressed as fractions of the photo width (--pw = 359px @393). ===== */
.page-profile {
  /* reserved vertical space: top 10 + gap (0.1026·pw ≈ 37) + bar (≈28) + bottom 14 ≈ 89px */
  --pw: max(220px, min(359px, calc(100vw - 34px), calc((100vh - 89px - var(--safe-t) - var(--safe-b)) * 0.50563)));
  --pw: max(220px, min(359px, calc(100vw - 34px), calc((100dvh - 89px - var(--safe-t) - var(--safe-b)) * 0.50563)));
  --pw: max(220px, min(359px, calc(100vw - 34px), calc((var(--app-h, 100dvh) - 89px - var(--safe-t) - var(--safe-b)) * 0.50563)));
}
.page-profile .profile-bar.profile-bar--v36 {
  --bh: max(26px, calc(var(--pw) * 0.0793));          /* 28.4px @359 */
  display: block;
  position: relative;
  width: var(--pw);
  height: var(--bh);
  margin-top: calc(var(--pw) * 0.1026);               /* 36.8px @359 */
  padding: 0;
}
.profile-bar--v36 > * {
  position: absolute;
  top: 0;
  height: var(--bh);
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 1px solid #fff;
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms cubic-bezier(0.32, 0.72, 0, 1);
}
.profile-bar--v36 > *::before {            /* larger invisible tap target */
  content: ""; position: absolute; inset: -8px -4px;
}
.profile-bar--v36 > *:active { transform: scale(0.94); transition-duration: 80ms; }
.profile-bar--v36 .pb-back {
  left: 0;                                             /* aligned with the photo edge */
  width: var(--bh);
  border-radius: 50%;
  background: rgba(255,255,255,0.52);
  border-color: rgba(255,255,255,0.75);
  color: #2c2c2e;
}
.profile-bar--v36 .pb-back svg { width: 62%; height: 62%; }
.profile-bar--v36 .pb-pill {
  border-radius: 999px;
  background: rgba(255,255,255,0.64);
}
/* pair centred on the photo: widths 74.5 + gap 20 + 66 (mockup proportions) */
.profile-bar--v36 .pb-verif {
  width: calc(var(--pw) * 0.2075);
  left: calc(var(--pw) * 0.2763);
}
.profile-bar--v36 .pb-verif img { height: calc(var(--bh) * 0.47); width: auto; display: block; }
.profile-bar--v36 .pb-plus {
  width: calc(var(--pw) * 0.1841);
  left: calc(var(--pw) * (0.2763 + 0.2075 + 0.0559));
  color: #9A9A9A;
}
.profile-bar--v36 .pb-plus svg { height: calc(var(--bh) * 0.62); width: auto; }

/* name block */
.page-profile .profile-meta {
  left: 14px;
  right: calc(var(--pw) * 0.142);                      /* 51px @359 */
  bottom: calc(var(--pw) * 0.1);                       /* ≈36px @359 → city ends ≈44px above photo bottom */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}
.page-profile .profile-meta .name-row {
  font-size: calc(var(--pw) * 0.0496);                 /* 17.8px @359 */
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  padding-right: calc(var(--pw) * 0.0235);             /* text edge = spec/city edge */
  gap: 0;
}
.page-profile .profile-meta .spec {
  margin-top: 4px;
  font-size: calc(var(--pw) * 0.0279);                 /* 10px @359 */
  font-weight: 400;
  padding-right: calc(var(--pw) * 0.0235);
  opacity: 0.95;
}
.page-profile .profile-meta .city {
  margin-top: 2px;
  font-size: calc(var(--pw) * 0.0237);                 /* 8.5px @359 */
  font-weight: 400;
  padding-right: calc(var(--pw) * 0.0235);
  opacity: 0.92;
}
/* full plan: dark smoky glass pill around the name, red badge at its left */
body.plan-full .page-profile .profile-meta .name-row {
  height: calc(var(--pw) * 0.07);                      /* 25px @359 */
  box-sizing: border-box;
  padding: 0 calc(var(--pw) * 0.0235) 0 calc(var(--pw) * 0.0168);
  gap: calc(var(--pw) * 0.0155);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(14,14,18,0.42), rgba(14,14,18,0.24));
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  border: 1px solid rgba(255,255,255,0.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset -2px -1px 3px rgba(255,255,255,0.10);
  text-shadow: none;
}
.page-profile .profile-meta .name-badge {
  width: calc(var(--pw) * 0.0355);                     /* 12.7px @359 */
  height: auto;
  display: block;
  flex: none;
}
/* full plan: the old red seal under the photo is replaced by the badge in the name pill */
.page-profile .profile-card .verified-seal--profile { display: none; }
.page-profile .profile-bar--v36 #btnShield img { width: auto; height: calc(var(--bh) * 0.47); }
.page-profile .profile-meta .spec { font-size: max(9.5px, calc(var(--pw) * 0.0279)); }
.page-profile .profile-meta .city { font-size: max(8.5px, calc(var(--pw) * 0.0237)); }
.profile-bar--v36 .pb-plus svg { height: calc(var(--bh) * 0.9); }
body.plan-full .page-profile .profile-meta .name-row { border-color: rgba(255,255,255,0.34); }

/* ===== v37: name block further right — right edge ≈16px from the photo edge (0.0446·pw) ===== */
.page-profile .profile-meta { right: calc(var(--pw) * 0.0446); }

/* ===== v38: full-plan name pill = CLEAR liquid glass (fake refraction of the photo, js/photo-lens.js) ===== */
body.plan-full .page-profile .profile-meta .name-row {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45), 0 0 1px rgba(0,0,0,0.35);
}
body.plan-full .page-profile .profile-meta .name-row > .name-badge,
body.plan-full .page-profile .profile-meta .name-row > #docName { position: relative; z-index: 2; }
body.plan-full .page-profile .profile-meta .name-row > .name-badge { filter: drop-shadow(0 0.5px 1px rgba(0,0,0,0.25)); }
/* iOS / non-Android: clear glass with refraction layer */
html:not(.is-android) body.plan-full .page-profile .profile-meta .name-row.has-lens {
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(0,0,0,0.06), rgba(0,0,0,0.06)) padding-box,   /* very faint tint for legibility */
    linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.55) 25%, rgba(255,255,255,0.14) 55%, rgba(255,255,255,0.10) 72%, rgba(255,255,255,0.6) 100%) border-box;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.name-lens {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.name-lens > span {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  transform-origin: 50% 50%;
}
.name-lens .lens-edge {
  inset: -30px -50px;            /* bigger box: minified edge still covers the pill */
  transform: scale(0.78);
  filter: blur(0.8px) saturate(1.45) contrast(1.1) brightness(1.04);
}
.name-lens .lens-core {
  transform: scale(1.07);
  filter: blur(1.6px) saturate(1.25) brightness(1.03);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%),
    linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%),
    linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-composite: intersect;
}
/* specular gloss + inner edges (inset only) */
html:not(.is-android) body.plan-full .page-profile .profile-meta .name-row.has-lens::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.04) 40%, rgba(255,255,255,0) 60%),
    radial-gradient(30% 120% at 8% 0%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 65%);
  box-shadow:
    inset 0 1px 0.5px rgba(255,255,255,0.85),
    inset 1px 0 1px rgba(255,255,255,0.45),
    inset -1px 0 1px rgba(255,255,255,0.25),
    inset 0 -1px 0.5px rgba(255,255,255,0.40),
    inset 0 -5px 8px -6px rgba(30,30,40,0.25);
}
/* Android: light backdrop blur */
html.is-android body.plan-full .page-profile .profile-meta .name-row {
  background: rgba(255,255,255,0.10);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}

/* ===== v39: WhatsApp circle left of the Voice pill; pair centred as a group ===== */
.home-footer { gap: 10px; justify-content: center; }
.home-footer .wa-circle {
  flex: none;
  align-self: flex-end;
  width: 33.85px; height: 33.85px;
  box-sizing: border-box;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.64);
  border: 1px solid #fff;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0.5px rgba(255,255,255,0.9), inset 0 -1px 1px rgba(0,0,0,0.04);
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms cubic-bezier(0.32, 0.72, 0, 1);
}
.home-footer .wa-circle:active { transform: scale(0.94); transition-duration: 80ms; }
.home-footer .wa-circle img { width: 18px; height: 18px; display: block; }
html:not(.is-android) .home-footer .wa-circle {
  /* light clear-ish glass on iOS */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.56)) padding-box,
    linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 45%, rgba(255,255,255,0.95) 100%) border-box;
  border: 1px solid transparent;
}

/* ===== v40: WhatsApp circle — iOS-style tactile button (same on Android), no outer shadow ===== */
.home-footer .wa-circle,
html:not(.is-android) .home-footer .wa-circle,
html.is-android .home-footer .wa-circle {
  background: linear-gradient(to bottom, rgba(254,254,254,0.97) 0%, rgba(231,231,231,0.95) 100%);
  border: 1px solid #fff;
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.9),
    inset 0 -2px 4px rgba(0,0,0,0.08);
}

/* ===== v41: verified name pill = PURE liquid glass — refraction layer + thin light border only
   (no white inset shadows / specular gloss / halo / outer shadow / tint) ===== */
html:not(.is-android) body.plan-full .page-profile .profile-meta .name-row.has-lens {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: none;
}
html:not(.is-android) body.plan-full .page-profile .profile-meta .name-row.has-lens::after { content: none; display: none; }
body.plan-full .page-profile .profile-meta .name-row { text-shadow: 0 0.5px 1.5px rgba(0,0,0,0.35); }
body.plan-full .page-profile .profile-meta .name-row > .name-badge { filter: none; }
.name-lens .lens-edge { filter: blur(0.6px) saturate(1.3) contrast(1.05); }
.name-lens .lens-core { filter: blur(1.4px) saturate(1.15); }
html.is-android body.plan-full .page-profile .profile-meta .name-row {
  background: transparent;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: none;
}

/* ===== v42: Siri-style orb (Voice pill + voice overlay) — pure CSS, transform/opacity-only animations ===== */
.siri-orb {
  --s: 17px;
  --lvl: 0;
  position: relative;
  flex: none;
  width: var(--s); height: var(--s);
  border-radius: 50%;
  isolation: isolate;
  transform: scale(calc(1 + var(--lvl) * 0.14));
}
/* soft multicolour glow bleeding onto the glass */
.siri-orb::before {
  content: "";
  position: absolute;
  inset: -38%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #3A7BFF, #9B5CFF, #FF4FA3, #34D1C8, #3A7BFF);
  filter: blur(calc(var(--s) * 0.26));
  opacity: 0.5;
  z-index: -1;
  animation: so-spin 7s linear infinite;
}
.so-core {
  position: absolute; inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 55%, #1b1650 0%, #0a0a1a 78%);
  animation: so-breathe 3.4s ease-in-out infinite;
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari: clip children to the circle */
}
.so-core > i {
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
}
.so-core > .b1 { background: radial-gradient(circle at 30% 34%, #3A7BFF 0%, rgba(58,123,255,0.75) 20%, rgba(58,123,255,0) 48%); animation: so-orbit-a 5.2s linear infinite; }
.so-core > .b2 { background: radial-gradient(circle at 70% 38%, #9B5CFF 0%, rgba(155,92,255,0.75) 20%, rgba(155,92,255,0) 48%); animation: so-orbit-b 6.8s linear infinite; }
.so-core > .b3 { background: radial-gradient(circle at 58% 74%, #FF4FA3 0%, rgba(255,79,163,0.75) 20%, rgba(255,79,163,0) 46%); animation: so-orbit-a 7.6s linear infinite reverse; }
.so-core > .b4 { background: radial-gradient(circle at 32% 70%, #34E0C8 0%, rgba(52,199,89,0.6) 18%, rgba(52,199,89,0) 42%); animation: so-orbit-b 9.4s linear infinite reverse; }
/* glass highlight + fine rim on top of the colours */
.so-core::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 24%, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.18) 16%, rgba(255,255,255,0) 34%);
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.35), inset 0 0 calc(var(--s) * 0.18) rgba(255,255,255,0.22);
  z-index: 2;
}
@keyframes so-spin { to { transform: rotate(360deg); } }
@keyframes so-breathe { 0%, 100% { transform: scale(0.94); } 50% { transform: scale(1.04); } }
@keyframes so-orbit-a {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.16); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes so-orbit-b {
  0%   { transform: rotate(0deg) scale(1.12); }
  50%  { transform: rotate(-180deg) scale(0.94); }
  100% { transform: rotate(-360deg) scale(1.12); }
}
/* pill placement (replaces the 5 green bars) */
.home-footer .voice-pill > .siri-orb { position: relative; z-index: 3; margin-left: 1px; }
.home-footer .voice-pill .siri-orb { --s: 16.5px; }

/* overlay: canvas waves + large orb */
.voice-orb {
  width: 100%;
  max-width: 320px;
  height: 132px;
  margin: 18px 0 8px;
}
.voice-orb .vo-waves {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.voice-orb .siri-orb--lg { --s: 84px; position: relative; z-index: 2; transition: transform 120ms linear; }
.voice-orb .siri-orb--lg::before { opacity: 0.55; inset: -30%; }
.voice-overlay[data-state="thinking"] .voice-orb .siri-orb--lg .so-core { animation-duration: 1.6s; }

@media (prefers-reduced-motion: reduce) {
  .siri-orb, .siri-orb::before, .so-core, .so-core > i { animation: none !important; }
  .siri-orb { transform: none !important; }
}

/* ===== v43: Voice pill near-black so the Siri orb pops (edges slightly lighter → refraction still hints) ===== */
.home-footer .voice-pill::before {
  background:
    radial-gradient(115% 190% at 50% 50%, rgba(6,6,8,0.94) 58%, rgba(6,6,8,0.86) 100%);
}
.home-footer .voice-pill::after {
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 38%, rgba(255,255,255,0) 55%);
}
html.is-android .home-footer .voice-pill { background: rgba(8,8,10,0.92); }
html.is-android .home-footer .voice-pill::before { background: linear-gradient(180deg, rgba(6,6,8,0.10), rgba(4,4,6,0.18)); }

/* ===== v44: voice — liquid morph pill ⇄ sheet + ChatGPT-voice-style sphere ===== */
.voice-morph {
  position: fixed;
  z-index: 1;
  pointer-events: none;
  will-change: clip-path, transform, opacity;
  transform-origin: 50% 100%;
}
.voice-morph > span { position: absolute; inset: 0; }
.voice-morph .vm-light { background: linear-gradient(145deg, rgba(248,248,250,0.94), rgba(236,236,240,0.9)); }
.voice-morph .vm-dark  { background: linear-gradient(180deg, #121215 0%, #050507 100%); }
.voice-sheet { z-index: 2; }

.voice-orb {
  width: 172px; height: 172px;
  max-width: none;
  margin: 18px 0 10px;
  border-radius: 50%;
}
.gpt-orb {
  position: relative;
  display: block;
  width: 164px; height: 164px;
  border-radius: 50%;
  will-change: transform;
}
.gpt-orb-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 50%; }
.gpt-orb-css { display: none; }
/* CSS fallback (no WebGL): rotating soft gradients + grain */
.gpt-orb.no-gl .gpt-orb-gl { display: none; }
.gpt-orb.no-gl .gpt-orb-css {
  display: block;
  position: absolute; inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #0A0718;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.gpt-orb.no-gl .gpt-orb-css::before {
  content: "";
  position: absolute; inset: -25%;
  background:
    radial-gradient(38% 34% at 28% 26%, #FF6A1A 0%, rgba(255,106,26,0.8) 40%, rgba(255,106,26,0) 72%),
    radial-gradient(40% 32% at 76% 70%, #7B4DFF 0%, rgba(123,77,255,0.75) 40%, rgba(123,77,255,0) 72%),
    conic-gradient(from 200deg at 50% 50%, #0A0718, #2a1466, #0A0718, #ff6a1a55, #0A0718);
  filter: blur(14px);
  animation: gpt-swirl calc(14s / var(--orb-speed, 0.4)) linear infinite;
}
.gpt-orb.no-gl .gpt-orb-css::after {
  content: "";
  position: absolute; inset: 0;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes gpt-swirl { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .gpt-orb.no-gl .gpt-orb-css::before { animation: none; }
}
.voice-morph .vm-logo { position: absolute; width: auto; z-index: 2; transform-origin: 0 50%; }

/* ===== v47: ANDROID ONLY (html.is-android) — bottom breathing room + no stray page scroll.
   iOS is untouched: every rule below is scoped to html.is-android. ===== */
html.is-android {
  /* Chrome/Android (non edge-to-edge PWA) reports safe-area-inset-bottom = 0: the viewport already ends
     right on the gesture bar, so bottom rows looked glued to it. Floor the bottom inset at 14px; every
     bar/sheet that uses var(--safe-b) (home row, profile row, bottom-bar, voice sheet, "+"/SENESCYT
     sheets, location sheet, WhatsApp composer) gets the extra air, and the profile photo --pw reserve
     accounts for it automatically. If Chrome draws edge-to-edge and reports a real inset, that wins. */
  --safe-b: max(14px, env(safe-area-inset-bottom, 0px));
  overscroll-behavior: none;                 /* no glow/bounce/pull-to-refresh on the document */
}
html.is-android body { overscroll-behavior: none; }

/* Pages that must never scroll as a document: home (already home-lock), profile, WhatsApp chat.
   Lock html/body and size the page box to the *dynamic* viewport (100vh fallback → 100dvh), so a
   fractional viewport (DPR 3.5 → 891.43 css px) or a large-viewport 100vh can't leave a 1px scroll. */
html.is-android:has(body[data-page="profile"]),
html.is-android:has(body[data-page="whatsapp"]),
html.is-android:has(body[data-page="specialty"]),
html.is-android:has(body[data-page="club"]),
html.is-android:has(body[data-page="medicos"]),
html.is-android:has(body[data-page="profile"]) body,
html.is-android:has(body[data-page="whatsapp"]) body,
html.is-android:has(body[data-page="specialty"]) body,
html.is-android:has(body[data-page="club"]) body,
html.is-android:has(body[data-page="medicos"]) body {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
html.is-android .page-profile,
html.is-android .wa-shell {
  height: 100vh;
  height: 100dvh;
  height: var(--app-h, 100dvh);
  min-height: 0;
  max-height: 100dvh;
  max-height: var(--app-h, 100dvh);
  overflow: hidden;
}
/* WhatsApp: the chat list scrolls, header + composer stay put (before: the whole page grew and scrolled) */
html.is-android .wa-messages { min-height: 0; overscroll-behavior: contain; }

/* Long lists (specialty photo grid, Club masonry, médicos): only the content box scrolls; the fixed
   bottom bar / Club button never move and the document itself never rubber-bands. */
html.is-android .page-specialty,
html.is-android .page-club,
html.is-android .app-shell {
  height: 100vh;
  height: 100dvh;
  height: var(--app-h, 100dvh);
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
html.is-android .page-specialty::-webkit-scrollbar,
html.is-android .page-club::-webkit-scrollbar,
html.is-android .app-shell::-webkit-scrollbar { display: none; }
html.is-android .panel-list { overscroll-behavior: contain; }

/* Floating sheets: a little more gap to the gesture bar than the iOS 8px */
html.is-android .action-sheet { margin-bottom: 12px; }

/* ===== v48: simulador WhatsApp — flujo "Soy médico" (listas y botones interactivos) ===== */
.bubble .wa-body { white-space: normal; }
.bubble .wa-body { overflow-wrap: anywhere; }   /* v72: enlaces largos (consulta de títulos SENESCYT) dentro de la burbuja */
.bubble .wa-list-btn, .bubble .wa-reply-btn {
  display: block; width: 100%; margin-top: 8px; padding: 8px 10px; border-top: 1px solid #e6e6e6;
  color: #027eb5; font-weight: 600; font-size: 0.9rem; text-align: center; background: none;
}
.bubble .wa-rows { margin-top: 6px; border-top: 1px solid #eee; display: grid; }
.bubble .wa-rows[hidden] { display: none; }
.bubble .wa-row { text-align: left; padding: 8px 4px; border-bottom: 1px solid #f0f0f0; font-size: 0.9rem; color: #111; background: none; }
.bubble .wa-row small { display: block; color: #777; font-size: 0.75rem; }
.bubble .wa-row:active, .bubble .wa-reply-btn:active, .bubble .wa-list-btn:active { background: #f3f3f3; }
.bubble .wa-sec { font-size: 0.72rem; color: #128c7e; font-weight: 700; padding: 6px 4px 2px; text-transform: uppercase; letter-spacing: 0.03em; }
.bubble.used .wa-list-btn, .bubble.used .wa-reply-btn, .bubble.used .wa-row { color: #999; pointer-events: none; }
.bubble.demo-note { background: #fff3cd; color: #6b5300; font-size: 0.82rem; }

/* v50: grupo de pruebas internas del menú del engranaje (solo ?debug=1) */
.settings-menu .menu-debug { border-top: 1px solid rgba(60,60,67,0.14); margin-top: 0.3rem; padding-top: 0.3rem; }

/* ===== v51: ANDROID bottom rows (Samsung S25 Ultra: profile row glued to / cut by the gesture bar).
   Chrome/PWA on Android usually reports safe-area-inset-bottom = 0 even when the page ends right on (or,
   edge-to-edge, under) the gesture handle. Real floor of 24px, or the reported inset + 12px when there is one.
   Every bottom row reads var(--safe-b): home row, profile row (← · AletheA verificated · +), results
   bottom-bar, voice sheet, "+"/SENESCYT sheets. iOS untouched (scoped to html.is-android). ===== */
html.is-android {
  --safe-b: max(24px, calc(env(safe-area-inset-bottom, 0px) + 12px));
}
/* profile: +3px slack in the photo-size reserve so the row can never be pushed past 100dvh (overflow:hidden) */
html.is-android .page-profile {
  --pw: max(220px, min(359px, calc(100vw - 34px), calc((100vh - 92px - var(--safe-t) - var(--safe-b)) * 0.50563)));
  --pw: max(220px, min(359px, calc(100vw - 34px), calc((100dvh - 92px - var(--safe-t) - var(--safe-b)) * 0.50563)));
  --pw: max(220px, min(359px, calc(100vw - 34px), calc((var(--app-h, 100dvh) - 92px - var(--safe-t) - var(--safe-b)) * 0.50563)));
}

/* ===== v51: AletheA Voice dock (grid + profile, js/voice-dock.js) — only during a voice session ===== */
.vdock {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 24px), 400px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 7px;
  border-radius: 30px;
  z-index: 35;              /* above the bottom bar (30), below the category panel (40) and the city window (45/50) */
  animation: vdockIn 0.42s cubic-bezier(0.32, 0.72, 0, 1) both;
}
@keyframes vdockIn { from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.97); } }
.vdock--specialty { bottom: calc(14px + var(--safe-b) + 58px + 10px); }
.vdock--profile { top: calc(var(--safe-t) + 10px); }
@keyframes vdockInTop { from { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(0.97); } }
.vdock--profile { animation-name: vdockInTop; }
.vdock-orb {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 50%;
  padding: 0; border: 0; background: transparent;
  display: grid; place-items: center;
}
.vdock .gpt-orb { width: 44px; height: 44px; }
.vdock-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.vdock-status {
  margin: 0;
  font-size: 0.86rem; font-weight: 600; line-height: 1.25;
  color: #111;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vdock-sub {
  margin: 0;
  font-size: 0.74rem; line-height: 1.2;
  color: #6b6b70;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vdock-sub:empty { display: none; }
.vdock[data-state="tap"] .vdock-status { color: var(--red); }
.vdock-form { display: none; align-items: center; gap: 6px; margin-top: 4px; }
.vdock.text-mode .vdock-form { display: flex; }
.vdock-input {
  flex: 1; min-width: 0;
  height: 34px; padding: 0 12px;
  border-radius: 17px; border: 0;
  background: rgba(255,255,255,0.8);
  font: inherit; font-size: 16px; /* no iOS zoom */
}
.vdock-send {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: #111; color: #fff; display: grid; place-items: center;
}
.vdock-send svg { width: 16px; height: 16px; }
.vdock-chip {
  align-self: flex-start;
  margin-top: 5px;
  padding: 5px 11px;
  border-radius: 14px;
  background: #111; color: #fff;
  font-size: 0.78rem; font-weight: 600;
  text-decoration: none;
}
.vdock-chip[hidden] { display: none; }
.vdock-close {
  flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,0.6); color: #333;
  display: grid; place-items: center;
}
.vdock-close svg { width: 15px; height: 15px; }
/* grid: leave room for the dock above the bottom bar */
html.vdock-on .page-specialty { padding-bottom: calc(96px + 72px + var(--safe-b)); }
/* grid: card numbers for "ábreme el número tres" (only during the voice session) */
.oval-card .vz-num {
  position: absolute;
  top: 4%; left: 4%;
  z-index: 3;
  min-width: 26px; height: 26px; padding: 0 6px;
  border-radius: 13px;
  background: rgba(17,17,17,0.82); color: #fff;
  font-size: 0.8rem; font-weight: 700; line-height: 26px; text-align: center;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.85);
  pointer-events: none;
}
.oval-card.vz-pick .oval-photo { box-shadow: 0 0 0 3px var(--red); transition: box-shadow 0.2s; }

/* v51: 6.º botón "Llamar" en la hoja del "+" (solo Presence): misma fila y mismo estilo; con 6 botones el círculo
   se ajusta al ancho (máx. 52px, mín. 44px) y, solo si aun así no cabe (< ~360px), pasa a una 2.ª fila centrada */
.action-icons { flex-wrap: wrap; row-gap: 0.7rem; }
.action-icons:has(> #actCall) { column-gap: 8px; }
.action-icons:has(> #actCall) .action-ico { width: max(44px, min(52px, calc((100% - 40px) / 6))); height: auto; aspect-ratio: 1; }

/* ===== v54: AletheA Voice EN VIVO (js/voice-live.js) — escenario (iframe) + cápsula con temporizador ===== */
.vlive-stage {
  position: fixed; inset: 0; width: 100%; height: 100vh; height: var(--app-h, 100dvh);
  border: 0; z-index: 60; background: var(--bg, #f2f2f2); display: none;
}
.vlive-stage.on { display: block; }
html.vlive-staged, html.vlive-staged body { overflow: hidden; }
.vdock.vlive-cap { z-index: 70; }
.vdock.vlive-cap[hidden] { display: none; }
.vlive-timer {
  flex: 0 0 auto; min-width: 34px; text-align: right;
  font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #6b6b70;
}
.vlive-timer.warn { color: var(--red); }
.voice-overlay.live-mode .voice-form { display: none; }

/* ===== v55: etiqueta de promoción (Boost; desde v63 «Ads», ver bloque v63 al final) (Boost, máx. 2 por especialidad+ciudad) — pequeña y discreta, liquid glass como las píldoras
   del panel. En la demo no hay ningún boost activo (ver js/grid-order.js). ===== */
.oval-card .boost-tag {
  position: absolute; top: 7%; left: 50%; transform: translateX(-50%); z-index: 2;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.25; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  background: linear-gradient(135deg, rgba(255,255,255,0.30), rgba(255,255,255,0.10) 60%, rgba(255,255,255,0.18));
  -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: inset 0 1px 0.5px rgba(255,255,255,0.75), 0 2px 8px rgba(0,0,0,0.12);
}
html.is-android .oval-card .boost-tag { background: rgba(0,0,0,0.24); border-color: rgba(255,255,255,0.38); }
.oval-card:has(.vz-num) .boost-tag { left: auto; right: 6%; transform: none; }  /* con el número de voz a la izquierda */

/* v57: ficha de médico del alta sin foto (silueta clara) → nombre y datos en oscuro */
body.photo-placeholder .profile-card { background: #f1f1f3; }
body.photo-placeholder .profile-meta, body.photo-placeholder .profile-meta * { color: #1c1c1e; text-shadow: none; }
/* v57: horario y dirección en la hoja del "+" */
.act-info { display: grid; gap: 8px; margin: 0 4px 14px; padding: 12px 14px; border-radius: 22px; background: rgba(255,255,255,0.55); }
.act-info[hidden] { display: none; }
.act-info .ai-row { display: flex; gap: 12px; font-size: 14px; line-height: 1.4; color: #1c1c1e; }
.act-info .ai-k { flex: none; width: 74px; color: #6e6e73; }
.act-info .ai-v { flex: 1; min-width: 0; font-weight: 500; }

/* ===== v60: inicio — el engranaje se reemplaza por la píldora de texto "Soy médico" (mismo lugar, mismo menú).
   Vidrio/degradado de los botones del inicio (#FEFEFE → #E7E7E7, trazo blanco 1px). Centro vertical = centro de la
   píldora Club (top 20 + 12 = 32px + safe-t), así las dos quedan alineadas en la fila superior. ===== */
.page-home > .home-settings.home-doc-pill {
  top: calc(19px + var(--safe-t));
  right: 24px;
  width: auto;
  height: 26px;
  padding: 0 12px;
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: linear-gradient(to top, #E7E7E7, #FEFEFE);
  border: 1px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 4px 12px -4px rgba(0,0,0,0.08);
  opacity: 1;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  color: #3a3a3c;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms cubic-bezier(0.32, 0.72, 0, 1);
}
.page-home > .home-settings.home-doc-pill::before { content: ""; position: absolute; inset: -8px -6px; }  /* área táctil ≥ 44px */
.page-home > .home-settings.home-doc-pill:active { transform: scale(0.95); transition-duration: 80ms; }
.page-home > .home-settings.home-doc-pill.is-open { color: #1c1c1e; }
.page-home > .settings-menu { top: calc(54px + var(--safe-t)); right: 24px; }   /* borde derecho alineado con la píldora */

/* ===== v62 — sello Presence y cuadrícula (aprobado en maqueta mock-badge) =====
   a) Sello Presence abajo a la DERECHA, montado sobre el borde del óvalo (como el check de Instagram), ~23px a 412 de ancho,
      aro blanco + sombra sutil. El óvalo es un "estadio" (radio = ancho/2): el punto del borde a 45° abajo-derecha
      está a 14.6% del ancho desde la derecha y a 0.146·ancho (= 9.93% del alto, aspect-ratio 0.68) desde abajo. */
.oval-card { --seal: clamp(20px, 5.6vw, 24px); }
.oval-card img.verified-seal {
  left: auto; transform: none;
  right: calc(14.6% - var(--seal) / 2);
  bottom: calc(9.93% - var(--seal) / 2);
  width: var(--seal); height: var(--seal);
  box-sizing: border-box; padding: 1.5px;
  background: #fff; border-radius: 50%;
  filter: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.16), 0 0 0 0.5px rgba(0,0,0,0.04);
}
/* c) título de especialidad más firme (mismo tamaño y peso) */
.spec-title { color: #5e5e62; }
/* b) blindaje: nada puede asomar por el borde derecho de la cuadrícula */
html:has(body[data-page="specialty"]), body[data-page="specialty"] { overflow-x: clip; }

/* ===== v63 — «Ads» (Promocionar perfil / boost) — aprobado en maqueta mock-badge, variante A =====
   Médicos con promoción vigente (solo Presence + boostUntil; máx. 2 por especialidad+ciudad, salen primero; orden en js/grid-order.js):
   la palabra «Ads» en gris medio, sin píldora, sin fondo ni borde, centrada justo encima del óvalo (estilo «Patrocinado» de Instagram)
   + un hilo blanco de 1px con sombra muy suave alrededor del óvalo. El sello rojo sigue abajo a la derecha.
   Reemplaza la píldora de vidrio «Destacado» de v55. */
.oval-card.is-boost .boost-tag,
.oval-card.is-boost:has(.vz-num) .boost-tag,
html.is-android .oval-card.is-boost .boost-tag {
  position: absolute; z-index: 3; pointer-events: none;
  top: auto; bottom: calc(100% + 4px); left: 50%; right: auto; transform: translateX(-50%);
  padding: 0; margin: 0; border: 0; border-radius: 0;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  font-size: 10.5px; font-weight: 500; line-height: 1; letter-spacing: 0.01em; white-space: nowrap;
  color: #8e8e93; text-shadow: none;
}
.oval-card.is-boost:not(.vz-pick) .oval-photo { box-shadow: 0 0 0 1px rgba(255,255,255,0.9), 0 4px 12px -6px rgba(0,0,0,0.22); }

/* ===== v64 — inicio: la píldora «Soy médico» (v60) se reemplaza por un botón redondo con 4 puntos (grid 2×2, tipo menú de apps),
   sin texto (la app es para pacientes; el menú sigue siendo «¿Eres médico? Únete» / «Mi perfil»). Mismo lugar y mismo vidrio
   (#FEFEFE → #E7E7E7, trazo blanco 1px, sombra suave), 42px como el botón de atrás, centro vertical = centro de la píldora Club
   (top 20 + 12 = 32px + safe-t). El menú se alinea a la derecha con el botón. ===== */
.page-home > .home-settings.home-menu-btn {
  top: calc(11px + var(--safe-t));
  right: 20px;
  width: 42px; height: 42px;
  padding: 0; box-sizing: border-box;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(to top, #E7E7E7, #FEFEFE);
  border: 1px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 4px 12px -4px rgba(0,0,0,0.10);
  opacity: 1;
  color: #3a3a3c;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms cubic-bezier(0.32, 0.72, 0, 1), background 160ms;
}
.page-home > .home-settings.home-menu-btn svg { width: 18px; height: 18px; display: block; fill: currentColor; }
.page-home > .home-settings.home-menu-btn::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; }  /* área táctil 48px */
.page-home > .home-settings.home-menu-btn:active { transform: scale(0.94); transition-duration: 80ms; }
.page-home > .home-settings.home-menu-btn.is-open { background: linear-gradient(to top, #DEDEDF, #F6F6F6); color: #1c1c1e; }
.page-home > .home-settings.home-menu-btn:focus-visible { outline: 2px solid rgba(58,58,60,0.45); outline-offset: 2px; }
.page-home > .settings-menu { top: calc(61px + var(--safe-t)); right: 20px; }   /* 8px bajo el botón, borde derecho alineado con él */

/* v75 — AletheA Wellness: menú con negocios (sin sello) + separador «Con título verificado» + profesionales con sello */
.panel[data-cat="wellness"] .panel-list { padding: 1rem 0 0.6rem !important; }
.panel-list .spec.wellness-item { padding: 0.44rem 0; font-size: 19px; }
.panel-list .spec.wellness-item.wl-pro { display: flex; align-items: center; justify-content: center; gap: 7px; }
.panel-list .spec.wellness-item.wl-pro img { width: 17px; height: 17px; transform: translateY(1px); }
.panel-list .wl-sep { display: flex; align-items: center; gap: 10px; margin: 0.55rem 2.2rem 0.25rem; color: #8e8e93; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.panel-list .wl-sep::before, .panel-list .wl-sep::after { content: ""; flex: 1; height: 1px; background: rgba(0,0,0,0.1); }
.overlay:has(.panel[data-cat="wellness"]) { padding-bottom: 120px; }

/* ===== v77: AletheA Voice — orbe de humo (maqueta aprobada /workspace/mock-orb; js/smoke-orb.js) =====
   Reemplaza a la esfera naranja/violeta (.gpt-orb, v44) SOLO en la hoja de voz; el dock y la barra de la voz en vivo
   siguen con js/voice-orb.js. La hoja es más alta (como en la maqueta: 54px bajo el borde superior) para que el orbe
   quede centrado; si no cabe (pantallas bajas), la hoja se desplaza con el scroll nativo (iOS: momentum + contain).
   El rojo del sello (#FD3B3B) solo va en el hilo del humo (shader) y en la mancha b5 del respaldo CSS. */
.voice-sheet {
  --orb: min(300px, 78vw, 42vh);
  height: calc(100vh - 68px - var(--safe-t) - var(--safe-b));
  height: calc(var(--app-h, 100dvh) - 68px - var(--safe-t) - var(--safe-b));
  max-height: calc(var(--app-h, 100dvh) - 68px - var(--safe-t) - var(--safe-b));
  overflow-x: hidden; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  scrollbar-width: none;
}
@supports (height: 1dvh) { .voice-sheet { --orb: min(300px, 78vw, calc(var(--app-h, 100dvh) * 0.42)); } }
.voice-sheet::-webkit-scrollbar { display: none; }
.voice-sheet > * { flex-shrink: 0; }
.voice-stage { flex: 1 0 auto; display: grid; place-items: center; width: 100%; min-height: calc(var(--orb) + 36px); }
.smoke-orb { position: relative; width: var(--orb); height: var(--orb); display: grid; place-items: center; touch-action: manipulation; isolation: isolate; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.smoke-orb-gl { position: absolute; inset: -20%; width: 140%; height: 140%; display: block; pointer-events: none; }  /* 20% extra por lado: halo */
.smoke-orb-css { display: none; }
.smoke-orb::after { /* sombra de contacto suave bajo la esfera (ambos modos) */
  content: ""; position: absolute; left: 18%; right: 18%; bottom: -7%; height: 10%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(60,80,110,0.20), rgba(60,80,110,0)); filter: blur(6px); z-index: -1;
  transform: scaleX(calc(1 + var(--lv, 0) * 0.12));
}
/* botón central (vidrio esmerilado + aro azul suave); anula el tamaño de la .voice-orb antigua */
.voice-sheet .voice-orb.smoke-orb-btn {
  position: relative; z-index: 3; width: 66px; height: 66px; max-width: none; margin: 0; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 50% 35%, rgba(150,168,190,0.52), rgba(104,124,150,0.46));
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  border: 1.5px solid rgba(255,255,255,0.72);
  box-shadow: 0 0 0 1.5px rgba(122,165,230,0.55), inset 0 1px 0 rgba(255,255,255,0.6), 0 6px 18px rgba(40,60,90,0.18);
  transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 300ms;
}
.voice-sheet .smoke-orb-btn:active { transform: scale(0.93); }
.smoke-orb-btn .ico { width: 26px; height: 26px; filter: drop-shadow(0 1px 1px rgba(30,40,60,0.25)); }
.smoke-orb-btn .ico-spk { display: none; }
.smoke-orb[data-state="speaking"] .smoke-orb-btn .ico-mic { display: none; }
.smoke-orb[data-state="speaking"] .smoke-orb-btn .ico-spk { display: block; }
.smoke-orb[data-state="listening"] .smoke-orb-btn { animation: smoke-ring 1.8s cubic-bezier(0.2, 0, 0, 1) infinite; }
@keyframes smoke-ring { 0% { box-shadow: 0 0 0 1.5px rgba(122,165,230,0.6), 0 0 0 0 rgba(122,165,230,0.35), inset 0 1px 0 rgba(255,255,255,0.6), 0 6px 18px rgba(40,60,90,0.18); }
  100% { box-shadow: 0 0 0 1.5px rgba(122,165,230,0.6), 0 0 0 16px rgba(122,165,230,0), inset 0 1px 0 rgba(255,255,255,0.6), 0 6px 18px rgba(40,60,90,0.18); } }
/* respaldo CSS (sin WebGL o ?css=1) */
.smoke-orb.no-gl .smoke-orb-gl { display: none; }
.smoke-orb.no-gl .smoke-orb-css {
  display: block; position: absolute; inset: 0; border-radius: 50%; overflow: hidden; isolation: isolate;
  background: radial-gradient(circle at 50% 45%, #f4f5f7 0%, #dfe6ef 55%, #b9cbe0 100%);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  transform: scale(calc(1 + var(--lv, 0) * 0.06));
}
.smoke-orb-css i { position: absolute; border-radius: 50%; filter: blur(22px); will-change: transform;
  animation: smoke-drift calc(var(--d) / var(--sp, 1)) ease-in-out infinite alternate; }
.smoke-orb-css .b1 { --d: 9s;  width: 70%; height: 60%; left: -8%; top: -6%;  background: #fff6e6; }
.smoke-orb-css .b2 { --d: 11s; width: 75%; height: 70%; right: -14%; bottom: -12%; background: #8fb0d6; opacity: .85; }
.smoke-orb-css .b3 { --d: 7s;  width: 55%; height: 50%; left: 22%; top: 28%; background: #c9dcf0; }
.smoke-orb-css .b4 { --d: 13s; width: 40%; height: 34%; left: 6%; bottom: 4%; background: #f1e2c4; opacity: .8; }
.smoke-orb-css .b5 { --d: 10s; width: 26%; height: 20%; right: 18%; top: 14%; background: #fd3b3b; opacity: .16; }   /* hilo del sello */
@keyframes smoke-drift { 0% { transform: translate(0,0) rotate(0deg) scale(calc(1 + var(--lv,0)*.25)); }
  50% { transform: translate(8%, -6%) rotate(40deg) scale(calc(1.08 + var(--lv,0)*.3)); }
  100% { transform: translate(-6%, 7%) rotate(-30deg) scale(calc(0.96 + var(--lv,0)*.25)); } }
.smoke-orb-css .glassy { position: absolute; inset: 0; border-radius: 50%; z-index: 2;
  background:
    radial-gradient(38% 26% at 34% 22%, rgba(255,255,255,0.75), rgba(255,255,255,0) 70%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0) 62%, rgba(255,255,255,0.55) 96%, rgba(255,255,255,0.9) 100%);
  box-shadow: inset -10px -14px 30px rgba(70,100,140,0.18); }
@media (prefers-reduced-motion: reduce) { .smoke-orb-css i, .smoke-orb[data-state="listening"] .smoke-orb-btn { animation: none; } }
/* textos como en la maqueta (mismos textos; solo el ancho para que no queden en una línea larga) */
.voice-sheet .voice-status { margin-top: 6px; line-height: 1.22; max-width: 18ch; text-wrap: balance; }
.voice-sheet .voice-sheet-logo { flex-shrink: 0; }
@media (max-height: 700px) { .voice-sheet { height: calc(var(--app-h, 100dvh) - 38px - var(--safe-t) - var(--safe-b)); max-height: calc(var(--app-h, 100dvh) - 38px - var(--safe-t) - var(--safe-b)); } .voice-sheet .voice-status { font-size: 20px; } }

/* ===== v85: AletheA Pet (maqueta /workspace/mock-pets) — Emergencias 24/7 (punto verde) · Veterinarias · SERVICIOS ===== */
.panel[data-cat="pets"] { height: auto !important; max-height: 82dvh; display: flex; flex-direction: column; }
.panel[data-cat="pets"] .panel-list { padding: 1.5rem 0 0.4rem !important; display: block; flex: 0 0 auto !important; }
.panel[data-cat="pets"] .panel-group { display: block; text-align: center; }
.panel[data-cat="pets"] .panel-list .spec.pet-item { display: block; width: 100%; font-size: 24px; padding: 0.45rem 0; }
.panel[data-cat="pets"] .pet-er { display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; text-decoration: none; }
.panel[data-cat="pets"] .pet-er .spec-now { position: static; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #34c759; transform: translateY(-1px); }
.panel[data-cat="pets"] .wellness-item { display: block; width: 100%; }
.panel[data-cat="pets"] .pet-friends { position: static; transform: none; width: 34%; margin: 0.2rem auto 0; order: 3; }
.panel[data-cat="pets"] .panel-foot { order: 4; }

/* ===== v90 (Pancho, maqueta voice3-negro): cápsula de voz negra y corta con Thea completa DENTRO del negro =====
   Sin el logo «AletheA Voice». Thea va a la izquierda con su punto rojo (incluido en la imagen) y la esfera animada a la derecha.
   Misma altura que antes (33.85px, alineada con el círculo de WhatsApp) y el mismo vidrio negro. Thea no sale del negro:
   queda con margen interno (overflow: hidden de v32 intacto). Abre la voz igual que antes (#voicePill → js/voice.js). */
.home-footer .voice-pill.voice-thea {
  --th-h: 24px;                      /* alto de Thea → ~4.9px de aire arriba y abajo (punto rojo incluido) */
  gap: 7.5px;
  padding: 0 9px 0 9.5px;            /* esfera centrada en la curva derecha; Thea con aire parejo a la izquierda */
}
.home-footer .voice-pill.voice-thea > .vp-thea { position: relative; z-index: 3; display: block; flex: none; line-height: 0; }
.home-footer .voice-pill.voice-thea > .vp-thea img {
  display: block;
  height: var(--th-h);
  width: auto;                       /* 540×472 → ≈ 27.5 × 24 px (imagen 55×48 a 2x) */
  aspect-ratio: 540 / 472;
  filter: drop-shadow(0 0.5px 1px rgba(0,0,0,0.35));
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.home-footer .voice-pill.voice-thea > .siri-orb { margin-left: 0; }

/* ===================================================================================================================
   v92 — cápsula de llamada de Thea (js/voice-call.js; maquetas mock-home-thea/call2-*.jpg). Al tocar la cápsula negra del
   inicio crece hasta esta cápsula negra (≈306×52) anclada abajo y centrada; borde de luz fino arriba + leve reflejo (no es vidrio).
   ================================================================================================================ */
html.vc-on .home-footer .voice-pill { visibility: hidden; }
.home-footer .wa-circle { transition: opacity 0.12s ease; }   /* v93: más rápido, que no asome bajo la apertura */
html.vc-on .home-footer .wa-circle { opacity: 0; pointer-events: none; }
.vc-dim {
  position: fixed; inset: 0; z-index: 73; pointer-events: none;
  background: rgba(28, 28, 32, 0.12); -webkit-backdrop-filter: blur(0.5px); backdrop-filter: blur(0.5px);
}
.vc-dim[hidden], .vc-cap[hidden], .vc-status[hidden], .vc-chip[hidden] { display: none; }
.vc-cap {
  position: fixed; z-index: 75; left: 0; top: 0; width: 306px; height: 52px; border-radius: 26px; box-sizing: border-box;
  display: flex; align-items: center; gap: 9px; padding: 0 7px 0 9px; isolation: isolate;
  color: #f5f5f7; font-family: Inter, -apple-system, system-ui, sans-serif; -webkit-tap-highlight-color: transparent;
}
/* v93: el fondo negro va en su propia capa: en la apertura solo ella se estira (transform + border-radius), el contenido no */
.vc-bg {
  position: absolute; z-index: 0; inset: 0; border-radius: 26px; overflow: hidden; pointer-events: none; transform-origin: 50% 50%;
  background: #0b0b0c; will-change: transform;
  box-shadow: 0 14px 34px rgba(0,0,0,0.28), 0 3px 10px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.10), inset 0 0 0 0.5px rgba(255,255,255,0.08);
}
.vc-bg::before {   /* borde de luz muy fino arriba */
  content: ""; position: absolute; z-index: 2; top: 0; left: 13%; right: 13%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.42) 30%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.42) 70%, rgba(255,255,255,0));
}
.vc-bg::after {    /* leve reflejo */
  content: ""; position: absolute; z-index: 1; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.075) 0%, rgba(255,255,255,0.02) 38%, rgba(255,255,255,0) 55%),
              radial-gradient(120% 90% at 50% -30%, rgba(255,255,255,0.06), rgba(255,255,255,0) 60%);
}
.vc-cap > :not(.vc-bg) { position: relative; z-index: 3; }
/* v93: ícono nuevo de Thea (círculo granulado rojo / azul / negro, 38 px): base WebP 2x + humo reactivo encima + ojitos aparte */
.vc-thea { flex: none; width: 38px; height: 38px; position: relative; transform-origin: 50% 50%; line-height: 0; }
.vc-thea::before {  /* brillo azul cuando habla */
  content: ""; position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(107,155,232,0.34), rgba(107,155,232,0)); opacity: 0; transition: opacity 0.3s ease;
}
.vc-cap.is-talking .vc-thea::before { opacity: 1; }
.vc-ico { position: absolute; inset: 0; display: block; animation: vc-breathe 3.6s ease-in-out infinite; }
.vc-ico-in { position: absolute; inset: 0; display: block; border-radius: 50%; overflow: hidden; transform-origin: 50% 50%; will-change: transform;
  box-shadow: 0 2px 6px rgba(0,0,0,0.45); background: #2a3550; }
.vc-ico-base, .vc-ico-base img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.vc-orb { position: absolute; inset: 0; display: block; border-radius: 50%; overflow: hidden; }
.vc-orb .smoke-orb-gl { inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.35s ease; }
.vc-orb.on .smoke-orb-gl { opacity: 1; }
.vc-orb.no-gl .smoke-orb-gl { display: none; }
.vc-eyes { position: absolute; inset: 0; display: block; pointer-events: none; transform-origin: 50% 40%; will-change: transform; }
.vc-eye {   /* proporciones del ícono: 0.110 × 0.240 del círculo, centros a 0.378 / 0.622 y 0.403 */
  position: absolute; top: calc(40.3% - 4.6px); width: 4.3px; height: 9.2px; margin-left: -2.15px; border-radius: 3px;
  background: #fff; transform-origin: 50% 50%; box-shadow: 0 0 1px rgba(255,255,255,0.4);
}
.vc-eye:first-child { left: 37.8%; }
.vc-eye:last-child { left: 62.2%; }
@keyframes vc-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.vc-in { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; }
.vc-wave { flex: 1; min-width: 0; height: 34px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; }
.vc-wave i { display: block; flex: none; width: 2px; height: 30px; border-radius: 2px; background: #d1d1d6; transform: scaleY(0.1); transform-origin: 50% 50%; will-change: transform; }
.vc-wave i.g { background: #6B9BE8; }   /* v93: acento azul del ícono (antes verde #3ED45E) */
.vc-wave i.d { background: #5a5a5e; }
.vc-btns { flex: none; display: flex; gap: 6px; }
.vc-btn {
  width: 37px; height: 37px; border-radius: 50%; border: 0; padding: 0; margin: 0; flex: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  background: #2c2c2e; color: #f5f5f7; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform 0.12s ease, background-color 0.18s ease, color 0.18s ease; -webkit-tap-highlight-color: transparent;
}
.vc-btn:active { transform: scale(0.92); }
.vc-btn:focus-visible { outline: 2px solid #6B9BE8; outline-offset: 2px; }
.vc-btn svg { width: 18px; height: 18px; display: block; }
.vc-mic .vc-mic-off { display: none; }
.vc-cap.is-muted .vc-mic { background: #f5f5f7; color: #0b0b0c; }
.vc-cap.is-muted .vc-mic .vc-mic-on { display: none; }
.vc-cap.is-muted .vc-mic .vc-mic-off { display: block; }
.vc-end { background: #ff3b30; background: linear-gradient(180deg, #ff4a4a, #e52b2b); color: #fff; box-shadow: 0 3px 10px rgba(229,43,43,0.35), inset 0 1px 0 rgba(255,255,255,0.3); }
.vc-status {
  position: fixed; z-index: 74; left: 0; right: 0; top: 0; margin: 0; height: 16px; pointer-events: none;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font: 500 12.5px/16px Inter, -apple-system, system-ui, sans-serif; letter-spacing: -0.01em; color: #3a3a3c; text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.vc-dot { display: none; flex: none; width: 5px; height: 5px; border-radius: 50%; background: #4B7BC5; box-shadow: 0 0 0 3px rgba(75,123,197,0.2); }
.vc-status.has-dot .vc-dot { display: block; animation: vc-dot 1.2s ease-in-out infinite; }
@keyframes vc-dot { 50% { opacity: 0.45; } }
.vc-chip {
  position: fixed; z-index: 76; left: 50%; transform: translateX(-50%); top: 0; white-space: nowrap;
  padding: 8px 14px; border-radius: 18px; background: #0b0b0c; color: #fff; text-decoration: none;
  font: 600 13px/18px Inter, -apple-system, system-ui, sans-serif; box-shadow: 0 6px 18px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.12);
}
.vc-cap.vc-opening .vc-btn, .vc-cap.vc-closing .vc-btn { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .vc-ico, .vc-status.has-dot .vc-dot { animation: none; }
}

/* ===================================================================================================================
   v94 — diseño final de Pancho para el inicio (referencia mock-home-thea, 434×930). Fondo: difuso pastel gris/celeste/durazno
   a pantalla completa (cover) en lugar de la gota de vidrio. Medidas tomadas de la referencia (en 434×930):
   píldora Club 12,27 · 99×24 | ubicación 104×36 | barra 372×85 (fichas 70×70) | WhatsApp 48 + 8 + cápsula de voz 124×48,
   con 38px entre ubicación y barra, 25px entre barra y cápsulas y ≈7.6% del alto bajo las cápsulas (71px en 930).
   El botón de menú (4 puntos) se queda: es el único acceso al menú «¿Eres médico? Únete» / «Mi perfil».
   ================================================================================================================ */
.page-home {
  background-color: #e4e6e5;
  background-image: url("../img/brand/home-bg94.jpg");
  background-image: image-set(url("../img/brand/home-bg94.webp") type("image/webp"), url("../img/brand/home-bg94.jpg") type("image/jpeg"));
}
.cats-lens > span {
  background-image: url("../img/brand/home-bg94.jpg");
  background-image: image-set(url("../img/brand/home-bg94.webp") type("image/webp"), url("../img/brand/home-bg94.jpg") type("image/jpeg"));
}
/* aire bajo las cápsulas: 7.63% del alto (71px en 930, como la referencia), nunca menos que el piso de la barra de gestos + 18px */
html.home-lock body .app.page-home { padding-bottom: max(calc(18px + var(--safe-b)), calc(var(--app-h, 100dvh) * 0.0763)); }

/* arriba: píldora Club (vidrio gris hundido, como la referencia) y el botón de menú alineado a su centro */
.page-home > .brand-pill#clubPill {
  top: calc(27px + var(--safe-t));
  left: 10px;                          /* + 2px de margen de .page-home = 12px de la referencia */
  height: 24px;
  padding: 0 9.6px;
  border: 0;
  background: rgba(150,150,154,0.16);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow: inset 0 2px 3px -1px rgba(0,0,0,0.14), inset 0 -1px 0.5px rgba(255,255,255,0.75);
}
.page-home > .brand-pill#clubPill .club-logo { opacity: 0.9; }
.page-home > .home-settings.home-menu-btn { top: calc(18px + var(--safe-t)); right: 12px; }   /* centro = centro de la píldora Club (39px); ≥ 12px del borde (v64) */
.page-home > .settings-menu { top: calc(68px + var(--safe-t)); right: 12px; }

/* ubicación: píldora clara de vidrio, 36px, texto negro seminegrita */
.page-home .home-search {
  height: 36px;
  box-sizing: border-box;
  margin: 0 auto 38px;
  padding: 0 12px 0 9px;
  gap: 5px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.92);
  box-shadow: inset 0 2px 3px -1px rgba(0,0,0,0.07), inset 0 -1px 0.5px rgba(255,255,255,0.6);
}
.page-home .home-search svg { width: 18px; height: 18px; stroke-width: 2; }

/* barra wellness · health · mascota: vidrio casi transparente con canto blanco; fichas 70×70 de vidrio blanco */
.page-home .home-cats {
  width: 372px;
  max-width: calc(100vw - 32px);
  height: 85px;
  border-radius: 42.5px;
  padding-left: 11px !important;
  padding-right: 11px !important;
}
html:not(.is-android) .page-home .home-cats > .cats-lens,
html:not(.is-android) .page-home .home-cats::after { border-radius: 42.5px; }
html.is-android .page-home .home-cats {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.62);
  -webkit-backdrop-filter: blur(6px) saturate(150%);
  backdrop-filter: blur(6px) saturate(150%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.7), inset 0 -1px 1px rgba(255,255,255,0.35);
}
.page-home .home-cats .cat-btn,
.page-home .home-cats .cat-btn.active,
.page-home .home-cats .cat-btn.is-default {
  flex: 0 0 70px;
  width: 70px;
  height: 70px;
  border-radius: 28px;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,0.95);
  background: linear-gradient(180deg, #F9F9F9 0%, #EFEFEF 45%, #E3E3E3 100%);
  box-shadow: inset 0 -2px 2px rgba(255,255,255,0.7), inset 0 -10px 16px -10px rgba(0,0,0,0.05), 0 5px 12px -7px rgba(0,0,0,0.20);
}
.page-home .home-cats .cat-btn[data-cat="wellness"],
.page-home .home-cats .cat-btn[data-cat="pets"],
.page-home .home-cats .cat-btn[data-cat="wellness"].active,
.page-home .home-cats .cat-btn[data-cat="pets"].active,
.page-home .home-cats .cat-btn[data-cat="wellness"].is-default,
.page-home .home-cats .cat-btn[data-cat="pets"].is-default {
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.85);
  background: linear-gradient(180deg, #ECECEC 0%, #DEDEDE 45%, #CBCBCB 92%, #D6D6D6 100%);
  box-shadow: inset 0 -1.5px 1px rgba(255,255,255,0.75), inset 0 2px 3px rgba(255,255,255,0.55), 0 5px 12px -7px rgba(0,0,0,0.22);
}
/* en la referencia solo health lleva punto (rojo); wellness y mascota van sin punto */
.page-home .home-cats .cat-btn[data-cat="wellness"] .dot,
.page-home .home-cats .cat-btn[data-cat="pets"] .dot { display: none; }
.page-home .home-cats .cat-btn[data-cat="wellness"] .cat-label { font-size: 14px; color: #2c2c2e; letter-spacing: -0.2px; }
.page-home .home-cats .cat-btn[data-cat="health"] .cat-label { font-size: 18.5px; font-weight: 600; letter-spacing: -0.9px; }
.page-home .home-cats .cat-btn[data-cat="health"] .dot { background: #F23A3A; }
.page-home .home-cats .cat-btn .pet-ico { height: 32px; }

/* abajo: WhatsApp (círculo blanco sólido, ícono negro en contorno) + cápsula de voz, centrados como grupo */
html.home-lock .page-home .home-footer {
  padding: 25px 0 0;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.home-footer .wa-circle,
html:not(.is-android) .home-footer .wa-circle,
html.is-android .home-footer .wa-circle {
  width: 48px; height: 48px;
  align-self: center;
  background: #fff;
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 2px 10px -4px rgba(0,0,0,0.12);
}
.home-footer .wa-circle img { width: 26px; height: 26px; }

/* cápsula de voz: la imagen de Pancho manda (voice-aurora.webp, 248×96 = 2x; PNG de respaldo), sin vidrio ni capas oscuras encima */
.home-footer .voice-pill.voice-aurora,
html:not(.is-android) .home-footer .voice-pill.voice-aurora,
html.is-android .home-footer .voice-pill.voice-aurora {
  width: 124px;
  height: 48px;
  flex: none;
  align-self: center;
  padding: 0;
  gap: 0;
  border: 0;
  border-radius: 24px;
  background: #061f27;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}
.home-footer .voice-pill.voice-aurora::before,
.home-footer .voice-pill.voice-aurora::after { display: none; }
.voice-aurora > .vp-aurora,
.voice-aurora > .vp-sheen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.voice-aurora > .vp-aurora {
  z-index: 0;
  background-image: url("../img/brand/voice-aurora.png");
  background-image: image-set(url("../img/brand/voice-aurora.webp") type("image/webp"), url("../img/brand/voice-aurora.png") type("image/png"));
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform-origin: 100% 0%;
  will-change: transform;
  animation: vp-aurora-drift 11s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
/* brillo muy sutil que respira sobre la aurora (solo transform/opacity → compositor, 60 fps) */
.voice-aurora > .vp-sheen {
  z-index: 1;
  inset: -30% -10% -30% 30%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,246,222,0.20), rgba(255,246,222,0) 72%);
  opacity: 0.35;
  will-change: transform, opacity;
  animation: vp-sheen 7s ease-in-out infinite alternate;
}
@keyframes vp-aurora-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-2.5px, 0.6px, 0) scale(1.045); }
}
@keyframes vp-sheen {
  0%   { transform: translate3d(6px, 2px, 0) scale(0.92); opacity: 0.25; }
  100% { transform: translate3d(-10px, -2px, 0) scale(1.06); opacity: 0.7; }
}
.voice-aurora > .vp-mic {
  position: absolute; z-index: 2;
  left: 27px; top: 12.7px;
  width: 17px; height: 22.6px;
  color: #fff;
  pointer-events: none;
}
.voice-aurora > .vp-logo {
  position: absolute; z-index: 2;
  right: 21px; top: 50%;
  height: 9.4px; width: auto;
  aspect-ratio: 103 / 30;
  transform: translateY(-38%);
  filter: drop-shadow(0 0.5px 1px rgba(0,0,0,0.22));
  user-select: none; -webkit-user-drag: none; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .voice-aurora > .vp-aurora, .voice-aurora > .vp-sheen { animation: none !important; }
}

/* ===================================================================================================================
   v102 — humo vivo en la cápsula de voz (Pancho, variante B de /workspace/mock-humo-capsula; js/voice-smoke.js).
   Humo WebGL recortado dentro de la cápsula, encima de la aurora y debajo del micrófono y del logo «Thea.».
   Sin WebGL → .no-gl: tres manchas difusas que se mueven solo con transform. prefers-reduced-motion → cuadro quieto.
   =================================================================================================================== */
.home-footer .voice-pill.voice-aurora { clip-path: inset(0 round 24px); }   /* Safari: recorta también el lienzo WebGL */
.voice-aurora > .vp-smoke,
.voice-aurora > .vp-fb { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.voice-aurora > .vp-smoke { z-index: 1; width: 100%; height: 100%; display: block; }
.voice-aurora > .vp-fb { z-index: 1; display: none; overflow: hidden; }
.voice-aurora.no-gl > .vp-smoke { display: none; }
.voice-aurora.no-gl > .vp-fb { display: block; }
.voice-aurora > .vp-fb i { position: absolute; width: 70%; height: 140%; top: -20%; border-radius: 50%; filter: blur(9px); opacity: .45; will-change: transform; animation: vp-fb 9s ease-in-out infinite alternate; }
.voice-aurora > .vp-fb i:nth-child(1) { left: 30%; background: radial-gradient(closest-side, rgba(64,148,204,.9), transparent); }
.voice-aurora > .vp-fb i:nth-child(2) { left: 5%; background: radial-gradient(closest-side, rgba(140,219,199,.7), transparent); animation-duration: 12s; animation-delay: -4s; }
.voice-aurora > .vp-fb i:nth-child(3) { left: 50%; background: radial-gradient(closest-side, rgba(245,227,189,.6), transparent); animation-duration: 14s; animation-delay: -7s; }
@keyframes vp-fb {
  0%   { transform: translate3d(-12%, 4%, 0) scale(.9); }
  100% { transform: translate3d(14%, -6%, 0) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .voice-aurora > .vp-fb i { animation: none !important; }
}