/*--------------------------------------------------
	Aura Studio — Additive Overrides
	This file does not modify any original Nanotech
	stylesheet. It only adds rules for the Aura
	landing (projects grid + modal, cards, hero aura), reusing existing
	Nanotech tokens (spacing, colors, typography)
	wherever possible. The header logo now uses real
	<img class="black-logo">/<img class="white-logo">
	tags, so the original #clapat-logo img.* opacity-
	swap rules already in style.css apply natively;
	only the logo height is overridden (see "Header logo").
---------------------------------------------------*/


/*--------------------------------------------------
	Projects Grid (Archive)

	Intentionally decoupled from ".showcase-portfolio"
	so the click-to-open / cursor "OPEN" affordance
	JS (scoped exactly to ".showcase-portfolio .clapat-
	item .slide-inner" and to ".trigger-item" clicks)
	never binds to these tiles. Tile ratio uses
	aspect-ratio: 1672/940 (source mockup ratio, ~16:9)
	instead of a vw-based height, so it stays correct at
	any container width instead of only at one viewport
	size. The pixel-dissolve reveal (.pixels-cover) and
	the image hover-scale are re-created here as pure
	CSS, using the same global, unscoped classes
	(.img-mask, .section-image, .item-image) the rest of
	the theme already relies on.
---------------------------------------------------*/

	.aura-projects-grid {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		width: calc(100% - 80px);
		margin: 40px auto 0;
	}

	.aura-projects-grid .clapat-item {
		position: relative;
		width: calc(33.3333% - 80px);
		max-width: calc(33.3333% - 80px);
		flex: 1 1 33.33%;
		aspect-ratio: 1672 / 940;
		margin: 40px;
		box-sizing: border-box;
	}

	.aura-projects-grid .slide-inner {
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		cursor: pointer;
	}

	.aura-projects-grid .section-image {
		transform: scale(1.03);
		transition: transform 0.5s ease-out 0s;
	}

	.aura-projects-grid .slide-inner:hover .section-image {
		transform: scale(1);
	}

	.aura-projects-grid .slide-caption {
		z-index: 10;
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		cursor: default;
		pointer-events: none;
		text-align: left;
		opacity: 0;
		display: flex;
		align-items: flex-end;
		transition: opacity 0.2s ease-out 0s;
	}

	.aura-projects-grid .slide-inner:hover .slide-caption {
		opacity: 1;
	}

	.aura-projects-grid .slide-title {
		margin: 0 0 24px 24px;
		padding: 6px 14px;
		font-size: 16px;
		line-height: 22px;
		font-weight: 500;
		color: #0c0c0c;
		background-color: rgba(255, 255, 255, 0.88);
		border-radius: 4px;
	}

	.aura-projects-grid .slide-title span {
		display: block;
	}

	/* Responsive — mirrors css/portfolio.css breakpoints for .expand-grid .clapat-item.default,
	   with an added 2-column tablet step (the original jumps straight from 3 to 1 column). */

	@media only screen and (max-width: 1466px) {
		.aura-projects-grid {
			width: calc(100% - 60px);
		}
		.aura-projects-grid .clapat-item {
			width: calc(33.3333% - 60px);
			max-width: calc(33.3333% - 60px);
			margin: 30px;
		}
	}

	@media only screen and (max-width: 1024px) {
		.aura-projects-grid {
			width: calc(100% - 40px);
		}
		.aura-projects-grid .clapat-item {
			width: calc(50% - 40px);
			max-width: calc(50% - 40px);
			flex: 1 1 50%;
			margin: 20px;
		}
	}

	@media only screen and (max-width: 767px) {
		.aura-projects-grid {
			width: calc(100% - 30px);
			margin-top: 20px;
		}
		.aura-projects-grid .clapat-item {
			width: calc(100% - 30px);
			max-width: calc(100% - 30px);
			flex: 1 1 100%;
			margin: 15px;
		}
		.aura-projects-grid .slide-caption {
			opacity: 1;
			background: linear-gradient(to top, rgba(12, 12, 12, 0.45), rgba(12, 12, 12, 0));
		}
		.aura-projects-grid .slide-title {
			background-color: transparent;
			color: #fff;
			padding: 6px 4px;
		}
	}

	@media only screen and (max-width: 479px) {
		.aura-projects-grid {
			width: calc(100% - 20px);
		}
		.aura-projects-grid .clapat-item {
			width: calc(100% - 20px);
			max-width: calc(100% - 20px);
			margin: 10px;
		}
	}


