/*
 * Zafira Signature - widget "Zafira - Lista Numerada" (zafira_feature_row).
 * Cada linha: numero grande (Playfair Display) sobreposto ao canto superior
 * direito da imagem 400x400, coluna de texto a direita com titulo+subtitulo
 * empilhados sobre a lista de bullets (travessao substituido por um traco
 * horizontal de 12px, como no Figma). Divisoria fina entre linhas (nao antes
 * da primeira). Valores verificados no Figma (node 210:251-210:322, frames
 * "incluido 01" a "incluido 04"): imagem 400x400; numeral 152px/136.8px de
 * altura de linha/-4.56px de tracking a 70% de opacidade, encostado ao canto
 * superior direito da imagem; titulo Playfair Display 500 42px/52.5px,
 * tracking -0.84px; subtitulo Playfair Display italico 20px/36.45px,
 * tracking -0.3px, largura maxima 422px; lista Montserrat 16px/25.6px,
 * cor #0f3c53, com traco de 12px a 50% de opacidade em vez de marcador.
 */

.zafira-feature-row-list {
	display: flex;
	flex-direction: column;
}

.zafira-feature-row {
	position: relative;
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	column-gap: clamp( 32px, 20vw, 252px );
	row-gap: 32px;
	padding: 112px 0;
}

.zafira-feature-row--divider {
	border-top: 1px solid rgba(121, 155, 120, 0.5);
}

.zafira-feature-row-list > .zafira-feature-row:first-child {
	padding-top: 0;
	border-top: none;
}

/*
 * Efeito "scroll empilhado" (node Figma 210:183, modo apresentacao):
 * um unico "ecra" fica pousado (position: sticky) por baixo do header
 * enquanto se faz scroll; dentro dele, os passos ficam todos sobrepostos
 * exatamente na mesma posicao (position: absolute) e cada um, a partir do
 * segundo, entra a deslizar de baixo para cima (transform: translateY,
 * calculado em JS a partir do progresso do scroll) ate tapar por completo
 * o anterior, que fica parado por baixo - como um acordeao. Ao inverter o
 * sentido do scroll o deslize acontece ao contrario de forma automatica,
 * porque a posicao e sempre calculada a partir do scroll atual.
 *
 * A altura total da lista (".zafira-feature-row-list--stacked") e definida
 * de forma explicita em JS (assets/js/zafira-feature-row.js), nao aqui:
 * testado nesta sessao que o sticky do "ecra" (".zafira-feature-row-pin")
 * so fica fixo de forma fiavel quando o pai tem uma altura explicita (px
 * definido diretamente no elemento) - com a altura a vir apenas de forma
 * implicita o sticky nao prende durante o scroll em Chromium. Requer
 * tambem que nenhum container Elementor pai tenha overflow:hidden/auto,
 * senao o sticky deixa de funcionar. Sem JS a lista fica em fluxo normal,
 * sem o efeito - degradacao aceitavel.
 */
/* Quando o container Elementor pai tem align-items:center (comum nos
   containers "boxed" do site), um item flex sem conteudo em fluxo normal
   (aqui, os passos sao todos position:absolute) encolhe para largura 0 -
   forcamos a esticar e a ocupar a largura toda do container na mesma. */
.elementor-widget-zafira_feature_row {
	align-self: stretch;
	width: 100%;
}

.zafira-feature-row-list--stacked {
	position: relative;
	width: 100%;
}

.zafira-feature-row-list--stacked {
	/* 77px = altura do header fixo do site + ~48px de respiro, para o "ecra"
	   fixo nao ficar colado ao header e sobrar espaco de leitura por cima. */
	--zfr-sticky-top: 125px;
}

.zafira-feature-row-list--stacked .zafira-feature-row-pin {
	position: sticky;
	top: var(--zfr-sticky-top);
	width: 100%;
	height: calc(100vh - var(--zfr-sticky-top));
	overflow: hidden;
}

