/*
 * home.css — sezioni della homepage.
 *
 * Riferimento: Figma node 2-13 (Homepage). I node-id delle singole sezioni
 * sono annotati in testa a ciascun blocco e nei template-parts.
 *
 * Il design è disegnato su un canvas da 1920px. Le misure fisse che trovi qui
 * (587, 435, 580…) sono quelle del design e stanno in tokens.css; il
 * responsive le scioglie in responsive.css.
 */

/* =============================================================================
   SCHEMA DI SEZIONE
   =============================================================================
   Si ripete identico in "Le linee" e "In evidenza": etichetta, filetto,
   contenuto. Scritto una volta sola.
   ========================================================================== */

/*
 * Lo stacco dalla sezione precedente cambia da sezione a sezione — nel Figma
 * sono 55, 66 e 77px — quindi e' una variabile che ogni sezione imposta.
 */
.tomas-section {
	padding: var(--tomas-section-top, 0) var(--tomas-gutter) 0;
}

.tomas-section__head {
	padding-bottom: var(--tomas-space-label); /* etichetta → filetto: 37px */
}

.tomas-section__rule {
	border: 0;
	border-top: 1px solid var(--tomas-rule);
	/*
	 * Filetto → contenuto. Le due sezioni non hanno la stessa distanza nel
	 * Figma — 36px nelle linee, 39px in evidenza — quindi e' una variabile.
	 * Il valore e' fra i due top e il filetto ne occupa 1.
	 */
	margin: 0 0 var(--tomas-section-rule-gap, 35px);
}

/* =============================================================================
   1. HERO — node 10:16, 19:143, 19:146, 19:148, 36:16…36:23
   =============================================================================
   Carosello a tutta pagina. L'altezza e' 100vh comprese promo bar e header,
   quindi tutto quello che sta dentro e' ancorato al FONDO: le quote del Figma
   si misurano dal bordo inferiore, che e' l'unico che non si muove quando
   cambia l'altezza della finestra.
   ========================================================================== */

.tomas-hero {
	position: relative;
	/*
	 * 100vh totali meno promo bar e header. La seconda riga vince dove svh e'
	 * supportato: su mobile vh conta anche la barra dell'indirizzo, e l'hero
	 * finirebbe piu' alto dello schermo.
	 */
	height: calc(100vh - var(--tomas-promo-h) - var(--tomas-header-h));
	height: calc(100svh - var(--tomas-promo-h) - var(--tomas-header-h));
	background: var(--tomas-ink);
	color: var(--tomas-ink-invert);
	overflow: hidden;
	isolation: isolate;
}

/* --- Le slide -------------------------------------------------------------
 * Impilate nello stesso posto e incrociate in dissolvenza: niente pista
 * orizzontale da traslare, che su un hero a tutta pagina costringerebbe a
 * conoscere la larghezza in anticipo.
 */

.tomas-hero__slides {
	position: absolute;
	inset: 0;
}

.tomas-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--tomas-hero-fade) var(--tomas-ease),
		visibility 0s linear var(--tomas-hero-fade);
}

.tomas-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--tomas-hero-fade) var(--tomas-ease);
}

.tomas-hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

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

/*
 * Ingrandimento lento mentre la slide e' in scena.
 *
 * L'animazione sta su TUTTE le immagini ed e' in pausa: quella attiva la fa
 * correre. Il punto e' cosa succede alla slide che esce — se l'animazione
 * venisse tolta insieme alla classe, l'immagine tornerebbe di colpo a scala 1
 * mentre sta ancora sfumando, e lo scatto si vede. In pausa invece resta
 * ferma dov'era e se ne va cosi' com'e'.
 *
 * La rimette a zero il JS quando la slide rientra in scena, in un momento in
 * cui e' ancora trasparente e il salto non si vede.
 */
.tomas-hero__media img {
	animation: tomas-hero-zoom var(--tomas-hero-zoom-duration) var(--tomas-ease) forwards;
	animation-play-state: paused;
}

.tomas-hero__slide.is-active .tomas-hero__media img {
	animation-play-state: running;
}

@keyframes tomas-hero-zoom {
	from { transform: scale(1); }
	to   { transform: scale(1.06); }
}

/*
 * Senza questa velatura in diagonale il titolo bianco finisce su cielo
 * chiaro e diventa illeggibile. E' parte del design, non una rifinitura.
 */
