/* A Fabula (r7): the homepage's first scene. The stage, the chapter cards,
   the scroll cue, the crystal's name, and the three states (fab-vivo, the
   live 3D scene in a pinned track; fab-parado and no class, the painted still
   of the finished palace). Colours are the site's own: the story cards keep
   the live homepage's ink gradient, its gold emphasis (#efd7a0) and its
   folded terracotta corner. */

.fab {
  --hdr: 69px;
  --fab-borda: clamp(14px, 2.2vw, 34px);
  --carta-a: min(44vw, 640px);
  --carta-b: min(31vw, 440px);
  position: relative;
  background: #a9d3f2;
}
.fab-pista { position: relative; }
.fab-palco {
  position: relative;
  overflow: hidden;
  height: min(calc(100svh - var(--hdr)), 66vw);
  min-height: 460px;
  background: #b9dcf3;
  isolation: isolate;
}
html.fab-vivo .fab-pista { height: calc((100svh - var(--hdr)) * 7.2); }
html.fab-vivo .fab-palco { position: sticky; top: var(--hdr); height: calc(100svh - var(--hdr)); }

.fab-cartaz {
  position: absolute; inset: 0;
  background: #b9dcf3 center / cover no-repeat;
  transition: opacity .9s ease;
}
.fab-lona {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity .9s ease;
}
html:not(.fab-vivo) .fab-lona { display: none; }
html.fab-3d .fab-lona { opacity: 1; }
html.fab-3d .fab-cartaz { opacity: 0; }
/* While the world loads (and for good if it never arrives), the stage is not
   inert: the finished village fades in over the first frame as the reader
   scrolls, the track keeps its length, and the 3D cross-fades in when ready
   (review of 3 October, M5). `--fab-p` is the track's scroll fraction. */
html.fab-vivo .fab-cartaz::after {
  content: ""; position: absolute; inset: 0; background: center / cover no-repeat;
  opacity: clamp(0, calc((var(--fab-p, 0) - .03) / .42), 1);
}
html.fab-sem3d .fab-lona, html.fab-sem3d .fab-pause { display: none; }

/* a soft frame for the words: the corners dip a little, never the middle */
.fab-veu {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 60% at 4% 0%, rgba(255, 228, 170, .30), rgba(255, 228, 170, 0) 70%),
    radial-gradient(130% 95% at 50% 46%, transparent 58%, rgba(10, 22, 34, .20) 100%),
    linear-gradient(to bottom, rgba(10, 22, 34, .10), transparent 14%, transparent 84%, rgba(10, 22, 34, .16));
}

/* ---- the corner strip, as on the live story -------------------------- */
.fab-cantos {
  position: absolute; z-index: 2; left: var(--fab-borda); right: var(--fab-borda); top: 14px;
  display: flex; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap;
  pointer-events: none;
}
.fab-canto {
  display: inline-flex; gap: 8px; align-items: baseline;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(10, 22, 34, .58);
  font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase; color: #f7f4ee;
}
.fab-canto span { color: rgba(247, 244, 238, .72); font-variant-numeric: tabular-nums; }
.fab-canto b { font-weight: 700; }

