/*
 Theme Name:   BTecno Child Theme
 Description:  BTecno Child Theme
 Author:       BTecno Srl
 Template:     btecno-main
 Text Domain:  btecno
*/


/* #########################################################
   1. GLOBALE
   ######################################################### */
 
@font-face {
	font-family: 'Plus Jakarta Sans';
	src: url('/wp-content/themes/btecno-child-main/fonts/PlusJakartaSans.woff2') format('woff2'),
		url('/wp-content/themes/btecno-child-main/fonts/PlusJakartaSans.ttf') format('truetype');
	font-weight: 200 800; /* font variabile: copre tutti i pesi */
	font-style: normal;
	font-display: swap;
}
 
@font-face {
	font-family: 'Caveat';
	src: url('/wp-content/themes/btecno-child-main/fonts/Caveat.woff2') format('woff2'),
		url('/wp-content/themes/btecno-child-main/fonts/Caveat.ttf') format('truetype');
	font-weight: 400 700; /* font variabile */
	font-style: normal;
	font-display: swap;
}
 
 
:root {
	/* Brand */
	--bluBeeDuty: #2188b8; /* blu del logo: esagono, grafica, decorazioni (non per testi piccoli) */
	--bluBeeDutyScuro: #1a6f9e; /* pulsanti, link, testi su bianco (contrasto 5,5:1) */
	--bluBeeDutyHover: #155a82; /* hover dei pulsanti blu */
	--bluBeeDutyFascia: #2379ab; /* esagoni sulle fasce blu */
	--bluNotte: #0c2233; /* testi e titoli */
	--grigioBeeDuty: #6e6e70; /* grigio del logo */
	--azzurroHero: #eaf3fa;
	--azzurroSezione: #f3f7fb;
	--azzurroChiaro: #e3f0f9;
	--linea: #d8e4dd;
	--bordoInput: #8fa3b0;
 
	/* Testi */
	--colore-testi: var(--bluNotte);
	--testoSecondario: #2e4252;
	--testoMuted: #46596a;
 
	/* Prodotti: colore pieno (grafica), scuro (testi/pulsanti), chiaro (sfondi) */
	--rl: #96be4e;
	--rlScuro: #577029;
	--rlChiaro: #f0f7e3;
	--ge: #14a0a6;
	--geScuro: #0b7c80;
	--geChiaro: #ddf3f2;
	--pos: #f5a524;
	--posScuro: #a64800;
	--posChiaro: #fff1db;
 
	/* Font */
	--font-testi: 'Plus Jakarta Sans', system-ui, sans-serif;
	--font-corsivo: 'Caveat', cursive;
	--font-grassetto: var(--font-testi);
	--bs-body-color: var(--colore-testi);
	--bs-font-sans-serif: var(--font-testi);
 
	/* Forme e ombre */
	--raggio-pulsante: 12px;
	--raggio-input: 10px;
	--raggio-card: 24px;
	--raggio-pill: 999px;
	--ombra-card: 0 12px 32px rgb(12 34 51 / 8%);
	--ombra-menu: 0 12px 32px rgb(12 34 51 / 14%);
 
	/* Layout */
	--hero-offset-header: 69px;
	--larghezza-max: 1200px;
	--padding-sezione: 96px 0;
	--padding-left: 75px;
	--padding-right: 75px;
}
 
@media (max-width: 767.98px) {
	:root {
		--padding-sezione: 56px 0;
		--padding-left: 20px;
		--padding-right: 20px;
	}
}
 
html {
	scroll-behavior: smooth;
}
 
body {
	font-family: var(--font-testi);
	color: var(--colore-testi);
	background-color: #fff;
}
 
.site-content {
	font-family: var(--font-testi);
}
 
b, strong {
	font-weight: 700;
}
 
a:focus-visible,
button:focus-visible {
	outline: 3px solid var(--geScuro);
	outline-offset: 3px;
}
 
.pointer {
	cursor: pointer;
}
 
.container-fluid {
	padding-left: var(--padding-left);
	padding-right: var(--padding-right);
}
 
.contenitoreBeeDuty {
	max-width: var(--larghezza-max);
	margin: 0 auto;
}
 
 
/* ---------- Font ---------- */
 