.tomas-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--tomas-hero-scrim);
}

/* --- Testi ----------------------------------------------------------------
 * Ancorati al fondo: nel Figma il paragrafo chiude a 860 su un hero che
 * chiude a 1080, quindi 220px dal bordo inferiore (227 contando l'altezza
 * resa del testo invece di quella del suo box).
 */

.tomas-hero__content {
	position: absolute;
	z-index: 1;
	left: var(--tomas-gutter);
	bottom: 227px;
	width: 435px;
}

.tomas-hero__eyebrow {
	color: var(--tomas-brand);
}

.tomas-hero__title {
	/* "collection" chiude a 650 e il titolo apre a 649: si sovrappongono di 1. */
	margin-top: -1px;
}

.tomas-hero__text {
	margin-top: 12px; /* titolo 649 (h 104, chiude a 753) → testo 765 */
	color: var(--tomas-ink-invert);
}

/* --- Comandi dello slider -------------------------------------------------
 * Barra e contatore stanno sulla STESSA riga: nel Figma la barra e' a x60 e
 * il contatore a x222, centrati sulla stessa quota (957).
 */

.tomas-hero__slider {
	position: absolute;
	z-index: 1;
	left: var(--tomas-gutter);
	/*
	 * La riga e' alta quanto il contatore (24px) e la barra le sta in mezzo:
	 * perche' la barra cada a 957 — cioe' 123px dal fondo — la riga deve
	 * chiudere a 111px dal fondo.
	 */
	bottom: 111px;
}

.tomas-hero__nav {
	display: flex;
	align-items: center;
	gap: 22px;
}

.tomas-hero__progress {
	position: relative;
	width: 140px;
	height: 1px;
	background: rgba(255, 255, 255, 0.4);
	overflow: hidden;
}

/*
 * Si riempie con il tempo della slide, non a scatti: e' il comportamento che
 * spiega perche' nel Figma la barra e' piena al 39% e non al 25% che darebbe
 * "1 di 4". La riavvia il JS a ogni cambio.
 */
.tomas-hero__progress-bar {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 1px;
	background: var(--tomas-ink-invert);
	transform-origin: left;
	transform: scaleX(0);
	animation: tomas-hero-progress var(--tomas-hero-interval) linear forwards;
}

/*
 * Ai cambi di slide la barra prima si ritira verso sinistra con elasticita',
 * poi ricomincia. La classe la mette il JS: al primo giro non c'e' niente da
 * ritirare — la barra parte da zero — e un ritiro mostrerebbe un lampo di
 * barra piena che non e' mai esistita.
 *
 * Il riempimento dura quanto la slide MENO il ritiro: i due pezzi insieme
 * fanno l'intervallo, o barra e carosello si scollano a ogni giro.
 */
.tomas-hero__progress-bar.is-cycling {
	animation:
		tomas-hero-retract var(--tomas-hero-retract) var(--tomas-ease-out) forwards,
		tomas-hero-progress calc(var(--tomas-hero-interval) - var(--tomas-hero-retract)) linear var(--tomas-hero-retract) forwards;
}

