/* ─── Mantra Thai Massage — design system ─────────────────────────── */
:root {
  --blue: #a8c8dc;
  --blue-soft: #dceaf2;
  --blue-pale: #f2f8fb;
  --blue-deep: #5b87a0;
  --sand: #e8dcc8;
  --sand-pale: #f7f2e9;
  --pain: #c0524a;
  --ink: #2b3a42;
  --ink-soft: #5a6b75;
  --white: #ffffff;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 10px 40px rgba(43, 58, 66, 0.08);
  --shadow-sm: 0 4px 16px rgba(43, 58, 66, 0.07);
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }

/* ─── Intro splash ────────────────────────────────────────────────── */
body.is-intro { overflow: hidden; }
body > *:not(.intro-splash) { opacity: 0; transition: opacity 0.9s ease; }
body:not(.is-intro) > *:not(.intro-splash) { opacity: 1; }

.intro-splash {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  background: var(--white);
  animation: intro-fade-out 0.7s ease 2.6s both;
}
.intro-splash.is-gone { display: none; }
html.intro-seen .intro-splash { display: none; animation: none; }
html.intro-seen body.is-intro { overflow: visible; }
html.intro-seen body.is-intro > *:not(.intro-splash) { opacity: 1; }

.intro-logo {
  width: min(420px, 70vw);
  height: auto;
  overflow: visible;
  perspective: 900px;
}
.intro-logo .wing-left,
.intro-logo .wing-right {
  fill: var(--blue);
  transform-box: fill-box;
}
.intro-logo .wing-left { transform-origin: 100% 50%; animation: intro-flap-l 1.7s ease-in-out infinite; }
.intro-logo .wing-right { transform-origin: 0% 50%; animation: intro-flap-r 1.7s ease-in-out infinite; animation-delay: .12s; }

.intro-name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  letter-spacing: 0.01em;
  opacity: 0;
  animation: intro-name-in 0.8s ease 0.3s both;
}
.intro-name small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.36em;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--blue-deep);
  margin-top: 0.3rem;
}

@keyframes intro-flap-l { 0%,100% { transform: rotateY(0deg); } 50% { transform: rotateY(55deg); } }
@keyframes intro-flap-r { 0%,100% { transform: rotateY(0deg); } 50% { transform: rotateY(-55deg); } }
@keyframes intro-name-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes intro-fade-out { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .intro-logo .wing-left, .intro-logo .wing-right { animation: none; }
  .intro-splash { animation: intro-fade-out 0.5s ease 0.6s both; }
}
a { color: var(--blue-deep); text-decoration: none; }
.wa-link { color: #25d366; font-weight: 600; }
.wa-link:hover { text-decoration: underline; }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
}
h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h3 { font-size: 1.35rem; }
.kicker {
  display: block;
  position: relative;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-deep);
  margin-bottom: 0.9rem;
}
.lead { font-size: 1.12rem; color: var(--ink-soft); max-width: 42rem; }
em { font-style: italic; }

.container { width: min(1120px, 92%); margin: 0 auto; }
section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }

/* ─── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.9rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  text-align: center;
}
.btn:active { transform: scale(0.98); }
.btn[hidden] { display: none; }
.btn-primary {
  background: var(--ink);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: #3c4f5a; transform: translateY(-1px); }
.btn-secondary {
  background: var(--white);
  color: var(--ink);
  border-color: var(--blue);
}
.btn-secondary:hover { background: var(--blue-pale); transform: translateY(-1px); }
.btn-soft {
  background: var(--blue-soft);
  color: var(--ink);
}
.btn-soft:hover { background: var(--blue); }
.btn-lg { padding: 1.1rem 2.3rem; font-size: 1.05rem; }
.btn-block { width: 100%; }

/* ─── Header ──────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--blue-soft);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.brand { display: flex; align-items: center; gap: 0.7rem; color: var(--ink); }
.brand img, .brand svg { height: 40px; width: auto; }

.brand-logo { overflow: visible; perspective: 500px; }
.brand-logo .wing-left,
.brand-logo .wing-right { fill: var(--blue); transform-box: fill-box; }
.brand-logo.is-flapping .wing-left {
  transform-origin: 100% 50%;
  animation: intro-flap-l 1.7s ease-in-out;
  animation-iteration-count: var(--flap-cycles, 3);
}
.brand-logo.is-flapping .wing-right {
  transform-origin: 0% 50%;
  animation: intro-flap-r 1.7s ease-in-out;
  animation-iteration-count: var(--flap-cycles, 3);
  animation-delay: .12s;
}
.brand-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.brand-name small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--blue-deep);
}
.main-nav { display: flex; align-items: center; gap: 1.8rem; }
.main-nav a { color: var(--ink-soft); font-size: 0.94rem; font-weight: 500; }
.main-nav a:hover { color: var(--ink); }
.main-nav .btn { padding: 0.6rem 1.3rem; font-size: 0.88rem; }
.main-nav .btn-primary,
.main-nav .btn-primary:hover { color: var(--white); }
.nav-toggle { display: none; background: none; border: none; font-size: 1.6rem; color: var(--ink); cursor: pointer; }

@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .main-nav {
    display: none;
    position: absolute;
    top: 72px; left: 0; right: 0;
    background: var(--white);
    flex-direction: column;
    padding: 1.5rem;
    gap: 1.2rem;
    border-bottom: 1px solid var(--blue-soft);
    box-shadow: var(--shadow);
  }
  .main-nav.open { display: flex; }
}

/* ─── Hero ────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 0;
  background: linear-gradient(180deg, var(--blue-pale) 0%, var(--white) 100%);
  overflow: hidden;
}
.hero .container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
  min-height: 560px;
  padding: 4rem 0;
}
.hero-copy h1 span { color: var(--blue-deep); font-style: italic; }
.hero-copy .lead { margin: 1.4rem 0 2.2rem; }

/* ─── Sagrada Família teaser popover ─────────────────────────────── */
.sf-kicker-wrap { position: relative; }
.sf-link {
  color: var(--blue-deep);
  text-decoration: underline dotted;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.sf-link:hover { color: var(--ink); }

.sf-popover {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  z-index: 40;
  width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.1rem 1.1rem;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-soft);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none;
}
.sf-kicker-wrap:has(.sf-link:hover) + .sf-popover,
.sf-popover.is-open,
.sf-popover:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.sf-kink {
  position: absolute;
  top: -1.3rem;
  left: 1.6rem;
  width: 24px;
  height: 24px;
  overflow: visible;
}
.sf-kink path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}
.sf-popover-img { width: 100%; max-width: 140px; height: auto; }
.sf-popover strong { display: block; color: var(--ink); font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; margin-bottom: 0.3rem; }

@media (max-width: 820px) {
  .sf-popover { display: none; }
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 1.6rem; }
.hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  background: var(--white);
  border: 1px solid var(--blue-soft);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.hero-rating strong { color: var(--ink); }

@media (min-width: 821px) {
  .hero-rating {
    position: fixed;
    bottom: 1.3rem;
    right: 16.5rem;
    z-index: 60;
  }
}
.stars { color: #e8b64c; letter-spacing: 0.1em; }
.hero-media { position: relative; width: 100%; }
.mask-logo { aspect-ratio: 368.8 / 336.6; width: 100%; position: relative; }
.mask-logo img { -webkit-mask-image: url("logo-mask.svg"); mask-image: url("logo-mask.svg"); }
.mask-logo img { opacity: 0; transition: opacity 0.6s ease; }
.mask-logo.logo-revealed img { opacity: 1; }

.hero-logo-intro {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  transition: opacity 0.6s ease;
}
.hero-logo-intro svg { width: 100%; height: 100%; overflow: visible; perspective: 500px; transform: scale(0.32); }
.hero-logo-intro.is-flapping svg { animation: hero-grow 1.35s cubic-bezier(.3,.6,.35,1) both; }
.hero-logo-intro .wing-left,
.hero-logo-intro .wing-right { fill: var(--blue); transform-box: fill-box; }
.hero-logo-intro.is-flapping .wing-left {
  transform-origin: 100% 50%;
  animation: hero-flap-l 0.45s ease-in-out 3;
}
.hero-logo-intro.is-flapping .wing-right {
  transform-origin: 0% 50%;
  animation: hero-flap-r 0.45s ease-in-out 3;
  animation-delay: .06s;
}
.mask-logo.logo-revealed .hero-logo-intro { opacity: 0; pointer-events: none; }

@keyframes hero-flap-l { 0%,100% { transform: rotateY(0deg); } 50% { transform: rotateY(35deg); } }
@keyframes hero-flap-r { 0%,100% { transform: rotateY(0deg); } 50% { transform: rotateY(-35deg); } }
@keyframes hero-grow {
  0% { transform: scale(0.32); }
  70% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.hero-badge {
  position: fixed;
  bottom: 1.3rem;
  right: 4.9rem;
  z-index: 60;
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1.2rem;
  box-shadow: var(--shadow);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.hero-badge strong { display: block; color: var(--ink); font-size: 0.95rem; }

@media (max-width: 820px) {
  .hero .container { grid-template-columns: 1fr; padding: 2.5rem 0 3rem; min-height: 0; }
  .hero-media { order: -1; }
  .mask-logo { width: min(340px, 80%); margin: 0 auto; }
  .hero-badge { right: 4.4rem; bottom: 1rem; padding: 0.6rem 0.9rem; font-size: 0.75rem; }
  .hero-badge strong { font-size: 0.85rem; }
}

/* ─── "Why" strip ─────────────────────────────────────────────────── */
.why { background: var(--white); }
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  margin-top: 2.5rem;
}
.why-card {
  background: var(--blue-pale);
  border-radius: var(--radius);
  padding: 2rem 1.8rem;
}
.why-card .num {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--blue-deep);
  font-style: italic;
}
.why-card h3 { margin: 0.6rem 0 0.5rem; }
.why-card p { font-size: 0.95rem; color: var(--ink-soft); }
.why-note {
  margin-top: 2rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
  max-width: 46rem;
}
@media (max-width: 820px) { .why-grid { grid-template-columns: 1fr; } }

/* ─── Services / goals ────────────────────────────────────────────── */
.services { background: linear-gradient(180deg, var(--white), var(--blue-pale)); }
.goal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  margin-top: 2.5rem;
}
.goal-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.goal-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.goal-card img { aspect-ratio: 4 / 3; object-fit: cover; }
.goal-body { padding: 1.6rem; display: flex; flex-direction: column; flex: 1; }
.goal-body h3 { font-size: 1.5rem; }
.goal-body .goal-sub { font-size: 0.88rem; color: var(--blue-deep); font-weight: 600; margin-bottom: 0.7rem; }
.goal-body p { font-size: 0.94rem; color: var(--ink-soft); flex: 1; }
.goal-price {
  margin: 1.1rem 0;
  font-size: 0.92rem;
  color: var(--ink);
}
.goal-price strong { font-size: 1.25rem; font-family: var(--font-display); }
@media (max-width: 820px) {
  .goal-grid { grid-template-columns: 1fr; }
  .goal-card img { aspect-ratio: 16 / 7; }
}

