/* =====================================================================
   VERTIGO CAPITAL — Design System (redesign)
   Vincolo: NESSUN nuovo colore. Si lavora su tipografia, gerarchia,
   spazio, animazioni e micro-interazioni. La palette resta quella reale
   già in uso sul sito.
   ===================================================================== */

:root {
	/* --- Palette Vertigo Capital (brand identity ufficiale) --- */
	--vc-bg:            #0A1930; /* Navy 900 — sfondo cover/dark */
	--vc-ink:           #10233F; /* Navy 800 — testo primario su chiaro */
	--vc-ink-soft:      #1C355C; /* Navy 700 — pannelli secondari */
	--vc-text:          #5B6B7F; /* Testo secondario su chiaro */
	--vc-white:         #FFFFFF;
	--vc-accent:        #00B0D4; /* Celeste 500 — accento brand */
	--vc-border:        #E1E5E9; /* Bordo chiaro — hairline su bianco */
	--vc-soft-bg:       #F5F7F8; /* Off-white — sfondo pagina/slide */
	--vc-soft-grey:     #F5F7F8;

	/* --- Tonalità celeste derivate --- */
	--vc-accent-bright: #66D3EA; /* Celeste 300 — tinte leggere/hover scuro */
	--vc-accent-deep:   #027A93; /* Celeste 700 — testo/icone su bianco */
	--vc-accent-12:     rgba(0,176,212, 0.12);
	--vc-accent-30:     rgba(0,176,212, 0.30);

	/* --- Tipografia --- */
	--vc-font-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
	--vc-font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* --- Motion --- */
	--vc-ease:        cubic-bezier(0.22, 0.61, 0.20, 1);
	--vc-dur:         0.45s;
}

/* =====================================================================
   1. TIPOGRAFIA — DM Serif Display per headline/logo · Inter per tutto il resto
   ===================================================================== */

h1, h2, h3,
h1.elementor-heading-title,
h2.elementor-heading-title,
h3.elementor-heading-title {
	font-family: var(--vc-font-serif) !important;
	font-optical-sizing: auto;
	letter-spacing: -0.015em;
	font-weight: 400;
}

/* Headline molto grandi (hero) */
h1, h1.elementor-heading-title {
	letter-spacing: -0.025em;
	line-height: 1.08;
}

/* Logo testuale */
.site-title,
.site-title a,
.ast-site-identity .site-title {
	font-family: var(--vc-font-serif) !important;
	font-weight: 400;
	letter-spacing: -0.01em;
}

/* Body e UI: Inter */
body {
	font-family: var(--vc-font-sans);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Selezione testo coerente con l'accento */
::selection { background: var(--vc-accent-30); color: var(--vc-white); }

/* Scroll fluido per le ancore interne */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* =====================================================================
   2. ANIMAZIONI ON-SCROLL (Intersection Observer, no librerie)
   Stati iniziali applicati SOLO con JS attivo (.vc-js) → niente flash
   e contenuti sempre visibili in assenza di JS.
   ===================================================================== */

.vc-js .vc-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.62s cubic-bezier(.16,1,.3,1), transform 0.62s cubic-bezier(.16,1,.3,1);
	will-change: opacity, transform;
}
.vc-js .vc-reveal.vc-in {
	opacity: 1;
	transform: none;
}

