/*
 * Vinci Hair Clinic — versão mobile.
 *
 * Frame do Figma: "Vinci Landing Page Manchester (UK) - Mobile", 390x18643
 * (1259:9452).
 *
 * Este arquivo carrega DEPOIS do style.css e contém apenas blocos
 * @media (max-width: …). Nada aqui alcança o desktop: apagar este arquivo
 * devolve a página exatamente ao desenho aprovado de 1440px.
 *
 * Recuo lateral do mobile: 20px (conteúdo de 350px em 390px).
 */

@media (max-width: 1023px) {

	/* ==================================================================
	   1. BASE
	   ================================================================== */

	:root {
		/* No desktop este token resolve 112px; aqui, 20px. */
		--pad-x: 20px;
		--content-w: 350px;
	}

	/* A barra do topo continua fixa; o menu do hero passa a acompanhá-la.

	   O recuo de baixo é o lugar da barra de CTA, que aqui é fixa: sem ele o
	   documento encolheria 80px e a barra cobriria o fim do rodapé. */
	.v-page {
		padding-top: 38px;
		padding-bottom: 80px;
	}

	[id] {
		scroll-margin-top: 102px;
	}

	/* ==================================================================
	   2. BARRA DO TOPO  (Figma 1259:10767, 390x38)
	   ================================================================== */

	/*
	 * O desenho do Manchester repete o endereço inteiro nas duas larguras —
	 * 298px de texto cabem nos 390px da tela. A troca continua existindo
	 * porque a barra corta o que passa (overflow: hidden) e o endereço de
	 * outra cidade pode ser mais longo: quem clonar preenche o campo curto
	 * no Customizer e a troca volta a valer, sem tocar em CSS.
	 */
	.topbar__address--wide {
		display: none;
	}

	.topbar__address--narrow {
		display: inline;
	}

	/* ==================================================================
	   3. HERO  (Figma 1259:9454, 390x660)
	   ================================================================== */

	/* Fundo preto, ao contrário do branco do desktop (1259:9454). Só aparece
	   nos cantos que a foto não alcança em telas mais estreitas que 390. */
	.hero {
		height: 660px;
		background: #000;
	}

	/* A arte do mobile tem 846x690 e entra em tamanho natural: o Figma ancora
	   o x 155 dela no zero do hero e o y 29 acima do topo, de modo que a tela
	   de 390x660 mostra a fatia x155..545 / y29..689.

	   Enquadramento idêntico ao da landing page anterior — é o único pedaço
	   do hero que o Manchester não mudou —, por isso o arquivo pré-recortado
	   `01-vinci-6-ret1-5-mobile.webp` (1692x1380 = 846x690 @2x) continua
	   servindo, com `object-fit: fill` — que já ignora o object-position com
	   que o desktop recorta a foto grande. */
	.hero__bg {
		inset: 0;
		overflow: hidden;
	}

	.hero__bg picture {
		display: block;
	}

	.hero__bg img {
		position: absolute;
		top: -29px;
		left: -155px;
		width: 846px;
		height: 690px;
		max-width: none;
		object-fit: fill;
	}

	/* -- cabeçalho: só o logo e o botão dourado ------------------------
	   1259:9499 — 350x40 @(20,24), com o logo de um lado e o botão do outro.
	   O Figma mobile não tem links, telefone, hambúrguer nem gaveta. */

	/* No mobile só a barra de endereço fica fixa. O cabeçalho volta para
	   dentro do hero e rola junto com ele, como no Figma. */
	.hero__header {
		position: absolute;
		top: 0;
		z-index: 2;
		height: 88px;
		padding-inline: 20px;
		padding-top: 24px;
		align-items: flex-start;
	}

	/* Rolando, não há mais barra flutuando: o fundo escuro não faz sentido. */
	.hero__header.is-stuck {
		background: none;
		box-shadow: none;
	}

	/* Os seis links e o telefone somem inteiros — não viram gaveta. */
	.hero__nav {
		display: none;
	}

	/* Sem os links, a faixa da direita fica com os 40 do botão, que é o que
	   alinha o topo dela com o do logotipo. */
	.hero__actions {
		height: 40px;
		gap: 0;
	}

	/* -- conteúdo do hero ----------------------------------------------
	   1259:9458 — 350x468 @(20,128). */

	.hero__copy {
		top: 128px;
		left: 20px;
		right: 20px;
		width: auto;
	}

	/* 40/44 em três linhas, contra 72/79.2 do desktop. */
	.hero__title {
		font-size: 40px;
		line-height: 44px;
	}

	/* 1259:9473 — moldura FIXED com clip: a faixa de 586 continua inteira e a
	   janela mostra só o começo dela, então o terceiro selo e parte do segundo
	   ficam cortados à direita. É o desenho, não um acidente.

	   A largura vai em 100% e não nos 350 do Figma porque a coluna já é
	   `left/right: 20px`: assim o corte cai no mesmo lugar em telas de 360 ou
	   414, e não sobra nem falta faixa.

	   O `order` é a outra metade: no Figma mobile os selos vêm ANTES da régua,
	   e é a régua que fecha o bloco. O HTML segue a ordem do desktop
	   (aprovado) e a troca acontece só aqui. */
	/* 36 = os 32 da faixa + 4 de folga em cima para o ícone subir no hover
	   sem ser cortado; a margem cai para 20 e a faixa fica no mesmo lugar. */
	.hero__badges-clip {
		order: 1;
		display: block;
		width: 100%;
		height: 36px;
		margin-top: 20px;
		padding-top: 4px;
		overflow: hidden;
	}

	.hero__rule {
		order: 2;
		margin-top: 24px;
	}

	.hero__badges-row {
		margin-top: 0;
	}

	/* O laço dos selos é o mesmo do desktop e mora no style.css (bloco 23). A
	   janela daqui continua sendo caixa com clip mesmo sem movimento: a faixa
	   de 586 é cortada em 350, como no Figma. */

	/* 1259:9488 — empilhados e com largura total. No mobile os dois são a
	   variante Medium do DS (3044:9917 e 3044:9923): 40 de altura, rótulo
	   14/19.6 e recuo 16, contra o Large do desktop. */
	.hero__cta-row {
		flex-direction: column;
		gap: 16px;
		width: 100%;
		margin-top: 40px;
	}

	.hero__cta-row .btn {
		width: 100%;
		height: 40px;
		padding-inline: 16px;
		font-size: 14px;
		line-height: 19.6px;
	}

	/* ==================================================================
	   4. FORMULÁRIO  (Figma 1259:9743, 390x861)
	   ================================================================== */

	/* Sai de cima do hero e vira seção, com rótulo e título — é como o Figma
	   o desenha no mobile. */
	.formsec {
		position: static;
		width: auto;
		padding: 64px 20px;
		/* Virando seção, ela ganha o creme de fundo do Figma — no desktop o
		   cartão flutua sobre a foto e não tem fundo próprio. */
		background: var(--c-cream-50);
	}

	/* 1259:9744 — 350x141, e 40 de vão até o cartão. */
	.formsec__header {
		display: block;
		margin-bottom: 40px;
		text-align: center;
	}

	/* 1259:9746 — caixa de 29 = 4 de recuo em cima mais os 25.2 da entrelinha.
	   O recuo é do próprio nó do Figma, não um ajuste ótico. */
	.formsec__label {
		height: 29px;
		padding-top: 4px;
		font-size: 18px;
		line-height: 25.2px;
		font-weight: 600;
		color: var(--c-brown-mid);
	}

	.formsec__title {
		margin-top: 24px;
		font-size: 40px;
		line-height: 44px;
		font-weight: 600;
		/* Preto, como os demais títulos de seção. */
		color: #000;
	}

	/* 1259:9753 — o cartão ocupa a largura toda e o recuo de baixo cai de 48
	   para 32, ficando igual nos quatro lados.

	   Precisa de .formsec junto: a folha do plugin entra depois desta e
	   venceria um .vform solto. */
	.formsec .vform {
		width: 100%;
		padding: 32px;
	}

	/* 1259:9765 — "STEP 1 OF 4" é preto no mobile e cinza no desktop. */
	.formsec .vform__step-label {
		color: #000;
	}

	/* 1259:9777 e 1259:9784 — o traço dos campos é #00000029 no mobile,
	   contra o #F8F8F5 do desktop; e o texto de instrução, #D9D9D9 contra
	   #D6D1CA. Vale para todos os campos do cartão, não só para os dois
	   selects do passo 1, senão os passos seguintes ficariam com duas bordas
	   diferentes na mesma tela. */
	.formsec .vform__input,
	.formsec .vform__select select,
	.formsec .vform__phone,
	.formsec .vform__date {
		border-color: rgba(0, 0, 0, 0.16);
	}

	.formsec .vform__select select:invalid,
	.formsec .vform__select select.is-empty {
		color: #D9D9D9;
	}

	/* A nota de privacidade existe no cartão do desktop (1286:9932) e não no
	   do mobile: o cartão de 1259:9753 termina no botão "Continue". Sai só a
	   do passo 1 — daí a classe própria no markup do plugin; nos passos 2 a 4
	   ela continua nas duas larguras. */
	.formsec .vform__foot--1 {
		display: none;
	}

	/* ==================================================================
	   5. SELOS DE ACREDITAÇÃO  (Figma 1259:9790, 390x320)
	   ================================================================== */

	/* 64 + 56 (frase em duas linhas) + 40 + 96 (selos) + 64 = 320.
	   O recuo lateral cai a zero: a faixa de selos é full-bleed e o corte na
	   borda direita é justamente o que mostra que ela continua. */
	.trust {
		height: auto;
		padding: 64px 0;
	}

	/* A seção "Experiencias de pacientes" só existe aqui. */
	.pexp {
		display: block;
	}

	/* Os vídeos do cabeçalho dos depoimentos moram nela no mobile. */
	.tsm__videos {
		display: none;
	}

	/* Some o wrapper intermediário do desktop: aqui a seção fala direto com os
	   dois filhos, o gap cai de 64 para 40 e o recuo lateral some. */
	.trust__content {
		gap: 40px;
		padding-inline: 0;
	}

	/* Tipografia idêntica ao desktop (20/28/600/#000) — não encolhe. As duas
	   linhas x 28 fecham os 56px, e a quebra é o <br class="br--narrow"> do
	   template: no Figma ela é manual, não é wrap de largura. */
	.trust__heading {
		width: 100%;
	}

	/* Janela de 390px: o trilho mede 699 e o resto fica de fora. */
	.trust__logos {
		width: 100%;
	}

	/* A fileira corre em laço, como no desktop — o cliente pediu o movimento
	   nas duas larguras (o Figma traz interactions: [] em todos os nós da
	   seção, ou seja, o desenho não decide isto).

	   O `overflow-x: auto` saiu: rolagem por swipe e animação disputariam a
	   mesma posição, e o trilho voltaria sozinho para onde o dedo o tirou. O
	   véu da direita continua, agora disfarçando a entrada da cópia. */
	.trust__row {
		width: max-content;
		justify-content: start;
	}

	/* 211 + 16 + 120 + 16 + 158 + 16 + 162 = 699. Aqui a célula é HUG: quem
	   manda na largura é o desenho mais o recuo, não uma caixa de 200. */
	.trust__cell {
		width: max-content;
		padding: 8px 20px;
	}

	/* Recuo de borda da faixa full-bleed: 40px só no primeiro selo. */
	.trust__cell--first {
		padding-left: 40px;
	}

	/* FCA e ISHRS são do frame desktop; ESHRS e Royal College entram no lugar
	   deles aqui. Ver o docblock de trust-badges.php: é o Figma que troca o
	   conjunto por largura, não uma decisão de implementação. */
	.trust__cell--wide {
		display: none;
	}

	.trust__cell--narrow {
		display: flex;
	}

	/*
	 * O passo do laço aqui é outro: no celular os selos são ESHRS e Royal
	 * College no lugar de FCA e ISHRS, e o conjunto mede 699 em vez de 848.
	 * 699 + 16 do vão até a cópia = 715.
	 */
	@media (prefers-reduced-motion: no-preference) {

		@keyframes vinci-trust {
			to {
				transform: translate3d(-715px, 0, 0);
			}
		}

		.trust__row {
			animation-duration: 26s;
		}
	}

	/* Véu que disfarça o corte: 96x96 colado na direita, do transparente até o
	   creme do fundo. Mora no wrapper, não no trilho, para não rolar junto com
	   os selos. */
	.trust__logos::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: 96px;
		height: 96px;
		background: linear-gradient(90deg, rgba(241, 233, 221, 0) 0%, var(--c-cream) 100%);
		pointer-events: none;
	}

	/* ==================================================================
	   5b. TIPOGRAFIA DO MOBILE

	   No Figma todo título de seção cai de 64/70.4 (e 72/79.2 no simulador)
	   para 40/44, e os rótulos acima deles ocupam 13px de mancha em vez dos
	   18px da entrelinha. Sem isto o texto sai com quase o dobro do tamanho.
	   ================================================================== */

	.sec-title,
	.hairline__title,
	.locations__title,
	.doctor__title,
	.awards__title,
	.tsm__title,
	.tsm__subtitle-title,
	.faq__title {
		font-size: 40px;
		line-height: 44px;
	}

	/* Os números grandes de preços acompanham. */
	.pstat__value {
		font-size: 40px;
		line-height: 44px;
	}


	/* Rótulo de seção: 13px de mancha, como no Figma. */
	.sec-label {
		height: 13px;
		line-height: 18px;
	}

	/* ==================================================================
	   5c. ALTURAS FIXAS DO DESKTOP

	   O desktop trava a altura de quase todo contêiner no valor do Figma de
	   1440px. No mobile o conteúdo é outro e precisa mandar na altura — sem
	   zerar isto, o bloco recorta o que estiver sobrando (era o que segurava
	   o rodapé em 616px quando o conteúdo dele soma 1180).
	   ================================================================== */

	.ftr__row,
	.ftr__col--menu,
	.ftr__col--contact,
	.doctor__row,
	.doctor__bio,
	.tsm__header,
	.tsm__header-left,
	.awards__top,
	.locations__track,
	.pricing__photo img {
		height: auto;
	}

	/* Estas o Figma redimensiona em vez de soltar. */
	.doctor__photo-group {
		height: 462px;
	}

	.ftr__brand {
		height: 316px;
	}

	/* ==================================================================
	   5d. LARGURAS FIXAS DO DESKTOP

	   Mesma história das alturas: o desktop trava larguras no valor do frame
	   de 1440px. Aqui elas precisam caber em 350, senão o texto quebra em
	   menos linhas do que o Figma mobile e a seção encolhe.
	   ================================================================== */

	.hairline__title-block,
	.results__heading,
	.locations__title,
	.doctor__bio,
	.doctor__heading,
	.tsm__header-left,
	.tsm__title,
	.ftr__brand,
	.ftr__columns,
	.ftr__copy,
	.financing__text,
	.pricing__text,
	.pricing__divider-line,
	.awards__card-text,
	.awards__handle-card,
	.awards__handle-info,
	.awards__global-inner,
	.awards__figures-inner,
	.awards__figure,
	.faq__header {
		width: 100%;
	}

	.awards__mosaic {
		width: 100%;
		max-width: 100%;
	}

	/* O mapa acompanha a célula: 350 de largura, altura pela proporção, e
	   começa 145 abaixo do topo — o Figma deixa o resto para fora. */
	.awards__map {
		width: 100%;
		max-width: 100%;
		height: auto;
		top: 145px;
	}

	/* Os blocos de texto do mosaico ficam a 24px da borda da célula nos dois
	   lados — 302 numa célula de 350. Com 100% eles escapavam da célula e a
	   descrição parava de quebrar onde o Figma quebra. */
	.awards__card-text,
	.awards__handle-card,
	.awards__global-inner,
	.awards__figures-inner {
		width: calc(100% - 48px);
	}

	/* A altura vinha travada do desktop e cortava a quarta linha. */
	.awards__card-text {
		height: auto;
	}

	/* Os dois logotipos descem: no Figma mobile a célula é mais alta e eles
	   ficam a 24 da base, não colados no texto. */
	.awards__logo-lux {
		top: 172px;
	}

	.awards__logo-vinci {
		top: 203px;
	}

	/* Abaixo de 360 a frase do prêmio quebra em cinco linhas e alcança os
	   logotipos, que são absolutos. A célula passa a fluir: texto em cima,
	   os dois logos lado a lado embaixo, menores. */
	@media (max-width: 359px) {
		.awards__cell--award {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 24px 16px;
			height: auto !important;
			padding: 34.5px 24px 24px;
		}

		.awards__cell--award .awards__card-text {
			position: static;
			width: 100%;
		}

		.awards__logo-lux,
		.awards__logo-vinci {
			position: static;
			height: auto;
		}

		.awards__logo-lux {
			width: 96px;
		}

		.awards__logo-vinci {
			width: 110px;
		}
	}

	/* ==================================================================
	   6. RESULTADOS  (Figma 1259:9791, 390x2787)
	   ================================================================== */

	.results {
		height: auto;
		padding: 64px 20px;
		gap: 40px;
	}

	/* O cartão de certificado não existe no desenho de 390px. */
	.results__cert {
		display: none;
	}

	/* Sem ele, a linha do cabeçalho fica com um filho só e volta a ser bloco. */
	.results__header {
		display: block;
	}

	.results__intro {
		width: 100%;
	}

	/* Aqui o rótulo vem dentro de um wrapper de 29px com 4px de recuo em cima
	   (1259:9798 sobre o TEXT 1259:9802, de 25). No desktop é TEXT puro. */
	.results .sec-label {
		height: 29px;
		padding-top: 4px;
	}

	/* O H2 do mobile é outro texto, não o mesmo em outro corpo. */
	.results__title--wide {
		display: none;
	}

	.results__title--narrow {
		display: block;
	}

	/* --- composição da galeria (1259:9806) -----------------------------
	   Não é o desktop empilhado: é uma coluna de 6 blocos — cartão grande,
	   par, par, cartão grande, par, par — com 16 entre todos.

	   Uma grade de 2 colunas reproduz isso sozinha: os .results__row viram
	   display:contents para os dez cartões virarem itens da mesma grade, os
	   dois grandes ocupam a linha inteira e o resto se acomoda em pares na
	   ordem do HTML. A ordem do mobile é a do desktop com um único cartão
	   fora de lugar — daí uma regra de `order`, não dez. */
	.results__grid {
		display: grid;
		/* minmax(0,…) impede o cartão de esticar a coluna além dos 350px. */
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		width: 100%;
	}

	.results__row {
		display: contents;
	}

	/* Único deslocamento: no desktop o Scott é o 3º cartão; aqui abre a
	   galeria. Os outros nove mantêm a ordem em que estão no HTML. */
	.rcard--scott {
		order: -1;
	}

	.rcard--scott,
	.rcard--daniel {
		grid-column: 1 / -1;
	}

	/* O traço do cartão muda de cor entre as duas larguras: #F8F8F5 no
	   desktop, #00000029 aqui. */
	.rcard {
		width: 100%;
		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.161);
	}

	/* A foto é sempre quadrada e da largura do conteúdo: 326 no cartão
	   grande, 151 no compacto. O raio continua 12 — o 16 é do cartão. */
	.rcard__img {
		width: 100%;
		height: auto;
		aspect-ratio: 1;
		/* O compacto tem altura travada em 253; sem isto o flex encolheria a
		   foto para caber os décimos da entrelinha e ela deixaria de ser
		   quadrada. Quem cede é o corpo, que tem folga. */
		flex: none;
	}

	/* --- cartão grande: 350x553 (3070:12136 e 3070:12179) ---------------
	   12 + foto 326 + 24 + corpo 167 + 24. Só Scott e Daniel mantêm nome e
	   descrição no Figma mobile; os outros oito viram compactos. */

	/* imageTransform [[1,0,0],[0,0.74968,0.10632]]: estes dois recortam a
	   partir de 10,63% da altura da origem, não dos 12,36% do resto. */
	.rcard--scott .rcard__img img,
	.rcard--daniel .rcard__img img {
		object-position: center 42.6%;
	}

	/* O corpo é 12px mais estreito que a foto de cada lado — 302 em 326. */
	.rcard--scott .rcard__body,
	.rcard--daniel .rcard__body {
		width: calc(100% - 24px);
	}

	/* Aqui o caption É flex (column, gap 16) e não tem os offsets de +3/−4,5
	   do desktop: 28 + 16 + 50 = 94. A divisória é a "Line 64", que no Figma
	   tem altura 0 e fica 24 abaixo do caption — como aqui ela é a borda de
	   baixo do bloco, 23 de recuo + 1 de borda dão os mesmos 24. */
	.rcard--scott .rcard__info,
	.rcard--daniel .rcard__info {
		display: flex;
		flex-direction: column;
		gap: 16px;
		height: auto;
		padding-bottom: 23px;
		border-bottom-color: rgba(0, 0, 0, 0.161);
	}

	.rcard--scott .rcard__name,
	.rcard--daniel .rcard__name,
	.rcard--scott .rcard__desc,
	.rcard--daniel .rcard__desc {
		width: 100%;
		margin-top: 0;
		margin-left: 0;
	}

	/* --- cartão compacto: 167x253 (3070:12161) --------------------------
	   8 + foto 151 + 8 + corpo 78 + 8.

	   min-height, e não height: a conta fecha em 253 EXATOS, sem um pixel de
	   folga. Num aparelho de verdade basta a fonte do tema ainda não ter
	   carregado, o sistema estar com o texto aumentado ou "3.464 Grafts"
	   quebrar em duas linhas para o corpo crescer — e, com altura travada, o
	   texto passava por baixo do traço do cartão, que é o que parecia uma
	   borda cortada. Com min-height o cartão cresce e o traço acompanha; onde
	   cabe, o desenho continua com os 253 do Figma. */
	.rcard:not(.rcard--scott):not(.rcard--daniel) {
		gap: 8px;
		min-height: 253px;
		padding: 8px;
	}

	/* Nos compactos o Figma mostra só a foto e os dois dados — sem nome, sem
	   descrição e sem divisória. */
	.rcard:not(.rcard--scott):not(.rcard--daniel) .rcard__info {
		display: none;
	}

	/* Gallery - Photo Inner: 151x78, com 8 de recuo por dentro. */
	.rcard:not(.rcard--scott):not(.rcard--daniel) .rcard__body {
		width: 100%;
		padding: 8px;
	}

	/* Gallery - Photo Frame: os dois dados empilhados com 12 de respiro
	   (25 + 12 + 25 = 62), não lado a lado com 24 como no desktop. */
	.rcard:not(.rcard--scott):not(.rcard--daniel) .rcard__meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		height: auto;
	}

	/* 25 de caixa por linha, como o Figma mede — e não os 25,2 do desktop.
	   São 0,2px por linha que faziam o cartão fechar em 253,4 em vez dos 253
	   do desenho, empurrando cada fileira seguinte meio pixel. */
	.rcard:not(.rcard--scott):not(.rcard--daniel) .rcard__meta-item {
		line-height: 25px;
	}

	/* O CTA vira largura total: 350px (3044:9941, w:FILL). */
	.results__cta {
		width: 100%;
	}

	/* ==================================================================
	   7. PREÇOS  (Figma 1259:9974, 390x2492)
	   ================================================================== */

	/*
	 * O mobile passou a ser a MESMA seção do desktop: cabeçalho centralizado,
	 * três cartões de plano e o selo do regulador. Saiu o desenho anterior
	 * (texto + foto + botão + divisor + quatro números em duas linhas), e com
	 * ele todas as regras de .pricing__top/__text/__photo/__cta/__stats/
	 * __divider e .pstat*.
	 *
	 * O que muda em relação ao desktop é só o enquadramento: recuo 64/20 em vez
	 * de 112/0, gap 40 em vez de 72, a grade vira pilha e a fita "Most Popular"
	 * deixa de sair por cima da linha e encaixa no topo do próprio cartão.
	 * 64 + 273 + 40 + 1906 + 40 + 105 + 64 = 2492.
	 *
	 * Nada some, nada vira carrossel: os três cartões ficam na mesma ordem
	 * (1, 2 popular, 3) e o popular continua no meio.
	 *
	 * O título não precisa de regra: perde a quebra escrita do desktop (o
	 * <br class="br--wide"> some abaixo de 1024px), a caixa de 350 o quebra
	 * sozinha em três linhas e os 40/44 já vêm da .sec-title do bloco 5b.
	 */

	/* A tag no seletor não é enfeite: no desktop a seção também é
	   "section.pricing" (para vencer a lista de display:none do fim do
	   style.css), e um ".pricing" solto aqui perderia por especificidade —
	   o recuo de 112 e o gap de 72 continuariam valendo no celular. */
	section.pricing {
		gap: 40px;
		padding: 64px 20px;
	}

	/* Diferença real de conteúdo entre as duas larguras: aqui o Figma traz o
	   trecho da parcela ("...per month") em peso 600 dentro do lede; no
	   desktop, não. Mesma cor, só o peso muda. */
	.pricing__lede strong {
		font-weight: 600;
	}

	/* A grade deixa de ser grid de duas linhas e vira pilha de 350, gap 20.
	   Com display:flex as grid-template-* e o grid-row dos cartões ficam
	   inertes — não precisam ser desfeitos um a um. */
	.pricing .pplans {
		display: flex;
		flex-direction: column;
		gap: 20px;
		width: 100%;
	}

	/* Aqui os cartões têm a altura do próprio conteúdo: não há folga para
	   distribuir e o cartão popular não desce mais o miolo. */
	.pplan--popular .pplan__inner {
		margin-top: 0;
		margin-bottom: 0;
	}

	/* Preço e parcela colam: 4px aqui contra os 16 do desktop (o Figma mobile
	   põe um wrapper a mais, com gap 4, em volta dos dois). O vão até o botão
	   continua sendo 16. */
	.pplan__amount {
		gap: 4px;
	}

	/* Com 286px de miolo a nota do cartão 1 cabe numa linha; os 256px fixos
	   que o desktop copia do Figma não fazem sentido aqui. */
	.pplan:nth-child(-n+2) .pplan__note {
		width: 100%;
	}

	/* ==================================================================
	   8. FINANCIAMENTO  (Figma 1259:9975, 390x298)
	   ================================================================== */

	/* Deixa de ser faixa em linha e vira bloco centrado. */
	/* No desktop esta faixa é um bloco com os filhos posicionados por cima;
	   aqui vira uma pilha de verdade. */
	.financing {
		display: flex;
		height: auto;
		flex-direction: column;
		align-items: center;
		gap: 24px;
		padding: 64px;
		text-align: center;
	}

	/* 262px é o que sobra dos 390 do desenho depois do padding de 64. Como
	   FILL, e não medida fixa, a coluna acompanha telas de 360 e de 414. */
	.financing__content {
		position: static;
		flex-direction: column;
		align-items: center;
		gap: 16px;
		width: 100%;
		height: auto;
		text-align: center;
	}

	.financing__text {
		width: 100%;
		font-size: 18px;
		line-height: 25.2px;
	}

	.financing__cta {
		position: static;
		width: 100%;
	}

	/* No mobile a moldura do ícone é creme e só arredonda o canto superior
	   esquerdo (I1259:9975;1259:19511, radius 16/0/0/0). */
	.financing__icon {
		border-radius: 16px 0 0 0;
		background: var(--c-cream-50);
	}

	/* ==================================================================
	   9. SIMULADOR  (Figma 1259:9976, 390x886)
	   ================================================================== */

	/* Frame FIXED 390x886 com clipsContent. Os 886 são 64 de topo + 750 de
	   conteúdo + 72 de base, e os 750 fecham exatos:
	   64 (logo) + 40 + 252 (título) + 40 + 266 (passos) + 40 + 48 (botão). */
	/* min-height e não height: em 390 o conteúdo fecha os 886 exatos, e em
	   telas mais estreitas o texto quebra em mais linhas e a seção cresce em
	   vez de cortar o botão. */
	.hairline {
		height: auto;
		min-height: 886px;
		padding: 64px 20px 72px;
		overflow: hidden;
	}

	/*
	 * O fundo é o MESMO arquivo do desktop — no Figma há um imageRef só para as
	 * duas larguras. O que muda é o ENQUADRAMENTO, e ele tem DOIS níveis, não um:
	 *
	 *   1. o quadro: frame "Simulator - Content" 1302x886 em x=-456, ou seja
	 *      centrado nos 390 da tela — (390 − 1302) / 2 = −456;
	 *   2. o recorte DENTRO do quadro: o fill é IMAGE com scaleMode STRETCH e
	 *      imageTransform [[0.908576, 0, 0.146084], [0, 0.927551, 0.072449]].
	 *      Esse é o "CROP" do Figma: a foto aparece ampliada e deslocada dentro
	 *      do quadro, e não simplesmente esticada nele.
	 *
	 * O nível 2 estava faltando. A regra antiga montava a janela de 1302x886 e
	 * deixava o object-fit: cover herdado do desktop escolher o recorte, o que
	 * mostrava o MEIO da foto. O Figma mostra um pedaço 7,8% mais fechado e uns
	 * 320px (da foto de 2880) mais à direita — por isso o rosto e a marca-d'água
	 * "VINCI HAIR CLINIC" saíam deslocados. Medido contra o PNG do desenho, com o
	 * véu de 0,64 removido e o texto mascarado: recorte antigo = MAE 59,7/255,
	 * este = 2,1 (o ótimo teórico é 1,9; o resto é ruído do WebP).
	 *
	 * Como as duas linhas do imageTransform viram CSS:
	 *   largura da foto = 1302 / 0.908576 = 1433px (altura = 1433 / 1,5 = 955,5)
	 *   borda esquerda  = −456 − 0.146084 × 1433 = −665,4, que a partir do centro
	 *                     dá −50% − 144px (716,5 + 144 = 860,4 = 665,4 + 195)
	 *   topo            = −0.072449 × 955,5 = −69px
	 * Em coordenadas da foto original (2880x1920) a tela de 390 mostra
	 * x 1337→2121 e y 139→1920 — 783,8 x 1781, a proporção exata de 390x886.
	 *
	 * O centro do recorte coincide com o centro do quadro, então o left: 50%
	 * continua valendo em telas que não sejam 390: a foto reenquadra centrada.
	 * O corte fica por conta do overflow: hidden da seção.
	 */
	.hairline__bg img {
		position: absolute;
		top: -69px;
		left: 50%;
		width: 1433px;
		max-width: none;
		height: 955.5px;
		object-fit: cover;
		transform: translateX(calc(-50% - 144px));
	}

	.hairline__content {
		width: 350px;
		max-width: 100%;
		gap: 40px;
		text-align: center;
	}

	/* w: FILL no Figma — o botão ocupa os 350 do wrapper. */
	.hairline__cta {
		width: 100%;
	}

	/* Os três passos empilham num bloco de 282px centrado, com 40 de vão:
	   3 x 62 + 2 x 40 = 266 de altura. */
	.hairline__steps {
		flex-direction: column;
		align-items: flex-start;
		gap: 40px;
		width: 282px;
		height: auto;
		margin-inline: auto;
		overflow: visible;
	}

	/* A faixa continua com os 62px do desktop; o que muda é ocupar a linha
	   inteira e voltar a alinhar à esquerda, já que .hairline__content centra
	   tudo no mobile. */
	.hairline__step {
		width: 100%;
		text-align: left;
	}

	/* Os rótulos têm largura FIXED no Figma: 178 no primeiro e 192 nos outros
	   dois. Como os três quebram na quebra escrita (ou, no passo 2, na palavra
	   que os 192 já forçam), os 192 servem para todos sem mudar o desenho.

	   Os passos 2 e 3 transbordam os 282 do container (95 + 24 + 192 = 311) — e
	   é assim mesmo no Figma: o bloco começa em x=54 e os 365 cabem nos 390 da
	   tela. flex: none impede o flex de encolher os 192 e quebrar antes da hora. */
	.hairline__step-text {
		width: 192px;
		flex: none;
	}

	/* Abaixo dos 390 do Figma os 282 + os 311 dos passos 2 e 3 não cabem: o
	   bloco ocupa a coluna e os rótulos (que já têm a quebra escrita) cedem. */
	@media (max-width: 389px) {
		.hairline__steps {
			width: 100%;
		}

		.hairline__step-text {
			width: auto;
			min-width: 0;
			flex: 1 1 auto;
		}
	}

	/* Empilhados, os divisores verticais do desktop virariam um traço solto no
	   meio do texto — o Figma mobile não desenha nenhum. */
	.hairline__step--divided {
		padding-left: 0;
		box-shadow: none;
	}

	/* Utilitário global, não desta seção: é a contraparte de
	   .so-narrow { display: none } do style.css e serve toda seção que troca de
	   frase entre as larguras (aqui, os numerais e os rótulos 2 e 3). Mora neste
	   bloco por acidente histórico — mexer nisso é outra tarefa. */
	.so-narrow {
		display: inline;
	}

	/* ==================================================================
	   10. CLÍNICAS  (Figma 1259:9977, 390x1447)
	   ================================================================== */

	/*
	 * O mobile é a mesma seção do desktop com outro enquadramento:
	 *   64 + [141 (rótulo 29 + 24 + título 88) + 40 + 700 (três fotos
	 *   empilhadas)] + 40 + [64 (abas) + 40 + 294 (uma fileira de cartões)]
	 *   + 64 = 1447.
	 *
	 * O que NÃO existe aqui: o recorte de 780px, o véu branco que esmaece a
	 * segunda fileira e o link "Show entire list of locations" — os três são só
	 * do desenho de 1440.
	 *
	 * Saíram o height:auto e o margin-top:0 que esta regra tinha: o desktop
	 * deixou de travar a altura em 1176 e deixou de empurrar a seção 11px para
	 * baixo (aquele vão era do desenho de Málaga; no Manchester as duas seções
	 * se encostam).
	 */
	.locations {
		padding: 64px 0;
		gap: 40px;
	}

	/* O rótulo desta seção é igual ao do desktop — 29px de caixa, 25.2 de
	   entrelinha, 4 de recuo em cima — e não os 13px que o bloco 5b dá a todo
	   .sec-label do mobile. */
	.locations .sec-label {
		height: 29px;
		padding-top: 4px;
		line-height: 25.2px;
	}

	/*
	 * O vão entre o cabeçalho e a faixa de fotos é 40 no mobile (1259:9978,
	 * flex:col gap:40), não os 72 do desktop. Como esta regra faltava, o
	 * .locations__content continuava com 72 e a seção media 1479 contra os 1447
	 * do frame — os 32px que sobravam eram exatamente 72 − 40. Com ela o
	 * empilhamento volta a bater nó a nó: fotos em 245, abas em 985, fileira de
	 * cartões em 1089.
	 */
	.locations__content {
		gap: 40px;
	}

	.locations__header {
		gap: 24px;
		padding-inline: 20px;
	}

	/* O título mobile tem duas linhas (1259:9986, 390x88): a altura de 70 que o
	   bloco 14 escreve para a linha única do desktop não vale aqui. */
	.locations__title {
		height: auto;
	}

	/*
	 * As fotos deixam de correr para o lado e empilham em três, com 20px entre
	 * elas (o desktop usa 16) e 20 de recuo lateral: 350 numa janela de 390.
	 * As três são ARQUIVOS PRÓPRIOS — fachada, recepção e sala de consulta da
	 * clínica da cidade —, não recortes das cinco do desktop; quem as troca é o
	 * <source> do <picture>, no template.
	 */
	.locations__photos {
		flex-direction: column;
		height: auto;
		padding-inline: 20px;
	}

	.locations__marquee {
		flex-direction: column;
		gap: 20px;
		width: 100%;
		margin-left: 0;
		animation: none;
	}

	.locations__track {
		flex-direction: column;
		gap: 20px;
		width: 100%;
	}

	/* A cópia do laço não faz sentido empilhada. */
	.locations__track[aria-hidden="true"] {
		display: none;
	}

	/* 12 no mobile, contra os 16 do desktop. */
	.locphoto {
		width: 100%;
		height: 220px;
		border-radius: var(--r-12);
	}

	/*
	 * Aqui NÃO há o retângulo maior que a janela do desktop: os nós 1259:9988-90
	 * são RECTANGLEs de 350x220 com a imagem em CROP (imageTransform de escala
	 * 0,5 em x e y, centrado) — o mesmo que object-fit:cover na própria caixa,
	 * dentro de 0,7px. Então a caixa de 431x287 do bloco 14 sai de cena.
	 */
	.locphoto img {
		position: static;
		width: 100%;
		height: 100%;
		transform: none;
	}

	.locphoto picture {
		display: block;
		width: 100%;
		height: 100%;
	}

	/* O Figma mostra três; o trilho do desktop tem cinco. */
	.locations__track .locphoto:nth-child(n + 4) {
		display: none;
	}

	/*
	 * Aqui a caixa não recorta nada: solta o max-height de 780 e o clip que o
	 * desktop usa para cortar a segunda fileira. As abas e os cartões correm
	 * para o lado dentro do próprio contêiner de rolagem.
	 */
	.locations__map {
		width: 100%;
		max-width: none;
		max-height: none;
		margin-inline: 0;
		padding-inline: 0;
		overflow: visible;
	}

	/* Vão de 72 do desktop entre abas e grade: no mobile o Figma usa 40. E o
	   -4px do recorte não existe mais, porque não há recorte. */
	.locations__map-inner {
		gap: 40px;
		margin-top: 0;
	}

	/* Nenhum dos dois existe no Figma mobile. */
	.locations__fade,
	.locations__more {
		display: none;
	}

	/* Abas e cartões correm para o lado, sangrando à direita. */
	.locations__regions,
	.locations__cards {
		/* flex-start, não center: centrado, o que passa da largura fica à
		   esquerda do zero e nem a rolagem alcança. */
		justify-content: flex-start;
		padding-left: 20px;
		padding-right: 0;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.locations__regions::-webkit-scrollbar,
	.locations__cards::-webkit-scrollbar {
		display: none;
	}

	/*
	 * A grade de 4x2 do desktop vira uma fileira só que rola: 4 cartões com 20
	 * de vão (o desktop usa 16). O gap escrito por extenso zera de uma vez o
	 * column-gap 16 e o row-gap 56 herdados da grade.
	 *
	 * A fileira tem 294px travados e clip no Figma — corta 4px da base do
	 * cartão, que mede 298. Está no PNG aprovado, então fica. O alinhamento
	 * pelo topo (o align-items:start do bloco 14, que vale igual no flex) é o
	 * que joga os 4px cortados para baixo, como no nó.
	 */
	.locations__cards {
		gap: 20px;
		height: 294px;
		overflow-y: hidden;
	}

	.locations__cards.is-active {
		display: flex;
	}

	.loccard {
		width: 292px;
		flex: none;
	}

	/*
	 * A fileira do mobile abre pela clínica da cidade: o Figma põe Manchester
	 * antes de London (1259:10008 → 3073:11516 e 3073:11522), enquanto o desktop
	 * (1278:10002) começa por London. Como só muda a ORDEM, o HTML continua um
	 * só e quem troca é o order do flex — o template marca o cartão com
	 * .loccard--city comparando o post_title com vinci_opt( 'city' ).
	 *
	 * Vale muito: na janela de 390 cabe um cartão e um pedaço do segundo, então
	 * trocar o primeiro trocava 20% da altura da seção. Só isso valia 10 pontos
	 * de MAE.
	 */
	.loccard--city {
		order: -1;
	}

	/*
	 * Só o mobile mostra o qualificador da clínica: "Manchester (Surgical
	 * center)", "Aberdeen (Consultation)". O nome fica numa linha só, como no
	 * Figma (o nó tem 247px numa caixa de 244, com clip) — sem o nowrap ele
	 * quebraria em duas linhas e empurraria o endereço para fora do corpo.
	 */
	.loccard__type {
		display: inline;
	}

	.loccard__name {
		white-space: nowrap;
	}

	/*
	 * As duas regras abaixo vencem por especificidade duas que moram no bloco
	 * "15. FAQ", mais adiante neste arquivo, e que ainda tratam das abas de
	 * região: lá elas têm 243px e o rótulo desce 3px. O Figma pede 243.2
	 * (1216/5) e não traz deslocamento nenhum — a centragem agora é do flex, no
	 * bloco 14 do style.css. Corrigir na origem exigiria editar um bloco que
	 * não é desta seção.
	 */
	.locations__regions .locregion {
		width: 243.2px;
		/* Repetido de propósito: com o flex:1 1 0 do desktop as cinco abas
		   encolheriam para caber nos 370px da janela em vez de rolar. */
		flex: none;
	}

	.locations__regions .locregion span {
		position: static;
		top: auto;
	}

	/* ==================================================================
	   11. NOSSA EQUIPE  (Figma #1259:10035, 390x1051)
	   ================================================================== */

	/*
	 * A fileira estática do desktop vira trilho rolável e a seção perde o
	 * padding da direita: o carrossel sangra pela borda e o 2º cartão aparece
	 * pela metade (370 - 292 - 20 = 58px de espia), como no desenho.
	 * Conferência: 64 + 353 + 40 + 530 + 64 = 1051.
	 */
	.team {
		align-items: flex-start;
		gap: 40px;
		padding: 64px 0 64px 20px;
	}

	/* Aqui as setas não ficam ao lado do título: descem para baixo dele, à
	   esquerda, com 24 de vão — o mesmo vão do rótulo para o título. */
	.team__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	.team__intro {
		width: 100%;
	}

	/* 3 x 44 = 132: a quebra escrita depois de "Our Resident" só existe nesta
	   largura (é o <br class="br--narrow"> do template) e a segunda linha
	   quebra sozinha na caixa de 370. */
	.team__title {
		font-size: 40px;
		line-height: 44px;
	}

	/* O recuo de 20 embaixo existia para alinhar as setas com a base do
	   cabeçalho no desktop; empilhadas, elas não têm o que alinhar. */
	/* Aqui os cartões viram carrossel e as setas voltam a ter função — o
	   desktop as esconde no bloco 22 do style.css, onde o Figma só tem um
	   componente largado sem configurar. */
	.team__nav {
		display: flex;
		padding-bottom: 0;
	}

	/* O trilho para com um cartão inteiro na borda esquerda, respeitando os
	   20px de recuo da seção. */
	.team__viewport {
		scroll-snap-type: x mandatory;
	}

	/* Os 20px do fim não estão no Figma (lá o trilho acaba no 4º cartão): dão
	   à direita, no fim da rolagem, a mesma margem que a esquerda tem. */
	.team__track {
		gap: 20px;
		padding-right: 20px;
	}

	/* A ordem do celular pode ser outra (inc/doctors.php, "Posição no
	   celular"); sem ela, 0 mantém a ordem do HTML. */
	.docard {
		order: var(--docard-order-m, 0);
		scroll-snap-align: start;
	}

	/* Mesma caixa de foto, só o cinza do fundo muda de #D9D9D9 para #E7E7E7 —
	   e ele só aparece se faltar a imagem destacada. */
	.docard__photo {
		background: #E7E7E7;
	}

	/* O selo desce 10px nesta largura: o Figma mobile põe a caixa de 50 em
	   y=298 dentro dos 362 da foto (362 − 298 − 50 = 14 do fundo), contra
	   y=288 (24 do fundo) no desktop. Está assim nos três primeiros cartões,
	   então é desenho e não arrasto. */
	.docard__role {
		bottom: 14px;
	}

	/* O Figma mobile fecha a seção no carrossel: o botão do desktop não
	   existe aqui. */
	.team__cta {
		display: none;
	}

	/* ------------------------------------------------------------------
	   As três regras abaixo são de outras seções (cartões de prêmios e
	   endereço do rodapé) e já viviam dentro deste bloco. Ficam onde
	   estavam para não se perderem — mexer nelas não é desta seção.
	   ------------------------------------------------------------------ */

	/* Cartões de perfil: no Figma a mancha do @nome tem 11 de altura, a da
	   segunda linha 9, e 10 entre elas. Com duas caixas de linha de 14 e 2 de
	   vão o total dava certo, mas a segunda linha subia 4px. */
	.awards__handle-info {
		gap: 10px;
	}

	.awards__handle-name {
		height: 11px;
		align-items: center;
	}

	.awards__handle-sub {
		height: 9px;
	}

	/* A mancha do endereço começa no topo da linha; a caixa de texto tem 6px
	   de meia-entrelinha acima dela. */
	.ftr__contact-row--address > span:last-child {
		margin-top: -6px;
	}

	/* ==================================================================
	   12. PRÊMIOS  (Figma 1259:10036, 390x2628)
	   ================================================================== */

	/* 2628 = 64 (topo) + 342 (cabeçalho) + 40 + 2182 (pilha). O recuo
	   inferior é 0: a seção termina colada na de baixo. */
	.awards {
		padding: 64px 20px 0;
	}

	/* Os 72 do desktop viram 40 nos dois vãos do Figma mobile. */
	.awards__wrapper {
		gap: 40px;
	}

	/* A linha do desktop vira coluna: aqui não há cartão do certificado ao
	   lado, e o cabeçalho continua alinhado à esquerda. */
	.awards__top {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}

	/* About - Content Group: 301 (rótulo + título + lede) + 16 + 25 (CTA).
	   No desktop este vão é 32. */
	.awards__top-left {
		width: 100%;
		gap: 16px;
	}

	/* O cartão "CERTIFICATE AWARDED FEBRUARY 2026" não existe no Figma
	   mobile — some por completo, não encolhe. */
	.awards__certificate {
		display: none;
	}

	/* O título cai para 40/44 pelo bloco 5b, que já lista .awards__title;
	   o lede fica em 20/28, igual ao desktop. */

	/* CTA (3044:9947): no mobile é pílula de 163x25 — 12px/600 em dourado,
	   recuo 4/12, radius 9999. Os dois slots de ícone estão OCULTOS no
	   Figma, então o caret do desktop sai. */
	/* O Figma mobile desenha este CTA com o rótulo de 12px do botão Small, e
	   na tela do celular ele ficava miúdo demais para o que é: o único convite
	   a falar com um especialista no meio da página. Sobe para os 16/22,4 do
	   rótulo Large do Design System — a mesma medida que "Show entire list of
	   locations" e "Still have questions?" têm no computador. */
	.awards__link {
		height: auto;
		padding: 4px 12px;
		border-radius: var(--r-pill);
		font-size: 16px;
		line-height: 22.4px;
		color: var(--c-primary-500);
		transition:
			background-color var(--dur-fast) var(--ease-out),
			color var(--dur-fast) var(--ease-out);
	}

	/* Estados do Tertiary do DS. */
	.awards__link:hover {
		background-color: var(--c-primary-100);
		color: var(--c-primary-700);
	}

	.awards__link:active {
		background-color: var(--c-primary-300);
		color: var(--c-primary-900);
	}

	.awards__link-caret {
		display: none;
	}

	/* O mosaico de quatro colunas vira pilha. O vão é 20 (About - Features),
	   não os 16 do desktop. */
	.awards__mosaic {
		display: flex;
		flex-direction: column;
		gap: 20px;
		width: 100%;
		height: auto;
	}

	/* relative, não static: a célula é a referência dos filhos posicionados
	   dentro dela. Em static eles se soltam e vão parar noutra seção. */
	.awards__cell {
		position: relative;
		width: 100%;
		grid-area: auto;
	}

	/* Cada foto tem no mobile um recorte próprio, tirado do Figma: a imagem
	   entra em tamanho natural e a célula mostra só o pedaço escolhido. */
	.awards__cell--top-right .awards__photo {
		--foto-x: -115px;
		--foto-y: -75px;
		--foto-w: 550px;
		--foto-h: 367px;
	}

	.awards__cell--center .awards__photo {
		--foto-x: -135px;
		--foto-y: 0px;
		--foto-w: 958px;
		--foto-h: 639px;
	}

	.awards__cell--team .awards__photo {
		--foto-x: -54px;
		--foto-y: -10px;
		--foto-w: 459px;
		--foto-h: 306px;
	}

	/* A ordem do Figma mobile é outra: foto de capa, prêmio, cirurgia,
	   sala de tratamento, figuras públicas e alcance global. */
	.awards__cell--top-right { order: 1; height: 292px; }
	.awards__cell--award   { order: 2; height: 316px; }
	.awards__cell--center  { order: 3; height: 600px; }
	.awards__cell--team    { order: 4; height: 292px; }
	.awards__cell--figures { order: 5; height: 292px; }
	.awards__cell--global  { order: 6; height: 290px; }

	/* A célula do prêmio ganha 24px de altura aqui (316 contra 292) e o
	   texto desce junto: 34,5 do topo, não os 24 do desktop. */
	.awards__card-text {
		top: 34.5px;
	}

	/* No cartão sobre a foto da cirurgia o Figma mobile põe a imagem direto
	   no lugar do avatar, sem o quadro cinza que o desktop desenha atrás. */
	.awards__cell--center .awards__avatar {
		background: none;
	}

	/* Estas três anulam o ajuste de mancha herdado da LP de Málaga (bloco 11
	   desta folha: gap 10 e alturas 11 e 9). As duas linhas têm 14/19.6 e
	   ficam coladas, 20 + 20 = 40, como no desktop do Figma corrigido. O
	   mobile do Figma ainda traz o vão antigo de 8, mas ali os 48 nem cabem
	   no cartão de 56 — a correção do desktop é a que vale. Quando aquele
	   trecho do bloco 11 for removido, estas podem sair também. */
	.awards__handle-info {
		gap: 0;
		width: 180px;
		height: 40px;
	}

	.awards__handle-name {
		height: 20px;
		line-height: 19.6px;
	}

	.awards__handle-sub {
		height: 20px;
		line-height: 19.6px;
	}

	/* Célula de alcance global: recuo de 24 no topo e nenhum na base (o mapa
	   sangra). Sem o cross:CENTER do desktop, o topo é 24 redondo. */
	.awards__global-inner {
		top: 24px;
	}

	/* Aqui a célula tem 24 de recuo em cima e embaixo e o conteúdo cabe
	   inteiro: 244 de altura em top 24, com o cabeçalho e a lista afastados
	   pelas pontas (main:SPACE_BETWEEN). */
	.awards__figures-inner {
		top: 24px;
		height: 244px;
		justify-content: space-between;
	}

	/* ==================================================================
	   13. EXPERIÊNCIAS  (Figma 1259:10319, 390x413)
	   ================================================================== */

	/*
	 * O recuo é assimétrico de propósito — 20 à esquerda, 0 à direita: o
	 * trilho de vídeos sangra até a borda da tela e avisa que há mais para o
	 * lado (no PNG o segundo vídeo aparece cortado).
	 * 64 + 149 (cabeçalho) + 40 + 160 (trilho) = 413.
	 */
	.pexp {
		padding: 64px 0 0 20px;
	}

	/* No Figma este cabeçalho vai até a borda direita: centra em 205, não em
	   195. Com o recuo de 20 dos dois lados o bloco inteiro saía 10 à
	   esquerda. */
	.pexp__header {
		padding-right: 0;
		text-align: center;
	}

	/* O rótulo ocupa a entrelinha inteira (25px) e o wrapper do Figma
	   (1259:10324) tem 4px de recuo no topo — 29 no total.
	   29 + 32 + 88 (duas linhas de 44) = 149. */
	.pexp__label {
		height: 29px;
		padding-top: 4px;
		font-size: 18px;
		line-height: 25.2px;
		font-weight: 600;
		color: var(--c-brown-mid);
	}

	/* "Hear From / Our Patients": a quebra é escrita no Figma e vem do
	   <br class="br--narrow"> que o template insere. */
	.pexp__title {
		margin-top: 32px;
		font-size: 40px;
		line-height: 44px;
		font-weight: 600;
		/* Preto, como todos os títulos de seção do Figma. */
		color: #000;
	}

	/* Trilho que corre para o lado, como no Figma: dois cartões de 285x160. */
	.pexp__track {
		display: flex;
		gap: 20px;
		margin-top: 40px;
		overflow-x: auto;
		scrollbar-width: none;
	}

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

	/* Radius 8 aqui, contra os 16 do vídeo do desktop. */
	.pexp__video {
		position: relative;
		display: block;
		width: 285px;
		height: 160px;
		flex: none;
		border-radius: var(--r-8);
		/* Colors/BG/warm: só aparece se o vídeo ficar sem capa. */
		background: var(--c-cream);
		overflow: hidden;
	}

	.pexp__video img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.pexp__play {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 56px;
		height: 56px;
		transform: translate(-50%, -50%);
	}

	/* ==================================================================
	   14. DEPOIMENTOS  (Figma 1259:10339, 390x1918.63)
	   ================================================================== */

	/* 64 + 1790.63 + 64 = 1918.63. O recuo lateral já vem do --pad-x do
	   bloco 1 (20px no mobile). */
	.tsm {
		height: auto;
		padding-block: 64px;
	}

	/* No mobile o rótulo, o título e os dois vídeos pertencem à seção anterior
	   (.pexp); aqui a seção começa direto no selo de avaliação. */
	.tsm__header {
		display: none;
	}

	/* 153.63 (selo + título) + 24 + 1525 (lista) + 40 + 48 (botão) = 1790.63.
	   O vão do corpo é 24; os 40 até o botão saem desses 24 mais os 16 de
	   .tsm__cta. O recuo de 72 no topo era do desktop. */
	.tsm__body {
		gap: 24px;
		padding-top: 0;
	}

	/* Aqui o bloco do selo tem 153.63 (33.63 + 32 + duas linhas de 44), não os
	   135 travados do desktop — quem manda na altura é o conteúdo. */
	.tsm__subtitle {
		height: auto;
	}

	/* O rótulo do selo e o título da nota são outras frases aqui — "5 Stars on
	   Google and Trustpilot" e "Rated Excellent / By Patients", esta com
	   quebra escrita e B maiúsculo. Cada largura mostra a sua. */
	.tsm__rating-label--wide,
	.tsm__subtitle-title--wide {
		display: none;
	}

	.tsm__rating-label--narrow,
	.tsm__subtitle-title--narrow {
		display: inline;
	}

	/* A caixa só recorta: 1476 do Figma sobre um conteúdo de 1754 — a
	   diferença de 278 é justamente o que o "See more" abre. Os 1754 só
	   fecham porque a entrelinha do depoimento é 25 e não 25.2 (ver
	   .tcard__text no style.css): com 25.2 os quatro cartões mediam
	   287,22 / 438,44 / 463,64 / 514,05 no lugar de 286 / 436 / 461 / 511 e a
	   lista terminava 9,3px abaixo do desenho. */
	.tsm__columns {
		display: block;
		width: 100%;
		height: 1476px;
		overflow: hidden;
	}

	/*
	 * As três colunas do desktop trazem outros 13 depoimentos; o Figma mobile
	 * tem os seus quatro, e nenhum se repete. Some quem não é desta largura.
	 *
	 * Some a coluna, e não o .tsm__marquee — que continua em display:contents
	 * como no desktop — porque é assim que o JS do laço reconhece o mobile:
	 * ele desiste de medir quando vê a faixa em contents. Sem laço aqui: com
	 * quatro cartões e um botão que promete mostrar o resto, correr em círculo
	 * não faria sentido (e o Figma mostra a lista parada).
	 */
	.tsm__column {
		display: none;
	}

	.tsm__narrow {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	/* A borda do cartão escurece no mobile: #00000029 contra o #F8F8F5 do
	   desktop — no Figma ela é bem mais visível aqui. */
	.tcard--narrow {
		border-color: rgba(0, 0, 0, 0.161);
	}

	/* A caixa passa de 1419 para 1476 e o véu de baixo ganha 1px: 1476 − 193. */
	.tsm__fade--bottom {
		top: 1283px;
		height: 193px;
	}

	/* Só aqui ele existe: no desktop o style.css o esconde (o Figma de 1440 não
	   traz este controle). */
	.tsm__more {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
		width: 100%;
		height: 25px;
		font-size: 18px;
		line-height: 25px;
		font-weight: 600;
		color: var(--c-brown-mid);
	}

	/* O caret do Figma aponta para baixo: é o mesmo ícone, girado. */
	.tsm__more-caret {
		width: 16px;
		height: 16px;
		transform: rotate(90deg);
	}

	/* Aberto pelo "See more": mostra tudo, sem altura travada e sem véus. */
	.tsm__columns.is-open {
		height: auto;
	}

	.tsm__columns.is-open .tsm__fade {
		display: none;
	}

	/* No Figma o botão é FILL (350), não HUG como no desktop. */
	.tsm__cta {
		width: 100%;
		margin-top: 16px;
	}

	/* ==================================================================
	   15. FAQ  (Figma 1288:14112, 390x1188)
	   ================================================================== */

	/*
	 * Sem recuo no topo — a seção encosta na anterior — e 64 embaixo. O gap
	 * cai de 64 para 40 e continua uniforme entre os quatro filhos:
	 * 189 (cabeçalho) + 40 + 64 (abas) + 40 + 638 (itens) + 40 + 25 + 40 + 48
	 * (botão) + 64 = 1188. A altura fixa saiu do desktop, aqui não há o que
	 * desfazer.
	 */
	.faq {
		padding: 0 0 64px;
	}

	/* O recuo lateral de 20 é só da lista de itens: cabeçalho e abas usam os
	   390 inteiros, e --content-w (1216) não tem o que fazer aqui. */
	.faq__content {
		max-width: none;
		padding-inline: 0;
		gap: 40px;
	}

	/* Ao contrário do desktop, aqui o rótulo não tem o recuo superior de 4px:
	   a caixa é a linha, 25px. 25 + 32 + 132 = os 189 do cabeçalho. */
	.faq .sec-label {
		height: 25px;
		padding-top: 0;
		line-height: 25.2px;
	}

	.faq__header {
		width: 100%;
		gap: 32px;
		padding-inline: 0;
		text-align: center;
	}

	/* w:FIXED 350 no Figma, dentro de um cabeçalho de 390. São esses 40px a
	   menos que fazem "Answers to Help You Take the Next Step" quebrar em três
	   linhas — com 100% ela quebra em outro lugar. O tamanho (40/44) vem do
	   bloco 5b, junto com os outros títulos de seção. */
	.faq__title {
		width: 350px;
		max-width: 100%;
	}

	/* As abas viram HUG (254 e 321, somando 575) dentro de uma janela de 390
	   com clip: começam a 20 da borda esquerda, sangram à direita e correm
	   para o lado, deixando ver que há mais de uma — como no Figma. */
	.faq__tabs {
		justify-content: flex-start;
		padding-left: 20px;
		padding-right: 0;
		overflow-x: auto;
		scrollbar-width: none;
	}

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

	.faq__tab {
		flex: none;
		width: auto;
		padding: 0 64px;
	}

	.faq__list {
		gap: 20px;
		padding-inline: 20px;
	}

	/*
	 * Altura HUG, não fixa: 24 + a pergunta + 24. Dá os 73px do Figma com uma
	 * linha e os 98 com duas — e quatro das seis perguntas têm duas linhas,
	 * que os 82px fixos de antes cortavam.
	 *
	 * 23/31 e não 24/32 porque o traço de 1px do Figma é INTERNO: o container
	 * mede 350x98 COM ele, e o miolo (286x50) começa a 32px da borda de fora
	 * — 1 de traço + 31 de recuo. Com box-sizing:border-box e 24/32 cada
	 * cartão saía 2px mais alto (75,2 e 100,4 medidos no navegador contra os
	 * 73 e 98 do desenho) e o texto 2px mais estreito (264 contra 266), o que
	 * ainda mudava onde as perguntas quebram. Somados aos seis cartões eram
	 * 12px a mais na lista. Mesma conta que o desktop já faz em
	 * .faq__question (70 de altura + 2 de traço = os 72 do item).
	 */
	.faq__item {
		height: auto;
		padding: 23px 31px;
	}

	/* O recuo já está no item: sem zerar aqui, ele entra duas vezes e sobram
	   132px para a pergunta. O gap 0 é o do Figma — o texto (266) e o + (20)
	   somam os 286 do miolo, encostados. */
	.faq__question {
		height: auto;
		gap: 0;
		padding-inline: 0;
	}

	/*
	 * Saíram daqui três deslocamentos em pixel (.faq__question margin-top:-4,
	 * .faq__tab span top:3, .faq__icon top:-2). Existiam só para compensar a
	 * entrelinha errada da pergunta (21,6 em vez de 25,2); com o line-height
	 * certo o texto já assenta no centro do cartão e o + acompanha pelo
	 * align-items:center. Nenhum deles existe no design.
	 */

	/* O estado aberto não consta no Figma. Aqui o recuo lateral e o de baixo
	   são do próprio item, então a resposta só precisa do gap 8 que o item
	   declara entre a pergunta e o que vier depois. */
	.faq__answer {
		padding: 8px 0 0;
	}

	.faq__more,
	.faq__cta {
		align-self: center;
	}

	/* "Still have questions?" no mobile é Tertiary Small com o rótulo do
	   próprio Small, 12/16.8 (I1288:14112;3043:12273): 130x25, altura HUG. */
	.faq__more {
		height: 25px;
		font-size: 12px;
		line-height: 16.8px;
	}

	/* Quebras forçadas do desktop: no mobile o Figma deixa o texto correr e
	   quebrar sozinho, então elas viram espaço. */
	br.br--wide {
		display: none;
	}

	br.br--narrow {
		display: inline;
	}

	/* Trecho que o Figma mobile não traz. O segundo seletor vence o
	   inline-block que o ordinal do simulador ganha no desktop. */
	.so-wide,
	.hairline__step-num .so-wide {
		display: none;
	}

	/* As abas de região têm 243px fixos e correm para o lado, como no Figma. */
	.locregion {
		width: 243px;
		flex: none;
	}

	/* A mancha do rótulo das abas de região fica 3px abaixo. */
	.locregion span {
		position: relative;
		top: 3px;
	}

	/* Com align-items:center no pai, um bloco de texto encolhe até o conteúdo
	   e quebra antes da hora. (.faq__title saiu desta lista: o Figma lhe dá
	   350px fixos, não os 390 do cabeçalho.) */
	.awards__title,
	.awards__lede,
	.trust__heading,
	.hairline__title,
	.hairline__lede {
		width: 100%;
	}

	/* ==================================================================
	   16. GALERIA  (Figma 1259:10461, 390x292)
	   ================================================================== */

	/* 390 ÷ 3 = 130 exatos, sem gap: as células continuam com o flex:1 1 0 do
	   desktop e só encolhem de 480x336 para 130x292, virando retrato estreito.
	   A altura da seção sai delas, como no desktop — no Figma o mobile é
	   h:FIXED 292 e as células são h:FIXED 292, dá no mesmo.

	   O arquivo gallery-N-mobile.webp já é a janela da célula (260x584 =
	   130x292 @2x). Aqui o corte do Figma é cover-centrado puro — sem a
	   ampliação extra do desktop e com a foto 2 de volta ao centro —, então o
	   object-fit: cover herdado do desktop serve sem nenhum ajuste. */
	.gallery__item {
		height: 292px;
	}

	/* ==================================================================
	   17. RODAPÉ  (Figma #1259:16133, 390x1313)
	   ================================================================== */

	/* O nó do desenho mobile é 1288:13200 — 390x1283 = 64 + 1155 + 64. A
	   pilha do Figma, com 40 entre cada bloco: CTA 308 / divisor /
	   navegação 500 / divisor / direitos 50 / voltar ao topo 97. */
	.ftr {
		height: auto;
		flex-direction: column;
		gap: 56px;
		padding: 64px 20px;
	}

	.ftr__row,
	.ftr__content {
		flex-direction: column;
		gap: 40px;
		width: 100%;
	}

	/* 308 = 64 (logo) + 40 + 116 (texto) + 40 + 48 (botão). Os 316 que o
	   bloco 5c mantém do desktop davam 8px de sobra e empurravam para baixo
	   tudo o que vem depois no rodapé. */
	.ftr__brand {
		width: 100%;
		height: auto;
	}

	/* No Figma mobile o botão é w:FILL — 350 de ponta a ponta. O HUG de 219
	   é só do desktop. */
	.ftr__cta {
		width: 100%;
	}

	/* Figma: Menu 152 FIXED + 16 + Contact 182 FILL = 350. Com duas colunas
	   iguais de 167 sobravam 139px para o texto do telefone, que mede 153 e
	   quebrava em duas linhas. */
	.ftr__columns {
		display: grid;
		grid-template-columns: 152px minmax(0, 1fr);
		column-gap: 16px;
		row-gap: 32px;
		width: 100%;
	}

	.ftr__col {
		width: 100%;
	}

	/* A coluna do menu mede 398 = 22 (título) + 16 + 360 (lista). Dentro da
	   lista o Figma trava a mancha em 22 e usa gap 16, com três exceções:
	   "Pricing" e "FAQ" estão em HUG (25) e "Hair Simulator" tem quebra
	   escrita (50). Dá 0 / 38 / 76 / 117 / 183 / 221 / 259 / 297 / 335.
	   Encolher o vão para 12,8 — o que se fazia aqui — mantinha o passo de
	   38 dos itens de uma linha, mas perdia 6px no fim da coluna. */
	.ftr__col--menu .ftr__list {
		gap: 16px;
	}

	.ftr__col--menu .ftr__list li {
		height: 22px;
	}

	.ftr__col--menu .ftr__list li:nth-child(3),
	.ftr__col--menu .ftr__list li:nth-child(9) {
		height: 25px;
	}

	.ftr__col--menu .ftr__list li:nth-child(4) {
		height: 50px;
	}

	/* A coluna de contato do Figma mobile tem três linhas — telefone,
	   WhatsApp e endereço — e o e-mail não aparece. */
	.ftr__contact-row--email {
		display: none;
	}

	/* Telefone e WhatsApp medem 25 no Figma (0 / 41 / 82), não os 20 e 18
	   que o desktop usa. O endereço fica em HUG: o de Manchester ocupa mais
	   linhas que o de Londres do desenho e a caixa de 87 o cortava. */
	.ftr__list--contact li:nth-child(2),
	.ftr__list--contact li:nth-child(3) {
		height: 25px;
	}

	.ftr__list--contact li:nth-child(4) {
		height: auto;
	}

	/* Com o endereço em várias linhas o alfinete centralizado descia para o
	   meio do bloco; no Figma ele fica na altura da primeira linha. */
	.ftr__contact-row--address {
		align-items: flex-start;
	}

	/* As redes sociais ocupam sozinhas a linha de baixo da grade. */
	.ftr__col--social {
		grid-column: 1 / -1;
		height: auto;
	}

	/* O rótulo é "Social Media" aqui, sem descendente: 22px, não os 24 que o
	   "Redes Sociales." do desktop precisa. Os 2px a mais empurravam para
	   baixo tudo o que vem depois no rodapé. */
	.ftr__col--social .ftr__col-title {
		height: 22px;
	}

	/* Os dois divisores do mobile são LINE de altura 0 com traço de 1px
	   centrado em #F8F8F5 — quase invisível sobre o creme, e sem ocupar
	   espaço entre os 40 de vão. A margem negativa devolve o pixel que o
	   <hr> ocupa, para o traço cair onde a linha do Figma está. */
	.ftr__rule,
	.ftr__rule--narrow {
		display: block;
		width: 100%;
		height: 1px;
		margin: -0.5px 0;
		border: 0;
		background: var(--c-off-white);
	}

	/* 350x50 centrado, com a quebra escrita depois de "Group." — a caixa de
	   linha é 25,2, não os 27 do desktop. */
	.ftr__copy {
		width: 100%;
		line-height: 25.2px;
		text-align: center;
	}

	/* Figma: direitos autorais (50) + 40 + voltar ao topo (97), com o botão
	   abaixo do texto, não ao lado. */
	.ftr__bottom {
		flex-direction: column;
		align-items: center;
		gap: 40px;
		height: auto;
		text-align: center;
	}

	/* 97 = 25 (mancha do rótulo) + 32 (vão) + 40 (botão). */
	.ftr__top {
		flex-direction: column;
		align-items: center;
		gap: 32px;
		height: auto;
		line-height: 25.2px;
	}

	.ftr__top > span:first-child {
		height: 25px;
	}

	/* O SVG já traz o retângulo dourado de raio 16; a caixa acompanha para
	   não vazar cor pelos cantos. */
	.ftr__top-icon {
		border-radius: 16px;
		background: var(--c-gold);
	}

	/* ==================================================================
	   18. BARRA DE CTA  (Figma 1259:10766, 390x80)
	   ================================================================== */

	/* No mobile a barra fica presa no rodapé da tela. O Figma diz o mesmo por
	   geometria: o último bloco de conteúdo termina em y=18562.63 e o frame
	   tem 18605 de altura fixa — sobram exatamente os 80px da barra, que aqui
	   viram o padding-bottom de .v-page lá em cima.

	   z-index 50: abaixo da barra de endereço (60), que continua sendo a
	   primeira coisa, e bem abaixo do modal de vídeo (100), que precisa cobrir
	   tudo. */
	/* A barra continua fixa (style.css). No mobile o Figma não distribui o
	   eixo principal: texto e botão ficam juntos à esquerda, com o gap de 40
	   — 24 + 134 (texto) + 40 = o botão em x=198. O recuo é 24, e não os 20
	   de --pad-x: é próprio desta barra. */
	.ctabar {
		justify-content: flex-start;
		padding-inline: 24px;
	}

	/* O texto não ganha regra: 18/25.2 já vem do desktop e a caixa é HUG — as
	   duas linhas (134x50) nascem do <br class="br--narrow">, que a regra geral
	   do mobile volta a exibir, e não de uma largura imposta. */

	/* Fora do Figma, que só desenha os 390: 24 + 134 + 40 + 141 + 24 = 363, e
	   em 360 (o celular Android mais comum) já não cabe — o texto quebrava em
	   três linhas. O recuo e o vão cedem primeiro; se ainda faltar, o texto
	   pode encolher em vez de a barra transbordar. */
	@media (max-width: 362px) {
		.ctabar {
			gap: 12px;
			padding-inline: 16px;
		}

		.ctabar__text {
			min-width: 0;
		}
	}

	/* ==================================================================
	   19. PÁGINA DE OBRIGADO
	   ================================================================== */

	/*
	 * O recuo de 80px embaixo do documento é o lugar da barra fixa de CTA.
	 * Nesta página a barra não existe (quem acabou de enviar o formulário já
	 * é lead), e sem ela o recuo virava uma faixa vazia no fim da rolagem.
	 */
	/* O recuo de baixo zerado da página de obrigado vale nas duas larguras e
	   mora no style.css (bloco 4). */

	.thanks__top {
		padding: 48px 20px 64px;
	}

	.thanks__seal {
		width: 68px;
		height: 68px;
		margin-top: 36px;
		box-shadow: 0 0 0 8px rgba(188, 149, 92, 0.16);
	}

	/* 40/44 é a mesma escala dos títulos de seção no mobile. */
	.thanks__title {
		font-size: 40px;
		line-height: 44px;
	}

	.thanks__lede {
		font-size: 18px;
		line-height: 25.2px;
	}

	/* Empilhados: três colunas em 350px dariam cartões de 106px. */
	.thanks__steps {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-top: 40px;
	}

	.thanks__videos {
		padding: 64px 20px 72px;
	}

	.thanks__videos-title {
		font-size: 32px;
		line-height: 36px;
	}

	/* Os vídeos viram carrossel por swipe: empilhados, os três empurrariam o
	   rodapé para 400px abaixo da dobra e ninguém rolaria até lá. */
	.thanks__video-row {
		display: flex;
		gap: 16px;
		margin-top: 32px;
		/* Sangra até a borda e volta com o recuo em cada ponta, para o
		   primeiro cartão alinhar com o texto acima. */
		margin-inline: -20px;
		padding-inline: 20px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		/* Sem isto o snap encosta o cartão no início da área de rolagem, que
		   é a borda da tela, e ele sai 20px à esquerda do título acima. O
		   scroll-padding faz o ponto de parada respeitar o mesmo recuo. */
		scroll-padding-inline: 20px;
		scrollbar-width: none;
	}

	.thanks__video-row::-webkit-scrollbar {
		display: none;
	}

	.tvideo {
		width: 280px;
		flex: none;
		scroll-snap-align: start;
	}

	.tvideo__play {
		width: 52px;
		height: 52px;
		margin: -26px 0 0 -26px;
	}

	.thanks__foot {
		padding: 56px 20px 72px;
	}

	.thanks__actions {
		flex-direction: column;
		width: 100%;
	}

	.thanks__actions .btn {
		width: 100%;
	}

	/* Cinco ícones de 44 + 4 vãos de 12 = 268: cabem, mas o wrap acomoda
	   também telas de 320. */
	.thanks__social-row {
		flex-wrap: wrap;
	}

	/* ==================================================================
	   20. TELAS MAIS ESTREITAS QUE O FIGMA
	   O desenho mobile tem 390. Abaixo disso nada pode ser cortado nem
	   quebrar palavra por palavra; o que cede é tipo e disposição.
	   ================================================================== */

	/* As quebras escritas do texto do simulador foram postas para 350px de
	   coluna; numa coluna menor elas deixavam linhas de uma palavra. */
	@media (max-width: 389px) {
		.hairline__lede br {
			display: none;
		}
	}

	@media (max-width: 359px) {
		/* Cartões pequenos de resultado (132px): "1,600 Grafts" em 18px não
		   cabia e era cortado. */
		.rcard:not(.rcard--scott):not(.rcard--daniel) .rcard__meta-item {
			font-size: 15px;
		}

		/* Depoimentos: a data desce inteira para baixo das estrelas em vez
		   de quebrar em "15 / weeks / ago". */
		.tcard__meta,
		.tcard__info,
		.tcard__stars-row {
			height: auto;
		}

		.tcard__stars-row {
			flex-wrap: wrap;
			row-gap: 0;
		}

		.tcard__when {
			white-space: nowrap;
		}

		/* Rodapé: menu e contato empilham — a coluna de contato ficava com
		   112px e o telefone quebrava em três linhas. */
		.ftr__columns {
			grid-template-columns: minmax(0, 1fr);
		}
	}
}