/**************************************************************
 * VALORE24 — Base Stylesheet (riordinato e commentabile)
 * HTML invariato. Overlay pienamente parametrico.
 **************************************************************/

/** -----------------------------------------------------------
 * 1) VARIABILI GLOBALI
 * --------------------------------------------------------- */
:root {
  /* Color system */
  --ink:#0b1220;
  --muted:#5b6b7a;
  --blue:#0b2c57;
  --border:#e5e9f0;

  /* Slider: frecce e margini protetti */
  --arrow-size: 40px;      /* diametro frecce */
  --arrow-gap: 10px;       /* distanza frecce dal bordo */
  --hero-safe: calc(var(--arrow-size) + var(--arrow-gap) + 4px); /* margine protetto sx/dx */

  /* Overlay (parametrico) */
  --overlay-width:  min(60%, 720px);  /* px o % */
  --overlay-height: auto;             /* px o auto */
  --overlay-overflow: visible;        /* auto|hidden|visible */
  --overlay-bottom-gap: 0px;          /* spazio dal bordo inferiore */

  /* Overlay: centrature (Flex) */
  --overlay-justify: flex-start;      /* orizzontale: flex-start|center|flex-end */
  --overlay-align:   flex-start;      /* verticale:   flex-start|center|flex-end */

  /* Filigrana di pagina (default “soft corporate”) */
  --page-bg-image: none;              /* url('...') */
  --page-bg-opacity: .08;             /* 0–1  → visibilità immagine */
  --page-bg-blur: 2px;                /* 0–8px → sfocatura */
  --page-bg-gray: 100%;               /* 0–100% → desaturazione */
  --page-bg-sat: 60%;                 /* % extra post-gray */
  --page-bg-tint: 210 50% 35%;        /* HSL (blu corporate) */
  --page-bg-tint-alpha: .06;          /* 0–.2 → intensità velatura blu */
}

/** -----------------------------------------------------------
 * 2) RESET & BASE
 * --------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  line-height: 1.6;
}
.container { width: min(1140px, 92%); margin-inline: auto; }
a { color: #0f6bd8; text-decoration: none; }

/** -----------------------------------------------------------
 * 3) TOPBAR
 * --------------------------------------------------------- */
