/*
 * Fontinha — pop-up de detalhe do quarto.
 *
 * Figma: Quartos - Pop-up (4005:8631, 964x589) e Quartos - Pop-up - mob
 * (4005:12462, 375x1141).
 *
 * ============================================================
 * LEIA-SE ISTO ANTES DE MEXER: OS DOIS FRAMES NÃO ESTÃO À MESMA ESCALA
 * ============================================================
 *
 * O frame de desktop está desenhado a **26% do de telemóvel**, e o factor é
 * exacto nos dois valores que se podem comparar directamente:
 *
 *                        desktop    mobile    mobile / desktop
 *   número da caixa       12.45     48.312         3.880
 *   legenda da caixa       3.87     15.031         3.884
 *   caixa                58.45x30.5 226.83x118.36  3.880
 *
 * Ou seja: no frame de desktop o corpo do texto é **7.47px** e as legendas das
 * características **3.87px**. Não é implementável — nada disso se lê. E não se
 * resolve escalando o frame: a 3.88x o pop-up ficaria com 3740px de largura.
 *
 * O que ficou:
 *
 *   - **o telemóvel segue o frame ao pé da letra**, que é o que está à escala
 *     real: 16px de corpo, legendas a 15.031, números a 48.312;
 *   - **o desktop mantém a COMPOSIÇÃO do frame** — fotografia à esquerda com a
 *     moldura de cantos, texto à direita, fila de miniaturas em baixo, rodelas
 *     no canto — mas com a tipografia da escala do site;
 *   - as caixas das características são as **mesmas caixas das amenities da
 *     página** (166.57x86.92, número 35.484, legenda 11.034). Não é palpite: o
 *     rácio número/legenda do frame é 3.22 nos dois sítios, e a caixa do pop-up
 *     é a da página a 35.09%. É o mesmo desenho, mais pequeno.
 *
 * **Custo: a coluna de texto duplica** — 511.35 em vez dos 230 do frame
 * (23.9% da largura), porque três caixas de 166.57 não cabem em 292. A
 * fotografia encolhe de 44.3% para ~48% da caixa interior. Ver "Decisões
 * assumidas".
 *
 * Mobile first, com o desktop aos 1200.
 */

/* ============================================================
   O elemento
   ============================================================ */

.quarto-pop {
	width: 100%;
	max-width: 100%;

	/*
	 * **`dvh` e não `%`.** Num `<dialog>` do top layer a percentagem resolve
	 * contra o bloco inicial, que em telemóvel é o viewport GRANDE — o de
	 * barra de endereço escondida. Com a barra à vista o diálogo fica mais
	 * alto do que se vê e a parte de baixo, onde acaba a caixa que rola, cai
	 * por trás da barra do browser: o conteúdo chega ao fim do seu scroll e
	 * mesmo assim a última caixa aparece cortada a meio.
	 *
	 * Medido a 360x640: `documentElement.clientHeight` 640, diálogo 656 — 16px
	 * a mais. Num telefone a sério a diferença é a altura da barra, 60 a 90.
	 *
	 * O `100%` fica como recuo para quem não tem `dvh`.
	 */
	max-height: 100%;
	max-height: 100dvh;

	/* `auto` e não 0: é a margem que centra um `<dialog>` no ecrã, e com 0 ele
	   encostava à esquerda. */
	margin: auto;
	padding: 0;
	border: 0;

	/*
	 * Quem rola é a caixa lá dentro, não o diálogo: assim o fecho e as rodelas,
	 * que são absolutos contra o diálogo, ficam parados.
	 *
	 * E é preciso o flex. A caixa tinha `max-height: 100%`, e uma percentagem
	 * resolve contra a ALTURA DECLARADA do pai — que aqui é `auto`, porque quem
	 * trava o diálogo é o `max-height`. Não resolvendo, valia `none`: a caixa
	 * ficava com os 1223 do conteúdo dentro de um diálogo de 667, o `overflow`
	 * dela nunca entrava e em telemóvel o pop-up não rolava de todo.
	 *
	 * Como item de flex numa coluna de altura definida, a caixa recebe um
	 * tamanho a sério. O `min-height: 0` é obrigatório: um item de flex tem
	 * `min-height: auto` e recusa encolher abaixo do conteúdo, o que anulava
	 * outra vez o overflow.
	 */
	overflow: hidden;

	/*
	 * A textura de fundo. É o nó 4005:8642 — uma fotografia mascarada, a 50%
	 * de opacidade sobre branco. Não se aproxima com gradiente: é mármore com
	 * veios, e é a regra do CLAUDE.md sobre o que o CSS não reproduz.
	 */
	background-color: var(--c-white);
	background-image: linear-gradient(
			rgb(255 255 255 / 50%),
			rgb(255 255 255 / 50%)
		),
		url("../../img/quartos/fundo-textura.jpg");
	background-position: center;
	background-size: cover;
	color: var(--s-text-muted);
}

/*
 * A textura de fundo. É o nó 4005:8642 — uma fotografia mascarada, a 50% de
 * opacidade sobre branco. Não se aproxima com gradiente: é mármore com veios,
 * e é a regra do CLAUDE.md sobre o que o CSS não reproduz.
 *
 * A caixa é a que rola. A textura vive no diálogo, por cima do qual ela passa
 * transparente — senão rolava com o conteúdo.
 */