/* full menu accordion */
.menu-accordion {
  margin-top: 3rem;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.menu-accordion summary {
  cursor: pointer;
  padding: 1.4rem 1.8rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}
.menu-accordion summary::-webkit-details-marker { display: none; }
.menu-accordion summary::after { content: "+"; font-size: 1.5rem; color: var(--blue-deep); }
.menu-accordion[open] summary::after { content: "–"; }
.menu-table-wrap { overflow-x: auto; padding: 0 1.8rem 1.8rem; }
.menu-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 560px; }
.menu-table th, .menu-table td { padding: 0.65rem 0.6rem; text-align: right; border-bottom: 1px solid var(--blue-soft); }
.menu-table th:first-child, .menu-table td:first-child { text-align: left; }
.menu-table thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.menu-table td:first-child { font-weight: 500; }
.menu-table .cat { background: var(--blue-pale); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--blue-deep); }
.menu-note { padding: 0 1.8rem 1.6rem; font-size: 0.85rem; color: var(--ink-soft); }

/* ─── Studio / gallery ────────────────────────────────────────────── */
.studio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 2.5rem;
  align-items: start;
}
.studio-grid > .mask-photo:nth-child(2) { margin-top: 2rem; }
@media (max-width: 820px) {
  .studio-grid { grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
  .studio-grid > .mask-photo:nth-child(2) { margin-top: 1rem; }
}

/* ─── Lotus/leaf photo masks ──────────────────────────────────────── */
.mask-photo {
  transform-origin: 50% 85%; /* pivot near the base, like it's resting on a stem */
}
.mask-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  filter: drop-shadow(0 14px 26px rgba(43, 58, 66, 0.26));
}
.mask-lotus-1 { aspect-ratio: 900 / 625; }
.mask-lotus-1 img { -webkit-mask-image: url("lotus-flower-1.png"); mask-image: url("lotus-flower-1.png"); }
.mask-lotus-2 { aspect-ratio: 900 / 754; }
.mask-lotus-2 img { -webkit-mask-image: url("lotus-flower-2.png"); mask-image: url("lotus-flower-2.png"); }
.mask-lotus-3 { aspect-ratio: 900 / 654; }
.mask-lotus-3 img { -webkit-mask-image: url("lotus-flower-3.png"); mask-image: url("lotus-flower-3.png"); }
.mask-leaf { aspect-ratio: 1 / 1; }
.mask-leaf img { -webkit-mask-image: url("lotus-leaf.png"); mask-image: url("lotus-leaf.png"); }

/* gentle, staggered sway so the three photos don't move in unison */
@keyframes sway-a {
  0%, 100% { transform: rotate(-1.8deg) translateX(-4px); }
  50%      { transform: rotate(1.5deg) translateX(4px); }
}
@keyframes sway-b {
  0%, 100% { transform: rotate(2deg) translateX(5px); }
  50%      { transform: rotate(-1.6deg) translateX(-5px); }
}
@keyframes sway-c {
  0%, 100% { transform: rotate(-1.3deg) translateX(-3px); }
  50%      { transform: rotate(2.1deg) translateX(3px); }
}
.studio-grid > .mask-photo:nth-child(1) { animation: sway-a 8s ease-in-out infinite; animation-delay: -1.2s; }
.studio-grid > .mask-photo:nth-child(2) { animation: sway-b 9.5s ease-in-out infinite; animation-delay: -4.6s; }
.studio-grid > .mask-photo:nth-child(3) { animation: sway-c 7s ease-in-out infinite; animation-delay: -2.9s; }
@media (prefers-reduced-motion: reduce) {
  .studio-grid > .mask-photo { animation: none; }
}

/* ─── Reviews ─────────────────────────────────────────────────────── */
.reviews { background: var(--blue-pale); }
.reviews-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  margin-top: 2.5rem;
}
.review-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.8rem;
  box-shadow: var(--shadow-sm);
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.review-card .stars { display: block; margin-bottom: 0.8rem; }
.review-card footer { margin-top: 1rem; font-size: 0.85rem; font-weight: 600; color: var(--ink); }
@media (max-width: 820px) { .review-grid { grid-template-columns: 1fr; } }

/* ─── Care path ───────────────────────────────────────────────────── */
.care-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  margin-top: 2.5rem;
}
.care-step {
  background: var(--white);
  border: 1px solid var(--blue-soft);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.care-step .step-n {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
  margin-bottom: 0.9rem;
}
.care-step h3 { font-size: 1.1rem; font-family: var(--font-body); font-weight: 600; margin-bottom: 0.4rem; }
@media (max-width: 820px) { .care-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .care-steps { grid-template-columns: 1fr; } }

/* ─── Barcelona teaser page ──────────────────────────────────────── */
.bcn-hero { background: linear-gradient(180deg, var(--blue-pale) 0%, var(--white) 100%); padding: 1.8rem 0 1.2rem; }
.bcn-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 2.4rem; align-items: center; }
.bcn-hero .kicker { margin-bottom: 0.4rem; }
.bcn-hero h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0.3rem 0 0.7rem; }
.bcn-hero .lead { font-size: 0.98rem; margin: 0 0 1.1rem; }
.bcn-hero .hero-ctas { margin-bottom: 0; }
.bcn-hero-media { display: flex; justify-content: center; }
.bcn-hero-media img { max-height: 340px; width: auto; }
.bcn-cards { background: var(--white); padding: 1.2rem 0; }
.bcn-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.bcn-card {
  background: var(--blue-pale);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem 1.3rem;
}
.bcn-card h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.bcn-card p { font-size: 0.86rem; color: var(--ink-soft); }
body[data-i18n-page="barcelona"] .cta-band { padding: 1.6rem 0 2rem; }
body[data-i18n-page="barcelona"] .cta-band h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); }
body[data-i18n-page="barcelona"] .cta-band p { margin: 0.6rem auto 1.2rem; }
@media (max-width: 820px) {
  .bcn-hero-grid { grid-template-columns: 1fr; }
  .bcn-hero-media { order: -1; max-width: 220px; margin: 0 auto; }
  .bcn-card-grid { grid-template-columns: 1fr; }
}

/* ─── Location ────────────────────────────────────────────────────── */
.location .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.location-info dl { margin-top: 1.8rem; display: grid; gap: 1.1rem; }
.location-info dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--blue-deep); font-weight: 600; }
.location-info dd { font-size: 1.02rem; }
.location-media img,
.location-media iframe {
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: var(--shadow);
  display: block;
  width: 100%;
}
@media (max-width: 820px) { .location .container { grid-template-columns: 1fr; } }

/* ─── CTA band ────────────────────────────────────────────────────── */
.cta-band {
  background: var(--blue-pale);
  color: var(--ink);
  text-align: center;
}
.cta-band h2 { color: var(--ink); }
.cta-band p { color: var(--ink-soft); margin: 1rem auto 2rem; max-width: 36rem; }
.cta-band p .wa-link { color: #25d366; }
.cta-band .btn-primary { background: var(--ink); color: var(--white); }
.cta-band .btn-primary:hover { background: #3c4f5a; }
.cta-band .btn-secondary { border-color: var(--blue); color: var(--ink); background: transparent; }
.cta-band .btn-secondary:hover { background: var(--blue-soft); }

/* ─── Footer ──────────────────────────────────────────────────────── */
.site-footer {
  background: var(--blue-pale);
  padding: 3rem 0 2rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
.footer-grid h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--ink); margin-bottom: 0.8rem; }
.footer-grid ul { list-style: none; display: grid; gap: 0.45rem; }
.footer-grid a { color: var(--ink-soft); }
.footer-grid a:hover { color: var(--ink); }
.footer-grid a.wa-link { color: #25d366; }
.footer-bottom { border-top: 1px solid var(--blue-soft); padding-top: 1.5rem; padding-bottom: 5.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem; font-size: 0.8rem; }
/* páginas sin .footer-grid arriba (como la reserva online): ese margen
   grande era para separarse del bloque de columnas, aquí solo deja hueco
   vacío antes del texto y obliga a hacer scroll de más para verlo */
/* pie de página tan alto como la cabecera (72px) y centrado en vertical,
   para que estos pasos quepan sin scroll de más */
.booking-page .site-footer { height: 72px; padding: 0; display: flex; align-items: center; }
.booking-page .footer-bottom { border-top: none; padding: 0; width: 100%; }
.footer-bottom span:last-child { max-width: none; white-space: nowrap; text-align: right; }
@media (max-width: 640px) { .footer-bottom span:last-child { max-width: none; text-align: left; white-space: normal; } }
.footer-bottom a { color: var(--ink-soft); }
.footer-bottom a:hover { color: var(--ink); }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr; } }
/* cabecera + contenido + pie que llenan el alto de la ventana: así el pie
   queda pegado abajo del todo aunque el contenido sea corto (antes flotaba a
   media página en la pantalla de "pago recibido", con hueco en blanco debajo) */