@keyframes tomas-hero-progress {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/*
 * Ritiro elastico, in un movimento solo e senza inversioni di direzione.
 *
 * Il primo tentativo rimbalzava — zero, poi fuori di 10px, poi zero — e quel
 * ritorno indietro in un decimo di secondo non si legge come elasticita': si
 * legge come uno scatto. L'elasticita' sta invece nelle due curve: parte
 * accelerando come una molla che si libera, e gli ultimi millimetri li fa
 * rallentando fino a posarsi.
 */
@keyframes tomas-hero-retract {
	0% {
		transform: scaleX(1);
		/* Scatta via subito, come una molla che si libera. */
		animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	}
	70% {
		transform: scaleX(0.04);
		/* Gli ultimi millimetri li fa posandosi. */
		animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
	}
	100% {
		transform: scaleX(0);
	}
}

.tomas-hero__counter {
	font-family: var(--tomas-font-ui);
	font-weight: var(--tomas-weight-medium);
	font-size: var(--tomas-fs-small);
	line-height: var(--tomas-lh-ui);
	letter-spacing: var(--tomas-ls-small);
	text-transform: uppercase;
	/* I numeri non devono ballare quando passano da 1 a 2 cifre. */
	font-variant-numeric: tabular-nums;
}

/*
 * Il numero che cambia entra dal basso. La finestrella ritaglia: senza
 * overflow nascosto il numero entrante si vedrebbe arrivare da sotto la riga
 * invece di comparire.
 */
.tomas-hero__counter-slot {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	height: var(--tomas-lh-ui);
}

.tomas-hero__counter-num {
	display: block;
	animation: tomas-hero-count var(--tomas-hero-count) var(--tomas-ease-out);
}

@keyframes tomas-hero-count {
	from { transform: translateY(100%); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

/* --- Invito allo scorrimento ----------------------------------------------
 * Ancorato alla BASE dell'hero: nel Figma la linea va da 940 a 1080, cioe'
 * tocca esattamente il bordo inferiore.
 */

.tomas-hero__scroll {
	position: absolute;
	z-index: 1;
	right: var(--tomas-gutter);
	bottom: 0;
	/*
	 * Nel Figma e' la LINEA a cadere sul bordo del margine, con il testo
	 * centrato su di lei: l'etichetta sborda di mezza larghezza oltre il
	 * margine. Senza questo spostamento sarebbe l'etichetta ad allinearsi al
	 * bordo, e la linea resterebbe 12px piu' dentro.
	 */
	transform: translateX(50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px; /* testo chiude a 918 → linea a 940 */
	/*
	 * Il writing-mode sta sull'ETICHETTA, non qui. Su un contenitore in
	 * vertical-rl l'asse dei blocchi diventa orizzontale, e flex-direction:
	 * column impilerebbe i figli uno DI FIANCO all'altro: il testo finirebbe
	 * accanto alla linea invece che sopra.
	 */
	font-family: var(--tomas-font-ui);
	font-weight: var(--tomas-weight-medium);
	font-size: var(--tomas-fs-tiny);
	line-height: var(--tomas-lh-ui);
	letter-spacing: var(--tomas-ls-tiny);
	text-transform: uppercase;
}

.tomas-hero__scroll-label {
	writing-mode: vertical-rl;
}

.tomas-hero__scroll-line {
	position: relative;
	width: 1px;
	height: 140px;
	background: rgba(255, 255, 255, 0.4);
	overflow: hidden;
}

/*
 * Il segmento bianco scende dall'alto, poi si scolora sempre dall'alto: e'
 * lo scorrimento mimato. Due mezzi giri di una sola animazione, con l'origine
 * che si sposta a meta' corsa — crescendo da top si allunga verso il basso,
 * rimpicciolendo da bottom il bordo alto scende.
 */
.tomas-hero__scroll-line::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--tomas-ink-invert);
	animation: tomas-hero-scroll 2.4s var(--tomas-ease) infinite;
}

@keyframes tomas-hero-scroll {
	0%   { transform: scaleY(0); transform-origin: top; }
	45%  { transform: scaleY(1); transform-origin: top; }
	55%  { transform: scaleY(1); transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

/*
 * Quando il carosello si ferma (lo decide main.js, al focus da tastiera —
 * NON al passaggio del mouse) devono fermarsi anche le animazioni CSS: una
 * barra che continua a correre su una slide ferma dice una cosa falsa.
 */
.tomas-hero.is-paused .tomas-hero__progress-bar,
.tomas-hero.is-paused .tomas-hero__counter-num,
.tomas-hero.is-paused .tomas-hero__media img {
	animation-play-state: paused;
}

/*
 * Chi ha chiesto meno movimento non deve subire ne' l'ingrandimento, ne' la
 * barra che corre, ne' la linea che pulsa. Il carosello si ferma del tutto —
 * lo decide main.js — e resta la prima slide.
 */
@media (prefers-reduced-motion: reduce) {
	.tomas-hero__media img,
	.tomas-hero__progress-bar,
	.tomas-hero__progress-bar.is-cycling,
	.tomas-hero__counter-num,
	.tomas-hero__scroll-line::after {
		animation: none;
	}

	.tomas-hero__progress-bar {
		transform: scaleX(1);
	}
}

/* =============================================================================
   2. LE LINEE — node 46:93, 46:94, 134:38, 134:75, 138:89
   =============================================================================
   Tre colonne da 587px: uomo, donna, e una terza che impila la card accessori
   (più bassa) e il blocco "made in italy". Le tre colonne finiscono alla
   stessa quota, ed è il motivo per cui la terza è composta così.
   ========================================================================== */

/* Hero chiude a 1080, l'etichetta apre a 1135. */
.tomas-linee {
	--tomas-section-top: 55px;
}

.tomas-linee__grid {
	display: grid;
	/*
	 * Colonne in frazioni, non in pixel. A 1920 il conto torna esatto —
	 * (1800 - 40) / 3 = 587, la misura del Figma — ma a 1905, cioe' su uno
	 * schermo da 1920 CON la barra di scorrimento, tre colonne fisse da 587
	 * sommano 1801 su 1785 disponibili e si mangiano 16px del margine
	 * destro. Con le frazioni il margine resta simmetrico a qualunque
	 * larghezza.
	 */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--tomas-gap);
}

/* --- Card di linea --------------------------------------------------------- */

.tomas-linea {
	position: relative;
	display: block;
	overflow: hidden;
	color: var(--tomas-ink-invert);
}

.tomas-linea--square {
	aspect-ratio: 1 / 1;
}

/* La card accessori è più bassa: 587×330. */
.tomas-linea--wide {
	aspect-ratio: 587 / 330;
}

.tomas-linea__media {
	position: absolute;
	inset: 0;
}

.tomas-linea__media img,
.tomas-linea__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Il video del termine copre la foto solo all'hover, e solo se il campo c'e':
 * senza, resta l'immagine. Lo avvia e lo riavvolge main.js — il CSS da solo
 * non puo' far partire un video.
 *
 * object-fit sul video serve quanto sull'immagine: un video 16:9 dentro una
 * card quadrata, senza, si deforma.
 */
.tomas-linea__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity var(--tomas-duration) var(--tomas-ease);
}

.tomas-linea:hover .tomas-linea__video,
.tomas-linea:focus-visible .tomas-linea__video {
	opacity: 1;
}

/*
 * NESSUNA velatura sulle card di linea: il Figma non ne ha, e le foto del
 * design sono gia' scure nella parte bassa dove cade il titolo.
 *
 * Se un domani venisse caricata una foto chiara il titolo bianco diventerebbe
 * illeggibile: in quel caso si rimette una sfumatura qui, ma e' una scelta da
 * prendere guardando le foto vere, non da dare per scontata.
 */

.tomas-linea__body {
	position: absolute;
	z-index: 1;
	left: 40px;   /* 6.81% di 587 */
	right: 40px;
	bottom: 61px; /* 10.39% di 587 */
}

.tomas-linea__title {
	font-family: var(--tomas-font-ui);
	font-weight: var(--tomas-weight-semibold);
	font-size: var(--tomas-fs-card-title);
	line-height: normal;
	text-transform: uppercase;
	color: var(--tomas-ink-invert);
	/*
	 * A blocco: sono due <span> dentro un <a>, e in linea finirebbero sulla
	 * stessa riga — "UOMOCOLLECTION". Nel Figma "collection" sta sotto.
	 */
	display: block;
}

.tomas-linea__eyebrow {
	display: block;
	font-family: var(--tomas-font-ui);
	font-weight: var(--tomas-weight-medium);
	font-size: var(--tomas-fs-label);
	line-height: var(--tomas-lh-ui);
	letter-spacing: var(--tomas-ls-label);
	text-transform: uppercase;
	color: var(--tomas-ink-invert);
}

.tomas-linea--wide .tomas-linea__body {
	bottom: 35px; /* 10.61% di 330 */
}

/* --- Terza colonna: accessori + blocco "made in italy" --------------------- */

.tomas-linee__aside {
	display: flex;
	flex-direction: column;
}

.tomas-linee__claim {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: var(--tomas-space-md);
	/* card accessori a 1538 → bandiera a 1563 */
	margin-top: 25px;
	flex: 1;
}

/*
 * Il testo non parte dal bordo della colonna: nel Figma e' a 1291 su una
 * colonna che apre a 1274, e scende di 32px rispetto alla bandiera.
 */
.tomas-linee__claim-text {
	grid-column: 1;
	padding-left: 17px;
	padding-top: 32px;
}

/* Il titolo sta su una riga sola: e' piu' largo del paragrafo sotto. */
.tomas-linee__claim-text .tomas-title {
	max-width: 371px;
}

/*
 * Il paragrafo arriva dall'editor, quindi dentro c'e' un <p> suo: lo stile
 * sta sul contenitore e il paragrafo lo eredita. .tomas-richtext darebbe
 * 20px fra un blocco e l'altro, che qui non servono.
 */
.tomas-linee__claim-text .tomas-body > * + * {
	margin-top: var(--tomas-lh-body);
}

.tomas-linee__claim-text .tomas-body {
	max-width: 327px;
}

.tomas-linee__claim-text .tomas-body {
	max-width: 327px;
	/*
	 * Nel Figma fra i due top ci sono 34px e il box del titolo ne occupa 23,
	 * ma reso ne occupa 19: la distanza utile e' 15.
	 */
	margin-top: 15px;
}

.tomas-linee__claim-flag {
	grid-column: 2;
	align-self: start;
	/*
	 * justify-self e' necessario: la colonna e' larga quanto la CTA, non
	 * quanto la bandiera, e senza questo la bandiera resta appoggiata al
	 * bordo sinistro della colonna con il margine destro che non spinge
	 * niente.
	 */
	justify-self: end;
	/* Bandiera a 1742 su una colonna che chiude a 1861: 25px di rientro. */
	margin-right: 25px;
	/* Larghezza sul contenitore e non solo sull'SVG, o il box resta piu' largo. */
	width: 94px;
}

.tomas-linee__claim-flag svg {
	width: 94px;
	height: auto;
}

/* La CTA chiude la colonna in basso a destra, allineata alla bandiera. */
.tomas-linee__claim-cta {
	grid-column: 2;
	/* La CTA chiude esattamente sul bordo destro della colonna. */
	justify-self: end;
	align-self: end;
}

/* =============================================================================
   3. IN EVIDENZA — node 40:89, 40:91, 40:37…40:84, 71:296
   =============================================================================
   Carosello di card da 435px: quattro visibili, scorre di una card alla
   volta. La CARD NON STA QUI, sta in base.css: la stampano in due posti —
   la home e, dal passo 8, il catalogo — e il markup è uno solo
   (template-parts/product-card.php). Qui c'è la sezione e nient'altro.
   ========================================================================== */

/* Le colonne delle linee chiudono a 1795, l'etichetta apre a 1861. */
.tomas-evidenza {
	--tomas-section-top: 66px;
	--tomas-section-rule-gap: 38px;
}

/*
 * La riga scorre, e scorre da sé: dito, trackpad e tastiera funzionano senza
 * JavaScript, che serve solo a tenere in pari l'indicatore. Lo scroll-snap
 * ferma le card sul bordo sinistro invece di lasciarne una a metà.
 */
.tomas-evidenza__grid {
	display: grid;
	/* Stessa ragione delle linee: (1800 - 60) / 4 = 435 esatti a 1920. */
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 3 * var(--tomas-gap)) / 4);
	gap: var(--tomas-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/*
	 * Lo scorrimento morbido si dichiara qui e non nel JS: così chi ha
	 * chiesto meno movimento lo spegne col resto delle transizioni (vedi
	 * il blocco prefers-reduced-motion in base.css), e vale anche per il
	 * salto che il browser fa da sé quando una card riceve il focus.
	 */
	scroll-behavior: smooth;
	/*
	 * La barra di scorrimento non è nel design e lo spazio che occupa
	 * sposterebbe in su l'indicatore: si nasconde. Il carosello resta
	 * scorrevole, e i link dentro le card si raggiungono con TAB — il browser
	 * li porta in vista da sé.
	 */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.tomas-evidenza__grid::-webkit-scrollbar {
	display: none;
}

.tomas-evidenza .tomas-product {
	scroll-snap-align: start;
}

/* --- Indicatore ------------------------------------------------------------
 * Tre segmenti, non tre pallini: node 71:296 è un export di tre righe alte
 * 2px, l'accesa da 80 e le spente da 30. Sono tre perché sei card viste
 * quattro alla volta hanno tre posizioni di scorrimento.
 *
 * La larghezza è in transizione, così il passaggio da una posizione all'altra
 * si legge come un movimento solo invece di due lampi.
 */

.tomas-evidenza__dots {
	display: flex;
	justify-content: center;
	gap: var(--tomas-dot-gap);
	margin-top: 63px; /* card a 2614 → indicatore a 2677 */
}

.tomas-evidenza__dot {
	position: relative;
	width: var(--tomas-dot-w);
	height: var(--tomas-dot-h);
	background: var(--tomas-dot-off);
	transition: width var(--tomas-duration) var(--tomas-ease),
		background-color var(--tomas-duration) var(--tomas-ease);
}

.tomas-evidenza__dot.is-active {
	width: var(--tomas-dot-w-active);
	background: var(--tomas-brand);
}

/*
 * Un bersaglio alto 2px non si prende col dito: lo pseudo-elemento allarga
 * l'area cliccabile sopra e sotto senza cambiare il disegno.
 */
.tomas-evidenza__dot::before {
	content: "";
	position: absolute;
	inset: -14px 0;
}

/* =============================================================================
   4. AZIENDA — node 46:112, 46:138, 46:136, 46:135, 55:175, 71:287
   =============================================================================
   Immagine grande a sinistra, testo a destra, e una seconda immagine piccola
   appoggiata in basso a destra, allineata al fondo della grande.
   ========================================================================== */

.tomas-azienda {
	display: grid;
	/*
	 * 1343 e 415 sono le due larghezze del Figma: espresse in frazioni
	 * restano in proporzione anche quando la pagina non e' larga 1920.
	 */
	grid-template-columns: minmax(0, 1343fr) minmax(0, 415fr);
	column-gap: 42px; /* immagine fino a 1403 → testo a 1445 */
	align-items: end;
	padding: 77px var(--tomas-gutter) 0; /* pallini chiudono a 2679 → immagine a 2756 */
}

.tomas-azienda__media {
	grid-column: 1;
	grid-row: 1;
	aspect-ratio: 1343 / 600;
	overflow: hidden;
}

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

.tomas-azienda__body {
	grid-column: 2;
	grid-row: 1;
	/*
	 * Il testo non è allineato al fondo dell'immagine ma parte più in alto:
	 * 2799 contro i 2756 dell'immagine. align-self lo stacca dall'ancoraggio
	 * in basso della griglia.
	 */
	align-self: start;
	padding-top: 43px;
	max-width: 415px;
}

.tomas-azienda__title {
	max-width: 415px;
}

.tomas-azienda__subtitle {
	margin-top: 31px; /* titolo chiude a 2903 → sottotitolo a 2934 */
	max-width: 379px;
}

.tomas-azienda__text {
	/* Stessa aritmetica del claim: box 23, reso 19, distanza utile 16. */
	margin-top: 16px;
	max-width: 376px;
}

.tomas-azienda__cta {
	margin-top: 31px; /* testo chiude a 3057 → CTA a 3088 */
}

/*
 * Immagine piccola: nel Figma è appoggiata sotto la CTA e finisce esattamente
 * alla quota in cui finisce l'immagine grande (3356 entrambe).
 */
.tomas-azienda__thumb {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	justify-self: end;
	width: 163px;
	aspect-ratio: 163 / 218;
	overflow: hidden;
}

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

/* =============================================================================
   5. CITAZIONE — node 55:266, 46:113, 46:115, 46:117
   =============================================================================
   Icona, frase grande e paragrafo, tutto centrato, chiuso da un filetto.
   ========================================================================== */

.tomas-quote {
	/*
	 * In basso 368px: nel Figma fra il filetto di chiusura (3724) e il nastro
	 * (4092) c'e' questo respiro, ed e' quello che stacca la home dal footer.
	 * Sta qui e non sul nastro perche' il nastro e' chrome di ogni pagina, e
	 * altrove quel vuoto non ha senso.
	 */
	padding: 77px var(--tomas-gutter) 367px; /* immagine 3356 → icona 3433 */
	text-align: center;
}

.tomas-quote__icon {
	display: flex;
	justify-content: center;
	color: var(--tomas-brand);
}

.tomas-quote__title {
	margin: 26px auto 0; /* icona chiude a 3458 → frase a 3484 */
	max-width: 886px;
}

.tomas-quote__text {
	margin: 27px auto 0; /* frase chiude a 3588 → testo a 3615 */
	max-width: 586px;
}

.tomas-quote__rule {
	/*
	 * Nel Figma il box del testo e' alto 57 ma le due righe ne occupano 44:
	 * la distanza utile dal testo reso al filetto e' 65, non 52.
	 */
	margin-top: 65px;
}