.fontCorsivo {
	font-family: var(--font-corsivo);
	font-weight: 600;
}
 
.fontGrassetto {
	font-family: var(--font-testi);
	font-weight: 800;
}
 
 
/* ---------- Titoli e testi ---------- */
 
.titoloHero {
	font-size: clamp(34px, 4.3vw, 58px);
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -0.025em;
	margin: 0;
}
 
.titoloSezione {
	font-size: clamp(30px, 3.4vw, 44px);
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0;
}
 
.sottotitoloSezione {
	font-size: 18px;
	line-height: 1.6;
	color: var(--testoMuted);
	margin: 0;
}
 
.eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bluBeeDutyScuro);
}
 
.testoSecondario {
	color: var(--testoSecondario) !important;
}
 
.testoMuted {
	color: var(--testoMuted) !important;
}
 
 
/* ---------- Colori testo ---------- */
 
.coloreBeeDuty {
	color: var(--bluBeeDutyScuro) !important;
}
 
.coloreNotte {
	color: var(--bluNotte) !important;
}
 
.coloreRL {
	color: var(--rlScuro) !important;
}
 
.coloreGE {
	color: var(--geScuro) !important;
}
 
.colorePOS {
	color: var(--posScuro) !important;
}
 
 
/* ---------- Sfondi ---------- */
 
.bgBeeDuty {
	background-color: var(--bluBeeDutyScuro);
	color: #fff;
}
 
.bgBluNotte {
	background-color: var(--bluNotte);
	color: #fff;
}
 
.bgAzzurroHero {
	background-color: var(--azzurroHero);
}
 
.bgAzzurroSezione {
	background-color: var(--azzurroSezione);
}
 
.bgAzzurroChiaro {
	background-color: var(--azzurroChiaro);
}
 
.bgRL {
	background-color: var(--rlScuro);
	color: #fff;
}
 
.bgRLChiaro {
	background-color: var(--rlChiaro);
}
 
.bgGE {
	background-color: var(--geScuro);
	color: #fff;
}
 
.bgGEChiaro {
	background-color: var(--geChiaro);
}
 
.bgPOS {
	background-color: var(--posScuro);
	color: #fff;
}
 
.bgPOSChiaro {
	background-color: var(--posChiaro);
}
 
 
/* ---------- Sfondi con esagoni (immagini in /img del tema) ---------- */
 
.bgEsagoniHero {
	background: var(--azzurroHero) url('https://beeduty.it/wp-content/uploads/2026/10/sfondo-hero-esagoni-scaled.webp') center / cover no-repeat;
}
 
.bgEsagoniCta {
	background: var(--bluBeeDutyScuro) url('https://beeduty.it/wp-content/uploads/2026/10/sfondo-cta-esagoni.webp') center / cover no-repeat;
}
 
.patternEsagoniChiaro {
	background-image: url('/wp-content/themes/btecno-child-main/img/pattern-esagoni-chiaro.svg');
	background-size: 62.35px 108px;
	background-repeat: repeat;
}
 
.patternEsagoniScuro {
	background-image: url('/wp-content/themes/btecno-child-main/img/pattern-esagoni-scuro.svg');
	background-size: 62.35px 108px;
	background-repeat: repeat;
}
 