.booking-page { display: flex; flex-direction: column; min-height: 100vh; }
.booking-page > .booking-shell { flex: 1 0 auto; }
.booking-page > .site-footer { flex-shrink: 0; }

/* ─── Floating WhatsApp ───────────────────────────────────────────── */
.wa-float {
  position: fixed;
  bottom: 1.4rem;
  right: 1.4rem;
  z-index: 60;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25d366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  transition: transform 0.15s ease;
}
.wa-float:hover { transform: scale(1.07); }
.wa-float svg { width: 30px; height: 30px; fill: var(--white); }

/* ─── Chat del asistente IA (ver PLAN.md §12) ─────────────────────── */
/* se apila justo encima del botón flotante de WhatsApp, no lo tapa */
.chat-fab {
  position: fixed;
  bottom: 5.6rem;
  right: 1.4rem;
  z-index: 61;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--blue-deep);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.chat-fab:hover { transform: scale(1.07); }
.chat-open .chat-fab { display: none; }

.chat-panel {
  position: fixed;
  bottom: 1.4rem;
  right: 1.4rem;
  z-index: 62;
  width: min(360px, calc(100vw - 2.8rem));
  height: min(520px, calc(100vh - 2.8rem));
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-panel[hidden] { display: none; }
.chat-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.1rem;
  background: var(--blue-deep);
  color: var(--white);
}
.chat-head-title { font-family: var(--font-display); font-size: 1.15rem; }
.chat-close { background: none; border: none; color: var(--white); font-size: 1rem; cursor: pointer; padding: 0.2rem 0.4rem; opacity: 0.85; }
.chat-close:hover { opacity: 1; }

.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--blue-pale);
}
.chat-msg {
  max-width: 84%;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat-msg a { color: inherit; text-decoration: underline; }
.chat-msg-assistant { align-self: flex-start; background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); }
.chat-msg-user { align-self: flex-end; background: var(--blue-deep); color: var(--white); }
.chat-typing { display: flex; gap: 0.25rem; align-items: center; padding: 0.75rem 0.9rem; }
.chat-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-soft);
  animation: chatTypingBounce 1s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chatTypingBounce { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.chat-inputrow {
  flex: 0 0 auto;
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--blue-soft);
  background: var(--white);
}
.chat-inputrow input {
  flex: 1;
  border: 1.5px solid var(--blue-soft);
  border-radius: 999px;
  padding: 0.6rem 1rem;
  font: 500 0.9rem var(--font-body);
  color: var(--ink);
}
.chat-send {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--blue-deep);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.chat-send:hover { background: var(--ink); }

@media (max-width: 480px) {
  .chat-panel { bottom: 0; right: 0; width: 100vw; height: 100vh; border-radius: 0; }
  .chat-fab { bottom: 5.4rem; right: 1.1rem; }
}
html[dir="rtl"] .chat-fab { right: auto; left: 1.4rem; }
html[dir="rtl"] .chat-panel { right: auto; left: 1.4rem; }

/* ─── Carruseles móviles con snap (tarjetas en fila, un dedo) ─────── */
/* main.js convierte las parrillas de tarjetas en carruseles en pantallas
   estrechas (clase .is-carousel + puntos); en escritorio no cambia nada */
.is-carousel {
  display: flex !important;
  grid-template-columns: none !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 0.9rem;
  padding: 0.3rem 0.2rem 0.7rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.is-carousel::-webkit-scrollbar { display: none; }
.is-carousel > * {
  flex: 0 0 84%;
  max-width: 84%;
  scroll-snap-align: center;
  margin-top: 0 !important;
}
.is-carousel.carousel-compact > * { flex-basis: 72%; max-width: 72%; }
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.9rem;
}
.carousel-dots button {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: var(--blue-soft);
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}
.carousel-dots button.active { background: var(--blue-deep); width: 22px; }

/* snap también en las tiras que ya scrollean (días y huecos de reserva) */
.day-strip { scroll-snap-type: x proximity; }
.day-chip { scroll-snap-align: start; }

/* los enlaces del menú no se esconden bajo la cabecera fija */
section[id] { scroll-margin-top: 84px; }

/* reserva: en el móvil la lista pasa a tira horizontal y el detalle debajo */
@media (max-width: 640px) {
  .svc-split { flex-direction: column; }
  .svc-list { flex: none; flex-direction: row; max-height: none; overflow-x: auto; overflow-y: visible; }
  .svc-item { flex: 0 0 8.5rem; }
  .svc-detail { flex-direction: column; }
  .svc-detail-media { flex: none; width: 60%; margin: 0 auto; }
  .confirm-split { flex-direction: column; }
  .confirm-summary { flex: none; }
  .dur-split { flex-direction: column; }
  .dur-chosen { flex: none; display: flex; align-items: center; gap: 0.7rem; }
  .dur-chosen-media { flex: 0 0 4.5rem; width: 4.5rem; margin-bottom: 0; }
  /* 3 columnas en vez de 7 fijas: a 375-430px, 7 columnas de 3.6rem no caben */
  .when-split { flex-direction: column; width: 100%; }
  .day-strip { grid-template-columns: repeat(3, minmax(3.2rem, 1fr)); flex: none; width: 100%; }
  .when-slots { width: 100%; }
}

/* ─── Reveal animation ────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ══════════════════════════════════════════════════════════════════
   QUIZ (test.html)
   ══════════════════════════════════════════════════════════════════ */
.quiz-page {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: linear-gradient(180deg, var(--blue-pale) 0%, var(--white) 60%);
  display: flex;
  flex-direction: column;
}
.quiz-shell {
  width: min(720px, 94%);
  margin: 0 auto;
  padding: 0.9rem 0 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.quiz-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; flex: 0 0 auto; }
.quiz-top a { font-size: 0.9rem; color: var(--ink-soft); }
.progress-track {
  height: 6px;
  background: var(--blue-soft);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.9rem;
  flex: 0 0 auto;
}
.progress-fill {
  height: 100%;
  background: var(--blue-deep);
  border-radius: 999px;
  width: 0%;
  transition: width 0.35s ease;
}
.quiz-step { display: none; padding: 0; animation: fadeUp 0.35s ease; }
.quiz-step.active { display: block; }
.quiz-step-map.active { display: flex; flex-direction: column; flex: 1; min-height: 0; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.quiz-step h2 { font-size: clamp(1.3rem, 4vw, 1.9rem); margin-bottom: 0.4rem; flex: 0 0 auto; }
.quiz-step .hint { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 1.3rem; flex: 0 0 auto; }

.option-grid { display: grid; gap: 0.8rem; }
.option-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.option-btn {
  background: var(--white);
  border: 1.5px solid var(--blue-soft);
  border-radius: var(--radius-sm);
  padding: 1.05rem 1.2rem;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.option-btn:hover { border-color: var(--blue); background: var(--blue-pale); }
.option-btn.selected { border-color: var(--blue-deep); background: var(--blue-soft); }
.option-btn small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 0.82rem; margin-top: 0.15rem; }

.quiz-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.3rem; flex: 0 0 auto; }
.quiz-nav .btn-back { background: none; border: none; color: var(--ink-soft); font-size: 0.95rem; cursor: pointer; padding: 0.7rem 0; }
.quiz-nav .btn-back:hover { color: var(--ink); }

/* ─── body map + anotaciones (paso combinado) ─────────────────────── */
/* toggle Persona A / B: solo visible cuando el test es "para dos" (masaje en
   pareja), para marcar zonas de cada persona por separado sin duplicar el
   resto del test (edad/género/embarazo siguen siendo una sola respuesta) */