/*--------------------------------------------------
	Contact — personal framing (Dario as the direct
	point of contact). Reuses .has-opacity (existing
	generic reveal) for the intro paragraph and the
	untouched .button-box/.clapat-button-wrap email CTA.
---------------------------------------------------*/

	.aura-cta-title h1.has-shuffle {
		margin-top: 0;
		margin-bottom: 0;
	}

	.aura-contact-intro {
		max-width: 640px;
		margin: 24px auto 0;
		font-size: 18px;
		line-height: 1.6;
	}

	.aura-contact-person {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		margin: 22px auto 0;
		flex-wrap: wrap;
	}

	/* The email button had no top spacing: on mobile it overlapped the name/role line. */
	#contatti .button-box {
		margin-top: 36px;
	}

	.aura-contact-name {
		font-weight: 600;
		color: #fff;
	}

	.aura-contact-role {
		opacity: 0.6;
		color: #fff;
		position: relative;
		padding-left: 20px;
	}

	.aura-contact-role::before {
		content: "";
		position: absolute;
		left: 8px;
		top: 50%;
		width: 4px;
		height: 4px;
		border-radius: 50%;
		background-color: currentColor;
		transform: translateY(-50%);
	}


/*--------------------------------------------------
	Services / Process shared card component (V2)

	Replaces the V1 full-width .flex-list rows (whose
	hover filled the whole row with a black band).
	Cards keep Nanotech's 1px/0.2-opacity hairlines,
	8px rounded borders and the .link cursor hook; the
	hover is a light state change only: hairline
	darkens, a thin top rule draws in, number and title
	shift slightly (typographic movement).
---------------------------------------------------*/

	.aura-cards {
		list-style: none;
		margin: 0;
		padding: 0;
		text-align: left;
	}

	.aura-services {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 30px;
	}

	.aura-card {
		position: relative;
		list-style: none;
		margin: 0;
		padding: 34px 32px 38px;
		box-sizing: border-box;
		border: 1px solid rgba(0, 0, 0, 0.14);
		border-radius: 8px;
		color: #0c0c0c;
		background-color: transparent;
		transition: border-color 0.3s ease-out, background-color 0.3s ease-out;
	}

	.aura-card::before {
		content: "";
		position: absolute;
		left: 32px;
		right: 32px;
		top: -1px;
		height: 2px;
		background-color: currentColor;
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	.aura-card:hover {
		border-color: rgba(0, 0, 0, 0.3);
		background-color: rgba(255, 255, 255, 0.35);
	}

	.aura-card:hover::before {
		transform: scaleX(1);
	}

	.aura-card-num {
		display: block;
		margin-bottom: 44px;
		font-size: 14px;
		line-height: 1;
		opacity: 0.5;
		transition: transform 0.4s ease-out, opacity 0.4s ease-out;
	}

	.aura-card-title {
		font-size: 22px;
		line-height: 1.3;
		font-weight: 500;
		transition: transform 0.4s ease-out;
	}

	.aura-card:hover .aura-card-num {
		opacity: 1;
		transform: translateX(6px);
	}

	.aura-card:hover .aura-card-title {
		transform: translateX(6px);
	}

	.aura-card-desc {
		margin: 12px 0 0;
		font-size: 15px;
		line-height: 1.6;
		opacity: 0.7;
	}

	.aura-card-keywords {
		margin-top: 20px;
		font-size: 12px;
		line-height: 1.7;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		opacity: 0.5;
	}

	@media only screen and (max-width: 1024px) {
		.aura-services {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 20px;
		}
		.aura-services .aura-card:last-child {
			grid-column: 1 / -1;
		}
	}

	@media only screen and (max-width: 767px) {
		.aura-services {
			grid-template-columns: minmax(0, 1fr);
			gap: 15px;
		}
		.aura-card {
			padding: 26px 24px 30px;
		}
		.aura-card::before {
			left: 24px;
			right: 24px;
		}
		.aura-card-num {
			margin-bottom: 30px;
		}
		.aura-card-title {
			font-size: 19px;
		}
		.aura-card-desc {
			font-size: 14px;
		}
	}


/*--------------------------------------------------
	Processo — horizontal step track

	Same card component as Servizi, laid out as a
	left-to-right track (01 → 06): 3 steps visible on
	desktop, 2 on tablet, 1 + a peek of the next on
	mobile. Moved with GSAP (drag / swipe / arrows,
	see the page script) instead of native overflow
	scrolling, because Smooth Scrollbar intercepts
	touch/wheel events on #content-scroll.
	ClapatSlider was not reused: it is loop-only,
	which would break the linear 01 → 06 reading.
---------------------------------------------------*/

	.aura-process {
		position: relative;
		text-align: left;
	}

	.aura-process-viewport {
		overflow: hidden;
		padding: 2px 0;
		touch-action: pan-y;
		cursor: grab;
		-webkit-user-select: none;
		user-select: none;
	}

	.aura-process-viewport.is-dragging {
		cursor: grabbing;
	}

	.aura-process-track {
		display: flex;
		gap: 30px;
		will-change: transform;
	}

	.aura-process-track .aura-card {
		flex: 0 0 calc((100% - 60px) / 3);
		max-width: calc((100% - 60px) / 3);
	}

	.aura-process-controls {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-top: 40px;
	}

	.aura-process-progress {
		position: relative;
		flex: 1 1 auto;
		height: 1px;
		margin-right: 18px;
		background-color: rgba(0, 0, 0, 0.15);
	}

	.aura-process-progress span {
		position: absolute;
		left: 0;
		top: -0.5px;
		width: 100%;
		height: 2px;
		background-color: #0c0c0c;
		transform: scaleX(0.5);
		transform-origin: left center;
		transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	.aura-process-btn {
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 2px solid #0c0c0c;
		border-radius: 50%;
		background-color: transparent;
		color: #0c0c0c;
		font-size: 14px;
		line-height: 40px;
		text-align: center;
		cursor: pointer;
		transition: background-color 0.3s ease-out, color 0.3s ease-out, opacity 0.3s ease-out;
	}

	.aura-process-btn:hover:not(:disabled) {
		background-color: #0c0c0c;
		color: #fff;
	}

	.aura-process-btn:disabled {
		opacity: 0.2;
		cursor: default;
	}

	.aura-process-btn:focus-visible {
		outline: 2px solid #0c0c0c;
		outline-offset: 3px;
	}

	@media only screen and (max-width: 1024px) {
		.aura-process-track {
			gap: 20px;
		}
		.aura-process-track .aura-card {
			flex-basis: calc((100% - 20px) / 2);
			max-width: calc((100% - 20px) / 2);
		}
	}

	@media only screen and (max-width: 767px) {
		.aura-process-track {
			gap: 15px;
		}
		.aura-process-track .aura-card {
			flex-basis: 82%;
			max-width: 82%;
		}
		.aura-process-controls {
			margin-top: 30px;
		}
	}


/*--------------------------------------------------
	Hero typography (ported from the original
	.landing-page-title rules in css/content.css).
	Kept as its own class instead of reusing
	.landing-page-title so the hero no longer matches
	the common.js selector that used to attach the
	"eyes" cursor easter egg
	(#hero #hero-caption.landing-page-title .inner).
---------------------------------------------------*/

	.aura-hero-caption .hero-title {
		font-size: calc(1rem + 8.5vw);
		line-height: calc(1rem + 8.5vw);
	}

	.aura-hero-caption .hero-subtitle {
		margin-top: 20px;
	}


/*--------------------------------------------------
	Hero background — "Aura" atmospheric loop

	CSS-only (no canvas/video): three soft, blurred
	radial-gradient blobs in the brand color, drifting
	slowly via transform (GPU-cheap). Page background
	stays the theme's light gray; the blobs only add a
	discreet warm glow behind the title. Respects
	prefers-reduced-motion.

	V2: blob colors read from --aura-rgb / --aura-rgb-
	soft (tweened by the page script on hero click;
	aura only — brand/primary color stays #FDC101).
	Cursor-follow uses the independent `translate`
	property, so it composes with the keyframe
	`transform` drift instead of overriding it.
---------------------------------------------------*/

	#hero {
		overflow: hidden;
		--aura-rgb: 253, 193, 1;
		--aura-rgb-soft: 255, 221, 130;
	}

	#hero-styles {
		z-index: 1;
	}

	.aura-hero-bg {
		position: absolute;
		inset: 0;
		z-index: 0;
		overflow: hidden;
		pointer-events: none;
	}

	.aura-blob {
		position: absolute;
		border-radius: 50%;
		filter: blur(70px);
		will-change: transform, translate;
	}

	.aura-blob-1 {
		width: 46vw;
		height: 46vw;
		top: -14vw;
		left: -10vw;
		background: radial-gradient(circle, rgba(var(--aura-rgb), 0.55) 0%, rgba(var(--aura-rgb), 0) 70%);
		animation: auraFloat1 34s ease-in-out infinite;
	}

	.aura-blob-2 {
		width: 38vw;
		height: 38vw;
		top: 18vh;
		right: -12vw;
		background: radial-gradient(circle, rgba(var(--aura-rgb-soft), 0.5) 0%, rgba(var(--aura-rgb-soft), 0) 70%);
		animation: auraFloat2 42s ease-in-out infinite;
	}

	.aura-blob-3 {
		width: 30vw;
		height: 30vw;
		bottom: -12vw;
		left: 32vw;
		background: radial-gradient(circle, rgba(var(--aura-rgb), 0.3) 0%, rgba(var(--aura-rgb), 0) 70%);
		animation: auraFloat3 38s ease-in-out infinite;
	}

	@keyframes auraFloat1 {
		0%, 100% { transform: translate(0, 0) scale(1); }
		50% { transform: translate(4vw, 3vw) scale(1.08); }
	}

	@keyframes auraFloat2 {
		0%, 100% { transform: translate(0, 0) scale(1); }
		50% { transform: translate(-5vw, 2vw) scale(0.94); }
	}

	@keyframes auraFloat3 {
		0%, 100% { transform: translate(0, 0) scale(1); }
		50% { transform: translate(3vw, -4vw) scale(1.1); }
	}

	/* Mobile: vw-sized blobs were tiny on a portrait screen (~180px), so the aura
	   and its color change went almost unnoticed. Bigger, denser, less blurred. */
	@media only screen and (max-width: 767px) {
		.aura-blob {
			filter: blur(36px);
		}
		.aura-blob-1 {
			width: 120vw;
			height: 120vw;
			top: -30vw;
			left: -40vw;
			background: radial-gradient(circle, rgba(var(--aura-rgb), 0.9) 0%, rgba(var(--aura-rgb), 0) 70%);
		}
		.aura-blob-2 {
			width: 100vw;
			height: 100vw;
			top: 30vh;
			right: -45vw;
			background: radial-gradient(circle, rgba(var(--aura-rgb-soft), 0.85) 0%, rgba(var(--aura-rgb-soft), 0) 70%);
		}
		.aura-blob-3 {
			width: 95vw;
			height: 95vw;
			bottom: -25vw;
			left: -10vw;
			background: radial-gradient(circle, rgba(var(--aura-rgb), 0.7) 0%, rgba(var(--aura-rgb), 0) 70%);
		}
	}

	/* Tap feedback (touch only, created by the page script): a wave of the new
	   color expanding from the tap point. */
	.aura-wave {
		position: absolute;
		width: 260vmax;
		height: 260vmax;
		margin: -130vmax 0 0 -130vmax;
		border-radius: 50%;
		background: radial-gradient(circle, rgba(var(--wave-rgb), 0.75) 0%, rgba(var(--wave-rgb), 0.35) 30%, rgba(var(--wave-rgb), 0) 60%);
		pointer-events: none;
		will-change: transform, opacity;
	}

	@media (prefers-reduced-motion: reduce) {
		.aura-blob {
			animation: none;
		}
	}


