/*
 * Fontinha — secção Perks, a colagem "We have it".
 *
 * Figma: banda de 1440 x 1022 do frame da homepage. Medidas lidas nos nós:
 *
 *   fotografias   382.4 x 285.5 cada, em posições fixas colocadas à mão
 *   Urban Escape  x  648.9  y 158.4      Dog Friendly  x 333.0  y 317.2
 *   Parking       x 1007.8  y 418.0      Garden        x 689.8  y 576.6
 *   "We have it"  x   81.2  y 431.3      "Our perks"   x  81.2  y 728.8
 *
 * Mobile first. Até 1200px a colagem desmonta-se numa lista empilhada: as
 * posições do desenho só fazem sentido na largura para que foram desenhadas, e
 * o Figma não tem frame de mobile para esta secção.
 */

/* Sem o padding vertical da .section: a banda do Figma tem 1022px e é isso que
   o palco reproduz. Com o padding a secção ficava 1214px e sobrava uma faixa de
   fundo liso por baixo da textura. */
.perks.section {
	padding-block: 0;
}

/* No Figma esta banda sobrepõe-se à dos destaques em 176.1px: vai de y=1342.5 a
   2364.6 e a dos destaques de 616.6 a 1518.6. O fundo tem o topo em diagonal com
   transparência acima dela, e nessa faixa o que se vê por cima da diagonal é a
   parede castanha dos destaques. Empilhadas sem sobreposição, aparecia ali o
   fundo da página em vez da parede.
   A margem é em percentagem, e não em px, porque a diagonal faz parte de um
   fundo dimensionado à largura: -12.23% dá -176.1px a 1440 e encolhe com o ecrã.
   O `position: relative` põe esta secção a desenhar por cima da anterior. */
.perks {
	position: relative;
	margin-top: -12.23%; /* 176.1 / 1440 */

	/* Sem cor de fundo: a diagonal do PNG é transparente e é por ali que se tem
	   de ver a parede dos destaques. Uma cor aqui tapava-a — foi o que aconteceu
	   à primeira. O recurso, se a imagem não carregar, é o fundo do body, que é
	   a mesma cor (--s-bg). */
	background-image: url("../../img/perks-fundo.png");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	color: var(--s-text);
}

/* ---------- Empilhado (até 1199px) ---------- */

/* O <svg> só existe para levar o <clipPath>; não deve ocupar espaço nem sequer
   uma linha de baseline. */