.person-tabs { display: flex; gap: 0.6rem; margin-bottom: 0.7rem; flex: 0 0 auto; flex-wrap: wrap; }
.person-tabs[hidden] { display: none; }
.person-tabs-buttons { display: flex; gap: 0.5rem; flex: 1 1 220px; }
.person-tab {
  flex: 1;
  padding: 0.55rem;
  border-radius: 999px;
  border: 1.5px solid var(--blue-soft);
  background: var(--white);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.person-tab.active { background: var(--ink); color: var(--white); border-color: var(--ink); }
.person-name-input {
  flex: 1 1 200px;
  border: 1.5px solid var(--blue-soft);
  border-radius: 999px;
  padding: 0.55rem 1rem;
  font: 500 0.88rem var(--font-body);
  color: var(--ink);
  background: var(--white);
}
.map-tabs { display: flex; gap: 0.5rem; margin-bottom: 0.8rem; flex: 0 0 auto; }
.map-tab {
  flex: 1;
  padding: 0.55rem;
  border-radius: 999px;
  border: 1.5px solid var(--blue-soft);
  background: var(--white);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.map-tab.active { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* el mapa corporal es de 3 columnas (anotaciones/figura/anotaciones) y se
   queda sin sitio con el ancho normal del test (720px) — en vez de ensanchar
   todo `.quiz-shell` (lo que reajustaba también la cabecera, el progreso y
   la navegación), solo esta fila se "escapa" al ancho completo del viewport;
   sus hijos ya tienen su propio tope (`.bodymap-annotations` max-width) así
   que `justify-content: center` los mantiene centrados sin necesitar además
   un max-width aquí (que rompería el centrado en pantallas muy anchas) */
.bodymap-layout {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 1rem;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.bodymap-figure {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.bodymap-figure svg { height: 100%; max-height: 100%; width: auto; }
.bodymap svg .zone { cursor: pointer; }
.zone-shape {
  fill: rgba(91, 135, 160, 0);
  stroke: none;
  stroke-width: 1.5;
  fill-opacity: 1;
  transition: fill 0.15s ease, stroke 0.15s ease;
}
.zone:hover .zone-shape { fill: rgba(91, 135, 160, 0.25); stroke: rgba(91, 135, 160, 0.45); }
.zone:focus-visible .zone-shape { fill: rgba(91, 135, 160, 0.3); stroke: var(--blue-deep); }
/* tensión = azul de marca; dolor (con o sin tensión a la vez) = rojo de
   dolor, para distinguir de un vistazo qué zonas duelen de las que solo
   están tensas. Ambas laten suavemente para que las zonas marcadas
   destaquen sobre la silueta. */
.zone.sel .zone-shape {
  fill: var(--blue-deep);
  stroke: var(--blue-deep);
  animation: zonePulse 1.8s ease-in-out infinite;
}
.zone.sel.pain .zone-shape {
  fill: var(--pain);
  stroke: var(--pain);
  animation: zonePulse 1.8s ease-in-out infinite;
}
@keyframes zonePulse {
  0%, 100% { fill-opacity: 0.32; }
  50% { fill-opacity: 0.62; }
}

.leader-lines { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.hook-line {
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
  opacity: 0.8;
  animation: hookDash 0.5s linear infinite;
}
.hook-dot { fill: var(--blue-deep); }
@keyframes hookDash { to { stroke-dashoffset: -12; } }
@media (prefers-reduced-motion: reduce) {
  .hook-line, .zone.sel .zone-shape, .zone.sel.pain .zone-shape { animation: none; }
}

.bodymap-annotations {
  flex: 1 1 260px;
  max-width: 460px;
  min-width: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
}
.bodymap-annotations-right { align-items: flex-end; }
.annot-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--blue-soft);
  width: 100%;
}
.bodymap-annotations-right .annot-row { flex-direction: row-reverse; text-align: right; }
.annot-remove {
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.2rem;
  line-height: 1;
  flex: 0 0 auto;
}
.annot-remove:hover { color: var(--ink); }
.annot-name { font-weight: 600; font-size: 0.88rem; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.annot-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.annot-toggle { display: flex; gap: 0.35rem; flex: 0 0 auto; }
.annot-btn {
  border: 1.5px solid var(--blue-soft);
  background: var(--white);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--ink-soft);
  white-space: nowrap;
}
.annot-btn.sel { background: var(--ink); color: var(--white); border-color: var(--ink); }
/* pantallas estrechas: no hay sitio para líneas a ambos lados —
   la figura arriba, la lista simple debajo, sin gancho */
@media (max-width: 720px) {
  .bodymap-layout { flex-direction: column; align-items: center; overflow-y: auto; gap: 0.4rem; }
  .bodymap-figure { flex: 0 0 auto; order: -1; height: auto; max-height: 40vh; width: 100%; }
  .leader-lines { display: none; }
  .bodymap-annotations {
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
    overflow-y: visible;
    align-items: stretch;
  }
  .bodymap-annotations-right { align-items: stretch; }
  .bodymap-annotations-right .annot-row { flex-direction: row; text-align: left; }
  .annot-name { font-size: 0.85rem; }
  .annot-btn { font-size: 0.75rem; padding: 0.3rem 0.65rem; }
}

/* ─── modo kiosco (tablet del estudio: test.html?kiosk=1) ─────────── */
.kiosk-extra { display: grid; gap: 0.6rem; margin-top: 1.1rem; }
.kiosk-extra input {
  border: 1.5px solid var(--blue-soft);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  font: 500 1rem var(--font-body);
  color: var(--ink);
  background: var(--white);
}
.kiosk-extra input:focus { outline: none; border-color: var(--blue-deep); }
body:not(.kiosk) .kiosk-extra { display: none; }
/* en el estudio no hay a dónde "salir" ni reservas que hacer: ya está aquí */
body.kiosk .quiz-top-right a { display: none; }
body.kiosk .quiz-top .brand { pointer-events: none; }
body.kiosk .result-ctas { display: none; }
body.kiosk .result-alt { display: none; }

/* modo "prepara tu sesión": ya se reservó un masaje y una duración concretos,
   así que no tiene sentido recomendar otro — solo interesa el mapa corporal.
   se reordena con flex en vez de tocar el HTML para no duplicar el marcado
   entre los tres modos (normal/kiosco/prep) */
body.prep-mode .result-card { display: flex; flex-direction: column; }
body.prep-mode .result-card .kicker,
body.prep-mode .result-card #resName,
body.prep-mode .result-card .result-price,
body.prep-mode .result-card .result-dur,
body.prep-mode .result-card .result-why,
body.prep-mode .result-card .result-disclaimer,
body.prep-mode .result-card .result-alt { display: none; }
body.prep-mode .result-card .saved-note {
  order: -1;
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--ink);
  font-weight: 600;
  margin: 0 0 1.2rem;
}
.kiosk-done {
  background: var(--blue-pale);
  border: 1px solid var(--blue-soft);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  font-size: 0.95rem;
  margin: 0.8rem 0;
}
#kioskRestart { margin-top: 0.5rem; }

/* result */
.result-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem 2rem;
  text-align: center;
}
.result-card .kicker { margin-bottom: 0.3rem; }
.result-card h2 { font-size: 1.7rem; }
.result-price {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin: 0.4rem 0 0.1rem;
}
.result-dur { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 0.7rem; }
.result-why {
  background: var(--blue-pale);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1.1rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
  text-align: left;
  margin: 0.8rem 0;
}
.result-disclaimer { font-size: 0.78rem; color: var(--ink-soft); font-style: italic; margin: -0.2rem 0 0.7rem; }
.result-alt { font-size: 0.84rem; color: var(--ink-soft); margin: 0.7rem 0 0.9rem; }
.saved-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--blue-deep);
  font-weight: 500;
  margin-top: 0.7rem;
}

/* ══════════════════════════════════════════════════════════════════
   EQUIPO (therapist view)
   ══════════════════════════════════════════════════════════════════ */
.equipo-page { background: var(--blue-pale); min-height: 100vh; }
.equipo-shell { width: min(880px, 94%); margin: 0 auto; padding: 1.2rem 0 4rem; }
.equipo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0 1.4rem;
}
.equipo-header .brand-name { font-size: 1.1rem; }

.equipo-tabs { display: flex; gap: 0.4rem; overflow-x: auto; margin-bottom: 1.4rem; border-bottom: 1.5px solid var(--blue-soft); }
.equipo-tab {
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  padding: 0.6rem 0.9rem;
  font: 600 0.88rem var(--font-body);
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}
.equipo-tab.selected { color: var(--blue-deep); border-bottom-color: var(--blue-deep); }
.equipo-tab:hover { color: var(--ink); }

/* Agenda: pastilla partida Día / Semana, centrada */
.view-toggle { display: flex; justify-content: center; width: max-content; margin: 0 auto 1.5rem; background: var(--blue-soft); border-radius: 999px; padding: 3px; }
.view-toggle[hidden] { display: none; }
.view-toggle .vt-btn { border: none; background: transparent; color: var(--ink-soft); font: inherit; font-size: 0.9rem; font-weight: 600; padding: 0.45rem 1.5rem; border-radius: 999px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.view-toggle .vt-btn.selected { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgba(43, 58, 66, 0.12); }
.view-toggle .vt-btn:hover:not(.selected) { color: var(--ink); }

.pin-gate {
  max-width: 360px;
  margin: 12vh auto 0;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.4rem 2rem;
  text-align: center;
}
.pin-gate h1 { font-size: 1.6rem; margin-bottom: 0.4rem; }
.pin-gate p { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 1.6rem; }
.pin-input {
  width: 100%;
  font-size: 1.6rem;
  letter-spacing: 0.8em;
  text-align: center;
  padding: 0.8rem;
  border: 1.5px solid var(--blue-soft);
  border-radius: var(--radius-sm);
  margin-bottom: 1.2rem;
  font-family: var(--font-body);
}
.pin-input:focus { outline: none; border-color: var(--blue-deep); }
.pin-error { color: #b0532f; font-size: 0.85rem; margin-bottom: 1rem; display: none; }

.agenda-list { display: grid; gap: 0.9rem; }
.agenda-item {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.2rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  border: 1.5px solid transparent;
}
.agenda-item:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.agenda-time {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  min-width: 64px;
  color: var(--blue-deep);
}
.agenda-info { flex: 1; }
.agenda-info strong { display: block; font-size: 1.02rem; }
.agenda-info span { font-size: 0.85rem; color: var(--ink-soft); }
.agenda-tag {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--ink);
  white-space: nowrap;
}
.agenda-tag.online { background: var(--sand); }
/* móvil: la hora y las etiquetas arriba, el nombre a lo ancho debajo */
@media (max-width: 540px) {
  .agenda-item { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.9rem; padding: 1rem 1.1rem; }
  .agenda-time { grid-column: 1; grid-row: 1; min-width: 0; }
  .agenda-item > .agenda-tag, .agenda-tags { grid-column: 2; grid-row: 1; justify-self: end; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; display: flex; gap: 0.3rem; }
  .agenda-info { grid-column: 1 / -1; grid-row: 2; }
}

.client-detail {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.8rem;
  margin-top: 1rem;
}
.client-detail .back-link {
  background: none; border: none;
  color: var(--ink-soft); font-size: 0.9rem; cursor: pointer;
  margin-bottom: 1.2rem; padding: 0;
}
.client-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.6rem; margin-bottom: 1.4rem; }
.client-head h2 { font-size: 1.6rem; }
.client-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.6rem; }
.meta-chip {
  background: var(--blue-pale);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.83rem;
  color: var(--ink-soft);
}
.meta-chip strong { color: var(--ink); font-weight: 600; }
.detail-grid { display: grid; grid-template-columns: 300px 1fr; gap: 2rem; }
@media (max-width: 720px) { .detail-grid { grid-template-columns: 1fr; } }
.detail-maps { display: flex; gap: 0.8rem; justify-content: center; }
.detail-maps figure { text-align: center; }
.detail-maps figcaption { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); margin-top: 0.4rem; }
.detail-maps svg { max-height: 300px; width: auto; }
.detail-section h3 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--blue-deep);
  margin: 1.4rem 0 0.6rem;
}
.detail-section h3:first-child { margin-top: 0; }
.zone-report { display: grid; gap: 0.4rem; font-size: 0.92rem; }
.zone-report .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 0.5rem; }
.dot-dolor { background: #c97b5d; }
.dot-tension { background: var(--blue-deep); }
.dot-ambos { background: linear-gradient(90deg, #c97b5d 50%, var(--blue-deep) 50%); }
.plan-box {
  background: var(--sand-pale);
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.notes-area {
  width: 100%;
  min-height: 110px;
  border: 1.5px solid var(--blue-soft);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  font-family: var(--font-body);
  font-size: 0.93rem;
  resize: vertical;
}
.notes-area:focus { outline: none; border-color: var(--blue-deep); }
.notes-saved { font-size: 0.78rem; color: var(--blue-deep); margin-top: 0.3rem; min-height: 1.1em; }
.action-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.4rem; }
.action-row .btn { font-size: 0.88rem; padding: 0.7rem 1.3rem; }

.equipo-empty {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.92rem;
  padding: 2rem 0;
}
.section-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  margin: 1.8rem 0 0.9rem;
}

/* ─── i18n: selector de idioma ───────────────────────────────────── */
.header-actions { display: flex; align-items: center; gap: 1.4rem; }
.lang-quickset {
  font-family: 'Caveat', cursive;
  font-size: 22px;
  font-weight: 500;
  color: #ff9500;
  white-space: nowrap;
}
.lang-quickset:hover { color: var(--blue-deep); }
.lang-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--blue-soft);
  border-radius: 999px;
  padding: 0.35rem 1.7rem 0.35rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23557' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
}
.lang-select:hover { color: var(--ink); border-color: var(--blue-deep); }
.lang-select:focus { outline: none; border-color: var(--blue-deep); }
html[dir="rtl"] .lang-select {
  padding: 0.35rem 0.9rem 0.35rem 1.7rem;
  background-position: left 0.7rem center;
}
.quiz-top-right { display: flex; align-items: center; gap: 1rem; }