/*--------------------------------------------------
	Cursor — "Soft Aura" restyle

	The follow behaviour (eased lerp, ~0.4s), the
	automatic disable on mobile/touch (isMobile() adds
	.disable-cursor, which hides #magic-cursor) and the
	scale-on-hover feedback are all already implemented
	in js/common.js and are left untouched. This block
	only restyles the ball's look — from a hard-edged
	circle to a soft, semi-transparent glow — and
	removes the yellow flash + "eyes" image the old
	hover used (the JS that attached it no longer
	matches anything, see .aura-hero-caption above; this
	still hides the icon defensively in case a future
	edit reintroduces the class).
---------------------------------------------------*/

	#ball .eyes-icon {
		display: none !important;
	}

	#ball {
		border: none !important;
		background: radial-gradient(circle at 50% 50%, rgba(253, 193, 1, 0.55) 0%, rgba(253, 193, 1, 0.22) 45%, rgba(253, 193, 1, 0) 72%) !important;
		box-shadow: 0 0 18px 4px rgba(253, 193, 1, 0.22);
		filter: blur(0.5px);
		transition: box-shadow 0.3s ease-out;
	}

	#ball.with-blur {
		box-shadow: 0 0 32px 10px rgba(253, 193, 1, 0.35);
		background: radial-gradient(circle at 50% 50%, rgba(253, 193, 1, 0.7) 0%, rgba(253, 193, 1, 0.3) 45%, rgba(253, 193, 1, 0) 75%) !important;
	}

	#ball:before, #ball:after {
		display: none;
	}