/* Rispetto delle preferenze di accessibilità: niente movimento */
@media (prefers-reduced-motion: reduce) {
	.vc-js .vc-reveal,
	.vc-js .vc-reveal.vc-in {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* =====================================================================
   3. MICRO-INTERAZIONI / HOVER SOTTILI
   transform + opacity, transizioni 200–400ms. Niente effetti vistosi.
   ===================================================================== */

/* Bottoni Elementor: lieve sollevamento + glow d'accento */
.elementor-button,
.elementor-button-link {
	transition: transform var(--vc-dur) var(--vc-ease),
	            box-shadow var(--vc-dur) var(--vc-ease),
	            background-color var(--vc-dur) var(--vc-ease) !important;
	will-change: transform;
}
.elementor-button:hover,
.elementor-button-link:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px -10px var(--vc-accent-30);
}

/* Link testuali: transizione morbida di opacità/colore */
.elementor-widget-text-editor a,
.ast-container a {
	transition: opacity var(--vc-dur) var(--vc-ease), color var(--vc-dur) var(--vc-ease);
}

/* Immagini: zoom delicato dentro un contenitore che ritaglia */
.elementor-widget-image img,
.elementor-widget-theme-post-featured-image img {
	transition: transform 0.6s var(--vc-ease);
	will-change: transform;
}
.elementor-widget-image:hover img,
.elementor-widget-theme-post-featured-image:hover img {
	transform: scale(1.04);
}
.elementor-widget-image,
.elementor-widget-image .elementor-widget-container {
	overflow: hidden;
}

/* Card / image-box / icon-box: sollevamento sottile al passaggio */
.elementor-widget-image-box .elementor-image-box-wrapper,
.elementor-widget-icon-box .elementor-icon-box-wrapper {
	transition: transform var(--vc-dur) var(--vc-ease);
}
.elementor-widget-image-box:hover .elementor-image-box-wrapper,
.elementor-widget-icon-box:hover .elementor-icon-box-wrapper {
	transform: translateY(-4px);
}

/* =====================================================================
   4. HOME (body.home) — Fase 2
   Scoping con .home per vincere sulla specificità dell'output Elementor
   senza !important superflui. Nessun colore nuovo.
   ===================================================================== */

body.home { overflow-x: hidden; } /* sicurezza per la lieve scala dell'hero */

/* --- 4.1 Hero: entrata elegante al caricamento (immagine full-bleed) --- */
.vc-js body.home .elementor-element-a6868c0 {
	animation: vcHeroIn 1.6s var(--vc-ease) both;
}
@keyframes vcHeroIn {
	from { opacity: 0; transform: scale(1.04); }
	to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.vc-js body.home .elementor-element-a6868c0 { animation: none; }
}

/* --- 4.2 Sezione headline "Where capital meets purpose" --- */
body.home .elementor-element-7c8ecee {
	padding-top: clamp(48px, 7vw, 120px);
	padding-bottom: clamp(40px, 6vw, 96px);
}
/* Filetto d'accento sotto la headline: più gerarchia (colore esistente) */
body.home .elementor-element-7c8ecee .heading-title {
	position: relative;
	padding-bottom: 0.5em;
}
body.home .elementor-element-7c8ecee .heading-title::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin: 0.55em auto 0;
	background: var(--vc-accent);
	border-radius: 2px;
}
/* Sottotitolo: larghezza leggibile e più respiro */
body.home .elementor-element-7c8ecee .jkit-subheading,
body.home .elementor-element-7c8ecee p {
	max-width: 60ch;
	margin-left: auto;
	margin-right: auto;
}

/* --- 4.3 Tre aree business: blocco editoriale con più aria --- */
body.home .elementor-element-2dcd6f2 {
	padding-top: clamp(48px, 8vw, 130px);
	padding-bottom: clamp(48px, 8vw, 130px);
}
/* Titoli aree: serif (già globale) + più presenza e spazio */
body.home .elementor-element-2dcd6f2 h2.elementor-heading-title {
	font-size: clamp(2rem, 2.6vw, 2.75rem);
	margin-bottom: 0.15em;
}
/* Colonne come "schede" editoriali: hover sottile di sollevamento */
body.home .elementor-element-2dcd6f2 > .elementor-container > .elementor-column {
	transition: transform var(--vc-dur) var(--vc-ease);
}
body.home .elementor-element-2dcd6f2 > .elementor-container > .elementor-column:hover {
	transform: translateY(-6px);
}
/* Divider sotto i titoli: filetto sottile in accento */
body.home .elementor-element-2dcd6f2 .elementor-divider-separator {
	border-top-color: var(--vc-accent) !important;
	transition: width var(--vc-dur) var(--vc-ease);
}

/* =====================================================================
   5. HERO ANIMATO — rete di particelle (vertigo-hero.js)
   Attivo solo quando il JS aggiunge la classe .vc-hero-on (altrimenti
   resta lo slideshow originale di edifici). Solo palette esistente.
   ===================================================================== */