/* ─── i18n: tipografías por idioma ──────────────────────────────── */
html[lang="th"] {
  --font-display: "Noto Sans Thai", "Cormorant Garamond", Georgia, serif;
  --font-body: "Noto Sans Thai", "Inter", -apple-system, sans-serif;
}
html[lang="zh"] {
  --font-display: "Songti SC", "STSong", "SimSun", Georgia, serif;
  --font-body: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
html[lang="ur"] {
  --font-display: "Noto Nastaliq Urdu", serif;
  --font-body: "Noto Nastaliq Urdu", "Inter", sans-serif;
}
html[lang="ur"] body { line-height: 1.9; }
html[lang="ne"] {
  --font-display: "Noto Sans Devanagari", Georgia, serif;
  --font-body: "Noto Sans Devanagari", "Inter", sans-serif;
}
html[lang="lo"] {
  --font-display: "Noto Sans Lao", Georgia, serif;
  --font-body: "Noto Sans Lao", "Inter", sans-serif;
}
html[lang="km"] {
  --font-display: "Noto Sans Khmer", Georgia, serif;
  --font-body: "Noto Sans Khmer", "Inter", sans-serif;
  line-height: 1.75;
}

/* ─── i18n: ajustes RTL (urdu) ──────────────────────────────────── */
html[dir="rtl"] .kicker { letter-spacing: 0; }
html[dir="rtl"] .brand-name small { letter-spacing: 0.12em; }
html[dir="rtl"] .wa-float { right: auto; left: 1.4rem; }
html[dir="rtl"] .hero-badge { right: auto; left: 4.9rem; }

/* ─── Resultado: reserva online + captura de email ────────────────── */
.result-ctas { display: flex; flex-direction: column; gap: 0.5rem; }
.result-ctas .btn { padding-top: 0.75rem; padding-bottom: 0.75rem; }

/* ─── Confirmación de reserva: acciones extra ─────────────────────── */
/* invitación a preparar la sesión (test previo): caja destacada, no un botón
   más, para que se lea como "aprovecha estos minutos" y no como trámite */
.conf-assess {
  margin: 1rem 0 0.4rem;
  padding: 1rem 1.15rem;
  background: var(--blue-pale);
  border: 1px solid var(--blue-soft);
  border-radius: var(--radius-sm);
  text-align: left;
}
.conf-assess h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; margin: 0 0 0.25rem; }
.conf-assess p { font-size: 0.86rem; color: var(--ink-soft); margin: 0 0 0.75rem; }
/* acciones rápidas (calendario / imprimir): apiladas a lo ancho, con icono
   propio en línea. El calendario destaca (contorno) sobre imprimir (suave). */
.conf-quick { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.cta-ico-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding-top: 0.7rem; padding-bottom: 0.7rem; }
.cta-ico { width: 18px; height: 18px; flex: none; }
.cta-ico-gcal { width: 22px; height: 22px; object-fit: contain; }
.conf-sep { border: none; border-top: 1px solid var(--blue-soft); margin: 1.1rem 0 0.9rem; }

/* ─── Confirmación en dos columnas: cabe en una pantalla sin scroll ─── */
/* solo la tarjeta de confirmación aprovecha el ancho; las demás (cargando,
   no encontrada) siguen estrechas y centradas */
.booking-shell .result-card:not(.conf-card) { max-width: 34rem; margin-left: auto; margin-right: auto; }
.conf-card { padding: 1.4rem 1.7rem; }
.conf-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 720px) {
  .conf-grid { grid-template-columns: 1.02fr 0.98fr; gap: 1.8rem; align-items: start; }
  .conf-grid .conf-sep { display: none; }               /* separador solo hace falta apilado */
  .conf-col-side > .conf-assess:first-child { margin-top: 0; }
  .conf-col .result-ctas { margin-top: 1rem; }
}
.conf-grid-solo { grid-template-columns: 1fr !important; max-width: 32rem; }

/* al imprimir la confirmación: solo la tarjeta, sin cabecera, pie, ni botones */
@media print {
  .site-header, .site-footer, .wa-float, .lang-select, .conf-assess,
  .conf-quick, #bkActions, .conf-sep { display: none !important; }
  body { background: #fff; }
  .booking-shell { padding: 0; }
  .result-card { box-shadow: none; border: 1px solid #ccc; }
}

/* ─── Cuenta de cliente (cuenta.html) ─────────────────────────────── */
.auth-tabs { display: flex; gap: 0.4rem; background: var(--blue-pale); border-radius: 999px; padding: 0.25rem; margin: 0.4rem 0 1rem; }
.auth-tab { flex: 1; border: none; background: transparent; padding: 0.55rem 0.5rem; border-radius: 999px; font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.auth-tab.active { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.auth-form { display: flex; flex-direction: column; gap: 0.6rem; }
.auth-form input { padding: 0.75rem 0.9rem; border: 1px solid var(--blue-soft); border-radius: var(--radius-sm); font: inherit; font-size: 0.95rem; }
.auth-form input:focus { outline: none; border-color: var(--blue); }
.auth-social { display: flex; flex-direction: column; gap: 0.5rem; }
.provider-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding-top: 0.7rem; padding-bottom: 0.7rem; }
.auth-or { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0; color: var(--ink-soft); font-size: 0.8rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--blue-soft); }
.email-msg.ok { color: #4a7d5f; }

.acc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.acc-head .btn { flex: none; padding: 0.45rem 0.9rem; }
.acc-h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; margin: 0 0 0.6rem; }
.acc-booking { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.7rem 0; border-bottom: 1px solid var(--blue-soft); }
.acc-booking:last-of-type { border-bottom: none; }
.acc-booking-main { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.9rem; }
.acc-booking-main strong { font-size: 0.98rem; }
.acc-booking-meta { color: var(--ink-soft); font-size: 0.8rem; }
.acc-booking .btn { flex: none; padding: 0.45rem 0.9rem; font-size: 0.85rem; }
.acc-past { margin-top: 0.6rem; }
.acc-past summary { cursor: pointer; color: var(--ink-soft); font-size: 0.88rem; padding: 0.3rem 0; }
.acc-chip { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--blue-pale); color: var(--blue-deep); margin-left: 0.3rem; }
.acc-chip.pending { background: #fdf3e3; color: #9a6a1e; }

.result-email {
  margin-top: 0.9rem;
  padding: 0.9rem 1.2rem 1rem;
  background: var(--blue-pale);
  border: 1px solid var(--blue-soft);
  border-radius: var(--radius-sm);
  text-align: left;
}
.result-email h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.1rem;
}
.result-email .hint { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 0.6rem; }

.email-row { display: flex; gap: 0.5rem; }
.email-row input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 1.5px solid var(--blue-soft);
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  font: 500 0.95rem var(--font-body);
  color: var(--ink);
  background: var(--white);
}
.email-row input[type="email"]:focus { outline: none; border-color: var(--blue-deep); }
.email-row .btn { flex: 0 0 auto; padding: 0.65rem 1.3rem; }

#emailTrap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.email-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 0.55rem;
  font-size: 0.76rem;
  color: var(--ink-soft);
  line-height: 1.4;
  cursor: pointer;
}
.email-consent input { margin-top: 0.2rem; accent-color: var(--blue-deep); flex: 0 0 auto; }
.email-consent a { color: var(--blue-deep); }