/*--------------------------------------------------
	Header "Contatti" button — flat normal state

	The original .button-icon-link carries an inset
	box-shadow (the "carved" look). Only that shadow is
	removed; border, fill-on-hover, arrow scale-in and
	text shift from style.css are left untouched.
---------------------------------------------------*/

	.header-button .button-icon-link,
	.light-content .header-button .button-icon-link,
	.white-header .header-button .button-icon-link {
		box-shadow: none !important;
	}


/*--------------------------------------------------
	Hero footer — email (right). Inherits the hero
	footer's color, size and line-height like the
	original "Progetti" label it replaces.
---------------------------------------------------*/

	.aura-hero-mail {
		color: inherit;
		text-decoration: none;
		text-transform: none;
		transition: opacity 0.2s ease-out;
	}

	.aura-hero-mail:hover {
		opacity: 0.6;
	}


/*--------------------------------------------------
	Project Modal — quick project detail

	One shared dialog filled from the clicked tile.
	Mirrors the ClaPat image popup (fixed, centered,
	8px rounded image, dark scrim) plus a title and a
	short description. Open/close are GSAP tweens in
	the page script; [hidden] is the resting state.
---------------------------------------------------*/

	.aura-modal {
		position: fixed;
		inset: 0;
		z-index: 9990;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40px;
		box-sizing: border-box;
	}

	.aura-modal[hidden] {
		display: none;
	}

	.aura-modal-overlay {
		position: absolute;
		inset: 0;
		background-color: rgba(12, 12, 12, 0.82);
		cursor: pointer;
	}

	.aura-modal-dialog {
		position: relative;
		z-index: 1;
		width: 1100px;
		max-width: 100%;
		max-height: 100%;
		overflow-y: auto;
		box-sizing: border-box;
		padding: 16px;
		border-radius: 8px;
		background-color: #ebebeb;
		color: #0c0c0c;
		text-align: left;
	}

	/* Keep the whole dialog on screen on short/landscape viewports:
	   width is capped so a 16:9 image + text block fit the height. */
	@supports (width: min(1px, 2px)) {
		.aura-modal-dialog {
			width: min(1100px, 100%, calc((100vh - 80px - 150px) * 16 / 9 + 32px));
			min-width: min(100%, 520px);
		}
	}

	.aura-modal-media {
		position: relative;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		border-radius: 6px;
		background-color: #d9d9d9;
	}

	.aura-modal-img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.aura-modal-body {
		padding: 22px 8px 8px;
	}

	.aura-modal-title {
		margin: 0;
		font-size: 24px;
		line-height: 1.3;
		font-weight: 500;
	}

	.aura-modal-desc {
		margin: 8px 0 0;
		max-width: 720px;
		font-size: 15px;
		line-height: 1.6;
		opacity: 0.7;
	}

	.aura-modal-close {
		position: absolute;
		top: 28px;
		right: 28px;
		z-index: 2;
		width: 44px;
		height: 44px;
		padding: 0;
		border: none;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.92);
		color: #0c0c0c;
		font-size: 16px;
		line-height: 44px;
		text-align: center;
		cursor: pointer;
		transition: transform 0.3s ease-out, background-color 0.3s ease-out;
	}

	.aura-modal-close:hover {
		transform: scale(1.08);
		background-color: #fff;
	}

	.aura-modal-close:focus-visible,
	.aura-projects-grid .slide-inner:focus-visible {
		outline: 2px solid #0c0c0c;
		outline-offset: 3px;
	}

	html.aura-modal-open,
	html.aura-modal-open body {
		overflow: hidden;
	}

	@media only screen and (max-width: 767px) {
		.aura-modal {
			padding: 15px;
		}
		.aura-modal-dialog {
			width: 100%;
			min-width: 0;
			padding: 10px;
		}
		.aura-modal-close {
			top: 18px;
			right: 18px;
			width: 38px;
			height: 38px;
			line-height: 38px;
			font-size: 14px;
		}
		.aura-modal-body {
			padding: 16px 6px 6px;
		}
		.aura-modal-title {
			font-size: 20px;
		}
		.aura-modal-desc {
			font-size: 14px;
		}
	}