.quarto-pop__caixa {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/*
 * O flex só com `[open]`.
 *
 * Um `<dialog>` fechado é `display: none` por regra do browser, e declarar
 * `display: flex` na classe desfazia isso: os três pop-ups passaram a ser
 * pintados no fluxo da página, que cresceu 214px em desktop e 253 em
 * telemóvel. Só apareceu na medição da página inteira — a olho ficavam por
 * baixo da banda das amenities.
 */
.quarto-pop[open] {
	display: flex;
	flex-direction: column;
}

.quarto-pop::backdrop {
	/* O `<dialog>` não tem backdrop por omissão em todos os browsers. */
	background: rgb(60 60 59 / 55%);
}

/* A página por baixo deixa de rolar com o pop-up aberto — como no menu
   mobile. Sem isto o toque arrasta o conteúdo atrás dele. */
body.tem-modal-aberto {
	overflow: hidden;
}

/* ---------- Fechar ---------- */

/*
 * Não está em nenhum dos dois frames. Está aqui por ser requisito: um modal sem
 * fecho visível deixa quem usa toque sem saída — o Esc é teclado e o clique
 * fora não se adivinha. Ver "Decisões assumidas".
 */
.quarto-pop__fechar {
	position: absolute;
	z-index: 2;
	top: 8px;
	right: 8px;

	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;

	background: none;
	color: var(--s-link);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.quarto-pop__fechar:hover,
.quarto-pop__fechar:focus-visible {
	color: var(--s-text);
}

/* ============================================================
   Telemóvel — o frame 4005:12462, seguido ao pé da letra
   ============================================================ */

/* ---------- Fotografia ---------- */

/*
 * A caixa da figura é a da MOLDURA. A fotografia vai lá dentro, RECORTADA AO
 * CAMINHO da moldura, e a moldura pinta-se por cima.
 *
 * O recorte não é um rectângulo — foi esse o erro que se repetiu três vezes. O
 * caminho tem doze vértices: o rectângulo grande mais os dois quadrados dos
 * cantos, tudo uma linha só. A fotografia é o PREENCHIMENTO desse caminho e o
 * traço está alinhado POR FORA dele. Daí, no frame:
 *
 *   - a linha corre pela aresta da fotografia, nunca a atravessa;
 *   - os ocos dos dois quadrados têm fotografia lá dentro — no canto superior
 *     esquerdo vê-se o varão da cortina — e por isso encostam-lhe aos cantos;
 *   - para lá da linha é mármore.
 *
 * Com um recorte rectangular saía sempre uma das três errada: ou a linha
 * atravessava a fotografia, ou os ocos ficavam com mármore e os quadrados
 * apareciam soltos, afastados dos cantos.
 *
 * Os vértices são os do caminho ORIGINAL do Figma, em percentagem da caixa do
 * SVG. Os ficheiros em assets/img/quartos/ trazem esse mesmo caminho deslocado
 * meia banda para fora e traçado ao centro — que é como se reproduz um traço
 * alinhado por fora — por isso a banda assenta exactamente neste recorte.
 */
.quarto-pop__foto {
	position: relative;

	/* O SVG começa meia espessura de traço (6.3497) acima e à esquerda do nó
	   da moldura, que está em (14.39, 33.05). */
	margin: 26.70px 0 0 2.144%; /* 8.04 / 375 */
	width: 95.716%;             /* 358.935 / 375 */
	aspect-ratio: 358.935 / 410.286;
}

.quarto-pop__foto img {
	position: absolute;
	inset: 0;

	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;

	/* Caminho de telemóvel, caixa 358.935 x 410.286. */
	clip-path: polygon(
		12.644% 91.001%,
		88.911% 91.001%,
		88.911% 10.126%,
		98.231% 10.126%,
		98.231% 1.548%,
		87.356% 1.548%,
		87.356% 9.035%,
		10.574% 9.035%,
		10.574% 89.640%,
		1.769% 89.640%,
		1.769% 98.453%,
		12.644% 98.453%
	);
}

/*
 * A moldura por cima. `::after` e não `background` da figura: um fundo pinta-se
 * por baixo do conteúdo, e aqui tem de ficar por cima da fotografia.
 *
 * **A espessura do traço do export é o DOBRO da que o Figma pinta.** O traço
 * está alinhado por fora; o export converte-o num traço centrado do dobro da
 * espessura, o que mantém a silhueta exterior e come metade do oco. A prova
 * está no quadrado do canto: oco 34.0 e exterior 43.41 medidos no export do
 * frame, contra 24.59 e 43.41 do traço centrado.
 *
 *              exportado   pintado
 *   desktop       9.41      4.705
 *   telemóvel    12.6994    6.3497
 *
 * Os ficheiros em assets/img/quartos/ trazem o caminho deslocado meia banda
 * para fora e traçado ao centro com a banda pintada — mesmo resultado, e sem
 * partir a junção entre o quadrado do canto e o rectângulo, que no desenho é
 * uma linha só. Ver scratchpad/refazer-moldura.py.
 *
 * E `fill="none"`: o preenchimento do caminho é a fotografia, que aqui vem do
 * `<img>` recortado, não do SVG.
 */
.quarto-pop__foto::after {
	position: absolute;
	inset: 0;

	background-image: url("../../img/quartos/moldura-foto-mob.svg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	content: "";
	pointer-events: none;
}

/* ---------- Miniaturas ---------- */

/*
 * A fila. No frame de telemóvel são três de 234.32x212.27 com 9.49 de
 * intervalo, com a primeira cortada pela aresta esquerda — o corte é o que diz
 * que há mais. Sem setas: aqui anda-se a arrastar, como nos outros carrosséis.
 */
.quarto-pop__media .carousel {
	margin-top: 28.76px; /* 457.92 - 429.16 */
}

.quarto-pop__media .carousel__track {
	gap: 9.49px;
}

.quarto-pop__mini {
	width: 234.32px;
}

.quarto-pop__mini-btn {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;

	/* Nó 4005:10235: 234.32x212.27. */
	aspect-ratio: 234.32 / 212.27;
	background: none;
	cursor: pointer;
}

.quarto-pop__mini-btn img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A miniatura que está na fotografia grande. O frame não marca nenhuma — é
   nosso, e é preciso: sem marca não se sabe qual delas se está a ver. */
.quarto-pop__mini-btn.is-atual {
	outline: 2px solid var(--s-link);
	outline-offset: -2px;
}

/* Em telemóvel o desenho não tem setas nesta fila. */
.quarto-pop__media .carousel__controls {
	display: none;
}

/* ---------- Texto ---------- */

.quarto-pop__titulo {
	/*
	 * O frame de telemóvel não tem título nenhum — o de desktop tem. Fica,
	 * porque um pop-up que abre sem dizer de que quarto é não se percebe, e
	 * porque é o nome acessível do diálogo. Ver "Decisões assumidas".
	 */
	margin: 50.24px 8.09% 0; /* a folga que o frame deixa até à descrição */

	font-size: 20px;
	line-height: 0.7;

	/* Sem `color` de propósito: quem manda é o `.text-gold`, que põe
	   `color: transparent` para o gradiente aparecer pelo recorte do texto.
	   Uma cor aqui tem a mesma especificidade e vence, por vir depois na
	   cascata — foi o que deixava o título cinzento em vez de dourado. */
	text-align: center;
}

/* O botão de "ler mais" é só de telemóvel — o frame de desktop não tem chevron.
   O bloco de mobile mostra-o com `:not([hidden])`. */
.quarto-pop__ler-mais {
	display: none;
}

.quarto-pop__resumo,
.quarto-pop__descricao {
	margin: 0 8.09%; /* 30.37 / 375, a caixa da régua */
	font-family: var(--font-body);
	font-weight: var(--fw-body);
	line-height: normal;
}

.quarto-pop__resumo {
	margin-top: 12px;
	font-size: var(--fs-small);
	text-align: center;
}

.quarto-pop__descricao {
	/* Medido no passo das linhas do nó 4005:9726, que vem em contorno: 19.6px
	   entre linhas, ou seja 16.33 de corpo. É o --fs-body a menos de 0.33. */
	margin-top: 12px;
	font-size: var(--fs-body);

	/* Justificado, como no frame. */
	text-align: justify;
	hyphens: auto;
}

/*
 * A régua e o chevron, nós 4005:10252 e 4005:10253 — a mesma peça que fecha o
 * hero da Sobre Nós em telemóvel, e o mesmo ficheiro de chevron.
 */
.quarto-pop__descricao::after {
	display: block;
	width: 103.97%; /* 315.67 / 303.61 */
	height: 1px;
	margin: 13.9px -2% 0;

	background: currentcolor;
	content: "";
	opacity: 0.35;
}

.quarto-pop__cta {
	/* Nó 4005:10250: 110.67x36.37, e o chevron 31.22 acima dele.

	   `relative` para o chevron, que é o ::before, se ancorar AO BOTÃO. Sem
	   isto ancorava-se ao .quarto-pop__texto, que é o `relative` mais próximo,
	   e aparecia lá em cima ao pé do título. */
	position: relative;
	display: flex;
	width: 110.67px;
	height: 36.37px;
	min-height: 0;
	/* 20.97 e não 39.74: o chevron passou a ser um botão em fluxo entre a régua
	   e este CTA, e leva 8.52 de margem mais 10.25 de altura. 8.52 + 10.25 +
	   20.97 = os 39.74 de antes. */
	margin: 20.97px auto 0;
	padding: 0;

	background: var(--g-gold);
	color: var(--s-text);

	/* Derivado da caixa do nó 4005:10251 (55x10) contra a do "details" da
	   listagem (43x8, 10.794px): 10/8 x 10.794 = 13.49. */
	font-size: 13.49px;
	letter-spacing: 0;
}

/*
 * O chevron do nó 4005:10253, 25.92x10.25. **Não é pista de scroll: é o "ler
 * mais" da descrição**, que o frame mostra cortada a 6 linhas.
 *
 * Passou de `::before` do CTA a botão a sério, e por isso passou a estar no
 * FLUXO, entre a régua e o botão — dentro de uma âncora não podia viver. A
 * margem do CTA desce 8.52 + 10.25 para a geometria ficar na mesma: no desenho
 * o chevron está 8.52 abaixo da régua e 20.97 acima do botão.
 */
.quarto-pop__ler-mais:not([hidden]) {
	display: block;
	width: 25.92px;
	aspect-ratio: 25.92 / 10.25;
	margin: 8.52px auto 0;
	color: var(--s-text);
}

.quarto-pop__ler-mais .ler-mais__glifo {
	mask-image: url("../../img/sobre/chevron-scroll.svg");
}

.quarto-pop__cta:hover,
.quarto-pop__cta:focus-visible {
	background: var(--g-gold);
	color: var(--s-text);
	filter: brightness(1.08);
}

/* ---------- Características ---------- */

/*
 * Em telemóvel é uma fila que rola, com duas caixas à vista e a terceira
 * cortada — nó 4005:10371, uma janela de 353.12 sobre um conteúdo de 461.57.
 */
/*
 * `ul.` e não só a classe: o base.css tem `ul[class] { padding: 0 }`, que é
 * mais específico (0,1,1) que uma classe sozinha (0,1,0) e ganha-lhe venha a
 * ordem que vier. O padding desta fila computava a zero e as caixas
 * encostavam à aresta. É a mesma armadilha do `.reviews` contra
 * `.reviews.section`, registada duas vezes no CLAUDE.md.
 */
/*
 * As caixas são o carrossel do tema. O componente já traz o `overflow-x`, o
 * snap, a barra de scroll escondida e o `flex` — aqui ficam só as medidas do
 * frame. A `<ul>` à mão que estava aqui era o sétimo carrossel do site escrito
 * duas vezes.
 */
.quarto-pop__texto .carousel {
	order: 2;
	margin-top: 39.02px;
}

.quarto-pop__texto .carousel__viewport {
	/* Igual ao `padding-inline`, senão o snap alinha a primeira caixa à borda
	   da janela em vez do início do conteúdo e come o padding — o scrollLeft
	   ficava em 22 sozinho. É a mesma regra que o carrossel do tema já tem. */
	/*
	 * 31.75 e não 21.66: o 21.66 é o `x` da FAIXA (4005:10371), que é o grupo
	 * de recorte, e o 31.75 é o `x` da primeira CAIXA (4005:10344), que é o
	 * que se vê. Com o da faixa a primeira caixa entrava 10.08 a mais.
	 */
	padding-inline: 8.467%; /* 31.75 / 375 */
	scroll-padding-inline: 8.467%;
}

.quarto-pop__texto .carousel__track {
	gap: 7.91px; /* 266.49 - (31.75 + 226.83) */
}

/*
 * O calço da direita. O `padding-inline-end` de um contentor de scroll não
 * conta para o `scrollWidth`: no fim do curso a última caixa ficava encostada
 * à aresta (medido a -0.44), sem a folga que a primeira tem à esquerda. É a
 * mesma armadilha da listagem dos quartos, e a mesma cura.
 *
 * `vw` e não `%`: a percentagem resolve contra a largura do TRACK, que é a do
 * conteúdo, e dava um calço proporcional ao número de caixas. O pop-up ocupa a
 * janela toda em telemóvel, por isso 8.467vw é o mesmo 31.75 do padding.
 */
.quarto-pop__texto .carousel__track::after {
	/* Menos o `gap`: o intervalo do track aplica-se também antes do calço, e
	   sem o descontar a folga ficava em 29.58 em vez de 21.67. */
	flex: 0 0 calc(8.467vw - 7.91px);
	content: "";
}

/*
 * A barra de progresso, nós 4005:10372 (calha, 310.90x7.26 em x 33.76,
 * y 1117.52) e 4005:10373 (cursor, 53.22x9.49 em y 1116.25). O cursor é mais
 * alto que a calha: sobra 1.27 acima e 0.96 abaixo.
 *
 * A largura e a posição do cursor são a fracção do carrossel que está à vista,
 * por isso não há aqui valor de desenho: os 53.22 de 310.90 do frame são os
 * que se veriam com as características que lá estão.
 *
 * O `:not([hidden])` é preciso: o componente esconde a barra pondo `hidden` no
 * elemento quando não há nada para rolar, e um `display` declarado numa classe
 * ganha ao `[hidden]` do browser. É o que a apaga sozinha em desktop.
 *
 * E o selector leva `.quarto-pop`: o sobre-galeria.css declara a
 * `.carousel__progresso` sem prefixo de secção, por isso ela chegava aqui com
 * o desenho da Sobre Nós.
 */
.quarto-pop .carousel__progresso:not([hidden]) {
	position: relative;
	order: 3;

	width: 82.907%;  /* 310.90 / 375 */
	height: 7.26px;

	/* A barra não está centrada no frame: 33.76 à esquerda contra 30.34 à
	   direita. Com `auto` dos dois lados caía 1.71 à esquerda do sítio. */
	margin: 26.58px 0 0 9.003%; /* 1117.52 - 1090.94  |  33.76 / 375 */

	background: var(--s-bg-dark);
}

.quarto-pop .carousel__progresso__cursor {
	top: -1.27px;    /* 1116.25 - 1117.52 */
	height: 9.488px;
	background: var(--g-gold);
}

/*
 * A ORDEM MUDA ENTRE OS DOIS FRAMES. Em telemóvel o botão vem antes das caixas
 * (nós 4005:10250 em y=897 e 4005:10371 em y=949); em desktop é ao contrário
 * (4005:8733 e seguintes em y=226, botão 4005:8694 em y=303).
 *
 * Uma marcação só, e a ordem visual por `order` — o DOM fica na ordem de
 * leitura do desktop, que é a que faz sentido ouvir: o que o quarto tem, e só
 * depois o botão de reservar.
 */
.quarto-pop__texto {
	display: flex;
	flex-direction: column;

	/*
	 * 1141 - 1125.74: do fim da barra de progresso ao fim do frame. Sem ela o
	 * último bloco encostava ao fim do scroll e lia-se como cortado.
	 *
	 * Vai aqui e não no `padding-bottom` da caixa que rola: o padding de um
	 * contentor de scroll não conta para o `scrollHeight` em todos os motores —
	 * foi o que aconteceu com o calço da listagem. O padding de um FILHO conta.
	 */
	padding-bottom: 15.26px;
}

.quarto-pop__cta {
	order: 1;
}


.quarto-caract {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;

	/* Nó 4005:10346: 226.83x118.36, traço de 0.28 no frame de desktop, que à
	   escala da página dá 0.8 — fica em 1. */
	width: 226.83px;
	min-height: 118.36px;
	border: 1px solid var(--s-text-muted);
	scroll-snap-align: start;
}

.quarto-caract__topo {
	display: flex;
	flex: 1 1 auto;
	align-items: flex-end;
	justify-content: space-between;

	/* Ícone em (53.67, 987.28) e número encostado à direita, como nas
	   amenities da página. */
	padding: 14.7px 12px 0 21.92px;
}

.quarto-caract__icone {
	display: block;
}

.quarto-caract__icone svg {
	display: block;

	/* Os ficheiros saem do frame de desktop, que está a 26%: cada um tem o seu
	   tamanho lá dentro e aqui multiplicam-se todos pelo mesmo 3.88. */
	width: auto;
	height: auto;
	transform: scale(3.88);
	transform-origin: bottom left;
}

.quarto-caract__numero {
	/* Nó 4005:10348, Baro LineTwo 48.312px. */
	align-self: flex-start;
	font-family: var(--font-title);
	font-size: 48.312px;
	font-weight: var(--fw-display);
	line-height: 0.7;
}

.quarto-caract__label {
	/* Nó 4005:10350, Gill Sans Medium 15.031px. */
	margin: 0 10px 12px;
	font-family: var(--font-body);
	font-size: 15.031px;
	font-weight: var(--fw-body-strong);
	line-height: normal;
	text-align: center;
	text-transform: uppercase;
}

/* ---------- Rodelas de navegação ---------- */

/*
 * O frame de telemóvel não as tem — só o de desktop. Ficam escondidas aqui: a
 * navegação entre quartos faz-se fechando e abrindo, e em 375 não há canto
 * livre para elas sem tapar a fotografia.
 */
.quarto-pop__nav {
	display: none;
}

/* ============================================================
   Desktop — 1200px e acima
   ============================================================ */


/* ============================================================
   Desktop — 1200px e acima
   ============================================================

   A GEOMETRIA É TODA DO FRAME, EM % DA LARGURA DO MODAL.

   O frame 4005:8631 tem 964x589 e está desenhado a 26% da escala do de
   telemóvel: o corpo do texto lá são 7.47px e as legendas das caixas 3.87px.
   Segui-lo ao pixel dava tipografia ilegível; segui-lo só na proporção e subir
   o corpo é o que aqui está.

   **O mínimo que escolhi para o corpo da letra são 9.872px**, e a razão é que
   é o mais pequeno que este site já usa — as legendas das amenities da página
   em telemóvel (nó 4005:10319), que são exactamente o mesmo papel: rótulo em
   caixa alta por baixo de um ícone. Não inventei um mínimo: fui buscar o menor
   valor já aprovado no projecto. Abaixo disso não desce nada.

   Aplicado por papel, sempre subindo ao valor que o tema já tem para esse
   papel quando o proporcional fica abaixo do mínimo:

     papel            frame    proporcional (x1.3007)   fica em
     legenda           3.87           5.03               9.872   <- o mínimo
     corpo             7.47           9.72              10.776   (descrição do
                                                                  quarto na
                                                                  listagem)
     rótulo do botão   6.91           8.99              10.794   (botão dourado
                                                                  do tema)
     número           12.45          16.19              31.760   (mantém o rácio
                                                                  número/legenda
                                                                  do frame, 3.217)
     título            9.25 de tinta 16.29 de corpo     16.29    (já acima do
                                                                  mínimo)

   O rácio número/legenda de 3.217 é o mesmo do frame E das caixas das
   amenities da página (35.484 / 11.034 = 3.216). É uma relação do desenho, não
   uma coincidência, e por isso segue a legenda em vez de escalar sozinho.

   **As caixas crescem, e é a única coisa fora da proporção.** Com a legenda a
   9.872 o texto não cabe nos 6.063% do frame. Passam a repartir a largura toda
   da coluna — no frame elas ocupam só 78% dela e deixam ~50px vazios à direita.
   A PROPORÇÃO larg/alt do frame (1.916) fica como mínimo; a altura cresce
   quando a legenda parte em duas linhas.

   ------------------------------------------------------------
   Medidas do frame, em % da largura do modal (964):

     bloco da fotografia    x 14.007%  y  7.982%   379.84x254.30 -> 39.402% x 26.380%
     caixa do SVG da moldura   é o bloco + 29.06/29.13 à esquerda/cima
     coluna de texto        x 63.443%  larg 23.859%
     título                 y  8.488%
     resumo                 y 10.381%
     descrição              y 12.144%
     caixas                 x 63.496%  y 23.499%   58.45x30.50, intervalo 2.04
     botão                  y 31.487%  68.51x14.58
     faixa das miniaturas   x  6.638%  y 41.081%   838.76x138.73
     rodelas                x 88.693%  y  4.772%   18.5
   ============================================================ */

@media (min-width: 1200px) {
	.quarto-pop {
		width: var(--container);
		max-height: calc(100vh - var(--sp-16));
	}

	/*
	 * O palco. `aspect-ratio` do frame e tudo lá dentro em percentagem dele,
	 * como nos perks e no hero da Sobre Nós: assim a composição escala como um
	 * todo em vez de se descolar.
	 *
	 * A coluna de texto é a excepção — tem `height: auto` e corre para baixo,
	 * porque a descrição é campo do cliente e não tem altura previsível. Se
	 * passar o palco, a caixa rola.
	 */
	.quarto-pop__caixa {
		display: block;
		aspect-ratio: 964 / 589;
		padding: 0;
	}

	/* ---------- Fotografia e moldura ---------- */

	/*
	 * A `.quarto-pop__foto` é a caixa do SVG INTEIRA — os dois quadrados dos
	 * cantos fazem parte do desenho e do recorte, não podem ficar de fora.
	 *
	 * Do bloco do rectângulo, medido na tinta do export:
	 *
	 *   aresta esquerda (y=200)   mármore até x=134, tinta de 135
	 *   aresta direita  (y=200)   tinta até x=514, mármore de 515
	 *   aresta de cima  (x=300)   mármore até y=76, tinta de 77
	 *   aresta de baixo (x=300)   tinta até y=331, mármore de 332
	 *
	 *   -> x 135.03..514.87  y 76.95..331.25  = 379.84 x 254.30
	 *
	 * Esse bloco está em (29.06, 29.13) da caixa do SVG, logo a caixa começa em
	 * (105.97, 47.82) e mede 436.74 x 310.95.
	 */
	.quarto-pop__foto {
		position: absolute;
		/* Os `top` vão em % da ALTURA do palco (589) e os `left` em % da
		   largura (964): uma percentagem vertical resolve contra a altura do
		   bloco de contenção, e com /964 a fotografia caía 30px acima. */
		top: 8.119%;    /* 47.82 / 589 */
		left: 10.993%;  /* 105.97 / 964 */

		width: 45.305%; /* 436.74 / 964 */
		height: auto;
		margin: 0;
		aspect-ratio: 436.74 / 310.95;
	}

	.quarto-pop__foto img {
		/* Caminho de desktop, caixa 436.74 x 310.95. */
		clip-path: polygon(
			92.548% 87.556%,
			92.548% 10.881%,
			8.862% 10.881%,
			8.862% 1.513%,
			1.077% 1.513%,
			1.077% 12.444%,
			7.731% 12.444%,
			7.731% 89.637%,
			91.138% 89.637%,
			91.138% 98.487%,
			98.923% 98.487%,
			98.923% 87.556%
		);
	}

	/* A moldura por cima, na mesma caixa. */
	.quarto-pop__foto::after {
		inset: 0;
		width: auto;
		height: auto;

		background-image: url("../../img/quartos/moldura-foto.svg");
	}

	/* ---------- Coluna de texto ---------- */

	.quarto-pop__texto {
		position: absolute;
		top: 13.891%;   /* 81.82 / 589 */
		left: 63.443%;  /* 611.59 / 964 */
		width: 23.859%; /* 230 / 964 */

		display: block;

		/* A folga de 15.26 é do fim do frame de telemóvel. Aqui a coluna é um
		   absoluto dentro do palco e o fim dela não é o fim de nada. */
		padding-bottom: 0;
	}

	.quarto-pop__titulo {
		margin: 0;

		/* A tinta do título no frame tem 9.25 de altura, ou 0.960% do modal.
		   Em Baro LineTwo a tinta é 0.7208 do corpo, logo 16.29px a 1223. */
		font-size: 16.29px;
		line-height: 0.7;

		/*
		 * O `.text-gold` recorta o gradiente à caixa de FUNDO, e com a linha a
		 * 0.7 a tinta ficava por fora dela: media 115..133 com a caixa solta e
		 * 115..131 com esta, ou seja perdiam-se 2px em baixo. O padding alarga
		 * a caixa de fundo e a margem devolve a posição — o layout não mexe.
		 */
		padding-block: 3px;
		margin-block: -3px;

		/*
		 * O `top` do nó é o topo da TINTA, não o da caixa de linha — é a regra
		 * que já vale para o título das FAQs e para as etiquetas dos perks.
		 * Medido: com a coluna ancorada em 81.82 a tinta caía em 88.0, 6.2
		 * abaixo. Sobe por `position: relative`, para o resumo e a descrição
		 * não virem atrás.
		 *
		 * Em `em` e não em px: acompanha o corpo se ele mudar. 6.2 px do frame
		 * = 8.06 no site = 0.495 do corpo de 16.29.
		 */
		position: relative;
		top: -0.495em;
		text-align: left;
	}

	.quarto-pop__resumo,
	.quarto-pop__descricao {
		margin-inline: 0;
		text-align: left;

		/* Proporcional dava 9.72, abaixo do mínimo: sobe ao corpo que a
		   descrição do quarto já usa na listagem. */
		font-size: 10.776px;
	}

	/* O Frame 48 tem `gap: 9px` entre os três blocos. Em percentagem da largura
	   da coluna, que é contra o que uma margem resolve: 9 / 230. */
	.quarto-pop__resumo {
		margin-top: 3.913%;
	}

	.quarto-pop__descricao {
		margin-top: 3.913%;
		hyphens: none;
	}

	.quarto-pop__descricao::after {
		display: none;
	}

	/* ---------- Caixas ---------- */

	/*
	 * Repartem a largura da coluna, com o intervalo do frame (2.04 de 58.45,
	 * ou seja 3.49% da caixa). No frame ficam 50px por usar à direita da
	 * terceira; aqui não, porque a legenda a 9.872 precisa deles.
	 */
	/*
	 * A GRELHA DE DUAS LINHAS, que é o que muda em desktop: a janela deixa de
	 * rolar (`overflow: visible`) e o track passa a envolver. As seis caixas
	 * ficam três por linha, como no frame de desktop.
	 *
	 * O `order` não entra aqui: a coluna volta a `display: block` e a ordem é a
	 * do DOM, que já é a de desktop — caixas e só depois o botão.
	 */
	.quarto-pop__texto .carousel {
		margin-top: 5.126%; /* 11.79 / 230 */
	}

	.quarto-pop__texto .carousel__viewport {
		overflow: visible;
		padding-inline: 0;
	}

	.quarto-pop__texto .carousel__track {
		flex-wrap: wrap;
		gap: 0.887%; /* 2.04 / 230 */
	}

	/* O calço é de telemóvel. Aqui o track envolve, e um item a mais ocupava
	   uma casa da grelha. */
	.quarto-pop__texto .carousel__track::after {
		display: none;
	}

	/*
	 * A barra de progresso não existe em desktop: o frame 4005:8631 não a tem,
	 * e sem nada para rolar ela não indicaria coisa nenhuma. O componente já a
	 * esconde sozinho — isto é o mesmo em CSS, para o caso de o JS não correr.
	 *
	 * Tem de repetir o `:not([hidden])`: o bloco de telemóvel usa-o e uma media
	 * query não acrescenta especificidade.
	 */
	.quarto-pop .carousel__progresso:not([hidden]) {
		display: none;
	}

	.quarto-pop__cta {
		order: 2;
	}

	.quarto-caract {
		/* Três por linha, a repartir a coluna. */
		width: calc((100% - 2 * 0.887%) / 3);
		min-width: 0;

		/*
		 * A PROPORÇÃO do frame (1.916) como piso, não como lei: com a legenda
		 * a 9.872 há rótulos que partem em duas linhas e a caixa tem de dar
		 * espaço. `aspect-ratio` com `height: auto` dá a altura proporcional
		 * quando o conteúdo cabe e deixa-a crescer quando não cabe.
		 */
		height: auto;
		min-height: 0;
		aspect-ratio: 58.45 / 30.50;
		border: 1px solid var(--s-text-muted);
	}

	/*
	 * Tudo em % da LARGURA da caixa, incluindo o que no nó é vertical: padding
	 * e margem em percentagem resolvem sempre contra a largura.
	 *
	 *   ícone   x 5.65 de 58.45 -> 9.667%   topo 3.79 -> 6.484%
	 *   número  direita 5.28    -> 9.033%   topo 0.84 -> 1.437%
	 *   rótulo  base 3.50       -> 5.988%
	 */
	.quarto-caract__topo {
		align-items: flex-start;
		padding: 1.437% 9.033% 0 9.667%;
	}

	.quarto-caract__icone {
		/* 23.40% da largura da caixa; o ícone guarda o seu próprio rácio. */
		width: 23.40%;
		margin-top: 5.047%; /* 6.484% - 1.437% */
		margin-bottom: 0;
		transform: none;
	}

	.quarto-caract__icone svg {
		width: 100%;
		height: auto;

		/* O bloco de telemóvel escala o SVG 3.88x; aqui quem manda é a largura
		   do <span>. Sem desfazer isto o ícone saía 4x maior — medido, 54.41
		   contra os 13.68 do nó. */
		transform: none;
	}

	.quarto-caract__numero {
		align-self: flex-start;
		margin-top: 0;

		/*
		 * PROPORCIONAL, não escalado com a legenda: os 12.45 do frame dão
		 * 16.19 a 1223, que já está acima do mínimo de 9.872 e por isso não
		 * sobe. Só sobe o que ficaria ilegível.
		 *
		 * Custo assumido: no frame o número é 3.217x a legenda e aqui fica
		 * 1.64x, porque a legenda teve de subir 2.551x e o número não. As
		 * caixas perdem parte do contraste "número grande, rótulo pequeno".
		 * Ver "Decisões assumidas".
		 */
		font-size: 16.19px;
		line-height: 0.7;
	}

	.quarto-caract__label {
		/* No frame começa a 20.89% e tem 61.6% de largura: está centrada. */
		margin: 0 4% 5.988%;
		font-size: 9.872px;
	}

	/* ---------- Botão ---------- */

	/*
	 * O botão fica no FLUXO da coluna, a seguir às caixas — não em posição
	 * absoluta. A coluna corre para baixo porque a descrição é campo do
	 * cliente, e um absoluto ancorado ao palco desalinhava-se dela.
	 * Intervalo do nó: 12.55 de 230.
	 */
	.quarto-pop__cta {
		position: relative;
		width: 29.797%;   /* 68.51 / 230 */
		height: auto;
		min-height: 0;
		margin: 5.457% 0 0;
		padding: 0.35em 0;

		/* Proporcional dava 8.99: sobe ao corpo do botão dourado do tema. */
		font-size: 10.794px;
	}

	/* O "ler mais" é de telemóvel; o frame de desktop não tem chevron. */
	.quarto-pop__ler-mais:not([hidden]) {
		display: none;
	}

	/* ---------- Faixa das miniaturas ---------- */

	.quarto-pop__media {
		display: contents;
	}

	.quarto-pop__media .carousel {
		position: absolute;
		top: 67.236%;   /* 396.02 / 589 */
		left: 6.638%;   /* 63.99 / 964 */

		width: 87.010%;  /* 838.76 / 964 */
		height: 23.554%; /* 138.73 / 589 */
		margin: 0;
		padding: 0;

		display: flex;
		align-items: center;
		background: var(--s-bg-petrol-soft);
	}

	.quarto-pop__media .carousel__viewport {
		/* O Frame 50 dentro da faixa: 72 de 63.99, ou seja 0.96% para dentro,
		   e as setas ocupam os 39 que sobram de cada lado. */
		width: 100%;
		padding-inline: 5.607%; /* (111 - 63.99) / 838.76 */
	}

	.quarto-pop__media .carousel__track {
		gap: 0.835%; /* 7 / 838.76 */
	}

	.quarto-pop__mini {
		width: calc((100% - 4 * 0.835%) / 5);
		min-width: 0;
	}

	.quarto-pop__mini-btn {
		/* Nó 4005:8700: 143.50x129.99. */
		aspect-ratio: 143.5 / 129.99;
	}

	.quarto-pop__media .carousel__controls {
		display: contents;
	}

	.quarto-pop__media .carousel__btn {
		position: absolute;
		top: 50%;

		/* Nó 4005:8698: 31x112 na faixa de 838.76x138.73. */
		width: 3.696%;
		height: 80.732%;

		/* `translateY` e não `margin-top: -50%`: uma margem em percentagem
		   resolve contra a LARGURA do bloco de contenção, e -50% da faixa dava
		   -532px. */
		transform: translateY(-50%);
		padding: 0;
		border: 0;

		background: url("../../img/quartos/seta-miniaturas.svg") no-repeat center / contain;
	}

	.quarto-pop__media .carousel__btn [aria-hidden="true"] {
		display: none;
	}

	.quarto-pop__media .carousel__btn--prev {
		left: 0.954%; /* 8 / 838.76 */
	}

	.quarto-pop__media .carousel__btn--next {
		right: 0.954%;
		transform: translateY(-50%) scaleX(-1);
	}

	/*
	 * Desactivada a 60% e não aos 35% do componente: sobre a faixa petrol-soft
	 * os 35% davam #C7C6BC, medido, que é 0.35 x #EFC394 + 0.65 x #B2C8D1 — um
	 * traço cinzento em vez de um chevron dourado. Mesma correcção da barra de
	 * avançar dos socials.
	 */
	.quarto-pop__media .carousel__btn[disabled] {
		opacity: 0.6;
	}

	/* ---------- Rodelas e fecho ---------- */

	/*
	 * As duas rodelas, nós 4005:9100 e 4005:9097: 18.5x18.5 em 855 e 884.83,
	 * logo o grupo tem 48.33 e o intervalo 11.33.
	 *
	 * A largura do grupo é declarada e o intervalo sai do `space-between`: um
	 * `gap` em percentagem resolveria contra a largura do próprio grupo, que é
	 * automática, e dava zero — as rodelas ficavam encostadas.
	 */
	.quarto-pop__nav {
		position: absolute;
		top: 7.810%;    /* 46 / 589 */
		right: 6.293%;  /* (964 - 903.33) / 964 */

		display: flex;
		justify-content: space-between;
		width: 5.014%;  /* 48.33 / 964 */
	}

	.quarto-pop__nav-btn {
		width: 38.28%;  /* 18.5 / 48.33 */
		height: auto;
		aspect-ratio: 1;
		padding: 0;
		border: 0;

		background: no-repeat center / contain;
		cursor: pointer;
	}

	.quarto-pop__nav-btn--prev {
		background-image: url("../../img/quartos/circulo-anterior.svg");
	}

	.quarto-pop__nav-btn--next {
		background-image: url("../../img/quartos/circulo-seguinte.svg");
	}

	.quarto-pop__nav-btn:hover,
	.quarto-pop__nav-btn:focus-visible {
		filter: brightness(1.15);
	}
}