.email-msg { margin-top: 0.7rem; font-size: 0.85rem; font-weight: 500; color: #a05b5b; }
.email-msg.ok { color: #4a7d5f; }
#emailForm.sent .email-row, #emailForm.sent .email-consent { display: none; }

/* ─── Página legal ────────────────────────────────────────────────── */
.legal-page { padding: 4.5rem 0 5rem; }
.legal-page .container { max-width: 46rem; }
.legal-page h1 { font-family: var(--font-display); font-size: 2.4rem; font-weight: 600; margin: 0.3rem 0 0.6rem; }
.legal-page h2 { font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; margin: 2rem 0 0.5rem; }
.legal-page p { margin-bottom: 0.8rem; }
.legal-page .lead { color: var(--ink-soft); }
.legal-updated { margin-top: 2.5rem; font-size: 0.85rem; color: var(--ink-soft); }

/* ─── Tarjeta regalo ──────────────────────────────────────────────── */
.gift-hero { padding: 4.5rem 0 2.5rem; text-align: center; }
.gift-hero .container { max-width: 46rem; }
.gift-hero h1 { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 600; margin: 0.4rem 0 1rem; }
.gift-options { padding: 1.5rem 0 3rem; }
.gift-card-opt { display: flex; }
.gift-card-opt .goal-body { display: flex; flex-direction: column; }
.gift-card-opt .goal-body p { flex: 1 1 auto; }
.gift-featured { outline: 2px solid var(--blue); outline-offset: -2px; }
.gift-note { text-align: center; color: var(--ink-soft); font-size: 0.9rem; max-width: 40rem; margin: 1.8rem auto 0; }
.gift-how { padding: 2rem 0 4rem; background: var(--blue-pale); }
.gift-how h2 { font-family: var(--font-display); font-size: 2rem; font-weight: 600; text-align: center; margin-bottom: 2rem; }

/* compra online de la tarjeta regalo */
.gift-buy { padding: 2.5rem 0 3.5rem; background: var(--white); }
.gift-buy .container { max-width: 40rem; }
.gift-buy h2 { font-family: var(--font-display); font-size: 2rem; font-weight: 600; text-align: center; }
.gift-buy .gift-note { margin-bottom: 1.6rem; }
.gift-buy-form { display: grid; gap: 0.7rem; }
.gift-amounts { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 0.4rem; }
.gift-amounts .dur-chip { font-size: 1rem; padding: 0.6rem 1.2rem; }
.gift-custom { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--ink-soft); font-size: 0.95rem; }
.gift-custom input { width: 7.5rem; border: 1.5px solid var(--blue-soft); border-radius: 999px; padding: 0.55rem 0.9rem; font: 500 0.9rem var(--font-body); color: var(--ink); }
.gift-custom input:focus { outline: none; border-color: var(--blue-deep); }
.gift-buy-row { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.gift-buy-row input { flex: 1 1 14rem; border: 1.5px solid var(--blue-soft); border-radius: 10px; padding: 0.7rem 0.95rem; font: 500 0.95rem var(--font-body); color: var(--ink); background: var(--white); min-width: 0; }
.gift-buy-row input:focus { outline: none; border-color: var(--blue-deep); }

/* aplicar tarjeta regalo en la reserva */
.gift-apply { margin: 0.2rem 0; }
.gift-apply-toggle { background: none; border: none; color: var(--blue-deep); font: 500 0.88rem var(--font-body); cursor: pointer; padding: 0.2rem 0; text-decoration: underline dotted; text-underline-offset: 3px; }
.gift-apply-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.gift-apply-row[hidden] { display: none; }
.gift-apply-row input { flex: 1 1 auto; text-transform: uppercase; letter-spacing: 0.06em; }
.gift-apply-row .btn { flex: 0 0 auto; padding: 0.6rem 1.2rem; font-size: 0.88rem; }

/* tarjetas regalo en el panel del equipo */
.gift-staff-card { background: var(--white); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 0.9rem 1.1rem; margin-top: 0.7rem; font-size: 0.92rem; display: grid; gap: 0.3rem; }

/* buscador de clientas */
.team-search { margin: 0 0 1.2rem; }
.team-search input[type="search"] {
  width: 100%;
  border: 1.5px solid var(--blue-soft);
  border-radius: 999px;
  padding: 0.65rem 1.1rem;
  font: 500 0.92rem var(--font-body);
  color: var(--ink);
  background: var(--white);
}
.team-search input[type="search"]:focus { outline: none; border-color: var(--blue-deep); }
.team-search .agenda-list { margin-top: 0.7rem; }

/* horarios y gestión del equipo */
.hours-toggle { padding: 0.25rem 0.9rem !important; font-size: 0.75rem !important; margin-left: 0.5rem; vertical-align: middle; }
.hours-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0; flex-wrap: wrap; }
.hours-row .walkin-check { min-width: 7.5rem; }
.hours-row input[type="time"] {
  border: 1.5px solid var(--blue-soft);
  border-radius: 8px;
  padding: 0.3rem 0.5rem;
  font: 500 0.88rem var(--font-body);
  color: var(--ink);
}
.hours-row input[type="time"]:focus { outline: none; border-color: var(--blue-deep); }
.hours-extra { font-size: 0.72rem; color: var(--ink-soft); flex-basis: 100%; }
.hours-windows { display: flex; flex-direction: column; gap: 0.35rem; }
.hours-window-row { display: flex; align-items: center; gap: 0.6rem; }
.hours-remove-window { background: none; border: none; color: var(--ink-soft); cursor: pointer; font-size: 0.85rem; padding: 0.1rem 0.3rem; }
.hours-remove-window:hover { color: var(--ink); }
.hours-add-window { flex-basis: 100%; align-self: flex-start; }
.staff-row { flex-wrap: wrap; }
.staff-row.is-off { opacity: 0.55; }
.staff-days { display: block; color: var(--ink-soft); font-size: 0.75rem; }
.staff-actions { display: flex; gap: 0.4rem; flex: 0 0 auto; }
.staff-actions .btn { padding: 0.3rem 0.9rem; font-size: 0.75rem; }
.staff-hours-editor { background: var(--white); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 0.8rem 1rem; margin: 0.4rem 0 0.8rem; }

/* ─── Páginas SEO ─────────────────────────────────────────────────── */
.seo-page h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); }
.seo-faq { display: grid; gap: 0.6rem; margin-top: 0.5rem; }
.seo-faq-item { margin: 0; }
.seo-faq-item p { padding: 0.8rem 1.2rem 1rem; margin: 0; color: var(--ink-soft); }
.seo-cta { margin: 2.5rem 0; padding: 1.8rem; background: var(--blue-pale); border-radius: var(--radius); text-align: center; }
.seo-cta .hero-ctas { justify-content: center; margin-top: 1rem; }
.seo-related { margin-top: 2.5rem; border-top: 1px solid var(--blue-soft); padding-top: 1.5rem; }
.seo-related h3 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 0.6rem; }
.seo-related ul { list-style: none; display: grid; gap: 0.4rem; }
.seo-related a { color: var(--blue-deep); }

/* ─── Reserva online ──────────────────────────────────────────────── */
.booking-shell { padding: 1.1rem 0 1.6rem; }
.booking-shell .container { max-width: 58rem; }
.booking-shell .kicker { margin-bottom: 0.3rem; }
.booking-shell h1 { font-family: var(--font-display); font-size: clamp(1.6rem, 3.2vw, 2.1rem); font-weight: 600; margin: 0.1rem 0 0.25rem; }
.booking-shell .lead { font-size: 0.92rem; margin-bottom: 0.2rem; }
.booking-offline { margin-top: 0.8rem; padding: 1.4rem; background: var(--sand-pale); border-radius: var(--radius-sm); }
/* los 5 pasos se apilan en la MISMA celda de grid: aunque solo uno se ve,
   todos (incluidos los ocultos) cuentan para la altura, así que el
   contenedor siempre mide lo que mide el paso más alto (el 5, confirmar y
   pagar) y el pie de página nunca salta al cambiar de paso o de día */
/* grid-template-columns explícito: sin él, la única columna implícita se
   ajusta al contenido más ancho en vez de ocupar el 100%, y entonces
   "justify-content:center" dentro de cada paso no tiene de sobra donde
   centrarse */
.booking-steps { display: grid; grid-template-columns: minmax(0, 1fr); margin-bottom: 1rem; }
.booking-steps > .booking-step { grid-column: 1; grid-row: 1; width: 100%; }
.booking-steps > .booking-step[hidden] { display: block; visibility: hidden; pointer-events: none; }
/* la regla genérica "section { padding: ... }" (pensada para las secciones
   largas de la home) se colaba aquí también, ya que .booking-step ES un
   <section> — esto era la causa real del hueco vertical, no un margen */