.zafira-feature-row-list--stacked .zafira-feature-row {
	position: absolute;
	inset: 0;
	align-items: center;
	padding: 60px 0;
	overflow-y: auto;
	background: var(--zafira-bg, #fff);
	transform: translateY(0);
	will-change: transform;
}

.zafira-feature-row-list--stacked .zafira-feature-row[data-zfr-panel='0'] {
	border-top: none;
}

.zafira-feature-row__media {
	position: relative;
	flex: 0 0 400px;
	width: 400px;
	height: 400px;
}

.zafira-feature-row__image {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
}

.zafira-feature-row__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.zafira-feature-row__number {
	position: absolute;
	z-index: 0;
	top: 97px;
	left: 353px;
	transform: translateY(-50%);
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	font-size: 152px;
	line-height: 136.8px;
	letter-spacing: -4.56px;
	color: rgba(233, 227, 213, 0.7);
	color: color-mix(in srgb, var(--zafira-cream, #e9e3d5) 70%, transparent);
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
	font-variant-numeric: lining-nums proportional-nums;
}

.zafira-feature-row__text {
	display: flex;
	flex-direction: column;
	gap: 56px;
	flex: 1 1 420px;
	min-width: 280px;
	max-width: 628px;
}

.zafira-feature-row__heading {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.zafira-feature-row__title {
	margin: 0 !important;
	font-family: 'Playfair Display', serif;
	font-weight: 500;
	font-size: 42px;
	line-height: 52.5px;
	letter-spacing: -0.84px;
	color: var(--zafira-navy, #0f3c53);
}

.zafira-feature-row__subtitle {
	margin: 0 !important;
	max-width: 422px;
	font-family: 'Playfair Display', serif;
	font-style: italic;
	font-weight: 400;
	font-size: 20px;
	line-height: 36.45px;
	letter-spacing: -0.3px;
	color: var(--zafira-navy, #0f3c53);
}

.zafira-feature-row__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.zafira-feature-row__list li {
	position: relative;
	padding-left: 36px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 25.6px;
	color: var(--zafira-navy, #0f3c53);
}

.zafira-feature-row__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 13.7px;
	width: 12px;
	height: 1px;
	background: rgba(121, 155, 120, 0.5);
}



/* Ecras de desktop com pouca altura (ex.: portateis com resolucao curta,
   ou janela do browser pouco alta): o efeito de "acordeao" parecia nao
   existir porque, quando a altura disponivel no "ecra" fixo (100vh menos
   os 125px do cabecalho, ver --zfr-sticky-top) e menor que a altura
   natural do conteudo de um panel, a regra base `overflow-y: auto` no
   panel cria um scroll interno - o scroll do rato do utilizador fica
   entao capturado dentro desse scroll interno (comportamento padrao do
   browser: um elemento com overflow ainda por esgotar tem prioridade
   sobre o scroll da pagina) em vez de avancar o scroll da PAGINA, que e'
   o que realmente impulsiona a animacao via JS (zafira-feature-row.js).
   Resultado: o utilizador faz scroll, sente o rato "preso", a pagina nao
   avanca e a animacao nunca acontece. Reduz-se o padding vertical e
   alinha-se o conteudo ao topo (em vez de centrado) para caber na altura
   curta sem overflow, e overflow-y:hidden garante que o scroll do rato
   avanca sempre a pagina em vez de ficar preso no panel. Restrito a
   desktop (min-width:1110px) para nao interferir com o fallback
   mobile/tablet abaixo, que ja desativa o efeito por completo. */
@media (min-width: 1110px) and (max-height: 850px) {
	.zafira-feature-row-list--stacked .zafira-feature-row {
		align-items: flex-start;
		padding: 24px 0;
		overflow-y: hidden;
	}
}

/* Alturas muito curtas (ex.: <=650px): o painel com mais itens de lista
   (4, vs 3 nos outros) ainda excedia o espaco mesmo com o padding acima
   reduzido - aperta-se tambem o espacamento vertical interno do texto
   (titulo/subtitulo/lista), que por omissao usa 56px de gap. */
@media (min-width: 1110px) and (max-height: 650px) {
	.zafira-feature-row__text {
		gap: 24px;
	}
}

@media (max-width: 1109px) {
	/* The viewport-relative column-gap above (clamp(32px, 20vw, 252px))
	   combined with the fixed 400px image and the text column's 420px
	   flex-basis stops fitting on one line well before this breakpoint's
	   old 900px threshold - anywhere from ~1109px down to 901px the row
	   would flex-wrap unpredictably (image alone on its own line, text
	   dropping to a near-full-width line below it). Extending this
	   breakpoint's threshold up to 1109px (verified via CDP viewport
	   sweep: still fine at 1110px, wraps at 1105px and below) closes that
	   gap by handing the whole zone the same treatment as ≤900px used to
	   get on its own. */
	.zafira-feature-row {
		column-gap: 32px;
		padding: 56px 0;
	}

	.zafira-feature-row__media {
		flex: 0 0 200px;
		width: 200px;
		height: 200px;
	}

	.zafira-feature-row__number {
		font-size: 96px;
		line-height: 86px;
		letter-spacing: -2.9px;
		top: 48px;
		left: 176px;
	}

	.zafira-feature-row__title {
		font-size: 30px;
		line-height: 1.25;
	}

	.zafira-feature-row__subtitle {
		max-width: none;
	}
}

@media (max-width: 1200px) {
	/* Threshold alargado de 560px para 1200px 2026-08-26 a pedido do
	   utilizador: o ESTILO VISUAL do cartao (moldura, fundo branco,
	   padding, numeral/titulo/imagem/subtitulo/lista) aplica-se a TODO o
	   intervalo mobile+tablet (0-1200px, o limite tablet/desktop definido
	   hoje no Kit Global) - so muda o numero de colunas do CONTENTOR
	   (.zafira-feature-row-pin): 1 coluna ate 768px (comportamento por
	   omissao definido aqui), 2 ou 3 colunas lado a lado entre 769-1200px
	   via um bloco mais abaixo neste ficheiro que so altera o
	   `display`/`grid-template-columns` do contentor, sem tocar no
	   estilo de cada cartao individual definido neste bloco. */
	/* Design de mobile completamente diferente do desktop (Figma node
	   234:2072, "Services"): cartao branco independente com moldura, em
	   vez da lista com fotos+numeral sobreposto usada em desktop/tablet.
	   A ordem visual (numero+titulo por cima, depois imagem, depois
	   subtitulo+lista) nao corresponde a ordem do DOM (media > numero+
	   imagem; text > heading > titulo+subtitulo; text > lista) - em vez
	   de reescrever o PHP, usa-se `display:contents` nos wrappers
	   intermedios (.media, .text, .heading) para "desembrulhar" os seus
	   filhos e reposiciona-los livremente num CSS Grid do proprio
	   `.zafira-feature-row`, com `grid-area` a mapear cada elemento para
	   a celula correta - a ordem no DOM deixa de importar. */

	/* The cards aren't direct children of .zafira-feature-row-list - the
	   desktop scroll-jack effect nests them all inside one
	   .zafira-feature-row-pin wrapper div first. `gap` on the list itself
	   has no visible effect (it only has that one child), so the actual
	   gap between cards has to go on the pin wrapper instead, which is
	   what really contains them at this breakpoint (already
	   position:static/block-flow here per the @media(max-width:1109px)
	   rule below - just needed flex+gap instead of default block flow,
	   which respects margins, not gap). */
	.zafira-feature-row-list--stacked .zafira-feature-row-pin {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.zafira-feature-row {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"num title"
			"image image"
			"sub sub"
			"list list";
		row-gap: 16px;
		column-gap: 12px;
		background: #fff;
		border: 1px solid rgba(121, 155, 120, 0.35);
		/* align-content:start (2026-08-27, ligado ao "mesmo tamanho" - ver
		   comentario extenso em .zafira-feature-row-pin no bloco
		   769-1200px acima): quando o cartao "Incluido" e' esticado pelo
		   align-items:stretch do pin (para igualar a altura ao vizinho de
		   linha), esta grelha interna passa a ter mais altura do que a soma
		   das suas 4 linhas (num/title, image, sub, list). Sem esta regra,
		   o valor por omissao `normal` comporta-se como `stretch` em grid e
		   reparte esse espaco extra pelas linhas auto (empurra
		   numero/titulo/imagem/subtitulo para baixo por quantidades
		   diferentes, o bug original). Com align-content:start, as 4 linhas
		   mantem a sua altura natural coladas ao topo e o espaco extra fica
		   apenas no fundo do cartao, depois da lista - cartoes com texto
		   mais curto ficam com mais espaco em branco no fundo, mas o
		   numero/titulo/imagem continuam sempre na mesma posicao,
		   independente da altura do cartao. */
		align-content: start;
	}

	/* !important + the higher-specificity selector needed: the
	   unscoped, no-media-query base rule .zafira-feature-row-list--stacked
	   .zafira-feature-row{padding:60px 0} (2 classes) was beating the
	   plain single-class rule above regardless of source order, leaving
	   left/right padding at 0 - measured on the live site, title sat
	   literally 1px from the card's edge at every width tested. */
	.zafira-feature-row-list--stacked .zafira-feature-row {
		padding: 18px !important;
	}

	/* Grid items default to min-width:auto, which for a spanning item
	   with a replaced element inside (the <img>) resists shrinking below
	   its NATURAL/intrinsic pixel size (e.g. ~300px for the "medium" WP
	   image size), even though it's visually `width:100%`. That pressure
	   gets distributed onto the grid's columns, including the "auto" one
	   used by the numeral - inflating it far past what "01" itself needs
	   and squeezing the title into a two-line wrap. min-width:0 on every
	   spanning item removes that pressure. */
	.zafira-feature-row__image,
	.zafira-feature-row__subtitle,
	.zafira-feature-row__list {
		min-width: 0;
	}

	/* !important needed: a later @media(max-width:1109px) block in this
	   same file also targets .zafira-feature-row-list--stacked
	   .zafira-feature-row with `border-top` at equal specificity - being
	   later in source order it would otherwise win even though this rule
	   is the one meant to apply at this narrower width. */
	.zafira-feature-row-list--stacked .zafira-feature-row,
	.zafira-feature-row-list--stacked .zafira-feature-row[data-zfr-panel='0'] {
		border: 1px solid rgba(121, 155, 120, 0.35) !important;
	}

	.experiencia_zafira .zafira-feature-row-list--stacked .zafira-feature-row {
		background: #fff !important;
	}

	/* .zafira-feature-row__custom-html is a wrapper the PHP template
	   prints around the raw items_html - the actual <ul> sits one level
	   INSIDE it, not as a direct child of .zafira-feature-row. Without
	   unwrapping it too, `grid-area` on .zafira-feature-row__list has no
	   effect at all (grid-area only works on direct grid children) and
	   the wrapper auto-places as an unnamed item, taking the "auto"
	   column's width from its own text-wrapping needs - which is what
	   was inflating that column far past what the two-digit numeral
	   sharing that column actually needs. */
	.zafira-feature-row__media,
	.zafira-feature-row__text,
	.zafira-feature-row__heading,
	.zafira-feature-row__custom-html {
		display: contents;
	}

	/* white-space:normal (not the base rule's nowrap) so the raw
	   tabs/newlines PHP outputs around the digits collapse properly -
	   under nowrap they were inflating this box to ~216px and squeezing
	   the title into a two-line wrap. transform:none clears the base
	   rule's translateY(-50%), a leftover from its old absolute/overlay
	   positioning that doesn't apply now that this sits in normal flow. */
	.zafira-feature-row__number,
	.experiencia_zafira .zafira-feature-row__number {
		grid-area: num;
		position: static;
		align-self: end;
		font-size: 48px;
		line-height: 1;
		letter-spacing: 0;
		white-space: normal;
		transform: none;
		color: #e9e3d5 !important;
	}

	.zafira-feature-row__title {
		grid-area: title;
		align-self: end;
		justify-self: end;
		font-size: 22px;
		font-weight: 500;
		line-height: 28px;
	}

	/* grid-column set explicitly (not just via grid-area's implicit span)
	   on every row that should cross both columns: named-area resolution
	   alone was leaving these landing in column 1 only, which is what
	   was actually inflating that column - the numeral shares column 1
	   with the list, so the list's own paragraph-wrapping width need was
	   sizing the "auto" track meant only for a 2-digit numeral. */
	.zafira-feature-row__image {
		grid-area: image;
		grid-column: 1 / -1;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
	}

	/* Pedido explicito do utilizador 2026-08-27: em tablet/mobile a imagem
	   do cartao tem de ficar QUADRADA (1:1) com enquadramento a partir do
	   TOPO da foto de origem, nao centrado - as fotos de origem (verificado
	   nesta sessao: todas ja sao quadradas, 1200x1200 ou 400x400) tem os
	   sujeitos posicionados no terco superior/medio da imagem. Antes desta
	   regra, esta caixa tinha uma altura fixa em pixels (260px) independente
	   da largura da coluna, o que produzia uma caixa NAO quadrada (retangular)
	   sempre que a largura da coluna nao coincidisse com 260px - o
	   object-fit:cover (regra base, `.zafira-feature-row__image img`) tinha
	   entao de recortar a imagem quadrada de origem para caber, cortando por
	   cima E por baixo de forma simetrica/centrada por omissao. Com
	   aspect-ratio:1/1 a caixa passa a ser sempre quadrada (acompanha a
	   largura da coluna), eliminando a distorcao de proporcao; com
	   object-position:top na regra seguinte, se ainda assim houver recorte
	   (ex.: pela diferenca entre uma imagem de origem 1200x1200 e o tamanho
	   WP "medium" 300x300 usado aqui, que ja e' 1:1 e por isso normalmente
	   nao precisa de recorte nenhum), este favorece sempre o TOPO da foto em
	   vez do centro. */
	.zafira-feature-row__image img {
		object-position: top center;
	}

	/* !important needed: .experiencia_zafira .zafira-feature-row__subtitle
	   (unscoped, further down this file) has higher specificity (2
	   classes vs 1) and would otherwise win regardless of source order,
	   overriding this with its own Montserrat/non-italic desktop style. */
	.zafira-feature-row__subtitle,
	.experiencia_zafira .zafira-feature-row__subtitle {
		grid-area: sub;
		grid-column: 1 / -1;
		max-width: none !important;
		font-family: 'Playfair Display', serif !important;
		font-style: italic !important;
		font-size: 14px !important;
		line-height: 22px !important;
		font-weight: 400 !important;
		color: #0f3c53 !important;
	}

	.zafira-feature-row__list {
		grid-area: list;
		grid-column: 1 / -1;
		gap: 10px;
	}

	.zafira-feature-row__list li {
		font-size: 14px;
		font-weight: 300;
		line-height: 22px;
	}

	.zafira-feature-row__list li::before {
		top: 10px;
	}
}

@media (max-width: 1200px) {
	/* Threshold alargado de 1109px para 1200px 2026-08-26: o mecanismo de
	   pin/sticky do desktop (position:sticky + altura fixa via
	   calc(100vh - topo)) tem de ficar desligado em TODO o intervalo onde
	   o design de cartao mobile agora se aplica (0-1200px, ver bloco mais
	   abaixo alargado para o mesmo limite) - caso contrario, entre
	   1110-1200px a grelha de 2 colunas adicionada para essa gama ficava
	   presa dentro de um painel sticky com overflow:hidden e altura
	   limitada ao ecra, cortando o conteudo. */
	/* O scroll-jacking de ecra inteiro nao funciona bem fora do desktop -
	   volta ao fluxo normal (sem pin/cover) em tablet+mobile. Alargado de
	   760px para 1109px (o mesmo limite tablet/mobile usado acima nesta
	   folha) depois de confirmar via CDP que o bug seguinte ja acontecia
	   a 900px, nao so abaixo de 760px: a imagem e o texto ficavam
	   verticalmente centrados um em relacao ao outro (align-items:center,
	   herdado do efeito de pin do desktop, onde faz sentido centrar o
	   "ecra" absolutamente posicionado) - assim que a imagem (altura fixa)
	   e o texto (altura variavel, normalmente maior) deixam de estar
	   ambos absolutamente sobrepostos e passam a fluxo normal lado a
	   lado, esse center empurra a imagem para baixo e sobrepoe-a ao
	   titulo/subtitulo da linha seguinte. */
	.zafira-feature-row-list--stacked .zafira-feature-row-pin {
		position: static;
		height: auto;
		overflow: visible;
	}

	.zafira-feature-row-list--stacked .zafira-feature-row {
		position: static;
		inset: auto;
		align-items: flex-start;
		transform: none !important;
		border-top: 1px solid rgba(121, 155, 120, 0.5);
	}

	.zafira-feature-row-list--stacked .zafira-feature-row[data-zfr-panel='0'] {
		border-top: none;
	}
}

/* Pedido explicito do utilizador 2026-08-26: "o design de zafira featured
   row em mobile vai ate 1200. mas de 1024 ate 1200px ficam lado a lado
   tipo cards" - entre 1024-1200px (a gama tablet definida hoje no Kit
   Global) os cartoes do design mobile (acima) passam de 1 por linha para
   2 lado a lado numa grelha, mantendo inalterado o estilo de cada cartao
   individual (moldura, padding, numeral/titulo/imagem/lista) - so o
   CONTENTOR (.zafira-feature-row-pin) muda de coluna flex unica para
   grelha; cada cartao continua a ser o mesmo grid/flex interno ja
   definido acima, apenas ocupa uma fracao da largura.

   Correcao 2026-08-26 (gama final): 769px-1200px, nao apenas
   1024-1200px - "de 768 a 1024 fica 2/2 ou 3 se forem só 3 também"
   (pedido explicito do utilizador) - toda a gama 769-1200px tem o
   mesmo comportamento de grelha, sem sub-caso distinto entre 769-1024
   e 1024-1200. Numero de colunas depende do numero de cartoes de cada
   seccao, nao e' sempre 2 - "se forem 4 cards ficam 2/2 se for 3, fica
   os 3 no mesmo". A seccao "Incluido" (689eb8d) tem 4 cartoes -> 2
   colunas (grelha 2x2), aplicado por esta regra generica/sem scope. A
   seccao "Experience" (85918fe, classe .experiencia_zafira) tem 3
   cartoes -> as 3 na mesma linha (3 colunas), com a regra scoped mais
   abaixo junto ao resto do CSS dessa seccao, que ganha por ter maior
   especificidade (uma classe extra) independentemente da ordem no
   ficheiro. */
@media (min-width: 769px) and (max-width: 1200px) {
	.zafira-feature-row-list--stacked .zafira-feature-row-pin {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
		/* 2026-08-27 pedido explicito do utilizador: "card do featured-row
		   tem que ficar do mesmo tamanho" - os cartoes na mesma linha da
		   grelha devem ter a MESMA altura. align-items:stretch (o
		   comportamento por omissao da grelha, que a sessao anterior tinha
		   trocado para `start` - ver historico abaixo) volta a ser usado
		   para esse efeito, mas desta vez sem reintroduzir o bug de
		   distribuicao de espaco interno: em vez de mudar align-items,
		   controla-se agora onde é que o espaco extra de cada cartao vai
		   parar - ver `align-content:start` em `.zafira-feature-row` (bloco
		   ~325 abaixo, cartao "Incluido"/grid) e o `align-content:flex-start`
		   ja existente no cartao "Experience"/flex (~linha 620). Com essas
		   duas regras, um cartao esticado pela grelha do pin fica com o seu
		   proprio conteudo (numero/titulo/imagem) ancorado ao TOPO e o
		   espaco extra sobra no FUNDO do cartao, em vez de se espalhar entre
		   os elementos - resolvendo "mesmo tamanho" sem repetir o bug
		   original (ver nota historica abaixo).

		   Nota historica (bug original, corrigido a 2026-08-26 com
		   align-items:start): com align-items:stretch e SEM as regras
		   align-content acima, um cartao esticado tinha espaco livre dentro
		   do seu proprio grid/flex, cujo align-content por omissao
		   (`normal`, que para grid se comporta como stretch) redistribuia
		   esse espaco como gaps extra entre imagem/numero+titulo/subtitulo -
		   proporcional a quanto mais curto era o conteudo desse cartao
		   especifico face ao seu maior vizinho de linha. Isso empurrava
		   titulos e numero para baixo por quantidades diferentes por
		   cartao (pior na seccao "experience" de 3 colunas, medido via CDP:
		   a 820px o offset titulo-topo/imagem-fundo dos 3 cartoes era
		   16px/38px/54px em vez de uniforme). align-items:start evitava o
		   bug ao nao esticar de todo - mas com isso os cartoes deixavam de
		   ter a mesma altura, o que e' agora o proprio requisito a cumprir.
		   A fixacao correta e' esticar o cartao (stretch) mas ancorar o seu
		   conteudo interno ao topo via align-content, nao evitar esticar. */
		align-items: stretch;
	}
}


/* versão experiencia zzafira */

.experiencia_zafira .zafira-feature-row-list--stacked .zafira-feature-row{
    background:#F4F1EA
}


.experiencia_zafira .zafira-feature-row__number{
    color:#fff;
}

.experiencia_zafira .zafira-feature-row__subtitle{
    color: #648063;
font-family: var(--font-family-Font-1, Montserrat);
font-size: var(--font-size-18, 18px);
font-style: normal;
font-weight: var(--font-weight-400, 400);
line-height: var(--line-height-30_6, 30.6px); /* 170% */
letter-spacing: var(--letter-spacing--0_09, -0.09px);
}

/* Mobile-only card design for the "experience" section (Figma node
   236:2269, "Experience"), scoped entirely under .experiencia_zafira so
   it cannot affect the other zafira_feature_row instance ("included"
   section) or its own separate mobile redesign. Simpler than that other
   card's rebuild: no bullet list here (items_html is empty for this
   instance's steps - the PHP template already skips rendering a <ul>,
   which matches Figma exactly), so flexbox with wrapped "full-width"
   items is enough - no CSS Grid/display:contents needed. */
@media (max-width: 1200px) {
	/* Threshold alargado de 560px para 1200px 2026-08-26, mesmo motivo do
	   bloco equivalente da outra seccao mais acima neste ficheiro: o
	   estilo do cartao aplica-se a 0-1200px, so o numero de colunas do
	   contentor muda a partir de 769px (bloco mais abaixo). */
	.experiencia_zafira .zafira-feature-row-list {
		gap: 20px;
	}

	/* !important on border/background: an earlier @media(max-width:1109px)
	   rule in this file also matches .zafira-feature-row-list--stacked
	   .zafira-feature-row with border-top/background at equal or lower
	   specificity but later source order (border-top), and the unscoped
	   .experiencia_zafira background rule above has matching specificity
	   but earlier source order - both would otherwise win over a plain
	   declaration here. */
	.experiencia_zafira .zafira-feature-row-list--stacked .zafira-feature-row,
	.experiencia_zafira .zafira-feature-row-list--stacked .zafira-feature-row[data-zfr-panel='0'] {
		display: flex !important;
		flex-flow: row wrap !important;
		/* flex-start (2026-08-27, correcao explicita do utilizador: "o
		   numero tem que alinhar a primeira frase e nao a 2 quando quebra
		   texto"). Historico: esta regra tinha sido `center`, depois
		   trocada para `flex-end` numa sessao anterior para resolver o
		   mesmo problema (numero a ficar "no meio" quando o titulo
		   quebrava para 2 linhas) ancorando-o a ULTIMA linha do titulo. O
		   utilizador reviu o resultado ao vivo e pediu o oposto: o numero
		   deve alinhar com a PRIMEIRA linha/frase do titulo, nao a ultima -
		   ou seja, deve ficar preso ao TOPO do bloco numero+titulo,
		   independentemente de o titulo ocupar 1 ou 2 linhas. flex-start
		   tambem tem a vantagem de ser inerentemente mais consistente entre
		   os 3 cartoes da mesma linha do que flex-end era: o topo do bloco
		   numero+titulo esta sempre na mesma posicao relativa ao cartao
		   (colado ao topo, por causa do align-content:flex-start do proprio
		   cartao - ver mais abaixo), ao passo que o fundo variava consoante
		   o titulo tivesse 1 ou 2 linhas. Nota: esta troca aplica-se apenas
		   a este bloco, scoped a .experiencia_zafira (seccao "Experience",
		   3 colunas) - o numero da seccao "Incluido" usa um mecanismo
		   diferente (grid area propria com align-self:end, linha ~403
		   acima) que o pedido do utilizador ("nas 3 colunas") nao visava. */
		align-items: flex-start !important;
		align-content: flex-start;
		position: static !important;
		inset: auto !important;
		row-gap: 16px;
		column-gap: 8px;
		background: #fff !important;
		border: 1px solid rgba(121, 155, 120, 0.35) !important;
		padding: 16px;
	}

	.experiencia_zafira .zafira-feature-row__media,
	.experiencia_zafira .zafira-feature-row__text,
	.experiencia_zafira .zafira-feature-row__heading {
		display: contents;
	}

	.experiencia_zafira .zafira-feature-row__image {
		order: 1;
		flex-basis: 100%;
		min-width: 0;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
	}

	/* Mesmo pedido/motivo da seccao "Incluido" (ver comentario extenso
	   junto de `.zafira-feature-row__image` mais acima neste ficheiro):
	   imagem quadrada (1:1) em vez de altura fixa (era 240px), com recorte
	   a favorecer o topo da foto de origem em vez do centro. */
	.experiencia_zafira .zafira-feature-row__image img {
		object-position: top center;
	}

	/* white-space:normal + transform:none: the base (desktop) rule sets
	   nowrap + a translateY(-50%) leftover from its absolute-positioned
	   overlay style, neither of which applies once this sits in normal
	   flow - nowrap in particular was found to inflate this box far past
	   its actual text width when combined with the raw whitespace PHP
	   prints around the digits. !important beats the unscoped
	   .experiencia_zafira color:#fff rule further up this file (same
	   specificity, but earlier source order would otherwise lose). */
	.experiencia_zafira .zafira-feature-row__number {
		order: 2;
		position: static;
		white-space: normal;
		transform: none;
		font-size: 24px;
		line-height: normal;
		letter-spacing: 0;
		color: #799b78 !important;
		/* align-self:flex-start !important (2026-08-27): sem isto, o
		   align-self:end herdado da regra generica/nao-scoped
		   `.zafira-feature-row__number, .experiencia_zafira
		   .zafira-feature-row__number { align-self:end }` la' em cima
		   (pensada para o layout de GRID da seccao "Incluido", onde "end"
		   alinha o numero ao fundo da SUA PROPRIA celula de grelha) tambem
		   se aplica aqui - mas num contexto de FLEXBOX, align-self num item
		   individual tem sempre prioridade sobre o align-items do
		   container-pai, por isso o align-items:flex-start posto no
		   container do cartao (~linha 659 acima) nao tinha efeito nenhum
		   sobre o numero: continuava ancorado ao FUNDO da linha
		   numero+titulo (confirmado via CDP: numero e titulo terminavam no
		   mesmo Y, nunca comecavam no mesmo Y). Este override restaura o
		   comportamento pretendido pelo align-items do container. */
		align-self: flex-start !important;
	}

	.experiencia_zafira .zafira-feature-row__title {
		order: 3;
		flex: 1 0 0;
		font-size: 22px;
		font-weight: 500;
		line-height: 28px;
		/* align-self:flex-start !important (2026-08-27): mesmo motivo do
		   numero acima - a regra generica/nao-scoped
		   `.zafira-feature-row__title { align-self:end; justify-self:end }`
		   (pensada para o "title" area da grelha da seccao "Incluido") caia
		   tambem aqui, ancorando o titulo ao fundo da linha
		   numero+titulo tal como o numero. Com AMBOS ancorados ao fundo,
		   ficavam sempre alinhados ENTRE si (o que parecia "correto" num
		   teste superficial) mas o bloco inteiro numero+titulo descia
		   consoante o titulo tivesse 1 ou 2 linhas - o oposto do pedido do
		   utilizador (numero alinhado a PRIMEIRA linha do titulo,
		   consistentemente). flex-start ancora ambos ao TOPO da linha, que
		   e' onde a primeira linha do titulo esta sempre, independente do
		   numero de linhas. justify-self nao se aplica em flexbox (e'
		   ignorado), por isso nao precisa de override aqui. */
		align-self: flex-start !important;
	}

	/* !important: overrides the unscoped .experiencia_zafira subtitle
	   rule just above (2-class specificity, matches this selector) which
	   sets an 18px non-italic Montserrat desktop style in a different
	   green. Figma's mobile card uses navy/14px/300 instead - not
	   italic, unlike the other section's subtitle style. */
	.experiencia_zafira .zafira-feature-row__subtitle {
		order: 4;
		flex-basis: 100%;
		max-width: none !important;
		font-family: 'Montserrat', sans-serif !important;
		font-style: normal !important;
		font-size: 14px !important;
		line-height: 22px !important;
		font-weight: 300 !important;
		color: #0f3c53 !important;
	}
}

/* Pedido explicito do utilizador 2026-08-26: entre 769-1200px, a seccao
   "Experience" (3 cartoes: "Compare connosco" / "Segurança de quem
   viaja" / "Grupos e eventos") deve mostrar os 3 na MESMA linha, ao
   contrario da seccao "Incluido" (4 cartoes, 2x2) que usa a regra
   generica mais acima neste ficheiro. Especificidade extra
   (.experiencia_zafira) garante que esta regra ganha sobre essa regra
   generica para esta seccao especificamente, independentemente da
   ordem no ficheiro. */
@media (min-width: 769px) and (max-width: 1200px) {
	.experiencia_zafira .zafira-feature-row-list--stacked .zafira-feature-row-pin {
		grid-template-columns: repeat(3, 1fr);
	}
}

/*
 * Scroll-reveal para tablet/mobile (<=1200px) - pedido do utilizador para
 * trazer para estes tamanhos alguma da mesma sensacao de animacao ao
 * scroll que o efeito de acordeao acima da ao desktop, sem alterar a
 * grelha de cartoes ja existente (ver zafira-feature-row.js, funcao
 * setupReveal(), que adiciona/remove estas classes via
 * IntersectionObserver). A classe `zfr-reveal` so e' aplicada por JS -
 * sem JS os cartoes ficam sempre visiveis (progressive enhancement),
 * por isso a regra de estado inicial (escondido) tem de estar scoped a
 * essa classe, nunca a `.zafira-feature-row` sozinho.
 */
@media (max-width: 1200px) {
	.zafira-feature-row.zfr-reveal {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity 0.6s ease, transform 0.6s ease;
	}

	.zafira-feature-row.zfr-reveal.zfr-visible {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 1200px) and (prefers-reduced-motion: reduce) {
	.zafira-feature-row.zfr-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/*
 * Parallax leve na imagem, APENAS na coluna unica de mobile (<=768px) -
 * pedido explicito do utilizador: nao aplicar quando os cartoes estao
 * lado a lado em grelha (2/2 ou 3 colunas, 769-1200px), so quando e' 1
 * por linha. A imagem recebe scale(1.18) para ter folga suficiente para
 * o translateY sem revelar bordas vazias (ver setupParallax() em
 * zafira-feature-row.js, que define --zfr-parallax-y por scroll,
 * limitado a +-28px). object-position:top center (regra ja existente
 * mais acima) continua a controlar o enquadramento base da foto - o
 * parallax so desloca essa base ligeiramente consoante o scroll.
 */
@media (max-width: 768px) {
	.zafira-feature-row__image {
		overflow: hidden;
	}

	.zafira-feature-row__image img {
		transform: translateY(var(--zfr-parallax-y, 0px)) scale(1.18);
		will-change: transform;
	}
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
	.zafira-feature-row__image img {
		transform: none;
	}
}