/* Built by tools/make-prod.py from the files named below. Do not edit. */
/* ---- fonts.css ---- */
/* Fonts served from this site (no request to Google). Fetched from Google Fonts on 5 Oct 2026 (Fraunces again on 12 Oct 2026: 300 to 700 with the SOFT and opsz axes, for website v11),
   latin and latin-ext only. Licence: SIL Open Font License 1.1 (Fraunces, Poppins, DM Sans). */
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/DMSans-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/DMSans-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/DMSans-normal-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/DMSans-normal-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/DMSans-normal-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/DMSans-normal-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Poppins-italic-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Poppins-italic-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Poppins-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Poppins-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/Poppins-normal-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/Poppins-normal-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/Poppins-normal-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/Poppins-normal-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/Fraunces-italic-300-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/Fraunces-italic-300-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/Fraunces-normal-300-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/Fraunces-normal-300-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- tokens.css ---- */
/* Espaço Leve Alma, website v3 (site-v6/): design tokens in brand v3 (5 October 2026).
   Copied into site-v6/assets/css/tokens.css by tools/make-v6.py. Edit here, not there.
   Source: deck/assets/tokens-v3.css, BRAND.md sections 3 and 4, docs/design-system.md.

   Same token names and roles as versions four and five, so site.css, v2.css to v5.css,
   onepage.css and itacare.css keep working; tools/v6/v6.css (linked last) applies the
   fixed type system and the layout rules on top.

   Only the eight colours (plus tints of them for lines, outlines and wells, and the three
   night colours for screens). Contrast: python3 tools/contrast_v3.py */

:root {
  color-scheme: light dark;

  /* ---- The eight, always by hex ---- */
  --off-white:   #f4e7d9;
  --shell-beige: #ffd9be;
  --apricot:     #ef9e6f;
  --terracotta:  #bb764c;
  --cinnabar:    #bb6b57;
  --jalapeno:    #807b60;
  --bay-leaf:    #6b6142;
  --wine:        #663630;
  /* Night, screens only */
  --night:   #1e1a14;
  --night-2: #27221a;
  --night-3: #322b21;

  /* ---- Surfaces: light ---- */
  --paper:  var(--off-white);   /* the page */
  --shell:  var(--shell-beige); /* the light band */
  --sand:   var(--shell-beige); /* the week band */
  --raised: var(--off-white);   /* sheets that sit over the page (menu, skip link) */
  --well:   color-mix(in srgb, var(--apricot) 26%, var(--paper)); /* tint: today, a picked chip */

  /* Fields carry --on-field, one light text colour per band. */
  --clay-field:      var(--cinnabar);   /* buttons only */
  --forest-field:    var(--bay-leaf);   /* the dark band: small text allowed (5.06) */
  --terracota-field: var(--terracotta); /* titles only (2.97) */
  --salvia-field:    var(--jalapeno);   /* titles only (3.51) */
  --on-field:        var(--off-white);
  --on-field-accent: var(--off-white);  /* one text colour per band: no second light tone */
  --on-field-ink:    var(--wine);

  /* ---- Inks: one text colour, wine on the light page ---- */
  --ink:      var(--wine);
  --ink-soft: var(--wine);
  --clay-ink: var(--cinnabar);  /* the accent: links */
  --link-hover: var(--wine);
  --leaf:     var(--jalapeno);

  /* ---- Marks ---- */
  --scrim: 30 26 20;            /* night, as RGB channels: only behind words on photographs */
  --mark-clay: var(--cinnabar);
  --mark-cream: var(--off-white);
  --logo-colour: var(--cinnabar);

  --clay-soft:   var(--well);
  --line:        color-mix(in srgb, var(--apricot) 70%, transparent);
  --line-strong: var(--apricot);
  --outline:     var(--apricot);

  /* ---- Type ----
     Roca One where installed, otherwise Fraunces set soft: 700 Bold, 400 Regular. */
  --font-display: "Roca One", "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui: "Poppins", "DM Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-narrow: "DM Sans", "Poppins", system-ui, sans-serif;
  --display-weight: 700;
  --display-soft: "SOFT" 100, "WONK" 0;
  --track-t2: 0.02em;

  /* The fixed system, web sizes (BRAND.md 4, "Web sizes"). Desktop / mobile. */
  --t1:      clamp(48px, calc(22px + 4.6vw), 76px);  /* 60 to 90 / 46 to 54, line 0.9 */
  --t1-min:  clamp(46px, calc(18px + 4.4vw), 60px);  /* long lists of T1s (Itacaré) */
  --t1-sup:  26px;   /* 24 to 28 / 18 to 20 */
  --t2:      24px;   /* 24 / 23 */
  --t-label: 20px;   /* 20 / 18 */
  --t-intro: 22px;   /* 22 / 18 */
  --t-body:  18px;   /* 18 / 16 */
  --t-btn:   16px;
  --t-note:  14px;   /* the floor: nothing under 14px */

  /* Older names, mapped onto the system so nothing falls under 14px */
  --t-xs:   var(--t-note);
  --t-sm:   var(--t-note);
  --t-base: var(--t-body);
  --t-lg:   var(--t-body);
  --t-xl:   var(--t-intro);
  --t-2xl:  var(--t2);
  --t-3xl:  var(--t1);
  --t-4xl:  var(--t1);
  --t-5xl:  var(--t1);
  --t-phrase: var(--t1);

  --lh-tight: 0.9;
  --lh-head: 0.9;
  --lh-body: 1.5;
  --track-label: 0;

  /* ---- Space: one unit, three steps (1x lines on one subject, 3x before the content,
     6x a new subject) ---- */
  --u: 16px;
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  --gutter: clamp(16px, 5vw, 64px);
  --band: calc(var(--u) * 6);
  --measure: 36rem;
  --max: 1280px;

  /* ---- Shape: one box style (thin apricot line, small radius, no fill, no shadow) ---- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 12px;
  --r-pill: 999px;
  --stroke: 1.5px;
  --lift: none;
  --grain: none;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 180ms;
  --slow: 560ms;
  --drift: 26s;
}

@media (max-width: 860px) {
  :root {
    --t1-sup: 20px; --t2: 23px; --t-label: 18px; --t-intro: 18px; --t-body: 16px;
    --u: 12px;
  }
}

/* ---- Night: bay leaf taken almost to black. Text off-white, accent apricot.
   Colour bands keep their colour; photographs are never dimmed. ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: var(--night); --shell: var(--night-2); --sand: var(--night-2);
    --raised: var(--night-2);
    --well: var(--night-3);
    --ink: var(--off-white); --ink-soft: var(--off-white);
    --clay-ink: var(--apricot); --link-hover: var(--shell-beige);
    --logo-colour: var(--off-white);
    --line: color-mix(in srgb, var(--apricot) 45%, transparent);
    --line-strong: color-mix(in srgb, var(--apricot) 80%, transparent);
  }
}
:root[data-theme="dark"] {
  --paper: var(--night); --shell: var(--night-2); --sand: var(--night-2);
  --raised: var(--night-2);
  --well: var(--night-3);
  --ink: var(--off-white); --ink-soft: var(--off-white);
  --clay-ink: var(--apricot); --link-hover: var(--shell-beige);
  --logo-colour: var(--off-white);
  --line: color-mix(in srgb, var(--apricot) 45%, transparent);
  --line-strong: color-mix(in srgb, var(--apricot) 80%, transparent);
}

/* ---- fq.css ---- */
/* ============================================================
   Breath (site-v8 home pages), after frequencybreathwork.com.
   Copied to assets/css/fq.css by tools/make-breath.py. Loaded with
   tokens.css only (the brand colours); nothing from the live site's
   stylesheets, so this page stands on its own.

   The reference's manner, in the studio's colours:
   - ivory paper and a deeper sand for paired cards (off-white and a
     mix of shell beige), wine for type, night for the dark bands
   - a thin, light serif for every heading (Fraunces at weight 300,
     a little soft), a plain sans for everything small (DM Sans)
   - small radii (8px) and hairlines, never shadows on cards
   - one rhythm for every motion: four counts in, six counts out
   ============================================================ */

:root {
  --fq-paper: var(--off-white);
  --fq-sand: color-mix(in srgb, var(--shell-beige) 46%, var(--off-white));
  --fq-sand-deep: color-mix(in srgb, var(--shell-beige) 70%, var(--off-white));
  --fq-ink: var(--wine);
  --fq-ink-soft: color-mix(in srgb, var(--wine) 80%, var(--off-white));
  --fq-line: color-mix(in srgb, var(--wine) 20%, transparent);
  --fq-dark: var(--night);
  --fq-on-dark: var(--off-white);
  --fq-btn: var(--wine);
  --fq-on-btn: var(--off-white);
  --fq-serif: "Fraunces", Georgia, serif;
  --fq-sans: "DM Sans", system-ui, sans-serif;
  --fq-r: 8px;
  --fq-gutter: clamp(16px, 2.4vw, 28px);
  --fq-in: cubic-bezier(0.37, 0, 0.63, 1);
  --fq-out: cubic-bezier(0.61, 1, 0.88, 1);
  --fq-t-hero: clamp(40px, 5.6vw, 92px);
  --fq-t-1: clamp(36px, 4.4vw, 72px);
  --fq-t-2: clamp(28px, 2.8vw, 44px);
  --fq-t-3: clamp(20px, 1.6vw, 26px);
  --fq-t-body: clamp(15px, 1.05vw, 17px);
  --fq-t-small: 13px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fq-paper: var(--night);
    --fq-sand: var(--night-2);
    --fq-sand-deep: var(--night-3);
    --fq-ink: var(--off-white);
    --fq-ink-soft: color-mix(in srgb, var(--off-white) 78%, var(--night));
    --fq-line: color-mix(in srgb, var(--off-white) 18%, transparent);
    --fq-dark: #15120e;
    --fq-btn: var(--off-white);
    --fq-on-btn: var(--night);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fq-paper: var(--night); --fq-sand: var(--night-2); --fq-sand-deep: var(--night-3);
  --fq-ink: var(--off-white); --fq-ink-soft: color-mix(in srgb, var(--off-white) 78%, var(--night));
  --fq-line: color-mix(in srgb, var(--off-white) 18%, transparent);
  --fq-dark: #15120e; --fq-btn: var(--off-white); --fq-on-btn: var(--night); color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html.fq { -webkit-text-size-adjust: 100%; }
html.fq body {
  margin: 0; background: var(--fq-paper); color: var(--fq-ink-soft);
  font: 400 var(--fq-t-body)/1.55 var(--fq-sans);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
:where(.fq) img, :where(.fq) video { display: block; max-width: 100%; }
:where(.fq) a { color: inherit; }
:where(.fq) :is(h1, h2, h3), .fq-statement, .fq-foot-h, .fq-orbit-center {
  font-family: var(--fq-serif); font-weight: 300; font-variation-settings: "SOFT" 30, "WONK" 0;
  color: var(--fq-ink); letter-spacing: -0.015em; margin: 0; text-wrap: balance;
}
:where(.fq) h2 { font-size: var(--fq-t-1); line-height: 0.98; }
:where(.fq) h3 { font-size: var(--fq-t-3); line-height: 1.15; }
:where(.fq) p { margin: 0 0 1em; text-wrap: pretty; }
.fq :focus-visible { outline: 2px solid var(--cinnabar); outline-offset: 3px; }
.fq-skip { position: absolute; left: -9999px; top: 12px; z-index: 100; background: var(--fq-paper); color: var(--fq-ink); padding: 10px 14px; border-radius: var(--fq-r); }
.fq-skip:focus { left: 12px; }
.fq-wrap { width: min(100% - 2 * var(--fq-gutter), 1440px); margin-inline: auto; }

/* ---------- Buttons, tags, links ---------- */
.fq-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 28px; border-radius: var(--fq-r);
  font: 500 14px/1 var(--fq-sans); letter-spacing: 0.01em; text-decoration: none;
  transition: background-color 0.4s var(--fq-in), color 0.4s var(--fq-in), border-color 0.4s var(--fq-in);
}
.fq-btn--light { background: var(--off-white); color: var(--wine); border: 1px solid var(--off-white); }
.fq-btn--light:hover { background: transparent; color: var(--off-white); }
.fq-btn--line { color: var(--off-white); border: 1px solid color-mix(in srgb, var(--off-white) 65%, transparent); }
.fq-btn--line:hover { background: var(--off-white); color: var(--wine); }
.fq-btn--dark { background: var(--fq-btn); color: var(--fq-on-btn); border: 1px solid var(--fq-btn); }
.fq-btn--dark:hover { background: transparent; color: var(--fq-ink); }
.fq-btn--outline { color: var(--fq-ink); border: 1px solid var(--fq-line); }
.fq-btn--outline:hover { border-color: var(--fq-ink); }
.fq-btns, .fq-btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.fq-tag {
  display: inline-block; align-self: flex-start; margin: 0 0 20px; padding: 7px 12px; border-radius: 6px;
  background: color-mix(in srgb, var(--fq-paper) 75%, transparent); color: var(--fq-ink);
  font-size: var(--fq-t-small); line-height: 1;
}
.fq-card--text .fq-tag, .fq-split-lead .fq-tag { background: var(--fq-sand); }
.fq-link { font-weight: 500; text-underline-offset: 4px; }
.fq-note { font-size: 14px; color: var(--fq-ink-soft); }
.fq-note a { font-weight: 500; }

/* ---------- Header: the frosted bar of the live site, with sound, menu and Book ----------
   Over the hero video the glass is lightly tinted (night at 30%); once the page scrolls, and
   on every other page, it is deeper (66%), as on the live site, so the off-white words keep
   their contrast on any background behind them. */
.fq-head { position: fixed; inset: 14px 0 auto; z-index: 70; pointer-events: none; }
.fq-bar {
  pointer-events: auto; position: relative; margin-inline: auto;
  width: min(100% - 2 * var(--fq-gutter), 1440px); height: 72px; padding: 0 12px 0 24px;
  display: flex; align-items: center; gap: 16px; border-radius: 999px; color: var(--off-white);
  background: rgb(30 26 20 / 0.66);
  -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--off-white) 18%, transparent);
  transition: background-color 0.6s var(--fq-in);
}
.fq-head--over:not(.is-stuck) .fq-bar { background: rgb(30 26 20 / 0.3); }
.fq-logo { display: block; color: var(--off-white); }
.fq-lockup {
  display: block; width: 180px; aspect-ratio: 858.2 / 195.3; background: currentColor;
  -webkit-mask: url("/assets/logo/v3/espaco-name.svg") center / contain no-repeat;
          mask: url("/assets/logo/v3/espaco-name.svg") center / contain no-repeat;
}
.fq-bar-end { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.fq-sound, .fq-menu-btn, .fq-lang {
  font: 500 14px/1 var(--fq-sans); color: var(--off-white); background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 999px; text-decoration: none;
}
.fq-sound:hover, .fq-menu-btn:hover, .fq-lang:hover { background: rgb(244 231 217 / 0.12); }
.fq-hp { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.fq-hp-w { display: none; }
.fq-sound[aria-pressed="true"] .fq-hp-x { display: none; }
.fq-sound[aria-pressed="true"] .fq-hp-w { display: block; }
.fq-dots { display: inline-grid; gap: 3px; }
.fq-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.fq-menu-close { display: none; }
.fq-menu-btn[aria-expanded="true"] .fq-menu-open { display: none; }
.fq-menu-btn[aria-expanded="true"] .fq-menu-close { display: inline; }
.fq-book {
  display: inline-flex; align-items: center; height: 48px; padding: 0 22px; margin-left: 6px; border-radius: 999px;
  background: var(--cinnabar); color: var(--off-white); font: 500 15px/1 var(--fq-sans); text-decoration: none;
}
.fq-book:hover { background: var(--wine); }
.fq-menu {
  pointer-events: auto; position: absolute; top: 82px; right: max(var(--fq-gutter), (100% - 1440px) / 2);
  width: 248px; padding: 8px; border-radius: 18px; color: var(--off-white);
  background: rgb(30 26 20 / 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--off-white) 18%, transparent);
}
.fq-menu ul { list-style: none; margin: 0; padding: 0; }
.fq-menu ul a {
  display: block; padding: 10px 14px; border-radius: 10px; text-decoration: none;
  font: 400 17px/1.2 var(--fq-serif); font-variation-settings: "SOFT" 30; color: var(--off-white);
}
.fq-menu ul a:hover, .fq-menu ul a[aria-current="page"] { background: rgb(244 231 217 / 0.12); }
.fq-menu-foot { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 14px 6px; padding-top: 10px; border-top: 1px solid rgb(244 231 217 / 0.18); font-size: 13px; }
.fq-menu-foot a { color: color-mix(in srgb, var(--off-white) 80%, transparent); }
@media (max-width: 720px) {
  .fq-bar { height: 62px; padding: 0 6px 0 18px; }
  .fq-lockup { width: 140px; }
  .fq-sound span, .fq-book, .fq-menu-open { display: none; }
  .fq-menu-btn[aria-expanded="true"] .fq-menu-close { display: none; }
  .fq-menu { top: 70px; right: var(--fq-gutter); }
}

/* ---------- Waves: lines moved by the wind and the sea (fq.js draws them) ---------- */
[data-waves] { position: relative; }
.fq-waves { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.fq-hero .fq-waves { height: calc(100% + 16svh); z-index: 7; }
html:not(.fq-ready) .fq-waves { display: none; }

/* ---------- Hero ---------- */
.fq-hero {
  position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center;
  color: var(--off-white); overflow: visible; background: var(--night); z-index: 7;
}
.fq-hero-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.fq-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(rgb(30 26 20 / 0.42), rgb(30 26 20 / 0.28) 40%, rgb(30 26 20 / 0.5)); }
.fq-hero-copy { position: relative; z-index: 8; padding: 120px var(--fq-gutter) 80px; max-width: 980px; }
.fq-eyebrow { font: 400 13px/1 var(--fq-serif); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 18px; }
.fq-rotate { display: inline-block; min-width: 1ch; }
.fq-hero h1 {
  color: var(--off-white); font-size: var(--fq-t-hero); line-height: 0.92; letter-spacing: -0.01em;
  text-transform: uppercase; font-variation-settings: "SOFT" 0, "WONK" 0; font-weight: 300;
}
.fq-hero h1 span { display: block; }
.fq-hero-sub { max-width: 42ch; margin: 22px auto 28px; color: color-mix(in srgb, var(--off-white) 88%, transparent); }
.fq-btns { justify-content: center; }
.fq-hero .fq-btn { min-width: 170px; }

/* ---------- Sand: paired cards, the week, ways, classes ---------- */
.fq-sand { background: var(--fq-sand); padding: 18svh 0 clamp(96px, 10vw, 160px); position: relative; z-index: 6; }
.fq-paper { background: var(--fq-paper); padding: clamp(80px, 9vw, 140px) 0; position: relative; z-index: 6; }
.fq-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(12px, 1.2vw, 20px); }
.fq-card { position: relative; border-radius: var(--fq-r); overflow: hidden; }
.fq-card--text, .fq-card--sand { padding: clamp(28px, 3.2vw, 56px); display: flex; flex-direction: column; justify-content: flex-end; }
.fq-card--text { background: var(--fq-paper); }
.fq-card--sand { background: var(--fq-sand); }
.fq-card--text h2, .fq-card--sand h2 { font-size: var(--fq-t-2); margin-bottom: 24px; }
.fq-media { position: relative; overflow: hidden; border-radius: var(--fq-r); background: var(--fq-sand-deep); }
.fq-media img { width: 100%; height: 100%; object-fit: cover; }
.fq-media--tall { height: 100%; min-height: clamp(420px, 44vw, 720px); }
.fq-float {
  position: absolute; right: 20px; bottom: 20px; width: min(300px, calc(100% - 40px));
  padding: 16px 18px; border-radius: var(--fq-r); background: var(--fq-paper); color: var(--fq-ink-soft);
  font-size: 13px; box-shadow: 0 0 0 1px var(--fq-line);
}
.fq-float--top { top: 20px; bottom: auto; }
.fq-float p { margin: 0; }
.fq-float-h { display: flex; align-items: center; gap: 8px; font: 400 16px/1.2 var(--fq-serif); color: var(--fq-ink); margin-bottom: 6px !important; }
.fq-float-h svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; }