.perks__mascara {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.perks__palco {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* O título e as etiquetas são imagens do Figma, não texto. Os vectores têm o
   dourado embutido e uma escada que nenhuma caixa de texto exprime; o texto vive
   em spans escondidos, para o título existir para o Google e para quem ouve a
   página. Ver "O título e as etiquetas passaram a imagem" no CLAUDE.md.

   A caixa do <h2> é a do nó 4002:102 mais o transbordo do traço:
   231.332 x 210.564, com a tinta a começar em (-1.026, -0.802) do nó. */
.perks__titulo {
	width: 231.332px;
	max-width: 100%;
	margin: 0 0 var(--sp-8) auto;
	aspect-ratio: 231.332 / 210.564;
	background-image: url("../../img/perks/we-have-it.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.perks__lista {
	display: flex;
	flex-direction: column;
	gap: var(--sp-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Uma imagem por etiqueta, presa à posição do perk como o ícone. */
.perk__etiqueta {
	display: block;
	margin-bottom: var(--sp-2);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
}

.perk:nth-child(1) .perk__etiqueta {
	width: 210.503px;
	aspect-ratio: 210.503 / 21.647;
	background-image: url("../../img/perks/urban-escape.svg");
}

.perk:nth-child(2) .perk__etiqueta {
	width: 211.113px;
	aspect-ratio: 211.113 / 21.526;
	background-image: url("../../img/perks/dog-friendly.svg");
}

.perk:nth-child(3) .perk__etiqueta {
	width: 146.677px;
	aspect-ratio: 146.677 / 24.2412;
	background-image: url("../../img/perks/parking.svg");
}

.perk:nth-child(4) .perk__etiqueta {
	width: 143.627px;
	aspect-ratio: 143.627 / 26.3346;
	background-image: url("../../img/perks/garden.svg");
}

.perk__media {
	position: relative;
	aspect-ratio: 382.4 / 285.5;
}

/* O ícone em linha dourada por cima da fotografia. É decoração e vem por CSS,
   não por campo: no desenho está preso à posição, não ao conteúdo, e o repeater
   só tem imagem e etiqueta. Exportados do Figma — o gradiente vem embutido no
   SVG, como manda o CLAUDE.md, e não se faz com CSS.
   Posições e tamanhos em fração da caixa de 382.4 x 285.5, lidos nos nós. */
.perk__media::after {
	position: absolute;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	pointer-events: none;
}

/* Urban Escape — nó 4001:884, 115.1x92.5 em (137.8, 89.9) dentro da foto */
.perk:nth-child(1) .perk__media::after {
	top: 31.49%;
	left: 36.04%;
	width: 30.10%;
	height: 32.40%;
	background-image: url("../../img/icons/perk-urban-escape.svg");
}

/* Dog Friendly — nó 4001:871, 120.8x90.6 em (126.9, 93.2) */
.perk:nth-child(2) .perk__media::after {
	top: 32.64%;
	left: 33.18%;
	width: 31.59%;
	height: 31.73%;
	background-image: url("../../img/icons/perk-dog-friendly.svg");
}

/* Parking — nó 4001:913, 135.8x81.6 em (116.4, 95.3) */
.perk:nth-child(3) .perk__media::after {
	top: 33.38%;
	left: 30.44%;
	width: 35.51%;
	height: 28.58%;
	background-image: url("../../img/icons/perk-parking.svg");
}

/* Garden — nó 4001:926, 59.9x104.1 em (154.1, 89.5) */
.perk:nth-child(4) .perk__media::after {
	top: 31.35%;
	left: 40.30%;
	width: 15.66%;
	height: 36.46%;
	background-image: url("../../img/icons/perk-garden.svg");
}

/* O recorte real do Figma, em <clipPath> — ver o comentário no template. Estava
   aqui um `polygon()` de oito pontos que eu tinha medido a olho no frame
   exportado, e estava errado em três coisas: enchia a caixa toda em vez de a
   forma estar encolhida para dentro dela, tinha o degrau de cima em 61.5% em vez
   de 55.9%, e não tinha os dois quadrados dos cantos, que o `polygon()` nem
   consegue exprimir por serem regiões soltas.

   Números do caminho, em % da caixa de 382.428 x 285.464:
     quadrado 1     0 .. 6.478%    x   0 .. 8.678%
     principal esq  8.687 .. 55.922%  x  8.890 .. 72.170%
     principal dir  44.232 .. 91.468% x 27.410 .. 90.690%
     quadrado 2    93.522 .. 100%   x  91.322 .. 100%

   A extensão visível passa de 382.4x285.5 (a caixa inteira) para 316.6x233.5,
   que é o desenho. */
.perk__janela {
	position: relative;
	width: 100%;
	height: 100%;

	/* O `clip-path` recorta a pintura mas não o overflow de layout: com a imagem
	   ampliada a passar da janela, a página ganhava scroll horizontal — 330px a
	   1440. Quem corta a caixa é este `overflow`. */
	overflow: hidden;
	clip-path: url("#fontinha-perk-recorte");
}

/* A escala é absoluta, como se lê no Figma: a largura da imagem é `escala` vezes
   a da janela, e a altura sai do rácio natural do ficheiro. O 1.493 por omissão
   é exactamente o que o `object-fit: cover` dava antes de haver campo, por isso
   nada muda enquanto ninguém lhe tocar.

   Os `min-*` são a rede: com uma fotografia muito larga a altura automática podia
   ficar aquém da janela e abrir uma faixa vazia. Quando entram, é o `object-fit`
   que corta.

   O par `left/top` mais o `translate` negativo dá as nove âncoras com dois
   valores em vez de nove regras: 0% encosta, 50% centra, 100% encosta do outro
   lado. */
.perk__imagem {
	position: absolute;
	top: var(--perk-y, 50%);
	left: var(--perk-x, 50%);
	width: calc(var(--perk-escala, 1.493) * 100%);
	height: auto;

	/* O `img { max-width: 100% }` do base.css travava a largura na da janela e
	   a escala não saía do 1. */
	max-width: none;

	/* Só a altura tem rede. O `min-width` foi tirado: travava as escalas
	   abaixo de 1, e o Urban Escape do desenho tem 0.979. */
	min-height: 100%;
	object-fit: cover;
	/* O espelho entra AQUI, na mesma declaração, e não numa regra à parte: o
	   `transform` é uma propriedade só, não é aditiva, e uma segunda regra
	   substituía o `translate` inteiro em vez de se somar a ele. Foi o que
	   deixou o Parking com a fotografia fora da janela. */
	transform: translate(
			calc(-1 * var(--perk-x, 50%)),
			calc(-1 * var(--perk-y, 50%))
		)
		scaleX(var(--perk-espelho, 1));
}

/* No Figma esta fotografia está espelhada na horizontal (o -scale-x-100 do nó
   4001:909). Só a imagem: as quatro máscaras são o mesmo caminho, e a forma
   visível do Parking é a normal — confirmado por ampliação do frame.
   Vai por variável, para se compor com o `translate` da regra de cima. */
.perk:nth-child(3) .perk__imagem {
	--perk-espelho: -1;
}

.perks__texto {
	margin-top: var(--sp-12);
	max-width: var(--container-text);
}

/* Gill Sans Medium, não Baro — lido no nó 4001:927. Eu tinha assumido que um
   subtítulo em caixa alta seria Baro, como os outros do site; aqui não é.
   O espaço até ao parágrafo é 19px, o `gap` do flex no Figma. Está fora da
   escala de tokens (16 ou 24), mas é medição e não escolha — ver
   "Decisões assumidas". */
.perks__subtitulo {
	margin-bottom: 19px;
	color: var(--s-link);
	font-family: var(--font-body);
	font-weight: var(--fw-body-strong);
	text-transform: uppercase;
}

/* 14.973px e entrelinha normal, lidos no nó 4001:879. O `--fs-small` de 14px e
   o `--lh-body` de 1.6 vinham da tabela "Escala proposta" do design-tokens.md,
   que tem ⚠️ na própria coluna: nunca foram medidos. Com 1.6 o parágrafo ocupava
   89.6px contra os 69.6px do desenho, quatro linhas nos dois casos.
   Contido nesta secção — o token global fica como está até se medir outro bloco
   de texto corrido contra o Figma. */
.perks__texto p {
	font-size: 14.973px;
	line-height: normal;
}

/* ---------- Colagem (1200px e acima) ---------- */

@media (min-width: 1200px) {
	/* O palco reproduz a caixa de 1440 x 1022 do desenho e para aí. Tudo lá
	   dentro é percentagem dessa caixa, por isso a colagem mantém-se alinhada,
	   mas deixa de crescer com o ecrã: acima de 1440 fica travado e centrado,
	   como as outras bandas. Era a única do site cujo conteúdo escalava. */
	.perks__palco {
		position: relative;
		max-width: 1440px;
		padding-inline: 0;
		aspect-ratio: 1440 / 1022;
	}

	/* No desenho o título está alinhado à direita e quebra em três linhas:
	   WE / HAVE / IT. A caixa do Figma tem 229.4px, mas "HAVE IT" mede 208.8px
	   e caberia numa linha só — lá as quebras são manuais, e aqui o título é um
	   campo de texto. Estreitar a caixa para 158px força as três quebras, e
	   como o texto está alinhado à direita as palavras caem exactamente onde o
	   Figma as põe: a aresta direita é a mesma, em 310.6px. */
	/* O título, à escala do palco. O canto da imagem fica em (80.174, 430.498)
	   da banda: é o nó 4002:102, em (81.2, 431.3), menos o transbordo do traço
	   que o export inclui, (1.026, 0.802). */
	.perks__titulo {
		position: absolute;
		top: 42.123%;  /* 430.498 / 1022 */
		left: 5.568%;  /* 80.174 / 1440 */
		width: 16.065%; /* 231.332 / 1440 */
		max-width: none;
		margin: 0;
	}

	.perks__lista {
		display: block;
	}

	/* O hexágono com o visto, ao centro da colagem — nó 4001:854, 50.9x44.1
	   em (830.5, 1811.7). Só existe na versão em colagem: empilhado não tem
	   centro onde assentar. */
	.perks__palco::after {
		position: absolute;
		top: 45.91%;   /* (1811.7 - 1342.5) / 1022 */
		left: 57.67%;  /* 830.5 / 1440 */
		width: 3.53%;  /* 50.9 / 1440 */
		height: 4.31%; /* 44.1 / 1022 */
		background-image: url("../../img/icons/perks-hexagono.svg");
		background-repeat: no-repeat;
		background-size: contain;
		content: "";
		pointer-events: none;
	}

	.perk {
		position: absolute;
		width: 26.56%; /* 382.4 / 1440 */
	}

	/* As quatro posições do desenho, pela ordem do repeater:
	   Urban Escape, Dog Friendly, Parking, Garden. */
	.perk:nth-child(1) {
		top: 15.50%;   /* 158.4 / 1022 */
		left: 45.06%;  /* 648.9 / 1440 */
	}

	.perk:nth-child(2) {
		top: 31.04%;   /* 317.2 / 1022 */
		left: 23.13%;  /* 333.0 / 1440 */
	}

	.perk:nth-child(3) {
		top: 40.90%;   /* 418.0 / 1022 */
		left: 69.99%;  /* 1007.8 / 1440 */
	}

	.perk:nth-child(4) {
		top: 56.42%;   /* 576.6 / 1022 */
		left: 47.90%;  /* 689.8 / 1440 */
	}

	/* Um quinto perk não tem posição no desenho: fica no canto inferior
	   esquerdo, visível, em vez de se sobrepor a outro. O campo tem max=4,
	   isto é só rede. */
	.perk:nth-child(n + 5) {
		position: static;
		width: 100%;
		margin-top: var(--sp-8);
	}

	/* A etiqueta sai do fluxo. Enquanto estava dentro dele, empurrava a
	   fotografia para baixo pela sua própria altura mais o intervalo — 28px — e
	   o `top` do .perk, que são os y das fotografias do Figma, acabava a
	   posicionar a etiqueta em vez da fotografia. As quatro fotografias estavam
	   28px abaixo do desenho.

	   Fora do fluxo, a caixa do .perk passa a ser a da fotografia e os `top`
	   ficam certos sem lhes tocar. A etiqueta assenta em cima da fotografia, com
	   a base 8.9 a 12.5px dentro dela, como no desenho.

	   Cada uma tem o seu recuo: no Figma estão colocadas à mão e nenhuma repete
	   a vizinha. Agora que são imagens, o `top` e o `left` são a posição do nó
	   sem descontos — a caixa da imagem é a caixa do nó. */
	.perk__etiqueta {
		position: absolute;
		z-index: 1;
		margin: 0;
	}

	/* Urban Escape — nó 4002:108, +51.528 e -12.282 face à fotografia */
	.perk:nth-child(1) .perk__etiqueta {
		top: -4.302%;
		left: 13.475%;
		width: 55.048%; /* 210.503 / 382.4 */
	}

	/* Dog Friendly — nó 4002:105, +39.508 e -12.488 */
	.perk:nth-child(2) .perk__etiqueta {
		top: -4.374%;
		left: 10.332%;
		width: 55.207%; /* 211.113 / 382.4 */
	}

	/* Parking — nó 4002:109, +49.7 e -14.9 */
	.perk:nth-child(3) .perk__etiqueta {
		top: -5.219%;
		left: 12.997%;
		width: 38.356%; /* 146.677 / 382.4 */
	}

	/* Garden — nó 4002:110, +47.1 e -13.8 */
	.perk:nth-child(4) .perk__etiqueta {
		top: -4.833%;
		left: 12.317%;
		width: 37.559%; /* 143.627 / 382.4 */
	}

	.perks__texto {
		position: absolute;
		top: 71.31%;  /* 728.8 / 1022 */
		left: 5.64%;  /* 81.2 / 1440 */
		width: 33.54%; /* 483 / 1440 */
		margin: 0;
		max-width: none;
	}
}

/* ============================================================
   Mobile — até 1199px. Frame Home - mob (4002:171), banda 884..1426.
   ============================================================

   Outra composição, não o empilhamento do desktop — foi isso que fez a banda
   ter 1464.70 contra os 542 do desenho.

   O que o frame mostra, em coordenadas da banda (topo 884):

     etiqueta DOG FRIENDLY  4002:1043  ( 92.89,  11.55)  186.73 x 19.02
     fotografia grande      4002:836   ( 44.22,  32.98)  287.27 x 214.43
     tres circulos          4002:1204/1210/1216  y 272.02, 97.68 x 97.68
                            x 29.82 / 138.95 / 251.59
     etiquetas              4004:2610/2613/2614  y ~390.6, x 46.14/141.69/273.02
     OUR PERKS              4002:1073  (144.71, 429.31)   72 x 17
     paragrafo              4002:1072  ( 28.22, 450.50)  308 x 57.95

   Três diferenças de fundo face ao desktop:

   1. A ordem muda. No desenho mobile é Dog Friendly em grande, e depois Garden,
      Urban Escape e Parking em linha. O repeater é Urban Escape, Dog Friendly,
      Parking, Garden, por isso cada um é colocado pelo seu índice.
   2. As três pequenas são CÍRCULOS, não a máscara escalonada. A grande mantém a
      máscara — e o rácio dela, 287.27/214.43 = 1.3397, é exactamente o do
      desktop (382.428/285.464), por isso é a mesma forma noutra escala.
   3. O "WE HAVE IT" não existe aqui. O <h2> fica, sem a imagem: o título tem de
      continuar a contar para o Google e para quem ouve a página. */

@media (max-width: 1199px) {
	/*
	 * A margem negativa sobe a secção INTEIRA e leva o conteúdo com ela. No
	 * frame só o fundo sobe: o nó do fundo (4002:293) arranca em y=804.98 e a
	 * banda em 884, mas as coordenadas do conteúdo contam-se a partir de 884 —
	 * a etiqueta "DOG FRIENDLY" (4002:1043) está em 895.55, ou seja 11.55 da
	 * costura com os destaques.
	 *
	 * Sem este padding a origem do palco ficava 45.86px ACIMA da costura, e a
	 * etiqueta caía em cima da diagonal, sobre a parede dos destaques em vez de
	 * sobre a textura dos perks. Medido: acabava 34.31 acima da costura, contra
	 * os 11.55 abaixo dela do desenho.
	 *
	 * Vai na mesma percentagem da margem, e não em px: as duas resolvem contra
	 * a largura, por isso cancelam-se exactamente a qualquer ecrã.
	 */
	/*
	 * Em baixo, o intervalo que o desenho deixa entre o fim do bloco de texto e
	 * a banda dos reviews: 32.11 (o parágrafo 4002:1072 acaba a 508.50 e o
	 * fundo dos reviews 4002:855 começa a 540.61).
	 *
	 * O nosso parágrafo tem 90.00 de altura contra os 57.95 do nó — seis linhas
	 * contra quatro, porque o texto real tem 277 caracteres e o do mockup ~180.
	 * O bloco arranca no sítio certo e o intervalo interno (4.19 do OUR PERKS ao
	 * parágrafo) também bate; o que sobrava em baixo foi comido pelas duas
	 * linhas a mais. Os 30.59 são o que falta para o intervalo, descontando o
	 * 1.52 de palco que ainda sobra depois do texto, e somando o 1.44 com que
	 * os reviews sobem por cima desta banda.
	 *
	 * Custo: a banda passa dos 542 do desenho para 572.6. É conteúdo, como a
	 * dos destaques.
	 */
	.perks.section {
		padding-block: 21.0587% 32.04px;
	}

	/*
	 * O fundo tem asset próprio em mobile — nó 4002:293, 376.78x618.34,
	 * exportado para `perks-fundo-mobile.png` (375x619, 86 KB).
	 *
	 * Não é o de desktop mais estreito. O `perks-fundo.png` tem 1436x1023
	 * (rácio 1.403) e a 375 de largura rendia 375x267.2 numa banda de 588: a
	 * textura acabava por volta de band-rel 250 e as três etiquetas pequenas e
	 * o bloco de texto ficavam sobre fundo liso. E a diagonal também não era a
	 * mesma — a de desktop desce 32.7 em 375 e a deste desce **77.2**, ou seja
	 * 2.36 vezes mais inclinada em proporção da largura.
	 *
	 * O export veio OPACO, como o de desktop e o dos socials: diz
	 * `hasAlpha: yes` mas o canal está todo a 255 e nada transparecia sobre
	 * vermelho. A diagonal foi medida por mínimos quadrados sobre 15 colunas —
	 * `y = -0.2064x + 77.15`, de (0, 77.2) a (375, -0.3) — e o triângulo acima
	 * dela apagado, com uma rampa de 1px na aresta. Ficam 6.2% dos pixéis a
	 * zero. Testado outra vez sobre vermelho: transparente acima, textura
	 * abaixo.
	 *
	 * A sobreposição passa a 21.0587% (78.97 a 375), que é onde o nó começa —
	 * 78.97 acima da costura, contra os 45.86 que vinham da percentagem de
	 * desktop. O `padding-top` acompanha, para a origem do conteúdo continuar
	 * na costura.
	 *
	 * A secção fica com 620.97 e a imagem rende 619: os ~2px que sobram em
	 * baixo caem dentro da sobreposição dos reviews, que são 21.85.
	 */
	.perks {
		margin-top: -21.0587%; /* 78.97 / 375 */
		background-image: url("../../img/perks-fundo-mobile.png");
	}

	.perks__palco {
		position: relative;
		max-width: 375px;
		margin-inline: auto;
		aspect-ratio: 375 / 542;
	}

	/* O título desaparece à vista, não do documento. */
	.perks__titulo {
		background-image: none;
	}

	.perks__lista {
		display: block;
		margin: 0;
		padding: 0;
	}

	.perk {
		position: absolute;
		margin: 0;
	}

	.perk__media,
	.perk__janela {
		width: 100%;
		height: 100%;
	}

	/* Dog Friendly — a grande, com a máscara. */
	.perk:nth-child(2) {
		top: 6.0849%;    /*  32.98 / 542 */
		left: 11.7920%;  /*  44.22 / 375 */
		width: 76.6053%; /* 287.27 / 375 */
		height: 39.5628%;/* 214.43 / 542 */
	}

	/* As três pequenas: círculos de 97.68 em y 272.02. */
	.perk:nth-child(4),
	.perk:nth-child(1),
	.perk:nth-child(3) {
		top: 50.1882%;   /* 272.02 / 542 */
		width: 26.0480%; /*  97.68 / 375 */
		height: 18.0221%;/*  97.68 / 542 */
	}

	.perk:nth-child(4) { left: 7.9520%; }  /*  29.82 / 375 — Garden */
	.perk:nth-child(1) { left: 37.0533%; } /* 138.95 / 375 — Urban Escape */
	.perk:nth-child(3) { left: 67.0907%; } /* 251.59 / 375 — Parking */

	.perk:nth-child(4) .perk__janela,
	.perk:nth-child(1) .perk__janela,
	.perk:nth-child(3) .perk__janela {
		border-radius: 50%;
		clip-path: none;
	}

	/*
	 * As etiquetas do frame mobile são ESCURAS, não douradas.
	 *
	 * Amostrado no export: o pixel mais escuro do "DOG FRIENDLY" (4002:1043) é
	 * rgb(61, 61, 60), ou seja #3D3D3C — a mesma tinta escura do rótulo da
	 * barra de reservas (4002:1146) e do item activo do menu (4003:2478). As
	 * três pequenas dão 84 a 97 por serem traço fino com anti-aliasing, e não
	 * por serem de outra cor.
	 *
	 * Os SVG de `assets/img/perks/` foram exportados dos nós de DESKTOP, que
	 * trazem o gradiente dourado embutido — no site amostrava rgb(167, 110, 85),
	 * que é a parada escura do --g-gold. Há agora uma segunda variante de cada
	 * um, com o mesmo desenho e preenchimento liso, e é ela que entra aqui.
	 *
	 * As variantes são derivadas dos mesmos ficheiros, não exportadas de novo:
	 * cada `fill="url(#...)"` passou a `fill="#3D3D3C"` e os `<defs>` dos
	 * gradientes saíram por deixarem de ter uso. Pesam menos 40% que os
	 * dourados.
	 */
	.perk:nth-child(1) .perk__etiqueta {
		background-image: url("../../img/perks/urban-escape-escuro.svg");
	}

	.perk:nth-child(2) .perk__etiqueta {
		background-image: url("../../img/perks/dog-friendly-escuro.svg");
	}

	.perk:nth-child(3) .perk__etiqueta {
		background-image: url("../../img/perks/parking-escuro.svg");
	}

	.perk:nth-child(4) .perk__etiqueta {
		background-image: url("../../img/perks/garden-escuro.svg");
	}

	/* As etiquetas, em fracção da própria fotografia. */
	.perk__etiqueta {
		position: absolute;
		margin: 0;
	}

	.perk:nth-child(2) .perk__etiqueta {  /* DOG FRIENDLY, por cima */
		top: -9.9920%;   /* ( 11.55 -  32.98) / 214.43 */
		left: 16.9420%;  /* ( 92.89 -  44.22) / 287.27 */
		width: 65.0016%; /* 186.73 / 287.27 */
	}

	.perk:nth-child(4) .perk__etiqueta {  /* GARDEN */
		top: 121.3656%;  /* (390.57 - 272.02) / 97.68 */
		left: 16.7076%;  /* ( 46.14 -  29.82) /  97.68 */
		width: 61.6196%; /*  60.19 / 97.68 */
	}

	.perk:nth-child(1) .perk__etiqueta {  /* URBAN ESCAPE */
		top: 122.3894%;  /* (391.57 - 272.02) / 97.68 */
		left: 2.8051%;   /* (141.69 - 138.95) /  97.68 */
		width: 104.6151%;/* 102.19 / 97.68 */
	}

	.perk:nth-child(3) .perk__etiqueta {  /* PARKING */
		top: 122.8399%;  /* (392.01 - 272.02) / 97.68 */
		left: 21.9185%;  /* (273.02 - 251.59) /  97.68 */
		width: 64.5578%; /*  63.06 / 97.68 */
	}

	/* Os ícones das três pequenas, em fracção do círculo de 97.68. A grande
	   fica com as fracções do desktop: o rácio da caixa é o mesmo. */
	.perk:nth-child(4) .perk__media::after {  /* Garden */
		top: 31.2757%;   /* (1186.57 - 1156.02) / 97.68 */
		left: 38.2064%;  /* ( 67.14 -  29.82) / 97.68 */
		width: 22.3894%; /*  21.87 / 97.68 */
		height: 38.8923%;/*  37.99 / 97.68 */
	}

	.perk:nth-child(1) .perk__media::after {  /* Urban Escape */
		top: 35.9132%;
		left: 22.3894%;
		width: 50.4914%;
		height: 30.3235%;
	}

	.perk:nth-child(3) .perk__media::after {  /* Parking */
		top: 34.1523%;
		left: 27.4160%;
		width: 43.3866%;
		height: 34.8690%;
	}

	/* OUR PERKS e o parágrafo. O `margin` tem de ir a zero: uma margem soma-se
	   à posição de um elemento absoluto, e o --sp-12 do base punha o bloco 48px
	   abaixo do `top` que lhe é dado. */
	.perks__texto {
		position: absolute;
		top: 79.2085%;   /* 429.31 / 542 */
		left: 7.5253%;   /*  28.22 / 375 */
		width: 82.1333%; /* 308.00 / 375 */
		margin: 0;

		/*
		 * O parágrafo é alinhado à ESQUERDA, não centrado.
		 *
		 * Medido linha a linha no export, na caixa 28.22..336.22: as quatro
		 * linhas do nó 4002:1072 arrancam todas em x=29 e acabam em 315, 305,
		 * 305 e 329 — aresta esquerda comum e direita irregular. Centrado, os
		 * centros seriam todos 182.2 e dão 172.0, 167.0, 167.0 e 183.5; à
		 * direita, as arestas direitas seriam todas 336.2.
		 */
		text-align: left;
	}

	/* Nó 4002:1073: Gill Sans Medium 13.968px, #005470. O desktop tem 24.696.
	   Este É centrado na caixa — 146..215, ou seja 117.8 de folga à esquerda e
	   121.2 à direita. */
	.perks__subtitulo {
		display: block;
		margin-bottom: 4.19px; /* 450.50 - (429.31 + 17) */
		text-align: center;
		font-size: 13.968px;
		line-height: normal;
	}

	/* Nó 4002:1072: Gill Sans Light 13.27px. O desktop tem 14.973. */
	.perks__texto p {
		font-size: 13.27px;
	}
}