/*--------------------------------------------------
	Hero — interaction hint

	Small, low-contrast label centered on the hero
	footer line (between "Esplora" and the email).
	Fades in together with the footer (the theme adds
	.visible to #hero-footer after the intro) and fades
	out for good once the page script adds
	.is-dismissed (30s after it appears; mouse
	movement and clicks no longer hide it).
	The copy switches between pointer and touch devices
	with a media query. Mobile: moved just above the
	footer line so it never overlaps the side items.
---------------------------------------------------*/

	.aura-hero-hint {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		display: flex;
		align-items: center;
		transform: translateX(-50%);
		font-size: 12px;
		line-height: 1.4;
		letter-spacing: 0.02em;
		white-space: nowrap;
		color: currentColor;
		opacity: 0;
		pointer-events: none;
		transition: opacity 1s ease-out;
	}

	#hero-footer.visible .aura-hero-hint {
		opacity: 0.45;
		transition-delay: 0.4s;
	}

	#hero-footer .aura-hero-hint.is-dismissed {
		opacity: 0;
		transition: opacity 1.2s ease-out;
		transition-delay: 0s;
	}

	.aura-hint-touch {
		display: none;
	}

	@media (hover: none), (pointer: coarse) {
		.aura-hint-pointer {
			display: none;
		}
		.aura-hint-touch {
			display: inline;
		}
	}

	@media only screen and (max-width: 767px) {
		.aura-hero-hint {
			top: auto;
			bottom: 100%;
			margin-bottom: 8px;
			padding: 6px 12px;
			font-size: 11px;
			font-weight: 500;
			border-radius: 20px;
			background-color: rgba(255, 255, 255, 0.6);
		}
		#hero-footer.visible .aura-hero-hint {
			opacity: 1;
		}
	}


/*--------------------------------------------------
	Header logo — smaller than the theme's 50px
	(style.css). The header is a centered flex row,
	so the logo stays vertically aligned.
---------------------------------------------------*/

	#clapat-logo img {
		height: 36px;
	}

	@media only screen and (max-width: 767px) {
		#clapat-logo img {
			height: 28px;
		}
	}


/*--------------------------------------------------
	Studio indipendente — Vantaggi / Limiti headings
	with a small +/- badge.
---------------------------------------------------*/

	.aura-pros-title {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.aura-pros-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 22px;
		height: 22px;
		border: 1.5px solid currentColor;
		border-radius: 50%;
		font-size: 10px;
		line-height: 1;
	}