.fq-rail { margin: 0 0 20px; border-top: 1px solid var(--fq-line); }
.fq-rail .day {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--fq-line); text-decoration: none; color: var(--fq-ink);
}
.fq-rail .day b { font-weight: 500; font-size: 13px; }
.fq-rail .day .what { font: 400 18px/1.2 var(--fq-serif); }
.fq-rail .day .when { font-size: 13px; color: var(--fq-ink-soft); text-align: right; }
.fq-rail a.day:hover .what { text-decoration: underline; text-underline-offset: 4px; }
.fq-rail .day--rest { color: var(--fq-ink-soft); }
.fq-rail .seats { grid-column: 2 / -1; font-size: 12px; color: var(--cinnabar); }
.fq-rail .seats.is-full { color: var(--fq-ink-soft); }

.fq-center { text-align: center; max-width: 900px; margin: clamp(120px, 12vw, 200px) auto clamp(40px, 4vw, 64px); }
.fq-center--tight { margin-top: clamp(96px, 9vw, 150px); }
.fq-lede { max-width: 40ch; margin: 20px auto 0; }
.fq-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 20px); }
.fq-way {
  padding: clamp(24px, 2.4vw, 36px); border-radius: var(--fq-r); background: color-mix(in srgb, var(--fq-paper) 55%, transparent);
  box-shadow: inset 0 0 0 1px var(--fq-line); display: flex; flex-direction: column; justify-content: space-between; min-height: 260px; gap: 40px;
}
.fq-way p { margin: 0; font-size: 15px; }
.fq-classes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(12px, 1.2vw, 20px); }
.fq-class { background: var(--fq-paper); border-radius: var(--fq-r); padding: 10px; display: grid; grid-template-rows: auto 1fr; }
.fq-class .fq-media { aspect-ratio: 4 / 3.4; }
.fq-badge {
  position: absolute; left: 14px; top: 14px; padding: 7px 11px; border-radius: 6px;
  background: color-mix(in srgb, var(--fq-paper) 88%, transparent); color: var(--fq-ink); font-size: 12px;
}
.fq-class-copy { padding: clamp(18px, 2vw, 30px) clamp(10px, 1.4vw, 20px) 10px; }
.fq-class-copy h3 { font-size: var(--fq-t-2); margin-bottom: 8px; }
.fq-meta { font-size: 13px; color: var(--fq-ink-soft); }
.fq-class-copy p:not(.fq-meta) { max-width: 52ch; }
.fq-spiral-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 32px;
  margin-top: clamp(100px, 10vw, 170px);
}
.fq-spiral { width: 72px; height: 72px; fill: none; stroke: var(--fq-ink); stroke-width: 1; }
.fq-spiral-row p { font: 300 clamp(20px, 1.8vw, 28px)/1.35 var(--fq-serif); color: var(--fq-ink); margin: 0; max-width: 24em; font-variation-settings: "SOFT" 30; }

/* ---------- The morning (dark, drawn path) ---------- */
.fq-morning { position: relative; background: var(--fq-dark); color: var(--fq-on-dark); overflow: hidden; z-index: 6; }
.fq-morning-video { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(28px) saturate(0.9); opacity: 0.55; }
.fq-morning::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(30 26 20 / 0.55), rgb(30 26 20 / 0.15)); }
.fq-morning-inner { position: relative; z-index: 1; min-height: 240svh; width: min(100% - 2 * var(--fq-gutter), 1440px); margin-inline: auto; padding: clamp(100px, 10vw, 160px) 0; }
.fq-morning-head { margin-left: 50%; max-width: 640px; }
.fq-morning h2 { color: var(--off-white); }
.fq-morning-head p { margin-top: 18px; max-width: 40ch; color: color-mix(in srgb, var(--off-white) 82%, transparent); }
.fq-path { position: absolute; left: 28%; top: 26svh; width: 28%; height: calc(100% - 34svh); overflow: visible; }
.fq-path-line { fill: none; stroke: color-mix(in srgb, var(--off-white) 85%, transparent); stroke-width: 1.2; }
.fq-path-dot { fill: var(--off-white); }
.fq-moments { list-style: none; margin: 0; padding: 0; }
.fq-moment { position: absolute; width: min(330px, 26vw); }
.fq-moment:nth-child(1) { left: 0; top: 40%; }
.fq-moment:nth-child(2) { left: 62%; top: 58%; }
.fq-moment:nth-child(3) { left: 0; top: 82%; }
.fq-when { font: 300 15px/1 var(--fq-serif); letter-spacing: 0.04em; margin-bottom: 10px; color: var(--apricot); }
.fq-moment h3 { color: var(--off-white); font-size: var(--fq-t-2); margin-bottom: 10px; }
.fq-moment p:last-child { font-size: 14px; color: color-mix(in srgb, var(--off-white) 80%, transparent); }
@media (max-width: 900px) {
  .fq-morning-inner { min-height: 0; }
  .fq-morning-head { margin-left: 0; }
  .fq-path { display: none; }
  .fq-moments { margin-top: 64px; display: grid; gap: 48px; border-left: 1px solid color-mix(in srgb, var(--off-white) 50%, transparent); padding-left: 24px; }
  .fq-moment { position: static; width: auto; }
}

/* ---------- First visit, prices, Mayra ---------- */
.fq-lines { list-style: none; margin: 0 0 28px; padding: 0; border-top: 1px solid var(--fq-line); }
.fq-lines li { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--fq-line); }
.fq-lines h3 { font-size: 18px; }
.fq-lines p { margin: 0; font-size: 14px; }
.fq-split-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 80px); margin-top: clamp(120px, 12vw, 200px); align-items: start; }
.fq-split-lead { position: sticky; top: 110px; }
.fq-split-lead h2 { margin-bottom: 22px; }
.fq-split-lead p { max-width: 38ch; }
.fq-stack { display: grid; gap: 12px; }
.fq-plan { padding: clamp(24px, 2.4vw, 36px); border-radius: var(--fq-r); box-shadow: inset 0 0 0 1px var(--fq-line); background: var(--fq-paper); }
.fq-plan--feature { background: var(--fq-sand); box-shadow: none; }
.fq-who { font-size: 13px; margin-bottom: 8px; }
.fq-plan h3 { font-size: var(--fq-t-2); margin-bottom: 18px; }
.fq-from { display: inline-block; padding: 6px 10px; border-radius: 6px; background: var(--fq-paper); color: var(--fq-ink); font-size: 12px; }
.fq-plan ul { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid var(--fq-line); }
.fq-plan li { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--fq-line); color: var(--fq-ink); }
.fq-plan li small { display: block; font-size: 12px; color: var(--fq-ink-soft); }
.fq-plan li b { font: 400 22px/1 var(--fq-serif); white-space: nowrap; }
.fq-plan-foot { font-size: 13px; margin: 0; }
.fq-plan--small h3 { font-size: var(--fq-t-3); margin-bottom: 10px; }
.fq-plan--small p { margin-bottom: 8px; }
.fq-pair--mayra { margin-top: clamp(120px, 12vw, 200px); }
.fq-creds { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fq-creds li { padding: 7px 11px; border-radius: 6px; background: var(--fq-sand); color: var(--fq-ink); font-size: 12px; }

/* ---------- Quotes ---------- */
.fq-quotes { background: var(--fq-paper); padding: 0 0 clamp(100px, 10vw, 160px); position: relative; z-index: 6; overflow: hidden; }
.fq-quotes h2 { margin-bottom: 40px; }
.fq-feature { margin: 0 0 64px; max-width: 34em; }
.fq-feature p { font: 300 clamp(22px, 2vw, 32px)/1.3 var(--fq-serif); color: var(--fq-ink); font-variation-settings: "SOFT" 30; }
.fq-feature cite, .fq-quote cite { font-style: normal; font-size: 13px; }
.fq-marquee { border-block: 1px solid var(--fq-line); margin-bottom: 24px; }
.fq-marquee-track { display: flex; width: max-content; }
.fq-quote { margin: 0; width: clamp(280px, 24vw, 380px); padding: 28px 28px 32px; border-right: 1px solid var(--fq-line); }
.fq-quote p { font: 300 18px/1.4 var(--fq-serif); color: var(--fq-ink); }
html:not(.fq-motion) .fq-marquee { overflow-x: auto; }

/* ---------- Where, footer ---------- */
.fq-where { background: var(--fq-sand); padding: 0 0 clamp(100px, 10vw, 160px); position: relative; z-index: 6; }
.fq-where .fq-split-row { margin-top: 0; padding-top: clamp(100px, 10vw, 160px); }
.fq-facts { margin: 0; border-top: 1px solid var(--fq-line); }
.fq-facts div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--fq-line); }
.fq-facts dt { font-size: 13px; }
.fq-facts dd { margin: 0; color: var(--fq-ink); }
.fq-foot { background: var(--fq-dark); color: color-mix(in srgb, var(--off-white) 78%, transparent); padding: clamp(80px, 8vw, 120px) 0 104px; position: relative; z-index: 6; }
.fq-foot-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr); gap: 48px; }
.fq-foot-h { color: var(--off-white); font-size: var(--fq-t-1); line-height: 1; margin: 0; }
.fq-foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.fq-foot h3 { font: 400 13px/1 var(--fq-sans); color: color-mix(in srgb, var(--off-white) 60%, transparent); margin-bottom: 16px; }
.fq-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.fq-foot a { text-decoration: none; }
.fq-foot a:hover { text-decoration: underline; }
.fq-foot-bottom { display: flex; gap: 20px; align-items: center; margin-top: clamp(80px, 8vw, 120px); font-size: 13px; }
.fq-foot-bottom p { margin: 0; max-width: 70ch; }
.fq-foot-logo {
  flex: none; width: 48px; height: 48px; background: var(--off-white);
  -webkit-mask: url("/assets/logo/v3/espaco-icon.svg") center / contain no-repeat;
          mask: url("/assets/logo/v3/espaco-icon.svg") center / contain no-repeat;
}

/* ---------- Sticky booking ---------- */
.fq-sticky {
  position: fixed; left: var(--fq-gutter); bottom: 20px; z-index: 60;
  padding: 16px 22px; border-radius: var(--fq-r); background: var(--wine); color: var(--off-white);
  font: 400 16px/1 var(--fq-serif); text-decoration: none;
}
.fq-sticky:hover { background: var(--cinnabar); }
.fq-bookbar { display: none; }
@media (max-width: 720px) {
  .fq-sticky { display: none; }
  .fq-bookbar {
    display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px var(--fq-gutter) calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--fq-paper) 92%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--fq-line);
  }
  .fq-bookbar .fq-btn--dark { flex: 1; }
  html.fq body { padding-bottom: 72px; }
}