/* Nasconde lo slideshow di edifici e l'overlay; fondo scuro elegante */
.vc-hero-on .elementor-background-slideshow,
.vc-hero-on .elementor-background-overlay {
	display: none !important;
}
.vc-hero-on {
	background: #04060a !important;
	background: linear-gradient(180deg, #080d14 0%, #04060a 65%, #000 100%) !important;
	min-height: clamp(440px, 64vh, 680px) !important;
	position: relative;
	overflow: hidden;
	box-shadow: none !important;
}

/* Contenuto originale dell'hero nascosto (si portava dietro l'ombra/patina) */
.vc-orig-hidden { display: none !important; }

/* Nuovo blocco testo, pulito e centrato sopra il globo */
.vc-hero-content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 24px;
	pointer-events: none;
}
.vc-hero-title,
.vc-hero-title .vc-char {
	color: var(--vc-white) !important;
}
.vc-hero-title {
	font-family: var(--vc-font-serif) !important;
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.04;
	font-size: clamp(3.2rem, 8vw, 7rem);
	margin: 0 0 0.4em;
	text-shadow: 0 2px 40px rgba(0, 0, 0, 0.6);
}
.vc-hero-sub {
	font-family: var(--vc-font-sans);
	color: rgba(255, 255, 255, 0.88);
	font-size: clamp(1.05rem, 1.6vw, 1.4rem);
	line-height: 1.55;
	max-width: 48ch;
	margin: 0 auto;
	text-shadow: 0 1px 20px rgba(0, 0, 0, 0.5);
}

/* Canvas dietro ai contenuti */
.vc-hero-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	display: block;
	pointer-events: none;
}
.vc-hero-on > .elementor-container {
	position: relative;
	z-index: 2;
}
/* Rimuove il riquadro/alone (box-shadow ereditata dal design originale) */
.vc-hero-on .elementor-element-populated {
	box-shadow: none !important;
	background-color: transparent !important;
}

/* Reveal del titolo lettera-per-lettera */
.vc-hero-on .vc-word { display: inline-block; }
.vc-hero-on .vc-char {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.5em);
	transition: opacity 0.6s var(--vc-ease), transform 0.6s var(--vc-ease);
	will-change: opacity, transform;
}
.vc-hero-on.vc-hero-in .vc-char { opacity: 1; transform: none; }