.booking-step { margin-top: 0.6rem; padding: 0; }
.booking-step h2 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.6rem; }
.booking-step .step-n { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--blue-soft); color: var(--blue-deep); display: inline-flex; align-items: center; justify-content: center; font: 600 0.85rem var(--font-body); flex: 0 0 auto; }
.step-back { display: block; margin: 0 0 1.2rem; background: none; border: none; color: var(--ink-soft); font: 500 0.85rem var(--font-body); cursor: pointer; padding: 0.3rem 0; }
.step-back[hidden] { display: none; }
.step-back:hover { color: var(--blue-deep); }
.wizard-progress { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-bottom: 0.3rem; }
.wizard-dot { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--ink-soft); opacity: 0.55; }
.wizard-dot em { font-style: normal; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1.5px solid var(--blue-soft); display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; }
.wizard-dot.done { opacity: 0.85; }
.wizard-dot.done em { background: var(--blue-soft); border-color: var(--blue-soft); }
.wizard-dot.current { opacity: 1; color: var(--ink); font-weight: 600; }
.wizard-dot.current em { background: var(--blue-deep); border-color: var(--blue-deep); color: var(--white); animation: wizard-pulse 2s ease-in-out infinite; }
@keyframes wizard-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(91, 135, 160, 0.45); }
  50% { box-shadow: 0 0 0 0.3rem rgba(91, 135, 160, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .wizard-dot.current em { animation: none; }
}
.who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.who-card { padding: 0.9rem 1rem; border: 1.5px solid var(--blue-soft); border-radius: var(--radius-sm); background: var(--white); cursor: pointer; font: 600 1.05rem var(--font-body); color: var(--ink); text-align: center; }
.who-card:hover:not(:disabled) { border-color: var(--blue-deep); }
.who-card:disabled { opacity: 0.4; cursor: not-allowed; }
@media (max-width: 30rem) { .who-grid { grid-template-columns: 1fr; } }
/* paso 2: lista a la izquierda, foto + detalle del masaje elegido a la derecha */
.svc-split { display: flex; gap: 1rem; align-items: stretch; }
.svc-list { flex: 0 0 18.5rem; display: flex; flex-direction: column; gap: 0.35rem; max-height: 20rem; overflow-y: auto; padding-right: 0.3rem; }
.svc-item { text-align: left; padding: 0.55rem 0.75rem; border: 1.5px solid var(--blue-soft); border-radius: var(--radius-sm); background: var(--white); cursor: pointer; font-family: var(--font-body); display: grid; gap: 0.1rem; }
.svc-item strong { font-size: 0.85rem; color: var(--ink); white-space: nowrap; }
.svc-item span { font-size: 0.72rem; color: var(--ink-soft); white-space: nowrap; }
.svc-item.active { border-color: var(--blue-deep); background: var(--blue-pale); }
.svc-detail { flex: 1; display: flex; gap: 1rem; border: 1.5px solid var(--blue-soft); border-radius: var(--radius-sm); padding: 0.9rem; background: var(--white); min-width: 0; }
/* tamaño del recuadro FIJO (no cambia con la forma de loto) para que la
   página no salte de alto al cambiar de masaje */
.svc-detail-media { flex: 0 0 38%; aspect-ratio: 900 / 700; }
.svc-detail-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
/* 3 formas de loto distintas para variar la foto de cada masaje (misma caja) */
.svc-detail-media.lotus-1 img { -webkit-mask-image: url("lotus-flower-1.png"); mask-image: url("lotus-flower-1.png"); }
.svc-detail-media.lotus-2 img { -webkit-mask-image: url("lotus-flower-2.png"); mask-image: url("lotus-flower-2.png"); }
.svc-detail-media.lotus-3 img { -webkit-mask-image: url("lotus-flower-3.png"); mask-image: url("lotus-flower-3.png"); }
.svc-detail-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.svc-detail-body h3 { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 0.35rem; }
.svc-detail-body p { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.45; margin: 0 0 0.4rem; }
.svc-detail-meta { font-weight: 600; color: var(--ink) !important; }
.svc-detail-body .btn { margin-top: auto; align-self: flex-start; padding: 0.55rem 1.3rem; font-size: 0.85rem; }
.dur-row { display: flex; align-items: center; gap: 0.7rem; margin-top: 1rem; flex-wrap: wrap; }
.dur-label { font-size: 0.88rem; color: var(--ink-soft); }
/* paso 3: el masaje ya elegido a la izquierda (para orientarse), duración
   a la derecha */
.dur-split { display: flex; gap: 2.5rem; align-items: center; justify-content: center; padding: 1rem 0; }
.dur-chosen { flex: 0 0 19rem; }
/* misma caja fija para las 3 formas de loto, mismo motivo que en el paso 2 */
.dur-chosen-media { aspect-ratio: 900 / 700; margin-bottom: 0.7rem; }
.dur-chosen-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.dur-chosen-media.lotus-1 img { -webkit-mask-image: url("lotus-flower-1.png"); mask-image: url("lotus-flower-1.png"); }
.dur-chosen-media.lotus-2 img { -webkit-mask-image: url("lotus-flower-2.png"); mask-image: url("lotus-flower-2.png"); }
.dur-chosen-media.lotus-3 img { -webkit-mask-image: url("lotus-flower-3.png"); mask-image: url("lotus-flower-3.png"); }
.dur-chosen h3 { font-family: var(--font-display); font-size: 1.25rem; margin: 0 0 0.35rem; }
.dur-chosen p { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.45; margin: 0; }
/* sin flex:1 aposta: si crece para llenar el hueco, los chips (alineados
   a la izquierda dentro de esa caja) se ven "descentrados" aunque el
   grupo entero sí esté centrado — mejor que ocupe solo lo que necesita */
.dur-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; flex: 0 0 auto; }
.dur-chip, .slot-chip { padding: 0.5rem 0.9rem; border: 1.5px solid var(--blue-soft); border-radius: 999px; background: var(--white); cursor: pointer; font: 500 0.85rem var(--font-body); color: var(--ink); }
.dur-chip.selected, .slot-chip.selected { background: var(--blue-deep); border-color: var(--blue-deep); color: var(--white); }
/* paso 4: calendario (3 semanas en filas de 7) a la izquierda, huecos de
   ese día a la derecha — usa mejor el ancho que apilarlos uno debajo del otro */