/* ---------- Narrow screens ---------- */
@media (max-width: 900px) {
  .fq-pair, .fq-classes, .fq-split-row, .fq-foot-top { grid-template-columns: 1fr; }
  .fq-ways { grid-template-columns: 1fr; }
  .fq-way { min-height: 0; gap: 16px; }
  .fq-split-lead { position: static; }
  .fq-spiral-row { grid-template-columns: 1fr; }
  .fq-lines li { grid-template-columns: 1fr; gap: 6px; }
  .fq-media--tall { min-height: 360px; }
  .fq-pair--mayra .fq-card--media { order: -1; }
}
@media (max-width: 560px) {
  .fq-foot-cols { grid-template-columns: 1fr 1fr; }
  .fq-facts div { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- The sea is on: the headphones breathe ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fq-breath {
    0%   { transform: scale(0.9); animation-timing-function: var(--fq-in); }
    40%  { transform: scale(1.12); animation-timing-function: var(--fq-out); }
    100% { transform: scale(0.9); }
  }
  html.fq-sea .fq-hp { animation: fq-breath 10s infinite; }
}
/* ---- v10.css ---- */
/* ============================================================
   Breath v10: v9 plus one change, the move from the hero video to
   the page (Junior, 8 Oct: "a subtle transition from the hero video
   to the next block"). Home pages only, linked after fq.css.

   The page rises over the video like a swell: the hero stays still
   (sticky) and the sand block comes up over it on a softly curved top
   edge that flattens as it covers the screen, while underneath the
   sea slowly exhales: the video zooms a touch and dims towards night,
   the hero words drift up and fade. Transform and opacity only; no
   clip-path, blur or filter on the video (costly or unreliable on
   iPhone). Research and parameters: Codrops "On-Scroll Animation Ideas
   for Sticky Sections" (2024), GSAP forum on Safari clip-path jitter.
   With "reduce motion": the same overlap as plain scrolling, the edge
   a still 24px curve, nothing else moves.
   ============================================================ */

/* The hero stays put; the lines stay inside it (in v9 they ran onto the page). */
.fq-home .fq-hero { position: sticky; top: 0; height: 100svh; min-height: 0; z-index: 0; overflow: hidden; }
.fq-home .fq-hero .fq-waves { height: 100%; }
.fq-dim { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: rgb(30 26 20); }

/* The swell: the sand block rises over the hero with a curved top that flattens. */
.fq-home .fq-sand {
  position: relative; z-index: 1;
  --swell: 40px;
  border-radius: 50% 50% 0 0 / var(--swell) var(--swell) 0 0;
  box-shadow: 0 -24px 48px rgb(30 26 20 / 0.12);
  padding-top: clamp(56px, 7vw, 104px);
}
@media (max-width: 720px) { .fq-home .fq-sand { --swell: 28px; } }
@media (prefers-reduced-motion: reduce) { .fq-home .fq-sand { --swell: 24px; } }

/* ============================================================
   Junior, 8 Oct (second note on v10), every page:
   - the frosted bar tinted wine (same blur): wine at 45% over the
     hero video, 82% once the page scrolls and on other pages, so the
     off-white words keep 5:1 on the lightest page behind them
   - a smaller name in the bar
   - on a phone, Book sits in the bar and the bottom Book/WhatsApp
     bar is gone (WhatsApp stays in the menu)
   - no moving lines on the video openings (make-breath.py drops them)
   ============================================================ */
.fq-bar { background: rgb(102 54 48 / 0.82); box-shadow: inset 0 0 0 1px rgb(244 231 217 / 0.16); }
.fq-head--over:not(.is-stuck) .fq-bar { background: rgb(102 54 48 / 0.45); }
.fq-menu { background: rgb(102 54 48 / 0.88); }
.fq-lockup { width: 136px; }
.fq-bar { height: 64px; }
.fq-book { height: 44px; padding: 0 20px; font-size: 14px; }
.fq-menu { top: 74px; }
@media (max-width: 720px) {
  .fq-bar { height: 56px; padding: 0 6px 0 16px; gap: 8px; }
  .fq-lockup { width: 108px; }
  .fq-lang { display: none; }
  .fq-book { display: inline-flex; height: 40px; padding: 0 14px; margin-left: 2px; font-size: 13px; }
  .fq-sound, .fq-menu-btn { padding: 8px; }
  .fq-menu { top: 66px; }
  .fq-bookbar { display: none !important; }
  html.fq body { padding-bottom: 0 !important; }
}
@media (max-width: 860px) { html.fq-page body { padding-bottom: 0 !important; } }

/* Junior, 8 Oct (third note on v10):
   - the bar on the same grid and with the same corners as the photographs: the wrap's edges,
     8px; the class cards drop their inner padding so their photographs reach the same edges
   - "Menu" written on every screen size
   - the sound button sits, discreet, at the lower right of the home hero */
.fq-bar { border-radius: var(--fq-r); width: min(100% - 2 * var(--fq-gutter), 1440px); }
.fq-menu { border-radius: var(--fq-r); right: max(var(--fq-gutter), (100% - 1440px) / 2); }
.fq-class { padding: 0; overflow: hidden; }
.fq-class .fq-media { border-radius: var(--fq-r) var(--fq-r) 0 0; }
.fq-class-copy { padding: clamp(24px, 2.4vw, 36px); }
.fq-menu-open { display: inline !important; }
.fq-menu-btn[aria-expanded="true"] .fq-menu-open { display: none !important; }
.fq-menu-btn[aria-expanded="true"] .fq-menu-close { display: inline !important; }
.fq-sound--hero {
  position: absolute; right: var(--fq-gutter); bottom: 24px; z-index: 9;
  padding: 8px 12px; border-radius: var(--fq-r); font-size: 12px; gap: 6px;
  color: color-mix(in srgb, var(--off-white) 78%, transparent);
  background: rgb(102 54 48 / 0.35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.fq-sound--hero .fq-hp { width: 16px; height: 16px; }
.fq-sound--hero:hover { color: var(--off-white); background: rgb(102 54 48 / 0.6); }
@media (max-width: 720px) {
  .fq-sound--hero span { display: inline; }
  .fq-menu-btn { padding: 8px 10px; }
}
/* No spiral beside "the last few minutes": the line keeps its place on the right half. */
.fq-spiral-row p { grid-column: 2; }
@media (max-width: 900px) { .fq-spiral-row p { grid-column: 1; } }

/* ============================================================
   Junior's comments on v10, 9 Oct (read with book-comments.py --site)
   ============================================================ */
/* Every block opens with a label of five words at most, then its heading. */
.fq-center .fq-tag, .fq-quotes-head .fq-tag, .fq-where-inner .fq-tag { align-self: center; }
.fq-morning .fq-tag { background: rgb(244 231 217 / 0.14); color: var(--off-white); }
.fq-center { margin-top: clamp(96px, 9vw, 150px); }
.fq-center .fq-lede { margin-top: 16px; }

/* How it works, everyone's welcome, surf, rain and the stay: one grid of smaller cards. */
.fq-ways--all { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.fq-way { min-height: 0; gap: 10px; justify-content: flex-start; padding: clamp(20px, 2vw, 28px); }
.fq-way h3 { font-size: clamp(19px, 1.4vw, 22px); }

/* The two class buttons on one line: the copy is a column and the button sits at its foot. */
.fq-class-copy { display: flex; flex-direction: column; height: 100%; }
.fq-class-copy p:last-child { margin-top: auto; margin-bottom: 0; padding-top: 8px; }

/* Mayra: the photograph stays while her words pass, then both scroll on together. */
@media (min-width: 901px) {
  .fq-pair--mayra { align-items: start; }
  .fq-pair--mayra .fq-card--media { position: sticky; top: 96px; }
  .fq-pair--mayra .fq-card--media .fq-media--tall { height: calc(100svh - 120px); min-height: 0; }
  .fq-pair--mayra .fq-card--text { min-height: 150svh; justify-content: center; }
}

/* Quotes: heading and the long quote centred; the five-star line given room. */
.fq-quotes-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.fq-quotes-head .fq-feature { margin-inline: auto; }
.fq-reviews {
  text-align: center; margin: 40px auto 0; max-width: 40ch;
  font: 300 clamp(20px, 1.8vw, 26px)/1.35 var(--fq-serif); font-variation-settings: "SOFT" 30; color: var(--fq-ink);
}
.fq-reviews a { display: block; margin-top: 10px; font: 500 14px/1.4 var(--fq-sans); }

/* Where: the address centred, Maps and Instagram under it. */
.fq-where-inner { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: clamp(100px, 10vw, 160px); }
.fq-where-inner h2 { margin-bottom: 18px; }
.fq-where-inner > p:not(.fq-tag) { max-width: 44ch; }
.fq-where-inner .fq-btn-row { justify-content: center; margin-top: 12px; }

/* Inner pages (comments of 9 Oct): the classes page photographs get the home page's corners and
   sit inside the gutter; the guide's title reads light on its photograph; its prices one size,
   with a pointer to the prices page. */
html.fq-page .chapter > img { border-radius: var(--fq-r); margin: var(--fq-gutter) 0 var(--fq-gutter) var(--fq-gutter); width: calc(100% - var(--fq-gutter)); height: calc(100% - 2 * var(--fq-gutter)); }
html.fq-page .chapter--reverse > img { margin: var(--fq-gutter) var(--fq-gutter) var(--fq-gutter) 0; }
@media (max-width: 860px) {
  html.fq-page .chapter > img, html.fq-page .chapter--reverse > img { margin: var(--fq-gutter) var(--fq-gutter) 0; width: calc(100% - 2 * var(--fq-gutter)); height: auto; }
}
html.fq-page .chapter > img { animation: none !important; transform: none !important; }   /* no slow zoom: it pushed the photo past its margin */
html.fq-page .op-hero-copy { background: var(--fq-sand); }
html.fq-page .op-hero-copy h1, html.fq-page .op-hero-copy p { color: var(--fq-ink); }
html.fq-page .op-price { position: relative; }
/* The guide: the class list and the price list start right under their headings, at the same
   height (comments of 9 Oct); "more packs" sits at the foot of the prices tile, on one line. */
html.fq-page :is(.op-week, .op-price) .op-h { margin-bottom: 0; }
html.fq-page .op-price .op-h + .op-mid { margin-top: 0 !important; }
html.fq-page .op-more { margin: auto 0 0 !important; padding-top: 14px; font-size: 13px; line-height: 1.35; white-space: nowrap; }
@media (max-width: 380px) { html.fq-page .op-more { white-space: normal; } }

/* The week rail (week-rail.js): past days greyed, one short status line with a Book button. */
.rail .day.is-past { opacity: 0.42; }
.rail .day.is-past:hover { opacity: 0.6; }
.wr-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; font: 500 12px/1.2 var(--fq-sans); }
.wr-status.is-open { color: var(--jalapeno); }
.wr-status.is-tight { color: var(--cinnabar); }
.wr-status.is-full { color: var(--fq-ink-soft); }
.wr-book { padding: 4px 9px; border-radius: 999px; background: var(--fq-btn); color: var(--fq-on-btn); font-size: 11px; }
/* One line per day (Junior, 9 Oct): day, class, time, then status and Book at the right.
   In a narrow column the status drops under the class, as before. */
.fq-rail { container-type: inline-size; }
.fq-rail .day { grid-template-columns: 56px minmax(0, 11em) auto minmax(0, 1fr); align-items: center; row-gap: 4px; }
.fq-rail .day .when { text-align: left; }
.fq-rail .wr-line { grid-column: 4; justify-self: end; margin-top: 0; flex-wrap: nowrap; }
@container (max-width: 480px) {
  .fq-rail .day { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .fq-rail .day .when { text-align: right; }
  .fq-rail .wr-line { grid-column: 2 / -1; justify-self: start; flex-wrap: wrap; }
}

/* Plans: the conditions under the title; "how to get to the deck" centred, without the table. */
.fq-plan .fq-plan-foot { margin: -8px 0 16px; }
html.fq-page .plan .foot--top { margin: -4px 0 14px; }
html.fq-page .practical--center { display: block; text-align: center; }
html.fq-page .practical--center > div { margin-inline: auto; max-width: 52ch; }
html.fq-page .practical--center .measure { margin-inline: auto; }
html.fq-page .practical--center .btn-row { justify-content: center; }
/* Outline buttons stay outlines on inner pages (the skin's filled-button rule was more specific). */
html.fq-page .btn.btn--ghost { background: transparent !important; color: var(--fq-ink) !important; box-shadow: inset 0 0 0 1px var(--fq-line) !important; }
html.fq-page .btn.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--fq-ink) !important; }

/* Booking page calendar (comment of 9 Oct): one line per class, the date in a fixed column that
   never wraps, the status and Book button close to the class name. */
html.fq-page .sched { gap: 0; max-width: 980px; }
html.fq-page .sched-day { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); align-items: start; border: 0; border-bottom: 1px solid var(--fq-line); border-radius: 0; padding: 4px 0; margin: 0; background: none; }
html.fq-page .sched-day h3 { font: 400 19px/1.2 var(--fq-serif) !important; font-variation-settings: "SOFT" 30; text-transform: none; white-space: nowrap; margin: 0; padding: 12px 0 0; border: 0; }
html.fq-page .sched-class { grid-column: 2; grid-template-columns: 7rem minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 10px; border: 0; }
html.fq-page .sched-name { font: 400 17px/1.2 var(--fq-sans); font-style: normal; }
@media (max-width: 620px) {
  html.fq-page .sched-day { grid-template-columns: 1fr; }
  html.fq-page .sched-class { grid-column: 1; grid-template-columns: 1fr auto; padding-inline: 0; }
}
/* Mayra's page: the story beside her photograph. */
html.fq-page .story .story-figure img { border-radius: var(--fq-r); }

/* ============================================================
   Comments of 9 Oct, third round
   ============================================================ */
/* Surf, rain and the stay: colour blocks, as on the brand book's flyers. Text set at 24px so the
   off-white keeps the large-text contrast on jalapeño; wine on apricot, as the book pairs them. */
.fq-tones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 20px); }
.fq-tone { border-radius: var(--fq-r); padding: clamp(28px, 3vw, 44px); min-height: 260px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.fq-tone h3 { font-size: clamp(30px, 2.6vw, 42px); color: inherit; }
.fq-tone p { margin: 0; font: 300 24px/1.3 var(--fq-serif); font-variation-settings: "SOFT" 30; color: inherit; }
.fq-tone--bay { background: var(--bay-leaf); color: var(--off-white); }
.fq-tone--apricot { background: var(--apricot); color: var(--wine); }
.fq-tone--jalapeno { background: var(--jalapeno); color: var(--off-white); }
@media (max-width: 900px) { .fq-tones { grid-template-columns: 1fr; } .fq-tone { min-height: 0; } }

/* The morning: the words a little larger. */
.fq-morning-head p { font-size: clamp(18px, 1.35vw, 22px); }
.fq-moment p:last-child { font-size: clamp(15px, 1.1vw, 18px); }

/* Prices on the home page: centred heading and lead, the two plans side by side, private below. */
.fq-prices { margin-top: clamp(120px, 12vw, 200px); }
.fq-prices .fq-center { margin-top: 0; }
.fq-prices .fq-lede { max-width: 52ch; }
.fq-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fq-plan--wide { grid-column: 1 / -1; }
@media (max-width: 900px) { .fq-plans { grid-template-columns: 1fr; } }

/* The teachers: a carousel that scrolls sideways, arrows on both sides, names above. */
.fq-teachers { margin-top: clamp(120px, 12vw, 200px); }
.fq-teacher-names { display: flex; justify-content: center; gap: 18px; margin: 14px 0 0; }
.fq-teacher-names a { font: 400 18px/1.2 var(--fq-serif); text-underline-offset: 5px; }
.fq-carousel { position: relative; }
.fq-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; gap: 20px; scrollbar-width: none; overscroll-behavior-x: contain; }
.fq-track::-webkit-scrollbar { display: none; }
.fq-slide { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(12px, 1.2vw, 20px); }
.fq-slide .fq-media { min-height: clamp(420px, 40vw, 680px); }
.fq-slide .fq-card--text { justify-content: center; }
.fq-slide h3 { font-size: var(--fq-t-2); margin-bottom: 18px; }
.fq-media--soon { display: grid; place-items: center; background: var(--fq-sand-deep); }
.fq-media--soon span { width: 120px; height: 120px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--fq-ink); opacity: 0.4; }
.fq-arrow {
  position: absolute; top: 50%; z-index: 2; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--fq-paper); color: var(--fq-ink); box-shadow: 0 0 0 1px var(--fq-line), 0 6px 18px rgb(30 26 20 / 0.12);
}
.fq-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fq-arrow--prev { left: -12px; }
.fq-arrow--next { right: -12px; }
.fq-arrow[disabled] { opacity: 0.35; cursor: default; }
@media (max-width: 900px) {
  .fq-slide { grid-template-columns: 1fr; }
  .fq-slide .fq-media { min-height: 360px; }
  .fq-arrow { top: 180px; }
  .fq-arrow--prev { left: 8px; } .fq-arrow--next { right: 8px; }
}

