/* Bálsamo Skin — shared styles for every page.
   Layout: a full-screen welcome image with large type, then one centred column read from top to bottom,
   with sections joined by a thin vertical line.
   To change a colour or font everywhere, change it once in the list below. */

:root {
  --ground: #FFFFFF;      /* page background: white */
  --surface: #FFFFFF;     /* cards and panels */
  --ink: #171513;         /* main text and logo */
  --ink-soft: #5C5650;    /* secondary text */
  --ink-heading: #2E2520; /* headings: a deep warm espresso, softer than the logo black (3 Nov) */
  --line: #E4E0DB;        /* thin lines */
  --band: #F6F4F1;        /* very lightly tinted areas */
  --button: #171513;      /* main button */
  --button-ink: #FFFFFF;  /* text on main button */
  --on-photo: #FFFFFF;    /* text that sits on the welcome photo (same in light and dark mode) */

  /* Fonts chosen by Yasmin 30 Oct 2026 (option 5, "Classic elegance"): DM Serif Display for headings and italics, DM Sans for text. */
  --font-sans: "DM Sans", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --font-display: "DM Serif Display", "Iowan Old Style", Georgia, serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3rem;
  --step-2: clamp(1.85rem, 5vw, 2.5rem);
  --step-hero: clamp(2.5rem, 7vw, 6rem);

  --column: 36rem;        /* width of the reading column */
  --wide: 80rem;          /* widest content on big screens */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Always light, whatever the phone or computer is set to (a clean, white look suits a skin clinic).
   "only" also stops phones that darken websites by themselves. */
:root { color-scheme: light only; }
:root[data-theme="dark"] {
  --ground: #12110F; --surface: #1A1816; --ink: #F3F0EB; --ink-soft: #B9B2AA; --ink-heading: #D8D0C6;
  --line: #2F2C28; --band: #181614; --button: #F3F0EB; --button-ink: #12110F;
  color-scheme: dark;
}

/* ---------- Basics ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* the page's own base colour (seen only when a phone "bounces" past the top or bottom): white, and the footer's cream
   while the footer is on screen (js/site.js), so pulling past the bottom never shows a white strip (Yasmin 5 Nov).
   overscroll-behavior stops the bounce itself where the browser allows it. */
html { background-color: #FFFFFF; overscroll-behavior-y: none; transition: background-color .2s; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.2; text-wrap: balance; margin: 0; color: var(--ink-heading); }
h2 em, h3 em { font-style: italic; }
p { margin: 0; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }

/* Language: only the chosen language is shown (and read aloud by screen readers). */
/* uses the site's own data-lang (set by js/site.js), not lang: Safari's and Google's translators change lang, which showed both languages at once */
html:not([data-lang="en"]) body [lang="en"],
html[data-lang="en"] body [lang="pt"],
/* each text also carries its own data-l copy (js/site.js): Google's translator relabels lang="pt"/"en" with the new language */
html:not([data-lang="en"]) body [data-l="en"],
html[data-lang="en"] body [data-l="pt"] { display: none !important; }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 30;
  background: var(--button); color: var(--button-ink);
  padding: 0.6rem 1.2rem; border-radius: 999px;
}
.skip-link:focus { top: 1rem; }

.column {
  max-width: calc(var(--column) + 32px);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.eyebrow { font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- Header ---------- */
/* The top bar follows you as you scroll (on every page). */
.site-header {
  position: sticky; top: 0; z-index: 30;
  padding-top: env(safe-area-inset-top, 0px);
  /* solid white (never see-through), with a soft shadow underneath instead of a hard line */
  background: var(--ground); border-bottom: 0; color: var(--ink);
  box-shadow: 0 1px 0 rgba(20, 16, 14, 0.025), 0 6px 16px -14px rgba(20, 16, 14, 0.12);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 1px 0 rgba(20, 16, 14, 0.025), 0 6px 16px -14px rgba(20, 16, 14, 0.12); }
.site-header .bar {
  max-width: var(--wide); margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0.75rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.mark { color: inherit; display: block; width: 3.25rem; padding-block: 0.4rem; }
.mark--full { width: clamp(7.5rem, 15vw, 11.5rem); transition: width 0.4s var(--ease); }
/* Once you scroll, the bar gets slimmer and the logo a little smaller. */
.site-header.is-scrolled .mark--full { width: clamp(5.75rem, 10vw, 7.5rem); }
.site-header .bar { transition: padding 0.4s var(--ease); }
.site-header.is-scrolled .bar { padding-block: 0.5rem; }
/* Booking and My bookings: the slim bar from the start, so each step has the most room */
.site-header.is-app .mark--full { width: clamp(5.75rem, 10vw, 7.5rem); }
.site-header.is-app .bar { padding-block: 0.5rem; }
.site-nav { display: flex; align-items: center; gap: 0.25rem 1.25rem; }

/* Menu split in three: Treatments on the left, logo in the centre, Contact and language on the right. */
.site-header .bar--split { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.bar--split .nav-left { justify-self: start; }
.bar--split .nav-right { justify-self: end; }
@media (max-width: 24rem) {
  .bar--split .site-nav { gap: 0.6rem; }
  .bar--split .site-nav a { font-size: 0.8rem; letter-spacing: 0; }
  .bar--split .mark--full { width: 6.25rem; }
  .bar--split .lang-toggle { padding-inline: 0.6rem; min-width: 44px; }
}
.site-nav a { text-decoration: none; font-size: var(--step--1); letter-spacing: 0.03em; padding-block: 0.6rem; }
.site-nav a:hover, .site-nav a[aria-current="page"] { text-decoration: underline; }
.lang-toggle {
  font: inherit; font-size: 0.8rem; letter-spacing: 0.08em;
  color: inherit; background: transparent;
  border: 1px solid currentColor; border-radius: 999px;
  min-height: 40px; min-width: 48px; padding: 0.35rem 0.9rem; cursor: pointer; opacity: 0.85;
  transition: opacity 0.3s var(--ease);
}
.lang-toggle:hover { opacity: 1; }

/* On the welcome page the bar starts see-through, in white over the photo,
   and turns into the white bar once you scroll past the photo. */
.site-header--over {
  position: fixed; inset: 0 0 auto; color: var(--on-photo);
  background: transparent; box-shadow: none;
}
.site-header--over .bar { padding-block: 1.25rem; }
/* over the photo there is no shadow at all, even after a little scrolling: it only comes with the white bar */
.site-header--over:not(.is-solid), .site-header--over.is-scrolled:not(.is-solid) { box-shadow: none; }
.site-header--over.is-solid {
  color: var(--ink); background: var(--ground);
  box-shadow: 0 1px 0 rgba(20, 16, 14, 0.025), 0 6px 16px -14px rgba(20, 16, 14, 0.12);
}
.site-header--over.is-scrolled .bar { padding-block: 0.5rem; }

/* ---------- Side menu ---------- */
.menu-toggle {
  font: inherit; font-size: var(--step--1); letter-spacing: 0.03em; color: inherit;
  background: none; border: 0; padding: 0; min-height: 44px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.65rem;
}
.menu-icon { width: 22px; height: 9px; border-block: 1.5px solid currentColor; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.drawer {
  position: fixed; inset: 0 auto 0 0; margin: 0; padding: 0; border: 0;
  width: min(24rem, 88vw); max-width: none; height: 100%; max-height: none;
  background: var(--ground); color: var(--ink);
  box-shadow: 0 0 60px -20px rgba(20, 16, 14, 0.35);
  transform: translateX(-100%);
  transition: transform 0.45s var(--ease), overlay 0.45s allow-discrete, display 0.45s allow-discrete;
}
.drawer[open] { transform: none; }
@starting-style { .drawer[open] { transform: translateX(-100%); } }
.drawer::backdrop {
  background: rgba(20, 16, 14, 0);
  transition: background-color 0.45s var(--ease), overlay 0.45s allow-discrete, display 0.45s allow-discrete;
}
.drawer[open]::backdrop { background: rgba(20, 16, 14, 0.35); }
@starting-style { .drawer[open]::backdrop { background: rgba(20, 16, 14, 0); } }
@media (prefers-reduced-motion: reduce) { .drawer, .drawer::backdrop { transition: none; } }

.drawer-inner {
  height: 100%; overflow-y: auto;
  display: grid; grid-template-rows: auto 1fr auto auto; gap: 2rem; justify-items: start;
  padding-top: max(1.25rem, env(safe-area-inset-top, 0px));
  padding-bottom: max(1.75rem, env(safe-area-inset-bottom, 0px));
  padding-left: max(1.75rem, env(safe-area-inset-left, 0px));
  padding-right: 1.5rem;
}
.drawer-top { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.drawer-mark { display: block; width: 3.25rem; color: var(--ink); }
.drawer-actions { display: flex; align-items: center; gap: 0.6rem; }
.lang-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.lang-switch button {
  font: inherit; font-size: 0.78rem; letter-spacing: 0.08em; color: var(--ink-soft);
  background: transparent; border: 0; border-radius: 999px; min-width: 40px; min-height: 36px; cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.lang-switch button[aria-pressed="true"] { background: var(--button); color: var(--button-ink); }
.drawer-close {
  font: inherit; font-size: 1.8rem; line-height: 1; color: var(--ink);
  background: none; border: 1px solid var(--line); border-radius: 999px;
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
}
.drawer-close:hover { border-color: var(--ink); }
.drawer nav { width: 100%; align-self: center; }
.drawer-links { list-style: none; margin: 0; padding: 0; display: grid; }
.drawer-links li { padding-block: 0.75rem; border-bottom: 1px solid var(--line); display: grid; gap: 0.15rem; }
.drawer-links li:first-child { border-top: 1px solid var(--line); }
.drawer-links a {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.15rem; line-height: 1.3; color: var(--ink-heading); text-decoration: none;
}
.drawer-links a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.drawer-links p { font-size: 0.8rem; color: var(--ink-soft); }
.drawer-links p em { font-family: var(--font-display); }
.drawer-foot { display: grid; gap: 0.3rem; font-size: var(--step--1); color: var(--ink-soft); }
.drawer-foot a { text-decoration: none; }
.drawer-foot a:hover { text-decoration: underline; }

/* Top bar: PT | EN switch styled to suit the bar it sits in. */
.site-header .lang-switch { border-color: currentColor; }
.site-header .lang-switch button { color: inherit; opacity: 0.85; }
.site-header .lang-switch button[aria-pressed="true"] { opacity: 1; background: var(--button); color: var(--button-ink); }
.site-header--over .lang-switch button[aria-pressed="true"] { background: var(--on-photo); color: #171513; }
.site-header--over.is-solid .lang-switch button[aria-pressed="true"] { background: var(--button); color: var(--button-ink); }
/* Narrow phones: Contact moves into the menu so both sides of the bar stay balanced. */
@media (max-width: 30rem) { .site-header .nav-contact { display: none; } }

/* ---------- Buttons (round) ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 52px; padding: 0.85rem 2rem;
  background: var(--button); color: var(--button-ink);
  font-family: var(--font-sans); font-size: 0.9rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--button); border-radius: 999px;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
@media (hover: hover) { .button:hover { background: transparent; color: var(--ink); text-decoration: none; } }
.button--quiet { background: transparent; color: var(--ink); border-color: var(--line); }
.button--quiet:hover { border-color: var(--ink); }
.button--light { background: var(--on-photo); color: #171513; border-color: var(--on-photo); }
.button--light:hover { background: transparent; color: var(--on-photo); }

/* ---------- Welcome (full-screen photo or video) ---------- */
.welcome {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(100svh, 60rem);
  display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--on-photo);
  background: #9C8070; /* shown only until the photo loads */
}
.welcome-media, .welcome-media img, .welcome-media video, .welcome-shade {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; z-index: -2;
}
.welcome-media img, .welcome-media video { object-fit: cover; object-position: center 35%; }
/* Placeholder colour wash, used until a campaign photo or video is added. */
.welcome-media--placeholder {
  background:
    radial-gradient(60% 70% at 72% 38%, #D9BFAE 0%, transparent 70%),
    radial-gradient(50% 60% at 22% 70%, #B48F7B 0%, transparent 75%),
    linear-gradient(160deg, #C7A894 0%, #9A7867 55%, #7C5F52 100%);
}
/* Soft shading so white text stays readable on any photo. */
.welcome-shade {
  z-index: -1;
  background: linear-gradient(180deg, rgba(20,16,14,0.38) 0%, rgba(20,16,14,0.12) 35%, rgba(20,16,14,0.22) 60%, rgba(20,16,14,0.6) 100%);
}
/* the placeholder note is kept for reference only: never shown, so nothing runs into the top bar */
.media-note { display: none;
  position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); top: 8rem;
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px dashed rgba(255,255,255,0.7); border-radius: 999px; padding: 0.3rem 0.8rem;
}

.welcome-inner {
  width: 100%; max-width: var(--wide); margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 10rem clamp(2rem, 5vw, 3.5rem);
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
}

/* "Pele, com intenção." */
.statement {
  font-family: var(--font-display); font-weight: 400; color: var(--on-photo);
  font-size: var(--step-hero); line-height: 1.05; letter-spacing: -0.015em;
}
.statement em { font-style: italic; font-weight: 300; } /* "com intenção": light, not bold */
.statement .w { display: inline-block; }

.welcome-details { display: grid; gap: 1.1rem; justify-items: start; max-width: 34rem; }
.welcome-lede { font-size: var(--step-0); line-height: 1.5; margin: 0; opacity: 0.95; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.button--ghost-light { background: transparent; color: var(--on-photo); border-color: rgba(255, 255, 255, 0.7); }
.button--ghost-light:hover { background: var(--on-photo); color: #171513; border-color: var(--on-photo); }


/* ---------- Vertical rhythm: every section is centred and joined by a thin line ---------- */
.section { text-align: center; }
.section > .column { padding-block: clamp(3.5rem, 8vw, 5rem); display: grid; gap: 1.5rem; justify-items: center; }
.section + .section > .column::before { content: none; }
/* (5 Nov) between sections: a confetti burst in the same chrome tones as the booked / Olá cards (js/site.js adds .cf-div).
   Each <i> flies to its place (cf-pop); the <b> inside is the piece itself and keeps moving: floating, turning, flipping like paper. */
.cf-div { position: relative; width: 132px; height: 40px; pointer-events: none;
  margin: calc(-1 * clamp(3.5rem, 8vw, 5rem) - 20px) auto calc(clamp(3.5rem, 8vw, 5rem) - 20px - 1.5rem); }
.cf-div i { position: absolute; left: 50%; top: 50%; display: block;
  transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)); }
.cf-div b { display: block; }
.cf-t0 { background: linear-gradient(135deg, #D6D6D8 0%, #5A5D64 35%, #323337 55%, #BDBEC1 75%, #5A5D64 100%); }
.cf-t1 { background: linear-gradient(135deg, #E3E4E6 0%, #8E939B 35%, #4E5155 55%, #D2D4D7 75%, #8E939B 100%); }
.cf-t2 { background: linear-gradient(135deg, #F2F2F4 0%, #C9CDD3 35%, #6F7174 55%, #E9EBED 75%, #C9CDD3 100%); }
.cf-t3 { background: linear-gradient(135deg, #F9FAFA 0%, #E6E9ED 35%, #7E8082 55%, #F5F6F8 75%, #E6E9ED 100%); }
.cf-t4 { background: linear-gradient(135deg, #CBCCCD 0%, #2F3238 35%, #1A1C1F 55%, #ACADAF 75%, #2F3238 100%); }
.cf-t5 { background: linear-gradient(135deg, #F6ECDA 0%, #D9B26A 35%, #77623A 55%, #F0E0C3 75%, #D9B26A 100%); }
.cf-t6 { background: linear-gradient(135deg, #F8F0E2 0%, #E3C48C 35%, #7D6C4D 55%, #F4E7D1 75%, #E3C48C 100%); }
.cf-dot { width: 4.5px; height: 4.5px; border-radius: 50%; }
.cf-strip { width: 9px; height: 2.6px; border-radius: 1px; }
.cf-rod { width: 2.8px; height: 8px; border-radius: 1px; }
.cf-star { width: 9px; height: 9px; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.cf-fleck { width: 2px; height: 2px; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
  .cf-div i { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  .cf-div.is-in i { animation: cf-pop 1.5s cubic-bezier(.2, .7, .3, 1) var(--d) forwards; }
  /* after landing, every piece keeps drifting: its own speed, its own little path */
  .cf-div.is-in b { animation: cf-float var(--f) ease-in-out calc(var(--d) + 1.4s) infinite alternate; }
  .cf-div.is-in .cf-strip, .cf-div.is-in .cf-rod { animation: cf-flip var(--f) ease-in-out calc(var(--d) + 1.4s) infinite alternate; }
  .cf-div.is-in .cf-star { animation: cf-float var(--f) ease-in-out calc(var(--d) + 1.4s) infinite alternate, cf-twinkle 3.2s ease-in-out calc(var(--d) + 1.6s) infinite; }
}
/* out of the centre, up in a little arc while spinning, then flutters down to its place */
@keyframes cf-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(0deg); }
  12%  { opacity: 1; }
  45%  { opacity: 1; transform: translate(-50%, -50%) translate(calc(var(--x) * 1.25), calc(var(--y) - 16px)) rotate(var(--r0)) scale(1.1); }
  75%  { transform: translate(-50%, -50%) translate(calc(var(--x) * 1.05), calc(var(--y) + 3px)) rotate(calc(var(--r) + 25deg)); }
  100% { opacity: 1; transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)); }
}
@keyframes cf-float { from { transform: translate(0, calc(var(--b) * -1)) rotate(calc(var(--t) * -1)); } to { transform: translate(var(--s), var(--b)) rotate(var(--t)); } }
@keyframes cf-flip { from { transform: translate(0, calc(var(--b) * -1)) rotate(calc(var(--t) * -1)) scaleY(1); } 50% { transform: translate(calc(var(--s) / 2), 0) rotate(0deg) scaleY(-.35); } to { transform: translate(var(--s), var(--b)) rotate(var(--t)) scaleY(1); } }
@keyframes cf-twinkle { 0%, 100% { opacity: 1; filter: brightness(1); } 50% { opacity: .55; filter: brightness(1.35); } }
.section h2 { font-size: var(--step-2); }
.section .intro { color: var(--ink-soft); max-width: 32rem; }
/* Heading style A "Editorial" (chosen 3 Nov) for "Who looks after your skin" and "How it works": the words are the big
   heading; the name (or "Booking is simple.") sits small underneath, after a fine vertical line */
.section h2.hd-big { font-size: clamp(2.5rem, 9vw, 4rem); line-height: 1.02; letter-spacing: -0.015em; text-wrap: balance; }
/* the small line under a big heading ("Yasmin", "A nossa filosofia"): the heading font in soft italic, like the rest of the site */
.hd-name { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.45rem, 4.8vw, 1.75rem); line-height: 1.2; color: var(--ink-heading); }
/* (5 Nov) no fine line above the label any more: Yasmin wants lines only between sections */
.hd-name, .hd-sub { margin-top: -0.35rem; }
.hd-sub { margin: 0; font-family: var(--font-display); font-size: var(--step-1); color: var(--ink-soft); }
/* "Who looks after your skin": a soft light glides across the letters every few seconds, like light on glass */
.hd-shine { color: var(--ink-heading);
  /* the letters keep their colour everywhere (background colour); only the soft band of light moves */
  background: linear-gradient(105deg, transparent 30%, rgba(226, 208, 188, 0.55) 42%, #E6D6C2 50%, rgba(226, 208, 188, 0.55) 58%, transparent 70%) 0% 0 / 150% 100% repeat-x, var(--ink-heading);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hd-shine em { -webkit-text-fill-color: transparent; }
/* the light glides on without stopping: moving by exactly one repeat of the band makes the loop seamless */
@media (prefers-reduced-motion: no-preference) { .hd-shine { animation: hd-shine 4.5s linear infinite; } }
@keyframes hd-shine { from { background-position: 0% 0, 0 0; } to { background-position: -300% 0, 0 0; } }
/* "Booking is simple.": the words rise in one after another, then a fine line draws under the last word */
.hd-rise .rw { display: inline-block; }
.hd-rise .rw-last { position: relative; }
.hd-rise .rw-last::after { content: ""; position: absolute; left: 0; right: 0.15em; bottom: 0.02em; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .hd-rise.anim-ready .rw { opacity: 0; transform: translateY(0.6em); }
  .hd-rise.anim-ready.is-in .rw { opacity: 1; transform: none; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
  .hd-rise.anim-ready.is-in .rw:nth-child(2) { transition-delay: 0.15s; }
  .hd-rise.anim-ready.is-in .rw:nth-child(3) { transition-delay: 0.3s; }
  .hd-rise.anim-ready.is-in .rw-last::after { transform: scaleX(1); transition: transform 0.8s var(--ease) 0.95s; }
}
@media (prefers-reduced-motion: reduce) { .hd-rise .rw-last::after { transform: scaleX(1); } }


/* Lists stacked top to bottom, each item separated by a short line. */
.stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; width: 100%; max-width: 30rem; }
.stack li { display: grid; gap: 0.6rem; justify-items: center; }
.stack h3 { font-size: var(--step-1); }
.stack p { color: var(--ink-soft); }
/* the short line sits exactly halfway between two items */
.stack li + li::before { content: ""; width: 2.5rem; height: 1px; background: var(--line); margin-bottom: calc(1.75rem - 0.6rem); }

.steps { counter-reset: step; }
.steps li { counter-increment: step; }
/* the number sits on the same line as the step's title, in exactly the same type: "1. Escolha o tratamento" */
.steps h3::before { content: counter(step) ". "; }

/* Logos: training (Isa Carstens, CIDESCO) and brands (mesoestetic, Circadia), in their own colours, in one neat line.
   Every logo gets the same box and a height that makes them look the same size; the line glides slowly across
   (soft fade at both ends). On computers all four simply sit in one even row. */
.logo-strip { width: 100%; overflow: hidden; margin-top: 0.75rem; padding-block: 0.5rem;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
/* moved by js/site.js, continuously: a logo that slides off the left comes back on the right, so it never restarts */
.logo-track { list-style: none; margin: 0; padding: 0; display: flex; width: max-content; will-change: transform; backface-visibility: hidden; }
/* the same gap after every logo (inside each item, so the loop joins up evenly) */
.logo-track li { flex: none; height: 5.4rem; padding-right: 3rem; display: grid; place-items: center; }
.logo-track img { width: auto; max-width: none; object-fit: contain; }
.logo-track .lg-wide { height: 2.3rem; width: 10.2rem; }
.logo-track .lg-badge { height: 4.1rem; width: 5.37rem; }
.logo-track .lg-square { height: 3.6rem; width: 3.6rem; }
.logo-track .lg-mark { height: 3.7rem; width: 5.2rem; }
@media (min-width: 52rem) {
  .logo-strip { -webkit-mask: none; mask: none; }
  .logo-track { width: 100%; justify-content: space-evenly; transform: none !important; }
  .logo-track li { flex: 0 0 auto; padding-right: 0; }
  .logo-track li[aria-hidden] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-strip { -webkit-mask: none; mask: none; }
  .logo-track { width: 100%; flex-wrap: wrap; justify-content: center; transform: none !important; }
  .logo-track li { padding: 0 1.25rem; }
  .logo-track li[aria-hidden] { display: none; }
}

/* ---------- Inner pages: title area ---------- */
.page-hero { text-align: center; }
.page-hero .column { padding-block: clamp(2.5rem, 7vw, 4.5rem) 1.5rem; display: grid; gap: 1rem; justify-items: center; }
.page-hero h1 { font-size: clamp(2.3rem, 7vw, 3.4rem); }
.page-hero h1 em { font-style: italic; font-weight: 300; }
.page-hero .intro { color: var(--ink-soft); max-width: 32rem; }
/* Appointment hours under the title on Treatments and Booking: one quiet line, items kept whole, fine dots between them */
.hours-line { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem 0; font-size: .8rem; line-height: 1.5; color: var(--ink-soft); }
.hours-line > span { white-space: nowrap; }
.hours-line > span + span::before { content: "·"; margin: 0 .55em; opacity: .6; }
.hours-line b { font-weight: 500; color: var(--ink-heading); }
/* phones: three tidy columns (day on top, time underneath), no dots, nothing wrapping out of line */
@media (max-width: 40rem) {
  .hours-line { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; column-gap: 1.6rem; font-size: .74rem; line-height: 1.35; }
  .hours-line > span { display: grid; justify-items: center; }
  .hours-line > span + span::before { content: none; }
  .hours-line b { display: block; }
}
.brand-logos { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; justify-content: center; align-items: center; gap: clamp(1.5rem, 6vw, 3rem); }
.brand-logos img { height: 3.25rem; width: auto; max-width: 100%; }
:root[data-theme="dark"] .brand-logos li { background: #FFFFFF; border-radius: 12px; padding: 0.5rem 0.75rem; }
.jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin-top: 0.5rem; }
@media (max-width: 34rem) {
  .jump { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; width: 100%; max-width: 22rem; }
  .jump .chip { justify-content: center; font-size: 0.82rem; padding: 0.45rem 0.6rem; }
}
.chip {
  font-size: var(--step--1); text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.5rem 1rem; min-height: 40px;
  display: inline-flex; align-items: center; transition: border-color 0.3s var(--ease);
}
.chip:hover { border-color: var(--ink); text-decoration: none; }
.text-link {
  font: inherit; font-size: var(--step--1); color: var(--ink); background: none; border: 0; padding: 0.5rem 0;
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}

/* ---------- "Not sure what to book?" ---------- */
.unsure {
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 1.5rem;
}
.unsure-card {
  max-width: 44rem; margin-inline: auto; text-align: center;
  background: var(--band); border-radius: 28px; padding: clamp(1.75rem, 5vw, 2.75rem);
  display: grid; gap: 1rem; justify-items: center;
}
.unsure-card h2 { font-size: clamp(1.7rem, 5vw, 2.2rem); }
.unsure-card h2 em, .t-head h2 em { font-style: italic; font-weight: 300; }
.unsure-card p { color: var(--ink-soft); max-width: 30rem; }

/* ---------- Treatment sections and cards ---------- */
.t-section { scroll-margin-top: 1rem; }
.t-wrap {
  max-width: 56rem; margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: clamp(3rem, 7vw, 4.5rem); display: grid; gap: 2rem;
}
.t-section + .t-section .t-wrap { border-top: 1px solid var(--line); }
.t-head { text-align: center; display: grid; gap: 0.6rem; justify-items: center; }
.t-head h2 { font-size: var(--step-2); }
.t-head .intro { color: var(--ink-soft); max-width: 32rem; }
.t-grid { display: grid; gap: 1.5rem; }
@media (min-width: 40rem) {
  .t-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-grid > :only-child { grid-column: 1 / -1; width: calc((100% - 1.5rem) / 2); justify-self: center; }
}
.t-card {
  display: grid; grid-template-rows: auto 1fr; min-width: 0; scroll-margin-top: 1rem;
  border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--surface);
}
.t-card:target { border-color: var(--ink); box-shadow: 0 0 0 3px var(--band); }
.t-photo {
  aspect-ratio: 3 / 2; width: 100%; max-width: 100%;
  background: var(--band); display: grid; place-items: center; position: relative;
}
.t-photo img, .t-photo video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.t-photo span {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
  border: 1px dashed var(--ink-soft); border-radius: 999px; padding: 0.3rem 0.8rem;
}
.t-body { padding: 1.25rem 1.25rem 1.4rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; }
.t-brand { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); display: flex; flex-direction: column; align-items: center; gap: 0.45rem; min-height: 1.5rem; }
.card-flag { letter-spacing: 0.08em; border: 1px solid var(--line); border-radius: 999px; padding: 0.1rem 0.6rem; color: var(--ink); }
.t-card h3 { font-size: 1.45rem; }
@media (max-width: 30rem) {
  .t-body { padding: 1.1rem 1.1rem 1.25rem; gap: 0.5rem; }
  .t-card h3 { font-size: 1.3rem; }
  .t-grid { gap: 1.1rem; }
}
.t-desc { color: var(--ink-soft); }
.t-meta { display: flex; justify-content: center; gap: 0.5rem; font-size: var(--step--1); color: var(--ink); font-variant-numeric: tabular-nums; margin-bottom: 0.4rem; }
.t-card .t-meta { margin-top: auto; padding-top: 0.6rem; }
.t-body .text-link { padding-block: 0.25rem; }
.why { width: 100%; font-size: var(--step--1); color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 0.75rem; margin-top: 0.25rem; }
.why summary { cursor: pointer; color: var(--ink); min-height: 32px; display: flex; align-items: center; justify-content: center; }
.why p { margin-top: 0.5rem; }

/* ---------- Questionnaire ---------- */
.quiz {
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 1rem 4rem;
}
.quiz-card {
  max-width: 34rem; margin-inline: auto; border: 1px solid var(--line); border-radius: 28px;
  padding: clamp(1.5rem, 5vw, 2.25rem); display: grid; gap: 1.25rem; overflow: hidden;
}
.quiz-progress { height: 2px; background: var(--line); border-radius: 2px; }
.quiz-progress span { display: block; height: 100%; width: 0; background: var(--ink); transition: width 0.5s var(--ease); }
.q-step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 1.1rem; }
.q-step legend { padding: 0; display: grid; gap: 0.4rem; margin-bottom: 1.1rem; text-align: center; width: 100%; }
.q-count { font-size: 0.75rem; letter-spacing: 0.18em; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.q-title { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; line-height: 1.2; color: var(--ink-heading); }
.q-options { display: grid; gap: 0.6rem; }
.q-option {
  font: inherit; text-align: center; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.85rem 1.25rem; min-height: 50px; cursor: pointer;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.q-option:hover { border-color: var(--ink-soft); }
.q-option[aria-pressed="true"] { background: var(--button); color: var(--button-ink); border-color: var(--button); }
.q-result { display: grid; gap: 0.8rem; justify-items: center; text-align: center; }
.q-result h2 { font-size: 2rem; }
.q-actions { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; margin-top: 0.4rem; }
.q-result-block { display: grid; gap: 0.8rem; justify-items: center; width: 100%; }
.q-result h2 em { font-style: italic; font-weight: 300; }
.q-note { font-size: var(--step--1); color: var(--ink-soft); }
.quiz-back { justify-self: center; }
@media (prefers-reduced-motion: no-preference) {
  .q-step:not([hidden]), .q-result:not([hidden]) { animation: rise 0.5s var(--ease) both; }
}

/* ---------- Booking ---------- */
.booking {
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0.5rem 4rem; display: grid; gap: 1rem; justify-items: center;
}
.demo-banner {
  font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; color: var(--ink-soft);
  border: 1px dashed var(--ink-soft); border-radius: 999px; padding: 0.4rem 1rem; max-width: 36rem;
}
.booking-card {
  width: 100%; max-width: 36rem; border: 1px solid var(--line); border-radius: 28px; scroll-margin-top: 6.5rem;
  padding: clamp(1.4rem, 5vw, 2.25rem); display: grid; gap: 1.1rem; align-content: start;
}
/* The confirmation needs no "Back" or progress line: the olive card gets the room */
.booking-card.is-done > .b-top, .booking-card.is-done > .quiz-progress { display: none; }
.b-top { display: flex; justify-content: space-between; align-items: center; min-height: 2rem; }
.b-top .q-count { margin-left: auto; }
#b-step { display: grid; gap: 1.1rem; min-width: 0; }
.b-title { font-size: 1.6rem; text-align: center; }
.b-title em { font-style: italic; font-weight: 300; }
.b-hint { color: var(--ink-soft); font-size: var(--step--1); text-align: center; }
.b-group { display: grid; gap: 0.6rem; }
.b-group + .b-group { margin-top: 0.6rem; }
.b-group .eyebrow { text-align: center; }
.b-option { display: grid; gap: 0.1rem; border-radius: 20px; }
.b-opt-name { font-family: var(--font-display); font-size: 1.1rem; }
.b-opt-meta { font-size: 0.8rem; opacity: 0.75; }
.b-actions { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-top: 0.25rem; }
.b-change { justify-self: center; }
.b-notice { background: var(--band); border-radius: 20px; padding: 1rem 1.2rem; color: var(--ink-soft); font-size: var(--step--1); text-align: center; }
.b-summary { margin: 0; display: grid; gap: 0.45rem; background: var(--band); border-radius: 20px; padding: 1rem 1.2rem; }
.b-summary div { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--step--1); }
.b-summary dt { color: var(--ink-soft); }
.b-summary dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.b-saved { color: var(--ink-soft); font-size: var(--step--1); text-align: center; }

/* Day and time choices */
.chip-btn {
  font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
  font-variant-numeric: tabular-nums;
}
.chip-btn:hover:not(:disabled) { border-color: var(--ink-soft); }
.chip-btn[aria-pressed="true"] { background: var(--button); color: var(--button-ink); border-color: var(--button); }
.chip-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.b-days { display: grid; gap: 0.75rem; }
.b-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.b-month { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink-heading); }
.b-nav {
  font: inherit; font-size: 1.4rem; line-height: 1; color: var(--ink); background: none; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; width: 44px; height: 44px; display: grid; place-items: center;
}
.b-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.b-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem; text-align: center; }
.b-wdh { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); padding-bottom: 0.2rem; }
.b-day {
  aspect-ratio: 1; max-width: 100%; min-height: 40px; border-radius: 999px; padding: 0;
  display: grid; place-items: center; font-size: 0.95rem;
}
.b-day--off { color: var(--ink-soft); opacity: 0.4; }
.b-day--test { border-style: dashed; border-color: var(--ink); }
.b-day--blocked { text-decoration: line-through; }
.b-times { display: grid; gap: 0.6rem; }
.b-label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); text-align: center; }
.b-hours { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.6rem, 1fr)); gap: 0.45rem; }
.b-mins { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.4rem; }
.b-hour, .b-time { border-radius: 999px; min-height: 44px; padding: 0.4rem 0.3rem; }
.b-time:disabled { text-decoration: line-through; }
.b-chosen { text-align: center; font-size: var(--step-0); }
.b-chosen strong { font-weight: 500; font-variant-numeric: tabular-nums; }

/* Forms */
.b-form { display: grid; gap: 1rem; }
.field { display: grid; gap: 0.35rem; min-width: 0; }
.field label, .field legend { font-size: var(--step--1); font-weight: 500; }
fieldset.field { border: 0; margin: 0; padding: 0; }
fieldset.field legend { padding: 0; margin-bottom: 0.35rem; }
.field .opt { font-weight: 400; color: var(--ink-soft); }
.input, .b-form select, .booking select {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 0.7rem 0.85rem; min-height: 48px; width: 100%; min-width: 0;
}
textarea.input { resize: vertical; min-height: 5rem; }
.input:focus, .b-form select:focus, .booking select:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
/* WhatsApp number: a small "+ 258" box, then the number */
.phone { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.5rem; }
.phone-cc { position: relative; display: block; }
.phone-plus { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--ink); pointer-events: none; }
.phone-cc .input { padding-left: 1.7rem; font-variant-numeric: tabular-nums; }
.checks { display: grid; gap: 0.55rem; }
.checks--row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.check { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--step--1); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0.1rem 0 0; accent-color: var(--ink); flex: none; }
.error { color: #A3392B; font-size: var(--step--1); text-align: center; }
.error:empty { display: none; }
:root[data-theme="dark"] .error { color: #E38B7E; }

/* Sign-in code and "My bookings" */
.b-otp { font-size: 1.4rem; letter-spacing: 0.4em; text-align: center; font-variant-numeric: tabular-nums; }
.b-demo { border: 1px dashed var(--ink-soft); border-radius: 999px; padding: 0.3rem 0.9rem; justify-self: center; }
.a-section { display: grid; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.a-section h3 { font-size: 1.2rem; text-align: center; }
.a-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.a-list li { background: var(--band); border-radius: 18px; padding: 0.9rem 1.1rem; display: grid; gap: 0.15rem; justify-items: start; }
.a-what { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink-heading); }
.a-about { font-family: var(--font-sans); font-size: var(--step--1); color: var(--ink-soft); }
.a-when { font-size: var(--step--1); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.a-list .text-link { padding-block: 0.2rem 0; }
.a-signout { justify-self: center; }
.a-late { width: 100%; display: grid; gap: 0.6rem; justify-items: start; margin-top: 0.4rem; padding-top: 0.6rem; border-top: 1px solid var(--line); font-size: var(--step--1); color: var(--ink-soft); }
.a-late .button, .a-change { min-height: 44px; padding: 0.6rem 1.2rem; font-size: 0.78rem; }
.a-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-top: 0.4rem; }
.a-warn { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--ink); }
.a-warn-icon { width: 1.3rem; height: 1.3rem; border-radius: 999px; border: 1px solid var(--ink); display: grid; place-items: center; font-size: 0.75rem; line-height: 1; flex: none; }
.a-wa { color: var(--ink); }
.a-policy { font-size: var(--step--1); color: var(--ink-soft); }
.a-rules { font-size: 0.82rem; line-height: 1.5; padding: 0.85rem 1.1rem; background: none; border: 1px solid var(--line); }
.a-rules strong { color: var(--ink); font-weight: 600; }
.a-rules { display: grid; gap: 0.3rem; }
.a-rules-label { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 1rem; color: var(--ink-soft); opacity: 0.85; }
.a-tag { font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ink); border: 1px solid var(--ink-soft); border-radius: 12px; padding: 0.25rem 0.7rem; margin: 0.25rem 0; }
.b-fee { border: 1px solid var(--ink-soft); color: var(--ink); }
.a-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-top: 0.3rem; }
.a-confirm .button { min-height: 44px; padding: 0.6rem 1.3rem; font-size: 0.78rem; }

/* Confirmation */
.done-mark { justify-self: center; width: 52px; height: 52px; border-radius: 999px; border: 1px solid var(--ink); display: grid; place-items: center; font-size: 1.4rem; }
.b-wa { display: grid; gap: 0.4rem; }
.b-bubble { background: var(--band); border-radius: 4px 18px 18px 18px; padding: 0.9rem 1.1rem; font-size: var(--step--1); line-height: 1.55; }

section[id], footer[id], .t-card { scroll-margin-top: 6.5rem; }

/* ---------- Footer ---------- */
/* the footer: see "Footer (chosen by Yasmin 5 Nov 2026)" at the end of this file */
.hours { width: 100%; max-width: 20rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: grid; gap: 0.75rem; }
.hours-title { font-size: 1.05rem; }
.hours dl { margin: 0; display: grid; gap: 0.35rem; }
.hours dl div { display: flex; justify-content: space-between; gap: 1rem; text-align: left; }
.hours dt { color: var(--ink-soft); }
.hours dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.hours-note { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }

/* ---------- Smooth movement (skipped for people who prefer less motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .welcome-media img, .welcome-media video { animation: settle-photo 2.4s var(--ease) both; }
  /* Welcome words glide together each time the welcome screen comes into view (js/site.js adds "is-in"). */
  .welcome.anim-ready .w-1 { opacity: 0; transform: translateX(-3rem); }
  .welcome.anim-ready .w-2 { opacity: 0; transform: translateX(3rem); }
  .welcome.anim-ready .welcome-details { opacity: 0; transform: translateY(16px); }
  .welcome.anim-ready.is-in .w-1,
  .welcome.anim-ready.is-in .w-2,
  .welcome.anim-ready.is-in .welcome-details {
    opacity: 1; transform: none;
    transition: opacity 1.1s var(--ease), transform 1.4s var(--ease);
  }
  .welcome.anim-ready.is-in .w-2 { transition-delay: 0.12s; }
  .welcome.anim-ready.is-in .welcome-details { transition-delay: 0.55s; }

  @supports (animation-timeline: view()) {
    .section > .column > * {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    /* the reflection heading keeps its gliding light as well as the scroll fade */
    .section > .column > .hd-shine {
      animation: drift linear both, hd-shine 4.5s linear infinite;
      animation-timeline: view(), auto;
      animation-range: entry 0% entry 60%, normal;
    }
  }
}
@keyframes rise { from { opacity: 0.001; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes settle-photo { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes drift { from { opacity: 0.35; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.b-before dd { color: var(--ink-soft); }
.a-wa-ask { margin-top: 0.3rem; }
.b-keep { text-align: left; margin-top: -0.35rem; padding-left: calc(20px + 0.6rem); }
.b-names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 18rem) { .b-names { grid-template-columns: minmax(0, 1fr); } }
.b-left { text-align: left; }
.req { color: var(--ink); }
/* Date of birth: three scroll lists, Day | Month | Year (the phone shows its own scroll wheel) */
.b-dob { display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 7fr) minmax(0, 5.4fr); gap: 0.5rem; }
.b-dob select.input, select.input.x-select { -webkit-appearance: none; appearance: none; padding-right: 1.9rem; text-overflow: ellipsis; cursor: pointer; font-variant-numeric: tabular-nums;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236E645B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.75rem center; }
.b-dob select.input:invalid, .b-dob select.input option[value=""] { color: var(--ink-soft); }
/* Extra sign-up questions: a parent's OK for under 18s (shown from the date of birth), how they found us, WhatsApp news */
.minor { display: grid; gap: 0.9rem; border: 1px solid var(--line); border-radius: 20px; padding: 1rem 1.1rem; background: var(--band); }
.minor[hidden] { display: none; }
.minor .b-hint { margin: 0; }
.minor-title { margin: 0; font-family: var(--font-display); font-style: italic; color: var(--ink-soft); }
.check-note { display: block; color: var(--ink-soft); font-size: 0.85em; margin-top: 0.15rem; }
/* Health check before a visit (My bookings) */
.a-check { display: grid; gap: 0.9rem; width: 100%; }
.a-check .checks--row { gap: 0.4rem 1.1rem; }
.a-checked { font-size: var(--step--1); color: var(--ink); }
.phone-country { grid-column: 1 / -1; margin: 0.35rem 0 0; font-size: var(--step--1); color: var(--ink-soft); min-height: 1.4em; }
.phone-country.is-ok { color: var(--ink); }
.phone-country.is-unknown { color: #B4412F; }
.a-switch { display: grid; justify-items: center; gap: 0.5rem; padding-top: 1.25rem; margin-top: 0.5rem; border-top: 1px solid var(--line); text-align: center; color: var(--ink-soft); }
.a-switch p { margin: 0; }

/* Top bar: "Entrar / Sign in" (or "Conta / Account" when signed in), top right on every page */
/* the account icon: a small solid figure, no circle (option 3, chosen 3 Nov) */
.nav-account { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 40px; padding: 0.15rem 0.2rem;
  color: inherit; text-decoration: none; font-size: var(--step--1); white-space: nowrap; border-radius: 999px; }
.nav-account svg { width: 1.35rem; height: 1.35rem; flex: none; transition: transform 0.3s var(--ease); }
.nav-account:hover { text-decoration: none; }
.nav-account:hover svg { transform: scale(1.06); }
.nav-account:hover .nav-account-label { text-decoration: underline; text-underline-offset: 3px; }
.nav-account:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* small phones: the person icon only, the words stay for screen readers */
/* phones: compact icon and language switch, so the logo stays centred */
@media (max-width: 26rem) {
  .bar--split .nav-right { gap: 0.4rem; }
  .nav-account { min-height: 36px; }
}
/* Phones: the two sides weigh the same, so the logo sits truly in the middle. The language is one small round
   button showing the other language (EN while in Portuguese, PT in English); the full PT | EN is in the menu. */
@media (max-width: 40rem) {
  .site-header .nav-right .lang-switch { border: 0; padding: 0; }
  .site-header .nav-right .lang-switch button[aria-pressed="true"] { display: none; }
  .site-header .nav-right .lang-switch button { min-width: 34px; width: 34px; min-height: 34px; padding: 0; border-radius: 50%; opacity: 1;
    border: 1px solid currentColor; background: transparent; font-size: 0.72rem; letter-spacing: 0.04em; }
  .nav-account svg { width: 1.35rem; height: 1.35rem; }
  .bar--split .nav-right { gap: 0.5rem; }
}
@media (max-width: 21rem) { .bar--split .mark--full, .site-header.is-scrolled .mark--full, .site-header.is-app .mark--full { width: 5rem; } .site-header .bar { padding-left: 12px; padding-right: 12px; } .site-header .lang-switch button { min-width: 27px; letter-spacing: 0; } .bar--split .nav-right { gap: 0.3rem; } .nav-account { width: 36px; min-height: 36px; } .nav-account svg { width: 1.25rem; height: 1.25rem; } }
@media (max-width: 26rem) { .nav-account { padding: 0; width: 34px; min-height: 34px; justify-content: center; } .nav-account .nav-account-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* "Keep me signed in on this device?" Yes / No */
.stay-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.stay-opt { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.5rem 0.9rem; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: var(--step--1); text-align: center; }
.stay-opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); flex: none; }
.stay-opt:has(input:checked) { border-color: var(--ink); background: var(--band); }
.stay-opt:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 22rem) { .stay-opts { grid-template-columns: minmax(0, 1fr); } }
.demo-reset { font: inherit; font-size: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0; margin-left: 0.35rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.a-for { font-size: var(--step--1); color: var(--ink); font-weight: 500; }

/* "My bookings" signed out: two tabs at the top so "Sign up" is never missed, and everything fits on one phone screen. */
.a-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; padding: 0.3rem; border-radius: 999px; background: var(--band); }
.a-tab { font: inherit; color: var(--ink-soft); background: transparent; border: 0; border-radius: 999px; padding: 0.5rem 0.6rem; min-height: 52px; cursor: pointer; display: grid; gap: 0.05rem; justify-items: center; line-height: 1.2; }
.a-tab[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 2px 10px -4px rgba(0, 0, 0, 0.25); }
.a-tab-name { font-family: var(--font-display); font-size: 1.1rem; }
.a-tab-sub { font-size: 0.72rem; }
.a-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.b-form--tight { gap: 0.85rem; }
.stay .b-hint { margin-top: 0.15rem; }

/* Compact form details (all forms): the country name sits on the label line, and "Keep me signed in?" shares one line with Yes / No */
.field:has(> .phone) { position: relative; }
/* the country line sits under the two boxes, on its own line, so it never runs over the label */
.field > .phone-country { margin: 0.3rem 0 0; min-height: 0; line-height: 1.4; font-size: 0.8rem; }
.field > .phone-country:empty { display: none; }
.stay { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 0.75rem; row-gap: 0.3rem; }
.stay legend { float: left; margin: 0; padding: 0; }
.stay .stay-opts { grid-template-columns: repeat(2, 4.6rem); }
.stay .stay-opt { min-height: 44px; padding: 0.4rem 0.6rem; }
.stay .b-hint { grid-column: 1 / -1; margin-top: 0; }

/* ---------- Booking and My bookings on phones: fit the screen like an app ---------- */
:root { --olive: #5B6142; --olive-deep: #4E5332; --olive-ink: #F4EEE4; --olive-soft: #DCD7C6; --rose: #B98371; --champagne: #E8D3A9; }
@media (max-width: 40rem) {
  .page-hero--app .column { padding-block: 0.9rem 0.2rem; gap: 0.25rem; }
  .page-hero--app h1 { font-size: 1.55rem; }
  .page-hero--app .eyebrow, .page-hero--app .intro { display: none; }
  .page-hero--app + .booking { gap: 0.6rem; padding-block: 0.4rem 2.5rem; }
  .page-hero--app + .booking .demo-banner { text-transform: none; letter-spacing: 0; font-size: 0.72rem; line-height: 1.35; padding: 0.3rem 0.9rem; }
  .page-hero--app + .booking .booking-card { padding: 1rem; gap: 0.75rem; border-radius: 24px; scroll-margin-top: 4.75rem; }
  .page-hero--app + .booking .b-form--tight { gap: 0.7rem; }
  .page-hero--app + .booking .b-form .field { gap: 0.3rem; }
  .page-hero--app + .booking #b-step { gap: 0.85rem; }
  .page-hero--app + .booking .b-title { font-size: 1.4rem; }
  .b-cal .chip-btn.b-day, .b-cal .b-day { min-height: 40px; }
  .page-hero--app + .booking .b-cal { row-gap: 0.15rem; }
  .page-hero--app + .booking .b-days { gap: 0.5rem; }
  .page-hero--app + .booking .b-nav { width: 40px; height: 40px; }
  .page-hero--app + .booking .b-cal .b-day { height: 2.4rem; }
  .page-hero--app + .booking .b-policy { font-size: 0.78rem; line-height: 1.45; padding: 0.8rem 1rem; }
  .page-hero--app + .booking .b-done { padding-block: 1.3rem 1.1rem; min-height: 17rem; }
  .page-hero--app + .booking .booking-card.is-done { padding-top: 0.75rem; }
  .page-hero--app + .booking .booking-card { gap: 0.6rem; }
}
/* Booking and My bookings on bigger screens too: a smaller title, so "Book your visit" and the whole step box fit together */
@media (min-width: 40.01rem) {
  .page-hero--app .column { padding-block: 1.5rem 0.4rem; gap: 0.4rem; }
  .page-hero--app h1 { font-size: clamp(2rem, 4vw, 2.4rem); }
  .page-hero--app .intro { display: none; }
  .page-hero--app + .booking { gap: 0.8rem; padding-block: 0.6rem 3rem; }
}
/* Calendar days: round buttons a fixed size (not stretched squares), so the whole month fits on the screen */
.page-hero--app + .booking .b-cal .b-day { aspect-ratio: auto; width: 100%; max-width: 2.9rem; height: 2.6rem; min-height: 0; justify-self: center; }

/* Time step: the chosen day at the top, with "Change day" */
.b-daypill { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap;
  background: var(--band); border-radius: 999px; padding: 0.55rem 0.6rem 0.55rem 1.1rem; font-size: var(--step--1); }
.b-daypill > span { font-weight: 500; color: var(--ink); }
.b-daypill > span::first-letter { text-transform: uppercase; }
.b-daypill .text-link { padding: 0.25rem 0.5rem; }

/* Confirmation and "Olá" cards: the bloom card (js/flowcard.js, Yasmin's lilies, 3 Nov), then the tick pops out of silver glitter. */
:root { --bloom-card: #F4EEE4; --bloom-solid: #F4EEE4; --bloom-ink: #22170F; --bloom-soft: #5E4A3C; }
.b-done, .a-hello { position: relative; overflow: hidden; isolation: isolate; background: var(--bloom-card); color: var(--bloom-ink); }
.b-done { border-radius: 24px; padding: 1.9rem 1.25rem 1.6rem; min-height: 21rem; align-content: center;
  display: grid; gap: 0.35rem; justify-items: center; text-align: center; animation: done-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
.b-done .b-title { color: var(--bloom-ink); font-size: 1.9rem; margin-top: 0.5rem; }
/* the words sit in the calm, light heart of the bloom */
.bloom-art { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.bloom-art svg { display: block; }
/* Both flow cards have the picture's own shape (4:5), so the whole picture always shows; on short or wide screens
   the card gets narrower (centred) so it still fits on the screen. */
.b-done, .a-hello { aspect-ratio: 4 / 5; width: 100%; min-height: 0; margin-inline: auto;
  max-width: max(18rem, calc((100vh - 18rem) * 0.8)); max-width: max(18rem, calc((100svh - 18rem) * 0.8)); }
/* The bloom card (js/flowcard.js, chosen 3 Nov: "3 · Light petals", Cream, Paper & silver). The wave fades in, blossoms
   into a soft flower as it melts, and the light petals fly out of it one by one; then they sway and glow, a band of
   light sweeps across and small lights twinkle. Retro print finish (still textures). Only transform and opacity move. */
.bc { overflow: hidden; background: var(--bloom-card); --f1: #4E5332; --f2: #6B3E22; --f3: #D9A441; --bc-ink: #22170F;
  --bc-glow: rgba(255, 250, 240, .9); --bc-sheen: rgba(255, 255, 255, .55); --bc-tw: #C9A86A; }
.bc-flowers, .bc-lights, .bc-grunge { position: absolute; inset: 0; pointer-events: none; }
.bc-lights { overflow: hidden; }
.bc-fl { position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  will-change: transform, opacity; animation: bc-burst var(--bt) cubic-bezier(.22, 1, .36, 1) var(--bd) both; }
.bc-fl-in { position: absolute; inset: 0; animation: bc-breathe var(--br) ease-in-out calc(var(--bd) + var(--bt)) infinite alternate; }
.bc-shape, .bc-ghost { position: absolute; inset: 0; -webkit-mask: url("../images/cards/petals.png") center / contain no-repeat; mask: url("../images/cards/petals.png") center / contain no-repeat; }
.bc-shape { background: linear-gradient(var(--ga), var(--f1), var(--f2)); }
/* the slightly off-register print shadow of each flower */
.bc-ghost { background: var(--f3); opacity: .55; transform: translate(4%, 3%); }
.bc-glow { position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1; margin: -17% 0 0 -17%; border-radius: 50%;
  background: radial-gradient(circle, var(--bc-glow) 0%, transparent 70%); opacity: 0; animation: bc-glow 3.6s ease-in-out calc(var(--bd) + 1s) infinite alternate; }
@keyframes bc-burst { 0% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(.05) rotate(var(--r0)); } 35% { opacity: 1; } 100% { opacity: 1; transform: translate(0, 0) scale(1) rotate(var(--r)); } }
@keyframes bc-breathe { from { transform: scale(.97) rotate(-2.5deg); } to { transform: scale(1.04) rotate(2.5deg); } }
@keyframes bc-glow { from { opacity: .15; transform: scale(.8); } to { opacity: .75; transform: scale(1.15); } }
.bc-sweep { position: absolute; top: -30%; bottom: -30%; left: -60%; width: 60%; opacity: 0; transform: rotate(14deg);
  background: linear-gradient(90deg, transparent, var(--bc-sheen) 50%, transparent); animation: bc-sweep 7s ease-in-out 2.2s infinite; }
@keyframes bc-sweep { 0% { opacity: 0; transform: translateX(0) rotate(14deg); } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateX(330%) rotate(14deg); } }
.bc-tw { position: absolute; left: var(--x); top: var(--y); width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--bc-tw); opacity: 0;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: bc-twinkle var(--tt) ease-in-out var(--td) infinite; }
@keyframes bc-twinkle { 0%, 70%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 82% { opacity: 1; transform: scale(1) rotate(45deg); } }
/* the wave fades in, swells softly, and melts while a soft flower blossoms out of it */
.bc-wave, .bc-morph, .bc-ring { position: absolute; left: var(--fx); top: var(--fy); pointer-events: none; opacity: 0; will-change: transform, opacity; }
.bc-wave { width: 6.2rem; aspect-ratio: 671 / 276; margin: -1.28rem 0 0 -3.1rem; background: var(--bc-ink);
  -webkit-mask: var(--wave) center / contain no-repeat; mask: var(--wave) center / contain no-repeat; animation: bc-wave 1.5s cubic-bezier(.45, 0, .25, 1) .05s both; }
.bc-morph { width: 8rem; aspect-ratio: 1; margin: -4rem 0 0 -4rem; background: var(--bc-ink);
  -webkit-mask: url("../images/cards/petals.png") center / contain no-repeat; mask: url("../images/cards/petals.png") center / contain no-repeat; animation: bc-morph 1.7s cubic-bezier(.4, 0, .2, 1) .3s both; }
.bc-ring { width: 9rem; height: 9rem; margin: -4.5rem 0 0 -4.5rem; border-radius: 50%;
  background: radial-gradient(circle, var(--bc-glow) 0%, rgba(255, 250, 240, .35) 40%, transparent 70%); animation: bc-ring 1.6s cubic-bezier(.3, .6, .3, 1) .45s both; }
@keyframes bc-wave { 0% { opacity: 0; transform: scale(.88); } 30% { opacity: 1; transform: scale(1); } 52% { opacity: 1; transform: scale(1.04); } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes bc-morph { 0% { opacity: 0; transform: scale(.25) rotate(-50deg); } 45% { opacity: .7; transform: scale(.95) rotate(-10deg); } 100% { opacity: 0; transform: scale(1.9) rotate(15deg); } }
@keyframes bc-ring { 0% { opacity: 0; transform: scale(.4); } 35% { opacity: .9; } 100% { opacity: 0; transform: scale(2.6); } }
/* retro print finish: film grain, halftone dots in the corners, burnt edges, faint film scratches (all still) */
.bc-grain { position: absolute; inset: 0; background: url("../images/cards/grain.png") repeat; background-size: 150px; opacity: .3; }
.bc-dots { position: absolute; inset: 0; opacity: .22; background: radial-gradient(circle, var(--bc-ink) .7px, transparent 1.3px) 0 0 / 5px 5px;
  -webkit-mask: radial-gradient(75% 65% at 50% 48%, transparent 55%, #000 100%); mask: radial-gradient(75% 65% at 50% 48%, transparent 55%, #000 100%); }
.bc-burn { position: absolute; inset: 0; box-shadow: inset 0 0 40px 6px rgba(107, 62, 34, .28); }
.bc-scratch { position: absolute; top: -5%; bottom: -5%; width: 1px; opacity: .5; background: linear-gradient(transparent, rgba(60, 40, 25, .5) 20%, transparent 45%, rgba(60, 40, 25, .5) 70%, transparent); }
/* paper confetti (with a few silver foil pieces): pops out of the tick, flips like paper and flutters down */
.bc-cf { position: absolute; left: var(--cx, 50%); top: var(--cy, 19%); pointer-events: none; opacity: 0; animation: bc-cf var(--t) cubic-bezier(.12, .75, .35, 1) var(--d) both; }
.bc-cf-in { display: block; width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2); background: var(--c);
  border-radius: var(--rad); clip-path: var(--clip, none); animation: bc-flip var(--ft) linear var(--d) infinite; }
.bc-cf-in.is-foil { background: linear-gradient(135deg, #FFFFFF, #C9CDD3 40%, #8F949B 60%, #F1F2F4); }
@keyframes bc-cf { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 6% { opacity: 1; } 28% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } 85% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--dx) + var(--sw)), calc(var(--dy) + var(--fall))) rotate(calc(var(--r) * 3)); } }
@keyframes bc-flip { from { transform: rotate3d(var(--ax), 0deg); } to { transform: rotate3d(var(--ax), 360deg); } }
.bc.is-still .bc-fl, .bc.is-still .bc-fl-in { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .bc *, .bc { animation: none !important; } .bc-tw, .bc-sweep, .bc-cf { display: none; } .bc-fl { opacity: 1; } }
.bloom-heart { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(62% 38% at 50% var(--hy, 46%), #F4EEE4 0%, rgba(244, 238, 228, .78) 58%, rgba(244, 238, 228, 0) 100%); }
.b-done .b-title, .b-done p, .a-hello .b-title, .a-hello p { text-shadow: 0 0 12px var(--bloom-solid), 0 0 24px var(--bloom-solid); }
.b-done-mark { width: 3.25rem; height: 3.25rem; border-radius: 999px; background: var(--olive-deep); color: var(--olive-ink); display: grid; place-items: center; position: relative;
  box-shadow: 0 0 0 1px rgba(244, 238, 228, .7), 0 0 0 7px rgba(78, 83, 50, .14), 0 0 30px 8px var(--bloom-solid);
  animation: done-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.9s both; }
/* the soft silver flash as the tick pops out of the glitter */
.b-done-mark::before { content: ""; position: absolute; inset: -1.6rem; border-radius: 50%; z-index: -1; opacity: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.85), rgba(220, 224, 230, 0.35) 35%, rgba(255, 255, 255, 0) 70%);
  animation: done-flash 1.1s ease-out 1.85s both; }
@keyframes done-flash { 0% { opacity: 0; transform: scale(0.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }
.b-done-mark svg { width: 1.6rem; height: 1.6rem; }
.b-done-mark path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: done-tick 0.5s ease 2.35s forwards; }
.b-done-what { font-family: var(--font-display); font-size: 1.15rem; margin: 0.35rem 0 0; }
.b-done-about { font-family: var(--font-sans); font-size: 0.85rem; color: var(--bloom-soft); }
.b-done-when { margin: 0; font-size: 0.95rem; }
.b-done-when::first-letter { text-transform: uppercase; }
.b-done-for { margin: 0; font-size: 0.85rem; color: var(--bloom-soft); }
.b-done-sent { margin: 0.6rem 0 0; font-size: 0.78rem; color: var(--bloom-soft); max-width: 30ch; overflow-wrap: anywhere; }
/* Bloom movement: the wave appears, then bursts open; leaves grow out from their base, then keep slowly blooming
   out and back (a ripple that travels round the circle); rosettes turn slowly; a few gold glints catch the light. */
.b-confetti, .bloom-flakes { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bloom-logo { position: absolute; z-index: 0; pointer-events: none; transform: translate(-50%, -50%); }
.bloom-logo svg { display: block; opacity: 0; animation: bl-logo 1.6s cubic-bezier(.3, .7, .3, 1) .15s both; }
@keyframes bl-logo { 0% { opacity: 0; transform: scale(.2) rotate(-12deg); } 30% { opacity: 1; transform: scale(1) rotate(0); } 58% { opacity: 1; transform: scale(1.06); } 100% { opacity: 0; transform: scale(2.4); } }
.bl-grow { animation: bl-grow 1.8s cubic-bezier(.2, .8, .2, 1) var(--gd) both; }
@keyframes bl-grow { from { transform: scale(0) rotate(-20deg); } to { transform: scale(1) rotate(0); } }
.bl-grow-c { transform-box: fill-box; transform-origin: center; animation: bl-grow 1.8s cubic-bezier(.2, .8, .2, 1) var(--gd) both; }
.bl-leaf { animation: bl-leaf var(--bt) ease-in-out var(--bd) infinite alternate; }
@keyframes bl-leaf { from { transform: scale(.9) rotate(calc(var(--sw) * -1)); } to { transform: scale(1.06) rotate(var(--sw)); } }
.bl-rose { animation: bl-rose var(--rt) ease-in-out var(--rd) infinite alternate; }
@keyframes bl-rose { from { transform: rotate(-14deg) scale(.94); } to { transform: rotate(14deg) scale(1.05); } }
.bl-spark { opacity: 0; transform-box: fill-box; transform-origin: center; animation: bl-spark var(--st) ease-in-out var(--sd) infinite; }
@keyframes bl-spark { 0%, 72%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 84% { opacity: 1; transform: scale(1) rotate(45deg); } }
/* glittery silver confetti: bursts out of the tick, then floats down shimmering */
.b-glint { position: absolute; left: var(--cx, 50%); top: var(--cy, 19%); width: 7px; height: 11px; opacity: 0; border-radius: 1px;
  background: linear-gradient(135deg, #FFFFFF 0%, #D9DCE1 30%, #9EA3AA 55%, #F3F4F6 75%, #B9BDC3 100%);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.55);
  animation: glint-burst var(--t) cubic-bezier(.2, .7, .3, 1) var(--d) both, glint-shine 0.6s ease-in-out var(--d) 6 alternate; }
.b-glint--1 { width: 6px; height: 6px; border-radius: 50%; }
.b-glint--2 { width: 9px; height: 9px; border-radius: 0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); box-shadow: none; }
/* glitter swirls in to where the tick will be, twinkles there, then bursts out and floats down */
@keyframes glint-burst {
  0% { opacity: 0; transform: translate(calc(-50% + var(--dx) * 1.1), calc(-50% + var(--dy) * 1.1)) rotate(var(--r)) scale(.5); }
  8% { opacity: 1; }
  24% { opacity: 1; transform: translate(-50%, -50%) rotate(calc(var(--r) + 140deg)) scale(.6); }
  29% { opacity: 1; transform: translate(-50%, -50%) rotate(calc(var(--r) + 170deg)) scale(1.35); }
  46% { opacity: 1; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(calc(var(--r) + 220deg)) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx) * 1.15), calc(-50% + var(--dy) + 13rem)) rotate(calc(var(--r) + 480deg)) scale(.8); }
}
@keyframes glint-shine { from { filter: brightness(0.85); } to { filter: brightness(1.45); } }
@keyframes done-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes done-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes done-tick { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .b-done, .b-done-mark, .b-done-mark::before { animation: none; }
  .b-done-mark path { animation: none; stroke-dashoffset: 0; }
  .bl-grow, .bl-grow-c, .bl-leaf, .bl-rose { animation: none; }
  .bloom-logo svg, .bl-spark { opacity: 0; animation: none; }
  .b-glint { animation: none; opacity: 0; }
}
details.b-wa { border-radius: 18px; background: var(--band); padding: 0.2rem 1rem; }
/* on the confirmation the WhatsApp message is just a small link, so everything fits on one screen */
.b-done ~ details.b-wa { background: none; padding: 0; text-align: center; }
.b-done ~ details.b-wa summary { padding: 0.15rem 0; font-size: 0.85rem; text-decoration: underline; text-underline-offset: 3px; }
.b-done ~ details.b-wa[open] { text-align: left; padding-bottom: 0.4rem; }
details.b-wa summary { cursor: pointer; padding: 0.65rem 0; font-size: var(--step--1); color: var(--ink); list-style-position: inside; }
details.b-wa[open] { padding-bottom: 0.9rem; }
details.b-wa .b-bubble { background: var(--surface); margin: 0; }
.b-actions--row { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 0.6rem; }
.b-actions--row .button { flex: 1 1 9rem; justify-content: center; text-align: center; }

/* My bookings (signed in): the cream "bloom" welcome card with Book a treatment and Home side by side */
.a-hello { border-radius: 22px; padding: 1.7rem 1.1rem 1.25rem; display: grid; gap: 0.4rem; justify-items: center; text-align: center; min-height: 16rem; align-content: center; --hy: 36%; }
.a-hello .b-title { color: var(--bloom-ink); }
.a-hello .b-title em { font-style: italic; font-weight: 300; }
.a-hello-sub { margin: 0; font-size: var(--step--1); color: var(--bloom-soft); }
.a-hello-actions { display: flex; gap: 0.5rem; width: 100%; margin-top: 0.7rem; flex-wrap: wrap; }
.a-hello-actions .button { flex: 1 1 8rem; justify-content: center; text-align: center; min-height: 46px; padding-inline: 1rem; }
.a-hello-actions .button:first-child { background: var(--olive-deep); color: var(--olive-ink); border-color: var(--olive-deep); }
.a-hello-actions .button--quiet { background: var(--bloom-solid); color: var(--bloom-ink); border: 1px solid rgba(78, 83, 50, 0.45); }
.a-hello a:focus-visible { outline: 2px solid var(--olive-deep); outline-offset: 2px; }
@media (max-width: 40rem) { .page-hero--app + .booking .b-done .b-title { font-size: 1.75rem; } }
.b-actions--row .button, .a-hello-actions .button { white-space: nowrap; letter-spacing: 0.06em; font-size: 0.78rem; padding-inline: 0.9rem; }
.b-done > :not(.bloom-art):not(.bloom-heart):not(.bloom-logo):not(.b-confetti), .a-hello > :not(.bloom-art):not(.bloom-heart):not(.bloom-logo):not(.bloom-flakes) { position: relative; z-index: 1; }

/* Booking and My bookings on shorter screens (small Androids, iPhone SE, 1366×768 laptops): tighter spacing so each step fits */
@media (min-width: 40.01rem) { .page-hero--app .eyebrow { display: none; } }
@media (min-width: 40.01rem) and (max-height: 56rem) {
  .page-hero--app + .booking .booking-card { padding: 1.25rem 1.75rem; gap: 0.7rem; }
  .page-hero--app + .booking #b-step { gap: 0.9rem; }
  .page-hero--app + .booking .b-title { font-size: 1.5rem; }
  .page-hero--app + .booking .b-days { gap: 0.5rem; }
  .page-hero--app + .booking .b-cal { row-gap: 0.15rem; }
  .page-hero--app + .booking .b-cal .b-day { height: 2.35rem; }
  .page-hero--app + .booking .b-policy { font-size: 0.8rem; padding: 0.8rem 1rem; }
  .page-hero--app + .booking .b-done { min-height: 16rem; padding-block: 1.4rem 1.2rem; }
}
@media (max-width: 40rem) and (max-height: 43rem) {
  .page-hero--app .column { padding-block: 0.6rem 0.1rem; }
  .page-hero--app h1 { font-size: 1.4rem; }
  .page-hero--app + .booking { gap: 0.5rem; }
  .page-hero--app + .booking #b-step { gap: 0.7rem; }
  .page-hero--app + .booking .b-title { font-size: 1.3rem; }
  .page-hero--app + .booking .b-hint { font-size: 0.8rem; }
  .page-hero--app + .booking .b-cal .b-day { height: 2.2rem; }
  .page-hero--app + .booking .b-nav { width: 36px; height: 36px; }
  .page-hero--app + .booking .b-policy { font-size: 0.74rem; padding: 0.65rem 0.85rem; }
  .page-hero--app + .booking .b-done { gap: 0.25rem; }
  .page-hero--app + .booking .b-hour, .page-hero--app + .booking .b-time { min-height: 38px; padding-block: 0.25rem; }
  .page-hero--app + .booking .b-times { gap: 0.45rem; }
}
/* Very narrow phones (320 px wide): "My bookings | Home" stay side by side */
@media (max-width: 22.5rem) {
  .page-hero--app + .booking .b-policy { font-size: 0.7rem; line-height: 1.4; padding: 0.6rem 0.75rem; }
  .page-hero--app + .booking .b-summary { gap: 0.3rem; padding: 0.75rem 0.9rem; }
  .page-hero--app + .booking .b-cal .b-day { height: 2.2rem; }
  .b-actions--row .button, .a-hello-actions .button { flex-basis: 6.5rem; padding-inline: 0.6rem; letter-spacing: 0.04em; font-size: 0.74rem; }
}

/* "Olá, Yasmin." card: a few silver flakes drift slowly down, turning and catching the light */
/* silver on cream needs a soft grey edge to show */
.b-done .b-glint, .a-hello .b-glint { box-shadow: 0 0 0 .5px rgba(96, 100, 106, .45), 0 0 4px rgba(120, 124, 130, .35); }
.bloom-flakes .b-glint { top: -12px; left: var(--x); opacity: 0; animation: bl-flake var(--t) linear var(--d) infinite, glint-shine .9s ease-in-out infinite alternate; }
@keyframes bl-flake {
  0% { opacity: 0; transform: translate(0, 0) rotate(var(--r)); } 10% { opacity: .9; }
  50% { transform: translate(var(--sx), 9rem) rotate(calc(var(--r) + 200deg)); }
  90% { opacity: .9; } 100% { opacity: 0; transform: translate(calc(var(--sx) * -.5), 19rem) rotate(calc(var(--r) + 420deg)); }
}
@media (prefers-reduced-motion: reduce) { .bloom-flakes .b-glint { animation: none; opacity: 0; } }

/* Fully booked day: a small dusty-rose dot under the date in the calendar; tapping it explains and offers the waiting list */
.b-day--full { position: relative; color: var(--ink-soft); border-style: dashed; }
.b-day--full::after { content: ""; position: absolute; bottom: 4px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--rose); }
.b-legend { display: flex; align-items: center; justify-content: center; gap: 0.45rem; }
.b-legend-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rose); flex: none; }
.b-avail { margin: -0.45rem 0 -0.4rem; font-size: 0.78rem; line-height: 1.3; font-style: italic; }
.b-full { display: grid; gap: 0.7rem; justify-items: center; text-align: center; border: 1px solid var(--line); border-radius: 20px; padding: 1.1rem 1rem; color: var(--ink-soft); font-size: var(--step--1); }
.b-full.b-form { justify-items: stretch; text-align: left; }
.b-full.b-form .b-full-title { text-align: center; }
.b-full-title { font-family: var(--font-display); font-size: 1.35rem; color: var(--ink-heading); margin: 0; }
.b-full-title em { font-style: italic; font-weight: 300; color: var(--rose); }
.b-full-actions { display: grid; gap: 0.5rem; justify-items: center; width: 100%; }
.b-full-actions .button { width: 100%; max-width: 20rem; justify-content: center; }

/* Pick a time: one compact scroll wheel of full times, like the clock on a phone. The time in the middle band is chosen;
   taken times stay in the list, greyed out with "taken". The edges fade softly. */
.b-wheel-wrap { position: relative; --row: 46px; --rows: 5; }
.b-wheel-wrap::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--row); transform: translateY(-50%); pointer-events: none;
  border-radius: 999px; background: var(--band); border: 1px solid var(--line); }
.b-wheel { position: relative; height: calc(var(--row) * var(--rows)); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scroll-snap-type: y mandatory;
  padding-block: calc(var(--row) * (var(--rows) - 1) / 2); scrollbar-width: none; outline: none;
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.b-wheel::-webkit-scrollbar { display: none; }
.b-wheel:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 12px; }
.b-slot { height: var(--row); display: flex; align-items: center; justify-content: center; gap: 0.6rem; scroll-snap-align: center; scroll-snap-stop: normal; cursor: pointer;
  font-variant-numeric: tabular-nums; font-size: 1.15rem; color: var(--ink-soft); transition: color 0.2s ease, font-size 0.2s ease; user-select: none; }
.b-slot.is-centre { color: var(--ink); font-size: 1.45rem; font-weight: 500; }
.b-slot.is-taken { color: var(--ink-soft); opacity: 0.4; }
.b-slot.is-taken .b-slot-time { text-decoration: line-through; }
.b-slot-note { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.b-wheel-note:empty { display: none; }
.b-wheel-note { margin: 0.3rem 0 0; text-align: center; font-size: var(--step--1); color: var(--ink-soft); }
@media (max-width: 40rem) and (max-height: 43rem) { .b-wheel-wrap { --row: 42px; --rows: 3; } }
@media (max-height: 36rem) { .b-wheel-wrap { --row: 36px; } .b-slot.is-centre { font-size: 1.3rem; } .page-hero--app + .booking .b-avail { font-size: 0.74rem; } }

/* The top bar's own "make room" steps (set by js/site.js only when something would touch the logo) */
.hdr-measure, .hdr-measure * { transition: none !important; }
.site-header.hdr-c1 .nav-contact { display: none; }
.site-header.hdr-c1 .nav-account { padding: 0; width: 40px; min-height: 40px; justify-content: center; }
.site-header.hdr-c1 .nav-account .nav-account-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-header.hdr-c2 .menu-toggle > [lang] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-header.hdr-c2 .nav-right { gap: 0.3rem; }
.site-header.hdr-c2 .lang-switch { padding: 2px; }
.site-header.hdr-c2 .lang-switch button { min-width: 28px; min-height: 30px; font-size: 0.7rem; letter-spacing: 0; }
.site-header.hdr-c3 .mark--full { width: 4.6rem !important; }
.site-header.hdr-c4 .nav-right .lang-switch { display: none; }

/* Check your booking: "Change: treatment · day & time · details" and "Cancel and go back home" under Confirm */
.b-fix { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.15rem 0.9rem; font-size: var(--step--1); color: var(--ink-soft); }
.b-fix .text-link { font-size: inherit; padding-block: 0.35rem; }
.b-cancel { justify-self: center; font-size: var(--step--1); color: var(--ink-soft); padding-block: 0.35rem; }
.b-fix-wrap { display: grid; gap: 0; justify-items: center; margin-top: -0.4rem; }
.b-summary dd .b-sub { display: block; color: var(--ink-soft); font-size: 0.92em; }
#b-step:has(.b-fix-wrap) { gap: 0.7rem; }
#b-step:has(.b-fix-wrap) .b-policy { font-size: 0.78rem; line-height: 1.45; padding: 0.7rem 0.9rem; }
#b-step:has(.b-fix-wrap) .b-summary { gap: 0.35rem; padding-block: 0.8rem; }
@media (max-width: 22.5rem) {
  #b-step:has(.b-fix-wrap) .b-summary div { font-size: 0.8rem; gap: 0.6rem; }
  #b-step:has(.b-fix-wrap) .b-policy { font-size: 0.7rem; padding: 0.55rem 0.7rem; }
  #b-step:has(.b-fix-wrap) .b-title { font-size: 1.25rem; }
}
@media (max-height: 43rem) { #b-step:has(.b-fix-wrap) { gap: 0.55rem; } #b-step:has(.b-fix-wrap) .b-actions { margin-top: 0; } }

/* ================= Top bar, language flags, full-screen menu (chosen by Yasmin 4 Nov 2026) =================
   Logo top left; Sign in (solid rounded square) → round flag ▾ (searchable list of languages; PT and EN are written by
   Yasmin, the others are translated automatically) → ☰. The menu opens from the middle and fills the screen.
   On the start page the bar is clear over the photo and turns white with the scrolling as the photo ends. */
.site-header.nh:not(.site-header--over) { --solid: 1; }
/* automatic translation (Google): hide its own bar and pop-ups, keep the page where it is */
.goog-te-banner-frame, .skiptranslate > iframe, #goog-gt-tt, .goog-te-balloon-frame, .VIpgJd-ZVi9od-ORHb-OEVmcd { display: none !important; }
body { top: 0 !important; }
#gt-box { display: none; }
.nl-wait { margin: 0; font-size: 0.74rem; color: #E8D3A9; padding-inline: 0.35rem; }

/* Top bar: the logo small on the left; on the right: Sign in → language flag → menu (3 bold lines) */
.nh .nh-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-block: 1rem !important; }
.nh .nh-logo { width: clamp(4.9rem, 9vw, 6.2rem) !important; padding-block: 0.2rem; }
.nh-right { display: flex; align-items: center; gap: clamp(0.55rem, 2.4vw, 1rem); }
.nh .nh-signin { border: 1px solid currentColor !important; border-radius: 999px; padding: 0.42rem 0.95rem !important; min-height: 36px; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.nh .nh-signin .nav-account-label { position: static !important; width: auto !important; height: auto !important; clip: auto !important; overflow: visible !important; }
.nh .nh-signin { width: auto !important; justify-content: center; white-space: nowrap; }
.nh .menu-toggle.nh-menu { border: 0 !important; border-radius: 0 !important; width: auto !important; min-width: 0 !important; box-shadow: none !important; }
.nh-menu { background: none; border: 0; color: inherit; padding: 0.4rem 0.1rem; cursor: pointer; min-height: 40px; display: inline-flex; align-items: center; }
.nh-lines { display: grid; gap: 4.5px; width: 24px; }
.nh-lines i { display: block; height: 2.4px; border-radius: 2px; background: currentColor; }
.nh-lang { position: relative; }
.nh-lang-btn { display: inline-flex; align-items: center; gap: 0.3rem; background: none; border: 0; color: inherit; padding: 0.3rem 0.15rem; cursor: pointer; min-height: 40px; }
/* proper round flags (circle-flags, MIT); two-country languages show both flags, slightly overlapping, each whole */
.flagset { display: inline-flex; align-items: center; flex: none; --ring: #FFFFFF; }
.flagset .flag { display: block; width: 1.5rem; height: 1.5rem; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--ring), 0 1px 3px rgba(0, 0, 0, 0.25); }
.flagset .flag + .flag { margin-left: -0.5rem; }
.nl-panel .flagset { --ring: #353A22; }
.nl-item[aria-selected="true"] .flagset { --ring: #E7C77E; }
.nh-chev { width: 0.7rem; height: 0.5rem; transition: transform 0.25s ease; }
.nh-lang-btn[aria-expanded="true"] .nh-chev { transform: rotate(180deg); }
.nh-menu:focus-visible, .nh-lang-btn:focus-visible, .nh-signin:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 8px; }
/* the language list: deep olive with mustard, so it pops against the white */
.nl-panel { position: absolute; z-index: 40; top: calc(100% + 0.55rem); right: -4.2rem; width: min(19rem, calc(100vw - 32px)); background: #353A22; color: #F4EEE4;
  border-radius: 20px; padding: 0.8rem; box-shadow: 0 22px 50px -18px rgba(20, 16, 14, 0.55); display: grid; gap: 0.6rem; text-align: left; }
@media (min-width: 40rem) { .nl-panel { right: -0.5rem; } }
/* phones: the list sits just under the top bar, 16 px from both screen edges */
@media (max-width: 39.99rem) { .nl-panel { position: fixed; top: var(--nl-top, 4.5rem); left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); width: auto; } }
.nl-panel[hidden] { display: none; }
.nl-head { display: flex; align-items: center; justify-content: space-between; font: 500 0.7rem/1 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: #E7C77E; padding-inline: 0.3rem; }
.nl-close { background: rgba(244, 238, 228, 0.12); border: 0; color: #F4EEE4; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.nl-close svg { width: 0.75rem; height: 0.5rem; }
.nl-search { font: inherit; font-size: 0.95rem; width: 100%; border: 0; border-radius: 12px; padding: 0.65rem 0.85rem; background: #F4EEE4; color: #2A2D1B; min-height: 44px; }
.nl-search:focus { outline: 2px solid #E7C77E; outline-offset: 1px; }
.nl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; max-height: min(48vh, 22rem); overflow-y: auto; overscroll-behavior: contain; }
.nl-item { width: 100%; display: flex; align-items: center; gap: 0.7rem; background: none; border: 0; color: inherit; padding: 0.5rem 0.55rem; border-radius: 12px; cursor: pointer; text-align: left; font: inherit; }
.nl-item .flagset { min-width: 2.5rem; }
.nl-item:hover, .nl-item:focus-visible { background: rgba(244, 238, 228, 0.1); outline: none; }
.nl-item[aria-selected="true"] { background: #E7C77E; color: #2A2D1B; }
.nl-names { display: grid; line-height: 1.2; }
.nl-native { font-size: 0.95rem; }
.nl-en { font-size: 0.74rem; opacity: 0.75; }
.nl-empty, .nl-foot { margin: 0; font-size: 0.75rem; padding-inline: 0.3rem; color: rgba(244, 238, 228, 0.75); }
.nl-foot { border-top: 1px solid rgba(244, 238, 228, 0.15); padding-top: 0.55rem; }
/* the top bar turns white gradually with the scrolling as the photo ends */
.site-header--over.nh, .site-header--over.nh.is-solid {
  background: rgba(255, 255, 255, var(--solid, 0)) !important; transition: none !important;
  color: color-mix(in srgb, #171513 calc(var(--tc, var(--solid, 0)) * 100%), #FFFFFF) !important;
  box-shadow: 0 1px 0 rgba(20, 16, 14, calc(0.025 * var(--solid, 0))), 0 6px 16px -14px rgba(20, 16, 14, calc(0.12 * var(--solid, 0))) !important; }
/* while it turns white, the photo behind is softly frosted, so there's no murky see-through stage */
.site-header--over.nh { -webkit-backdrop-filter: blur(calc(var(--frost, 0) * 14px)) saturate(calc(1 + var(--frost, 0) * 0.2)); backdrop-filter: blur(calc(var(--frost, 0) * 14px)) saturate(calc(1 + var(--frost, 0) * 0.2)); }
/* "I speak Portuguese and English" under Yasmin's words */
.langs-note { margin: -0.4rem 0 0; font-family: var(--font-display); font-size: var(--step-1); color: var(--ink-heading); }
/* "Só pele. Com calma e com critério.": the words light up out of a soft glow as they scroll into view, then stay as a
   silvery mirror with a glaze gliding over them (js sets --r from 0 to 1) */
.silver-in {
  background: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, 0.95) 47%, rgba(255, 255, 255, 0.2) 55%, transparent 62%) 0% 0 / 150% 100% repeat-x,
              linear-gradient(180deg, #34353A 0%, #8D9098 34%, #E2E4E9 50%, #8A8D95 64%, #2B2C31 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  opacity: calc(0.15 + 0.85 * var(--r, 1)); letter-spacing: calc((1 - var(--r, 1)) * 0.14em);
  filter: blur(calc((1 - var(--r, 1)) * 9px)) drop-shadow(0 0 calc((1 - var(--r, 1)) * 22px) rgba(255, 255, 255, 0.9));
  animation: hd-shine 3.6s linear infinite !important; }
.silver-in em { -webkit-text-fill-color: transparent; }
@media (prefers-reduced-motion: reduce) { .silver-in { animation: none !important; opacity: 1; filter: none; letter-spacing: normal; } }

/* ===== round 2 (4 Nov) ===== */
/* logo a touch bigger */
.nh .nh-logo { width: clamp(5.6rem, 10.5vw, 7rem) !important; }
/* Entrar: one small solid pill. White over the photo, espresso once the bar is white (follows the scrolling). */
.nh .nh-signin { border: 0 !important; padding: 0.42rem 0.9rem !important; min-height: 32px !important; font-size: 0.7rem !important; letter-spacing: 0.14em !important; font-weight: 500;
  background: color-mix(in srgb, #2E2520 calc(var(--tc, var(--solid, 0)) * 100%), #FFFFFF) !important;
  color: color-mix(in srgb, #FFFFFF calc(var(--tc, var(--solid, 0)) * 100%), #2E2520) !important; }
.nh .nh-signin:hover { filter: brightness(1.08); }
/* the language list: deep espresso glass, cream words, the chosen language in polished silver */
.nl-panel { background: rgba(30, 24, 20, 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #F4EEE4;
  border: 1px solid rgba(244, 238, 228, 0.12); box-shadow: 0 24px 60px -20px rgba(10, 8, 6, 0.6); }
.nl-head { color: rgba(244, 238, 228, 0.7); }
.nl-panel .flagset { --ring: #1E1814; }
.nl-item[aria-selected="true"] { background: linear-gradient(180deg, #F5F6F8 0%, #C9CCD2 45%, #E8EAEE 60%, #B4B8BF 100%); color: #1E1814; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.nl-item[aria-selected="true"] .flagset { --ring: #E8EAEE; }
.nl-searchbox { position: relative; }
.nl-glass { position: absolute; left: 0.8rem; top: 50%; width: 1.1rem; height: 1.1rem; transform: translateY(-50%); color: rgba(244, 238, 228, 0.65); pointer-events: none; }
.nl-search { background: rgba(244, 238, 228, 0.1) !important; color: #F4EEE4 !important; padding-left: 2.5rem !important; border: 1px solid rgba(244, 238, 228, 0.16) !important; }
.nl-search:focus { outline: 1.5px solid rgba(232, 234, 238, 0.8) !important; }
/* the note in the language list: Yasmin's languages in warm champagne, the translation line small underneath */
.nl-foot { padding: 0.75rem 0.35rem 0.15rem; }
.nl-foot > span { display: grid; gap: 0.25rem; }
.nl-foot-main { font-family: var(--font-display); font-weight: 400; font-size: 1.12rem; line-height: 1.25; color: #E8D3A9; }
.nl-foot-main em { font-style: italic; }
.nl-foot-sub { font-size: 0.74rem; color: rgba(244, 238, 228, 0.7); }
.nl-foot.is-lit .nl-foot-sub { color: #F4EEE4; }
/* the menu opens from the middle of the screen and fills the whole screen */
.drawer { inset: 0 !important; width: 100% !important; transform: none !important; box-shadow: none;
  clip-path: circle(0% at 50% 50%); opacity: 0;
  transition: clip-path 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease, overlay 0.6s allow-discrete, display 0.6s allow-discrete; }
.drawer[open] { clip-path: circle(75% at 50% 50%); opacity: 1; }
@starting-style { .drawer[open] { clip-path: circle(0% at 50% 50%); opacity: 0; } }
.drawer::backdrop { background: transparent !important; }
.drawer-inner { justify-items: center; text-align: center; padding-right: max(1.75rem, env(safe-area-inset-right, 0px)); }
.drawer nav { max-width: 26rem; }
.drawer-links li { border: 0 !important; justify-items: center; padding-block: 0.55rem; }
.drawer-links a { font-size: clamp(1.5rem, 6vw, 2rem); }
.drawer-foot { justify-items: center; }
@media (prefers-reduced-motion: reduce) { .drawer { transition: opacity 0.2s; } }
.nh-lang--menu { color: var(--ink); }
.nh-lang--menu .nl-panel { position: fixed; top: var(--nl-top, 4.5rem); right: max(16px, env(safe-area-inset-right, 0px)); left: auto; width: min(19rem, calc(100vw - 32px)); z-index: 70; }
@media (max-width: 39.99rem) { .nh-lang--menu .nl-panel { left: max(16px, env(safe-area-inset-left, 0px)); width: auto; } }
/* the "Menu" heading at the top of the full-screen menu, with a fine line on each side */
.menu-title { margin: 0 0 0.9rem; display: flex; align-items: center; justify-content: center; gap: 0.8rem; outline: none;
  font-family: var(--font-display); font-style: italic; font-size: clamp(1.25rem, 4.6vw, 1.5rem); line-height: 1; color: var(--ink-soft); }
.drawer-mark:focus:not(:focus-visible) { outline: none; }

.menu-title::before, .menu-title::after { content: ""; width: 1.8rem; height: 1px; background: var(--ink-heading); opacity: 0.35; }
/* "Só pele. Com calma e com critério.": polished chrome, created out of light as the welcome photo scrolls away */
.silver-in {
  /* a slim, soft gleam over a deeper chrome, so the words stay easy to read */
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.55) 48%, rgba(255, 255, 255, 0.15) 51%, transparent 55%) 0% 0 / 150% 100% repeat-x,
              linear-gradient(180deg, #15161A 0%, #3E4148 22%, #9A9EA6 42%, #5A5D64 55%, #2A2C31 68%, #6E727A 84%, #17181C 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  opacity: calc(0.05 + 0.95 * var(--r, 1)); letter-spacing: normal;
  filter: blur(calc((1 - var(--r, 1)) * 8px)) drop-shadow(0 0 calc((1 - var(--r, 1)) * 30px) rgba(255, 255, 255, 1)) drop-shadow(0 1px 0 rgba(0, 0, 0, calc(0.15 * var(--r, 1))));
  animation: hd-shine 3s linear infinite !important; }

/* ===== round 3 (4 Nov): Sign in, flag and menu share one height (36px) and one centre line ===== */
.nh-right { align-items: center; gap: 0.7rem; height: 36px; }
.nh .nh-signin { height: 36px !important; min-height: 36px !important; padding: 0 0.85rem !important; border-radius: 8px !important; display: inline-flex !important; align-items: center; line-height: 1; }
.nh-lang { display: flex; align-items: center; height: 36px; }
.nh-lang-btn { height: 36px; min-height: 36px; padding: 0; gap: 0.25rem; display: inline-flex; align-items: center; vertical-align: top; }
.nh-flag, .nh-flag .flagset { display: flex; align-items: center; height: 36px; }
.nh-flag .flagset .flag { width: 30px; height: 30px; }
.nh-flag .flagset .flag + .flag { margin-left: -11px; }
.nh .menu-toggle.nh-menu { height: 36px; min-height: 36px !important; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; width: 30px !important; }
.nh-lines { width: 24px; }
/* the logo clearly bigger than the three items on the right (as big as the phone's width allows) */
.nh .nh-logo { width: clamp(5rem, 22vw, 6rem) !important; }
/* logo in the top-left corner, menu in the top-right corner, on every screen width */
.nh .nh-bar { max-width: none !important; width: 100%; padding-left: max(18px, env(safe-area-inset-left, 0px)) !important; padding-right: max(18px, env(safe-area-inset-right, 0px)) !important; }
@media (min-width: 48rem) { .nh .nh-bar { padding-left: max(32px, env(safe-area-inset-left, 0px)) !important; padding-right: max(32px, env(safe-area-inset-right, 0px)) !important; } }
.nh .nh-bar { align-items: center; padding-block: 0.8rem !important; }
/* smaller, lighter items on the right: one height of 30px */
.nh-right { height: 30px; gap: 0.6rem; }
.nh .nh-signin { height: 30px !important; min-height: 30px !important; padding: 0 0.7rem !important; font-size: 0.64rem !important; letter-spacing: 0.13em !important; border-radius: 7px !important; }
.nh-lang, .nh-lang-btn, .nh-flag, .nh-flag .flagset { height: 30px; min-height: 30px; }
.nh-flag .flagset .flag { width: 24px; height: 24px; }
.nh-flag .flagset .flag + .flag { margin-left: -9px; }
.nh-chev { width: 0.6rem; height: 0.42rem; }
.nh .menu-toggle.nh-menu { height: 30px; min-height: 30px !important; width: 24px !important; }
.nh-lines { width: 20px; gap: 4px; }
.nh-lines i { height: 2px; }

/* phones: the language list hangs directly under the top bar (anchored to the bar itself, so it can never cover it) */
@media (max-width: 39.99rem) {
  .site-header .nh-lang:not(.nh-lang--menu) { position: static; }
  .site-header .nh-lang:not(.nh-lang--menu) .nl-panel { position: absolute; top: calc(100% + 6px); left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); width: auto; }
}
/* bigger screens: the list also hangs directly under the bar, lined up with the right edge */
@media (min-width: 40rem) {
  .site-header .nh-lang:not(.nh-lang--menu) { position: static; }
  .site-header .nh-lang:not(.nh-lang--menu) .nl-panel { position: absolute; top: calc(100% + 6px); right: max(32px, env(safe-area-inset-right, 0px)); left: auto; width: 19rem; }
}
/* Start page top bar (4 Nov, after the cloudy in-between looked off): clear over the photo, then a SOLID white bar
   slides down from the top as the photo ends (about half a second), and the logo and icons turn dark with it.
   Never a see-through stage. js/site.js adds "nh-white". */
.site-header--over.nh, .site-header--over.nh.is-solid {
  background: transparent !important; box-shadow: none !important; isolation: isolate;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  color: #FFFFFF !important; transition: color 0.35s ease 0.12s !important; }
.site-header--over.nh::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #FFFFFF;
  box-shadow: 0 1px 0 rgba(20, 16, 14, 0.025), 0 6px 16px -14px rgba(20, 16, 14, 0.12);
  transform: translateY(-102%); transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1); }
.site-header--over.nh.nh-white { color: #171513 !important; }
.site-header--over.nh.nh-white::before { transform: none; }
.site-header--over.nh .nh-signin { background: #FFFFFF !important; color: #2E2520 !important; transition: background-color 0.35s ease 0.12s, color 0.35s ease 0.12s; }
.site-header--over.nh.nh-white .nh-signin { background: #2E2520 !important; color: #FFFFFF !important; }
@media (prefers-reduced-motion: reduce) { .site-header--over.nh::before { transition: none; } }
/* Safari doesn't always repaint shapes that take the bar's colour while it fades, so the logo, the menu lines and the
   arrow get their own colours, switched in one step just as the white bar has come down (no colour fade). */
.site-header--over.nh { transition: none !important; }
.site-header--over.nh .nh-logo svg path { fill: #FFFFFF; transition: fill 0s linear 0.08s; }
.site-header--over.nh .nh-lines i { background: #FFFFFF; transition: background-color 0s linear 0.08s; }
.site-header--over.nh .nh-chev path { stroke: #FFFFFF; transition: stroke 0s linear 0.08s; }
.site-header--over.nh .nh-signin { transition: background-color 0s linear 0.08s, color 0s linear 0.08s !important; }
.site-header--over.nh.nh-white .nh-logo svg path { fill: #171513; }
.site-header--over.nh.nh-white .nh-lines i { background: #171513; }
.site-header--over.nh.nh-white .nh-chev path { stroke: #171513; }
.site-header.nh:not(.site-header--over) .nh-logo svg path { fill: #171513; }
.site-header.nh:not(.site-header--over) .nh-lines i { background: #171513; }
.site-header.nh:not(.site-header--over) .nh-chev path { stroke: #171513; }
/* (4 Nov, final) The bar's white is the page's own white: it fills the bar from the bottom up exactly as the photo's
   bottom edge passes through it (js sets --cover in px), so photo and white meet in one line. No slide timing. */
.site-header--over.nh::before { top: auto; bottom: 0; height: var(--cover, 0px); transform: none !important; transition: none !important; box-shadow: none; }
.site-header--over.nh.nh-full::before { box-shadow: 0 1px 0 rgba(20, 16, 14, 0.025), 0 6px 16px -14px rgba(20, 16, 14, 0.12); }
.site-header--over.nh .nh-logo svg path, .site-header--over.nh .nh-lines i, .site-header--over.nh .nh-chev path, .site-header--over.nh .nh-signin { transition: none !important; }
/* While the photo's edge passes through the bar, a dark copy of the bar shows exactly over the white part and the
   white bar exactly over the photo part, so the logo and icons are split cleanly along the photo's edge. */
.nh-ghost { position: absolute !important; inset: 0; z-index: 2; pointer-events: none; display: none !important; }
.site-header--over.nh.nh-part .nh-ghost { display: flex !important; clip-path: inset(calc(100% - var(--cover, 0px)) 0 0 0); }
.site-header--over.nh.nh-part > .nh-bar:not(.nh-ghost) { clip-path: inset(0 0 var(--cover, 0px) 0); }
.site-header--over.nh .nh-ghost .nh-logo svg path { fill: #171513; }
.site-header--over.nh .nh-ghost .nh-lines i { background: #171513; }
.site-header--over.nh .nh-ghost .nh-chev path { stroke: #171513; }
.site-header--over.nh .nh-ghost .nh-signin { background: #2E2520 !important; color: #FFFFFF !important; }
/* the list closes with a tick (✓): a solid cream circle with a bold dark tick, easy to see and tap */
.nl-close { background: #F4EEE4 !important; color: #1E1814 !important; width: 38px !important; height: 38px !important; box-shadow: 0 2px 10px -4px rgba(0, 0, 0, 0.5); }
.nl-close svg { width: 1.2rem; height: 1.2rem; }
.nl-close svg path { stroke-width: 2.6; }
.nl-close:focus-visible { outline: 2px solid #F4EEE4; outline-offset: 2px; }
/* (4 Nov, smooth version) Once the photo ends at the bar's bottom edge, the white and the dark icons fade in together
   in 0.45 s (a quick crossfade between the white-icons bar and a dark-icons copy), then settle into the normal bar. */
.site-header--over.nh::before { height: 100% !important; opacity: 0; transition: opacity 0.45s ease !important; }
.site-header--over.nh .nh-ghost { display: flex !important; clip-path: none !important; opacity: 0; transition: opacity 0.45s ease; }
.site-header--over.nh > .nh-bar:not(.nh-ghost) { clip-path: none !important; transition: opacity 0.45s ease; }
.site-header--over.nh.nh-fade::before { opacity: 1; }
.site-header--over.nh.nh-fade .nh-ghost { opacity: 1; }
.site-header--over.nh.nh-fade > .nh-bar:not(.nh-ghost) { opacity: 0; }
/* settled: the real bar takes the dark look and the copy steps away, with no animation (they look the same) */
.site-header--over.nh.nh-settled .nh-ghost { opacity: 0; transition: none; }
.site-header--over.nh.nh-settled > .nh-bar:not(.nh-ghost) { opacity: 1; transition: none; }
.site-header--over.nh.nh-instant::before, .site-header--over.nh.nh-instant .nh-ghost, .site-header--over.nh.nh-instant > .nh-bar { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .site-header--over.nh::before, .site-header--over.nh .nh-ghost, .site-header--over.nh > .nh-bar { transition: none !important; } }


/* ===== Footer (chosen by Yasmin 5 Nov 2026: "6 · Aurora" from examples/footer-idea.html) =====
   The white page melts into a soft dawn (dusty rose, mustard and sage light along the horizon) with a fine line of light,
   then "Pele, com intenção.", the links in neat columns and the big bálsamoskin name across the bottom.
   It fills exactly the screen under the top bar (js/site.js sets --avail), so the whole footer is seen at once;
   the dawn above the words takes the spare room. It comes alive as it scrolls into view (.is-in). */
.ft { --bg: #FFFFFF; --fink: #2E2520; --fsoft: #5C5650; --hair: rgba(46, 37, 32, .12);
  position: relative; overflow: hidden; isolation: isolate; background: var(--bg); color: var(--fink);
  display: flex; flex-direction: column; min-height: var(--avail, auto); text-align: left; }
.ft a { color: inherit; text-decoration: none; }
.ft-sky { position: relative; flex: 1 0 auto; min-height: 3.25rem; overflow: hidden; background: linear-gradient(#FFFFFF, var(--bg)); }
.ft-sky::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(to bottom, transparent, var(--bg)); z-index: 2; }
.ft-glow { position: absolute; border-radius: 50%; filter: blur(44px); opacity: 0; will-change: transform, opacity; transform: translate3d(0, 30%, 0);
  transition: opacity 1.6s ease, transform 2.2s cubic-bezier(.22, 1, .36, 1); }
.ft.is-in .ft-glow { opacity: 1; transform: none; animation: ft-drift 14s ease-in-out 2.2s infinite alternate; }
.ft-g1 { left: -8%; top: 40%; width: 55%; height: 90%; background: radial-gradient(closest-side, rgba(185, 131, 113, .5), transparent); }
.ft-g2 { left: 28%; top: 46%; width: 48%; height: 90%; background: radial-gradient(closest-side, rgba(240, 194, 116, .55), transparent); animation-delay: -5s !important; }
.ft-g3 { right: -10%; top: 40%; width: 55%; height: 90%; background: radial-gradient(closest-side, rgba(154, 162, 122, .45), transparent); animation-delay: -9s !important; }
@keyframes ft-drift { from { transform: translate3d(-5%, 0, 0) scale(1); } to { transform: translate3d(6%, -8%, 0) scale(1.1); } }
.ft-line { position: absolute; left: 0; right: 0; top: 72%; height: 1px; z-index: 3; transform: scaleX(0);
  background: linear-gradient(90deg, transparent, #8A8F97 25%, #FFFFFF 50%, #8A8F97 75%, transparent); transition: transform 1.8s cubic-bezier(.22, 1, .36, 1) .3s;
  box-shadow: 0 0 8px rgba(255, 255, 255, .9); }
.ft.is-in .ft-line { transform: scaleX(1); }

.ft-inner { position: relative; z-index: 3; flex: none; width: 100%; max-width: var(--wide); margin: .6rem auto 0; padding: 0 18px; box-sizing: border-box; }
.ft-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .55rem 1rem; }
.ft-lead { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.05; margin: 0; color: var(--fink); }
.ft-lead em { font-style: italic; }
.ft-book { display: inline-flex; align-items: center; min-height: 36px; padding: 0 1rem; border-radius: 999px; background: var(--fink); color: var(--bg) !important;
  font-size: .76rem; font-weight: 500; transition: transform .3s var(--ease); }
.ft-book:hover { transform: translateY(-2px); }
.ft-cols { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: .9rem .75rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--hair); }
.ft-col { display: flex; flex-direction: column; gap: .22rem; font-size: .76rem; line-height: 1.3; color: var(--fsoft); min-width: 0; }
.ft-col a { transition: color .2s; }
.ft-col a:hover { color: var(--fink); }
.ft-col h2 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: .92rem; color: var(--fink); margin: 0 0 .1rem; }
.ft-hours { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: .9rem; }
.ft-hours h2 { margin: 0; }
.ft-hours dl { margin: 0; display: flex; flex-wrap: wrap; gap: .15rem .9rem; }
.ft-hours dl div { display: flex; gap: .3rem; }
.ft-acc a { display: inline; }
.ft-hours dt { color: var(--fink); }
.ft-hours dd { margin: 0; }
/* Contact + Hours first on phones, then Visit + Studio (Yasmin 5 Nov); on bigger screens Visit | Studio | Contact | Hours */
.ft-cols { grid-template-columns: 1fr 1fr; }
.ft-contact { order: 1; } .ft-cols .ft-hours { order: 2; grid-column: auto; flex-direction: column; align-items: stretch; }
.ft-cols > nav { order: 3; }
.ft-cols .ft-hours dl { flex-direction: column; gap: .2rem; }
.ft-cols .ft-hours dl div { flex-direction: column; gap: 0; }
.ft-contact a { display: flex; align-items: flex-start; gap: .4rem; }
.ft-contact a span { overflow-wrap: anywhere; min-width: 0; }

.ft-ic { width: 1.05em; height: 1.05em; flex: none; margin-top: .12em; }
.ft-note { margin: 0 0 .15rem; color: var(--fink); }
.ft-base { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: .8rem; padding: .5rem 0; border-top: 1px solid var(--hair); font-size: .68rem; color: var(--fsoft); }
/* the words and links rise in softly, one group after another */
.ft-top, .ft-col, .ft-base { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .9s ease, transform 1.1s cubic-bezier(.22, 1, .36, 1); }
.ft.is-in .ft-top, .ft.is-in .ft-col, .ft.is-in .ft-base { opacity: 1; transform: none; }
.ft.is-in .ft-col:nth-child(1) { transition-delay: .15s; } .ft.is-in .ft-col:nth-child(2) { transition-delay: .25s; }
.ft.is-in .ft-col:nth-child(3) { transition-delay: .35s; } .ft.is-in .ft-col:nth-child(4) { transition-delay: .45s; }
.ft.is-in .ft-base { transition-delay: .55s; }
/* the big name rises up out of the bottom edge; a warm light glides through it */
.ft-word { position: relative; z-index: 3; flex: none; width: 100%; max-width: var(--wide); margin: 0 auto; padding: .15rem 18px 12px; box-sizing: border-box; overflow: hidden; }
.ft-word-in { position: relative; aspect-ratio: 671 / 100; transform: translate3d(0, 105%, 0); transition: transform 1.6s cubic-bezier(.22, 1, .36, 1) .35s;
  -webkit-mask: url("../images/wordmark.svg") center / 100% 100% no-repeat; mask: url("../images/wordmark.svg") center / 100% 100% no-repeat; }
.ft.is-in .ft-word-in { transform: none; }
.ft-word-fill, .ft-word-glaze { position: absolute; inset: 0; }
/* polished chrome (Yasmin 5 Nov: "make Aurora more chrome"), the same deep chrome as "Só pele. Com calma e com critério." */
.ft-word-fill { background: linear-gradient(180deg, #15161A 0%, #3E4148 22%, #9A9EA6 42%, #5A5D64 55%, #2A2C31 68%, #6E727A 84%, #17181C 100%); }
.ft-chrome { background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .6) 48%, rgba(255, 255, 255, .15) 51%, transparent 55%) 0% 0 / 150% 100% repeat-x,
    linear-gradient(180deg, #15161A 0%, #3E4148 22%, #9A9EA6 42%, #5A5D64 55%, #2A2C31 68%, #6E727A 84%, #17181C 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #3E4148; }
.ft-chrome em { -webkit-text-fill-color: transparent; }
@media (prefers-reduced-motion: no-preference) { .ft-chrome { animation: hd-shine 3.6s linear infinite; } }
.ft-word-glaze { overflow: hidden; }
.ft-word-glaze::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .9) 50%, transparent); transform: translate3d(-120%, 0, 0) skewX(-14deg);
  animation: ft-glaze 5s ease-in-out 2s infinite; }
@keyframes ft-glaze { 0% { transform: translate3d(-120%, 0, 0) skewX(-14deg); } 55%, 100% { transform: translate3d(400%, 0, 0) skewX(-14deg); } }
/* Phones (Yasmin 5 Nov, "no order"): one tidy grid. Contact, then Hours, then Visit | Studio, each group under its
   heading with a fine line between groups; everything in the second column starts on exactly the same line (the middle). */
@media (max-width: 47.99rem) {
  .ft .ft-cols { column-gap: 0; row-gap: 0; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); }
  .ft .ft-cols > .ft-col { padding: .7rem 0; gap: .3rem; }
  .ft .ft-cols > .ft-contact { order: 1; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); row-gap: .45rem; padding-top: 0; }
  .ft .ft-cols > .ft-contact h2 { grid-column: 1 / -1; }
  /* e-mail, Instagram, WhatsApp stacked on the left; the address on its own on the right (Yasmin 5 Nov) */
  .ft .ft-contact a { grid-column: 1; padding-right: .75rem; }
  .ft .ft-contact a.ft-addr { grid-column: 2; grid-row: 2 / span 3; padding-right: 0; align-self: start; }
  .ft .ft-cols > .ft-hours { order: 2; grid-column: 1 / -1; border-top: 1px solid var(--hair); }
  .ft .ft-cols .ft-hours dl { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); row-gap: .2rem; }
  .ft .ft-contact a span { overflow-wrap: normal; }
  .ft .ft-contact a[href^="https://wa.me"] span { white-space: nowrap; }
  .ft .ft-cols .ft-hours dl div { display: contents; }
  .ft .ft-hours dt { padding-right: .75rem; }
  .ft .ft-cols > nav { order: 3; border-top: 1px solid var(--hair); }
  .ft .ft-cols > nav:first-child { padding-right: .75rem; }
  .ft .ft-base { margin-top: 0; }
}
@media (max-width: 22.5rem) { .ft .ft-cols > .ft-contact { font-size: .7rem; } .ft .ft-contact a { gap: .3rem; } }
/* short phones (iPhone SE and similar): a little tighter so the whole footer still fits on one screen */
@media (max-width: 47.99rem) and (max-height: 700px) {
  .ft .ft-cols > .ft-col { padding: .45rem 0; gap: .15rem; font-size: .7rem; line-height: 1.25; }
  .ft .ft-cols > .ft-contact { row-gap: .2rem; padding-top: 0; }
  .ft .ft-cols .ft-hours dl { row-gap: .05rem; }
  .ft .ft-col h2 { font-size: .86rem; }
  .ft .ft-cols { margin-top: .5rem; padding-top: .5rem; }
  .ft .ft-base { padding: .35rem 0; font-size: .62rem; }
}
@media (min-width: 48rem) {
  .ft-inner { padding: 0 32px; display: grid; grid-template-columns: 1fr 2fr; column-gap: 3rem; align-items: start; }
  .ft-top { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  .ft-lead { font-size: clamp(1.8rem, 3.6vw, 3.2rem); }
  .ft-book { min-height: 42px; padding: 0 1.2rem; font-size: .82rem; }
  .ft-cols { grid-template-columns: .8fr .85fr 1.4fr 1.15fr; column-gap: 1.5rem; margin-top: .4rem; padding-top: 0; border-top: 0; }
  .ft-cols > .ft-col.ft-col { order: 0; }
  /* (5 Nov) the four columns get the whole width under "Pele, com intenção." + the button, so the e-mail and address fit */
  .ft-inner { grid-template-columns: 1fr; }
  .ft-top { flex-direction: row; align-items: center; justify-content: space-between; }
  .ft-cols { margin-top: 1.6rem; }
  .ft-col { font-size: var(--step--1); gap: .5rem; }
  .ft-col h2 { font-size: 1.15rem; }
  .ft-hours { grid-column: auto; flex-direction: column; }
  .ft-hours h2 { margin: 0 0 .1rem; }
  .ft-hours dl { flex-direction: column; gap: .3rem; }
  .ft-hours dl div { flex-direction: column; gap: 0; }
  .ft-base { grid-column: 1 / -1; margin-top: 3.5rem; padding: 1rem 0; font-size: .78rem; }
  .ft-word { padding: .5rem 32px 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-glow, .ft-line, .ft-top, .ft-col, .ft-base, .ft-word-in { transition: none !important; }
  .ft-glow, .ft-word-glaze::before { animation: none !important; }
  .ft .ft-glow { opacity: 1; transform: none; }
  .ft .ft-line, .ft .ft-top, .ft .ft-col, .ft .ft-base, .ft .ft-word-in { opacity: 1; transform: none; }
}

/* "← Voltar / Back" at the top of Treatments, the questionnaire and My bookings (5 Nov 2026) */
/* it sits in the top-left corner beside the page title, so it takes no extra height (every step still fits one screen) */
main:has(> .page-back) { position: relative; }
.page-back { position: absolute; z-index: 2; left: 18px; top: .35rem; margin: 0; }
.page-back .text-link { font-size: .85rem; min-height: 44px; padding: 0; }
@media (min-width: 48rem) { .page-back { left: 32px; top: .9rem; } }
.page-back.page-back--above { position: static; padding: .2rem 18px 0; margin: 0 0 -.6rem; }

/* ===== The wave card (chosen by Yasmin 5 Nov 2026: "2 · Voo gigante" on "Claro", js/wavecard.js) =====
   Booking confirmation (.b-done) and the "Olá" card (.a-hello): white with the footer's soft dawn glow; at the top a little
   chrome wave flies in scattering chrome confetti, then becomes a giant mirror-chrome wave cut off by the top and right
   edges; then (confirmation) a chrome tick draws itself in a chrome ring with the same confetti bursting out; then the words. */
.bw-card { --bloom-card: #FFFFFF; --bloom-solid: #FFFFFF; --bloom-ink: #2E2520; --bloom-soft: #5C5650; --wd: 3.35s;
  background: radial-gradient(60% 30% at 15% 60%, rgba(185, 131, 113, .26), transparent 70%), radial-gradient(55% 30% at 55% 66%, rgba(240, 194, 116, .3), transparent 70%),
              radial-gradient(55% 30% at 95% 58%, rgba(154, 162, 122, .24), transparent 70%), linear-gradient(#FFFFFF, #FAF6F0) !important;
  display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start; gap: .2rem; padding: 0 1.25rem 1.3rem !important;
  box-shadow: 0 1px 0 rgba(46, 37, 32, .05), 0 18px 40px -26px rgba(46, 37, 32, .35); }
.bw-card.a-hello { --wd: 2.9s; }
.bw-card .bloom-art, .bw-card .bloom-heart, .bw-card .bloom-flakes { display: none !important; }
.bw-card .b-title, .bw-card p { text-shadow: none; }
/* the drawing: full width at the top; on short screens it gets smaller (never below 6rem), so the words always fit */
.bw-art { order: -1; flex: 0 1 auto; width: calc(100% + 2.5rem); max-width: none; aspect-ratio: 400 / 240; min-height: 6.5rem; margin: 0 -1.25rem .55rem; display: block; overflow: visible; }
/* the card takes the height it needs (drawing + words), so the words are never cut off */
.b-done.bw-card, .a-hello.bw-card { aspect-ratio: auto; min-height: 0; height: auto; }
.bw-card .b-title { margin-top: 0; font-size: clamp(1.55rem, 6.4vw, 1.9rem); }
.bw-card .b-done-what { font-size: 1.05rem; margin-top: .2rem; }
.bw-card .b-done-when { font-size: .9rem; }
.bw-card .b-done-sent { font-size: .74rem; margin-top: .45rem; }
.welcome-note { margin: -.7rem 0 0; font-size: .8rem; line-height: 1.4; font-weight: 500; letter-spacing: .01em; }
.welcome-addr { display: inline-flex; align-items: flex-start; gap: .45rem; margin-top: -.45rem; font-size: .82rem; line-height: 1.4; color: inherit; text-decoration: none; opacity: .9; text-align: left; }
.welcome-addr:hover span { text-decoration: underline; text-underline-offset: 3px; }
.welcome-addr .pin { width: 1.05rem; height: 1.05rem; flex: none; margin-top: .1rem; }
.b-done-early { margin: .45rem auto 0; font-size: .76rem; line-height: 1.4; color: var(--ink); max-width: 32ch; }
.b-done-early strong { font-weight: 600; }
.a-early { margin-top: .35rem; }
.bw-card .a-hello-actions .button:first-child { background: #2E2520; color: #FAF6F0; border-color: #2E2520; }
/* flight */
.bw-sc { opacity: 0; animation: bw-sc 2.8s cubic-bezier(.2, .6, .3, 1) var(--d) forwards; }
@keyframes bw-sc { 0% { opacity: 0; transform: scale(.3); } 8% { opacity: 1; transform: scale(1.15); } 60% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.8); } }
/* (5 Nov) no drop-shadow on the flying wave: redrawing a blurred shadow while it grows 16x made phones stutter */
.bw-sc { will-change: transform, opacity; }
.bw-grow { animation: bw-grow 1s cubic-bezier(.3, 0, .2, 1) 1.9s forwards; }
@keyframes bw-grow { to { transform: scale(var(--to, 16.775)); } }
.bw-echo { opacity: 0; animation: bw-in 1.2s ease 2.8s forwards; }
@keyframes bw-in { to { opacity: .7; } }
/* the chrome tick */
.bw-card .b-done-mark { width: 2.6rem; height: 2.6rem; background: none; border-radius: 0; box-shadow: none; color: inherit; animation: none; margin-bottom: .35rem; }
.bw-card .b-done-mark::before { display: none; }
.bw-card .b-done-mark svg { width: 100%; height: 100%; overflow: visible; }
.bw-ring, .bw-card .b-done-mark .bw-chk { fill: none; stroke: url(#bw-chrome); vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.bw-ring { stroke-width: 1.2px; animation: bw-draw .9s ease 2.95s forwards; }
.bw-card .b-done-mark .bw-chk { stroke-width: 2.6px; animation: bw-draw .45s cubic-bezier(.5, 0, .3, 1) 3.45s forwards; }
@keyframes bw-draw { to { stroke-dashoffset: 0; } }
/* the same confetti bursting out of the tick */
.bw-card > .bw-burst { position: absolute !important; inset: 0; z-index: 3 !important; pointer-events: none; }
/* each piece sprinkles out around the tick, then drifts down slowly, turning, and fades (like the plane's confetti) */
.bw-cf { position: absolute; left: var(--cx); top: var(--cy); width: 4.5px; height: 7.5px; border-radius: 1px; opacity: 0;
  animation: bw-burst var(--t) cubic-bezier(.2, .6, .3, 1) var(--d) both; will-change: transform, opacity; }
.bw-cf--c { width: 5px; height: 5px; border-radius: 50%; }
.bw-cf--s { width: 9px; height: 9px; border-radius: 0; clip-path: polygon(50% 0, 64% 36%, 100% 50%, 64% 64%, 50% 100%, 36% 64%, 0 50%, 36% 36%); }
.bw-cf--f { width: 2px; height: 2px; border-radius: 50%; }
@keyframes bw-burst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 8% { opacity: 1; transform: translate(calc(-50% + var(--dx) * .5), calc(-50% + var(--dy) * .5)) scale(1.15); }
  30% { opacity: 1; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(calc(var(--r) * .4)) scale(1); } 65% { opacity: .9; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx) + var(--sw)), calc(-50% + var(--dy) + var(--fall))) rotate(var(--r)) scale(.8); } }
@keyframes bw-shine { from { filter: brightness(.85); } to { filter: brightness(1.4); } }
/* the words rise in after the drawing */
.bw-play > :not(.bw-art):not(.bw-burst):not(.b-done-mark) { opacity: 0; animation: bw-rise 1s cubic-bezier(.22, 1, .36, 1) var(--wd) both; }
@keyframes bw-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bw-card:not(.bw-play) .b-done-mark .bw-ring, .bw-card:not(.bw-play) .b-done-mark .bw-chk { animation: none; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .bw-card *, .bw-card { animation: none !important; } .bw-card .bw-ring, .bw-card .bw-chk { stroke-dashoffset: 0; } .bw-burst { display: none; } }

/* Titles that receive focus after each step (for screen readers) never show a box around them (Yasmin 5 Nov);
   buttons, links and boxes keep their keyboard outline. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible, h1:focus, h2:focus, h3:focus { outline: none; }
/* the wave card's drawing always keeps its shape; if the confirmation must get shorter to fit the screen, the whole card gets narrower */
.bw-art { flex: none; }
.b-done.bw-card, .a-hello.bw-card { max-width: 24rem; }

/* "Olá" card: the button is only as wide as its words (Yasmin 5 Nov) */
.bw-card .a-hello-actions { width: auto; justify-content: center; margin-top: .55rem; }
.bw-card .a-hello-actions .button { flex: none; min-height: 40px; padding: 0 1.2rem; font-size: .74rem; }
/* My bookings when signed in (Yasmin 5 Nov): no outline around everything; the Olá card, the booking policy, the upcoming
   bookings and past treatments are each their own soft box, with no outlines and no separating lines */
#account.is-signed, .page-hero--app + .booking #account.is-signed { border: 0; padding: 0; border-radius: 0; gap: 1rem; }
#account.is-signed .a-rules { background: #FAF6F0; border: 0; border-radius: 22px; padding: 1rem 1.2rem; }
#account.is-signed .a-section { border-top: 0; background: #FAF6F0; border-radius: 22px; padding: 1.1rem 1rem 1.2rem; }
#account.is-signed .a-list li { background: #FFFFFF; }
#account.is-signed .a-late { border-top: 0; padding-top: .2rem; }
#account.is-signed .a-end { padding-top: .3rem; }

/* Consultation code (peels and microneedling, 5 Nov 2026) */
.b-code-input { font-size: 1.35rem; letter-spacing: .22em; text-transform: uppercase; text-align: center; font-variant-numeric: tabular-nums; }
.b-code-input::placeholder { color: #C9C3BB; letter-spacing: .22em; }
.b-code-tip { margin-top: -.3rem; font-size: .78rem; }
.b-code-help { display: grid; gap: .3rem; justify-items: center; text-align: center; }
.b-code-ok { margin: 0; font-size: .9rem; color: #4E5332; font-weight: 500; }
.a-code { margin: 0; text-align: center; font-size: .84rem; color: var(--ink-soft); line-height: 1.5; }
.a-code strong { color: #2E2520; letter-spacing: .12em; font-weight: 600; }

/* Olá card (Yasmin 5 Nov): as wide as the boxes under it, with the whole wave centred */
.a-hello.bw-card.bw-full { max-width: none; }
/* the booking confirmation (5 Nov): wide and short, the whole wave across the top */
.b-done.bw-card.bw-full { max-width: 30rem; }
.b-done.bw-full .bw-art { width: 100%; margin: 1.1rem 0 .3rem; }
.bw-full .bw-art { aspect-ratio: 400 / 200; max-height: none; }
/* Booking confirmation (Yasmin 5 Nov): no outline box around it; one compact "See my bookings" button */
.booking-card.is-done, .page-hero--app + .booking .booking-card.is-done { border: 0; padding-inline: 0; padding-top: .25rem; gap: .7rem; }
.b-actions--one { justify-content: center; }
.b-actions--one .button { flex: none; width: auto; min-height: 42px; padding: 0 1.4rem; font-size: .78rem; }
.b-code-help .button--quiet { min-height: 42px; padding: 0 1.2rem; font-size: .76rem; margin-bottom: .2rem; }
.b-code-lead { margin: 0; text-align: center; font-size: .9rem; }
.b-codeform .field { margin: 0; }
.b-codeform .field > label { text-align: center; }
.b-code-row { display: flex; gap: .5rem; align-items: stretch; }
.b-code-row .b-code-input { flex: 1; min-width: 0; font-size: 1.15rem; padding-inline: .5rem; }
.b-code-row .button { flex: none; min-height: 48px; padding: 0 1.1rem; font-size: .76rem; }
.b-codeform .error:empty { display: none; }

/* ===== Light photo on the welcome screen (5 Nov 2026: Yasmin's test photo, cream wall, white tops) =====
   Words, buttons and the top bar are espresso over the light photo, so everything stays readable.
   Phones and narrow screens: the tall photo fills the screen (wall extended upwards, faces in full).
   Wider screens: the words on a cream panel the colour of the wall, the whole photo on the right half. */
.welcome--light { --on-photo: #2E2520; color: #2E2520; background: #F8F7F3; }
.welcome--light .welcome-media picture, .welcome--light .welcome-media img { display: block; width: 100%; height: 100%; }
.welcome--light .welcome-media img { object-fit: cover; object-position: center 62%; }
.welcome--light .welcome-shade { display: none; }
/* phones and narrow screens: the words sit on the cream wall above the faces */
.welcome--light { justify-content: flex-start; }
.welcome--light .welcome-inner { padding-block: clamp(6.5rem, 15svh, 9rem) 2rem; gap: clamp(1rem, 3svh, 1.75rem); }
@media (max-width: 59.99rem), (max-aspect-ratio: 5/4) {
  .welcome--light .welcome-actions { flex-wrap: nowrap; gap: .5rem; }
  .welcome--light .welcome-actions .button { flex: 1 1 0; min-width: 0; padding-inline: .6rem; font-size: .7rem; letter-spacing: .06em; min-height: 42px; white-space: nowrap; }
  .welcome--light .welcome-lede { font-size: .95rem; }
}
/* shorter phones (like the iPhone SE): the photo sits a little lower so the buttons never touch the hair */
@media (max-width: 40rem) and (min-aspect-ratio: 1/2) { .welcome--light .welcome-media img { object-position: center 28%; } }
.welcome--light .statement { color: #2E2520; }
.welcome--light .button--light { background: #2E2520; color: #FAF6F0; border-color: #2E2520; }
.welcome--light .button--ghost-light { color: #2E2520; border-color: rgba(46, 37, 32, .55); background: rgba(250, 246, 240, .55); }
.welcome--light .button--ghost-light:hover { background: #2E2520; color: #FAF6F0; border-color: #2E2520; }
@media (min-width: 60rem) and (min-aspect-ratio: 5/4) {
  /* computers: a different, wide photo fills the whole screen; the words sit on its white space on the left */
  .welcome--light .welcome-media { left: 0; width: 100%; }
  .welcome--light .welcome-inner { padding-block: 8rem 3rem; }
  .welcome--light .welcome-media img { object-position: 60% 20%; }
  /* the photo melts into the cream panel at its left edge */
  .welcome--light .welcome-media::after { display: none; }
  .welcome--light .welcome-shade { display: none; }
  .welcome--light .welcome-inner { max-width: none; margin: 0; width: 46%; padding-left: max(32px, 4.5vw); padding-right: 2vw; }
  /* computers (Yasmin 5 Nov): "com intenção." on its own line under "Pele," */
  .welcome--light.welcome--light .statement { font-size: min(5.2vw, 7.6rem); white-space: normal; line-height: 1.02; }
  .welcome--light.welcome--light .statement em { display: block; white-space: nowrap; }
  /* the words sit lower (Yasmin 5 Nov: not level with the nose in the photo) */
  .welcome--light { justify-content: flex-end; }
  .welcome--light.welcome--light .welcome-inner { padding-bottom: 11vh; }
}
/* the top bar over the light photo: dark logo, lines and arrow, espresso "Entrar" */
.site-header--over.nh.nh-light { color: #171513 !important; }
.site-header--over.nh.nh-light .nh-logo svg path { fill: #171513; }
.site-header--over.nh.nh-light .nh-lines i { background: #171513; }
.site-header--over.nh.nh-light .nh-chev path { stroke: #171513; }
.site-header--over.nh.nh-light .nh-signin { background: #2E2520 !important; color: #FFFFFF !important; }

/* "Pele, com intenção." on one line, with "com intenção." in a lighter, finer italic (Yasmin 5 Nov) */
.welcome--light .statement { white-space: nowrap; font-size: min(var(--step-hero), 9.4vw); }
.welcome--light .statement em { font-family: "Instrument Serif", var(--font-display); font-weight: 400; font-size: 1.12em; letter-spacing: -0.005em; }
/* phones (option A, chosen 5 Nov): the photo starts at the top; js/site.js moves it down just enough that the faces sit right under the words */
@media (max-width: 59.99rem), (max-aspect-ratio: 5/4) { .welcome--light .hero-a img { object-position: center top; } }

/* Phones (Yasmin 5 Nov: "paragraphs too big, too much on the screen"): smaller, calmer reading text with a little more air at the sides.
   Kept at the end of the file so it wins over the page-specific sizes above. */
@media (max-width: 40rem) {
  .section .intro, .stack p, .page-hero .intro, .t-head .intro, .t-desc, .unsure p, .why { font-size: .9rem; line-height: 1.6; }
  .section > .column, .page-hero .column { padding-inline: 28px; }
  .stack h3 { font-size: 1.12rem; }
  .langs-note { font-size: 1.02rem; line-height: 1.4; }
}

/* the booking confirmation: the page title and opening hours step aside so the card + button fit on one screen (5 Nov) */
.is-booked .page-hero--app { display: none; }
.is-booked .page-hero--app + .booking { padding-top: 1rem; }
/* short phones (iPhone SE): the confirmation card's words a little tighter so the card and its button fit on one screen */
@media (max-height: 640px) {
  .is-booked .page-hero--app + .booking { padding-top: .5rem; }
  .bw-card.b-done { padding-bottom: 1rem; }
  .bw-card .b-done-mark { width: 2.1rem; height: 2.1rem; margin-bottom: .1rem; }
  .bw-card.b-done .b-title { font-size: 1.4rem; }
  .bw-card .b-done-what { font-size: .95rem; margin-top: 0; }
  .bw-card .b-done-when { font-size: .82rem; }
  .bw-card .b-done-sent { font-size: .68rem; margin-top: .25rem; }
  .bw-card .b-done-early { font-size: .7rem; margin-top: .3rem; }
  .bw-card + .b-actions--one, .is-booked .b-actions--one { margin-top: .6rem; }
}

/* ---- The wave card, rebuilt 5 Nov for smoothness + drama (js/wavecard.js, class bw-v2): every moving part is its own layer
   that only slides, turns, scales or fades. Faster: the words are in by ~2.3 s (was ~4.3 s). ---- */
.bw-v2.bw-card { --wd: 1.65s; }
.bw-v2.bw-card.a-hello { --wd: 1.5s; }
.bw-stage { position: relative; }
.bw-stage > svg, .bw-stage > div { position: absolute; inset: 0; width: 100%; height: 100%; }
.bw-stage svg { display: block; overflow: visible; }
.bw-flier { transform-origin: 50% 48%; will-change: transform; }
.bw-flier.is-landed, .bw-card:not(.bw-play) .bw-flier { will-change: auto; }
.bw-play .bw-echo2 { opacity: 0; animation: bw-fadein .6s ease 1.2s forwards; }
.bw-echo2 { opacity: .7; }
@keyframes bw-fadein { to { opacity: .7; } }
/* the landing: a soft flash of light behind the wave and a fine ring of light rippling out */
.bw-glow { background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(232, 211, 169, .45) 45%, transparent 75%); opacity: 0; transform: scale(.4);
  animation: bw-flash 1s cubic-bezier(.2, .7, .3, 1) 1.08s forwards; }
@keyframes bw-flash { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.35); } }
.bw-stage > .bw-shock { inset: auto; left: 50%; top: 48%; width: 46%; height: auto; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid #C9CDD3;
  box-shadow: 0 0 10px rgba(201, 205, 211, .7), inset 0 0 8px rgba(255, 255, 255, .8); opacity: 0; transform: translate(-50%, -50%) scale(.3);
  animation: bw-shock .9s cubic-bezier(.15, .7, .3, 1) 1.1s forwards; }
@keyframes bw-shock { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 15% { opacity: .95; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.4); } }
/* a band of light sweeps across the chrome wave as it lands */
.bw-sheen { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; overflow: hidden; pointer-events: none; }
.bw-sheen i { position: absolute; top: -10%; bottom: -10%; left: 0; width: 28%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .95) 50%, transparent);
  transform: translateX(-120%) skewX(-16deg); opacity: 0; }
.bw-play .bw-sheen i { animation: bw-sweep .85s cubic-bezier(.4, 0, .2, 1) 1.15s forwards; }
@keyframes bw-sweep { 0% { opacity: 1; transform: translateX(-120%) skewX(-16deg); } 100% { opacity: 1; transform: translateX(420%) skewX(-16deg); } }
/* confetti: scattered behind the flight, then exploding out of the landing */
.bw-cf2 { position: absolute; width: 4.5px; height: 7.5px; border-radius: 1px; opacity: 0; will-change: transform, opacity; }
.bw-cf2.bw-cf--c { width: 5px; height: 5px; border-radius: 50%; }
.bw-cf2.bw-cf--s { width: 9px; height: 9px; border-radius: 0; clip-path: polygon(50% 0, 64% 36%, 100% 50%, 64% 64%, 50% 100%, 36% 64%, 0 50%, 36% 36%); }
.bw-cf2.bw-cf--f { width: 2px; height: 2px; border-radius: 50%; }
.bw-fall { animation: bw-fall 1.7s cubic-bezier(.2, .6, .3, 1) var(--d) forwards; }
@keyframes bw-fall { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 10% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } 60% { opacity: .9; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)) scale(.8); } }
.bw-pop { animation: bw-pop 2.1s cubic-bezier(.15, .75, .3, 1) var(--d) forwards; }
@keyframes bw-pop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 8% { opacity: 1; transform: translate(calc(-50% + var(--dx) * .35), calc(-50% + var(--dy) * .1 - 14px)) scale(1.2); }
  45% { opacity: 1; transform: translate(calc(-50% + var(--dx) * .9), calc(-50% + var(--dy) * .5 - 10px)) rotate(calc(var(--r) * .5)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 30px)) rotate(var(--r)) scale(.8); } }
/* the tick comes sooner */
.bw-v2 .bw-ring { animation: bw-draw .5s ease 1.4s forwards; }
.bw-v2.bw-card .b-done-mark .bw-chk { animation: bw-draw .3s cubic-bezier(.5, 0, .3, 1) 1.78s forwards; }
.bw-v2:not(.bw-play) .bw-ring, .bw-v2:not(.bw-play) .b-done-mark .bw-chk { animation: none; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .bw-stage .bw-glow, .bw-stage .bw-shock, .bw-stage .bw-bits, .bw-sheen { display: none; } }

/* ---- Yasmin's pointers, 5 Nov (evening) ---- */
/* the top bar: plain white everywhere, no shadow streak underneath */
.site-header, .site-header.is-scrolled, .site-header--over.nh.nh-full::before { box-shadow: none !important; }
/* no dotted demo outlines: the "photo" labels on the treatment cards are hidden, the demo notes get a plain hairline */
.t-photo span { display: none; }
.demo-banner, .b-demo { border-style: solid; border-color: var(--line); }
.b-day--test { border-style: solid; }
/* opening hours: fine lines between the three (instead of dots) */
.hours-line > span + span::before { content: none; }
.hours-line > span + span { border-left: 1px solid var(--line); }
.hours-line > span { padding: 0 .9rem; }
@media (max-width: 40rem) { .hours-line { column-gap: 0; } .hours-line > span { padding: .05rem .85rem; } }
/* Treatments: the intro the same calm size and width as the hours above it, so the top lines up */
.page-hero .intro { max-width: 24rem; }
@media (max-width: 40rem) { .page-hero .intro { font-size: .84rem; max-width: 20.5rem; } }
/* the booking box: the Aurora dawn colours (like the booked card) with a soft shadow, so it lifts off the page */
.booking-card:not(.is-done) { border: 0 !important;
  background: radial-gradient(60% 260px at 8% 0%, rgba(185, 131, 113, .2), transparent 70%), radial-gradient(55% 240px at 55% -40px, rgba(240, 194, 116, .24), transparent 70%),
              radial-gradient(60% 260px at 100% 0%, rgba(154, 162, 122, .2), transparent 70%),
              radial-gradient(70% 300px at 12% 100%, rgba(185, 131, 113, .18), transparent 70%), radial-gradient(60% 280px at 55% 105%, rgba(240, 194, 116, .22), transparent 70%),
              radial-gradient(60% 300px at 95% 100%, rgba(154, 162, 122, .18), transparent 70%), linear-gradient(#FFFFFF, #FBF7F1);
  box-shadow: 0 1px 0 rgba(46, 37, 32, .04), 0 22px 44px -26px rgba(46, 37, 32, .32), 0 6px 14px -10px rgba(46, 37, 32, .12); }
.booking-card:not(.is-done) .q-option, .booking-card:not(.is-done) .b-option { background: #FFFFFF; }
/* "Not sure what to book?": Aurora colours, a chrome heading and a soft shadow */
.unsure-card { background: radial-gradient(60% 40% at 10% 100%, rgba(185, 131, 113, .22), transparent 70%), radial-gradient(55% 40% at 52% 105%, rgba(240, 194, 116, .28), transparent 70%),
              radial-gradient(55% 40% at 95% 100%, rgba(154, 162, 122, .22), transparent 70%), linear-gradient(#FFFFFF, #FAF5EE);
  box-shadow: 0 1px 0 rgba(46, 37, 32, .04), 0 22px 44px -26px rgba(46, 37, 32, .3); }
/* the same deep chrome as "Pele, com intenção." in the footer, with the same gleam gliding through */
.unsure-card h2 { background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .6) 48%, rgba(255, 255, 255, .15) 51%, transparent 55%) 0% 0 / 150% 100% repeat-x,
    linear-gradient(180deg, #15161A 0%, #3E4148 22%, #9A9EA6 42%, #5A5D64 55%, #2A2C31 68%, #6E727A 84%, #17181C 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.unsure-card h2 em { -webkit-text-fill-color: transparent; }
@media (prefers-reduced-motion: no-preference) { .unsure-card h2 { animation: hd-shine 3.6s linear infinite; } }
/* (5 Nov) the top edge more defined: the dawn colours along the top too, a fine warm edge and a soft shadow all round */
.unsure-card { background:
    radial-gradient(55% 55% at 8% 0%, rgba(185, 131, 113, .28), transparent 70%), radial-gradient(50% 50% at 52% -8%, rgba(240, 194, 116, .32), transparent 70%),
    radial-gradient(55% 55% at 96% 0%, rgba(154, 162, 122, .28), transparent 70%),
    radial-gradient(60% 40% at 10% 100%, rgba(185, 131, 113, .22), transparent 70%), radial-gradient(55% 40% at 52% 105%, rgba(240, 194, 116, .28), transparent 70%),
    radial-gradient(55% 40% at 95% 100%, rgba(154, 162, 122, .22), transparent 70%), linear-gradient(#FFFDFA, #FAF5EE);
  border: 1px solid rgba(185, 150, 110, .22);
  box-shadow: 0 -6px 18px -12px rgba(46, 37, 32, .14), 0 1px 0 rgba(46, 37, 32, .04), 0 22px 44px -26px rgba(46, 37, 32, .3); }
/* My bookings when signed in: no box or shadow behind the four boxes; each is its own box (Yasmin 5 Nov) */
#account.is-signed.booking-card { background: none !important; box-shadow: none !important; border: 0 !important; }

/* (5 Nov) the top bar is pinned to the top of the screen on every page (not "sticky"), so a bounce at the bottom of a
   page can never push it up; the page starts just below it (js/site.js measures the bar into --hdr). The footer is white,
   like the top bar, so there is no colour band between them. */
.site-header:not(.site-header--over) { position: fixed; top: 0; left: 0; right: 0; }
body { padding-top: var(--hdr, 0px); }
html { scroll-padding-top: var(--hdr, 0px); }
/* very small phones (iPhone SE): the hours line a little more compact so it never runs wider than the screen */
@media (max-width: 22.5rem) { .hours-line { font-size: .68rem; } .hours-line > span { padding: .05rem .6rem; } .page-hero .column { padding-inline: 16px; } }

/* Footer on iPad/computers (Yasmin 5 Nov): Contact and Hours line up row by row. Each day on one line, the day in bold with
   its time beside it; both columns use the same line height and gap, so Mon–Fri sits level with the e-mail, Saturday with
   Instagram, Sundays with WhatsApp, and "By appointment only" (now under the times) with the address. */
@media (min-width: 48rem) {
  .ft .ft-cols > .ft-col { gap: .5rem; line-height: 1.35; }
  .ft .ft-cols .ft-hours dl { display: flex; flex-direction: column; gap: .5rem; }
  .ft .ft-cols .ft-hours dl div { display: flex; flex-direction: row; flex-wrap: wrap; column-gap: .45rem; }
  .ft .ft-hours dt { font-weight: 600; color: var(--fink); padding-right: 0; }
  .ft .ft-hours dd { color: var(--fsoft); }
  .ft .ft-note { margin: 0; color: var(--fsoft); }
  .ft .ft-contact a { line-height: 1.35; }
}
/* phones: "By appointment only" sits under the times now, with a little room above */
@media (max-width: 47.99rem) { .ft .ft-note { margin: .25rem 0 0; } }
/* iPad-sized screens (up to ~1150px): the Hours column a little wider and every column the same size, so each day + time
   stays on one line and the rows keep lining up exactly */
@media (min-width: 48rem) and (max-width: 71.99rem) {
  .ft .ft-cols { grid-template-columns: .72fr .78fr 1.3fr 1.42fr; column-gap: 1.1rem; }
  .ft .ft-cols > .ft-col { font-size: .76rem; }
  .ft .ft-hours dl div { flex-wrap: nowrap; white-space: nowrap; }
}

/* ---- "Coming soon" mode (js/site.js, html.is-soon): blurred parts with a floating "Em breve" card, and a calm note
   instead of booking / accounts. ---- */
.soon-zone { position: relative; }
.soon-blur { filter: blur(10px); opacity: .8; pointer-events: none; user-select: none; -webkit-user-select: none; }
.soon-tag { position: sticky; top: calc(var(--hdr, 0px) + 1.25rem); z-index: 6; height: 0; display: flex; justify-content: center; align-items: flex-start; overflow: visible; pointer-events: none; }
.soon-card { margin-top: 1.5rem; /* (5 Nov) starts where the blur starts, never over the plain text above it */ text-align: center; padding: 1.15rem 1.8rem 1.05rem; border-radius: 24px; max-width: min(20rem, 86vw);
  background: radial-gradient(60% 60% at 10% 100%, rgba(185, 131, 113, .22), transparent 70%), radial-gradient(55% 60% at 52% 110%, rgba(240, 194, 116, .3), transparent 70%),
              radial-gradient(55% 60% at 95% 100%, rgba(154, 162, 122, .22), transparent 70%), linear-gradient(#FFFFFF, #FBF7F1);
  border: 1px solid rgba(185, 150, 110, .22); box-shadow: 0 1px 0 rgba(46, 37, 32, .04), 0 22px 44px -24px rgba(46, 37, 32, .35); }
.soon-title { margin: 0; font-family: var(--font-display); font-size: clamp(1.7rem, 6vw, 2.2rem); line-height: 1.1;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .6) 48%, rgba(255, 255, 255, .15) 51%, transparent 55%) 0% 0 / 150% 100% repeat-x,
    linear-gradient(180deg, #15161A 0%, #3E4148 22%, #9A9EA6 42%, #5A5D64 55%, #2A2C31 68%, #6E727A 84%, #17181C 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #3E4148; }
.soon-title em { -webkit-text-fill-color: transparent; }
@media (prefers-reduced-motion: no-preference) { .soon-title { animation: hd-shine 3.6s linear infinite; } }
.soon-line { margin: .35rem 0 0; font-size: .85rem; color: var(--ink-soft); }
.soon-dialog { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1.25rem; background: rgba(46, 37, 32, .28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.soon-dialog[hidden] { display: none; }
.soon-sheet { position: relative; width: min(24rem, 100%); text-align: center; display: grid; gap: .8rem; justify-items: center; padding: 2rem 1.5rem 1.6rem; border-radius: 28px;
  background: radial-gradient(60% 40% at 10% 100%, rgba(185, 131, 113, .22), transparent 70%), radial-gradient(55% 40% at 52% 105%, rgba(240, 194, 116, .28), transparent 70%),
              radial-gradient(55% 40% at 95% 100%, rgba(154, 162, 122, .22), transparent 70%), linear-gradient(#FFFFFF, #FAF5EE);
  box-shadow: 0 30px 60px -30px rgba(46, 37, 32, .5); }
.soon-sheet p { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.soon-sheet .soon-title { font-size: 2rem; }
.soon-x { position: absolute; right: .8rem; top: .6rem; border: 0; background: none; font-size: 1.6rem; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: .3rem; }
html.soon-open { overflow: hidden; }
.soon-hide { filter: blur(5px); user-select: none; -webkit-user-select: none; }
.soon-off { pointer-events: none; cursor: default; }
a[hidden] { display: none !important; }
/* (5 Nov) jumping to a home-page section from the menu: the page stops where the photo has fully passed under the top bar,
   so the bar is white (never the photo / hair showing through it), and it turns white at once, without a fade */
#filosofia, #sobre, #como-funciona { scroll-margin-top: 40px; }
html.jumping .site-header, html.jumping .site-header *, html.jumping .site-header::before, html.jumping .site-header::after { transition: none !important; }
/* home page: its top bar floats over the page, so the card keeps clear of it there */
#sobre .soon-tag { top: 6.5rem; }