/* Inter Display (SIL Open Font License, assets/fonts/Inter-OFL.txt): in place of Helvetica Now Display */
@font-face {
  font-family: "Inter Display";
  src: url("../assets/fonts/InterDisplay-ExtraLight.woff2") format("woff2");
  font-weight: 200;
  font-display: swap;
}
@font-face {
  font-family: "Inter Display";
  src: url("../assets/fonts/InterDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter Display";
  src: url("../assets/fonts/InterDisplay-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Inter Display";
  src: url("../assets/fonts/InterDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter Display";
  src: url("../assets/fonts/InterDisplay-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

/* Gloria Slab (SIL Open Font License, assets/fonts/GloriaSlab-OFL.txt): in place of American Typewriter.
   Built from Cutive by tools/build_gloria_slab.py, matched to American Typewriter's size and weights. */
@font-face {
  font-family: "Gloria Slab";
  src: url("../assets/fonts/GloriaSlab-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Gloria Slab";
  src: url("../assets/fonts/GloriaSlab-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/*
 * Layout mirrors the 1920x1080 XD artboards. --u is 1 artboard pixel, scaled to the
 * tighter viewport side; each panel's .frame is the artboard, centred via --ox/--oy.
 * Text tops are computed so baselines land where the PDF places them.
 */
:root {
  --font: "Inter Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-accent: "Gloria Slab", "Courier New", Courier, serif;
  --white: #ffffff;
  --red: #781f19;
  --beige: #d7cdc7;
  --maroon: #471d1f;
  --paper: #ecebe8;
  --u: min(calc(100vw / 1920), calc(100vh / 1080));
  --ox: calc((100vw - 1920 * var(--u)) / 2);
  --oy: calc((100vh - 1080 * var(--u)) / 2);
  --hair: max(1px, var(--u));
  --ease-dialog: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-width: none;
  /* A sideways swipe or trackpad gesture must not be taken as browser back/forward */
  overscroll-behavior-x: none;
}

html::-webkit-scrollbar {
  display: none;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--white);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

body.is-loading,
body.dialog-open {
  overflow: hidden;
}

p,
h1,
h2,
dl,
dd,
figure,
fieldset {
  margin: 0;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

img {
  display: block;
}

:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

u {
  text-decoration-thickness: var(--hair);
}

.frame {
  position: absolute;
  left: var(--ox);
  top: var(--oy);
  width: calc(1920 * var(--u));
  height: calc(1080 * var(--u));
}

.frame > * {
  position: absolute;
}

.slab {
  font-family: var(--font-accent);
  font-weight: 700;
  text-transform: uppercase;
}

/* ---------- Shared controls ---------- */

.btn-outline {
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  font-weight: 700;
  transition: background-color 0.2s, color 0.2s;
}

@media (hover: hover) {
  .btn-outline:hover {
    background: var(--red);
    border-color: var(--red);
    color: var(--paper);
  }
}

.btn-solid {
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--red);
  transition: opacity 0.2s;
}

@media (hover: hover) {
  .btn-solid:hover {
    opacity: 0.88;
  }
}

.close-btn {
  width: calc(50 * var(--u));
  height: calc(50 * var(--u));
  border: calc(3 * var(--u)) solid currentColor;
  border-radius: 50%;
}

.close-btn::before,
.close-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(24 * var(--u));
  height: calc(3 * var(--u));
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

.close-btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.photo {
  flex-shrink: 0;
  height: 100%;
  overflow: hidden;
  cursor: zoom-in;
}

.photo img {
  width: auto;
  height: 100%;
  transition: transform 0.6s;
}

@media (hover: hover) {
  .photo:hover img {
    transform: scale(1.03);
  }
}

/* ---------- Loader ---------- */

.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--beige);
  transition: background-color 0.3s, opacity 0.7s, visibility 0.7s;
}

.loader.is-alt {
  background: var(--red);
}

.loader.is-done {
  opacity: 0;
  visibility: hidden;
}

.loader__icon {
  position: relative;
  width: calc(92.3 * var(--u));
  aspect-ratio: 370 / 372;
  animation: loader-spin 2s linear infinite;
}

.loader__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s;
}

.loader__img--light,
.loader.is-alt .loader__img--dark {
  opacity: 0;
}

.loader.is-alt .loader__img--light {
  opacity: 1;
}

@keyframes loader-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Navbar ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  height: calc(100 * var(--u));
  color: var(--white);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s, visibility 0.6s, color 0.4s;
}

.site-header.is-visible {
  opacity: 1;
  visibility: visible;
}

.site-header.is-dark {
  color: var(--red);
}

body.dialog-open .site-header {
  opacity: 0;
  visibility: hidden;
}

.nav {
  position: absolute;
  top: 0;
  left: var(--ox);
  width: calc(1920 * var(--u));
  height: 100%;
}

.nav > *,
.nav__links li,
.nav__cta {
  position: absolute;
}

.nav__menu {
  inset: 0;
  pointer-events: none;
}

.nav__menu a {
  pointer-events: auto;
}

.nav__langs {
  top: calc(61.875 * var(--u));
  left: calc(57 * var(--u));
  font-size: calc(15 * var(--u));
  font-weight: 200;
  line-height: 1;
  white-space: pre;
}

.nav__lang {
  font-weight: 200;
  line-height: 1;
}

.nav__lang.is-active {
  font-weight: 700;
}

.nav__links li {
  top: calc(61 * var(--u));
  font-size: calc(16 * var(--u));
  letter-spacing: 0.037em;
  line-height: 1;
}

.nav__links li:nth-child(1) { left: calc(236 * var(--u)); }
.nav__links li:nth-child(2) { left: calc(386 * var(--u)); }
.nav__links li:nth-child(3) { left: calc(620 * var(--u)); }
.nav__links li:nth-child(4) { left: calc(778 * var(--u)); }
.nav__links li:nth-child(5) { left: calc(997 * var(--u)); }
.nav__links li:nth-child(6) { left: calc(1222 * var(--u)); }
.nav__links li:nth-child(7) { left: calc(1433 * var(--u)); }

/* The English labels have other widths ("PROJECT SPECIFICATIONS"): spread them evenly between
   the first item's place and the button instead of the Portuguese positions */
html:lang(en) .nav__links {
  position: absolute;
  top: calc(61 * var(--u));
  left: calc(236 * var(--u));
  display: flex;
  justify-content: space-between;
  width: calc(1320 * var(--u));
}

html:lang(en) .nav__links li {
  position: static;
}

.nav__link {
  position: relative;
  display: block;
  white-space: nowrap;
}

.nav__link.is-active {
  font-weight: 800;
}

.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.037em;
  top: calc(100% + 2 * var(--u));
  height: var(--hair);
  background: currentColor;
}

.nav__cta {
  top: calc(55 * var(--u));
  left: calc(1624 * var(--u));
  display: grid;
  place-items: center;
  width: calc(239 * var(--u));
  height: calc(32 * var(--u));
  border: 1px solid currentColor;
  border-radius: calc(6.5 * var(--u));
  font-size: calc(16 * var(--u));
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

@media (hover: hover) {
  .nav__cta:hover {
    background: var(--white);
    border-color: var(--white);
    color: var(--red);
  }
}

@media (hover: hover) {
  .site-header.is-dark .nav__cta:hover {
    background: var(--red);
    border-color: var(--red);
    color: var(--paper);
  }
}

.site-header.is-cta .nav__cta {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--red);
}

.nav__toggle {
  display: none;
}

/* ---------- Horizontal scroll ---------- */

.scroll {
  position: relative;
}

.scroll__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  overflow: clip;
  background: var(--paper);
}

.scroll__bg {
  position: absolute;
  inset: 0;
}

.scroll__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #6b7680 url("../assets/img/hero-lisboa.webp") center / cover no-repeat;
  background-image: image-set(url("../assets/img/hero-lisboa.avif") type("image/avif"), url("../assets/img/hero-lisboa.webp") type("image/webp"));
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s;
}

.hero-video.is-playing {
  opacity: 1;
}

.scroll__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3412);
}

.scroll__track {
  position: relative;
  display: flex;
  height: 100%;
  will-change: transform;
}

.panel {
  position: relative;
  flex: 0 0 100vw;
  height: 100%;
  /* Bleeds the panel colour into any sub-pixel gap before the next panel */
  box-shadow: 2px 0 0 var(--panel-bg, transparent);
}

/* ---------- Hero ---------- */

.hero__logo {
  top: calc(514 * var(--u));
  left: calc(613 * var(--u));
  width: calc(694.1 * var(--u));
  opacity: 0;
  transition: opacity 0.9s;
}

.hero__logo img {
  width: 100%;
  height: auto;
}

/* Fade only, no movement */
.hero.is-text .hero__logo {
  opacity: 1;
}

/* ---------- Ficha técnica ---------- */

.ficha__stats {
  inset: 0;
}

.ficha__stat {
  position: absolute;
  top: 0;
  left: calc((var(--cx) - 200) * var(--u));
  width: calc(400 * var(--u));
  text-align: center;
}