.esagono {
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
 
 
/* ---------- Tema per prodotto ----------
   Si applica la classe prodRL / prodGE / prodPOS al contenitore (es. da campo ACF "select")
   e tutte le classi *Prodotto sotto prendono automaticamente i colori giusti. */
 
.prodRL {
	--prod: var(--rlScuro);
	--prodPieno: var(--rl);
	--prodChiaro: var(--rlChiaro);
}
 
.prodGE {
	--prod: var(--geScuro);
	--prodPieno: var(--ge);
	--prodChiaro: var(--geChiaro);
}
 
.prodPOS {
	--prod: var(--posScuro);
	--prodPieno: var(--pos);
	--prodChiaro: var(--posChiaro);
}
 
.coloreProdotto {
	color: var(--prod) !important;
}
 
.bgProdotto {
	background-color: var(--prod);
	color: #fff;
}
 
.bgProdottoPieno {
	background-color: var(--prodPieno);
}
 
.bgProdottoChiaro {
	background-color: var(--prodChiaro);
}
 
.cardProdotto {
	background-color: var(--prodChiaro);
	border-radius: 28px;
	padding: 32px;
}
 
.badgeProdotto {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: var(--raggio-pill);
	background-color: var(--prodChiaro);
	color: var(--prod);
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}
 
.chipProdotto {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border-radius: var(--raggio-pill);
	background-color: var(--prodChiaro);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}
 
 
/* ---------- Pulsanti ---------- */
 
.btnBeeDuty,
.btnBeeDutyOutline,
.btnBeeDutyBianco,
.btnBeeDutyBiancoOutline,
.btnProdotto,
.btnProdottoOutline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	border: 2px solid transparent;
	border-radius: var(--raggio-pulsante);
	font-family: var(--font-testi);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
 
.btnBeeDuty:hover,
.btnBeeDutyOutline:hover,
.btnBeeDutyBianco:hover,
.btnBeeDutyBiancoOutline:hover,
.btnProdotto:hover,
.btnProdottoOutline:hover {
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgb(12 34 51 / 18%);
}
 
.btnBeeDuty:active,
.btnBeeDutyOutline:active,
.btnBeeDutyBianco:active,
.btnBeeDutyBiancoOutline:active,
.btnProdotto:active,
.btnProdottoOutline:active {
	transform: none;
	box-shadow: none;
}
 
/* Il colore va dichiarato anche in hover: altrimenti Bootstrap applica il colore dei link */
.btnBeeDuty:hover,
.btnBeeDuty:focus-visible {
	background-color: var(--bluBeeDutyHover);
	border-color: var(--bluBeeDutyHover);
	color: #fff;
}
 
.btnBeeDutyOutline:hover,
.btnBeeDutyOutline:focus-visible {
	background-color: var(--bluBeeDutyScuro);
	color: #fff;
}
 
.btnBeeDutyBianco:hover,
.btnBeeDutyBianco:focus-visible {
	background-color: var(--azzurroChiaro);
	border-color: var(--azzurroChiaro);
	color: var(--bluBeeDutyScuro);
}
 
.btnBeeDutyBiancoOutline:hover,
.btnBeeDutyBiancoOutline:focus-visible {
	background-color: #fff;
	color: var(--bluBeeDutyScuro);
}
 
.btnProdotto:hover,
.btnProdotto:focus-visible {
	filter: brightness(0.9);
	color: #fff;
}
 
.btnProdottoOutline:hover,
.btnProdottoOutline:focus-visible {
	background-color: var(--prod);
	color: #fff;
}
 
@media (prefers-reduced-motion: reduce) {
	.btnBeeDuty,
	.btnBeeDutyOutline,
	.btnBeeDutyBianco,
	.btnBeeDutyBiancoOutline,
	.btnProdotto,
	.btnProdottoOutline {
		transition: none;
	}
 
	.btnBeeDuty:hover,
	.btnBeeDutyOutline:hover,
	.btnBeeDutyBianco:hover,
	.btnBeeDutyBiancoOutline:hover,
	.btnProdotto:hover,
	.btnProdottoOutline:hover {
		transform: none;
	}
}
 
.btnBeeDuty {
	background-color: var(--bluBeeDutyScuro);
	border-color: var(--bluBeeDutyScuro);
	color: #fff;
}
 
.btnBeeDutyOutline {
	background-color: #fff;
	border-color: var(--bluBeeDutyScuro);
	color: var(--bluBeeDutyScuro);
}
 
.btnBeeDutyBianco {
	background-color: #fff;
	border-color: #fff;
	color: var(--bluBeeDutyScuro);
}
 
.btnBeeDutyBiancoOutline {
	background-color: transparent;
	border-color: #fff;
	color: #fff;
}
 
.btnProdotto {
	background-color: var(--prod);
	border-color: var(--prod);
	color: #fff;
}
 
.btnProdottoOutline {
	background-color: #fff;
	border-color: var(--prod);
	color: var(--prod);
}
 
.btnGrande {
	min-height: 52px;
	padding: 0 28px;
	font-size: 16px;
}
 
 
/* ---------- Card ---------- */
 
.cardBeeDuty {
	background-color: #fff;
	border: 1px solid var(--linea);
	border-radius: var(--raggio-card);
	padding: 28px;
}
 
.cardOmbra {
	box-shadow: var(--ombra-card);
}
 
.cardRuolo {
	background-color: #eef3fa;
	border-radius: 20px;
	padding: 20px;
}
 
.bordoBeeDuty {
	border: 1px solid var(--linea);
}
 
.bordoBluBeeDuty {
	border: 2px solid var(--bluBeeDutyScuro);
}
 
 
/* ---------- Form (anche con Contact Form 7: aggiungere la classe al contenitore) ---------- */
 
.formBeeDuty label {
	font-size: 14px;
	font-weight: 700;
	color: var(--bluNotte);
}
 
.formBeeDuty input[type="text"],
.formBeeDuty input[type="email"],
.formBeeDuty input[type="tel"],
.formBeeDuty textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 0 14px;
	border: 1.5px solid var(--bordoInput);
	border-radius: var(--raggio-input);
	background-color: #fff;
	font-family: inherit;
	font-size: 15px;
	color: var(--bluNotte);
}
 