/* The morning band: the sunrise clip (lighter than the hands), shown brighter, with a lighter
   veil; the words stay off-white on it. */
.fq-morning-video { opacity: 0.9; filter: blur(22px) saturate(1); }
.fq-morning::after { background: rgb(30 26 20 / 0.4); }

/* Booking calendar (comment of 9 Oct): no outer frame, rows on the page's own edges with room on
   the left, hairlines between days, and one week at a time with arrows (week-pager.js). */
html.fq-page .embed:has(.sched), html.fq-page .embed { border: 0; box-shadow: none; background: none; padding: 0; border-radius: 0; }
html.fq-page .sched { max-width: none; border-top: 1px solid var(--fq-line); }
html.fq-page .sched-day { padding: 6px 0 6px 16px; box-shadow: none; }
html.fq-page .sched-day[hidden] { display: none; }
html.fq-page .sched-class { box-shadow: none; background: none; border-radius: var(--fq-r); }
html.fq-page .sched-class:hover { background: var(--fq-sand); }
.wp-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.wp-label { margin: 0; font: 400 20px/1.2 var(--fq-serif); font-variation-settings: "SOFT" 30; color: var(--fq-ink); }
.wp-arrow { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--fq-paper); color: var(--fq-ink); box-shadow: 0 0 0 1px var(--fq-line); }
.wp-arrow svg { width: 16px; height: 16px; }
.wp-arrow[disabled] { opacity: 0.35; cursor: default; }
/* The eyebrow: "Uma manhã para" stays put while the last word changes (comment of 9 Oct). The two
   halves share the line equally, so the lead ends at the centre and the word starts there. */
.fq-eyebrow { display: flex; gap: 0.45em; }
.fq-eyebrow-lead { flex: 1 1 0; text-align: right; }
.fq-eyebrow .fq-rotate { flex: 1 1 0; text-align: left; white-space: nowrap; }

/* Comments of 9 Oct, fourth round */
/* Colour blocks: title at the top, words right under it, so the three texts start on one line. */
.fq-tone { justify-content: flex-start; gap: 18px; }
/* The morning: every text the size of "O deck fica a poucos minutos…". */
.fq-moment p:last-child { font-size: clamp(18px, 1.35vw, 22px); }
/* Prices: both tables start at the same height (the heads share one row). */
.fq-plans { grid-template-rows: auto auto; }
.fq-plans .fq-plan:not(.fq-plan--wide) { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
.fq-plan-head { padding-bottom: 4px; }
/* Labels read as labels on paper too (the pill was paper on paper). */
.fq-paper .fq-tag, .fq-quotes .fq-tag { background: var(--fq-sand); }
/* The week: its label above the photo and the card together. */
.fq-center--first { margin: 0 auto clamp(20px, 2vw, 32px); }
@media (max-width: 900px) { .fq-plans .fq-plan:not(.fq-plan--wide) { display: block; grid-row: auto; } }   /* stacked: no shared rows (they made the head and list overlap) */

/* ============================================================
   "Everything you need to know" back on the hero (Junior, 9 Oct):
   the live site's drop-down (drop.js), as clear frosted glass, no tint,
   button and panel alike, set well under the bar on every screen.
   ============================================================ */
.fq-hero .drop {
  position: absolute; z-index: 9; top: 96px; right: max(var(--fq-gutter), (100% - 1440px) / 2 + 12px);
  width: min(460px, calc(100% - 2 * var(--fq-gutter))); display: grid; justify-items: end; gap: 10px; text-align: left;
}
.drop-btn, .drop-panel > .glance {
  /* Clear glass: no colour, only a faint neutral shade so the words hold over a bright frame. */
  background: rgb(0 0 0 / 0.10);
  -webkit-backdrop-filter: blur(22px) saturate(1.1); backdrop-filter: blur(22px) saturate(1.1);
  box-shadow: inset 0 0 0 1px rgb(244 231 217 / 0.35);
  color: var(--off-white);
}
.drop-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border: 0; border-radius: var(--fq-r);   /* the bar's corners (Junior, 9 Oct) */ cursor: pointer;
  font: 500 14px/1 var(--fq-sans); transition: background-color 0.3s var(--fq-in);
}
.drop-btn:hover, .drop-btn[aria-expanded="true"] { background: rgb(255 255 255 / 0.10); }
.drop-btn:focus-visible { outline: 2px solid var(--off-white); outline-offset: 3px; }
.drop-chev { width: 16px; height: 16px; transition: transform 0.3s var(--fq-in); }
.drop-btn[aria-expanded="true"] .drop-chev { transform: rotate(180deg); }
.drop-panel { width: 100%; display: grid; grid-template-rows: 1fr; }
.drop-panel > .glance { min-height: 0; overflow: auto; overscroll-behavior: contain; border-radius: var(--fq-r); padding: 18px 20px; display: grid; gap: 16px; }
.drop.is-ready .drop-panel { transition: grid-template-rows 0.5s var(--fq-in), opacity 0.5s var(--fq-in), transform 0.5s var(--fq-in); }
.drop.is-ready:not(.is-open) .drop-panel { grid-template-rows: 0fr; opacity: 0; transform: translateY(-8px); pointer-events: none; }
.drop.is-ready:not(.is-open) .drop-panel > .glance { padding-block: 0; }
.glance .g-block + .g-block { border-top: 1px solid rgb(244 231 217 / 0.22); padding-top: 14px; }
.glance .g-h { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 400 18px/1.2 var(--fq-serif); font-variation-settings: "SOFT" 30; color: var(--off-white); }
.glance .g-h .icon { width: 18px; height: 18px; }
.glance ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.glance li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.glance .g-week li { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.glance .g-days { grid-column: 1 / -1; font-size: 12px; opacity: 0.8; }
.glance .g-class { font-weight: 500; }
.glance .g-rest, .glance .g-note { font-size: 12px; opacity: 0.85; }
.glance p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--off-white); }
.drop-panel > .glance, .drop-btn { text-shadow: 0 1px 2px rgb(0 0 0 / 0.25); }
.glance .fq-btn { text-shadow: none; }
.glance a:not(.fq-btn) { color: var(--off-white); }
.glance .btn-row { margin-top: 12px; display: flex; gap: 10px; }
.glance .g-more { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 500; }
@media (min-width: 1360px) {
  .fq-hero .drop { width: min(660px, calc(100% - 2 * var(--fq-gutter))); }
  .drop-panel > .glance { grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .glance .g-block + .g-block { border-top: 0; padding-top: 0; }
  .glance .g-block:nth-child(n+3) { border-top: 1px solid rgb(244 231 217 / 0.22); padding-top: 14px; }
}
/* On a phone: well under the bar (in v9 it touched it), the panel the full width. */
@media (max-width: 720px) {
  .fq-hero .drop { top: 86px; right: var(--fq-gutter); }
  .drop-btn { min-height: 42px; padding: 0 14px; font-size: 13px; }
}
/* The sound button steps aside while the answers are open (on a phone they reach it). */
.fq-hero .fq-sound--hero { transition: opacity 0.3s var(--fq-in); }
.fq-hero:has(.drop.is-open) .fq-sound--hero { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .drop.is-ready .drop-panel, .drop-chev { transition: none; } }

/* The tinted bands clip, not hide: "hidden" made each band its own scroller, so the cards
   near a band's foot never finished fading in (Junior, 9 Oct: Estadia looked faded). */
html.fq-page :is(.section--shell, .section--sand, .section--forest, .section--clay, .chapter, .chapter--reverse, .chapter--onclay) { overflow: clip; }

/* ============================================================
   The teachers' page (Junior, 9 Oct): a row of tabs under the title, one per teacher
   (round photo and name); the chosen one is filled wine, the others a hairline.
   ============================================================ */
.tp-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.tp-tab {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 18px 4px 4px;
  border: 0; border-radius: 999px; cursor: pointer; background: transparent; color: var(--fq-ink);
  box-shadow: inset 0 0 0 1px var(--fq-line); font: 500 15px/1 var(--fq-sans);
  transition: background-color 0.3s var(--fq-in), color 0.3s var(--fq-in), box-shadow 0.3s var(--fq-in);
}
.tp-tab img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; }
.tp-tab:hover { box-shadow: inset 0 0 0 1px var(--fq-ink); }
.tp-tab[aria-selected="true"] { background: var(--fq-btn); color: var(--fq-on-btn); box-shadow: none; }
.tp-tab:focus-visible { outline: 2px solid var(--fq-ink); outline-offset: 3px; }
.tp-hero { padding-bottom: 40px; }
.tp-panel > .section:first-child { padding-top: 16px; }
.tp-copy h2 { margin: 0 0 18px; }
.tp-copy .creds { margin: 22px 0 36px; }
@media (min-width: 861px) {
  .tp-panel .story { grid-template-columns: 0.9fr 1.1fr; }
  .tp-panel .story-figure { position: sticky; top: 104px; }
}
.tp-panel:focus { outline: none; }
.tp-panel[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .tp-tab { transition: none; } }

/* Prices: the two plans the same size, their price lists starting at the same height
   (rows shared: label, title, conditions, badge, list). Comments of 9 Oct. */
@media (min-width: 861px) {
  html.fq-page .doors { align-items: stretch; row-gap: 0; }
  html.fq-page .doors > .plan { display: grid; grid-row: span 5; grid-template-rows: subgrid; align-content: start; }
  html.fq-page .doors > .plan > .who { grid-row: 1; }
  html.fq-page .doors > .plan > h3 { grid-row: 2; }
  html.fq-page .doors > .plan > .foot { grid-row: 3; }
  html.fq-page .doors > .plan > .door-badge { grid-row: 4; justify-self: start; align-self: start; }
  html.fq-page .doors > .plan > ul { grid-row: 5; align-self: start; }
}
/* Cards side by side: their closing link sits on the same line, at the foot (comments of 9 Oct). */
html.fq-page .grid > .card { display: flex; flex-direction: column; }
html.fq-page .grid > .card > p:last-child:has(> a:only-child) { margin-top: auto; padding-top: 8px; }
.tp-panel .story-figure { margin: 0; }

/* Booking calendar: the date, time, class, status and button share the row's middle (comments of 9 Oct). */
@media (min-width: 721px) {
  html.fq-page .sched-day { align-items: center; padding-block: 8px; }
  html.fq-page .sched-day h3 { padding: 0; line-height: 1.2 !important; }
}
/* Week rail: the date beside the weekday ("Seg 12"), set by week-rail.js. */
.rail .day b .wr-date { font-weight: 400; }
/* Hero drop-down: "everything on one page" centred under the four answers (comments of 9 Oct). */
.glance > .g-more { grid-column: 1 / -1; justify-self: center; margin-top: 0; border-top: 1px solid rgb(244 231 217 / 0.22); padding-top: 14px; width: 100%; text-align: center; }

/* The morning on a phone: a faint track, the line drawn over it and a dot at its tip (v10.js). */
@media (max-width: 900px) {
  .fq-moments.is-drawn { position: relative; border-left-color: rgb(244 231 217 / 0.16); }
  .fq-mline { position: absolute; left: -1px; top: 0; width: 1px; height: 100%; background: rgb(244 231 217 / 0.85);
              transform-origin: top; transform: scaleY(0); pointer-events: none; }
  .fq-mdot { position: absolute; left: -5.5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--off-white);
             box-shadow: 0 0 0 6px rgb(244 231 217 / 0.18); opacity: 0; transition: opacity 0.6s; pointer-events: none; }
}
/* The guide on a phone: "more packs" takes the tile's full width and may wrap, so the three
   prices keep their columns (on one line it stretched the first column and cut the others). */
@media (max-width: 860px) {
  html.fq-page .op-price .op-more { grid-column: 1 / -1; white-space: normal; }
}

/* ---- v11.css ---- */
/* ============================================================
   v11 (Mariane, 9 Oct 2026): every page follows the home page.
   Linked last, on every page. The home is the reference for type:
   - DM Sans for text, Fraunces Light for titles; no Poppins, no Roca One
   - the page title set like the home's hero title (uppercase, Fraunces Light)
   - card titles in Fraunces Light, wine; intro lines in DM Sans
   - labels above a title as small pills; buttons in DM Sans
   ============================================================ */

/* The old font tokens point at the home's two fonts. */
html.fq { --font-display: var(--fq-serif); --font-ui: var(--fq-sans); --font-narrow: var(--fq-sans); }

/* Page titles, like the home's hero title. */
html.fq.fq-page :is(.page-hero h1, .hero-name, .op-hero-copy h1) {
  font-family: var(--fq-serif); font-weight: 300; font-variation-settings: "SOFT" 0, "WONK" 0;
  text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.92; color: var(--fq-ink);
}
html.fq.fq-page .op-hero-copy h1 { font-size: clamp(30px, 2.8vw, 42px); }

/* Card and block titles, as on the home's cards. */
html.fq.fq-page :is(.section h3, .card h3, .plan h3, .way h3, .story-step h3, .glance .g-h,
  .op-h, .sched-day h3, .rec h3, .rec-sub > summary h3, .grid h2, .t2) {
  font-weight: 300; color: var(--fq-ink);
}

/* Intro lines in DM Sans, as under the home's titles. */
html.fq.fq-page :is(.lede, .hero-lede) {
  font-family: var(--fq-sans); font-size: var(--fq-t-body); line-height: 1.55; font-weight: 400; color: var(--fq-ink-soft);
}

/* Labels above a title: the home's small pill. */
html.fq.fq-page .label {
  display: inline-block; padding: 7px 12px; border-radius: 6px; line-height: 1; letter-spacing: 0;
  background: color-mix(in srgb, var(--fq-paper) 75%, transparent); color: var(--fq-ink);
}
html.fq.fq-page :is(.section--sun, .section:not(.section--sand):not(.section--shell)) .label { background: var(--fq-sand); }

/* The floating Book button, in the buttons' font. */
.fq-sticky { font: 500 14px/1 var(--fq-sans); letter-spacing: 0.01em; padding: 17px 24px; }

/* The booking calendar's small Agendar, wine like the home's week. */
html.fq.fq-page .sched-book { background: var(--fq-btn); color: var(--fq-on-btn); }

/* The week on the classes page: one line per day, as on the home (the old boxed grid undone). */
html.fq.fq-page .fq-rail { display: block; background: none; border: 0; border-top: 1px solid var(--fq-line); border-radius: 0; overflow: visible; }
html.fq.fq-page .fq-rail .day {
  display: grid; min-height: 0; padding: 13px 0; background: transparent; flex-direction: initial;
  border-bottom: 1px solid var(--fq-line); color: var(--fq-ink);
}
html.fq.fq-page .fq-rail .day b { text-transform: none; letter-spacing: 0; color: inherit; font-size: 13px; }
html.fq.fq-page .fq-rail .day .what { font-family: var(--fq-serif); font-weight: 400; font-style: normal; margin: 0; font-size: 18px; }
html.fq.fq-page .fq-rail .day .when { margin-top: 0; }
html.fq.fq-page .fq-rail .day .kind { display: none; }

/* The menu's links in the text font, like the bar (Mariane, 9 Oct). */
.fq-menu ul a { font-family: var(--fq-sans); font-weight: 500; font-size: 16px; letter-spacing: 0; }

/* ============================================================
   Pages rebuilt from the home's blocks (tools/v11/rebuild-pages.py):
   classes, prices, first visit. Body class fq-inner.
   ============================================================ */
.fq-inner .fq-sand { padding-top: clamp(150px, 14vw, 220px); }
.fq-center--page { margin: 0 auto clamp(56px, 6vw, 96px); }
.fq-center--page .fq-tag { align-self: center; }
.fq-page-title {
  font-size: var(--fq-t-hero); line-height: 0.92; letter-spacing: -0.01em;
  text-transform: uppercase; font-variation-settings: "SOFT" 0, "WONK" 0; font-weight: 300;
}
.fq-ways--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .fq-ways--two { grid-template-columns: 1fr; } }
.fq-classes--page { margin-top: clamp(12px, 1.2vw, 20px); }
.fq-after { text-align: center; margin: clamp(40px, 4vw, 64px) 0 0; }
.fq-pair--story { margin-top: clamp(12px, 1.2vw, 20px); }
.fq-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .fq-inner .fq-pair { grid-template-columns: 1fr; }
  .fq-inner .fq-media--tall { min-height: 360px; }
}

