/* ══════════════════════════════════════════════════════════════════════
   Plezuro con lo stile di new.kreita.com (5/11/2026).
   Si carica DOPO plezuro.css e ne cambia solo l'aspetto: caratteri del sito
   Kreita (Space Grotesk per i titoli, Hanken Grotesk per i testi), blu notte
   #131C2E, il magenta dell'area Software, testata scura che galleggia,
   pastiglie maiuscole, schede piatte col filo, piede scuro col filo a colori.
   Struttura, testi e movimenti restano quelli di plezuro.css e plezuro.js:
   per tornare indietro basta togliere il <link> a questo file.
   ══════════════════════════════════════════════════════════════════════ */

@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/space-grotesk-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/space-grotesk-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/hanken-grotesk-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/hanken-grotesk-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/hanken-grotesk-latin-700-normal.woff2) format("woff2"); }

:root {
	/* Kreita */
	--k-notte: #131C2E;
	--k-notte-2: #1B2539;
	--k-notte-3: #2A3346;
	--k-area: #C23A8E;          /* Software, l'area di Plezuro su new.kreita.com */
	--k-area-scura: #A52F77;
	--k-area-chiara: #EE7FC4;
	--k-velo: #FBF4F8;          /* le fasce chiare dell'area */
	--k-arcobaleno: linear-gradient(90deg, #F5A623 0 16.66%, #2DD4BF 0 33.33%, #FF4D38 0 50%, #EE7FC4 0 66.66%, #7FA8E0 0 83.33%, #A78BFA 0);
	--k-display: "Space Grotesk", system-ui, sans-serif;
	--k-testo: "Hanken Grotesk", system-ui, sans-serif;

	/* i colori di plezuro.css, ridipinti */
	--fondo: #FFFFFF;
	--pannello: var(--k-velo);
	--inchiostro: var(--k-notte);
	--inchiostro-2: #2A3346;
	--tenue: #5B6475;
	--filo: #E3E6EC;
	--notte: var(--k-notte);
	--notte-2: var(--k-notte-2);
	--rosso: var(--k-area);

	/* schede piatte col filo, come su new.kreita.com, al posto del rilievo */
	--om-card: 0 0 0 1px #E6E8EE, 0 1px 2px rgba(19, 28, 46, .04);
	--om-card-scura: 0 0 0 1px rgba(255, 255, 255, .09);
	--om-scuro: none;
	--om-chiaro: 0 0 0 1px #E3E6EC;
}

body { font-family: var(--k-testo); color: var(--inchiostro-2); }
:focus-visible { outline-color: var(--k-area); }
::selection { background: var(--k-area); color: #fff; }

/* i titoli col carattere del sito */
h1, h2, h3, h4,
.apre__titolo, .titolo-sez, .coda__titolo, .doc__titolo, .numerone, .passo__n,
.piede__titolo, .foto-grande__titolo, .btn, .etichetta, .pillola, .pillola-link, .testa__voci {
	font-family: var(--k-display);
}
h3 { font-weight: 700; letter-spacing: -.01em; color: var(--k-notte); }

/* ── testata: la barra blu notte che galleggia ─────────────────────────── */
.testa { inset: 16px 0 auto; padding-inline: 20px; }
.testa__barra {
	width: min(100%, 1400px);
	justify-content: space-between;
	padding: 10px 10px 10px 28px;
	border-radius: 20px;
	background: rgba(19, 28, 46, .97);
	box-shadow: 0 18px 40px -20px rgba(19, 28, 46, .6);
}
.testa.is-scorsa .testa__barra { background: rgba(19, 28, 46, .98); box-shadow: 0 18px 40px -18px rgba(19, 28, 46, .7); }
/* la riga che avanza scorrendo: i colori delle sei aree Kreita */
.testa__barra::after { left: 20px; right: 20px; bottom: 0; height: 3px; background: var(--k-arcobaleno); }
.testa__logo img { height: 22px; }
.testa__voci { counter-reset: voce; font-weight: 500; }
.testa__voci a { color: rgba(255, 255, 255, .88); }
.testa__voci a:hover, .testa__voci a[aria-current="true"] { color: var(--k-area-chiara); }
/* i numeretti colorati sopra le voci, come nel menu di new.kreita.com */
.testa__voci li { counter-increment: voce; }
.testa__voci li a::before {
	content: counter(voce, decimal-leading-zero);
	position: absolute; top: -11px; right: -9px;
	font: 700 9px/1 var(--k-display); letter-spacing: .02em; font-variant-numeric: tabular-nums;
	color: var(--n, #F5A623);
}
.testa__voci li:nth-child(1) { --n: #F5A623; }
.testa__voci li:nth-child(2) { --n: #2DD4BF; }
.testa__voci li:nth-child(3) { --n: #FF4D38; }
.testa__voci li:nth-child(4) { --n: #EE7FC4; }
.testa__voci li:nth-child(5) { --n: #7FA8E0; }
.testa__voci li:nth-child(6) { --n: #A78BFA; }
.testa__cta { min-height: 46px; padding: 12px 22px; }
.testa__menu { background: var(--k-notte-3); }

/* ── bottoni: pillole del sito, piene di magenta o vuote col filo ──────── */
.btn { min-height: 52px; padding: 14px 26px; font-weight: 700; font-size: 15.5px; letter-spacing: -.005em; }
.btn--scuro { background: var(--k-area); color: #fff; box-shadow: none; }
.btn--scuro:hover { background: var(--k-area-scura); }
.btn--scuro::after { background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%); }
.btn--chiaro { background: transparent; color: var(--k-notte); box-shadow: inset 0 0 0 1.5px #CBD0DA; }
.btn--chiaro:hover { box-shadow: inset 0 0 0 1.5px var(--k-notte); }

/* ── pastiglie: maiuscole, a tinta piena, come «LE FUNZIONI» ──────────── */
.etichetta {
	padding: 7px 13px 6px; border-radius: 99px;
	background: var(--k-area); box-shadow: none; color: #fff;
	font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
}
.etichetta s { display: none; }
.etichetta--scura { background: var(--k-area); color: #fff; box-shadow: none; }
.pillola { border-color: #E3E6EC; color: var(--k-notte); font-weight: 700; }

/* ── titoli delle sezioni ───────────────────────────────────────────────── */
.titolo-sez {
	margin-top: 18px; font-size: clamp(34px, 4.6vw, 56px); font-weight: 700;
	line-height: 1.06; letter-spacing: -.03em; color: var(--k-notte); text-wrap: balance;
}
.titolo-sez .tenue { color: var(--k-area); }
.titolo-sez--chiaro { color: #fff; }
.titolo-sez--chiaro .tenue { color: var(--k-area-chiara); }
.testo-sez { color: var(--tenue); }
.testo-sez--chiaro { color: rgba(255, 255, 255, .72); }

/* ── apertura: a tinta piena, come le pagine dei prodotti su new.kreita.com ── */
.apre, .doc__testa {
	margin: 0; border-radius: 0;
	background: var(--k-area);
	color: #fff;
}
.apre { min-height: min(90svh, 860px); padding-top: 150px; }
.apre__in { width: min(100%, 1240px); text-align: left; }
.apre .etichetta, .doc__testa .etichetta { background: var(--k-notte); color: var(--k-area-chiara); }
.apre__titolo, .doc__titolo {
	max-width: 15ch;
	font-weight: 700; letter-spacing: -.035em; line-height: 1.02;
	background: none; -webkit-background-clip: border-box; background-clip: border-box;
	color: #fff; -webkit-text-fill-color: #fff;
}
.apre__titolo { font-size: clamp(44px, 7vw, 100px); }
.apre__sotto { margin: 28px 0 0; max-width: 56ch; color: rgba(255, 255, 255, .9); }
.apre__bottoni { justify-content: flex-start; }
.apre .btn--scuro, .coda .btn--scuro { background: #fff; color: var(--k-area); }
.apre .btn--scuro:hover, .coda .btn--scuro:hover { background: #fff; filter: brightness(.95); }
.apre .btn--chiaro { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.apre .btn--chiaro:hover { box-shadow: inset 0 0 0 1.5px #fff; }
/* la capsula col cartoncino: blu notte, non più del colore della prova */
.capsula { background: var(--k-notte); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .25), inset 0 3px 0 rgba(255, 255, 255, .12), 0 18px 30px rgba(19, 28, 46, .35); }
.capsula__card { color: var(--k-area); }
.capsula__ico--rubrica { color: var(--k-area); }
/* gli anelli dietro: bianchi e leggeri sul magenta */
.apre__onda--1 {
	background: radial-gradient(circle at 50% 50%, transparent 56%, rgba(255, 255, 255, .14) 58.5%, rgba(255, 255, 255, .34) 60%, rgba(255, 255, 255, .1) 63.5%, rgba(255, 255, 255, .04) 66%, transparent 68%);
}
.apre__onda--2 { background: radial-gradient(circle, rgba(238, 127, 196, .9) 0%, transparent 62%); opacity: .6; }
.apre__onda--3 { background: radial-gradient(circle, rgba(120, 22, 82, .55) 0%, transparent 60%); }
.apre__scorri { color: var(--k-notte); font-family: var(--k-display); font-weight: 700; }
.apre__scorri .ic { color: var(--k-area); }

/* pagine Privacy e Cookie: stessa apertura */
.doc__testa { padding-bottom: 96px; }
.doc__testa > * { margin-inline: 0; }
.doc__testa { padding-inline: max(24px, (100% - 1240px) / 2); text-align: left; }
.doc__sotto { margin-inline: 0; color: rgba(255, 255, 255, .9); }
.doc__data { color: rgba(255, 255, 255, .72); }
.doc__corpo h2 { font-family: var(--k-display); font-weight: 700; }
.doc__corpo section { background: #fff; }
.doc__indice { background: var(--k-velo); }

/* ── fasce: a tutta larghezza, chiare dell'area o bianche ───────────────── */
.pannello { margin-inline: 0; border-radius: 0; background: var(--k-velo); }
.numerone { font-weight: 700; color: var(--k-notte); }

/* ── confronto: la fascia blu notte ─────────────────────────────────────── */
.scuro { margin: 0; border-radius: 0; background: var(--k-notte); }
.tabella__si { color: #fff; }

/* ── chiusura: la fascia magenta col bottone bianco ─────────────────────── */
.coda {
	margin: 0; border-radius: 0; min-height: 0;
	padding: clamp(80px, 10vw, 128px) 24px;
	background: var(--k-area); color: #fff;
}
.coda__titolo { font-weight: 700; letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.coda__testo { color: rgba(255, 255, 255, .9); }

/* ── piede: blu notte, col filo dei colori Kreita in cima ───────────────── */
.piede {
	position: relative;
	padding: clamp(72px, 9vw, 112px) 0 32px;
	background: var(--k-notte); color: #fff;
}
.piede::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--k-arcobaleno); }
.piede__alto {
	width: min(100% - 48px, var(--larghezza)); margin-inline: auto; padding-inline: 0;
	align-items: flex-start; text-align: left;
}
.piede__tessera { background: var(--k-notte-2); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
.piede__titolo { font-size: clamp(30px, 4vw, 48px); font-weight: 700; line-height: 1.08; letter-spacing: -.03em; }
.piede__titolo::first-line { color: #fff; }
.piede__titolo { color: var(--k-area-chiara); }
.piede__sotto { color: rgba(255, 255, 255, .66); }
.piede__pillole { justify-content: flex-start; }
.pillola-link { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: #fff; font-weight: 700; }
.pillola-link:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.pillola-link span { background: var(--k-area); }
.piede__basso { border-top-color: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .78); }
.piede__legale { color: rgba(255, 255, 255, .55); }
.piede__su { color: #fff; }

@media (max-width: 860px) {
	.testa { inset-block-start: 10px; padding-inline: 10px; }
	.testa__barra { padding: 8px 8px 8px 18px; border-radius: 18px; }
	.testa__voci { background: var(--k-notte); box-shadow: 0 24px 48px -16px rgba(19, 28, 46, .6), 0 0 0 1px rgba(255, 255, 255, .08); }
	.testa__voci a { color: #fff; }
	.testa__voci a:hover { background: var(--k-notte-2); }
	.testa__voci li a::before { position: static; display: inline-block; margin-right: 12px; font-size: 11px; vertical-align: 2px; }
	.apre { padding-top: 120px; }
	.piede__basso { align-items: flex-start; text-align: left; }
	.piede__voci { justify-content: flex-start; }
}

/* ── le tre card nell'apertura, come sulla pagina Plezuro di new.kreita.com ──
   Il titolo prende tutta la larghezza; sotto, a sinistra frase e bottoni,
   a destra le card. */
@media (min-width: 861px) {
	.apre__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); grid-template-rows: auto auto auto 1fr; column-gap: clamp(32px, 5vw, 80px); align-items: start; }
	.apre__in > * { grid-column: 1; }
	.apre__in > .etichetta { justify-self: start; }
	.apre__titolo { grid-column: 1 / -1; max-width: none; }
	.apre__in > .k-carte { grid-column: 2; grid-row: 3 / span 2; align-self: start; justify-self: end; margin-top: 36px; }
}
.k-carte { position: relative; width: 100%; max-width: 30rem; aspect-ratio: 1.25 / 1; isolation: isolate; }
.k-carte::before { content: ""; position: absolute; inset: -14%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .16), transparent); }
.k-carta {
	position: absolute; left: 14%; top: 22%; width: 72%; aspect-ratio: 1.618 / 1;
	display: flex; flex-direction: column; justify-content: space-between;
	padding: 6.5% 7.5%; border-radius: 18px; background: var(--t); color: #fff;
	box-shadow: 0 38px 60px -30px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .3);
	transition: transform .9s cubic-bezier(.34, 1.56, .64, 1);
}
.k-carta img { width: 44%; height: auto; }
.k-carta span { display: flex; align-items: flex-end; justify-content: space-between; font: 700 10.5px/1 var(--k-display); letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.k-carta svg { width: 15%; max-width: 36px; height: auto; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; }
.k-carta--1 { transform: translate(-14%, -16%) rotate(-15deg); }
.k-carta--2 { transform: translate(-3%, -6%) rotate(-6deg); }
.k-carta--3 { background: #fff; color: var(--k-notte); transform: translate(9%, 8%) rotate(4deg); box-shadow: 0 44px 70px -30px rgba(0, 0, 0, .7); }
@media (hover: hover) {
	.k-carte:hover .k-carta--1 { transform: translate(-20%, -22%) rotate(-19deg); }
	.k-carte:hover .k-carta--2 { transform: translate(-6%, -10%) rotate(-8deg); }
	.k-carte:hover .k-carta--3 { transform: translate(12%, 10%) rotate(6deg); }
}
.js .k-carta--1 { animation: k-c1 1.2s .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.js .k-carta--2 { animation: k-c2 1.2s .35s cubic-bezier(.34, 1.56, .64, 1) both; }
.js .k-carta--3 { animation: k-c3 .9s .2s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes k-c1 { from { transform: translate(4%, 4%) rotate(2deg); } }
@keyframes k-c2 { from { transform: translate(6%, 6%) rotate(3deg); } }
@keyframes k-c3 { from { transform: translate(9%, 14%) rotate(4deg); opacity: 0; } }
@media (max-width: 860px) {
	.k-carte { max-width: 17rem; aspect-ratio: 1.45 / 1; margin: 40px auto 0; }
	.k-carta { top: 18%; border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) { .k-carta { animation: none !important; transition: none; } }