/* Sottotitolo: fade-up dopo il titolo */
.vc-hero-on .vc-sub {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.8s var(--vc-ease), transform 0.8s var(--vc-ease);
}
.vc-hero-on.vc-hero-in .vc-sub { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.vc-hero-on .vc-char,
	.vc-hero-on .vc-sub {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* =====================================================================
   6. STARTUP / VENTURE CAPITAL (.vc-page-venture-capital)
   Hero: rimuovi foto pexels → navy gradient + onde già presenti
   Le onde (background-2.png) sono nell'overlay Elementor, le manteniamo.
   Scoping: classe body stabile generata da vc_page_key() (vedi functions.php),
   non piu' page-id-2918/elementor-2918 (ID numerici legati al DB locale).
   ===================================================================== */

body.vc-page-venture-capital { background-color: #0A1930 !important; }

/* Hero (8531c52): sfondo bianco → navy + potenzia le onde già presenti */
.vc-page-venture-capital .elementor-element.elementor-element-8531c52,
.vc-page-venture-capital .elementor-element.elementor-element-8531c52:not(.elementor-motion-effects-element-type-background) {
	background-image: linear-gradient(150deg, #0A1930 0%, #0A1930 40%, #06111f 100%) !important;
	background-color: #0A1930 !important;
}
/* Testo hero: forza colore bianco perché ora su fondo scuro */
.vc-page-venture-capital .elementor-element-8531c52 h1,
.vc-page-venture-capital .elementor-element-8531c52 h2,
.vc-page-venture-capital .elementor-element-8531c52 .elementor-heading-title {
	color: #ffffff !important;
}
.vc-page-venture-capital .elementor-element-8531c52 p,
.vc-page-venture-capital .elementor-element-8531c52 .elementor-widget-text-editor {
	color: rgba(190, 205, 220, 0.90) !important;
}
/* Radial glow accent in alto-sinistra */
.vc-page-venture-capital .elementor-element.elementor-element-8531c52::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 70% 55% at 18% 30%, rgba(0,176,212,.10) 0%, transparent 70%);
	pointer-events: none;
	z-index: 0;
}
/* Onde: già presenti nell'overlay, potenzia da 0.15 → 0.25 */
.vc-page-venture-capital .elementor-element.elementor-element-8531c52 > .elementor-background-overlay {
	opacity: 0.25 !important;
	mix-blend-mode: normal !important;
}

/* Sezione services (5d39002): foto rimossa, navy gradient */
.vc-page-venture-capital .elementor-element.elementor-element-5d39002,
.vc-page-venture-capital .elementor-element.elementor-element-5d39002:not(.elementor-motion-effects-element-type-background) {
	background-image: linear-gradient(150deg, #0A1930 0%, #0A1930 40%, #06111f 100%) !important;
	background-color: #0A1930 !important;
}
/* Overlay: onde esplicite */
.vc-page-venture-capital .elementor-element.elementor-element-5d39002 > .elementor-background-overlay {
	background-image: url('../img/background-2.png') !important;
	background-color: transparent !important;
	background-position: right bottom !important;
	background-size: 55% !important;
	background-repeat: no-repeat !important;
	opacity: 0.22 !important;
	mix-blend-mode: normal !important;
}

/* Bottoni: accent blue pill */
.vc-page-venture-capital .elementor-button {
	background: var(--vc-accent) !important;
	border-radius: 50px !important;
	border-color: transparent !important;
	letter-spacing: 0.03em !important;
	font-family: var(--vc-font-sans) !important;
	transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}
.vc-page-venture-capital .elementor-button:hover {
	background: var(--vc-accent-bright) !important;
	transform: translateY(-3px) !important;
	box-shadow: 0 12px 30px -10px rgba(0,176,212,.50) !important;
}

/* Divisori: colore accent */
.vc-page-venture-capital .elementor-divider-separator { border-top-color: var(--vc-accent) !important; }

/* Link nel body text: accent */
.vc-page-venture-capital .elementor-widget-text-editor a { color: var(--vc-accent) !important; }
.vc-page-venture-capital .elementor-widget-text-editor a:hover { color: var(--vc-accent-bright) !important; }

/* =====================================================================
   7. PRIVATE EQUITY (.vc-page-private-equity)
   Stessa logica Startup, gradient direzione diversa per varietà.
   Scoping: classe body stabile generata da vc_page_key() (vedi functions.php),
   non piu' page-id-3351/elementor-3351 (ID numerici legati al DB locale).
   ===================================================================== */

/* Pagina PE: body chiaro come RE (il contenuto Elementor è sostituito con #vpe) */
body.vc-page-private-equity { background-color: #F5F7F8 !important; }

/* Nasconde la prima section Elementor del template PE (old dark hero),
   ora rimpiazzata dal nostro hero #vpe. La seconda in poi è già rimossa dal filtro PHP. */
.vc-page-private-equity .elementor-section-wrap > section.elementor-section:first-child {
	display: none !important;
}

/* Bottoni */
.vc-page-private-equity .elementor-button {
	background: var(--vc-accent) !important;
	border-radius: 50px !important;
	border-color: transparent !important;
	letter-spacing: 0.03em !important;
	font-family: var(--vc-font-sans) !important;
	transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}
.vc-page-private-equity .elementor-button:hover {
	background: var(--vc-accent-bright) !important;
	transform: translateY(-3px) !important;
	box-shadow: 0 12px 30px -10px rgba(0,176,212,.50) !important;
}

/* Divisori + link */
.vc-page-private-equity .elementor-divider-separator { border-top-color: var(--vc-accent) !important; }
.vc-page-private-equity .elementor-widget-text-editor a { color: var(--vc-accent) !important; }
.vc-page-private-equity .elementor-widget-text-editor a:hover { color: var(--vc-accent-bright) !important; }

/* =====================================================================
   8. HOME — raffinamenti coerenza
   ===================================================================== */

/* Bottoni: accent blue pill coerente con Startup e PE */
body.home .elementor-button {
	background: var(--vc-accent) !important;
	border-radius: 50px !important;
	border-color: transparent !important;
	letter-spacing: 0.03em !important;
	transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}
body.home .elementor-button:hover {
	background: var(--vc-accent-bright) !important;
	transform: translateY(-3px) !important;
	box-shadow: 0 12px 30px -10px rgba(0,176,212,.50) !important;
}

/* "Tre aree" colonne: bordo accent sottile + glow su hover */
body.home .elementor-element-2dcd6f2 > .elementor-container > .elementor-column > .elementor-widget-wrap {
	border-radius: 14px;
	border: 1px solid transparent;
	transition: border-color var(--vc-dur) var(--vc-ease), box-shadow var(--vc-dur) var(--vc-ease), transform var(--vc-dur) var(--vc-ease);
	padding: clamp(16px, 2.5vw, 28px) !important;
}
body.home .elementor-element-2dcd6f2 > .elementor-container > .elementor-column:hover > .elementor-widget-wrap {
	border-color: rgba(0,176,212,.20);
	box-shadow: 0 12px 48px -16px rgba(0,176,212,.18);
}

/* Dividers ovunque su Home: accent */
body.home .elementor-divider-separator { border-top-color: var(--vc-accent) !important; }