/* Questions: one line each, opening in place. */
.fq-faq { max-width: 900px; margin: 0 auto; border-top: 1px solid var(--fq-line); }
.fq-faq details { border-bottom: 1px solid var(--fq-line); }
.fq-faq summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none;
  font: 300 var(--fq-t-3)/1.25 var(--fq-serif); font-variation-settings: "SOFT" 30, "WONK" 0; color: var(--fq-ink);
}
.fq-faq summary::-webkit-details-marker { display: none; }
.fq-faq summary::after { content: "+"; font: 300 24px/1 var(--fq-sans); color: var(--fq-ink-soft); }
.fq-faq details[open] summary::after { content: "–"; }
.fq-faq .answer p { margin: 0; padding: 0 0 24px; max-width: 62ch; }
.fq-ways--after { margin-top: clamp(12px, 1.2vw, 20px); }
.fq-pair--story .fq-media--tall { min-height: clamp(360px, 34vw, 560px); }
.fq-pair--story .fq-card--text { justify-content: center; }
.fq-pair--story .fq-media video { position: absolute; inset: 0; }

/* ============================================================
   The one-page guide (/info/, /pt/info/): tiles like the home's cards,
   classes and prices as the home's price rows, all one size.
   ============================================================ */
html.fq.fq-page .op-tile { background: var(--fq-paper); border: 0; box-shadow: inset 0 0 0 1px var(--fq-line); border-radius: var(--fq-r); }
html.fq.fq-page .op-hero { box-shadow: none; }
html.fq.fq-page .op-h { font: 300 var(--fq-t-3)/1.15 var(--fq-serif); font-variation-settings: "SOFT" 30, "WONK" 0; color: var(--fq-ink); }
.op-rows { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid var(--fq-line); }
.op-rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--fq-line); color: var(--fq-ink); font-size: 15px; }
.op-rows li small { display: block; font-size: 12px; color: var(--fq-ink-soft); margin-top: 2px; }
.op-rows li > b { font: 400 22px/1 var(--fq-serif); white-space: nowrap; }
.op-rows--classes li > span { font: 400 18px/1.2 var(--fq-serif); }
.op-rows--classes li > span small { font-family: var(--fq-sans); }
.op-rows--classes li > b { font: 400 15px/1.2 var(--fq-sans); }
.op-rows .op-from { font: 400 12px/1 var(--fq-sans); color: var(--fq-ink-soft); margin-right: 4px; }
html.fq.fq-page .op-street { font: 300 var(--fq-t-3)/1.15 var(--fq-serif); color: var(--fq-ink); }
html.fq.fq-page :is(.op-steps, .op-facts, .op-where p, .op-small, .op-more) { font-family: var(--fq-sans); font-size: 14px; }
html.fq.fq-page .op-book { background: var(--fq-sand); box-shadow: none; }
html.fq.fq-page .op-book .op-h, html.fq.fq-page .op-book :is(.op-steps, p, a:not(.btn)) { color: var(--fq-ink); }
.op-rows { grid-column: 1 / -1; width: 100%; }
html.fq.fq-page .op-week .op-small { border-top: 0; padding-top: 0; }


/* The same opening on the booking, teachers and Itacaré pages (old layout below it). */
html.fq-page .fq-open { padding: clamp(150px, 14vw, 220px) 0 clamp(16px, 2vw, 32px); }
html.fq-page .fq-head:not(.fq-head--over) + main:has(> .fq-open) { padding-top: 0; }
html.fq.fq-page .fq-open .fq-page-title { font-family: var(--fq-serif); font-size: var(--fq-t-hero); color: var(--fq-ink); }
html.fq.fq-page .fq-open .fq-lede { font-family: var(--fq-sans); font-size: var(--fq-t-body); color: var(--fq-ink-soft); }
.fq-open .tp-tabs { justify-content: center; margin-top: 28px; }

/* The booking calendar, like the home's week: day in small sans, class in Fraunces, time in sans. */
html.fq.fq-page .sched-day h3 { font: 500 14px/1.3 var(--fq-sans) !important; text-transform: none; letter-spacing: 0; color: var(--fq-ink); }
html.fq.fq-page .sched-day h3::first-letter { text-transform: uppercase; }
html.fq.fq-page .sched-name { font: 400 18px/1.2 var(--fq-serif); color: var(--fq-ink); }
html.fq.fq-page .sched-time { font: 400 14px/1.2 var(--fq-sans); color: var(--fq-ink-soft); }

/* Itacaré: the filter row names stay plain (not pills); the category titles one step smaller. */
html.fq.fq-page .rec-filters .label { background: none !important; padding: 0 !important; }
html.fq.fq-page .rec-group > summary h2 { font-size: var(--fq-t-2); }
/* Booking: room between the opening and the calendar. */
html.fq-page .fq-open + .section { padding-top: clamp(32px, 3vw, 48px) !important; }

/* ============================================================
   Mariane's comments on v10 (9 Oct), the home first:
   ============================================================ */
/* Paired blocks (the week, the first morning, the teachers): the block follows its text, not the
   photo. The photo fills the height the text needs; the text starts at the top, as in the price plans. */
.fq-pair { align-items: stretch; }
.fq-pair .fq-card--media, .fq-slide .fq-media { position: relative; }
.fq-pair .fq-media--tall { position: absolute; inset: 0; min-height: 0; height: auto; }
:is(.fq-card--text, .fq-card--sand) { justify-content: flex-start; }
@media (max-width: 900px) {
  .fq-pair .fq-media--tall { position: relative; inset: auto; height: auto; aspect-ratio: 4 / 3; }
}

/* Price plans: the two plans in the same colours; the private class stands out in wine (Mayra prefers privates). */
.fq-plan--feature { background: var(--fq-paper); box-shadow: inset 0 0 0 1px var(--fq-line); }
.fq-plan--feature .fq-from { background: var(--fq-sand); }
.fq-plan--wide { background: var(--wine); box-shadow: none; color: color-mix(in srgb, var(--off-white) 88%, transparent); }
.fq-plan--wide h3 { color: var(--off-white); }
.fq-plan--wide a { color: var(--off-white); }
/* The teacher's card: a square photo, so it no longer towers over her text. */
.fq-slide .fq-media { min-height: 0; aspect-ratio: 1 / 1; align-self: center; }
.fq-slide .fq-media img { position: absolute; inset: 0; }
@media (max-width: 900px) { .fq-slide .fq-media { aspect-ratio: 4 / 3; } }
/* The guide's photo tile: one corner (8px) for the whole tile; the title block has none of its own,
   so the dark tile behind no longer shows at its lower corners. */
html.fq.fq-page .op-hero { overflow: hidden; border-radius: var(--fq-r); background: var(--fq-sand); }
html.fq.fq-page .op-hero-copy { border-radius: 0; }

/* Hero: the address on its own line under the intro (Mariane, 9 Oct). */
.fq-hero-sub:has(+ .fq-hero-addr) { margin-bottom: 8px; }
.fq-hero-addr { margin: 0 auto 28px; font-size: 14px; color: color-mix(in srgb, var(--off-white) 78%, transparent); }
/* The Maps and Instagram buttons now close the reviews block (the "Onde fica" block is gone). */
.fq-btn-row--quotes { margin-top: 20px; justify-content: center; }

/* The guide printed to PDF (/info/, /pt/info/): no site bar or floating buttons; the price rows a
   step tighter so "More packs and plans" stays inside its tile on A4. */
@media print {
  .fq-head, .fq-sticky, .fq-bookbar, .fq-skip, .fq-foot { display: none !important; }
  html.fq-page .fq-head + main { padding-top: 0 !important; }
  .op-rows li { padding: 6px 0; font-size: 12px; }
  .op-rows li > b { font-size: 17px; }
  .op-rows--classes li > span { font-size: 15px; }
  .op-rows li small { font-size: 10px; }
}

/* ============================================================
   "Surf, chuva ou poucos dias" as an accordion (Mariane, 9 Oct; test page version 4).
   Three panels with vertical titles; the open one shows its words. Colours in this order:
   apricot, cinnabar, jalapeño. Paced like a calm breath (about 4 s in), sine easing.
   On phones the panels stack and open downwards. Reduced motion: no transition.
   ============================================================ */
.fq-acc { --acc-in: 4s; --acc-ease: cubic-bezier(0.37, 0, 0.63, 1);
  display: flex; gap: clamp(8px, 0.8vw, 12px); height: clamp(340px, 30vw, 440px); }
.fq-acc-panel { position: relative; flex: 0 0 96px; border: 0; padding: 0; margin: 0; border-radius: var(--fq-r); overflow: hidden;
  cursor: pointer; text-align: left; font: inherit; transition: flex var(--acc-in) var(--acc-ease); }
.fq-acc-panel.is-open { flex: 1 1 0; cursor: default; }
.fq-acc--apricot { background: var(--apricot); color: var(--wine); }
.fq-acc--cinnabar { background: var(--cinnabar); color: var(--off-white); }
.fq-acc--jalapeno { background: var(--jalapeno); color: var(--off-white); }
.fq-acc-label { position: absolute; left: 0; bottom: 28px; width: 96px; display: flex; justify-content: center;
  writing-mode: vertical-rl; transform: rotate(180deg); font: 300 30px/1 var(--fq-serif); font-variation-settings: "SOFT" 30, "WONK" 0;
  transition: opacity var(--acc-in) var(--acc-ease); }
.fq-acc-panel.is-open .fq-acc-label { opacity: 0; }
.fq-acc-body { position: absolute; inset: 0; padding: clamp(28px, 3vw, 48px); display: flex; flex-direction: column; justify-content: flex-end;
  min-width: 360px; opacity: 0; transition: opacity var(--acc-in) var(--acc-ease); }
.fq-acc-panel.is-open .fq-acc-body { opacity: 1; transition-delay: 0.6s; }
.fq-acc-h { display: block; font: 300 clamp(36px, 3.4vw, 56px)/1.05 var(--fq-serif); font-variation-settings: "SOFT" 30, "WONK" 0; margin-bottom: 16px; }
.fq-acc-p { display: block; font: 300 clamp(20px, 1.7vw, 24px)/1.3 var(--fq-serif); font-variation-settings: "SOFT" 30; max-width: 30ch; }
.fq-acc-panel:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }
@media (max-width: 900px) {
  .fq-acc { flex-direction: column; height: auto; }
  .fq-acc-panel { flex: none; height: 76px; transition: height var(--acc-in) var(--acc-ease); }
  .fq-acc-panel.is-open { flex: none; height: 300px; }
  .fq-acc-label { writing-mode: horizontal-tb; transform: none; width: auto; left: 24px; bottom: auto; top: 22px; font-size: 26px; }
  .fq-acc-body { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .fq-acc-panel, .fq-acc-label, .fq-acc-body { transition: none !important; } }
/* A small "+" at the foot of each closed panel, so people see the panels open (Mariane, 9 Oct).
   The same plus as the questions on the first-visit page; it fades away as the panel opens. */
.fq-acc-panel::after { content: "+"; position: absolute; left: 0; width: 96px; top: 22px; text-align: center;
  font: 300 26px/1 var(--fq-sans); color: inherit; opacity: 0.85; transition: opacity var(--acc-in) var(--acc-ease); }
.fq-acc-panel.is-open::after { opacity: 0; }
@media (max-width: 900px) { .fq-acc-panel::after { left: auto; right: 22px; width: auto; top: 22px; } }
/* No gap between the panels: one block of colour, rounded only at its outer corners (Mariane, 9 Oct). */
.fq-acc { gap: 0; border-radius: var(--fq-r); overflow: hidden; }
.fq-acc-panel { border-radius: 0; }
/* Five panels (Mariane, 9 Oct): terracotta for the shop, bay leaf (the dark green) for locals, last.
   Links inside the open panel underline in the panel's text colour; closed panels hide their words
   from keyboards and screen readers too. */
.fq-acc--terracotta { background: var(--terracotta); color: var(--off-white); }
.fq-acc--bay { background: var(--bay-leaf); color: var(--off-white); }
.fq-acc-p a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.fq-acc-panel:not(.is-open) .fq-acc-body { visibility: hidden; }
.fq-acc-p { max-width: 34ch; }

/* Accordion, round 3 (Mariane, 9 Oct):
   - every panel keeps a fixed 96px base and only its grow changes (0 to 1), with the same easing
     for the panel that opens and the one that closes, so the row always fills the width and the
     last panel no longer drifts left while panels change
   - the panel's word stays as its only title (no second title inside), the words in the body font
   - light text on apricot too (her call, against the contrast rule) */
.fq-acc-panel { flex: 0 0 96px; min-width: 0; transition: flex-grow var(--acc-in) var(--acc-ease); }
.fq-acc-panel.is-open { flex: 1 0 96px; }
.fq-acc--apricot { color: var(--off-white); }
.fq-acc-panel.is-open .fq-acc-label { opacity: 1; }
.fq-acc-panel.is-open::after { opacity: 0; }
.fq-acc-body { padding: clamp(28px, 3vw, 48px) clamp(28px, 3vw, 48px) 28px calc(96px + 8px); justify-content: flex-end; }
.fq-acc-p { font: 400 var(--fq-t-body)/1.55 var(--fq-sans); font-variation-settings: normal; max-width: 44ch; }
@media (max-width: 900px) {
  .fq-acc-panel { flex: none; }
  .fq-acc-panel.is-open { flex: none; }
  .fq-acc-body { padding: 68px 24px 24px; justify-content: flex-start; }
  .fq-acc-panel.is-open { height: auto; min-height: 76px; }
}
@media (max-width: 900px) {
  /* phones: the open panel grows to fit its words (max-height eases, so it still breathes open) */
  .fq-acc-panel, .fq-acc-panel.is-open { height: auto; min-height: 0; max-height: 76px; transition: max-height var(--acc-in) var(--acc-ease); }
  .fq-acc-panel.is-open { max-height: 520px; }
  .fq-acc-body { position: relative; inset: auto; display: block; }
}
/* Accordion, round 4 (Mariane, 9 Oct): panels open at a normal speed on click; only the words
   fade in slowly, like a breath. */
.fq-acc-panel { transition: flex-grow 0.6s var(--acc-ease); }
.fq-acc-panel::after, .fq-acc-label { transition: opacity 0.6s var(--acc-ease); }
.fq-acc-body { transition: opacity 0.2s linear; }
.fq-acc-panel.is-open .fq-acc-body { transition: opacity 2.4s var(--acc-ease) 0.4s; }
@media (max-width: 900px) { .fq-acc-panel, .fq-acc-panel.is-open { transition: max-height 0.6s var(--acc-ease); } }

/* Home order, 9 Oct (Mariane): top, week, classes, the morning, the accordion, teachers, reviews,
   "before you roll out your mat" with the first visit, prices. The later sand blocks are plain:
   no swell edge, and their first title sits at the top of the block. */
.fq-home .fq-sand.fq-sand--plain { border-radius: 0; box-shadow: none; padding: clamp(80px, 9vw, 140px) 0; }
.fq-sand--plain .fq-wrap > .fq-center:first-child, .fq-paper .fq-wrap > :first-child > .fq-center:first-child { margin-top: 0; }
.fq-btn-row--first { margin-top: 20px; }
.fq-sand--plain .fq-ways + .fq-pair { margin-top: clamp(12px, 1.2vw, 20px); }
/* The teachers and the prices now open their own blocks: no extra space above them. */
.fq-paper .fq-wrap > :is(.fq-prices, .fq-teachers):first-child { margin-top: 0; padding-top: 0; }
.fq-paper .fq-wrap > :is(.fq-prices, .fq-teachers):first-child > .fq-center:first-child { margin-top: 0; }

/* "Antes de abrir o mat", option A (Mariane, 9 Oct): the four points without boxes, a fine line on
   top of each, like a magazine; generous space before the first-class block. */
.fq-home .fq-sand--plain .fq-ways--all { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 56px); }
.fq-home .fq-sand--plain .fq-way { background: none; box-shadow: none; border-radius: 0; padding: 22px 0 0; min-height: 0; gap: 12px;
  border-top: 1px solid var(--fq-line); justify-content: flex-start; }