.formBeeDuty textarea {
	padding: 12px 14px;
	min-height: 132px;
	line-height: 1.5;
	resize: vertical;
}
 
.formBeeDuty input:focus-visible,
.formBeeDuty textarea:focus-visible {
	outline: 3px solid var(--geScuro);
	outline-offset: 2px;
	border-color: var(--bluBeeDutyScuro);
}
 
.formBeeDuty input[type="checkbox"] {
	width: 20px;
	height: 20px;
	accent-color: var(--bluBeeDutyScuro);
}
 
 
/* ---------- Sezioni ---------- */
 
.paddingSezione {
	padding: var(--padding-sezione);
}
 
.sezionePagina {
	margin: 50px 0;
}
 
 
/* #########################################################
   2. HEADER
   Voci prodotto del menu: classi CSS "menu-prodotto prodRL | prodGE | prodPOS"
   ######################################################### */
 
.site-header .navbar {
	background-color: #fff;
	border-bottom: 1px solid var(--linea);
	padding-top: 12px;
	padding-bottom: 12px;
}
 
.site-header .navbar-brand {
	display: flex;
	align-items: center;
	margin-right: 0;
	padding: 0;
}
 
.site-header .logo {
	display: block;
	width: auto;
	height: 44px;
}
 
.site-header .header-actions {
	gap: 12px;
}
 
.site-header .header-accedi {
	min-height: 44px;
	padding: 0 24px;
}
 
 
/* ---------- Menu ---------- */
 
.site-header .navbar-nav .nav-link {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 4px;
	font-size: 15px;
	font-weight: 700;
	color: var(--bluNotte);
	text-decoration: none;
}
 
.site-header .navbar-nav .nav-link:hover,
.site-header .navbar-nav .nav-link:focus-visible,
.site-header .navbar-nav .nav-link.active,
.site-header .navbar-nav .current-menu-item > .nav-link {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 8px;
}
 
@media (min-width: 992px) {
	.site-header .navbar-nav {
		gap: 4px 28px;
	}
}
 
 
/* ---------- Voci prodotto ----------
   In Aspetto > Menu, nel campo "Classi CSS" della voce:
   RapportiniLavoro  ->  menu-prodotto prodRL
   Gestionale Cloud  ->  menu-prodotto prodGE
   BeePOS            ->  menu-prodotto prodPOS
   (se la classe finisce sul link e non sul <li> funziona uguale) */
 
.site-header .menu-prodotto > .nav-link,
.site-header .nav-link.menu-prodotto {
	color: var(--prod);
}
 
.site-header .menu-prodotto > .nav-link::before,
.site-header .nav-link.menu-prodotto::before {
	content: "";
	flex: none;
	width: 28px;
	height: 20px;
	background: var(--icona) center / contain no-repeat;
}
 
.site-header .prodRL {
	--icona: url('/wp-content/themes/btecno-child-main/img/logo/rapportinilavoro-logo.svg');
}
 