.topbar { background: var(--blue); color: #cfe0ff; font-size: 14px; }
.topbar a { color: #cfe0ff; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; }
.topbar .contact-left a, .topbar .contact-left span { margin-right: 10px; }
.social .ico {
  margin-left: 10px; opacity: .95; font-weight: 800;
  border: 1px solid #7ea6d9; border-radius: 50%;
  width: 28px; height: 28px; display: inline-grid; place-items: center; color: #e9f2ff;
}

/** -----------------------------------------------------------
 * 4) HEADER & NAV
 * --------------------------------------------------------- */
.site-header { background: #fff; border-bottom: 1px solid #dfe6f0; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.brand { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--ink); }
/* Logo immagine */
.brand-logo { display: block; height: 80px; width: auto; }
/* nascondo residui vecchio brand */
.brand-mark, .brand-name { display: none !important; }

.accent { color: #0f6bd8; }
.nav { display:flex; gap:10px; flex-wrap: wrap; }
.nav .pill {
  display: inline-block; padding: 8px 14px;
  border: 2px solid var(--blue); border-radius: 22px;
  color: var(--blue); text-decoration: none; font-weight: 600; transition: all .2s ease;
}
.nav .pill.active, .nav .pill:hover { background: var(--blue); color: #fff; }

/** -----------------------------------------------------------
 * 5) BREADCRUMB
 * --------------------------------------------------------- */
.breadcrumb { background: #f7f9fc; border-top: 1px solid #eef2f7; border-bottom: 1px solid #eef2f7; }
.breadcrumb .container { padding: 10px 0; }
.breadcrumb a { color: var(--blue); }
.sep { color: #94a3b8; margin: 0 6px; }

/** -----------------------------------------------------------
 * 6) HERO SLIDER (+ overlay parametrico)
 * --------------------------------------------------------- */
.hero {
  position: relative; margin: 20px 0 10px;
  border: 1px solid #e1e7f0; border-radius: 6px; overflow: hidden;
}
/* Frame con aspect-ratio */
.hero .slides { position: relative; aspect-ratio: 16/6; }
/* Slide sovrapposti */
.hero .slide{
  position: absolute; inset: 0; background: center/cover no-repeat; display: flex;
  align-items: var(--overlay-align, flex-start); justify-content: var(--overlay-justify, flex-start);
  opacity: 0; transition: opacity .5s ease;
}
.hero .slide.active { opacity: 1; }
/* Velo scuro su TUTTI gli slide */
.hero .slide::before {
  content:""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,44,87,.55), rgba(11,44,87,.12) 70%); pointer-events: none;
}

/* === HERO — OVERLAY leggibile, completamente parametrico === */
.hero .overlay{
  position: relative; z-index: 3;
  /* margini “freccia-safe” + distacco dal fondo */
  margin-left: var(--hero-safe); margin-right: var(--hero-safe);
  margin-bottom: var(--overlay-bottom-gap, 0);
  /* dimensioni del box */
  max-width: var(--overlay-width, min(60%, 720px));
  height: var(--overlay-height, auto);
  overflow: var(--overlay-overflow, visible);
  /* estetica del box */
  padding: 22px 26px; color:#fff; background: rgba(11,44,87,.55);
  backdrop-filter: saturate(120%) blur(1.5px);
  border-radius: 10px; box-shadow: 0 6px 14px rgba(0,0,0,.18); transition: transform .4s ease;
  /* allineamento contenuto interno */
  text-align: var(--overlay-text-align, left);
  display: flex; flex-direction: column;
  justify-content: var(--overlay-text-valign, start);
  align-items: var(--overlay-items-halign, stretch);
}
/* Tipografia overlay */
.hero h1{ margin: 0 0 10px; font-size: clamp(22px, 3.2vw, 36px); line-height: 1.12; }
/* Button nell’overlay */
.hero .overlay .btn{
  display:inline-block; width:auto; white-space:nowrap;
  box-shadow:0 2px 0 rgba(0,0,0,.18);
  transition: background .18s ease, box-shadow .18s ease, transform .02s ease;
  will-change: transform, box-shadow;
}
.hero .overlay .btn:hover{ transform: translateY(-1px); box-shadow:0 3px 0 rgba(0,0,0,.18); }
.hero .overlay .btn:active{ transform: translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.25) inset; }
.hero .overlay .btn:focus-visible{
  outline:none; box-shadow: 0 0 0 3px rgba(255,255,255,.55), 0 0 0 5px rgba(15,107,216,.55);
}
.hero .overlay p{ display:block; margin:0 0 12px; }
/* Solo SLIDE 1: centra il bottone, testo a sx */
.hero .slides .slide:first-child .overlay .btn{ align-self:center; margin-top:6px; }
/* Frecce */
.hero .arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:var(--arrow-size); height:var(--arrow-size); border-radius:50%;
  background:#fff; display:grid; place-items:center; border:1px solid #d8e2ee; cursor:pointer; z-index:2;
}
.hero .arrow.left{ left:var(--arrow-gap); } .hero .arrow.right{ right:var(--arrow-gap); }

/* HERO — Slide 1 (impostazioni) */
.hero .slides .slide:first-child {
  --overlay-justify: center;  /* centrato orizzontalmente */
  --overlay-align:   flex-end;/* in basso */
  --overlay-width: 1000px;
  --overlay-height: auto;
  --overlay-overflow: visible;
  --overlay-bottom-gap: 10px;
  --overlay-text-align: left;
  --overlay-text-valign: center;
}
.hero .slides .slide:first-child .overlay h1{ font-size: clamp(24px, 3.2vw, 34px); margin:0 0 6px; }
.hero .slides .slide:first-child .overlay h2{
  font-size: clamp(16px, 2.2vw, 18px); line-height:1.25; margin:0 0 10px; opacity:.95;
}
.hero .slides .slide:first-child .overlay p{ margin:0 0 14px; }

/** -----------------------------------------------------------
 * 7) SEZIONE SERVIZI / CARDS (griglia generica)
 * --------------------------------------------------------- */
.link-bar{
  display:block; text-align:center; background:var(--blue); color:#fff;
  padding:14px 0; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  border-radius:3px; text-decoration:none; outline:none; transition: background .25s, box-shadow .25s;
}
.link-bar:hover, .link-bar:focus{ outline:none; }
.link-bar:active{ background:#08244a; transform: translateY(1px); }

.services{ margin:22px 0 0; }
.services .bar{ background:#0b2c57; color:#fff; text-align:center; padding:14px 0; font-weight:700; text-transform:uppercase; letter-spacing:.5px; border-radius:3px; }
.services p.sub{ color:#5b6b7a; text-align:center; margin:12px 0 18px; }
.cards{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
.card{
  border:1px solid #e1e7f0; border-radius:4px; background:#fff; padding:14px; position:relative;
}
.card img{ width:100%; border-radius:2px; margin:0 0 10px; }
.card h3{ margin:6px 0 8px; font-size:18px; }
.card p{ margin:0 0 10px; color:#334155; }
.card .btn{ display:inline-block; background:#0b2c57; color:#fff; padding:10px 14px; border-radius:3px; text-decoration:none; font-size:14px; font-weight:700; }
.card .corner-arrow{
  position:absolute; right:8px; bottom:8px; width:26px; height:26px;
  border-radius:50%; border:1px solid #d8e2ee; display:grid; place-items:center; background:#fff;
}

/** -----------------------------------------------------------
 * 8) CONTENT PAGES / PROSE
 * --------------------------------------------------------- */
.section{ padding:28px 0; }
.prose p{ margin:0 0 12px; }
.prose ul{ margin:8px 0 16px 20px; }

/** -----------------------------------------------------------
 * 9) FORM (base)
 * --------------------------------------------------------- */
.input, textarea{
  width:100%; padding:10px; border:1px solid #e1e7f0; border-radius:6px;
}
.form-row{ margin-bottom:12px; }

/** -----------------------------------------------------------
 * 10) FOOTER
 * --------------------------------------------------------- */
.site-footer{ border-top:1px solid var(--border); margin-top:24px; text-align:center; }
.foot-inner{ padding:18px 0; color:#64748b; font-size:13px; line-height:1.4; }
.footer-link{ color:var(--blue); text-decoration:none; font-weight:600; }
.footer-link:hover{ text-decoration: underline; }
#current-year{ transition: opacity .6s ease; opacity:0; }
#current-year.loaded{ opacity:1; }

/** -----------------------------------------------------------
 * 11) ABOUT / TEAM
 * --------------------------------------------------------- */
.about{ max-width:78ch; }
.team-grid{ display:grid; grid-template-columns:1fr; gap:24px; margin-top:16px; }
.member-card{
  display:grid; grid-template-columns:96px 1fr; gap:16px; padding:16px;
  border:1px solid var(--border); border-radius:16px; background:#fff; align-items:start;
}
.member-photo{ width:96px; height:96px; border-radius:50%; object-fit:cover; border:1px solid var(--border); }
.member-name{ margin:0 0 4px; }
.member-meta{ margin:0 0 8px; color:var(--muted); font-size:14px; }
.member-role{ margin:0 0 8px; font-weight:600; }
.member-bullets{ margin:0; padding-left:18px; }
@media (min-width: 840px){ .about{ max-width:none; } .team-grid{ grid-template-columns: 1fr 1fr; } }

/* — Servizi (testo) — */
.prose .svc h2{ margin-top:8px; }
.prose .svc + hr{ margin:28px 0; }

.prose .contact-box{
  margin-top:14px; padding:12px 14px; background:#f6f8fb;
  border:1px solid var(--border); border-radius:10px;
}
.prose .cta{
  margin-top:16px; padding:14px; border-left:4px solid var(--blue);
  background:#f6f8fb; border-radius:8px;
}

a.button-link{
  color:#fff; background:var(--blue); padding:6px 14px; border-radius:6px; font-weight:500;
  text-decoration:none; margin-left:4px; transition: background .2s;
}
a.button-link:hover{ background:#09305f; }

/** -----------------------------------------------------------
 * 12) BUTTONS (global)
 * --------------------------------------------------------- */
.btn{
  display:inline-block; background:var(--blue); color:#fff; padding:10px 14px;
  border-radius:6px; text-decoration:none; font-weight:700; border:0; line-height:1;
  cursor:pointer; transition: background .2s ease, transform .02s ease;
}
.btn:hover{ background:#09305f; }
.btn:active{ transform: translateY(1px); }
/* allinea "a.button-link" e ".btn" */
.button-link{ display:inline-block; }

/** -----------------------------------------------------------
 * 13) FORM (uniformazione campi)
 * --------------------------------------------------------- */
form.prose .input,
form.prose textarea.input{
  width:100%; padding:10px 12px; border:1px solid #e1e7f0; border-radius:6px; background:#fff;
  outline:none; transition: border-color .2s, box-shadow .2s;
}
form.prose .input:focus,
form.prose textarea.input:focus{
  border-color:#b7c7de; box-shadow:0 0 0 3px rgba(15,107,216,.12);
}
/* card visiva per il form */
.form-card{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:18px; }
/* griglia e spaziatura coerenti */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-row{ margin-bottom:12px; }
@media (max-width: 820px){ .form-grid{ grid-template-columns:1fr; } }
/* label: peso e micro-tipografia */
form.prose label{ font-weight:600; color:var(--ink); }
form.prose label .hint{ font-weight:400; color:var(--muted); }
/* captcha più compatto */
#captcha-label{ font-weight:600; }
form.prose .input[name="captcha"]{ max-width:220px; }

/** -----------------------------------------------------------
 * 14) TITOLI SEZIONE (uniforme)
 * --------------------------------------------------------- */
.section h1:first-child{ margin-top:0; }
.prose h1{ font-size: clamp(28px, 4vw, 36px); margin:0 0 12px; }
.prose h2{ margin:22px 0 10px; }
.prose hr{ border:0; border-top:1px solid var(--border); margin:18px 0; }

/** -----------------------------------------------------------
 * 15) ABOUT (finiture + pulsanti centrati)
 * --------------------------------------------------------- */
.about ul{
  list-style:none; padding-left:0; display:flex; flex-direction:column; gap:10px;
}
.about li em{ font-style:italic; color:var(--muted); }
.member-card{ border-radius:16px; transition: box-shadow .2s, transform .02s; }
.member-card:hover{ box-shadow:0 4px 14px rgba(15,25,45,.08); }
.member-photo{ border:1px solid var(--border); }
.member-role{ color:var(--ink); }
.about ul li .btn{ display:inline-block; width:fit-content; padding:10px 18px; border-radius:22px; font-weight:600; }
/* Pulsanti centrati nella sezione About */
.about-buttons{
  list-style:none; padding-left:0; display:flex; flex-direction:column; align-items:center; gap:12px; margin:18px 0 24px;
}
.about-buttons li{ display:flex; justify-content:center; }
.about-buttons .btn{ display:inline-block; padding:10px 22px; border-radius:24px; font-weight:600; text-align:center; width:fit-content; min-width:260px; }

/** -----------------------------------------------------------
 * 16) RESPONSIVE TWEAKS
 * --------------------------------------------------------- */
@media (max-width: 900px){
  .cards{ grid-template-columns:1fr; }
  .hero .overlay{
    /* su mobile limitiamo la larghezza, rispettando comunque l’override */
    max-width: min(92%, var(--overlay-width, 720px));
    margin-left: var(--hero-safe); margin-right: var(--hero-safe);
    padding: 18px 20px;
  }
}

/** ------------------------------------------------------------
 * 17) SFONDO IN FILIGRANA (per-pagina via CSS vars)
 * ------------------------------------------------------------ */
/* Attivazione: aggiungi la classe `has-filigrana` al <body>.
   Personalizzazione: imposta le variabili inline sul <body>. */
body.has-filigrana::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background: var(--page-bg-image) center/cover no-repeat;
  filter: grayscale(var(--page-bg-gray)) saturate(var(--page-bg-sat)) blur(var(--page-bg-blur));
  opacity: var(--page-bg-opacity); pointer-events:none;
}
body.has-filigrana::after{
  content:""; position:fixed; inset:0; z-index:-1;
  background: hsl(var(--page-bg-tint) / var(--page-bg-tint-alpha));
  pointer-events:none;
}
/* “Cartoncino” sotto al contenuto per leggibilità */
.has-filigrana main.container{
  background: rgba(255,255,255,.92); border-radius:6px; backdrop-filter: blur(1px); padding:18px;
}

/** ------------------------------------------------------------
 * 18) BLOCCHI SERVIZI con immagine per-sezione
 * ------------------------------------------------------------ */
.svc{
  --svc-img: none;
  --svc-radius: 16px;
  --svc-shadow: 0 6px 24px rgba(11,18,32,.08);
  display: grid; grid-template-columns: 1fr minmax(260px,360px);
  gap: 24px; align-items: center; position: relative;
}
.svc h2{ margin-top:0; }
.svc .cta{
  background: hsl(210 28% 96%); border:1px solid var(--border);
  padding:12px 14px; border-radius:12px;
}
.svc .cta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.svc .cta a.button-link {
  align-self: flex-end;         /* ridondante ma chiaro */
  margin-left: 0;               /* elimina offset precedente */
}
/* Riquadro immagine a destra (side-card) */
.svc-fig{
  width:100%; aspect-ratio:16/10; border-radius:var(--svc-radius);
  background: var(--svc-img) center/cover no-repeat, linear-gradient(#eef2f7,#eef2f7);
  box-shadow: var(--svc-shadow); border:1px solid var(--border); transition: transform .25s ease;
}
.svc:hover .svc-fig{ transform: translateY(-2px); }
/* Variante “filigrana” (watermark nel blocco) */
.svc.svc--filigrana{ grid-template-columns:1fr; }
.svc.svc--filigrana::before{
  content:""; position:absolute; inset:0;
  background: var(--svc-img) center/cover no-repeat;
  opacity:.10; filter: grayscale(70%) blur(1px);
  border-radius: var(--svc-radius); pointer-events:none;
}
.svc.svc--filigrana > *{ position:relative; }
/* Fallback: se side-card ma manca .svc-fig → torna 1 colonna (browser moderni) */
@supports selector(:has(*)){
  .svc.svc--sidecard:not(:has(.svc-fig)){ grid-template-columns:1fr; }
}
/* Responsive blocchi */
@media (max-width: 900px){
  .svc{ grid-template-columns:1fr; }
  .svc-fig{ order:2; } /* immagine sotto al testo su mobile */
}

/* fallback: se la custom property manca, accetta anche background-image inline */
.svc-fig[style*="background-image"]{
  background: none;                /* rimuove il gradient di default */
  background-size: cover;
  background-position: center;
}