.fq-home .fq-sand--plain .fq-way h3 { font-size: clamp(22px, 1.8vw, 28px); }
.fq-home .fq-sand--plain .fq-ways + .fq-pair { margin-top: clamp(110px, 11vw, 180px); }
@media (max-width: 900px) { .fq-home .fq-sand--plain .fq-ways--all { grid-template-columns: 1fr 1fr; row-gap: 36px; } }
@media (max-width: 560px) { .fq-home .fq-sand--plain .fq-ways--all { grid-template-columns: 1fr; } }
/* Alignment (Mariane, 9 Oct): the first-class block lines up with the four points above (same left
   edge, no inner box), its title level with the top of the photo, and less space between them. */
.fq-home .fq-sand--plain .fq-ways + .fq-pair { margin-top: clamp(72px, 7vw, 112px); column-gap: clamp(32px, 4vw, 80px); }
.fq-home .fq-sand--plain .fq-ways + .fq-pair .fq-card--sand { background: none; padding: 0; justify-content: flex-start; }
.fq-home .fq-sand--plain .fq-ways + .fq-pair .fq-card--sand h2 { margin-top: -0.12em; }

/* Prices: the private class is a third plan with the same layout (who, title, line, price rows),
   in wine so it stands out (Mariane, 9 Oct). Three across on a computer, stacked on phones. */
.fq-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fq-plans .fq-plan--private { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0;
  background: var(--wine); box-shadow: none; color: color-mix(in srgb, var(--off-white) 86%, transparent); }
.fq-plan--private h3, .fq-plan--private li, .fq-plan--private a { color: var(--off-white); }
.fq-plan--private ul, .fq-plan--private li { border-color: rgb(244 231 217 / 0.22); }
.fq-plan-ask { margin: 8px 0 0; }
@media (max-width: 900px) { .fq-plans { grid-template-columns: 1fr; } .fq-plans .fq-plan--private { display: block; grid-row: auto; } }

/* Footer in cinnabar, off-white text (Mariane, 10 Oct). */
.fq-foot { background: var(--cinnabar); color: var(--off-white); }
.fq-foot :is(.fq-foot-h, h3, p, li, a) { color: var(--off-white); }
.fq-foot h3 { opacity: 0.85; }
.fq-foot-bottom { border-color: rgb(244 231 217 / 0.3); }
.fq-foot-logo { background-color: var(--off-white); }

/* Reviews carousel (Mariane, 10 Oct): turns on its own, arrows at both ends. */
.fq-marquee-box { position: relative; }
.fq-marquee[data-auto] { overflow-x: auto; scrollbar-width: none; }
.fq-marquee[data-auto]::-webkit-scrollbar { display: none; }
.fq-marquee-box .fq-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.fq-marquee-box .fq-arrow--prev { left: var(--fq-gutter); }
.fq-marquee-box .fq-arrow--next { right: var(--fq-gutter); }

/* Footer, compact (Mariane, 10 Oct; option A): smaller line, half the space, a fine rule before the
   closing text, no icon, the closing text on one line on a computer. */
.fq-foot { padding: 40px 0 24px; }
.fq-foot-h { font-size: var(--fq-t-2); }
.fq-foot ul { gap: 4px; }
.fq-foot h3 { margin-bottom: 8px; }
.fq-foot-bottom { margin-top: 28px; padding-top: 16px; border-top: 1px solid rgb(244 231 217 / 0.3); }
.fq-foot-logo { display: none; }
.fq-foot-bottom p { max-width: none; }
@media (max-width: 900px) { .fq-foot { padding: 36px 0 24px; } }

/* "Uma manhã no deck" on phones: the wide S (v11.js) instead of the straight line at the side. */
.fq-s-line { display: none; }
@media (max-width: 900px) {
  .fq-home .fq-morning-inner { position: relative; }
  .fq-home .fq-moments { border-left: 0; padding-left: 0; gap: 120px; position: relative; z-index: 1; }
  .fq-home .fq-moment { width: 78%; transition: opacity 0.6s ease; }
  .fq-home .fq-moment:nth-child(2) { margin-left: auto; }
  .fq-s-line { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
  .fq-s-line path { fill: none; stroke: color-mix(in srgb, var(--off-white) 85%, transparent); stroke-width: 1.2; }
  .fq-s-line circle { fill: var(--off-white); }
}
/* The private class in the same colours and style as the other two plans (Mariane, 10 Oct). */
.fq-plans .fq-plan--private { background: var(--fq-paper); box-shadow: inset 0 0 0 1px var(--fq-line); color: var(--fq-ink-soft); }
.fq-plan--private h3, .fq-plan--private li, .fq-plan--private a { color: var(--fq-ink); }
.fq-plan--private ul, .fq-plan--private li { border-color: var(--fq-line); }

/* Five wine stars above each review in the carousel (Mariane, 10 Oct). */
.fq-stars { display: flex; gap: 4px; margin-bottom: 16px; }
.fq-stars svg { width: 16px; height: 16px; fill: var(--apricot); stroke: var(--wine); stroke-width: 1.1; stroke-linejoin: round; }

/* Carousel reviews a little smaller (Mariane, 10 Oct): 18px to 16px. */
.fq-marquee .fq-quote p { font-size: 16px; }

/* The bar's "Guia rápido" opens the quick guide in place (v11-all.js); "Reserve sua vaga" is the only
   Book button, fixed on the right on every page, phones included (Mariane, 10 Oct). */
.fq-guide-btn, .fq-guide-btn:hover { gap: 8px; background: rgb(244 231 217 / 0.72); color: var(--wine); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.fq-guide-btn:hover { background: rgb(244 231 217 / 0.86); }
.fq-guide-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform 0.3s; }
.fq-guide-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.fq-guide {
  position: fixed; top: 88px; right: var(--fq-gutter); z-index: 70; width: min(820px, calc(100% - 2 * var(--fq-gutter)));
  border-radius: var(--fq-r); overflow: hidden; background: rgb(244 231 217 / 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid rgb(244 231 217 / 0.7); box-shadow: 0 20px 60px rgb(30 26 20 / 0.25);
}
.fq-guide iframe { display: block; width: 100%; height: 100%; border: 0; background: transparent; transform-origin: 0 0; }
.fq-guide-close { position: absolute; top: 8px; right: 8px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--fq-line); background: var(--fq-paper); color: var(--wine); font-size: 20px; line-height: 1; cursor: pointer; }
.fq-sticky, .fq-sticky:hover { left: auto; right: var(--fq-gutter); border-radius: var(--fq-r); background: var(--apricot); color: var(--wine); }   /* same shape as the page buttons */
.fq-sticky:hover { filter: brightness(1.05); }
@media (max-width: 720px) {
  .fq-guide { top: 66px; right: 8px; width: calc(100% - 16px); }
  .fq-sticky { display: block; bottom: 16px; padding: 14px 20px; font-size: 14px; }
}
.fq-guide-btn { white-space: nowrap; }
@media (max-width: 380px) { .fq-guide-btn { padding: 0 12px; gap: 6px; } }
/* The bar a little more see-through once the page scrolls, so the glass shows (Mariane, 10 Oct). */
.fq-bar { background: rgb(102 54 48 / 0.78); }   /* 0.78 keeps the off-white text above 4.5:1 on the light pages */
/* "For larger groups, get in touch" under the private class prices (Mariane, 10 Oct). */
.fq-plan-note { margin: 10px 0 0; font: 400 13px/1.4 var(--fq-sans); opacity: 0.8; }

/* Page titles like the home's section titles (Mariane, 10 Oct): sentence case, same size and softness,
   instead of all caps at hero size. */
.fq-page-title, html.fq.fq-page .fq-open .fq-page-title {
  font-size: var(--fq-t-1); line-height: 0.98; text-transform: none; font-variation-settings: "SOFT" 30, "WONK" 0;
}
html.fq.fq-page :is(.page-hero h1, .hero-name, .op-hero-copy h1) { text-transform: none; font-variation-settings: "SOFT" 30, "WONK" 0; line-height: 0.98; }

/* Footer on phones, tighter (Mariane, 10 Oct): smaller closing line, the two link columns side by side,
   the address across the full width in two columns, less space everywhere. */
@media (max-width: 720px) {
  .fq-foot { padding: 32px 0 20px; }
  .fq-foot-top { gap: 22px; }
  .fq-foot-h { font-size: 30px; }
  .fq-foot-cols { gap: 20px 16px; }
  .fq-foot-cols > div:nth-child(3) { grid-column: 1 / -1; }
  .fq-foot-cols > div:nth-child(3) ul { grid-template-columns: 1fr 1fr; column-gap: 16px; }   /* lines up with the two columns above */
  .fq-foot h3 { margin-bottom: 8px; }
  .fq-foot ul { gap: 5px; font-size: 14px; line-height: 1.35; }
  .fq-foot-bottom { margin-top: 22px; padding-top: 14px; }
  .fq-foot-bottom p { font-size: 12px; line-height: 1.5; }
}

/* English hero (Mariane, 10 Oct): the Portuguese title, what the name means, and a smaller line under it. */
.fq-hero-def { margin: 18px 0 0; font: 300 clamp(19px, 1.7vw, 26px)/1.25 var(--fq-serif); color: var(--off-white); }
.fq-hero-def i { font-style: italic; }
.fq-hero-tag { margin: 6px 0 0; font: 300 italic clamp(15px, 1.15vw, 18px)/1.35 var(--fq-serif); color: color-mix(in srgb, var(--off-white) 85%, transparent); }
.fq-hero-def + .fq-hero-tag + .fq-hero-sub { margin-top: 18px; }

/* The language switch stays in the bar on phones too: the menu no longer repeats it (Mariane, 10 Oct). */
@media (max-width: 720px) {
  .fq-lang { display: inline-flex; padding: 8px 4px; font-size: 13px; }
  /* room for it: on phones the menu button shows only its dots (the word stays for screen readers) */
  .fq-menu-btn .fq-menu-open, .fq-menu-btn .fq-menu-close { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fq-bar-end { gap: 2px; }
}
@media (max-width: 340px) { .fq-lockup { width: 92px; } .fq-guide-btn { padding: 0 10px; gap: 4px; } }

/* Hero on phones (Mariane, 10 Oct): the short title keeps its weight, the line under it fits in two lines. */
@media (max-width: 720px) {
  .fq-hero h1 { font-size: min(64px, 16vw); }
  .fq-hero-sub { font-size: 13.5px; margin-inline: -4px; }
  .fq-hero-addr { font-size: 12.5px; }   /* stays a step below the line above it */
}

/* The sea sound sits in the bar as a speaker icon (Mariane, 10 Oct). */
.fq-sound { padding: 8px; }
.fq-sound .fq-hp { width: 20px; height: 20px; stroke-width: 1.5; stroke-linejoin: round; }

/* Bar order (Mariane, 10 Oct): Guia rápido, sound, language, menu last; on phones the menu shows the
   three-line icon. */
.fq-guide-btn { order: 1; } .fq-sound { order: 2; } .fq-lang { order: 3; } .fq-menu-btn { order: 4; }
.fq-guide-btn { margin-right: 4px; }
@media (max-width: 720px) {
  .fq-guide-btn { margin-right: 0; }
  .fq-sound { padding: 6px 4px; }
  .fq-sound .fq-hp { width: 19px; height: 19px; }
  .fq-menu-btn { padding: 8px 6px 8px 8px; }
  .fq-guide-btn { padding: 0 10px 0 12px; gap: 6px; }
  .fq-lang { padding: 8px 3px; }
  .fq-bar-end { gap: 0; }
  .fq-menu-btn .fq-dots { gap: 4px; }
  .fq-menu-btn .fq-dots i, .fq-menu-btn .fq-dots::after { width: 18px; height: 2px; border-radius: 1px; background: currentColor; }
  .fq-menu-btn .fq-dots::after { content: ""; }
}
@media (max-width: 340px) { .fq-sound { padding: 2px; } .fq-lang { padding: 8px 2px; } .fq-guide-btn { padding: 0 8px; font-size: 12px; gap: 4px; } .fq-menu-btn { padding: 8px 2px 8px 4px; } }

/* The quick guide tab, hanging from the middle of the bar (Mariane, 10 Oct; test 1). With JavaScript the
   bar's "Guia rápido" link gives way to it. */
html.fq-guide-tabbed .fq-guide-btn { display: none !important; }
.fq-guide-tab {
  position: fixed; top: 77px; left: 50%; transform: translateX(-50%); z-index: 58; height: 40px; padding: 0 20px;
  display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 0 0 18px 18px; cursor: pointer;
  font: 500 14px/1 var(--fq-sans); color: var(--wine); white-space: nowrap; overflow: hidden;
  background: rgb(244 231 217 / 0.78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 3px 12px rgb(102 54 48 / 0.12); transition: height 0.45s, width 0.45s, padding 0.45s, gap 0.45s;
}
.fq-guide-tab svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform 0.3s; }
.fq-guide-tab[aria-expanded="true"] svg { transform: rotate(180deg); }
.fq-guide-tab-label { max-width: 140px; transition: max-width 0.45s, opacity 0.3s; }
.fq-guide-tab.is-small { height: 30px; width: 52px; padding: 0; gap: 0; }
.fq-guide-tab.is-small .fq-guide-tab-label { max-width: 0; opacity: 0; }
.fq-guide { top: 124px; left: 50%; right: auto; transform: translateX(-50%); }
@media (max-width: 720px) {
  .fq-guide-tab { top: 69px; }
  .fq-guide { top: 116px; right: auto; }
}
@media (prefers-reduced-motion: reduce) { .fq-guide-tab, .fq-guide-tab-label { transition: none; } }

/* Page transition (Mariane, 10 Oct; option A): a brief wash of cinnabar between pages. Leaving: v11-all.js
   lays .fq-tx-out over the page; arriving: the script in each page's head sets .fq-tx-in for one load. */
.fq-tx-out { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; }
.fq-tx-out.is-on { opacity: 1; }
html.fq-tx-in body::after { content: ""; position: fixed; inset: 0; z-index: 2147483000; background: var(--fq-tx); pointer-events: none;
  animation: fq-tx-fade 0.45s 0.05s ease forwards; }
@keyframes fq-tx-fade { to { opacity: 0; visibility: hidden; } }

/* Footer links in the same weight on every page (the old page layout made them bold). */
html.fq .fq-foot a { font-weight: 400; }

/* Links inside text look the same on every page, as on the home: regular weight, underlined
   (the booking and quick guide pages had them bold, not underlined). */
html.fq.fq-page main :is(p, li) a:not(.btn):not(.fq-btn) { font-weight: 400; text-decoration: underline; text-underline-offset: 2px; }
/* The quick guide page: "Como agendar" framed like the other cards, as in the guide that opens on the home. */
html.fq.fq-page .op-book { background: var(--fq-paper); border: 0; box-shadow: inset 0 0 0 1px var(--fq-line); }

/* Classes page: the "Antes de abrir o tapete" block right under the title, then the week. */
.fq-inner .fq-center--page + .fq-center { margin-top: 0; }
.fq-ways--how + .fq-pair { margin-top: clamp(64px, 8vw, 120px); }
/* Read by screen readers, not shown (the classes page title). */
.fq-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.fq-inner .fq-pair + .fq-center { margin-top: clamp(96px, 9vw, 150px); }
/* Classes page, no visible title: the first block starts closer to the bar. */
.fq-inner .fq-sand:has(.fq-wrap > .fq-sr:first-child) { padding-top: clamp(118px, 10vw, 150px); }
.fq-inner .fq-sr + .fq-center { margin-top: 0; padding-top: 0; }

/* One rhythm for section titles on every page (Mariane, 10 Oct): the same space between a title and what
   follows it, whatever the section ("Agenda semanal" sat too close to its cards). */
main .fq-center:not(.fq-center--page) { margin-bottom: clamp(36px, 3.6vw, 52px); }
main .fq-center:not(.fq-center--page) > :last-child { margin-bottom: 0; }
main .fq-center:not(.fq-center--page) + * { margin-top: 0 !important; }
/* "Fora da grade": the two buttons line up at the bottom of their cards. */
.fq-ways--two .fq-way { display: flex; flex-direction: column; }
.fq-ways--two .fq-way > p:last-child { margin-top: auto; padding-top: 16px; }

/* Classes page: each class as a sheet (Mariane, 10 Oct; test B). Two columns divided by fine lines; on the
   left the number and name, held under the bar while you scroll, with the photo; on the right the first
   line, a grid of facts, the text and the button. One column on phones. */
.fq-sheets { border-top: 1px solid var(--fq-line); margin: 0 calc(-1 * var(--fq-gutter)); }
.fq-sheet { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--fq-line); }
.fq-sheet-left { border-right: 1px solid var(--fq-line); }
.fq-sheet-name { position: sticky; top: 78px; z-index: 1; margin: 0; padding: 22px var(--fq-gutter); display: flex; gap: 28px; align-items: baseline;
  font: 300 clamp(34px, 3.6vw, 56px)/1 var(--fq-serif); font-variation-settings: "SOFT" 30; color: var(--fq-ink); background: var(--fq-sand); border-bottom: 1px solid var(--fq-line); }
.fq-sheet-name span { font-size: 0.8em; opacity: 0.7; letter-spacing: -0.02em; }
.fq-sheet-photo { position: sticky; top: 180px; padding: 28px var(--fq-gutter) 40px; }
.fq-sheet-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--fq-r); display: block; }
.fq-sheet-right { padding: 28px var(--fq-gutter) 64px clamp(28px, 3vw, 48px); }
.fq-sheet-lead { font: 300 clamp(30px, 3vw, 46px)/1.12 var(--fq-serif); font-variation-settings: "SOFT" 30; color: var(--fq-ink); margin: 0 0 36px; max-width: 18ch; }
.fq-sheet-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; margin: 0 0 32px; }
.fq-sheet-facts dt { font: 500 13px/1.2 var(--fq-sans); color: var(--fq-ink); opacity: 0.65; margin-bottom: 6px; }
.fq-sheet-facts dd { margin: 0; font: 400 15px/1.4 var(--fq-sans); color: var(--fq-ink); }
.fq-sheet-text { max-width: 54ch; font: 400 15px/1.6 var(--fq-sans); margin: 0 0 28px; }
.fq-ways--one { display: grid; grid-template-columns: minmax(0, 760px); justify-content: center; }
@media (max-width: 900px) {
  .fq-sheets { margin: 0; }
  .fq-sheet { grid-template-columns: 1fr; }
  .fq-sheet-left { border-right: 0; }
  .fq-sheet-name, .fq-sheet-photo { position: static; }
  .fq-sheet-name { padding: 20px 0; background: none; }
  .fq-sheet-photo { padding: 0 0 8px; }
  .fq-sheet-right { padding: 20px 0 48px; }
}