.ficha__stat dd {
  position: absolute;
  top: calc(489.375 * var(--u));
  width: 100%;
  font-size: calc(35 * var(--u));
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.ficha__stat dd sup {
  font-size: 0.5834em;
  line-height: 0;
  vertical-align: calc(12 * var(--u));
}

.ficha__stat dt {
  position: absolute;
  top: calc(569.5 * var(--u));
  width: 100%;
  font-size: calc(20 * var(--u));
  font-weight: 500;
  letter-spacing: 0.0446em;
  line-height: 1;
}

.ficha__rule {
  top: calc(489.5 * var(--u));
  left: calc(var(--x) * var(--u));
  width: calc(2 * var(--u));
  height: calc(100 * var(--u));
  background: var(--white);
}

.ficha__text {
  top: calc(818.875 * var(--u));
  left: 0;
  width: 100%;
  font-size: calc(15 * var(--u));
  font-weight: 500;
  line-height: calc(21 * var(--u));
  text-align: center;
  white-space: nowrap;
}

/* ---------- Sobre ---------- */

.sobre {
  --panel-bg: var(--paper);
  background: var(--paper);
  color: var(--red);
}

/* Opaque column from the viewport edge: the photo strip slides underneath it */
.sobre__intro {
  z-index: 2;
  top: calc(-1 * var(--oy));
  left: calc(-1 * var(--ox));
  width: calc(var(--ox) + 543 * var(--u));
  height: 100vh;
  background: var(--paper);
}

.sobre__icon {
  position: absolute;
  top: calc(var(--oy) + 193.5 * var(--u));
  left: calc(var(--ox) + 55.5 * var(--u));
  width: calc(92.3 * var(--u));
  height: auto;
}

.sobre__text {
  position: absolute;
  top: calc(var(--oy) + 633.75 * var(--u));
  left: calc(var(--ox) + 57 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 500;
  letter-spacing: 0.0489em;
  line-height: calc(20 * var(--u));
  white-space: nowrap;
}

.sobre__text p + p {
  margin-top: calc(20 * var(--u));
}

.sobre__text strong {
  font-weight: 800;
}

.sobre__strip {
  z-index: 1;
  top: calc(203.9 * var(--u));
  left: calc(572.9 * var(--u));
  display: flex;
  align-items: flex-start;
  gap: calc(29.9 * var(--u));
  height: calc(711.2 * var(--u));
  padding-right: calc(274 * var(--u));
  will-change: transform;
}

.sobre__quote {
  flex-shrink: 0;
  margin: calc(336.2 * var(--u)) 0 0 calc(152.1 * var(--u));
  font-size: calc(25 * var(--u));
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: calc(29 * var(--u));
  white-space: nowrap;
}

.sobre__quote u {
  text-underline-offset: calc(4 * var(--u));
}

/* ---------- Localização ---------- */

.local {
  --panel-bg: var(--paper);
  background: var(--paper);
  color: var(--red);
}

/* Mobile only (the desktop map is .local__stage) */
.local__map {
  display: none;
}

.local__map img {
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
}

/* Desktop map: a full-panel layer clipped (by main.js) to the map's box, which opens up to the
   whole screen while the panel is held; the image and the pins move with transforms only */
.local__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #6a2219;
  cursor: zoom-in;
}

.local__map-img {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(1926 * var(--u));
  height: auto;
  max-width: none;
  transform-origin: 0 0;
  will-change: transform;
}

.local__pin {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  color: var(--paper);
  font-family: var(--font-accent);
  font-size: calc(20 * var(--u));
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: calc(23 * var(--u));
  text-align: center;
  white-space: nowrap;
  transition: opacity 0.7s;
  will-change: transform;
}

.local__pin.is-shown {
  opacity: 1;
}

.local__pin img {
  position: absolute;
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  max-width: none;
  transform: translate(-50%, -50%) scale(0.8);
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.local__pin.is-shown img {
  transform: translate(-50%, -50%);
  animation: pin-float 5s ease-in-out 1s infinite alternate;
}

.local__pin > span {
  position: absolute;
  top: calc(var(--label) * var(--u));
  left: 0;
  transform: translateX(-50%);
}

/* A slight drift, so the pins do not read as a flat picture */
@keyframes pin-float {
  from { translate: 0 0; }
  to { translate: 0 calc(-4 * var(--u)); }
}

/* Title, text and button come in one after another when the panel arrives (--in), and give way to
   the map as it opens (--lp, the panel's progress, set by main.js) */
@property --in {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.local .frame {
  pointer-events: none;
}

.local .frame > * {
  pointer-events: auto;
}

.local.is-map .frame > * {
  pointer-events: none;
}

.local__title,
.local__text,
.local__place,
.local__times,
.local__button {
  opacity: calc(var(--in) * clamp(0, 1 - var(--lp, 0) * 4, 1));
  translate: calc(var(--lp, 0) * -80 * var(--u)) calc((1 - var(--in)) * 16 * var(--u));
}

.local.is-in .local__title { animation: local-in 0.8s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.local.is-in .local__text { animation: local-in 0.8s 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.local.is-in .local__place { animation: local-in 0.8s 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.local.is-in .local__times { animation: local-in 0.8s 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.local.is-in .local__button { animation: local-in 0.8s 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

@keyframes local-in {
  from { --in: 0; }
  to { --in: 1; }
}

.local__title {
  top: calc(205.62 * var(--u));
  left: calc(1184 * var(--u));
  font-size: calc(28 * var(--u));
  font-weight: 600;
  letter-spacing: 0.049em;
  line-height: calc(32 * var(--u));
  white-space: nowrap;
}

.local__text,
.local__place,
.local__times {
  left: calc(1184 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 500;
  white-space: nowrap;
}

.local__text {
  top: calc(318.75 * var(--u));
  letter-spacing: 0.0547em;
  line-height: calc(20 * var(--u));
}

.local__text strong {
  font-weight: 700;
}

.local__place {
  top: calc(496.75 * var(--u));
  font-weight: 800;
  letter-spacing: 0.0665em;
  line-height: 1;
}

.local__times {
  top: calc(545.75 * var(--u));
  letter-spacing: 0.0578em;
  line-height: calc(28 * var(--u));
}

.local__times li {
  text-decoration: underline;
  text-decoration-thickness: var(--hair);
  text-underline-offset: calc(3 * var(--u));
}

.local__button {
  top: calc(857 * var(--u));
  left: calc(1184 * var(--u));
  width: calc(356 * var(--u));
  height: calc(62 * var(--u));
  border-radius: calc(13.5 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: 1;
}

/* ---------- Arquitetura ---------- */

.arq {
  --panel-bg: var(--paper);
  display: flex;
  flex: 0 0 auto;
  background: var(--paper);
  color: var(--red);
}

.arq__intro {
  position: relative;
  flex: 0 0 100vw;
  height: 100%;
}

.arq__title {
  top: calc(398.95 * var(--u));
  left: 0;
  width: 100%;
  font-size: calc(30 * var(--u));
  font-weight: 600;
  letter-spacing: 0.0462em;
  line-height: 1;
  text-align: center;
}

.arq__icon {
  top: calc(493.6 * var(--u));
  left: calc(913.9 * var(--u));
  width: calc(92.3 * var(--u));
  height: auto;
}

.arq__text {
  top: calc(658 * var(--u));
  left: 0;
  width: 100%;
  font-size: calc(16 * var(--u));
  font-weight: 500;
  letter-spacing: 0.0539em;
  line-height: calc(22 * var(--u));
  text-align: center;
  white-space: nowrap;
}

.arq__text strong {
  font-weight: 800;
}

.arq__text u {
  text-underline-offset: calc(4 * var(--u));
}

/* The video: its own artboard between the text and the photos, 16:9 with rounded corners */
.arq__film {
  position: relative;
  flex: 0 0 100vw;
  height: 100%;
}

.film {
  top: calc(200 * var(--u));
  left: calc(302.8 * var(--u));
  width: calc(1314.4 * var(--u));
  height: calc(732.1 * var(--u));
  overflow: hidden;
  border-radius: calc(27 * var(--u));
  background: var(--maroon);
}

.film__play,
.film picture,
.film__poster,
.film iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.film__play {
  position: relative;
  cursor: pointer;
}

.film__poster {
  object-fit: cover;
  transition: transform 0.6s;
}

/* The design's play button (Drive: video_sg109-02.svg) */
.film__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(154 * var(--u));
  height: calc(154 * var(--u));
  transform: translate(-50%, -50%);
  transition: transform 0.4s;
}

@media (hover: hover) {
  .film__play:hover .film__poster {
    transform: scale(1.03);
  }

  .film__play:hover .film__icon {
    transform: translate(-50%, -50%) scale(1.06);
  }
}

.arq__strip {
  display: flex;
  align-items: flex-start;
  gap: calc(25 * var(--u));
  height: 100%;
  padding: calc(var(--oy) + 221 * var(--u)) calc(57 * var(--u)) 0 calc(var(--ox) + 57 * var(--u));
}

.arq__strip .photo {
  height: calc(700 * var(--u));
}

/* Each photo comes in as it reaches the screen: it fades in and settles from a slight zoom inside
   its frame (.is-reveal is set by main.js, so without it the photos just show) */
.arq__strip.is-reveal .photo img {
  transition: transform 0.6s, opacity 0.9s ease var(--delay, 0s), scale 1.4s var(--ease-dialog) var(--delay, 0s);
}

.arq__strip.is-reveal .photo:not(.is-in) img {
  opacity: 0;
  scale: 1.08;
}

/* ---------- Tipologias ---------- */

.tipo {
  --panel-bg: var(--paper);
  background: var(--paper);
  color: var(--red);
}

.tipo__strip {
  inset: 0;
}

/* Position, size and opacity are driven by scroll (see updatePlans) */
.tipo__plan {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(550 * var(--u));
  aspect-ratio: 1;
  cursor: pointer;
}

.tipo__plan.is-focus {
  cursor: default;
}

.tipo__plan img {
  width: 100%;
  height: 100%;
}

/* The plan reads clean; a unit lights up (veil and name) under the cursor */
/* Each unit button covers the whole plan; its clip-path is the unit outline, which is also its hit area.
   The veil is a layer that only fades (opacity), which the browser animates without repainting. */
.tipo__fracao {
  inset: 0;
  --fr-active: rgba(108, 54, 55, 0.69);
  position: absolute;
  color: var(--white);
  font-size: calc(13 * var(--u));
}

.tipo__fracao::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fr-active);
  opacity: 0;
  transition: opacity 0.25s;
}

.tipo__fracao span {
  position: absolute;
  top: var(--label-y, 50%);
  left: var(--label-x, 50%);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.25s;
}

.tipo__plan.is-focus .tipo__fracao:focus-visible {
  outline: none;
}

.tipo__plan.is-focus .tipo__fracao:focus-visible::before,
.tipo__fracao:focus-visible span {
  opacity: 1;
}

/* The hover only works once the floor has shown its units (see .is-hint below) */
@media (hover: hover) {
  .tipo__plan.is-focus.is-ready .tipo__fracao:hover::before,
  .tipo__plan.is-focus.is-ready .tipo__fracao:hover span {
    opacity: 1;
  }
}

/* First time a floor is centred, its units light up one after another, as on hover,
   so it reads that they can be clicked. Then the floor gets .is-ready and the hover starts working. */
.tipo__plan.is-hint .tipo__fracao::before,
.tipo__plan.is-hint .tipo__fracao span {
  animation: fracao-hint 0.8s ease-in-out both;
  animation-delay: calc(var(--i, 0) * 0.5s);
}

.tipo__fracao:nth-of-type(2) { --i: 1; }
.tipo__fracao:nth-of-type(3) { --i: 2; }

@keyframes fracao-hint {
  0%, 100% { opacity: 0; }
  30%, 65% { opacity: 1; }
}

.tipo__plan:not(.is-focus) .tipo__fracao {
  pointer-events: none;
}

.tipo__piso {
  top: calc(918.62 * var(--u));
  left: 0;
  width: 100%;
  font-size: calc(28 * var(--u));
  letter-spacing: 0.0413em;
  line-height: 1;
  text-align: center;
}

.tipo__hint {
  top: calc(968 * var(--u));
  left: 0;
  width: 100%;
  font-size: calc(12 * var(--u));
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
  opacity: 0.7;
}

.tipo__button {
  top: calc(894 * var(--u));
  left: calc(87 * var(--u));
  width: calc(356 * var(--u));
  height: calc(62 * var(--u));
  border-radius: calc(11.5 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: 1;
  opacity: 0;
  visibility: hidden;
  /* Fade only; hover colours keep their own quick transition */
  transition: opacity 0.3s, visibility 0.3s, background-color 0.2s, color 0.2s;
}

.tipo__button.is-shown {
  opacity: 1;
  visibility: visible;
}

/* ---------- Acabamentos ---------- */

.acab {
  --panel-bg: var(--paper);
  background: var(--paper);
  color: var(--red);
}

.acab__collage {
  inset: 0;
}

.acab__collage img {
  position: absolute;
  top: calc(var(--y) * var(--u));
  left: calc(var(--x) * var(--u));
  width: calc(var(--w) * var(--u));
  height: auto;
}

.acab__list {
  inset: 0;
}

.acab__list > div {
  position: absolute;
  top: calc((var(--r) - 10.5) * var(--u));
  left: calc(var(--c) * var(--u));
  font-size: calc(12 * var(--u));
  white-space: nowrap;
}

.acab__list dt {
  font-weight: 800;
  letter-spacing: 0.0437em;
  line-height: 1;
}

.acab__list dd {
  margin-top: calc(19.5 * var(--u));
  font-weight: 500;
  letter-spacing: 0.0554em;
  line-height: calc(17 * var(--u));
}

/* ---------- Contacto ---------- */

.contacto {
  --panel-bg: var(--red);
  background: var(--red);
  color: var(--paper);
}

.contacto__content {
  inset: 0;
  transition: opacity 0.35s, visibility 0.35s;
}

.contacto__content > * {
  position: absolute;
}

.contacto.is-ebook .contacto__content {
  opacity: 0;
  visibility: hidden;
}

.contacto__title {
  top: calc(254.65 * var(--u));
  left: calc(430 * var(--u));
  font-size: calc(50 * var(--u));
  font-weight: 400;
  letter-spacing: 0.0462em;
  line-height: calc(58 * var(--u));
  white-space: nowrap;
}

.contacto__icon {
  top: calc(464.6 * var(--u));
  left: calc(429.1 * var(--u));
  width: calc(57.9 * var(--u));
  height: auto;
}

.contacto__text {
  top: calc(611.35 * var(--u));
  left: calc(430 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 500;
  letter-spacing: 0.0543em;
  line-height: calc(20 * var(--u));
  white-space: nowrap;
}

.contacto__ebook {
  top: calc(826 * var(--u));
  left: calc(430 * var(--u));
  width: calc(443 * var(--u));
  height: calc(62 * var(--u));
  border-radius: calc(13.5 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 500;
  letter-spacing: 0.0486em;
  line-height: 1;
  text-decoration: underline;
  text-decoration-thickness: var(--hair);
  text-underline-offset: calc(3 * var(--u));
}

@media (hover: hover) {
  .contacto__ebook:hover {
    background: var(--paper);
    border-color: var(--paper);
    color: var(--red);
  }
}

/* Full-frame containers must not swallow clicks meant for siblings */
.contacto__form,
.ebook__form {
  inset: 0;
  pointer-events: none;
}

.contacto__form > *,
.ebook__form > * {
  position: absolute;
  pointer-events: auto;
}

.field {
  top: calc(var(--y) * var(--u));
  left: calc(1048 * var(--u));
  display: block;
  width: calc(443 * var(--u));
}

.field span,
.choices legend {
  display: block;
  font-size: calc(12 * var(--u));
  letter-spacing: 0.0644em;
  line-height: 1;
  opacity: 0.588;
}

.field input,
.field textarea {
  display: block;
  width: 100%;
  height: calc(29.5 * var(--u));
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(236, 235, 232, 0.8);
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: calc(15 * var(--u));
}

.field--tall textarea {
  height: calc(59.5 * var(--u));
  padding-top: calc(8 * var(--u));
  line-height: 1.35;
  resize: none;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--paper);
}

.choices {
  inset: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}

.choices legend {
  position: absolute;
  top: calc(575.5 * var(--u));
  left: calc(1048 * var(--u));
  padding: 0;
}

.choices label,
.choices__sep {
  position: absolute;
  top: calc(614.375 * var(--u));
  left: calc(var(--x) * var(--u));
  font-size: calc(19 * var(--u));
  line-height: 1;
  opacity: 0.588;
  pointer-events: auto;
}

.choices label {
  cursor: pointer;
}

.choices input,
.consent input {
  position: absolute;
  opacity: 0;
  /* Invisible, but over the text and the box: it shows the hand too */
  cursor: pointer;
}

.choices input:checked + span {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: var(--hair);
  text-underline-offset: calc(4 * var(--u));
}

.choices input:focus-visible + span,
.consent input:focus-visible + span::before {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}

.consent {
  top: calc(762 * var(--u));
  left: calc(1048 * var(--u));
  cursor: pointer;
}

.consent span {
  display: flex;
  align-items: center;
  gap: calc(15 * var(--u));
  font-size: calc(9 * var(--u));
  letter-spacing: 0.0525em;
  line-height: 1;
}

.consent span::before {
  content: "";
  flex-shrink: 0;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  border: 1px solid var(--paper);
  border-radius: calc(3 * var(--u));
}

.consent span {
  color: rgba(236, 235, 232, 0.588);
}

.consent input:checked + span::before {
  background: var(--paper) linear-gradient(var(--red), var(--red)) center / 40% 40% no-repeat;
}

.contacto__submit {
  top: calc(826 * var(--u));
  left: calc(1048 * var(--u));
  width: calc(443 * var(--u));
  height: calc(62 * var(--u));
  border-radius: calc(13.5 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 500;
  letter-spacing: 0.0471em;
  line-height: 1;
}

.contacto__footer {
  inset: 0;
  color: var(--white);
  font-size: calc(10 * var(--u));
  letter-spacing: 0.0982em;
  line-height: 1;
  pointer-events: none;
}

.contacto__footer > * {
  position: absolute;
  top: calc(1018.25 * var(--u));
  white-space: nowrap;
  pointer-events: auto;
}

.contacto__footer u,
.contacto__footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: calc(2 * var(--u));
}

/* One inline run, so the link sits inside the sentence instead of becoming its own flex item */
.consent__text {
  font-style: normal;
}

.consent a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contacto__footer-left {
  left: calc(57 * var(--u));
}

.contacto__footer-mid {
  left: calc(960.5 * var(--u));
  transform: translateX(-50%);
}

.contacto__footer-right {
  right: calc(57 * var(--u));
}

.ebook {
  top: calc(199 * var(--u));
  left: calc(354 * var(--u));
  width: calc(1212 * var(--u));
  height: calc(682 * var(--u));
  border-radius: calc(36 * var(--u));
  background: rgba(215, 205, 199, 0.9686);
  color: var(--red);
  opacity: 0;
  scale: 0.96;
  transition: opacity 0.35s, scale 0.45s var(--ease-dialog);
}

.ebook[hidden] {
  display: none;
}

.contacto.is-ebook .ebook {
  opacity: 1;
  scale: none;
}

.ebook > * {
  position: absolute;
}

.ebook__close {
  top: calc(36 * var(--u));
  left: calc(1112 * var(--u));
}

.ebook__field {
  top: calc(265.5 * var(--u));
  left: calc(385 * var(--u));
  width: calc(443 * var(--u));
}

.ebook__field span {
  display: block;
  margin-left: calc(2.5 * var(--u));
  font-size: calc(12 * var(--u));
  letter-spacing: 0.0814em;
  line-height: 1;
}

.ebook__field input {
  display: block;
  width: 100%;
  height: calc(29.5 * var(--u));
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(120, 31, 25, 0.8);
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: calc(15 * var(--u));
}

.ebook__field input:focus {
  outline: none;
  border-bottom-color: var(--red);
}

.ebook__submit {
  top: calc(353.5 * var(--u));
  left: calc(385.5 * var(--u));
  width: calc(442 * var(--u));
  height: calc(61 * var(--u));
  border: 1px solid var(--paper);
  border-radius: calc(10 * var(--u));
  background: var(--red);
  color: #dddddd;
  font-size: calc(14 * var(--u));
  font-weight: 500;
  letter-spacing: 0.0462em;
  line-height: 1;
  transition: opacity 0.2s;
}

@media (hover: hover) {
  .ebook__submit:hover {
    opacity: 0.9;
  }
}

/* Pressed (desktop): the hover fill turns to the palette's darker shade while the button is held,
   maroon on light backgrounds and beige on the red and dark ones */
@media (hover: hover) {
  .btn-outline:active,
  .ebook__submit:active,
  .site-header.is-dark .nav__cta:active {
    opacity: 1;
    background: var(--maroon);
    border-color: var(--maroon);
    color: var(--paper);
  }

  .nav__cta:active,
  .site-header.is-cta .nav__cta:active,
  .contacto__ebook:active,
  .btn-solid:active {
    opacity: 1;
    background: var(--beige);
    border-color: var(--beige);
    color: var(--red);
  }
}

/* ---------- Dialogs ---------- */

/* Dialogs come in with a fade and grow slightly into place, and go back the same way. Open, the scale
   is none rather than 1: any scale makes the dialog the frame of its fixed children (the privacy X). */
.lightbox,
.map-full,
.fracao,
.privacy,
.tabela {
  opacity: 0;
  scale: 0.98;
  transition: opacity 0.35s, scale 0.45s var(--ease-dialog);
}

.lightbox.is-open,
.map-full.is-open,
.fracao.is-open,
.privacy.is-open,
.tabela.is-open {
  opacity: 1;
  scale: none;
}

.lightbox,
.map-full,
.fracao {
  position: fixed;
  inset: 0;
  z-index: 50;
}

.lightbox[hidden],
.map-full[hidden],
.fracao[hidden] {
  display: none;
}

.lightbox {
  background: rgba(215, 205, 199, 0.94);
  color: var(--red);
  /* Horizontal swipes are ours (previous/next photo), not the browser's */
  touch-action: pan-y pinch-zoom;
}

.lightbox__close {
  top: calc(82 * var(--u));
  left: calc(1793 * var(--u));
}

.lightbox.is-landscape .lightbox__close {
  top: calc(62 * var(--u));
  left: calc(1813 * var(--u));
}

.lightbox__figure {
  top: calc(82 * var(--u));
  right: calc(269 * var(--u));
  display: flex;
  align-items: flex-end;
  gap: calc(21 * var(--u));
  height: calc(916 * var(--u));
}

.lightbox__img {
  height: 100%;
  width: auto;
}

.lightbox__caption {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: calc(-2 * var(--u));
  text-align: right;
}

.lightbox__title {
  font-size: calc(16 * var(--u));
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.0647em;
  line-height: 1;
}

.lightbox__credit {
  margin-top: calc(4 * var(--u));
  font-size: calc(12 * var(--u));
  font-weight: 500;
  letter-spacing: 0.0643em;
  line-height: calc(17 * var(--u));
  text-transform: uppercase;
  white-space: pre-line;
}

/* Landscape photos: image on the left, caption on its right */
.lightbox.is-landscape .lightbox__figure {
  top: calc(62 * var(--u));
  right: auto;
  left: calc(57 * var(--u));
  flex-direction: row-reverse;
  gap: calc(56 * var(--u));
  height: calc(946 * var(--u));
}

.lightbox.is-landscape .lightbox__caption {
  align-items: flex-start;
  text-align: left;
}

.map-full {
  background: var(--red);
  color: var(--paper);
}

.map-full__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.map-full__close {
  top: calc(62 * var(--u));
  left: calc(1813 * var(--u));
}

.fracao {
  /* The paper of the book's sheets, as in the price table */
  background: var(--paper) url("../assets/img/papel.webp") center / cover;
  color: var(--red);
}

.fracao__close {
  top: calc(64 * var(--u));
  left: calc(1808 * var(--u));
}

.fracao__title,
.fracao__floor {
  left: calc(160 * var(--u));
  line-height: 1;
  white-space: nowrap;
}

.fracao__title {
  top: calc(80.53 * var(--u));
  font-size: calc(32 * var(--u));
  letter-spacing: 0.0484em;
}

.fracao__floor {
  top: calc(113.96 * var(--u));
  font-size: calc(24 * var(--u));
  letter-spacing: 0.0665em;
}

.fracao__ref,
.fracao__detail,
.fracao__plan-label,
.fracao__brand,
.fracao__year,
.fracao__city {
  font-size: calc(14 * var(--u));
  font-weight: 500;
  letter-spacing: 0.03em;
  white-space: pre;
}

.fracao__ref {
  top: calc(195.2 * var(--u));
  left: calc(160 * var(--u));
  line-height: calc(15.5 * var(--u));
}

.fracao__area {
  top: calc(373.13 * var(--u));
  left: calc(160 * var(--u));
  font-size: calc(35 * var(--u));
  letter-spacing: 0.06em;
  line-height: 1;
}

.fracao__area sup {
  font-size: 0.55em;
  line-height: 0;
  vertical-align: calc(11.2 * var(--u));
}

.fracao__area-label {
  top: calc(417.63 * var(--u));
  left: calc(160 * var(--u));
  font-size: calc(9 * var(--u));
  font-weight: 700;
  letter-spacing: 0.0235em;
  line-height: 1;
}

/* Wraps like the unit sheets (their text column is about 330 units wide) */
.fracao__detail {
  top: calc(550.95 * var(--u));
  left: calc(160 * var(--u));
  width: calc(330 * var(--u));
  line-height: calc(15.5 * var(--u));
  white-space: normal;
}

.fracao__compass {
  top: calc(836.5 * var(--u));
  left: calc(160 * var(--u));
  width: calc(49 * var(--u));
  height: calc(49 * var(--u));
  border: 1px solid currentColor;
  border-radius: 50%;
}

.fracao__compass::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: calc(2 * var(--u));
  background: currentColor;
  transform: translateY(-50%);
}

.fracao__note {
  top: calc(845.88 * var(--u));
  left: calc(254 * var(--u));
  font-size: calc(13 * var(--u));
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: calc(13.5 * var(--u));
  white-space: nowrap;
}

.fracao__legal {
  top: calc(942.65 * var(--u));
  left: calc(160 * var(--u));
  font-size: calc(10 * var(--u));
  line-height: calc(12 * var(--u));
  white-space: nowrap;
}

.fracao__divider {
  top: calc(198.5 * var(--u));
  left: calc(663 * var(--u));
  width: var(--hair);
  height: calc(802 * var(--u));
  background: currentColor;
}

/* Plan and building are cut from each unit sheet; --x, --y, --w place them where the sheet does */
.fracao__building {
  top: calc(var(--y) * var(--u));
  left: calc(var(--x) * var(--u));
  width: calc(var(--w) * var(--u));
  height: auto;
}

.fracao__plan-label,
.fracao__brand {
  top: calc(195.95 * var(--u));
  line-height: 1;
}

.fracao__plan-label,
.fracao__year {
  left: calc(1063 * var(--u));
}

.fracao__brand,
.fracao__city {
  right: calc(233.5 * var(--u));
}

.fracao__year,
.fracao__city {
  top: calc(975.75 * var(--u));
  line-height: 1;
}

/* While a unit's plan and building load, the previous ones are hidden and the tile spins */
.fracao__plan-img,
.fracao__building {
  transition: opacity 0.3s;
}

.fracao.is-loading .fracao__plan-img,
.fracao.is-loading .fracao__building {
  opacity: 0;
  transition: none;
}

.fracao__spinner {
  top: calc(540 * var(--u));
  left: calc(1340 * var(--u));
  width: calc(64 * var(--u));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  animation: loader-spin 2s linear infinite;
}

.fracao.is-loading .fracao__spinner {
  opacity: 1;
  transition-delay: 0.15s;
}

.fracao__plan-img {
  top: calc(var(--y) * var(--u));
  left: calc(var(--x) * var(--u));
  width: calc(var(--w) * var(--u));
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .loader__icon {
    animation-duration: 6s;
  }

  .hero__logo {
    transform: none;
  }

  .lightbox,
  .map-full,
  .fracao,
  .privacy,
  .tabela,
  .ebook {
    scale: none;
  }
}

/* A chosen unit type reads at full strength */
.choices label:has(input:checked) {
  opacity: 1;
}

/* ---------- Form feedback ---------- */

/* On the desktop artboard the fields sit close together, so the message shares the label's row */
.field-error {
  position: absolute;
  top: 0;
  right: 0;
  font-size: calc(10 * var(--u));
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: #f6c3b9;
}

.ebook .field-error {
  color: var(--red);
}

.field.is-invalid input,
.ebook__field.is-invalid input {
  border-bottom-color: #f6c3b9;
}

.ebook__field.is-invalid input {
  border-bottom-color: var(--red);
  border-bottom-width: 2px;
}

.consent.is-invalid span::before {
  border-color: #f6c3b9;
  box-shadow: 0 0 0 1px #f6c3b9;
}

.consent .field-error {
  top: 100%;
  right: auto;
  left: calc(35 * var(--u));
  margin-top: calc(6 * var(--u));
}

.form-done[hidden],
.contacto__form[hidden],
.ebook__form[hidden],
.ebook__title {
  display: none;
}

/* When the server does not take the form: a line under the send button */
.contacto__form .form-error {
  top: calc(904 * var(--u));
  right: auto;
  left: calc(1048 * var(--u));
  width: calc(443 * var(--u));
}

.ebook__form .form-error {
  top: calc(428 * var(--u));
  right: auto;
  left: calc(385.5 * var(--u));
  width: calc(442 * var(--u));
}

.contacto__form.is-sending [type="submit"],
.ebook__form.is-sending [type="submit"] {
  opacity: 0.6;
  cursor: progress;
}

/* A field only bots fill in (people never see it) */
.contacto__form .hp,
.ebook__form .hp {
  position: absolute;
  top: 0;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contacto__done {
  top: calc(255.5 * var(--u));
  left: calc(1048 * var(--u));
  width: calc(443 * var(--u));
}

.ebook__done {
  top: calc(265.5 * var(--u));
  left: calc(385 * var(--u));
  width: calc(443 * var(--u));
}

.form-done__title {
  font-size: calc(28 * var(--u));
  line-height: 1.1;
}

.form-done__text {
  margin-top: calc(18 * var(--u));
  font-size: calc(15 * var(--u));
  letter-spacing: 0.04em;
  line-height: 1.5;
}

/* ---------- Privacy policy (full-screen dialog) ---------- */

.privacy {
  position: fixed;
  inset: 0;
  z-index: 55;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--beige);
  color: var(--red);
}

.privacy[hidden] {
  display: none;
}

/* Same X as the other dialogs, fixed while the text scrolls */
.privacy__close {
  position: fixed;
  z-index: 1;
  top: calc(82 * var(--u));
  right: calc(77 * var(--u));
}

.privacy__body {
  max-width: 768px;
  margin: 0 auto;
  padding: 120px 32px 112px;
}

.privacy__icon {
  display: block;
  width: 56px;
  margin-bottom: 32px;
}

.privacy__title {
  margin: 0 0 40px;
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.15;
}

.privacy__body p {
  margin: 0 0 24px;
  font-size: 15px;
  letter-spacing: 0.02em;
  line-height: 2;
}

.privacy__body a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 600px) {
  .privacy__body {
    padding: 88px 20px 88px;
  }

  .privacy__body p {
    font-size: 14px;
  }
}

/* <picture> only swaps in the AVIF; it must not add a box around the image */
picture {
  display: contents;
}

/* ---------- Investment table (TABELA DE PREÇOS_SRG109.pdf, 1920 x 1080) ---------- */

.tabela {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  background: var(--paper) url("../assets/img/papel.webp") center / cover;
  color: var(--red);
}

.tabela[hidden] {
  display: none;
}

.tabela__close {
  top: calc(64 * var(--u));
  left: calc(1808 * var(--u));
}

.tabela__logo {
  top: calc(127 * var(--u));
  left: calc(108 * var(--u));
  width: calc(436 * var(--u));
  height: auto;
}

.tabela__icon {
  top: calc(91.4 * var(--u));
  left: calc(1667 * var(--u));
  width: calc(93.4 * var(--u));
  height: auto;
}

.tabela__title {
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tabela__scroll {
  top: calc(340.2 * var(--u));
  left: calc(116.9 * var(--u));
  width: calc(1661.9 * var(--u));
}

/* Rows as ruled in the PDF: text centred on each column's axis */
.tabela__row {
  position: relative;
  height: calc(32.9 * var(--u));
  border-bottom: max(1px, calc(1 * var(--u))) solid #792423;
  font-size: calc(18 * var(--u));
  font-weight: 500;
  letter-spacing: 0.17em;
  line-height: 1;
}

.tabela__row--head {
  height: calc(30.8 * var(--u));
  margin-bottom: calc(8.3 * var(--u));
  border-bottom-width: max(2px, calc(2 * var(--u)));
  font-weight: 800;
}

.tabela__row span {
  position: absolute;
  top: calc(6.7 * var(--u));
  left: calc(var(--c) * var(--u));
  white-space: nowrap;
  /* Half the tracking after the last letter back, so the text centres on the axis */
  transform: translateX(calc(-50% + 0.085em));
}

.tabela__row--head span {
  top: 0;
}

/* Column axes, from the table's left edge */
.tabela__row span:nth-child(1) { --c: 79; }
.tabela__row span:nth-child(2) { --c: 277; }
.tabela__row span:nth-child(3) { --c: 457.95; }
.tabela__row span:nth-child(4) { --c: 664; }
.tabela__row span:nth-child(5) { --c: 849.45; }
.tabela__row span:nth-child(6) { --c: 1063.95; }
.tabela__row span:nth-child(7) { --c: 1284; }
.tabela__row span:nth-child(8) { --c: 1535.35; }

/* Line breaks only for the mobile layout */
br.m {
  display: none;
}

/* Mobile-only pieces */
.hero__icon,
.tipo__cards,
.dots {
  display: none;
}

/* ==========================================================================
   Mobile & portrait: vertical page, horizontal swipe galleries.
   Keep the media query in sync with MOBILE_QUERY in main.js.
   ========================================================================== */

/* Mobile layout: narrow or portrait screens, and phones on their side (short and touch). A short
   window on a computer keeps the desktop layout, scaled down, unless it is very short. */
@media (max-width: 1023px), (max-aspect-ratio: 1/1), (max-height: 599px) and (pointer: coarse), (max-height: 449px) {
  /* Sections from the mobile design (a 1080 px wide artboard): --m is one artboard pixel.
     Past phone widths it stops growing and the content column is centred (--side). */
  :root {
    --pad: 20px;
    --gap: 12px;
    --m: min(calc(100vw / 1080), 0.65px);
    --side: max(0px, calc((100vw - 1080 * var(--m)) / 2));
    --hdr: min(calc(198 * var(--m)), 16svh);
    --plan: min(calc(880 * var(--m)), 70svh);
  }

  .loader__icon {
    width: 64px;
  }

  /* Paragraph line breaks are tuned for the desktop artboard: here the text wraps, or breaks
     where the mobile design does (br.m, plus the desktop breaks it shares, br.k) */
  .ficha__text br,
  .sobre__text br:not(.k, .m),
  .local__text br:not(.k, .m),
  .arq__text br:not(.k, .m),
  .acab__list br,
  .contacto__text br,
  .fracao__legal br {
    display: none;
  }

  br.m {
    display: revert;
  }

  /* ---------- Header ---------- */

  /* "Seja proprietário" on the left and the menu button (☰) on the right, fixed while scrolling;
     the menu opens over the page with the sections and the languages */
  .site-header {
    height: var(--hdr);
    transition: opacity 0.4s, visibility 0.4s, color 0.3s, background-color 0.3s;
  }

  /* Over the photos the header gets a tinted, blurred band so text scrolling under it stays
     out of the way. It lives on a pseudo-element so the header's own box stays untouched. */
  .site-header::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: rgba(28, 22, 21, 0.3);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: opacity 0.3s;
  }

  .site-header.is-hero::before,
  .site-header.is-dark::before,
  .site-header.is-cta::before {
    opacity: 0;
  }

  .site-header.is-dark {
    background: var(--paper);
  }

  .site-header.is-cta {
    background: var(--red);
    color: var(--paper);
  }

  .nav {
    left: 0;
    width: 100%;
  }

  .nav__menu {
    display: contents;
  }

  .nav__toggle {
    top: 50%;
    right: calc(var(--side) + 88.5 * var(--m));
    z-index: 2;
    display: grid;
    align-content: center;
    gap: calc(12 * var(--m));
    width: calc(76 * var(--m));
    height: calc(76 * var(--m));
    padding: 0 calc(8 * var(--m));
    color: inherit;
    transform: translateY(-50%);
  }

  .nav__toggle span {
    display: block;
    height: 2px;
    background: currentColor;
    transition: transform 0.3s, opacity 0.2s;
  }

  .nav__toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(calc(12 * var(--m) + 2px)) rotate(45deg);
  }

  .nav__toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .nav__toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(calc(-12 * var(--m) - 2px)) rotate(-45deg);
  }

  /* The open menu: the sections centred on the paper, the languages below */
  .nav__links,
  html:lang(en) .nav__links {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 26px;
    width: auto;
    margin: 0;
    padding: var(--hdr) 0 calc(var(--hdr) + 40px);
    background: var(--paper);
    color: var(--red);
    font-size: 17px;
    letter-spacing: 0.06em;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s, visibility 0.35s;
  }

  .nav__links li,
  html:lang(en) .nav__links li {
    position: static;
    font-size: 17px;
  }

  .nav__links .nav__link.is-active::after {
    top: calc(100% + 3px);
  }

  .nav__menu.is-open .nav__links {
    opacity: 1;
    visibility: visible;
  }

  .nav__langs {
    position: fixed;
    top: auto;
    bottom: calc(var(--hdr) + 10px);
    left: 50%;
    z-index: 2;
    color: var(--red);
    font-size: 17px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%);
    transition: opacity 0.35s, visibility 0.35s;
  }

  .nav__langs .nav__sep {
    display: none;
  }

  body.menu-open .nav__langs {
    opacity: 1;
    visibility: visible;
  }

  /* Over the open menu the header reads on the paper */
  body.menu-open {
    overflow: hidden;
  }

  body.menu-open .site-header {
    color: var(--red);
  }

  body.menu-open .site-header::before {
    opacity: 0;
  }

  .nav__cta {
    top: 50%;
    left: calc(var(--side) + 88.5 * var(--m));
    z-index: 2;
    width: calc(385 * var(--m));
    height: calc(57 * var(--m));
    border-radius: calc(8 * var(--m));
    font-size: calc(23 * var(--m));
    transform: translateY(-50%);
  }

  /* ---------- Vertical flow ---------- */

  .scroll__stage {
    position: relative;
    height: auto;
    overflow: visible;
    background: none;
  }

  /* Spans Inicio + Ficha técnica (height set by JS); the media sticks to the screen while both pass */
  .scroll__bg {
    inset: 0 0 auto;
    height: var(--intro-h, 200svh);
  }

  .scroll__media {
    position: sticky;
    top: 0;
    height: 100svh;
    background-position: 42% center;
  }

  .scroll__track {
    display: block;
    height: auto;
    transform: none !important;
    will-change: auto;
  }

  .panel {
    height: auto;
    box-shadow: none;
  }

  .frame {
    position: relative;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
  }

  .frame > * {
    position: static;
  }

  /* ---------- Hero ---------- */

  .hero {
    height: 100svh;
  }

  .hero-video {
    object-position: 42% center;
  }

  .hero .frame {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
  }

  .hero__logo {
    width: calc(694 * var(--m));
  }

  .hero .frame > .hero__icon {
    position: absolute;
    bottom: min(calc(209 * var(--m)), 8svh);
    left: 50%;
    display: block;
    width: min(calc(165 * var(--m)), 14svh);
    height: auto;
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity 0.9s;
  }

  .hero.is-text .hero__icon {
    opacity: 1;
  }

  /* ---------- Ficha técnica ---------- */

  .ficha {
    padding: calc(278 * var(--m)) var(--side) calc(159 * var(--m));
  }

  .ficha .frame {
    z-index: 1;
  }

  .ficha__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: calc(183 * var(--m));
    width: calc(852 * var(--m));
    margin: 0 auto;
  }

  /* Units | floors, then types | areas */
  .ficha__stat {
    position: static;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: calc(69 * var(--m));
    width: auto;
    height: calc(149 * var(--m));
  }

  .ficha__stat:nth-child(1) { order: 3; }
  .ficha__stat:nth-child(2) { order: 2; }
  .ficha__stat:nth-child(3) { order: 1; }
  .ficha__stat:nth-child(4) { order: 4; }

  .ficha__stat:nth-child(even) {
    border-left: max(1px, calc(2 * var(--m))) solid var(--white);
  }

  .ficha__stat dd,
  .ficha__stat dt {
    position: static;
    width: auto;
  }

  .ficha__stat dd {
    font-size: calc(50 * var(--m));
  }

  .ficha__stat dd sup {
    vertical-align: calc(17 * var(--m));
  }

  .ficha__stat dt {
    font-size: calc(20 * var(--m));
  }

  .ficha__rule {
    display: none;
  }

  .ficha__text {
    max-width: calc(660 * var(--m));
    margin: calc(232 * var(--m)) auto 0;
    font-size: calc(24 * var(--m));
    line-height: calc(34 * var(--m));
    white-space: normal;
  }

  /* ---------- Swipe carousels ---------- */

  .sobre__carousel,
  .arq__strip,
  .tipo__strip {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .sobre__carousel::-webkit-scrollbar,
  .arq__strip::-webkit-scrollbar,
  .tipo__strip::-webkit-scrollbar {
    display: none;
  }

  .sobre__carousel,
  .arq__strip {
    padding: 0 var(--side);
    scroll-padding-inline: var(--side);
  }

  .sobre__carousel .photo,
  .arq__strip .photo {
    scroll-snap-align: start;
  }

  .dots {
    display: flex;
    justify-content: center;
    gap: calc(9 * var(--m));
  }

  .dots i {
    width: calc(10 * var(--m));
    height: calc(10 * var(--m));
    border-radius: 50%;
    background: #b77e7a;
    transition: background-color 0.2s;
  }

  .dots i.is-active {
    background: var(--red);
  }

  /* ---------- Sobre ---------- */

  .sobre .frame {
    display: flex;
    flex-direction: column;
    padding: calc(377 * var(--m)) 0 calc(174 * var(--m));
  }

  .sobre__intro {
    display: contents;
  }

  .sobre__strip {
    display: none;
  }

  .sobre__carousel {
    gap: calc(32 * var(--m));
  }

  .sobre__carousel .photo {
    height: min(calc(1164 * var(--m)), 80svh);
    aspect-ratio: 928 / 1164;
  }

  .sobre__carousel--2 .photo {
    aspect-ratio: 853 / 1164;
  }

  .sobre__carousel .photo img {
    width: 100%;
    object-fit: cover;
  }

  .sobre__carousel--1 { order: 1; }
  .sobre__carousel--1 + .dots { order: 2; margin-top: calc(122 * var(--m)); }
  .sobre__text { order: 3; }
  .sobre__carousel--2 { order: 4; margin-top: calc(171 * var(--m)); }
  .sobre__carousel--2 + .dots { order: 5; margin-top: calc(90 * var(--m)); }
  .sobre__icon { order: 6; }
  .sobre__quote { order: 7; }

  .sobre__text {
    position: static;
    max-width: calc(1000 * var(--m));
    margin: calc(168 * var(--m)) auto 0;
    font-size: calc(30 * var(--m));
    line-height: calc(42 * var(--m));
    text-align: center;
    white-space: normal;
  }

  .sobre__text p + p {
    margin-top: calc(42 * var(--m));
  }

  /* The English copy has no mobile line breaks: it wraps at about the width of the Portuguese lines */
  html:lang(en) .sobre__text { max-width: calc(900 * var(--m)); }
  html:lang(en) .local__text { max-width: calc(740 * var(--m)); }
  html:lang(en) .arq__text { max-width: calc(730 * var(--m)); }

  .sobre__icon {
    position: static;
    align-self: center;
    width: calc(157 * var(--m));
    margin-top: calc(215 * var(--m));
  }

  .sobre__quote {
    margin: calc(183 * var(--m)) var(--side) 0;
    font-size: calc(45 * var(--m));
    line-height: calc(52 * var(--m));
    text-align: center;
    white-space: normal;
  }

  .sobre__quote u {
    text-underline-offset: calc(8 * var(--m));
  }

  /* The English lines are longer than the Portuguese ones: here they wrap on their own */
  html:lang(en) .sobre__quote {
    max-width: calc(940 * var(--m));
    margin-inline: auto;
  }

  html:lang(en) .sobre__quote br {
    display: none;
  }

  /* ---------- Localização ---------- */

  /* Map on top, then a beige box (the ::before) behind title, text, place and times */
  .local .frame {
    display: grid;
    grid-template-columns: 100%;
    justify-items: center;
    text-align: center;
  }

  .local .frame::before {
    content: "";
    grid-row: 2 / 6;
    grid-column: 1;
    justify-self: stretch;
    margin: calc(113 * var(--m)) calc(var(--side) + 59 * var(--m)) 0;
    background: var(--beige);
  }

  .local__map {
    grid-row: 1;
    grid-column: 1;
    display: block;
    width: 100%;
    height: min(calc(1590 * var(--m)), 90svh);
  }

  /* The desktop map layer and its entrance do not apply here */
  .local__stage {
    display: none;
  }

  .local__title,
  .local__text,
  .local__place,
  .local__times,
  .local__button,
  .local.is-in .local__title,
  .local.is-in .local__text,
  .local.is-in .local__place,
  .local.is-in .local__times,
  .local.is-in .local__button {
    opacity: 1;
    translate: none;
    animation: none;
  }

  /* Left part of the map, where the building's pin is */
  /* The vertical map from the mobile design (tools/build_mobile_map.mjs) */
  .local__map img {
    object-fit: cover;
    object-position: 50% 50%;
  }

  .local__title,
  .local__text,
  .local__place,
  .local__times {
    grid-column: 1;
    white-space: normal;
  }

  .local__title {
    grid-row: 2;
    margin-top: calc(249 * var(--m));
    font-size: calc(50 * var(--m));
    line-height: calc(58 * var(--m));
  }

  .local__text {
    grid-row: 3;
    max-width: calc(900 * var(--m));
    margin-top: calc(138.5 * var(--m));
    font-size: calc(28 * var(--m));
    line-height: calc(41 * var(--m));
  }

  .local__place {
    grid-row: 4;
    margin-top: calc(131 * var(--m));
    font-size: calc(28 * var(--m));
    line-height: calc(41 * var(--m));
  }

  .local__times {
    grid-row: 5;
    margin: calc(54.5 * var(--m)) 0 calc(116 * var(--m));
    font-size: calc(28 * var(--m));
    line-height: calc(50 * var(--m));
  }

  .local__times li {
    text-underline-offset: calc(7 * var(--m));
  }

  /* ---------- Solid buttons (Google Maps, investment table) ---------- */

  .local__button,
  .tipo__button {
    width: calc(961 * var(--m));
    height: calc(128 * var(--m));
    border: 0;
    border-radius: calc(10 * var(--m));
    background: var(--red);
    color: var(--paper);
    font-size: calc(30 * var(--m));
  }

  .local__button {
    grid-row: 6;
    grid-column: 1;
    margin-top: calc(80 * var(--m));
  }

  /* ---------- Arquitetura ---------- */

  .arq {
    display: block;
  }

  .arq__intro {
    height: auto;
  }

  .arq__intro .frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(330.5 * var(--m)) var(--side) 0;
    text-align: center;
  }

  .arq__title {
    width: auto;
    font-size: calc(50 * var(--m));
    line-height: calc(58 * var(--m));
  }

  .arq__icon {
    width: calc(129 * var(--m));
    margin-top: calc(137 * var(--m));
  }

  .arq__text {
    width: auto;
    max-width: calc(900 * var(--m));
    margin-top: calc(86 * var(--m));
    font-size: calc(28 * var(--m));
    line-height: calc(41 * var(--m));
    white-space: normal;
  }

  .arq__text u {
    text-underline-offset: calc(6 * var(--m));
  }

  .arq__film {
    height: auto;
    margin-top: calc(200 * var(--m));
  }

  .film {
    width: calc(1080 * var(--m) - 2 * 90 * var(--m));
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    border-radius: calc(20 * var(--m));
  }

  .film__icon {
    width: calc(130 * var(--m));
    height: calc(130 * var(--m));
  }

  .arq__strip {
    gap: calc(49 * var(--m));
    height: auto;
    margin-top: calc(200 * var(--m));
  }

  /* All cropped to the same portrait frame; the lightbox shows the whole photo */
  .arq__strip .photo {
    height: min(calc(1104 * var(--m)), 80svh);
    aspect-ratio: 788 / 1104;
  }

  .arq__strip .photo img {
    width: 100%;
    object-fit: cover;
  }

  .arq__strip + .dots {
    margin-top: calc(131 * var(--m));
  }

  /* ---------- Tipologias ---------- */

  .tipo .frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(335 * var(--m)) 0 calc(100 * var(--m));
  }

  .tipo__piso {
    order: 1;
    width: auto;
    font-size: calc(50 * var(--m));
    line-height: calc(58 * var(--m));
  }

  /* Plans overlap a little; the neighbours peek in, faded */
  .tipo__strip {
    order: 2;
    align-self: stretch;
    margin-top: calc(99 * var(--m));
    padding: 0 calc((100vw - var(--plan)) / 2);
  }

  .tipo__plan {
    position: relative;
    flex: 0 0 var(--plan);
    opacity: 0.37;
    transition: opacity 0.35s;
    scroll-snap-align: center;
  }

  .tipo__plan + .tipo__plan {
    margin-left: calc(-32 * var(--m));
  }

  .tipo__plan.is-focus {
    opacity: 1;
  }

  /* A unit shows its veil and name only while pressed */
  .tipo__plan.is-focus .tipo__fracao:active::before,
  .tipo__plan.is-focus .tipo__fracao:active span {
    opacity: 1;
  }

  .tipo__fracao {
    font-size: calc(28 * var(--m));
  }

  .tipo__strip + .dots {
    order: 3;
    margin-top: calc(100 * var(--m));
  }

  .tipo__hint {
    display: none;
  }

  .tipo__button {
    order: 4;
    margin-top: calc(214.5 * var(--m));
    opacity: 1;
    visibility: visible;
  }

  .tipo__cards {
    order: 5;
    display: flex;
    flex-direction: column;
    gap: calc(87 * var(--m));
    margin-top: calc(147.5 * var(--m));
  }

  .card {
    position: relative;
    width: calc(1002 * var(--m));
    height: calc(470 * var(--m));
    margin-left: calc(2 * var(--m));
    border: max(1px, calc(2 * var(--m))) solid var(--red);
    border-radius: calc(16 * var(--m));
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1;
  }

  .card > *,
  .card .card__plan {
    position: absolute;
  }

  .card__status {
    top: calc(33 * var(--m));
    left: calc(70 * var(--m));
    font-size: calc(28 * var(--m));
  }

  .card__plan {
    top: calc(107 * var(--m));
    left: calc(70 * var(--m));
    width: calc(448 * var(--m));
    height: calc(312 * var(--m));
    object-fit: contain;
  }

  .card__name {
    top: calc(76 * var(--m));
    left: calc(591 * var(--m));
    display: flex;
    align-items: baseline;
    gap: calc(34 * var(--m));
    font-size: calc(28 * var(--m));
  }

  .card__name strong {
    font-size: calc(40 * var(--m));
    font-weight: 800;
    letter-spacing: 0;
  }

  .card__area {
    top: calc(214 * var(--m));
    left: calc(584 * var(--m));
    font-size: calc(35 * var(--m));
  }

  .card__area sup {
    font-size: 0.6em;
    line-height: 0;
    vertical-align: 0.6em;
  }

  .card__button {
    top: calc(311.5 * var(--m));
    left: calc(584.5 * var(--m));
    width: calc(275 * var(--m));
    height: calc(71 * var(--m));
    border-radius: calc(10 * var(--m));
    font-size: calc(28 * var(--m));
    font-weight: 500;
  }

  /* ---------- Acabamentos ---------- */

  .acab .frame,
  .contacto .frame {
    padding: 104px var(--pad) 48px;
  }

  .acab__collage {
    position: relative;
    width: 100%;
    max-width: 110svh;
    margin: 0 auto;
    aspect-ratio: 706 / 736;
  }

  .acab__collage img {
    top: calc((var(--y) - 220.8) / 736 * 100%);
    left: calc((var(--x) - 55.9) / 706 * 100%);
    width: calc(var(--w) / 706 * 100%);
  }

  .acab__list {
    display: grid;
    gap: 30px;
    margin-top: 52px;
  }

  .acab__list > div {
    position: static;
    font-size: 12.5px;
    white-space: normal;
  }

  .acab__list dd {
    margin-top: 10px;
    line-height: 1.6;
  }

  /* ---------- Contacto ---------- */

  .contacto__content {
    position: static;
    display: flex;
    flex-direction: column;
  }

  .contacto__content > *,
  .contacto__form > *,
  .choices legend,
  .choices label,
  .choices__sep {
    position: static;
  }

  .contacto__title {
    font-size: 34px;
    line-height: 1.12;
    white-space: normal;
  }

  .contacto__icon {
    width: 44px;
    margin-top: 32px;
  }

  .contacto__text {
    margin-top: 28px;
    font-size: 13px;
    line-height: 1.6;
    white-space: normal;
  }

  .contacto__form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 44px;
    pointer-events: auto;
  }

  .field {
    width: 100%;
  }

  .field span,
  .choices legend {
    font-size: 11.5px;
  }

  /* 16px keeps iOS from zooming into the field */
  .field input,
  .ebook__field input {
    height: 38px;
    font-size: 16px;
  }

  .field textarea {
    font-size: 16px;
  }

  .field--tall textarea {
    height: 76px;
    padding-top: 10px;
  }

  .field-error,
  .consent .field-error,
  .contacto__form .form-error,
  .ebook__form .form-error {
    position: static;
    width: auto;
    text-align: left;
    display: block;
    margin-top: 8px;
    font-size: 11px;
  }

  .consent .field-error {
    padding-left: 32px;
  }

  /* Safari ignores flex on a fieldset (the legend landed on top of the options),
     so this is plain block flow: the floated full-width legend takes its own line */
  .choices {
    display: block;
    margin: 0;
    pointer-events: auto;
  }

  .choices legend {
    float: left;
    width: 100%;
    margin: 0 0 14px;
  }

  .choices label,
  .choices__sep {
    display: inline-block;
    margin-right: 18px;
    font-size: 19px;
    vertical-align: baseline;
  }

  .consent span {
    align-items: flex-start;
    gap: 12px;
    font-size: 11px;
    line-height: 1.5;
    color: rgba(236, 235, 232, 0.8);
  }

  .consent span::before {
    width: 20px;
    height: 20px;
    border-radius: 3px;
  }

  .contacto__submit {
    width: 100%;
    height: 56px;
    border-radius: 12px;
    font-size: 15px;
  }

  .contacto__ebook {
    order: 10;
    width: 100%;
    height: auto;
    min-height: 56px;
    margin-top: 20px;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 12.5px;
    line-height: 1.4;
  }

  .contacto__done,
  .ebook__done {
    width: auto;
  }

  .contacto__done {
    position: static;
    margin-top: 44px;
    padding: 28px 24px;
    border: 1px solid rgba(236, 235, 232, 0.6);
    border-radius: 12px;
  }

  .ebook__done {
    position: static;
  }

  .form-done__title {
    font-size: 26px;
  }

  .form-done__text {
    margin-top: 14px;
    font-size: 13px;
  }

  /* Touch feedback in place of hover */
  .btn-outline:active,
  .btn-solid:active,
  .contacto__ebook:active,
  .ebook__submit:active,
  .nav__cta:active {
    opacity: 0.7;
  }

  .contacto__footer {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 72px;
    font-size: 10px;
    pointer-events: auto;
  }

  .contacto__footer > * {
    position: static;
    line-height: 1.5;
    white-space: normal;
    transform: none;
  }

  .ebook {
    position: fixed;
    z-index: 60;
    top: 50%;
    left: 16px;
    right: 16px;
    width: auto;
    height: auto;
    padding: 76px 24px 36px;
    border-radius: 24px;
    transform: translateY(-50%);
    box-shadow: 0 0 0 100vmax var(--red);
  }

  .ebook > *,
  .ebook__form > * {
    position: static;
  }

  .ebook__close {
    position: absolute;
    top: 16px;
    right: 16px;
    left: auto;
  }

  .ebook__title {
    display: block;
    margin-bottom: 32px;
    font-size: min(22px, 5.6vw);
    line-height: 1.2;
  }

  .ebook__form {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 32px;
    pointer-events: auto;
  }

  .ebook__field {
    width: 100%;
  }

  .ebook__field span {
    font-size: 11.5px;
  }

  .ebook__submit {
    width: 100%;
    height: 56px;
    border-radius: 10px;
    font-size: 15px;
  }

  /* ---------- Investment table ---------- */

  .tabela {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .tabela .frame {
    display: flex;
    flex-direction: column;
    padding: 72px 0 48px;
  }

  .tabela .frame > * {
    position: static;
  }

  .tabela .frame > .tabela__close {
    position: fixed;
    z-index: 2;
    top: 14px;
    right: 14px;
    left: auto;
  }

  .tabela .frame > .tabela__title {
    position: absolute;
  }

  .tabela__logo {
    width: min(64vw, 320px);
    margin: 0 var(--pad);
  }

  .tabela__icon {
    width: 48px;
    margin: 28px var(--pad) 0;
  }

  /* The eight columns do not fit a phone: the table scrolls sideways */
  .tabela__scroll {
    width: auto;
    margin-top: 36px;
    padding: 0 var(--pad);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .tabela__scroll::-webkit-scrollbar {
    display: none;
  }

  .tabela__table {
    min-width: 800px;
  }

  .tabela__row,
  .tabela__row--head {
    display: grid;
    grid-template-columns: 90px 110px 60px 90px 100px 100px 100px 150px;
    align-items: center;
    height: 38px;
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.1em;
  }

  .tabela__row span {
    position: static;
    text-align: center;
    transform: none;
  }

  /* ---------- Dialogs ---------- */

  .close-btn {
    width: 44px;
    height: 44px;
    border-width: 2px;
  }

  .close-btn::before,
  .close-btn::after {
    width: 18px;
    height: 2px;
  }

  .lightbox__close,
  .lightbox.is-landscape .lightbox__close,
  .privacy__close,
  .map-full__close,
  .fracao .frame > .fracao__close {
    position: fixed;
    z-index: 2;
    top: 14px;
    right: 14px;
    left: auto;
  }

  .lightbox {
    background: var(--beige);
  }

  .lightbox .frame {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 72px var(--pad) 40px;
  }

  .lightbox__figure,
  .lightbox.is-landscape .lightbox__figure {
    position: static;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 16px;
    height: auto;
    max-width: 100%;
  }

  .lightbox__img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 72svh;
  }

  .lightbox__caption,
  .lightbox.is-landscape .lightbox__caption {
    align-items: flex-start;
    margin: 0;
    text-align: left;
  }

  .lightbox__title {
    font-size: 14px;
  }

  .lightbox__credit {
    font-size: 11px;
    line-height: 1.5;
  }

  /* Full map pans sideways; it opens centred on the building */
  .map-full {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .map-full__img {
    position: static;
    width: auto;
    max-width: none;
    height: 100%;
    object-fit: fill;
  }

  .map-full .frame {
    position: fixed;
    width: 0;
    height: 0;
  }

  .fracao {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .fracao .frame {
    display: flex;
    flex-direction: column;
    padding: 72px var(--pad) 48px;
  }

  .fracao .frame > * {
    position: static;
  }

  .fracao__title { order: 1; font-size: 28px; }
  .fracao__floor { order: 2; margin-top: 4px; font-size: 20px; }
  .fracao__plan-img { order: 3; width: 100%; margin-top: 28px; }
  .fracao__spinner { order: 3; align-self: center; width: 48px; margin-top: 28px; }
  .fracao:not(.is-loading) .fracao__spinner { display: none; }
  .fracao.is-loading .fracao__plan-img { display: none; }
  .fracao__ref { order: 4; margin-top: 28px; font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
  .fracao__area { order: 5; margin-top: 28px; font-size: 32px; }
  .fracao__area-label { order: 6; margin-top: 6px; font-size: 9px; }
  .fracao__detail { order: 7; width: auto; margin-top: 24px; font-size: 12px; line-height: 1.5; white-space: normal; }
  .fracao__note { order: 8; margin-top: 28px; font-size: 12px; line-height: 1.35; white-space: normal; }
  .fracao__legal { order: 9; margin-top: 20px; font-size: 10px; line-height: 1.4; white-space: normal; }

  .fracao__area sup {
    vertical-align: 10px;
  }

  .fracao__compass,
  .fracao__divider,
  .fracao__building,
  .fracao__plan-label,
  .fracao__brand,
  .fracao__year,
  .fracao__city {
    display: none;
  }
}

/* Phones held upright play the mobile video: its first frame is the photo underneath, uncropped */
@media (max-aspect-ratio: 7/10) {
  .scroll__media {
    background-image: url("../assets/img/hero-lisboa-mobile.webp");
    background-image: image-set(url("../assets/img/hero-lisboa-mobile.avif") type("image/avif"), url("../assets/img/hero-lisboa-mobile.webp") type("image/webp"));
    background-position: center;
  }

  .hero-video {
    object-position: center;
  }
}

/* Tablets in portrait: more air and larger type in the sections outside the mobile design */
@media (min-width: 600px) and (max-width: 1023px) and (min-height: 600px),
  (min-width: 600px) and (max-aspect-ratio: 1/1) and (min-height: 600px) {
  :root {
    --pad: 48px;
    --gap: 16px;
  }

  .contacto__text {
    max-width: 580px;
    font-size: 15px;
  }

  .acab .frame,
  .contacto .frame {
    padding-top: 136px;
  }

  .acab__collage {
    max-width: 620px;
    margin: 0 auto;
  }

  .acab__list {
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
  }

  .acab__list > div {
    font-size: 13px;
  }

  .contacto__title {
    font-size: 48px;
  }

  .contacto__content {
    max-width: 620px;
  }

  .ebook {
    left: 50%;
    right: auto;
    width: min(560px, calc(100vw - 96px));
    transform: translate(-50%, -50%);
  }
}