.site-header .prodGE {
	--icona: url('/wp-content/themes/btecno-child-main/img/logo/gestionale-cloud-logo.svg');
}
 
.site-header .prodPOS {
	--icona: url('/wp-content/themes/btecno-child-main/img/logo/beepos-logo.svg');
}
 
 
/* ---------- Mobile (menu a scomparsa) ---------- */
 
@media (max-width: 991.98px) {
	.site-header .offcanvas {
		background-color: #fff;
	}
 
	.site-header .navbar-nav .nav-link {
		min-height: 52px;
		padding: 0;
		font-size: 17px;
		border-bottom: 1px solid var(--linea);
	}
}
 
/* ---------- Accedi: freccia che scorre in hover ---------- */
 
.site-header .header-accedi::after {
	content: "";
	flex: none;
	width: 0;
	height: 14px;
	margin-left: 0;
	opacity: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: width 0.2s ease, margin-left 0.2s ease, opacity 0.2s ease;
}
 
.site-header .header-accedi:hover::after,
.site-header .header-accedi:focus-visible::after {
	width: 14px;
	margin-left: 8px;
	opacity: 1;
}
 
 
/* ---------- Pulsante hamburger (mobile) ---------- */
 
.site-header .toggler-menu {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-left: 4px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background-color: var(--azzurroChiaro);
	color: var(--bluBeeDutyScuro);
	cursor: pointer;
	transition: background-color 0.2s ease;
}
 
.site-header .toggler-menu:hover {
	background-color: #d3e7f5;
}
 
.site-header .toggler-menu-linee {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 5px;
	width: 22px;
}
 
.site-header .toggler-menu-linee span {
	display: block;
	width: 22px;
	height: 2.5px;
	border-radius: 2px;
	background-color: currentColor;
	transition: width 0.2s ease;
}
 
.site-header .toggler-menu-linee span:nth-child(2) {
	width: 15px;
}
 
.site-header .toggler-menu:hover .toggler-menu-linee span:nth-child(2) {
	width: 22px;
}
 
 
/* ---------- Testata del menu a scomparsa: logo al posto della scritta ---------- */
 
.site-header .offcanvas-header {
	padding: 12px 20px;
	background-color: #fff;
	border-bottom: 1px solid var(--linea);
}
 
.site-header .offcanvas-brand img {
	display: block;
	width: auto;
	height: 36px;
}
 
@media (prefers-reduced-motion: reduce) {
	.site-header .header-accedi::after,
	.site-header .toggler-menu,
	.site-header .toggler-menu-linee span {
		transition: none;
	}
}


/* #########################################################
   3. HERO
   Template: template-parts/home/hero.php
   ######################################################### */

div#content {
    padding-top: var(--hero-offset-header);
}

.hero {
	position: relative;
	overflow: hidden;
}