/* Prices page (Mariane, 12 Oct; test A): a wide photo of the class between the opening line and the plans. */
.fq-band { margin: 0 0 clamp(40px, 4vw, 64px); border-radius: var(--fq-r); overflow: hidden; aspect-ratio: 21 / 8; }
.fq-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 720px) { .fq-band { aspect-ratio: 4 / 3; } }
/* No visible title: the price block starts as close to the bar as the classes page's first block. */
.fq-inner .fq-sr + .fq-prices { margin-top: 0; padding-top: 0; }

/* First visit (Mariane, 12 Oct). The title inside a soft apricot circle that breathes, about 4 s each way. */
.fq-visit { padding-top: clamp(96px, 8vw, 120px); }
.fq-breath-head { position: relative; display: grid; place-items: center; height: clamp(320px, 34vw, 500px); margin: 0 0 clamp(24px, 3vw, 48px); }
.fq-breath { position: absolute; left: 50%; top: 50%; width: clamp(320px, 34vw, 500px); aspect-ratio: 1; transform: translate(-50%, -50%); }
.fq-breath span { position: absolute; inset: 0; border-radius: 50%; animation: fq-breathe 8s ease-in-out infinite;
  background: radial-gradient(circle, color-mix(in srgb, var(--apricot) 70%, transparent) 0%, color-mix(in srgb, var(--apricot) 0%, transparent) 70%); }
.fq-breath span + span { inset: 6%; background: none; border: 1px solid color-mix(in srgb, var(--wine) 35%, transparent); animation-delay: -0.4s; }
@keyframes fq-breathe { 0%, 100% { transform: scale(0.72); opacity: 0.55; } 45%, 55% { transform: scale(1.06); opacity: 1; } }
.fq-breath-title { position: relative; text-align: center; font: 300 var(--fq-t-2)/1.05 var(--fq-serif); font-variation-settings: "SOFT" 30; color: var(--fq-ink); margin: 0; max-width: 12ch; }
/* The home's card, a little larger; on the right (or left) its photo. */
.fq-visit-pair .fq-card--sand { justify-content: flex-start; }
.fq-visit-pair .fq-lines { margin: 0; }
.fq-visit-pair .fq-lines li { padding: 22px 0; }
.fq-visit-pair .fq-lines h3, .fq-q h3 { font-size: clamp(19px, 1.5vw, 22px); }
.fq-visit-pair .fq-lines p, .fq-q-a p { font-size: 15px; line-height: 1.6; margin: 0; }
@media (min-width: 901px) {
  .fq-visit-pair .fq-media--tall { min-height: clamp(360px, 34vw, 560px); }
  .fq-visit-flip .fq-card--media { order: -1; }
}
/* The walking line, as in "Uma manhã no deck": the dot goes down the four lines as you read (v11-all.js). */
.fq-walk { position: relative; padding-left: 34px; }
.fq-walk-line { position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: var(--fq-line); }
.fq-walk-line::before { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: var(--p, 0%); background: var(--wine); }
.fq-walk-line i { position: absolute; left: -5px; top: var(--p, 0%); width: 11px; height: 11px; border-radius: 50%; background: var(--wine); transform: translateY(-50%); box-shadow: 0 0 0 6px rgb(102 54 48 / 0.12); }
.fq-walk li h3 { transition: color 0.6s ease; }
.fq-walk.is-on li:not(.is-here) h3 { color: color-mix(in srgb, var(--fq-ink) 55%, transparent); }
/* Section titles outside the boxes, with room between the sections. */
.fq-visit-title { margin-top: clamp(96px, 9vw, 150px); }
/* What you don't need to bring: one drawing per item. */
.fq-have { list-style: none; margin: 0 auto; padding: 0; max-width: 1100px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 20px); }
.fq-have li { background: var(--fq-sand); border-radius: var(--fq-r); padding: clamp(24px, 2.6vw, 40px) 16px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.fq-have svg { width: clamp(48px, 4.4vw, 64px); height: auto; fill: none; stroke: var(--wine); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fq-have span { font: 400 clamp(18px, 1.4vw, 21px)/1.2 var(--fq-serif); color: var(--fq-ink); }
@media (max-width: 600px) { .fq-have { grid-template-columns: 1fr; } }
/* The questions, folded: only the question shows, the arrow opens the answer. */
.fq-qs { border-top: 1px solid var(--fq-line); }
.fq-q { border-bottom: 1px solid var(--fq-line); }
.fq-q summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; }
.fq-q summary::-webkit-details-marker { display: none; }
.fq-q summary:focus-visible { outline: 2px solid var(--wine); outline-offset: 4px; }
.fq-q h3 { margin: 0; }
.fq-q-arrow { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--wine); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.4s ease; }
.fq-q[open] .fq-q-arrow { transform: rotate(180deg); }
.fq-q-a { padding: 0 0 24px; max-width: 58ch; }
.fq-q-a p + p { margin-top: 10px; }
/* Closing: a wide photo with one line over it, right after the section's own bottom space. */
.fq-close { position: relative; margin-top: 0; height: clamp(360px, 42vw, 620px); overflow: hidden; display: grid; place-items: end start; }
.fq-close img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fq-close::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(30 26 20 / 0) 40%, rgb(30 26 20 / 0.55)); }
.fq-close-line { position: relative; z-index: 1; margin: 0; padding: 0 var(--fq-gutter) clamp(32px, 4vw, 64px); font: 300 clamp(40px, 5.4vw, 84px)/1 var(--fq-serif); font-variation-settings: "SOFT" 30; color: var(--off-white); }
@media (prefers-reduced-motion: reduce) { .fq-breath span { animation: none; transform: scale(0.9); } .fq-walk li h3, .fq-q-arrow { transition: none; } }

/* The next page, on every page (Mariane, 12 Oct): a quiet button in the page's colour, a fine line around it,
   an arrow at the side (next_btn.py). */
.fq-next { padding: clamp(56px, 6vw, 96px) var(--fq-gutter) clamp(72px, 7vw, 120px); text-align: center; background: var(--fq-paper); }
.fq-next p { margin: 0 auto; max-width: none; }
html.fq main .fq-next a.fq-nextbtn { text-decoration: none !important; font-weight: 500 !important; }   /* the older pages underline links in text */
.fq-nextbtn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; border-radius: var(--fq-r); background: var(--fq-paper);
  box-shadow: inset 0 0 0 1px var(--fq-line); color: var(--fq-ink); font: 500 15px/1 var(--fq-sans); text-decoration: none; transition: box-shadow 0.3s ease; }
html.fq .fq-nextbtn { text-decoration: none; }
.fq-nextbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s ease; }
.fq-nextbtn:hover { box-shadow: inset 0 0 0 1px var(--wine); }
.fq-nextbtn:hover svg { transform: translateX(4px); }
.fq-nextbtn:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .fq-nextbtn svg { transition: none; } }
/* Phones and tablets: the next-page button sits higher, clear of the fixed "Book now" button in the bottom corner. */
@media (max-width: 900px) { .fq-next { padding-top: 32px; padding-bottom: 128px; } }
/* "O que NÃO precisa levar" (Mariane, 12 Oct): as the title comes into view, a fine line draws slowly under the
   word, stays a moment and slips away; no block of colour, and nothing stays on the page afterwards. */
.fq-hl { white-space: nowrap; background: linear-gradient(var(--wine), var(--wine)) no-repeat left 0 bottom 0.04em / 0% 1.5px; }
.fq-hl.is-in { animation: fq-hl 4s cubic-bezier(0.45, 0, 0.25, 1) 0.4s both; }
@keyframes fq-hl {
  0% { background-size: 0% 1.5px; background-position: left 0 bottom 0.04em; }
  35% { background-size: 100% 1.5px; background-position: left 0 bottom 0.04em; }
  70% { background-size: 100% 1.5px; background-position: right 0 bottom 0.04em; }
  100% { background-size: 0% 1.5px; background-position: right 0 bottom 0.04em; }
}
@media (prefers-reduced-motion: reduce) { .fq-hl.is-in { animation: none; } }

/* The team page (Mariane, 12 Oct; tools/v11/team_page.py): round portraits with names at the top, then one
   profile per teacher: name, labels and photo held on the left, her words and story on the right. */
.fq-team { padding-top: clamp(118px, 10vw, 150px); }
.fq-team-title { font: 300 var(--fq-t-2)/1.05 var(--fq-serif); font-variation-settings: "SOFT" 30; color: var(--fq-ink); text-align: center; margin: 0 0 28px; }
.fq-faces { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(20px, 3vw, 44px); list-style: none; margin: 0 0 clamp(56px, 6vw, 96px); padding: 0; }
.fq-faces a { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--fq-ink); font: 500 14px/1.2 var(--fq-sans); text-align: center; }
html.fq main .fq-faces a { text-decoration: none; }
.fq-face { width: clamp(76px, 7vw, 104px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--fq-sand); box-shadow: 0 0 0 1px var(--fq-line);
  display: grid; place-items: center; transition: transform 0.5s ease, box-shadow 0.5s ease; }
.fq-face img { width: 100%; height: 100%; object-fit: cover; }
.fq-face-soon { width: 44%; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--fq-ink); opacity: 0.4; }
.fq-faces a:hover .fq-face { transform: translateY(-3px); }
.fq-faces a.is-on .fq-face { box-shadow: 0 0 0 2px var(--fq-paper), 0 0 0 3px var(--wine); }
.fq-faces small { font: 400 12px/1.2 var(--fq-sans); color: var(--fq-ink-soft); }
.js-faces .fq-faces li { opacity: 0; transform: translateY(10px) scale(0.92); animation: fq-face-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.js-faces .fq-faces li:nth-child(2) { animation-delay: 0.15s; }
.js-faces .fq-faces li:nth-child(3) { animation-delay: 0.3s; }
.js-faces .fq-faces li:nth-child(n+4) { animation-delay: 0.45s; }
@keyframes fq-face-in { to { opacity: 1; transform: none; } }
.fq-prof { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 72px); padding: clamp(48px, 5vw, 80px) 0; border-top: 1px solid var(--fq-line); scroll-margin-top: 90px; }
.fq-prof-head { position: sticky; top: 110px; align-self: start; }
.fq-prof-head h2 { font: 300 clamp(36px, 3.6vw, 56px)/1.05 var(--fq-serif); font-variation-settings: "SOFT" 30; margin: 0 0 18px; }
.fq-prof-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fq-prof-tags li { font: 500 12px/1 var(--fq-sans); padding: 8px 10px; border-radius: 6px; background: color-mix(in srgb, var(--apricot) 30%, var(--fq-sand)); color: var(--fq-ink); }
.fq-prof-tags li.is-when { background: none; box-shadow: inset 0 0 0 1px var(--fq-line); }
.fq-prof-photo { margin-top: 24px; border-radius: var(--fq-r); overflow: hidden; aspect-ratio: 4 / 5; max-height: calc(100svh - 330px); min-height: 280px; }
.fq-prof-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fq-prof-body { align-self: center; }
.fq-prof-body p { max-width: 58ch; }
.fq-prof-body .fq-lines { margin-top: 28px; }
.fq-prof-body .fq-lines li { padding: 18px 0; }
.fq-prof-body .fq-lines p { font-size: 14px; margin: 0; }
@media (max-width: 900px) { .fq-prof { grid-template-columns: 1fr; } .fq-prof-head { position: static; } .fq-prof-photo { max-height: none; } }
@media (prefers-reduced-motion: reduce) { .js-faces .fq-faces li { animation: none; opacity: 1; transform: none; } .fq-face { transition: none; } }