.when-split { display: flex; gap: 2rem; align-items: flex-start; justify-content: center; }
.day-strip { display: grid; grid-template-columns: repeat(7, minmax(3.3rem, 1fr)); gap: 0.4rem; flex: 0 0 26rem; }
.day-chip { min-width: 0; padding: 0.55rem 0.3rem; border: 1.5px solid var(--blue-soft); border-radius: var(--radius-sm); background: var(--white); cursor: pointer; display: grid; gap: 0.05rem; text-align: center; font-family: var(--font-body); }
.day-chip span { font-size: 0.65rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.day-chip strong { font-size: 1.05rem; color: var(--ink); }
.day-chip.selected { border-color: var(--blue-deep); background: var(--blue-pale); }
.day-chip.empty { opacity: 0.45; }
.when-slots { flex: 1; min-width: 0; }
.slot-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.slot-chip { padding: 0.65rem 1.1rem; }
/* paso 5: resumen a la izquierda, formulario a la derecha */
.confirm-split { display: flex; gap: 2rem; align-items: flex-start; justify-content: center; }
.confirm-summary { flex: 0 0 21rem; }
.confirm-form { flex: 0 0 22rem; min-width: 0; }
.booking-summary { padding: 1rem 1.2rem; background: var(--blue-pale); border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: 0.95rem; line-height: 1.6; }
#bookingForm { display: grid; gap: 0.5rem; }
#bookingForm input { border: 1.5px solid var(--blue-soft); border-radius: 10px; padding: 0.6rem 0.9rem; font: 500 0.95rem var(--font-body); color: var(--ink); background: var(--white); }
#bookingForm input:focus { outline: none; border-color: var(--blue-deep); }
#bkStaff { border: 1.5px solid var(--blue-soft); border-radius: 10px; padding: 0.7rem 0.95rem; font: 500 0.95rem var(--font-body); color: var(--ink); background: var(--white); }
#bkStaff:focus { outline: none; border-color: var(--blue-deep); }
#bkTrap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.booking-note { font-size: 0.88rem; color: var(--ink-soft); }
.booking-fineprint { font-size: 0.78rem; color: var(--ink-soft); margin-top: 1rem; }
.booking-paid { color: #4a7d5f; font-weight: 600; margin-bottom: 0.6rem; }

/* ─── Panel del equipo: cuentas y agenda real ─────────────────────── */
.auth-box { display: grid; gap: 0.6rem; margin-bottom: 0.4rem; }
.auth-email { font-size: 1rem !important; letter-spacing: normal !important; text-align: center; }
.auth-divider { font-size: 0.8rem; color: var(--ink-soft); margin: 0.6rem 0 0.2rem; }
.team-controls { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.team-hello { font-size: 0.95rem; color: var(--ink-soft); }
.team-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.team-actions .btn { padding: 0.55rem 1.2rem; font-size: 0.88rem; }

/* tira de días del panel (reutiliza los chips de la reserva online) */
.team-day-strip { margin: 0 0 1.1rem; }
.team-day-strip .day-chip { min-width: 4.3rem; background: var(--white); }
.day-count { font-size: 0.66rem !important; color: var(--blue-deep) !important; text-transform: none !important; letter-spacing: 0 !important; }
.day-chip.empty .day-count { color: var(--ink-soft) !important; }

/* etiquetas de la agenda: origen y estado */
.agenda-tags { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.agenda-tag.walkin { background: var(--blue-soft); }
.agenda-tag.tag-paid { background: #ddebe2; color: #3f6b52; }
.agenda-tag.tag-deposit { background: #fbeecf; color: #8a6d3b; }
.agenda-tag.tag-pending { background: var(--sand-pale); color: #8a6d3b; }
.agenda-tag.tag-cancelled { background: #f3dcd4; color: #a05b3f; }
.agenda-tag.tag-no_show { background: #e9e4ef; color: #6b5b7d; }
.agenda-tag.tag-completed { background: #ddebe2; color: #3f6b52; }
.agenda-item.is-off { opacity: 0.55; }
.client-contact { font-size: 0.92rem; margin: -0.6rem 0 1rem; color: var(--ink-soft); }

/* alta rápida de mostrador */
.walkin-box {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.2rem 1.4rem 1.4rem;
  margin-bottom: 1.4rem;
}
.walkin-box .section-label { margin-top: 0; }
.walkin-form { display: grid; gap: 0.6rem; }
.walkin-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.walkin-form input, .walkin-form select {
  border: 1.5px solid var(--blue-soft);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  font: 500 0.92rem var(--font-body);
  color: var(--ink);
  background: var(--white);
  flex: 1 1 9rem;
  min-width: 0;
}
.walkin-form input:focus, .walkin-form select:focus { outline: none; border-color: var(--blue-deep); }
.walkin-check { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--ink-soft); flex: 0 0 auto; align-self: center; cursor: pointer; }
.walkin-check input { accent-color: var(--blue-deep); width: auto; flex: 0 0 auto; }
.timeoff-box { margin-top: 2rem; }
.timeoff-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.45rem 0; border-bottom: 1px solid var(--blue-soft); font-size: 0.88rem; flex-wrap: wrap; }
.timeoff-form { display: flex; gap: 0.5rem; margin-top: 0.8rem; flex-wrap: wrap; }
.timeoff-form input, .timeoff-form select { border: 1.5px solid var(--blue-soft); border-radius: 10px; padding: 0.5rem 0.7rem; font: 500 0.85rem var(--font-body); color: var(--ink); flex: 1 1 10rem; }
.timeoff-form select { background: var(--white); }
.timeoff-form input:focus, .timeoff-form select:focus { outline: none; border-color: var(--blue-deep); }

/* type badges for time-off */
.agenda-tag.tag-vacation { background: #e6f3ea; color: #2d5a3d; }
.agenda-tag.tag-sick { background: #ffe6e6; color: #8b3a3a; }
.agenda-tag.tag-break { background: #fff4e6; color: #8b6d3b; }
.agenda-tag.tag-other { background: #e8f1f7; color: #3d5a7a; }

/* approval actions for pending time-off */
.approval-actions { display: flex; gap: 0.4rem; }
.staff-pending { display: inline-block; font-size: 0.75rem; background: var(--sand-pale); color: var(--ink-soft); padding: 0.2rem 0.5rem; border-radius: 6px; margin-right: 0.3rem; }

/* schedule overrides time selector */
#soTimeInputs { display: flex; gap: 0.4rem; align-items: center; }
#soTimeInputs input { flex: 0 1 auto; min-width: 6rem; }
#soTimeInputs span { font-size: 0.85rem; color: var(--ink-soft); }

/* coverage heatmap */
.coverage-heatmap-wrap { overflow-x: auto; margin-top: 0.8rem; }
.coverage-heatmap { border-collapse: separate; border-spacing: 2px; font-size: 0.72rem; }
.coverage-heatmap th { font-weight: 600; color: var(--ink-soft); min-width: 24px; padding-bottom: 0.3rem; vertical-align: bottom; }
.coverage-heatmap th.day-label, .coverage-heatmap th.corner {
  min-width: 92px; text-align: right; padding-right: 0.6rem; color: var(--ink);
  position: sticky; left: 0; background: var(--white); vertical-align: middle;
}
.coverage-heatmap th.corner { vertical-align: bottom; }
.coverage-heatmap td.cov-cell {
  position: relative;
  width: 24px; height: 24px; min-width: 24px; border-radius: 5px; text-align: center;
  font-weight: 700; cursor: pointer; transition: transform 0.1s ease; user-select: none;
}
.coverage-heatmap td.cov-cell:hover, .coverage-heatmap td.cov-cell:focus {
  outline: none; transform: scale(1.18); z-index: 1;
  box-shadow: var(--shadow-sm);
}
.cov-0 { background: #ffe6e6; color: #8b3a3a; }
.cov-1 { background: #fff4e6; color: #8b6d3b; }
.cov-2 { background: var(--blue-soft); color: var(--ink); }
.cov-3 { background: var(--blue); color: var(--ink); }
.cov-4 { background: var(--blue-deep); color: var(--white); }
.cov-cell.cov-over { box-shadow: inset 0 0 0 2px var(--pain); }
.cov-cell.cov-over:hover, .cov-cell.cov-over:focus { box-shadow: inset 0 0 0 2px var(--pain), var(--shadow-sm); }

/* pastilla partida: dos mitades unidas — izquierda = terapeutas que cubren la
   franja (color = nivel de cobertura), derecha = reservas de esa fecha (color =
   presión: con hueco / completa / desbordada). Así las reservas se ven de un vistazo. */
.coverage-heatmap td.cov-cell.cov-split { padding: 0; width: auto; min-width: 34px; }
.cov-pill { display: flex; align-items: stretch; width: 100%; height: 24px; border-radius: 5px; overflow: hidden; }
.cov-seg { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; min-width: 17px; line-height: 1; }
.cov-seg.cov-book { font-weight: 700; }
.cov-book.book-none { background: #efe7d8; color: transparent; }
.cov-book.book-some { background: var(--ink-soft); color: var(--white); }
.cov-book.book-full { background: var(--ink); color: var(--white); }
.cov-book.book-over { background: var(--pain); color: var(--white); }
tr.is-past .cov-pill { opacity: 0.55; }
.legend-note { font-size: 0.72rem; color: var(--ink-soft); }
.legend-chip.legend-chip-book { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--blue-pale); color: var(--ink-soft); }
.cov-seg-key { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.cov-seg-key.book-some { background: var(--ink-soft); }
.cov-seg-key.book-full { background: var(--ink); }
.cov-seg-key.book-over { background: var(--pain); }
th.day-label.is-today { color: var(--blue-deep); }
th.day-label.is-today::before { content: "● "; font-size: 0.55em; vertical-align: middle; }

/* modo edición: celdas binarias (trabaja / libre) que se pintan a golpe de clic o arrastre */
.cov-cell.cov-on { background: var(--blue); }
.cov-cell.cov-off { background: #f3ede2; }
.coverage-heatmap.is-editing td.cov-cell { touch-action: none; }

.coverage-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.9rem; }
.legend-chip { font-size: 0.72rem; padding: 0.25rem 0.6rem; border-radius: 999px; font-weight: 600; }
.legend-chip.cov-on-chip { background: var(--blue); color: var(--ink); }
.legend-chip.cov-off-chip { background: #f3ede2; color: var(--ink-soft); }

.coverage-detail { margin-top: 0.6rem; font-size: 0.88rem; color: var(--ink-soft); min-height: 1.3em; }
.coverage-warning { margin-top: 0.6rem; font-size: 0.85rem; color: #8b3a3a; }

/* popover de la rejilla: pastilla flotante con quién cubre + reservas exactas */
.cov-popover {
  position: fixed;
  z-index: 500;
  width: 320px;
  max-width: calc(100vw - 20px);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--blue-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 1rem 1.1rem 0.9rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px) scale(0.98);
  pointer-events: none;
  /* la visibilidad cambia DESPUÉS del fundido al ocultar (para que se vea la
     transición) pero AL INSTANTE al mostrar; visibility:hidden saca el
     popover del todo del pintado y de elementFromPoint — no basta con la
     opacidad sola: opacity + backdrop-filter a veces deja en Chrome un
     "fantasma" totalmente visible aunque la opacidad calculada sea 0 */
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s;
}
.cov-popover.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0s;
}
.cov-popover.cp-below { transform-origin: top center; }
.cov-popover:not(.cp-below) { transform-origin: bottom center; }

.cp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; padding-bottom: 0.7rem; margin-bottom: 0.7rem; border-bottom: 1px solid var(--blue-soft); }
.cp-date { display: block; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; text-transform: capitalize; line-height: 1.2; }
.cp-range { display: block; font-size: 0.82rem; color: var(--ink-soft); margin-top: 0.1rem; }
.cp-tier { flex: 0 0 auto; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.28rem 0.6rem; border-radius: 999px; white-space: nowrap; }

.cp-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); font-weight: 600; margin: 0 0 0.4rem; }
.cp-label:not(:first-of-type) { margin-top: 0.8rem; }

.cp-team { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cp-chip { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--blue-pale); border-radius: 999px; padding: 0.28rem 0.6rem 0.28rem 0.4rem; font-size: 0.8rem; font-weight: 600; }
.cp-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

.cp-bookings { display: flex; flex-direction: column; gap: 0.5rem; max-height: 220px; overflow-y: auto; }
.cp-booking { display: flex; align-items: flex-start; gap: 0.7rem; background: var(--blue-pale); border-radius: 10px; padding: 0.55rem 0.7rem; }
.cp-time { font-family: var(--font-display); font-size: 0.82rem; font-weight: 600; color: var(--blue-deep); line-height: 1.3; white-space: nowrap; }
.cp-booking-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.cp-booking-main strong { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-service { font-size: 0.76rem; color: var(--ink-soft); }
.cp-with { display: flex; align-items: center; gap: 0.3rem; font-size: 0.76rem; font-weight: 600; margin-top: 0.1rem; }
.cp-tags { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; }
.cp-tags .agenda-tag { font-size: 0.62rem; padding: 0.2rem 0.5rem; }
.cp-empty { font-size: 0.82rem; color: var(--ink-soft); font-style: italic; margin: 0; }
@media (max-width: 480px) { .cov-popover { width: calc(100vw - 20px); } }

/* cabecera del grid: navegación de semana + selector de "editar horario de" */
.grid-header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.7rem; }
.grid-nav-btn {
  border: 1.5px solid var(--blue-soft); background: var(--white); border-radius: 8px;
  width: 28px; height: 28px; line-height: 1; cursor: pointer; font-size: 0.95rem; color: var(--ink);
}
.grid-nav-btn:hover { border-color: var(--blue-deep); }
.grid-week-label { font-weight: 600; color: var(--ink); min-width: 7rem; text-align: center; font-size: 0.88rem; }
.grid-today-btn { font-size: 0.78rem; padding: 0.3rem 0.6rem; }
.grid-edit-label { font-size: 0.82rem; color: var(--ink-soft); }
.grid-caption { font-size: 0.8rem; color: var(--ink-soft); font-style: italic; margin: 0.6rem 0 0; }

.grid-savebar {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.8rem;
  padding: 0.6rem 0.8rem; background: var(--sand-pale); border-radius: 10px; font-size: 0.85rem;
}
.grid-savebar .btn { font-size: 0.8rem; padding: 0.35rem 0.7rem; }