.hero-testi {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.hero-sottotitolo {
	margin: 0;
	font-size: 18px;
	line-height: 1.65;
	color: var(--testoSecondario);
}

.hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.hero-cta-giu::after {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	margin-left: 10px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12l7 7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12l7 7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hero-punti {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--testoSecondario);
}

.hero-punti li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.hero-punti li::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background-color: var(--bluBeeDutyScuro);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* ---------- Alveare ----------
   Disegnato su una larghezza di progetto di 616 unità: --u è il valore di 1 unità
   e scala tutto in proporzione alla colonna (unità cqw dei container query). */

.hero-alveare {
	container-type: inline-size;
	position: relative;
	width: 100%;
	max-width: 616px;
	aspect-ratio: 616 / 430;
	margin-inline: auto;
}

.hero-alveare-inner {
	--u: calc(100cqw / 616);
	position: absolute;
	inset: 0;
}

.hero-cella {
	position: absolute;
	left: calc(var(--u) * var(--x));
	top: calc(var(--u) * var(--y));
	display: block;
	width: calc(var(--u) * 200);
	height: calc(var(--u) * 231);
	background-color: var(--prodPieno);
	color: var(--bluNotte);
	text-decoration: none;
	transition: transform 0.2s ease;
}

a.hero-cella:hover,
a.hero-cella:focus-visible {
	color: var(--bluNotte);
	transform: translateY(-4px);
}

.hero-cella-interno {
	position: absolute;
	inset: calc(var(--u) * 3);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(var(--u) * 5);
	padding-top: calc(var(--u) * 14);
	background-color: var(--prodChiaro);
}

.hero-cella-logo {
	display: block;
	width: calc(var(--u) * 42);
	height: auto;
}

.hero-cella-nome {
	font-size: calc(var(--u) * 15);
	font-weight: 800;
	line-height: 1.2;
}

.hero-cella-label {
	font-size: calc(var(--u) * 11);
	line-height: 1.3;
	color: var(--testoMuted);
}

/* Cella centrale col logo */
.hero-cella-logo-beeduty {
	background-color: var(--linea);
}

.hero-cella-logo-beeduty .hero-cella-interno {
	padding-top: 0;
	background-color: #fff;
}

.hero-cella-logo-beeduty img {
	display: block;
	width: calc(var(--u) * 128);
	height: auto;
}


/* ---------- Mini-schermate dentro le celle ---------- */

.hero-mini {
	display: flex;
	flex-direction: column;
	gap: calc(var(--u) * 5);
	width: calc(var(--u) * 112);
	padding: calc(var(--u) * 7) calc(var(--u) * 8);
	border-radius: calc(var(--u) * 8);
	background-color: #fff;
	box-shadow: 0 2px 6px rgb(12 34 51 / 10%);
}

.hero-mini i,
.hero-mini b {
	display: block;
	font-style: normal;
}

.hero-mini-riga {
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 6);
}

.hero-mini-punto {
	flex: none;
	width: calc(var(--u) * 8);
	height: calc(var(--u) * 8);
	border-radius: 50%;
	background-color: var(--prodPieno);
}

.hero-mini-quadro {
	border-radius: calc(var(--u) * 2);
}

.hero-mini-barra {
	flex: 1;
	height: calc(var(--u) * 5);
	border-radius: calc(var(--u) * 3);
	background-color: var(--prodPieno);
	opacity: 0.35;
}

.hero-mini-barra-corta {
	flex: none;
	width: 60%;
}

.hero-mini-firma {
	width: 55%;
	height: calc(var(--u) * 12);
	margin-left: auto;
	border-bottom: calc(var(--u) * 2) solid var(--prod);
}

.hero-mini-testa {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.hero-mini-testa b {
	font-size: calc(var(--u) * 10);
	font-weight: 800;
	color: var(--prod);
}

.hero-mini-grafico {
	display: flex;
	align-items: flex-end;
	gap: calc(var(--u) * 4);
	height: calc(var(--u) * 22);
}

.hero-mini-grafico i {
	width: calc(var(--u) * 12);
	height: calc(var(--u) * var(--h));
	border-radius: calc(var(--u) * 2);
	background-color: var(--prodPieno);
}

.hero-mini-grafico .hero-mini-spenta {
	opacity: 0.35;
}


/* ---------- Scritte a mano ---------- */

.hero-nota {
	position: absolute;
	font-size: calc(var(--u) * 26);
	line-height: 1.05;
	color: var(--bluNotte);
	transform: rotate(-4deg);
}

.hero-nota-1 {
	left: 0;
	top: calc(var(--u) * 290);
	width: calc(var(--u) * 150);
	text-align: right;
}

.hero-nota-2 {
	left: calc(var(--u) * 474);
	top: calc(var(--u) * 30);
	width: calc(var(--u) * 142);
}


/* ---------- Mobile: alveare più semplice (nomi più grandi, niente dettagli minuti) ---------- */

@media (max-width: 767.98px) {
	.hero {
		padding-bottom: 48px;
	}

	.hero-cella-label,
	.hero-mini {
		display: none;
	}

	.hero-cella-interno {
		padding-top: 0;
		gap: calc(var(--u) * 10);
	}

	.hero-cella-logo {
		width: calc(var(--u) * 58);
	}

	.hero-cella-nome {
		font-size: calc(var(--u) * 20);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-cella {
		transition: none;
	}

	a.hero-cella:hover,
	a.hero-cella:focus-visible {
		transform: none;
	}
}