/* The booking page (Mariane, 12 Oct; tools/v11/book_page.py): the home's "Agenda semanal" block, read more slowly. */
.fq-agenda { padding-top: clamp(24px, 3vw, 40px); background: var(--fq-paper); }   /* this page's body already starts below the bar */
.fq-agenda-title { font: 300 var(--fq-t-2)/1.05 var(--fq-serif); font-variation-settings: "SOFT" 30; color: var(--fq-ink); text-align: center; margin: 0 0 clamp(36px, 3.6vw, 52px); }
/* the week under the title: the line draws to today, today breathes, a tap goes to that day in the calendar */
.fq-bw { position: relative; max-width: 1100px; margin: 0 auto clamp(40px, 4vw, 64px); }
.fq-bw ol { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.fq-bw-line { position: absolute; left: calc(100% / 14); right: calc(100% / 14); top: 9px; height: 1px; background: var(--fq-line); }
.fq-bw-line i { display: block; height: 100%; background: var(--wine); transform-origin: left; transform: scaleX(0); transition: transform 1.6s cubic-bezier(0.45, 0, 0.25, 1) 0.3s; }
.fq-bw.is-on .fq-bw-line i { transform: scaleX(var(--to, 0)); }
.fq-bw button { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; width: 100%; }
.fq-bw button:focus-visible { outline: 2px solid var(--wine); outline-offset: 4px; border-radius: 6px; }
.fq-bw-dot { position: relative; width: 19px; height: 19px; border-radius: 50%; background: var(--fq-paper); box-shadow: inset 0 0 0 1.5px var(--wine); margin-bottom: 6px; }
.fq-bw li.is-past .fq-bw-dot { background: var(--wine); opacity: 0.35; }
.fq-bw li.is-today .fq-bw-dot { background: var(--wine); }
.fq-bw li.is-today .fq-bw-dot::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid var(--wine); animation: fq-bw-breathe 4s ease-in-out infinite; }
@keyframes fq-bw-breathe { 0%, 100% { transform: scale(0.7); opacity: 0; } 50% { transform: scale(1.15); opacity: 0.6; } }
.fq-bw b { font: 500 13px/1 var(--fq-sans); color: var(--fq-ink); }
.fq-bw span:not(.fq-bw-dot) { font: 400 clamp(15px, 1.2vw, 18px)/1.15 var(--fq-serif); color: var(--fq-ink); }
.fq-bw small { font: 400 12px/1.2 var(--fq-sans); color: var(--fq-ink-soft); }
.fq-bw li[data-day="0"] span:not(.fq-bw-dot), .fq-bw li[data-day="0"] small { opacity: 0.6; }
.sched-day.is-flash { animation: fq-bw-flash 2.4s ease; }
@keyframes fq-bw-flash { 0%, 100% { background: transparent; } 25%, 60% { background: color-mix(in srgb, var(--apricot) 28%, transparent); } }
/* the home's photo and card; the live calendar in the card: class and button on one line, time and seats under them */
.fq-agenda-pair { align-items: stretch; }
@media (min-width: 901px) {
  .fq-agenda-pair .fq-card--media { position: sticky; top: 96px; align-self: start; height: calc(100svh - 120px); }
  .fq-agenda-pair .fq-media--tall { position: absolute; inset: 0; min-height: 0; }
}
.fq-agenda-card { background: var(--fq-sand); border-radius: var(--fq-r); padding: clamp(24px, 2.8vw, 48px); }
.fq-agenda-card .embed { margin: 0; }
.fq-agenda-note { font: 400 14px/1.5 var(--fq-sans); color: var(--fq-ink-soft); margin: 18px 0 0; }
.fq-agenda-pair .sched-day { grid-template-columns: 96px minmax(0, 1fr) !important; }
.fq-agenda-pair .sched-class { grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "name book" "time seats"; row-gap: 6px; align-items: center; }
.fq-agenda-pair .sched-name { grid-area: name; white-space: nowrap; }
.fq-agenda-pair .sched-time { grid-area: time; }
.fq-agenda-pair .sched-seats { grid-area: seats; justify-self: end; }
.fq-agenda-pair .sched-book { grid-area: book; justify-self: end; }
/* Phones: the day on its own line above its classes, each class the full width (the day column squeezed it to 96px). */
@media (max-width: 620px) {
  .fq-agenda-pair .sched-day { grid-template-columns: minmax(0, 1fr) !important; padding-left: 0; }
  .fq-agenda-pair .sched-day h3, .fq-agenda-pair .sched-day .sched-class, .fq-agenda-pair .sched-day .sched-flag { grid-column: 1; grid-row: auto; }
  .fq-agenda-pair .sched-class { padding-inline: 0; }
}
/* "Como funciona": the walking line of the first-visit page */
.fq-agenda-sub { font: 300 clamp(30px, 3vw, 46px)/1.1 var(--fq-serif); font-variation-settings: "SOFT" 30; color: var(--fq-ink); text-align: center; margin: clamp(96px, 9vw, 150px) 0 clamp(36px, 3.6vw, 52px); }
.fq-agenda-how { max-width: 960px; margin: 0 auto; background: var(--fq-sand); border-radius: var(--fq-r); padding: clamp(28px, 3.2vw, 56px); }
.fq-agenda-how .fq-lines { margin: 0; }
.fq-agenda-how .fq-lines li { grid-template-columns: 64px minmax(0, 1fr); padding: 22px 0; max-width: none; }
.fq-agenda-how .fq-lines h3 { font: 300 28px/1 var(--fq-serif); color: var(--wine); }
.fq-agenda-how .fq-lines p { font-size: 15px; line-height: 1.6; margin: 0; }
html.fq main .fq-agenda p a { text-decoration: underline; text-underline-offset: 2px; }
/* three photos side by side, uncropped as far as they can be; one on phones */
.fq-agenda-pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 20px); padding: clamp(96px, 9vw, 150px) var(--fq-gutter) 0; background: var(--fq-paper); }
.fq-agenda-pics figure { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--fq-r); overflow: hidden; }
.fq-agenda-pics img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .fq-bw ol { grid-template-columns: repeat(7, minmax(36px, 1fr)); }
  .fq-bw span:not(.fq-bw-dot), .fq-bw small { display: none; }
  .fq-agenda-pics { grid-template-columns: 1fr; }
  .fq-agenda-pics figure + figure { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fq-bw-line i { transition: none; } .fq-bw li.is-today .fq-bw-dot::after, .sched-day.is-flash { animation: none; } }

/* One teacher: no carousel arrows (Mayra, 12 Oct 2026: no new teacher for now). */
.fq-carousel:has(.fq-slide:only-child) .fq-arrow { display: none; }

/* ---- prod.css ---- */
/* ============================================================
   Production site (dist-prod/, tools/make-prod.py): what the live site adds to
   website v11 (site-v11/; site-v7/ before 12 Oct 2026). Copied to assets/css/prod.css and linked last.
   Tokens only (tokens.css + v7.css), so dark mode follows the site.

   1. The cookie card: discreet. Off-white card, wine text, Poppins 14px, a thin
      jalapeño line like the site's boxes, two equal buttons (cinnabar Accept,
      outline Decline). Bottom left on a computer; on a phone a slim bar that sits
      above the booking bar, never over it (consent.js sets --consent-above).
      position: fixed, so it never moves the page.
   2. The footer line: Privacy and Cookies.
   3. The privacy pages.
   ============================================================ */

/* ---------- 1. Cookie card ---------- */
.consent {
  --consent-above: 0px;
  position: fixed; z-index: 70;
  right: var(--s-5); bottom: var(--s-5);  /* right: the opening's buttons sit at the left */
  width: min(360px, calc(100vw - 2 * var(--s-5)));
  padding: var(--s-4);
  background: var(--raised); color: var(--ink);
  border: 1.5px solid var(--jalapeno); border-radius: var(--r-md);
  font-family: var(--font-ui); font-size: var(--t-note); line-height: 1.4;
}
.consent[hidden] { display: none; }
.consent-text { margin: 0 0 var(--s-3); max-width: none; font-size: var(--t-note); }
.consent-text a { color: var(--clay-ink); font-weight: 600; white-space: nowrap; }
.consent-btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.consent .btn {
  justify-content: center; text-align: center;
  font-size: var(--t-note); padding: 9px 14px; min-height: 40px;
}
.consent .btn--ghost { color: var(--ink); background: transparent; }
.consent .btn--ghost:hover { background: var(--well); }

@media (max-width: 860px) {
  .consent {
    left: var(--s-3); right: var(--s-3); width: auto;
    bottom: calc(var(--consent-above) + var(--s-2));
    padding: var(--s-3) var(--s-4);
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4);
  }
  .consent-text { margin: 0; flex: 1 1 260px; }
  .consent-btns { flex: 1 1 200px; }
}
@media print { .consent { display: none !important; } }

/* ---------- 2. Footer: Privacy and Cookies ---------- */
/* Discreet and centred at the very end of the page (Junior, 6 Oct). */
.foot-legal {
  margin: var(--s-5) 0 0; font-family: var(--font-ui); font-size: 0.8125rem; line-height: 1.4;
  text-align: center; color: var(--off-white);
}
.foot-legal a { color: inherit; font-weight: 400; text-decoration: none; }
.foot-legal a:hover, .foot-legal a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }
.foot-legal span { margin-inline: var(--s-2); opacity: 0.7; }
.op-foot { text-align: center; justify-self: stretch; max-width: none; }
.op-foot a { color: inherit; font-weight: 400; text-decoration: none; }
.op-foot a:hover, .op-foot a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- 3. Privacy pages ---------- */
.privacy { padding-top: 0; }
.privacy .prose { max-width: 44rem; }
.privacy .prose h2 {
  font-family: var(--font-display); font-variation-settings: var(--display-soft);
  font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-t2);
  font-size: var(--t2); line-height: 1.15; margin: var(--s-7) 0 var(--s-3);
}
.privacy .prose h2:first-child { margin-top: 0; }
.privacy .prose p, .privacy .prose li { max-width: 62ch; }
.privacy-table { width: 100%; border-collapse: collapse; margin: var(--s-3) 0 var(--s-4); font-size: var(--t-note); line-height: 1.4; }
.privacy-table th, .privacy-table td { text-align: left; vertical-align: top; padding: var(--s-2) var(--s-3) var(--s-2) 0; border-bottom: 1px solid var(--line); }
.privacy-table th { font-weight: 600; }
.privacy-table code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.95em; overflow-wrap: anywhere; }
@media (max-width: 620px) {
  .privacy-table thead { display: none; }
  .privacy-table tr { display: block; padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
  .privacy-table td { display: block; border: 0; padding: 2px 0; }
}
.privacy .updated { margin-top: var(--s-7); font-size: var(--t-note); }

/* ---------- 4. Tap targets ----------
   The stacked English / Português links were 18px tall (Lighthouse target-size wants 24). */
.lang .lang-link { display: inline-flex; align-items: center; min-height: 24px; }

/* ---------- 5. Blog and privacy pages (tools/prod/blog.py) ----------
   Website v11's look: a sand title band, then one reading column on the paper colour.
   Headings, paragraphs and buttons take v11's own rules (fq.css); this sets the layout. */
.ela-head { padding: clamp(132px, 14vw, 200px) 0 clamp(48px, 5vw, 80px); }
.ela-col { max-width: 46rem; margin-inline: auto; }
.ela-head h1 { font-size: var(--fq-t-1); line-height: 1.02; margin: 0 0 20px; }
.ela-crumbs { font-size: var(--fq-t-small); color: var(--fq-ink-soft); margin: 0 0 18px; }
.ela-crumbs a { color: inherit; text-underline-offset: 3px; }
.ela-lede { font: 300 var(--fq-t-3)/1.4 var(--fq-serif); font-variation-settings: "SOFT" 30; color: var(--fq-ink); max-width: 38ch; margin: 0; }
.ela-meta { font-size: var(--fq-t-small); color: var(--fq-ink-soft); margin: 22px 0 0; }
.ela-meta a { color: var(--fq-ink); text-underline-offset: 3px; }
.ela-doc { padding: clamp(56px, 6vw, 104px) 0 clamp(96px, 10vw, 160px); color: var(--fq-ink-soft); }
.ela-prose h2 { font-size: var(--fq-t-2); line-height: 1.08; margin: clamp(48px, 5vw, 72px) 0 18px; }
.ela-prose > h2:first-child, .ela-prose > :first-child { margin-top: 0; }
.ela-prose h3 { margin: 32px 0 12px; }
.ela-prose p, .ela-prose li { max-width: 66ch; }
.ela-prose ul, .ela-prose ol { padding-left: 1.2em; margin: 0 0 1.2em; }
.ela-prose li + li { margin-top: 8px; }
.ela-prose strong { color: var(--fq-ink); font-weight: 600; }
.ela-prose a { color: var(--fq-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ela-prose a.fq-btn { text-decoration: none; }
.ela-doc .btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 28px; border-radius: var(--fq-r);
  font: 500 14px/1 var(--fq-sans); text-decoration: none; color: var(--fq-ink); border: 1px solid var(--fq-line); }
.ela-doc .btn:hover { border-color: var(--fq-ink); }
.ela-doc .updated { margin-top: 56px; font-size: var(--fq-t-small); }
.privacy .privacy-table { font-size: 14px; }
.privacy .privacy-table th, .privacy .privacy-table td { border-bottom-color: var(--fq-line); }

.ela-list { padding-top: clamp(40px, 4vw, 64px); }
.blog-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(12px, 1.2vw, 20px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.blog-card a { display: flex; flex-direction: column; height: 100%; padding: clamp(24px, 2.4vw, 36px); border-radius: var(--fq-r);
  background: var(--fq-sand); color: var(--fq-ink-soft); text-decoration: none; box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow 0.4s var(--fq-in, ease); }
.blog-card a:hover, .blog-card a:focus-visible { box-shadow: inset 0 0 0 1px var(--fq-ink); }
.blog-card h2 { font-size: var(--fq-t-3); line-height: 1.18; margin: 0 0 14px; }
.blog-card p { margin: 0 0 22px; font-size: 15px; line-height: 1.55; }
.blog-more { margin-top: auto; font-weight: 500; color: var(--fq-ink); }
.blog-table { overflow-x: auto; margin: 24px 0 32px; }
.blog-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; }
.blog-table th, .blog-table td { text-align: left; vertical-align: middle; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--fq-line); }
.blog-table th { font-weight: 600; color: var(--fq-ink); border-bottom-color: var(--fq-ink); }
@media (max-width: 620px) {
  .blog-table thead { display: none; }
  .blog-table tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--fq-line); }
  .blog-table td { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: 12px; border: 0; padding: 2px 0; }
  .blog-table td::before { content: attr(data-label); font-weight: 600; color: var(--fq-ink); }
  .blog-table td[data-label=""] { display: block; font-weight: 600; color: var(--fq-ink); padding-bottom: 4px; }
  .blog-table td[data-label=""]::before { content: none; }
}
.blog-faq details { border-bottom: 1px solid var(--fq-line); padding: 16px 0; }
.blog-faq summary { cursor: pointer; font-weight: 500; color: var(--fq-ink); }
.blog-faq details p { margin: 10px 0 0; }
.blog-cta { margin: clamp(48px, 5vw, 72px) 0; padding: clamp(28px, 3vw, 44px); border-radius: var(--fq-r); background: var(--fq-sand); }
.blog-cta h2 { margin-top: 0 !important; }
.blog-btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
.ela-prose .blog-sources-h { font-size: var(--fq-t-3); }
.blog-sources { font-size: 14px; }
.blog-sources a { overflow-wrap: anywhere; }
.blog-back { margin-top: 40px; font-weight: 500; }

/* ---------- 6. Website v11 (live since 12 Oct 2026) ----------
   The cookie card in v11's look, at the bottom left so it never covers the fixed
   "Agende aqui" button on the right; on phones it sits above that button. */
html.fq .consent {
  left: var(--fq-gutter); right: auto; bottom: var(--fq-gutter);
  background: var(--fq-paper); color: var(--fq-ink); border: 1px solid var(--fq-line); border-radius: var(--fq-r);
  font: 400 13px/1.5 var(--fq-sans); box-shadow: 0 12px 40px color-mix(in srgb, var(--wine) 14%, transparent);
}
html.fq .consent-text { font-size: 13px; }
html.fq .consent-text a { color: var(--fq-ink); text-decoration: underline; text-underline-offset: 3px; }
html.fq .consent .btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 14px;
  border-radius: var(--fq-r); font: 500 13px/1 var(--fq-sans); cursor: pointer;
}
html.fq .consent .consent-yes { background: var(--fq-btn); color: var(--fq-on-btn); border: 1px solid var(--fq-btn); }
html.fq .consent .consent-no { background: transparent; color: var(--fq-ink); border: 1px solid var(--fq-line); }
html.fq .consent .consent-no:hover { border-color: var(--fq-ink); }
html.fq .foot-legal { color: inherit; opacity: 0.85; margin-top: 28px; }
@media (max-width: 860px) {
  html.fq .consent { left: var(--fq-gutter); right: var(--fq-gutter); width: auto; bottom: 76px; }
}