/* ---- the chapter cards ------------------------------------------------- */
.fab-cartas { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.fab-carta {
  position: absolute; box-sizing: border-box;
  border-radius: 18px; padding: 20px 24px;
  background: linear-gradient(145deg, rgba(19, 38, 53, .95), rgba(11, 22, 32, .95) 68%, rgba(8, 18, 27, .96));
  border: 1px solid rgba(232, 196, 168, .26);
  box-shadow: inset 0 1px 0 rgba(247, 244, 238, .06), 0 24px 52px -26px rgba(0, 0, 0, .62);
  color: #f7f4ee; pointer-events: auto;
}
.fab-carta::before {
  content: ""; position: absolute; top: 0; right: 0; width: 34px; height: 34px;
  border-top-right-radius: inherit;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  background: linear-gradient(135deg, #e8c4a8, #c26a44 55%, #9e4d31);
}
/* the cards hug their words; the type is still sized from the widest the card may be */
.fab-carta--a { left: var(--fab-borda); top: calc(var(--fab-borda) + 40px); width: max-content; max-width: var(--carta-a); padding-right: 48px; }
.fab-carta--b { right: var(--fab-borda); bottom: calc(var(--fab-borda) + 6px); width: max-content; max-width: var(--carta-b); padding-left: 30px; padding-right: 44px; text-align: right; }

.fab-txt {
  margin: 0; max-width: none; font-weight: 800; color: #f7f4ee;
  font-size: min(clamp(22px, 2.6vw, 38px), calc((var(--carta-a) - 76px) / 18.6));
  line-height: 1.1; letter-spacing: -.014em;
}
.fab-txt--leve {
  font-weight: 700; letter-spacing: -.006em; line-height: 1.24;
  font-size: min(clamp(17px, 1.7vw, 25px), calc((var(--carta-b) - 78px) / 12.4));
  color: rgba(247, 244, 238, .94);
}
.fab-mrk { color: #efd7a0; white-space: nowrap; }
/* each authored line is its own masked block, and it rises out of its own baseline */
.fab-ln { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.fab-ln > span { display: block; white-space: nowrap; }
html.fab-vivo .fab-ln > span { animation: fab-sobe .95s cubic-bezier(.19, 1, .22, 1) both; }
html.fab-vivo .fab-carta--a .fab-ln:nth-child(2) > span { animation-delay: .08s; }
html.fab-vivo .fab-carta--b .fab-ln:nth-child(1) > span { animation-delay: .22s; }
html.fab-vivo .fab-carta--b .fab-ln:nth-child(2) > span { animation-delay: .3s; }
@keyframes fab-sobe { from { transform: translateY(110%); } to { transform: none; } }

/* ---- the scroll cue ------------------------------------------------------- */
.fab-indicio {
  position: absolute; z-index: 3; left: 50%; bottom: calc(var(--fab-borda) + 6px); margin: 0;
  transform: translateX(-50%);
  pointer-events: none;
}
html:not(.fab-vivo) .fab-indicio { display: none; }
.fab-ind-w {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; box-sizing: border-box;
  padding: 9px 18px 9px 14px; border-radius: 14px;
  background: linear-gradient(145deg, rgba(19, 38, 53, .92), rgba(8, 18, 27, .94));
  border: 1px solid rgba(232, 196, 168, .24); color: #f7f4ee;
  font-weight: 700; font-size: 16px;
  animation: fab-entra .7s .5s cubic-bezier(.19, 1, .22, 1) both;
}
.fab-ind-w svg { width: 22px; height: 31px; }
.fab-ind-roda { animation: fab-roda 1.8s ease-in-out infinite; }
.fab-indicio--fora .fab-ind-roda { animation: none; }
.fab-ind-toque { display: none; }
@keyframes fab-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fab-roda { 0%, 100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(5px); opacity: .2; } }

/* ---- the crystal's name: crisp type beside the gem --------------------------- */
.fab-nome {
  position: absolute; z-index: 2; left: 0; top: 0; opacity: 0;
  pointer-events: none; will-change: transform, opacity;
}
.fab-nome span {
  display: inline-block; padding: 6px 14px 7px; border-radius: 999px;
  background: rgba(255, 255, 255, .84);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 10px 26px -12px rgba(16, 40, 70, .55), inset 0 -2px 0 rgba(120, 180, 230, .25);
  color: #1f3a4d; font-family: 'Firmitas Wordmark', var(--sans, sans-serif);
  font-size: 19px; letter-spacing: .01em; line-height: 1;
}
html:not(.fab-vivo) .fab-nome { display: none; }

/* ---- a phone, or any portrait window: one card at the foot of the stage --- */
@media (max-width: 899px), (max-aspect-ratio: 1/1) {
  .fab-palco { height: calc(100svh - var(--hdr)); min-height: 520px; }
  .fab-cantos { display: none; }
  .fab-cartas {
    inset: auto 12px calc(12px + env(safe-area-inset-bottom, 0px)) 12px;
    border-radius: 18px; padding: 16px 18px 17px;
    background: linear-gradient(145deg, rgba(19, 38, 53, .95), rgba(11, 22, 32, .95) 68%, rgba(8, 18, 27, .96));
    border: 1px solid rgba(232, 196, 168, .26);
    box-shadow: 0 22px 46px -24px rgba(0, 0, 0, .66);
    pointer-events: auto;
  }
  .fab-cartas::before {
    content: ""; position: absolute; top: 0; right: 0; width: 30px; height: 30px;
    border-top-right-radius: 18px; clip-path: polygon(0 0, 100% 0, 100% 100%);
    background: linear-gradient(135deg, #e8c4a8, #c26a44 55%, #9e4d31);
  }
  .fab-carta { position: static; width: auto; max-width: none; padding: 0; background: none; border: 0; box-shadow: none; text-align: left; }
  .fab-carta::before { content: none; }
  .fab-carta--b { margin-top: 10px; }
  .fab-txt { font-size: min(27px, calc((100vw - 60px) / 18.6)); }
  .fab-txt--leve { font-size: min(19px, calc((100vw - 60px) / 13.2)); }
  .fab-indicio { top: 14px; bottom: auto; }
  .fab-ind-w { font-size: 15px; padding: 7px 14px 7px 12px; }
  .fab-ind-w svg { display: none; }
  .fab-ind-rato { display: none; }
  .fab-ind-toque { display: inline; }
  .fab-nome span { font-size: 16px; padding: 5px 11px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .fab-ln > span, .fab-ind-w, .fab-ind-roda { animation: none !important; }
}

/* The village tour is an enhancement of a real service list. The complete
   list is readable without JavaScript, WebGL or motion, and by screen readers. */
.fab-static-services { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; padding: 32px max(24px,calc((100vw - 1240px)/2)); background: #f7f4ee; color: #1f3a4d; }
.fab-static-services article { border-top: 1px solid #c7c3b7; padding-top: 16px; }
.fab-static-services h2 { font-size: 21px; margin: 8px 0; line-height: 1.18; }
.fab-static-services p { font-size: 15px; line-height: 1.5; margin: 0; }
/* hidden for the whole live state, not only once the 3D is up: the page keeps
   one length whether the world arrives or not (review of 3 October, M5); the
   guided visit below carries the services */
html.fab-vivo .fab-static-services { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.fab-service-place { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.fab-service-dock { display: none; position: absolute; z-index: 5; left: var(--fab-borda); bottom: var(--fab-borda); width: min(360px,31vw); box-sizing: border-box; padding: 20px 24px; border-radius: 18px; border: 1px solid rgba(232,196,168,.32); background: linear-gradient(145deg,rgba(19,38,53,.96),rgba(8,18,27,.97)); color: #f7f4ee; box-shadow: 0 24px 52px -26px rgba(0,0,0,.62); pointer-events: none; }
html.fab-3d .fab[data-chapter="rising"] .fab-service-dock,
html.fab-3d .fab[data-chapter="tour"] .fab-service-dock,
html.fab-3d .fab[data-chapter="welcome"] .fab-service-dock { display: block; animation: fab-entra .24s ease both; }
.fab-service-dock h2 { font-size: clamp(21px,2vw,29px); font-weight: 750; color: #efd7a0; line-height: 1.13; margin: 6px 0 11px; letter-spacing: -.015em; }
.fab-service-dock p { margin: 0; }
.fab-service-dock .fab-service-stage { font-size: 11px; color: #dedbd1; margin-bottom: 14px; }
.fab-service-dock .fab-service-place { font-size: 10px; color: #e8c4a8; }
.fab-service-dock .fab-service-line { font-size: 14px; line-height: 1.45; }
.fab-cartas,.fab-cantos { transition: opacity .25s ease; }
html.fab-3d .fab:not([data-chapter="palace"]) .fab-cartas,
html.fab-3d .fab:not([data-chapter="palace"]) .fab-cantos { opacity: 0; pointer-events: none; }
html.fab-3d .fab:not([data-chapter="palace"]) .fab-cartas * { pointer-events: none; }
.fab-skip,.fab-pause { position: absolute; z-index: 7; right: var(--fab-borda); border: 1px solid rgba(255,255,255,.4); border-radius: 999px; background: rgba(19,38,53,.94); color: #fff; padding: 10px 15px; font: 600 12px/1.3 var(--sans,sans-serif); text-decoration: none; min-height: 44px; box-sizing: border-box; display: inline-flex; gap: 9px; align-items: center; justify-content: center; }
.fab-skip { top: 65px; }
.fab-pause { bottom: var(--fab-borda); cursor: pointer; }
/* on the wide stage the closing card sits above the pause control, never under it */
@media (min-width: 900px) and (min-aspect-ratio: 1001/1000) { html.fab-vivo .fab-carta--b { bottom: calc(var(--fab-borda) + 58px); } }
.fab-tour { position: absolute; z-index: 7; top: 123px; right: var(--fab-borda); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; width: min(48vw,520px); }
.fab-tour button { min-width: 45px; min-height: 46px; display: flex; align-items: center; gap: 7px; padding: 10px 11px; background: rgba(19,38,53,.94); border: 1px solid rgba(255,255,255,.45); border-radius: 10px; color: #f7f4ee; cursor: pointer; font: 600 12px/1.2 var(--sans,sans-serif); }
.fab-tour button span { font-size: 10px; color: #efd7a0; font-variant-numeric: tabular-nums; }
.fab-tour button[aria-current] { background: #efd7a0; color: #132635; border-color: #fff3d9; }
.fab-tour button[aria-current] span { color: #132635; }
.fab-tour button:hover { border-color: #efd7a0; }
.fab-skip:focus-visible,.fab-pause:focus-visible,.fab-tour button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px #1f3a4d; }
.fab-tour[hidden],.fab-pause[hidden],html:not(.fab-vivo) .fab-tour,html:not(.fab-vivo) .fab-pause { display: none; }
#fab-content { scroll-margin-top: 80px; }
#fab-content:focus { outline: none; }
@media (max-width: 899px), (max-aspect-ratio: 1/1) {
  .fab-skip { left: 12px; top: 10px; right: auto; font-size: 11px; padding: 9px 12px; }
  .fab-pause { top: 10px; right: 12px; bottom: auto; font-size: 11px; padding: 9px 10px; }
  .fab-tour { top: 65px; left: 12px; right: 12px; width: auto; flex-wrap: nowrap; justify-content: center; gap: 6px; }
  .fab-tour button { width: 46px; min-width: 40px; min-height: 44px; padding: 8px; justify-content: center; }
  .fab-tour button b { display: none; }
  .fab-tour button span { font-size: 12px; }
  .fab-indicio { top: 126px; }
  .fab-service-dock { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom,0px)); width: auto; padding: 15px 18px 16px; }
  .fab-service-dock h2 { font-size: 22px; margin: 5px 0 8px; }
  .fab-service-dock .fab-service-stage { margin-bottom: 9px; font-size: 10px; }
  .fab-service-dock .fab-service-line { font-size: 13px; line-height: 1.42; max-width: 54ch; }
  .fab-static-services { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 24px; }
}
@media (max-width: 440px) {
  .fab-static-services { grid-template-columns: 1fr; }
  .fab-skip { max-width: 58%; text-align: center; }
  .fab-pause { max-width: 33%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .fab *, .fab *::before, .fab *::after { animation: none !important; transition: none !important; }
}

/* Conheça a Firmitas: the guided visit below the Cidadela (r11).
   An inline module, never pinned or fullscreen: the scene, the guide's speech
   card, the playback row, the chapter bar, the contact links and the complete
   text. Measured contrast (WCAG relative luminance): ink #1f3a4d on card
   #fffdf9 11.67:1, rust #9e4d31 on it 5.81:1; paper #f7f4ee on navy 10.8:1,
   gold #efd7a0 on navy 8.41:1, peach #f4b98f on navy 6.88:1; white on rust
   5.9:1, cream #fff3d9 on rust 5.36:1, #ffe0c4 on rust 4.69:1; the accent rule
   #c26a44 on the card 3.8:1 (graphic). */

.guia {
  --g-tinta: #1f3a4d; --g-papel: #f7f4ee; --g-cartao: #fffdf9; --g-ferrugem: #9e4d31; --g-laranja: #c26a44;
  --g-ouro: #efd7a0; --g-pessego: #f4b98f;
  --g-larg: min(1240px, calc(100vw - 48px));
  position: relative; z-index: 1;
  padding: clamp(20px, 2.6vw, 36px) 0 clamp(36px, 4.5vw, 56px);
  background: var(--g-papel); color: var(--g-tinta);
  font-family: var(--sans, 'Archivo', sans-serif);
}
.guia > * { width: var(--g-larg); margin-left: auto; margin-right: auto; box-sizing: border-box; }
.guia-topo h2 { margin: 0; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -.02em; font-weight: 800; }
/* r15: the top of the homepage. The eyebrow names the visit; the H1 is the
   homepage's motto, its last word in rust (5.81:1 on paper) */
.guia-olho { margin: 0 0 8px; font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--g-ferrugem); }
.guia-topo h1 { margin: 0; max-width: 30ch; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.06; letter-spacing: -.025em; font-weight: 800; text-wrap: balance; }
.guia-mrk { color: var(--g-ferrugem); }
/* ONE HEIGHT IN BOTH VERSIONS (r15: the module is the top of the page, so a
   change of height would move everything a reader has scrolled to). The intro
   and the still version's note share one cell and swap by visibility. */
/* r15, no layout shift at the top of the page: the markup is the scripted
   state (controls, bar and transcript button shown, transcript folded); without
   scripting the CSS shows the plain version instead */
html:not(.js) .guia-controlos, html:not(.js) .guia-barra, html:not(.js) .guia-ler { display: none; }
html.js .guia-texto:not(.guia-aberto) { display: none; }
.guia-intro { display: grid; }
.guia-intro > span { grid-area: 1 / 1; margin: 0; }   /* r16: the hidden twin no longer adds its own margin below the intro */
.guia-invisivel { visibility: hidden; }
.guia-intro, .guia-modo { margin: 10px 0 0; font-size: 19px; line-height: 1.45; max-width: 60ch; }
.guia-modo { font-weight: 700; }

/* ---- the scene: the live village when the canvas is here, else its still ---- */
.guia-palco { position: relative; margin-top: 20px; }
.guia-cena {
  position: relative; overflow: hidden; border-radius: 22px;
  height: min(540px, 56svh); min-height: 360px;   /* r15: the top of the page, with the bar's controls in view under it */
  background: #b9dcf3 var(--guia-poster) center / cover no-repeat;
  box-shadow: 0 1px 0 rgba(31, 58, 77, .08), 0 26px 60px -38px rgba(16, 32, 46, .55);
  isolation: isolate;
}
.guia-cena .fab-lona { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s ease; }
html.fab-3d .guia-cena .fab-lona { opacity: 1; }
/* until the 3D takes over, the live page shows the rise's first frame (the
   same picture the 3D starts from); the still shows the finished village */
html.fab-vivo:not(.fab-sem3d) .guia-cena { background-image: var(--guia-inicio, var(--guia-poster)); }
/* the numbers are drawn, not written: no digit run for a phone to dial */
.guia-marca::before, .guia-cap-n::before { content: attr(data-n); }
.guia-marca {
  position: absolute; z-index: 2; left: 0; top: 0; display: none;
  width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; border: 3px solid #fff;
  background: var(--g-tinta); color: #fff; font: 800 15px/32px var(--sans, sans-serif); text-align: center;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6);
}
.guia--estatico .guia-marca { display: block; }
.guia-marca.is-atual { background: var(--g-ferrugem); width: 44px; height: 44px; margin: -22px 0 0 -22px; line-height: 44px; font-size: 19px; z-index: 3; }

/* ---- the speech cards ------------------------------------------------------- */
.guia-cartoes { position: relative; margin-top: 16px; }
.guia-cartao {
  position: relative; box-sizing: border-box; border-radius: 20px; padding: 20px 24px 22px;
  background: var(--g-cartao); color: var(--g-tinta);
  border: 2px solid rgba(31, 58, 77, .12);
  box-shadow: 0 22px 46px -26px rgba(16, 32, 46, .6);
  max-width: 100%;
}
.guia-cartao[hidden] { display: none; }
.guia-cartao::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 6px; border-radius: 0 6px 6px 0; background: var(--g-laranja); }
.guia-quem { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
/* r17: the portraits are drawn in the guides' own faceted style, each in an
   arched niche with a gold rim and keystone (the palace's windows); the outer
   line takes the card's text colour, so it reads on navy, paper and rust */
.guia-retrato { flex: none; width: 56px; height: 56px; }
.guia-simbolos { position: absolute; width: 0; height: 0; overflow: hidden; }   /* the portraits' sprite, drawn once */
.guia-retrato svg { display: block; width: 100%; height: 100%; overflow: visible; }
.guia-quem p { margin: 0; font-size: 18px; line-height: 1.3; }
.guia-quem b { font-weight: 800; }
.guia-lugar { margin: 0 0 4px; font-size: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a3f24; }
/* r16 (review m3): the cards' and the transcript's headings are H2 under the page's H1;
   the site's own h2 rule (balance, 22ch) is undone so they look as they did as H3 */
.guia-cartao h2 { margin: 0 0 8px; max-width: none; text-wrap: wrap; font-size: clamp(25px, 2.2vw, 30px); line-height: 1.12; letter-spacing: -.015em; font-weight: 800; color: var(--g-ferrugem); }
.guia-fala { margin: 0; font-size: 20px; line-height: 1.5; max-width: 52ch; }
.guia-acao { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }

/* navy: white words, gold title, peach place */
.guia-cartao--navy { background: var(--g-tinta); color: var(--g-papel); border-color: rgba(239, 215, 160, .35); }
.guia-cartao--navy::before { background: linear-gradient(var(--g-pessego), var(--g-laranja)); }
.guia-cartao--navy .guia-lugar { color: var(--g-pessego); }
.guia-cartao--navy h2 { color: var(--g-ouro); }
.guia-cartao--navy .guia-quem span { color: #d9e3ea; }
/* rust orange: white words, cream title */
.guia-cartao--laranja { background: var(--g-ferrugem); color: #fff; border-color: rgba(255, 224, 196, .4); }
.guia-cartao--laranja::before { background: var(--g-ouro); }
.guia-cartao--laranja .guia-lugar { color: #ffe0c4; }
.guia-cartao--laranja h2 { color: #fff3d9; }
.guia-cartao--laranja .guia-quem span { color: #fbe7d6; }

/* the pointer from the card to its guide (decorative) */
.guia-cauda { position: absolute; width: 22px; height: 22px; background: inherit; border: inherit; transform: rotate(45deg); display: none; }

/* buttons: solid, large, always labelled */
.guia-botao {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; box-sizing: border-box; padding: 11px 20px;
  border-radius: 999px; border: 2px solid var(--g-ferrugem); background: var(--g-ferrugem); color: #fff;
  font: 750 18px/1.2 var(--sans, sans-serif); text-decoration: none;
}
.guia-botao--leve { background: transparent; color: var(--g-ferrugem); }
.guia-cartao--navy .guia-botao { background: var(--g-ouro); border-color: var(--g-ouro); color: var(--g-tinta); }
.guia-cartao--navy .guia-botao--leve { background: transparent; color: var(--g-ouro); }
.guia-cartao--laranja .guia-botao { background: var(--g-cartao); border-color: var(--g-cartao); color: var(--g-ferrugem); }
.guia-cartao--laranja .guia-botao--leve { background: transparent; color: #fff; border-color: #fff; }

/* the card pops out of its guide: a gentle spring, never slow (r17: from
   further in, a softer overshoot; it grows from the pointer, so out of the guide) */
.guia-cartao.is-entra { animation: guia-pop .52s cubic-bezier(.22, 1.22, .36, 1) both; }
/* scale and opacity only: the card's place is its `translate`, which this must not fight */
@keyframes guia-pop { 0% { opacity: 0; scale: .8; } 40% { opacity: 1; } 100% { opacity: 1; scale: 1; } }
@keyframes guia-pop-fone { 0% { opacity: .45; scale: .94; } 40% { opacity: 1; } 100% { opacity: 1; scale: 1; } }
/* r17: between two chapters the card leaving fades back toward its guide and
   keeps its box, so nothing below it moves while the next place rises */
.guia .guia-cartao.is-sai { opacity: 0; scale: .95; transition: opacity .28s ease, scale .28s ease; }
/* r17.1 (review m4): a phone's docked card dims as the visit leaves its chapter and
   stays (same height: the controls stay put) until the next card replaces it as its
   place stands, entering from this opacity; after Replay, chapter 1's card shows
   dimmed at once. Never an empty band, never the old words at full strength under
   the new place */
.guia .guia-cartao.is-espera { opacity: .45; transition: opacity .28s ease; }
/* r17: a soft golden glint crosses the card once as its place stands (beneath
   the words: the card is its own stacking context) */
.guia-cartao { isolation: isolate; }
.guia-lampejo { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; }
.guia-lampejo::before {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 42%; opacity: 0;
  background: linear-gradient(100deg, rgba(239, 196, 110, 0), rgba(239, 196, 110, .34) 42%, rgba(255, 240, 205, .5) 50%, rgba(239, 196, 110, .34) 58%, rgba(239, 196, 110, 0));
  transform: translateX(-120%) skewX(-14deg);
}
.guia-cartao.is-brilha .guia-lampejo::before { animation: guia-brilho 1.05s .12s cubic-bezier(.45, .05, .25, 1) 1 both; }
@keyframes guia-brilho {
  0% { opacity: 0; transform: translateX(-120%) skewX(-14deg); }
  18% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateX(300%) skewX(-14deg); }
}

/* ---- wide screens with the live scene: the card floats beside its guide --- */
@media (min-width: 880px) {
  /* r15: from the first paint whenever scripting runs (the `js` class is set in
     the head), not when the controller first runs: the module is the top of the
     page, and a card dropping out of the flow there moved the page (CLS 0.54) */
  html.js .guia .guia-cartoes { position: absolute; inset: 0; margin: 0; pointer-events: none; }
  html.js .guia .guia-cartao {
    /* the base place is the scene's right side; the controller moves the card by
       `translate` (an offset from it), never by left/top: no layout shift */
    position: absolute; left: calc(100% - min(440px, 38%) - 22px); top: 0; translate: var(--dx, 0px) var(--cy, 22px); width: min(440px, 38%);
    pointer-events: auto; transform-origin: var(--ox, 0) var(--oy, 50%);
  }
  html.js .guia .guia-cauda { display: block; top: 0; translate: 0 var(--ty, 160px); margin-top: -11px; }
  html.js .guia .guia-cartao[data-lado-agora="dir"] .guia-cauda { left: -12px; border-right: 0; border-top: 0; }
  html.js .guia .guia-cartao[data-lado-agora="esq"] .guia-cauda { right: -12px; border-left: 0; border-bottom: 0; }
  html.js .guia .guia-cartao::before { display: none; }
}
/* phones and narrow windows: the card docks under the scene, pointing up at its guide */
@media (max-width: 879px) {
  .guia { --g-larg: calc(100vw - 32px); padding-top: 32px; }
  .guia-topo h2 { font-size: 28px; }
  .guia-intro, .guia-modo { font-size: 18px; margin-top: 6px; }
  .guia-palco { margin-top: 14px; }
  .guia-cena { height: min(320px, 40svh); min-height: 220px; border-radius: 18px; background-image: var(--guia-poster-fone); }
  html.fab-vivo:not(.fab-sem3d) .guia-cena { background-image: var(--guia-inicio-fone, var(--guia-poster-fone)); }
  .guia-topo h1 { font-size: 32px; }
  .guia-olho { font-size: 13px; margin-bottom: 6px; }
  /* (r17: the pointer follows its guide by `translate` from the card's centre, not by
     `left`: shown from the first paint now, a `left` change was a layout shift) */
  .guia--vivo .guia-cauda { display: block; top: -12px; left: 50%; translate: var(--txd, 0px) 0; margin-left: -11px; border-right: 0; border-bottom: 0; }
  .guia--vivo .guia-cartao { transform-origin: var(--tx, 50%) 0; }   /* r17: it grows from its pointer, up at the guide */
  /* r17: docked, the next card replaces the last one in place, never from nothing
     (the band under the scene is never empty, R16 review) */
  .guia-cartao.is-entra { animation-name: guia-pop-fone; }
  .guia-cartoes { margin-top: 14px; }
  .guia-cartao { padding: 14px 16px 16px 18px; }
  .guia-quem { margin-bottom: 6px; gap: 10px; }
  .guia-retrato { width: 42px; height: 42px; }
  .guia-cartao h2 { font-size: 24px; margin-bottom: 6px; }
  .guia-lugar { margin-bottom: 2px; }
  /* the services' call to action is the module's own contact row below; the closing chapter keeps its own */
  .guia-cartao:not([data-cap="7"]) .guia-acao { display: none; }
  /* one row of three on a phone, with or without Play: the row keeps its height */
  .guia .guia-controlos { margin-top: 14px; display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 8px; }
  .guia.guia--estatico .guia-controlos { grid-template-columns: 1fr 1fr; }
  .guia .guia-controlos[hidden] { display: none; }
  .guia-controlos .guia-btn { padding: 10px 8px; font-size: 16px; min-width: 0; }
}

/* ---- the playback row and the chapter bar ------------------------------------ */
.guia-controlos { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.guia-controlos[hidden], .guia-barra[hidden], .guia-ler[hidden] { display: none; }
.guia-btn {
  min-height: 48px; min-width: 48px; box-sizing: border-box; padding: 11px 20px; border-radius: 14px; cursor: pointer;
  border: 2px solid var(--g-tinta); background: #fff; color: var(--g-tinta); font: 750 18px/1.2 var(--sans, sans-serif);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.guia-play { min-width: 160px; background: var(--g-tinta); color: #fff; }
.guia-btn[aria-disabled="true"] { border-style: dashed; color: #5b6670; cursor: default; }
.guia-barra { margin-top: 16px; }
.guia-barra ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.guia-cap {
  position: relative; width: 100%; min-height: 64px; height: 100%; box-sizing: border-box; padding: 12px 10px 18px; cursor: pointer;
  border: 2px solid rgba(31, 58, 77, .35); border-radius: 14px; background: #fff; color: var(--g-tinta);
  font: 700 18px/1.2 var(--sans, sans-serif); text-align: left; display: flex; flex-flow: row wrap; align-items: center; align-content: flex-start; gap: 4px 8px;
}
/* r16 (review m4): "Atual" sits on the number's line, not under the label, so the
   bar is a line shorter; the label keeps its own line (on a very narrow button the
   pill wraps under the number) */
.guia-cap-i { order: 0; }
.guia-cap-n { order: 1; }
.guia-cap-atual { order: 2; }
.guia-cap-t { order: 3; flex: 1 0 100%; }
/* r17: each chapter's pictogram, one line style (24 px grid, 1.8 px round
   strokes in the text colour, one rust detail; on the current chapter white
   with a peach detail: navy on white 11.9:1, rust 5.8:1, white and peach on
   navy 11.9:1 and 6.9:1, all above 3:1 for graphics). It animates once when
   its chapter becomes the current one. */
.guia-cap-i { display: inline-flex; flex: none; width: 20px; height: 20px; color: var(--g-tinta); --g-ac: var(--g-ferrugem); }
.guia-cap-i svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.guia-cap-i .ac { fill: var(--g-ac); stroke: none; }
.guia-cap-i .acl { stroke: var(--g-ac); }
.guia-cap[aria-current="step"] .guia-cap-i { color: #fff; --g-ac: var(--g-pessego); }
.guia-cap.is-anima .guia-cap-i { animation: guia-icone .64s cubic-bezier(.34, 1.5, .64, 1) 1 both; }   /* guia.js: once, as it becomes current */
.guia-cap[data-cap="1"] .guia-cap-i { --gira: -90deg; }   /* the workshop's gear turns */
@keyframes guia-icone { 0% { transform: scale(.7) rotate(var(--gira, -12deg)); } 100% { transform: none; } }
/* a subtle lift under a pointer or the keyboard, a press under a finger (transform
   and opacity only: the shadow is a layer that fades in) */
.guia-cap { isolation: isolate; transition: transform .18s cubic-bezier(.19, 1, .22, 1); column-gap: 5px; }
/* the pictogram, the number and "Atual"/"Current" share one line: at 1440 wide its
   longest form is 20 + 5 + 18 + 5 + 63 px of the 120 a button holds; the pill's
   side padding is 6 px (its type unchanged). Between 1100 and 1239 px wide the
   current chapter's pictogram steps aside so "Current" never wraps (the bar
   keeps r16's height; measured every pixel from 1100 to 1300, PT and EN). */
@media (min-width: 1100px) and (max-width: 1239px) { .guia-cap[aria-current="step"] .guia-cap-i { display: none; } }   /* r17.1, review m1: was 1199 (EN wrapped at 1200 to 1213) */
.guia-cap::after { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: 0 14px 22px -14px rgba(16, 32, 46, .55); opacity: 0; transition: opacity .18s ease; }
@media (hover: hover) {
  .guia-cap:hover { transform: translateY(-2px); }
  .guia-cap:hover::after { opacity: 1; }
}
.guia-cap:focus-visible { transform: translateY(-2px); }
.guia-cap:focus-visible::after { opacity: 1; }
.guia-cap:active { transform: translateY(0) scale(.985); }
.guia-cap-n { font-size: 15px; font-weight: 800; color: #8a3f24; font-variant-numeric: tabular-nums; }
.guia-cap-atual { display: none; padding: 2px 6px; border-radius: 999px; background: var(--g-ouro); color: var(--g-tinta); font-size: 14px; font-weight: 800; }
.guia-cap[aria-current="step"] { background: var(--g-tinta); color: #fff; border: 4px solid var(--g-tinta); }
.guia-cap[aria-current="step"] .guia-cap-n { color: var(--g-pessego); }
.guia-cap[aria-current="step"] .guia-cap-atual { display: inline-block; }
.guia-trilho { position: absolute; left: 10px; right: 10px; bottom: 7px; height: 6px; border-radius: 3px; background: #e2dccf; overflow: hidden; }
.guia-trilho i { display: block; height: 100%; transform: scaleX(var(--p, 0)); transform-origin: 0 50%; background: var(--g-ferrugem); }   /* a transform: the rail fills without a layout per frame */
.guia--vivo .guia-trilho i { transition: transform .4s cubic-bezier(.19, 1, .22, 1); }   /* r17: smoothly, also when a jump fills or empties it */
.guia-cap[aria-current="step"] .guia-trilho { background: rgba(255, 255, 255, .28); }
.guia-cap[aria-current="step"] .guia-trilho i { background: var(--g-pessego); }
.guia-btn:focus-visible, .guia-cap:focus-visible, .guia-botao:focus-visible {
  outline: 3px solid var(--g-tinta); outline-offset: 3px; box-shadow: 0 0 0 3px var(--g-papel);
}
.guia-cartao--navy .guia-botao:focus-visible, .guia-cartao--laranja .guia-botao:focus-visible { outline-color: #fff; box-shadow: 0 0 0 3px var(--g-tinta); }
@media (min-width: 600px) and (max-width: 1099px) { .guia-barra ol { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 599px) { .guia-barra ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.guia-estado { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.guia-contacto { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.guia-texto-w { margin-top: 14px; }
.guia-texto { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
.guia-texto[hidden] { display: none; }
.guia-texto section { border-top: 2px solid rgba(31, 58, 77, .18); padding-top: 10px; }
.guia-texto h2 { margin: 0 0 4px; max-width: none; text-wrap: wrap; font-size: 19px; line-height: 1.25; font-weight: 600; letter-spacing: -0.008em; }
.guia-texto p { margin: 0; font-size: 18px; line-height: 1.5; }
.guia-texto .guia-tx-quem { font-size: 16px; font-weight: 700; color: #8a3f24; margin-bottom: 2px; }
@media (max-width: 879px) { .guia-texto { grid-template-columns: 1fr; } }

/* ---- r16 (review m2): the opening card waits for the palace ----------------------
   Until the 3D shows the palace rising (or the page settles on its still, the
   finished village), the live poster is the rise's first frame, an empty hilltop.
   The opening card names the palace and points at it, so it waits and fades in
   with the 3D. A deliberate act shows it at once, and so do 20 s without either
   (guia.js adds `guia--solto`). Opacity only: nothing moves. */
/* (r17: the wait lasts until the palace stands, the 3D on screen or not; and only
   where the card floats over the scene. A phone's card is docked under the
   scene, so waiting there would leave an empty band, on a slow line for about
   16 s (R16 review): there it shows from the first paint.) */
@media (min-width: 880px) {
  /* (r17.1, review m3: released by the engine's `fab-palacio` as well as by guia.js's
     `guia--solto`, so a failed guia.js still shows the card once the palace stands;
     hidden from the first paint, so no card flashes over the hilltop before the
     deferred controller runs) */
  html.fab-vivo:not(.fab-sem3d):not(.fab-palacio) .guia:not(.guia--solto) .guia-cartao { opacity: 0; }
}
html.fab-vivo .guia-cartao { transition: opacity .5s ease; }

/* ---- r16 (review m4): the whole first view on wide screens ---------------------
   With one row of eight chapters (1100 px and wider) the scene takes the height
   the window leaves after the header, the title, the controls and the whole
   chapter bar, so all of them are in view without scrolling (1440x900, 1920x1080);
   never less than the tallest card plus its margins, never more than 540 px. A
   short window (1366x768) also gets a tighter rhythm and the motto on one line, at
   the same size: with two lines, no scene tall enough for a card leaves the bar in
   view. Phones and narrower windows keep their layout. */
@media (min-width: 1100px) {
  .guia-cena { height: clamp(384px, calc(100svh - 473px), 540px); }
}
@media (min-width: 1100px) and (max-width: 1299px) {
  .guia-cena { height: clamp(408px, calc(100svh - 473px), 540px); }   /* a narrower card is taller */
}
@media (min-width: 1100px) and (max-height: 856px) {
  .guia { padding-top: 16px; }
  .guia-topo h1 { max-width: none; }
  .guia-palco { margin-top: 12px; }
  .guia-controlos { margin-top: 12px; }
  .guia-barra { margin-top: 10px; }
  .guia-cena { height: clamp(384px, calc(100svh - 378px), 540px); }
}
@media (min-width: 1100px) and (max-width: 1299px) and (max-height: 856px) {
  .guia-cena { height: clamp(408px, calc(100svh - 378px), 540px); }
}

/* the stage hands its canvas to the guided visit and keeps its finished still */
html.fab-guia-host .fab-palco > *:not(.fab-cartaz) { visibility: hidden; }
html.fab-3d.fab-guia-host .fab-palco .fab-cartaz { opacity: 1; transition: none; }

/* r17: Pause stops the cards' and the bar's own motion with the world: what was
   moving rests at once (a card is never left half shown) */
.guia--congelado .guia-cartao, .guia--congelado .guia-lampejo::before, .guia--congelado .guia-cap-i { animation: none; }
.guia--congelado .guia-trilho i, .guia--congelado .guia-cartao { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .guia-cartao.is-entra, .guia-cartao.is-brilha .guia-lampejo::before, .guia-cap .guia-cap-i { animation: none; }
  .guia .guia-cartao.is-sai, .guia--vivo .guia-trilho i, .guia-cap, .guia-cap::after { transition: none; }
  .guia-cap:hover, .guia-cap:focus-visible, .guia-cap:active { transform: none; }
}

/* What follows the village (r12): the film, the work section's second tab,
   the services by place and the blog. The studio's own palette (this is our
   site): paper #f7f4ee, card #fffdf9, warm band #efe8dc, ink #1f3a4d, rust
   #9e4d31, sand #e8c4a8. Measured contrast: ink on card 11.67:1, rust on card
   5.81:1, #4f6577 on card 5.9:1, white on ink 11.9:1, ink on the warm band
   10.1:1. Nothing here moves by itself; a film plays only when pressed. */

.cf-filme, .cf-servicos, .cf-blog { color: #1f3a4d; }
.cf-filme { background: #f7f4ee; padding: clamp(48px, 7vh, 80px) 0 clamp(18px, 3vh, 30px); }
.cf-cabeca { display: flex; flex-direction: column; gap: 10px; max-width: 46ch; margin-bottom: clamp(20px, 3vh, 32px); }
.cf-lede { margin: 0; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.5; color: #3a5769; }

/* The player: the native one, under a poster button that scripting shows. */
.cf-ecra { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: transparent;
           box-shadow: 0 30px 52px -30px rgba(31, 58, 77, .55), 0 4px 12px -6px rgba(31, 58, 77, .14); }
.cf-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #f7f4ee; }
/* the label low in the frame, where a poster carries no words (the ad's poster;
   the 45 s film's closing frame) */
.cf-ecra--rotulo-baixo .cf-play-rotulo { top: auto; bottom: 7%; transform: translateX(-50%); }
/* the 15 s ad: 16:9 on wide screens, its 9:16 cut on phones, never taller than the screen */
.cf-ecra--anuncio .cf-video { background: #fbfbfa; }
@media (max-width: 759px) {
  .cf-ecra--anuncio { aspect-ratio: 9 / 16; max-width: min(100%, calc((100svh - 150px) * 9 / 16)); margin-inline: auto; }
}
.cf-play { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0;
           border: 0; background: #f7f4ee; cursor: pointer; color: #fff; font: inherit; }
.cf-play[hidden] { display: none; }
.cf-play picture, .cf-play img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cf-play-rotulo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
                  display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px 12px 12px;
                  border-radius: 999px; background: #1f3a4d; color: #fff; font-weight: 750; font-size: 18px;
                  line-height: 1.15; text-align: left; white-space: nowrap;
                  box-shadow: 0 14px 30px -12px rgba(31, 58, 77, .6); transition: background .18s ease, transform .18s ease; }
.cf-play-rotulo small { display: block; font-size: 14px; font-weight: 600; color: #e8c4a8; margin-top: 2px; }
.cf-play-icone { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #9e4d31; flex: none; }
.cf-play-icone svg { width: 22px; height: 22px; margin-left: 3px; }
.cf-play:hover .cf-play-rotulo { background: #9e4d31; }
.cf-play:hover .cf-play-icone { background: #1f3a4d; }
.cf-play:focus-visible { outline: none; }
.cf-play:focus-visible .cf-play-rotulo { outline: 3px solid #c26a44; outline-offset: 4px; }
.cf-video:focus-visible { outline: 3px solid #c26a44; outline-offset: -3px; }
/* the film inside a work card takes the card's screen shape */
.cf-ecra--cartao { aspect-ratio: 16 / 10; border-radius: 0; box-shadow: none; background: #f7f4ee; }
.cf-ecra--cartao .cf-video { background: #f7f4ee; }
.cf-ecra--cartao .cf-play img { object-fit: contain; }
.cf-ecra--cartao .cf-play-rotulo { left: 50%; top: auto; bottom: 14px; transform: translateX(-50%); font-size: 15px; padding: 8px 16px 8px 8px; gap: 9px; }
.cf-ecra--cartao .cf-play-rotulo small { font-size: 13px; }
.cf-ecra--cartao .cf-play-icone { width: 36px; height: 36px; }
.cf-ecra--cartao .cf-play-icone svg { width: 17px; height: 17px; }
/* the work cards style every span in them as a caption line: not these */
.mp-cartao .cf-ecra span { display: inline; margin: 0; min-height: 0; font-size: inherit; line-height: inherit; color: inherit; }
.mp-cartao .cf-ecra .cf-play-rotulo { display: inline-flex; }
.mp-cartao .cf-ecra .cf-play-icone { display: grid; }
.mp-cartao .cf-ecra .cf-play-rotulo > span:last-child { display: block; }
.cf-todos .btn { gap: 8px; }
.cf-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The work section's two tabs. Without scripting both groups show, the
   second under its own heading. */
.mp-abas { display: inline-flex; gap: 6px; margin-top: clamp(18px, 2.6vh, 26px); padding: 5px;
           border-radius: 999px; background: #efe8dc; border: 1px solid #e2dbcd; }
.mp-abas[hidden] { display: none; }
.mp-aba { min-height: 44px; min-width: 104px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent;
          color: #1f3a4d; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.mp-aba[aria-selected="true"] { background: #1f3a4d; color: #fff; }
.mp-aba:not([aria-selected="true"]):hover { background: #fffdf9; }
.mp-aba:focus-visible { outline: 3px solid #c26a44; outline-offset: 2px; }
.cf-outros-h { margin: clamp(28px, 4vh, 40px) 0 0; font-size: 20px; font-weight: 800; color: #1f3a4d; }
.mp-montra-js .cf-outros-h { display: none; }
.mp-painel[hidden] { display: none; }
/* the other work is two pieces: each card a site card's width (a third of the row
   less its share of the gaps), the pair centred; the id outranks the homepage's
   own three-column rule, which loads after this sheet */
#mp-painel-outros .mp-fila--par { grid-template-columns: repeat(2, calc((100% - 2 * clamp(12px, 1.8vw, 26px)) / 3)); justify-content: center; }
@media (max-width: 980px) { #mp-painel-outros .mp-fila--par { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { #mp-painel-outros .mp-fila--par { grid-template-columns: minmax(0, 1fr); } }

/* The live contact band's direct calendar link (inside its panel): a 44 px tap
   height on this page, the band's markup itself unchanged from the live homepage */
.cx3-act .booking-note a { display: inline-block; padding-block: 15px; margin-block: -15px; }
/* Links inside the band's panels (the form's privacy-policy link, the calendar
   note): the site's own ink-band link, paper on ink (10.8:1), never the default
   ink link, which vanished on this ground (re-review n1) */
.cx3-act--say .panel-drop a { color: #f7f4ee; text-decoration: none; border-bottom: 1px solid rgba(247, 244, 238, .45); }
.cx3-act--say .panel-drop a:hover { color: #fff; border-color: #fff; }
.cx3-act--say .panel-drop a:focus-visible { outline: 3px solid #e8c4a8; outline-offset: 3px; border-radius: 2px; }

/* The services, each at its place in the village. */
.cf-servicos { background: #efe8dc; padding: clamp(48px, 7vh, 76px) 0; }
.cf-serv-grelha { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px;
                  grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cf-serv { min-width: 0; }
.cf-serv-a { display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 132px; padding: 18px 18px 16px;
             border-radius: 14px; background: #fffdf9; border: 1px solid #e2dbcd; color: #1f3a4d; text-decoration: none;
             transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.cf-serv-a:hover { border-color: #1f3a4d; transform: translateY(-2px); box-shadow: 0 16px 28px -20px rgba(31, 58, 77, .5); }
.cf-serv-a:focus-visible { outline: 3px solid #c26a44; outline-offset: 3px; }
.cf-serv-lugar { font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9e4d31; }
.cf-serv-t { font-size: 18px; font-weight: 800; line-height: 1.2; }
.cf-serv-ver { margin-top: auto; padding-top: 10px; font-size: 15px; font-weight: 700; color: #9e4d31; }
.cf-serv-a:hover .cf-serv-ver { text-decoration: underline; text-underline-offset: 3px; }
/* three styles in turn, as the guided visit's cards: navy, paper, rust */
.cf-serv--navy .cf-serv-a { background: #1f3a4d; border-color: #1f3a4d; color: #fff; }
.cf-serv--navy .cf-serv-lugar, .cf-serv--navy .cf-serv-ver { color: #f4b98f; }
.cf-serv--navy .cf-serv-t { color: #efd7a0; }
.cf-serv--laranja .cf-serv-a { background: #9e4d31; border-color: #9e4d31; color: #fff; }
.cf-serv--laranja .cf-serv-lugar, .cf-serv--laranja .cf-serv-ver { color: #ffe0c4; }
.cf-serv--laranja .cf-serv-t { color: #fff3d9; }
.cf-serv--navy .cf-serv-a:hover, .cf-serv--laranja .cf-serv-a:hover { border-color: #fffdf9; }

/* The three latest articles. */
.cf-blog { background: #f7f4ee; padding: clamp(48px, 7vh, 76px) 0 clamp(40px, 6vh, 64px); }
.cf-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 1.8vw, 22px);
            grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cf-post { min-width: 0; }
.cf-post > a { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 14px;
               background: #fffdf9; border: 1px solid #e2dbcd; color: #1f3a4d; text-decoration: none;
               transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.cf-post > a:hover { border-color: #1f3a4d; transform: translateY(-2px); box-shadow: 0 16px 28px -20px rgba(31, 58, 77, .5); }
.cf-post > a:focus-visible { outline: 3px solid #c26a44; outline-offset: 3px; }
.cf-post .post-thumb { border-block-end: 1px solid #e9e3d8; border-inline-end: 0; }
.cf-post-corpo { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 20px; }
.cf-post-data { font-size: 14px; color: #4f6577; }
.cf-post-t { font-size: 18px; font-weight: 800; line-height: 1.25; }
.cf-post > a:hover .cf-post-t { color: #9e4d31; }
.cf-todos { margin: clamp(18px, 3vh, 26px) 0 0; }

@media (max-width: 980px) {
  .cf-serv-grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-posts { grid-template-columns: minmax(0, 1fr); }
  .cf-post > a { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); align-items: center; }
  .cf-post .post-thumb { border-block-end: 0; border-inline-end: 1px solid #e9e3d8; }
}
@media (max-width: 560px) {
  .cf-serv-grelha { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cf-serv-a { padding: 15px 16px 14px; }
  .cf-post > a { display: flex; }
  .cf-post .post-thumb { border-inline-end: 0; border-block-end: 1px solid #e9e3d8; }
  .cf-play-rotulo { font-size: 16px; padding: 10px 18px 10px 10px; }
  .cf-play-icone { width: 42px; height: 42px; }
  .mp-aba { min-width: 92px; padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-serv-a, .cf-post > a, .cf-play-rotulo { transition: none; }
  .cf-serv-a:hover, .cf-post > a:hover { transform: none; }
}

/* ---- the live homepage's sections (build_home.CSS) ---- */
@font-face {
    font-family: "Instrument Serif";
    src: url("/assets/fonts/InstrumentSerif-Italic-latin.woff2") format("woff2");
    font-style: italic; font-weight: 400; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
  }
  .cx3 {
    --ink: #1f3a4d; --paper: #f7f4ee; --accent: #9e4d31; --sand: #e8c4a8;
    --story-gold: #efd7a0;
    --accent-escuro: #c26a44;
    --noite: #0b1620; --hdr: 69px;
    --carta-l: clamp(252px, 29vw, 424px);
    --carta-l1: clamp(292px, 40vw, 680px);
    --carta-gap: clamp(14px, 1.5vw, 28px);
    --carta-m: clamp(16px, 2.2vw, 42px);
    --carta-pad: clamp(15px, 1.45vw, 24px);
    --gx0: calc(var(--carta-m) + var(--carta-l1) + var(--carta-gap));
    --gx1: calc(100% - var(--carta-m) - var(--carta-l) - var(--carta-gap));
    --caixa-t: clamp(38px, 5.4vh, 62px);
    --caixa-b: clamp(40px, 5.6vh, 66px);
    --cartao-b: 14px;
    --cartao-h: clamp(178px, 27vh, 212px);
  }
  .cx3-numeros { background: var(--noite); color: rgba(247, 244, 238, .84);
                 padding: clamp(30px, 5vh, 58px) 0 clamp(34px, 6vh, 66px); }
  .cx3-num-fila { list-style: none; margin: 0; padding: clamp(22px, 3vh, 34px) 0 0;
                  border-top: 1px solid rgba(247, 244, 238, .18);
                  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
                  gap: 22px clamp(16px, 2.4vw, 34px); }
  .cx3-num { opacity: clamp(0, calc((var(--p) - var(--a)) / .26), 1);
             transform: translateY(calc(18px * (1 - clamp(0, (var(--p) - var(--a)) / .26, 1)))); }
  .cx3-num-n { margin: 0 0 7px; max-width: none;
               font-size: clamp(34px, 4.6vw, 58px); font-weight: 800; line-height: 1;
               letter-spacing: -.035em; font-variant-numeric: tabular-nums;
               color: var(--paper); }
  .cx3-num-l { margin: 0; max-width: 20ch; font-size: 15px; line-height: 1.45;
               color: rgba(247, 244, 238, .68); }
  .cx3-montra {
    background: radial-gradient(120% 92% at 18% 0%, #fffdf9 0%, #f7f4ee 52%, #efe8dc 100%);
    color: #1f3a4d;
    padding: clamp(48px, 7vh, 76px) 0 clamp(48px, 6vh, 64px);
  }
  .cx3-wrap { max-width: 1160px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 54px); }
  .mp-cabeca { display: flex; flex-direction: column; gap: 10px; max-width: 40ch; }
  .mp-olho { font-size: 12px; font-weight: 600; letter-spacing: .2em; color: #445c6e; }
  .mp-titulo { margin: 0; font-weight: 800; font-size: clamp(28px, 3.6vw, 40px);
               line-height: 1.04; letter-spacing: -.015em; color: #1f3a4d; }
  .mp-regua { height: 3px; width: 56px; border-radius: 2px; background: var(--accent); }
  .mp-serifa { margin: 0; font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
               font-style: italic; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.3;
               color: #3a5769; }
  .mp-fila { display: grid; grid-template-columns: repeat(3, 1fr);
             gap: clamp(12px, 1.8vw, 26px); align-items: end;
             margin-top: clamp(26px, 4vh, 40px); }
  .mp-fila--dois { margin-top: clamp(16px, 2.4vw, 30px); align-items: start; }
  .mp-lugar { position: relative;
              opacity: clamp(0, calc((var(--p) - var(--a)) / .30), 1);
              transform: translateY(calc(24px * (1 - clamp(0, (var(--p) - var(--a)) / .30, 1)))); }
  .mp-cartao {
    margin: 0; position: relative; z-index: 3; overflow: hidden;
    background: #fffdf9; border: 1px solid #e2dbcd; border-radius: 14px;
    box-shadow: 0 26px 44px -28px rgba(31, 58, 77, .55),
                0 3px 10px -4px rgba(31, 58, 77, .10);
  }
  .mp-crome {
    display: flex; align-items: center; gap: 5px; padding: 0 10px; height: 24px;
    background: #f1eade; border-bottom: 1px solid #e6dfd1;
  }
  .mp-crome i { width: 6px; height: 6px; border-radius: 50%; background: #d5ccbc; }
  .mp-crome b { flex: 1; max-width: 108px; height: 8px; margin-left: 6px;
                border-radius: 4px; background: #fffdf9; border: 1px solid #e6dfd1; }
  .mp-ecra { position: relative; display: block; overflow: hidden;
             aspect-ratio: 16 / 10; background: #f1eade; }
  .mp-shot { position: absolute; inset: 0; opacity: 0;
             transition: opacity .5s ease; }
  .mp-shot.is-on { opacity: 1; }
  .mp-shot picture { display: block; width: 100%; height: 100%; }
  .mp-cartao picture, .mp-cartao img { display: block; width: 100%; height: 100%;
                                       object-fit: cover; }
  .mp-cartao figcaption { padding: 13px 14px 15px; }
  .mp-cartao figcaption span { min-height: 2.9em; }
  .mp-cartao .mp-nome { display: block; margin: 0; max-width: none;
                        font-size: 15.5px; font-weight: 700; line-height: 1.3;
                        letter-spacing: -.008em; color: #1f3a4d; }
  .mp-cartao span { display: block; margin-top: 3px; font-size: 14px;
                    line-height: 1.45; color: #4f6577; }
  .mp-lugar--e .mp-cartao {
    transform: perspective(1100px) rotateY(9deg) scale(.962); transform-origin: right center;
  }
  .mp-lugar--d .mp-cartao {
    transform: perspective(1100px) rotateY(-9deg) scale(.962); transform-origin: left center;
  }
  .mp-lugar--meio .mp-cartao {
    box-shadow: 0 34px 56px -30px rgba(31, 58, 77, .60),
                0 6px 16px -8px rgba(31, 58, 77, .14);
    transform: translateY(-6px);
  }
  .mp-sombra {
    position: absolute; left: 12%; right: 12%; bottom: -14px; height: 22px; z-index: 1;
    border-radius: 50%; filter: blur(6px);
    background: radial-gradient(50% 50% at 50% 50%,
                rgba(31, 58, 77, .24) 0%, rgba(31, 58, 77, 0) 72%);
  }
  @keyframes mpRespira { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
  @keyframes mpRespiraSombra {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(.94); opacity: .72; }
  }
  .cx3-icones {
    list-style: none; margin: clamp(38px, 6vh, 72px) 0 0; padding: clamp(26px, 4vh, 42px) 0 0;
    border-top: 1px solid #e2dbcd;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(10px, 1.6vw, 22px);
  }
  .cx3-icone {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    min-height: 44px; padding: 14px 14px 16px;
    border: 1px solid transparent; border-radius: 12px;
    color: #1f3a4d;
    perspective: 620px;
    transition: transform .32s cubic-bezier(.22, .61, .36, 1),
                border-color .32s ease, background-color .32s ease;
  }
  .cx3-icone-d { display: block; }
  .cx3-icone svg {
    display: block; overflow: visible; width: 54px; height: 54px;
    fill: none; stroke: #3a5769; stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
    transition: stroke .32s ease;
  }
  .cx3-icone .ic-terra { stroke: var(--accent); }
  .cx3-icone circle.ic-terra { stroke: var(--accent); }
  .cx3-icone-t { margin: 0; max-width: none;
                 font-size: 15px; font-weight: 700; line-height: 1.3;
                 letter-spacing: -.008em; color: #1f3a4d; }
  .cx3-icone-p { margin: 0; max-width: 38ch;
                 font-size: 14px; line-height: 1.5; color: #445c6e; }
  @keyframes cx3Vira {
    from { transform: rotateY(0deg); }
    to   { transform: rotateY(360deg); }
  }
  .cx3-icone.is-vira .cx3-icone-d {
    animation: cx3Vira 660ms cubic-bezier(.36, .05, .22, 1);
  }
  .cx3-icone:hover, .cx3-icone:focus-visible, .cx3-icone:focus-within,
  .cx3-icone:active {
    transform: translateY(-4px);
    border-color: #e2dbcd; background: #fffdf9;
  }
  .cx3-icone:hover svg, .cx3-icone:focus-visible svg,
  .cx3-icone:focus-within svg, .cx3-icone:active svg {
    stroke: #1f3a4d;
  }
  .cx3-icone:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .cx3-act { position: relative; background: var(--ink); }
  .cx3-act--say { padding: clamp(48px, 6vh, 72px) 0 clamp(54px, 7vh, 84px);
                  color: rgba(247, 244, 238, .84); }
  .cx3-lead { max-width: 22ch; margin: 0; font-size: clamp(21px, 2.3vw, 33px);
              line-height: 1.18; font-weight: 700; color: var(--paper);
              letter-spacing: -.015em; }
  .cx3-contact .cx3-lead { text-wrap: initial; }
  .cx3-sub { max-width: 46ch; margin-top: 12px; color: rgba(247, 244, 238, .68);
             font-size: 16px; line-height: 1.55; }
  .cx3-contact { display: flex; flex-wrap: wrap; align-items: flex-end;
                 justify-content: space-between; gap: clamp(24px, 3.5vw, 56px); }
  .cx3-contact-txt { flex: 1 1 30ch; min-width: 0; }
  .cx3-eyebrow { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
                 color: rgba(247, 244, 238, .58); margin: 0 0 10px;
                 font-weight: 600; line-height: 1.3; max-width: none; }
  .cx3-end { display: flex; gap: 12px; flex-wrap: wrap; flex: 0 1 auto; }
  .cx3-act--say .btn-ghost {
    color: var(--paper); border-color: rgba(247, 244, 238, .42);
  }
  .cx3-act--say .btn-ghost:hover,
  .cx3-act--say .btn-ghost:focus-visible {
    color: var(--paper); border-color: var(--paper);
    background: rgba(247, 244, 238, .09);
  }
  @media (max-width: 980px) {
    .mp-fila { grid-template-columns: repeat(2, 1fr); align-items: start; }
    .mp-lugar--e .mp-cartao, .mp-lugar--d .mp-cartao { transform: none; }
    .mp-lugar--meio .mp-cartao { animation: none; }
    .mp-sombra { display: none; }
    .cx3-icones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 880px) {
    .cx3-num-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
  }
  @media (max-width: 560px) {
    .mp-fila { grid-template-columns: 1fr; }
    .cx3-icones { grid-template-columns: 1fr; gap: 6px; }
    .cx3-icone {
      display: grid; grid-template-columns: 54px minmax(0, 1fr);
      grid-template-rows: auto auto; align-items: start;
      column-gap: 16px; row-gap: 5px;
    }
    .cx3-icone-d { grid-row: 1 / span 2; align-self: center; }
    .cx3-icone-t, .cx3-icone-p { grid-column: 2; max-width: none; }
    .cx3-cantos { font-size: 14px; grid-template-columns: 1fr; letter-spacing: .08em; }
    .cx3-eyebrow, .mp-olho { font-size: 14px; letter-spacing: .1em; }
    .cx3-serv .cx3-olho { font-size: 14px; letter-spacing: .12em; }
  }
  @media (prefers-reduced-motion: reduce) {
    .cx3-indicio .cx3-ind-w, .cx3-ind-wheel, .cx3-ind-finger { animation: none; }
    .mp-lugar--meio .mp-cartao, .mp-sombra { animation: none; }
    .mp-shot { transition: none; }
    .mp-lugar, .cx3-num { opacity: 1; transform: none; }
    .cx3-pontos i { transition: none; }
    .cx3-icone, .cx3-icone svg, .cx3-icone-d { transition: none; }
    .cx3-icone.is-vira .cx3-icone-d { animation: none; }
    .cx3-txt, .cx3-txt .cx3-ln, .cx3-txt .cx3-ln > *, .cx3-txt .cx3-fade {
      opacity: 1 !important; transform: none !important;
    }
    .cx3-serv .cx3-mrk { background-size: 100% 2px !important; }
  }
  #cx3-s1 { --piso: #f0c2af; }
  #cx3-s2 { --piso: #a6d2f0; }
  #cx3-s3 { --piso: #f0bfd3; }
  #cx3-s4 { --piso: #b1d5b8; }
  .mp-controls { display: flex; align-items: center; justify-content: space-between;
    padding: 5px 10px; border-block: 1px solid #e2dbcd; background: #f7f4ee; }
  .mp-controls[hidden], .service-tabs[hidden] { display: none; }
  .mp-controls button { display: grid; place-items: center; width: 48px; height: 48px;
    padding: 0; border: 1px solid #d9d1c3; border-radius: 10px; color: #1f3a4d;
    background: #fffdf9; cursor: pointer; transition: transform .16s ease; }
  .mp-controls button svg { width: 18px; height: 18px; fill: none;
    stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mp-position { color: #445c6e; font-size: 14px; font-variant-numeric: tabular-nums; }
  .mp-controls button:focus-visible, .service-tab:focus-visible, .service-call:focus-visible {
    outline: 2px solid #9e4d31; outline-offset: 3px; }
  .mp-controls button:active, .service-tab:active { transform: scale(.97); }
  .service-console { margin-top: 48px; }
  .service-console.is-ready { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.3fr);
    gap: 14px; padding: 14px; background: #efe8dc; border: 1px solid #d9d1c3; border-radius: 18px; }
  .service-tabs { display: flex; flex-direction: column; gap: 6px; }
  .service-tab { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px;
    text-align: left; font: inherit; font-size: 14px; line-height: 1.35; font-weight: 600;
    border: 1px solid transparent; border-radius: 11px; background: transparent;
    padding: 12px 16px; color: #3a5769; cursor: pointer; }
  .service-tab::before { content: attr(data-number); font-size: 12px; font-variant-numeric: tabular-nums; }
  .service-tab[aria-selected="true"] { color: #f7f4ee; background: #1f3a4d; border-color: #1f3a4d; }
  .service-console.is-ready .cx3-icones { display: block; margin: 0; padding: 0; border: 0; }
  .service-console.is-ready .cx3-icone { min-height: 266px; padding: 26px; gap: 14px;
    background: #fffdf9; border-color: #d9d1c3; border-radius: 12px; transform: none; }
  .service-console.is-ready .cx3-icone[hidden] { display: none; }
  .service-console.is-ready .cx3-icone-t { font-size: 22px; line-height: 1.2; }
  .service-console.is-ready .cx3-icone-p { font-size: 16px; max-width: 44ch; }
  .service-call { display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; grid-column: 2;
    font-size: 14px; font-weight: 600; color: #1f3a4d; text-decoration: underline;
    text-underline-offset: 4px; gap: 12px; }
  @media (hover: hover) {
    .mp-controls button:hover { background: #efe8dc; transform: translateY(-2px); }
    .service-tab:not([aria-selected="true"]):hover { background: #fffdf9; }
  }
  @media (max-width: 700px) {
    .service-console.is-ready { grid-template-columns: minmax(0, 1fr); padding: 10px; }
    .service-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .service-tab { gap: 8px; padding: 10px; min-height: 72px; font-size: 14px; }
    .service-tab::before { display: none; }
    .service-console.is-ready .cx3-icone { display: flex; min-height: 285px; padding: 22px; }
    .mp-lugar--meio .mp-cartao { transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .mp-controls button { transition: none; }
  }