@charset "utf-8";
/* ============================================================
   ORTIZ VICTOR — DESIGN SYSTEM 2026 "Moderno colorato"
   Palette dal logo: indigo #28166F, arancio #EF7F1A, azzurro #0E9CD4.
   Superfici chiare, blocchi di colore, angoli morbidi, bento grid.
   (I nomi delle classi restano quelli usati dalle pagine .asp)
   ============================================================ */
:root{
  /* brand */
  --indigo:#28166F; --indigo-2:#3A2A8C; --indigo-50:#EEEBFA;
  --orange:#EF7F1A; --orange-ink:#B8590A; --orange-50:#FFF1E4;
  --sky:#0E9CD4; --sky-ink:#0A6E98; --sky-50:#E4F5FC;
  --sun:#FFC94A; --mint:#2EC4A0;

  /* superfici e testo (nomi storici mantenuti) */
  --ink:#F6F5FB;           /* fondo pagina */
  --steel-950:#FFFFFF;
  --steel-900:#FFFFFF;
  --steel-850:#F0EEF8;
  --steel-800:#E6E3F3;
  --steel-700:#D6D2EA;
  --line:rgba(40,22,111,.10);
  --line-2:rgba(40,22,111,.20);
  --bone:#1B1440;          /* testo primario */
  --lead:#3F3a62;
  --mute:#5F5A80;
  --mute-2:#8A86A6;
  --frost:var(--sky-ink); --frost-deep:var(--sky-ink); --frost-glow:rgba(14,156,212,.25);
  --ember:var(--orange-ink); --ember-soft:var(--orange); --ember-glow:rgba(239,127,26,.28);

  --ff-display:"Bricolage Grotesque","Plus Jakarta Sans",system-ui,sans-serif;
  --ff-body:"Plus Jakarta Sans",system-ui,sans-serif;
  --ff-mono:"Plus Jakarta Sans",system-ui,sans-serif;

  --r-sm:12px; --r:20px; --r-lg:28px; --r-xl:40px;
  --shadow:0 1px 2px rgba(40,22,111,.06),0 8px 24px rgba(40,22,111,.07);
  --shadow-lg:0 2px 6px rgba(40,22,111,.06),0 24px 60px rgba(40,22,111,.14);
  --gut:clamp(1.25rem,4vw,4rem);
  --ease:cubic-bezier(.16,.84,.28,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);

  --bs-body-bg:var(--ink); --bs-body-color:var(--bone); --bs-border-color:var(--line);
  --bs-primary:#0E9CD4; --bs-link-color:var(--sky-ink);
}
/* blocco di colore (ex "scuro"): indigo con testo chiaro */
.dk{
  --ink:#28166F; --steel-950:#2F1D7A; --steel-900:#342283; --steel-850:#3A2A8C; --steel-800:#43339A; --steel-700:#5040A8;
  --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.28);
  --bone:#FFFFFF; --lead:#E4E0FA; --mute:#C9C2F0; --mute-2:#A69FD6;
  --frost:#7FD3F5; --ember:#FFB067; --ember-soft:#FFB067;
  color:var(--bone);
}

*{ -webkit-tap-highlight-color:transparent }
html{ scroll-behavior:smooth }
body{ background:var(--ink); color:var(--bone); font-family:var(--ff-body); font-weight:400; font-size:17px; line-height:1.65; overflow-x:hidden; -webkit-font-smoothing:antialiased }
::selection{ background:var(--orange); color:#fff }
a{ color:var(--sky-ink); text-decoration-thickness:1px; text-underline-offset:3px }
a:hover{ color:var(--orange-ink) }
img{ max-width:100%; height:auto }
section{ position:relative }

/* --- Tipografia ------------------------------------------- */
h1,h2,h3,h4,.display-face,.duo-temp,.stat .num,.hb-stat .big,.big-marq span,.foot-wordmark,.ticker-row span{ font-family:var(--ff-display) }
h1,h2,h3,h4,.display-face{ font-weight:800; letter-spacing:-.025em; line-height:1.08; margin:0; color:inherit }
.h-xl{ font-size:clamp(2.6rem,6vw,5.2rem) }
.h-lg{ font-size:clamp(2rem,3.8vw,3.4rem) }
.h-md{ font-size:clamp(1.5rem,2.3vw,2.2rem) }
.lead-txt{ font-size:clamp(1.02rem,1.2vw,1.2rem); color:var(--lead) }
.mono{ font-size:.8rem; font-weight:600; letter-spacing:.02em }
.txt-mute{ color:var(--mute) }
.frost{ color:var(--sky-ink) } .dk .frost{ color:var(--frost) }
.ember{ color:var(--orange-ink) } .dk .ember{ color:var(--ember) }
.thin{ font-weight:500; font-style:normal }
.hl{ background:linear-gradient(transparent 62%, rgba(239,127,26,.35) 62%); padding:0 .08em; border-radius:4px }
.grad-txt{ background:linear-gradient(100deg,var(--orange) 0%,#F05A5A 50%,var(--indigo-2) 100%); -webkit-background-clip:text; background-clip:text; color:transparent }

.eyebrow{ display:inline-flex; align-items:center; gap:.55rem; padding:.42rem .95rem .42rem .75rem; border-radius:99px;
  background:var(--sky-50); color:var(--sky-ink); font-size:.8rem; font-weight:700; letter-spacing:.01em; line-height:1.2 }
.eyebrow::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--sky); flex:none }
.eyebrow.ember{ background:var(--orange-50); color:var(--orange-ink) }
.eyebrow.ember::before{ background:var(--orange) }
.dk .eyebrow{ background:rgba(255,255,255,.12); color:#fff }
.dk .eyebrow::before{ background:var(--sun) }

/* ============================================================
   ANIMAZIONI — reveal on scroll (stessa API di js/ov.js)
   ============================================================ */
[data-rv]{ will-change:transform,opacity }
[data-rv="up"]{ opacity:0; transform:translate3d(0,38px,0); transition:opacity .8s var(--ease) var(--d,0s), transform 1s var(--ease-out) var(--d,0s) }
[data-rv="down"]{ opacity:0; transform:translate3d(0,-30px,0); transition:opacity .8s var(--ease) var(--d,0s), transform 1s var(--ease-out) var(--d,0s) }
[data-rv="left"]{ opacity:0; transform:translate3d(-50px,0,0); transition:opacity .8s var(--ease) var(--d,0s), transform 1s var(--ease-out) var(--d,0s) }
[data-rv="right"]{ opacity:0; transform:translate3d(50px,0,0); transition:opacity .8s var(--ease) var(--d,0s), transform 1s var(--ease-out) var(--d,0s) }
[data-rv="zoom"]{ opacity:0; transform:scale(.88) translateY(24px); transition:opacity .7s var(--ease) var(--d,0s), transform 1s var(--spring) var(--d,0s) }
[data-rv="pop"]{ opacity:0; transform:scale(.6) rotate(-6deg); transition:opacity .5s var(--ease) var(--d,0s), transform .9s var(--spring) var(--d,0s) }
[data-rv="wipe"]{ clip-path:inset(0 100% 0 0 round var(--r)); transition:clip-path 1.1s var(--ease-out) var(--d,0s) }
[data-rv="wipe-up"]{ clip-path:inset(100% 0 0 0 round var(--r)); transition:clip-path 1.1s var(--ease-out) var(--d,0s) }
[data-rv="line"]{ transform:scaleX(0); transform-origin:left; transition:transform 1.2s var(--ease-out) var(--d,0s) }
[data-rv="blur"]{ opacity:0; filter:blur(14px); transform:translate3d(0,24px,0); transition:opacity 1s var(--ease) var(--d,0s), filter 1.1s var(--ease) var(--d,0s), transform 1.1s var(--ease) var(--d,0s) }
[data-rv].is-in{ opacity:1 !important; transform:none !important; clip-path:inset(0 0 0 0 round var(--r)) !important; filter:none !important }
[data-rv="line"].is-in{ transform:scaleX(1) !important }

.split-line{ display:block; overflow:hidden; padding-bottom:.2em; margin-bottom:-.2em }
.split-line > span{ display:block; transform:translate3d(0,110%,0); transition:transform 1s var(--ease-out) var(--d,0s) }
.is-in .split-line > span{ transform:none }
.split-word{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.2em; margin-bottom:-.2em }
.split-word > i{ display:inline-block; font-style:inherit; transform:translate3d(0,105%,0); transition:transform .8s var(--ease-out) var(--d,0s) }
.is-in .split-word > i{ transform:none }

.img-reveal{ position:relative; overflow:hidden; border-radius:var(--r); background:var(--steel-850) }
.img-reveal img{ display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.18); transition:transform 1.5s var(--ease-out) var(--d,0s) }
.img-reveal::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,var(--sky),var(--indigo)); transform-origin:right; transition:transform 1s var(--ease-out) var(--d,0s) }
.is-in.img-reveal img{ transform:scale(1) }
.is-in.img-reveal::after{ transform:scaleX(0) }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important }
  [data-rv]{ opacity:1 !important; transform:none !important; clip-path:none !important; filter:none !important }
  .split-line>span,.split-word>i{ transform:none !important }
  .img-reveal::after{ transform:scaleX(0) !important }
  [data-parallax]{ transform:none !important }
}

/* ============================================================
   NAVBAR / TOPBAR
   ============================================================ */
#scrollbar{ position:fixed; top:0; left:0; height:3px; z-index:1080; width:0%; background:linear-gradient(90deg,var(--sky),var(--orange)); border-radius:0 3px 3px 0 }
.topbar{ background:var(--indigo); color:#D8D2F7; font-size:.8rem; font-weight:500; padding:.5rem 0; position:relative; z-index:1050 }
.topbar a{ color:#fff; text-decoration:none } .topbar a:hover{ color:var(--sun) }
.topbar span[style]{ color:#A69FD6 !important }
.pulse-dot{ width:8px; height:8px; border-radius:50%; background:var(--mint); display:inline-block; box-shadow:0 0 0 0 rgba(46,196,160,.5); animation:pulse 2.2s infinite }
@keyframes pulse{ 70%{ box-shadow:0 0 0 10px rgba(46,196,160,0) } 100%{ box-shadow:0 0 0 0 rgba(46,196,160,0) } }

.navbar-ov{ background:rgba(255,255,255,.86); backdrop-filter:blur(16px) saturate(160%); padding:.8rem 0; border-bottom:1px solid transparent;
  transition:padding .4s var(--ease), box-shadow .4s, border-color .4s; color:var(--bone) }
.navbar-ov.dk{ --bone:#1B1440; --mute:#5F5A80; color:#1B1440 }
.navbar-ov.stuck{ padding:.45rem 0; box-shadow:0 10px 30px rgba(40,22,111,.08); border-bottom-color:var(--line) }
.navbar-ov .navbar-brand{ display:flex; align-items:center; padding:0 }
.brand-logo{ height:46px; width:auto; transition:height .4s var(--ease) }
.navbar-ov.stuck .brand-logo{ height:38px }
.navbar-ov .nav-link{ font-weight:600; font-size:.95rem; color:#1B1440 !important; padding:.5rem .85rem !important; border-radius:99px; transition:background .25s, color .25s }
.navbar-ov .nav-link:hover,.navbar-ov .nav-link.active{ background:var(--indigo-50); color:var(--indigo) !important }
.navbar-ov .dropdown-menu{ border:1px solid var(--line); border-radius:var(--r); padding:.5rem; box-shadow:var(--shadow-lg); background:#fff }
.navbar-ov .dropdown-item{ border-radius:var(--r-sm); padding:.6rem .9rem; font-weight:500; color:#1B1440 }
.navbar-ov .dropdown-item:hover,.navbar-ov .dropdown-item.active{ background:var(--sky-50); color:var(--sky-ink) }
.navbar-toggler{ border:0; border-radius:14px; padding:.55rem .7rem; background:var(--indigo-50) }
.navbar-toggler:focus{ box-shadow:none }
.navbar-toggler-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%2328166F' stroke-width='2.4' stroke-linecap='round' d='M5 9h20M5 15h20M5 21h13'/%3E%3C/svg%3E") }
@media (max-width:991.98px){
  .navbar-ov .navbar-collapse{ background:#fff; border-radius:var(--r); margin-top:.8rem; padding:.8rem; box-shadow:var(--shadow-lg) }
}

/* --- Bottoni ---------------------------------------------- */
.btn-ov{ --c:var(--orange); --t:#fff;
  position:relative; display:inline-flex; align-items:center; gap:.6rem; padding:.95rem 1.55rem; border-radius:99px;
  font-weight:700; font-size:.98rem; line-height:1.1; text-decoration:none; border:2px solid var(--c); background:var(--c); color:var(--t);
  box-shadow:0 8px 22px -8px var(--c); transition:transform .35s var(--spring), box-shadow .35s, background .3s, color .3s, border-color .3s; cursor:pointer }
.btn-ov:hover{ color:var(--t); transform:translateY(-3px); box-shadow:0 14px 30px -10px var(--c) }
.btn-ov:active{ transform:translateY(0) scale(.98) }
.btn-ov .arw{ display:inline-grid; place-items:center; width:1.6em; height:1.6em; border-radius:50%; background:rgba(255,255,255,.22); transition:transform .4s var(--spring) }
.btn-ov:hover .arw{ transform:translateX(4px) rotate(-45deg) }
.btn-ov.solid{ --c:var(--orange) }
.btn-ov.frosty{ --c:var(--sky) }
.btn-ov.ghost{ --c:transparent; --t:var(--bone); border-color:var(--line-2); box-shadow:none; background:transparent }
.btn-ov.ghost .arw{ background:var(--indigo-50) }
.btn-ov.ghost:hover{ border-color:var(--bone); box-shadow:none }
.dk .btn-ov.ghost{ --t:#fff; border-color:rgba(255,255,255,.4) } .dk .btn-ov.ghost .arw{ background:rgba(255,255,255,.14) }
.btn-ov.white{ --c:#fff; --t:var(--indigo) } .btn-ov.white .arw{ background:var(--indigo-50) }

/* ============================================================
   SEZIONI / LAYOUT
   ============================================================ */
.sec{ padding:clamp(4.2rem,9vw,7.5rem) 0 }
.sec-tight{ padding:clamp(3rem,6vw,4.8rem) 0 }
.bg-steel{ background:#fff }
.bg-steel-2{ background:linear-gradient(180deg,#fff 0%,var(--ink) 100%) }
.bg-tint-sky{ background:var(--sky-50) } .bg-tint-orange{ background:var(--orange-50) } .bg-tint-indigo{ background:var(--indigo-50) }
.hr-ov{ height:1px; background:var(--line); border:0; opacity:1; margin:0 }
.cont{ padding-left:var(--gut); padding-right:var(--gut) }

/* forme decorative (blob) */
.blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; pointer-events:none; z-index:0 }
.blob.o{ background:var(--orange) } .blob.s{ background:var(--sky) } .blob.i{ background:var(--indigo-2) } .blob.y{ background:var(--sun) }

/* ============================================================
   HOME — HERO BENTO
   ============================================================ */
.hb{ padding:clamp(1.2rem,2.5vw,2rem) 0 clamp(3rem,6vw,5rem) }
.hb-grid{ display:grid; gap:16px; grid-template-columns:repeat(12,1fr); grid-auto-rows:minmax(120px,auto) }
.hb-card{ position:relative; overflow:hidden; border-radius:var(--r-lg); padding:clamp(1.4rem,2.6vw,2.4rem); isolation:isolate }
.hb-title{ grid-column:span 7; grid-row:span 3; background:#fff; box-shadow:var(--shadow); display:flex; flex-direction:column; justify-content:space-between; gap:2rem }
.hb-title h1{ font-size:clamp(2.4rem,5.2vw,4.6rem); line-height:1.02 }
.hb-photo{ grid-column:span 5; grid-row:span 2; padding:0; min-height:320px; background:var(--indigo) }
.hb-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.hb-photo .tag{ position:absolute; left:1rem; bottom:1rem; z-index:2 }
.hb-stat{ grid-column:span 5; grid-row:span 1; background:var(--orange); color:#fff; display:flex; align-items:center; gap:1.4rem }
.hb-stat .big{ font-size:clamp(3rem,5vw,4.4rem); font-weight:800; line-height:.9; letter-spacing:-.05em }
.hb-stat p{ margin:0; font-weight:600; line-height:1.35 }
.hb-mini{ grid-column:span 3; background:var(--sky-50); display:flex; flex-direction:column; justify-content:space-between; gap:1rem; text-decoration:none; color:var(--bone);
  transition:transform .5s var(--spring), box-shadow .4s }
.hb-mini:hover{ transform:translateY(-6px) rotate(-.6deg); box-shadow:var(--shadow-lg); color:var(--bone) }
.hb-mini.o{ background:var(--orange-50) } .hb-mini.i{ background:var(--indigo); color:#fff } .hb-mini.i:hover{ color:#fff }
.hb-mini.y{ background:#FFF6DA }
.hb-mini h3{ font-size:1.15rem; font-weight:800 }
.hb-mini .ico{ margin:0; background:#fff }
.chip-row{ display:flex; flex-wrap:wrap; gap:.5rem }
.chip-ov{ display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .85rem; border-radius:99px; background:var(--ink); font-size:.82rem; font-weight:600; color:var(--lead) }
.chip-ov svg{ width:16px; height:16px }
.floaty{ animation:floaty 6s ease-in-out infinite }
@keyframes floaty{ 50%{ transform:translateY(-10px) } }
@media (max-width:991px){
  .hb-title{ grid-column:span 12 } .hb-photo{ grid-column:span 12; min-height:280px } .hb-stat{ grid-column:span 12 } .hb-mini{ grid-column:span 6 }
}
@media (max-width:575px){ .hb-mini{ grid-column:span 6; padding:1.1rem } .hb-mini h3{ font-size:1rem } }

/* vecchio hero (compatibilita') */
.hero{ position:relative; overflow:hidden; isolation:isolate; min-height:80vh; display:flex; align-items:flex-end; background:var(--indigo); color:#fff }
.hero-bg{ position:absolute; inset:0; z-index:-2 }
.hero-bg img{ width:100%; height:100%; object-fit:cover }
.hero-grid{ display:none }
.hero-inner{ padding:6rem 0 3rem }
.hero-title{ font-size:clamp(2.6rem,5.6vw,5rem) }
.temp-hud,.scroll-cue,.temp-track,.temp-needle{ display:none }

/* ============================================================
   HEADER PAGINE INTERNE
   ============================================================ */
.page-hero{ position:relative; overflow:hidden; isolation:isolate; border-radius:0 0 var(--r-xl) var(--r-xl);
  min-height:46vh; display:flex; align-items:flex-end; padding:clamp(5rem,12vh,8rem) 0 clamp(2.4rem,5vh,3.4rem);
  background:linear-gradient(125deg,var(--indigo) 0%,#3A2A8C 55%,#1C7FB8 100%) }
.page-hero .hero-bg{ z-index:-2 }
.page-hero .hero-bg img{ opacity:.28; mix-blend-mode:luminosity; filter:none }
.page-hero::before{ content:""; position:absolute; width:46vw; height:46vw; right:-12vw; top:-20vw; border-radius:50%; background:var(--orange); opacity:.55; filter:blur(80px); z-index:-1 }
.page-hero::after{ content:""; position:absolute; width:28vw; height:28vw; left:-8vw; bottom:-14vw; border-radius:50%; background:var(--sky); opacity:.5; filter:blur(70px); z-index:-1 }
.page-hero h1{ font-size:clamp(2.1rem,4.8vw,4.2rem); max-width:20ch; color:#fff }
.page-hero .lead-txt{ max-width:62ch; color:#E4E0FA }
.crumbs{ list-style:none; padding:0; margin:0 0 1.2rem; display:flex; flex-wrap:wrap; gap:.3rem .6rem; font-size:.85rem; font-weight:600; color:#C9C2F0 }
.crumbs li + li::before{ content:"›"; margin-right:.6rem; opacity:.7 }
.crumbs a{ color:#fff; text-decoration:none } .crumbs a:hover{ color:var(--sun) }
.crumbs [aria-current]{ color:var(--sun) }

/* ============================================================
   COMPONENTI
   ============================================================ */
/* Ticker */
.ticker{ overflow:hidden; padding:1rem 0; background:var(--indigo); transform:rotate(-1deg); margin-top:1rem; margin-bottom:1rem; border-radius:var(--r) }
.ticker-row{ display:flex; width:max-content; animation:slide 36s linear infinite }
.ticker:hover .ticker-row{ animation-play-state:paused }
@keyframes slide{ to{ transform:translateX(-50%) } }
.ticker-row span{ font-weight:800; font-size:clamp(1.05rem,1.8vw,1.45rem); color:#fff; padding:0 1.4rem; display:flex; align-items:center; gap:1.4rem; white-space:nowrap; letter-spacing:-.01em }
.ticker-row span::after{ content:""; width:10px; height:10px; border-radius:50%; background:var(--orange); flex:none }
.ticker-row span:nth-child(3n)::after{ background:var(--sky) } .ticker-row span:nth-child(3n+1)::after{ background:var(--sun) }

/* Numeri */
.stat{ background:#fff; border-radius:var(--r); padding:1.5rem 1.4rem; box-shadow:var(--shadow); height:100%; position:relative; overflow:hidden }
.stat::before{ content:""; position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg,var(--sky),var(--orange)); transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease-out) var(--d,0s) }
.stat.is-in::before{ transform:scaleX(1) }
.stat .num{ font-weight:800; font-size:clamp(2.2rem,3.6vw,3.3rem); line-height:1; letter-spacing:-.04em; color:var(--indigo); display:flex; align-items:baseline; gap:.05em }
.stat .num i{ font-style:normal; font-size:.55em; color:var(--orange) }
.stat .lbl{ font-size:.9rem; font-weight:600; color:var(--mute); margin-top:.5rem }
.dk .stat{ background:rgba(255,255,255,.08); box-shadow:none } .dk .stat .num{ color:#fff }

/* Bento tiles con foto */
.bento{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px }
.tile{ position:relative; overflow:hidden; border-radius:var(--r-lg); min-height:300px; display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.7rem; text-decoration:none; color:#fff; isolation:isolate; background:var(--indigo); transition:transform .6s var(--spring), box-shadow .5s }
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.1s var(--ease-out) }
.tile picture{ position:absolute; inset:0; z-index:-2 } .tile picture img{ z-index:auto }
.tile::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(40,22,111,0) 30%,rgba(40,22,111,.88) 100%); transition:opacity .5s }
.tile.cold::after{ background:linear-gradient(180deg,rgba(14,156,212,0) 25%,rgba(10,70,120,.9) 100%) }
.tile.hot::after{ background:linear-gradient(180deg,rgba(239,127,26,0) 25%,rgba(170,70,10,.9) 100%) }
.tile:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); color:#fff }
.tile:hover img{ transform:scale(1.08) }
.tile .idx{ position:absolute; top:1.2rem; left:1.2rem; padding:.3rem .7rem; border-radius:99px; background:rgba(255,255,255,.9); color:var(--indigo); font-size:.75rem; font-weight:800 }
.tile h3{ font-size:clamp(1.3rem,1.9vw,1.9rem); font-weight:800 }
.tile p{ font-size:.95rem; color:rgba(255,255,255,.9); margin:.5rem 0 0; max-width:46ch }
.tile .go{ position:absolute; top:1rem; right:1rem; width:44px; height:44px; border-radius:50%; background:#fff; color:var(--indigo); display:grid; place-items:center; font-weight:800;
  transition:transform .5s var(--spring), background .3s, color .3s }
.tile:hover .go{ transform:rotate(45deg) scale(1.08); background:var(--orange); color:#fff }
.tile.cold:hover .go{ background:var(--sky) }
.t-12{ grid-column:span 12 } .t-6{ grid-column:span 6 } .t-4{ grid-column:span 4 } .t-8{ grid-column:span 8 }
.t-tall{ min-height:420px } .t-wide{ min-height:300px } .t-wide .tile-body{ max-width:60ch }
@media (max-width:991px){ .t-6,.t-4,.t-8{ grid-column:span 6 } .t-tall{ min-height:340px } }
@media (max-width:575px){ .t-12,.t-6,.t-4,.t-8{ grid-column:span 12 } .tile{ min-height:260px } }

/* Freddo / Caldo */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.duo-half{ position:relative; overflow:hidden; border-radius:var(--r-xl); padding:clamp(2rem,4.5vw,4rem); display:flex; flex-direction:column; justify-content:space-between; gap:2rem; isolation:isolate; min-height:520px; color:#fff }
.duo-half img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transform:scale(1.06); transition:transform 1.2s var(--ease-out) }
.duo-half:hover img{ transform:scale(1) }
.duo-half.cold::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(160deg,rgba(14,156,212,.92),rgba(40,22,111,.9)) }
.duo-half.hot::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(200deg,rgba(255,170,70,.92),rgba(200,80,10,.92)) }
.duo-temp{ font-size:clamp(2.6rem,5vw,4.6rem); font-weight:800; line-height:.95; letter-spacing:-.04em }
.duo-list{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.5rem }
.duo-list li{ padding:.55rem 1rem; border-radius:99px; background:rgba(255,255,255,.18); backdrop-filter:blur(6px); font-weight:600; font-size:.92rem; display:flex; gap:.6rem; align-items:center; transition:background .3s, transform .4s var(--spring) }
.duo-list li:hover{ background:rgba(255,255,255,.32); transform:translateY(-2px) }
.duo-list li span{ opacity:.6; font-size:.8em }
.duo-half .eyebrow{ background:rgba(255,255,255,.2); color:#fff } .duo-half .eyebrow::before{ background:#fff }
.duo-half .lead-txt{ color:rgba(255,255,255,.92) }
@media (max-width:767px){ .duo{ grid-template-columns:1fr } .duo-half{ min-height:420px } }

/* Lavori */
.work{ text-decoration:none; color:var(--bone); display:block; background:#fff; border-radius:var(--r-lg); padding:.7rem .7rem 1.2rem; box-shadow:var(--shadow); transition:transform .5s var(--spring), box-shadow .4s }
.work:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); color:var(--bone) }
.work .frame{ overflow:hidden; border-radius:var(--r); position:relative; aspect-ratio:4/3 }
.work.wide .frame{ aspect-ratio:16/10 }
.work .frame img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out) }
.work:hover .frame img{ transform:scale(1.06) }
.work .meta{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:1rem .6rem 0 }
.work h4,.work h3{ font-size:1.15rem; font-weight:800; transition:color .3s; margin-bottom:0 }
.work:hover h4,.work:hover h3{ color:var(--sky-ink) }
.work .cat{ display:inline-block; padding:.25rem .65rem; border-radius:99px; background:var(--orange-50); color:var(--orange-ink); font-size:.75rem; font-weight:700 }
.offset-up{ margin-top:0 }

/* Metodo */
.flow{ position:relative; padding-top:2rem }
.flow-line{ position:absolute; top:2.95rem; left:0; right:0; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--sky),var(--orange)) }
.step{ position:relative; padding-top:3.4rem }
.step::before{ content:""; position:absolute; top:.35rem; left:0; width:22px; height:22px; border-radius:50%; background:#fff; border:5px solid var(--sky); transform:scale(0); transition:transform .6s var(--spring) var(--d,0s) }
.step.is-in::before{ transform:scale(1) }
.step .n{ position:absolute; top:.3rem; left:2rem; padding:.15rem .6rem; border-radius:99px; background:var(--indigo); color:#fff; font-size:.72rem; font-weight:800 }
.step h4,.step h3{ font-size:1.2rem; font-weight:800; margin-bottom:.5rem }
.step p{ font-size:.93rem; color:var(--mute); margin:0 }
.dk .flow-line{ background:linear-gradient(90deg,var(--sun),var(--orange)) }

/* Partner */
.marq{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) }
.marq-row{ display:flex; width:max-content; gap:14px; animation:slide 42s linear infinite; padding:.4rem 0 }
.marq-row.rev{ animation-direction:reverse; animation-duration:50s }
.marq:hover .marq-row{ animation-play-state:paused }
.chip{ flex:none; width:180px; height:92px; background:#fff; border-radius:var(--r); display:grid; place-items:center; padding:1rem 1.2rem; box-shadow:var(--shadow);
  filter:grayscale(1); opacity:.7; transition:.45s var(--spring) }
.chip img{ max-width:100%; max-height:100%; object-fit:contain }
.chip:hover{ filter:none; opacity:1; transform:translateY(-4px) scale(1.03) }

/* Banda CTA colorata */
.band{ position:relative; overflow:hidden; isolation:isolate; border-radius:var(--r-xl);
  background:linear-gradient(120deg,#EF7F1A 0%,#F4952F 45%,#F2663A 100%); color:#fff }
.band.dk{ --bone:#fff }
.band::before{ content:""; position:absolute; width:520px; height:520px; right:-160px; top:-260px; border-radius:50%; border:70px solid rgba(255,255,255,.12); z-index:-1; animation:spin 30s linear infinite }
.band::after{ content:""; position:absolute; width:260px; height:260px; left:8%; bottom:-180px; border-radius:50%; background:rgba(40,22,111,.18); z-index:-1 }
@keyframes spin{ to{ transform:rotate(360deg) } }
.band .eyebrow{ background:rgba(255,255,255,.2); color:#fff }
.band .btn-ov.solid{ --c:#fff; --t:var(--indigo) } .band .btn-ov.solid .arw{ background:var(--indigo-50) }
.band .btn-ov.frosty{ --c:var(--indigo); --t:#fff }
.band .pulse-dot{ background:#fff }

/* Grande scritta a scorrimento */
.big-marq{ overflow:hidden; white-space:nowrap; padding:1.4rem 0 }
.big-marq span{ display:inline-block; font-weight:800; font-size:clamp(3rem,9vw,8rem); line-height:1; letter-spacing:-.05em; color:var(--indigo-50); -webkit-text-stroke:2px var(--indigo); color:transparent; padding-right:.3em; will-change:transform }
.big-marq span i{ font-style:normal; color:var(--orange); -webkit-text-stroke:0 }

/* News */
.news{ text-decoration:none; color:var(--bone); display:block; height:100%; background:#fff; border-radius:var(--r-lg); padding:.7rem .7rem 1.3rem; box-shadow:var(--shadow); transition:transform .5s var(--spring), box-shadow .4s }
.news:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); color:var(--bone) }
.news .frame{ overflow:hidden; border-radius:var(--r); aspect-ratio:16/10 }
.news .frame img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out) }
.news:hover .frame img{ transform:scale(1.06) }
.news h4,.news h3{ font-size:1.1rem; font-weight:800; margin:1rem .5rem .5rem; transition:color .3s }
.news:hover h4,.news:hover h3{ color:var(--orange-ink) }
.news p{ font-size:.92rem; color:var(--mute); margin:0 .5rem }
.news .date{ display:inline-block; margin:1rem .5rem 0; padding:.2rem .6rem; border-radius:99px; background:var(--sky-50); color:var(--sky-ink); font-size:.75rem; font-weight:700 }

/* Contatti / CTA */
.cta-huge{ font-size:clamp(2.3rem,5vw,4.4rem); line-height:1 }
.contact-row{ display:flex; justify-content:space-between; gap:1.2rem; align-items:center; padding:1rem 1.2rem; margin-bottom:.6rem; background:#fff; border-radius:var(--r); box-shadow:var(--shadow);
  transition:transform .4s var(--spring), box-shadow .4s; flex-wrap:wrap }
.contact-row:hover{ transform:translateX(6px); box-shadow:var(--shadow-lg) }
.contact-row a{ color:var(--bone); text-decoration:none; font-weight:700; word-break:break-word }
.contact-row:hover a{ color:var(--sky-ink) }
.contact-row .mono{ color:var(--mute) }
.dk .contact-row{ background:rgba(255,255,255,.08); box-shadow:none } .dk .contact-row a{ color:#fff }

/* Form */
.form-ov .form-control,.form-ov .form-select{ background:#fff; border:2px solid var(--line); border-radius:14px; color:var(--bone); padding:.85rem 1rem; font-size:1rem; transition:border-color .3s, box-shadow .3s }
.form-ov .form-control:focus,.form-ov .form-select:focus{ border-color:var(--sky); box-shadow:0 0 0 4px rgba(14,156,212,.15); background:#fff; color:var(--bone) }
.form-ov .form-control::placeholder{ color:var(--mute-2) }
.form-ov label,.form-ov .form-label{ font-size:.85rem; font-weight:700; color:var(--lead); margin-bottom:.35rem }
.form-ov .form-check-input{ border-color:var(--line-2) }
.form-ov .form-check-input:checked{ background-color:var(--sky); border-color:var(--sky) }
.form-ov .form-text,.form-ov .help-block{ font-size:.8rem; color:var(--mute-2) }
.dk .form-ov .form-control,.dk .form-ov .form-select{ background:rgba(255,255,255,.95) }
#send2,.hp-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0 }
.map-ov{ border:0; width:100%; aspect-ratio:16/9; border-radius:var(--r-lg); box-shadow:var(--shadow) }

/* Card generiche + icone */
.card-ov{ background:#fff; border-radius:var(--r-lg); padding:clamp(1.5rem,2.4vw,2.2rem); height:100%; box-shadow:var(--shadow); border:0;
  transition:transform .5s var(--spring), box-shadow .4s }
.card-ov:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg) }
.card-ov h3{ font-size:1.25rem; font-weight:800; margin-bottom:.7rem }
.card-ov p{ color:var(--mute); font-size:.96rem; margin:0 }
.ico{ width:58px; height:58px; display:grid; place-items:center; border-radius:18px; background:var(--sky-50); color:var(--sky-ink); margin-bottom:1.3rem;
  transition:transform .6s var(--spring), background .4s, color .4s }
.ico svg{ width:30px; height:30px }
.card-ov:hover .ico{ transform:rotate(-8deg) scale(1.1); background:var(--sky); color:#fff }
.card-ov.hot .ico{ background:var(--orange-50); color:var(--orange-ink) }
.card-ov.hot:hover .ico{ background:var(--orange); color:#fff }
.row > [class*="col"]:nth-child(3n) > .card-ov:not(.hot) .ico{ background:var(--indigo-50); color:var(--indigo) }
.row > [class*="col"]:nth-child(3n) > .card-ov:not(.hot):hover .ico{ background:var(--indigo); color:#fff }
.dk .card-ov{ background:rgba(255,255,255,.08); box-shadow:none } .dk .card-ov p{ color:var(--mute) }
.dk .ico{ background:rgba(255,255,255,.12); color:#fff }

/* Card immagine (galleria/prodotti) */
.g-card{ display:block; text-decoration:none; color:var(--bone); background:#fff; border-radius:var(--r-lg); padding:.7rem .7rem 1.2rem; box-shadow:var(--shadow); height:100%; transition:transform .5s var(--spring), box-shadow .4s }
.g-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); color:var(--bone) }
.g-card .frame{ overflow:hidden; border-radius:var(--r); aspect-ratio:4/3; background:var(--steel-850) }
.g-card .frame img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out) }
.g-card:hover .frame img{ transform:scale(1.07) }
.g-card h3{ font-size:1.05rem; font-weight:800; margin:1rem .5rem .35rem; transition:color .3s }
.g-card:hover h3{ color:var(--sky-ink) }
.g-card p{ font-size:.9rem; color:var(--mute); margin:0 .5rem }
.pill{ display:inline-flex; align-items:center; gap:.5rem; border-radius:99px; padding:.55rem 1.1rem; background:#fff; box-shadow:var(--shadow);
  font-size:.9rem; font-weight:700; color:var(--lead); text-decoration:none; transition:.3s }
.pill:hover{ color:var(--indigo); transform:translateY(-2px) }
.pill.active{ background:var(--indigo); color:#fff }

/* Testo lungo (anche da CMS) */
.prose{ font-size:1.05rem; color:var(--lead); max-width:74ch }
.prose.wide{ max-width:none }
.prose p{ margin:0 0 1.2rem }
.prose h2,.prose h3{ color:var(--bone); margin:2.4rem 0 1rem }
.prose h2{ font-size:clamp(1.5rem,2.4vw,2.1rem) } .prose h3{ font-size:clamp(1.15rem,1.6vw,1.45rem) }
.prose strong,.prose b{ font-weight:700; color:var(--bone) }
.prose ul{ list-style:none; padding:0; margin:0 0 1.4rem }
.prose ul li{ position:relative; padding:.35rem 0 .35rem 2rem }
.prose ul li::before{ content:""; position:absolute; left:0; top:.72rem; width:1.1rem; height:1.1rem; border-radius:50%;
  background:var(--sky-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%230A6E98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat }
.prose img{ border-radius:var(--r) }
.prose table{ width:100%; border-collapse:collapse; margin-bottom:1.5rem } .prose td,.prose th{ border-top:1px solid var(--line); padding:.6rem .4rem }
.dk .prose{ color:var(--lead) }

/* FAQ */
.faq .accordion-item{ background:#fff; border:0; border-radius:var(--r) !important; margin-bottom:.7rem; box-shadow:var(--shadow); overflow:hidden }
.faq .accordion-button{ background:#fff; color:var(--bone); box-shadow:none; padding:1.25rem 1.4rem; font-weight:700; font-size:1.02rem; border-radius:var(--r) !important }
.faq .accordion-button:not(.collapsed){ color:var(--sky-ink); background:var(--sky-50) }
.faq .accordion-button::after{ background-color:var(--indigo-50); border-radius:50%; background-size:.9rem; background-position:center; width:2rem; height:2rem }
.faq .accordion-body{ padding:1rem 1.4rem 1.4rem; color:var(--mute) }

/* Catalogo: tabelle prezzi */
.cat-tab table{ min-width:560px; font-size:.92rem }
.cat-tab tr:first-child td{ font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--mute); vertical-align:bottom }
.cat-tab td{ vertical-align:top }

/* u-line: sottolineatura animata */
.u-line{ background:linear-gradient(90deg,var(--orange),var(--sun)) no-repeat 0 92%/0 .28em; transition:background-size .9s var(--ease-out) .35s }
.is-in .u-line,.is-in.u-line{ background-size:100% .28em }

/* Footer */
footer{ background:var(--indigo); color:#D8D2F7; padding:clamp(3.5rem,7vw,5.5rem) 0 2rem; margin-top:clamp(3rem,6vw,5rem); border-radius:0; position:relative; overflow:hidden }
footer.dk{ --bone:#fff }
footer a{ color:#D8D2F7; text-decoration:none; transition:color .3s } footer a:hover{ color:var(--sun) }

.foot-title{ font-size:.8rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--sun); margin-bottom:1rem }
.foot-wordmark{ font-weight:800; font-size:clamp(2.6rem,11vw,9rem); line-height:.85; letter-spacing:-.06em; text-align:center; white-space:nowrap; user-select:none;
  background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.22),rgba(255,255,255,.08)); -webkit-background-clip:text; background-clip:text; color:transparent }
footer .mono{ color:#A69FD6 !important }

/* FAB preventivo */
.fab{ position:fixed; right:20px; bottom:20px; z-index:1060; display:inline-flex; align-items:center; gap:.6rem; padding:.95rem 1.4rem; border-radius:99px;
  background:var(--orange); color:#fff; text-decoration:none; font-weight:800; font-size:.95rem; box-shadow:0 14px 34px -8px rgba(239,127,26,.7);
  transform:translateY(160%); transition:transform .7s var(--spring), background .3s }
.fab.show{ transform:none }
.fab:hover{ background:var(--indigo); color:#fff }
@media (max-width:575px){ .fab{ right:12px; bottom:12px; padding:.8rem 1.1rem; font-size:.88rem } }

/* Utilita' */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:2000; background:var(--orange); color:#fff; padding:.75rem 1.2rem; border-radius:99px }
.skip-link:focus{ left:1rem; top:1rem }
:focus-visible{ outline:3px solid var(--sky); outline-offset:3px; border-radius:6px }
[data-parallax]{ will-change:transform }
.tilt{ transition:transform .6s var(--ease-out) }
.floaty-slow{ animation:floaty 9s ease-in-out infinite }

/* Compatibilita' markup legacy (BS3 / CMS) */
.img-responsive{ display:block; max-width:100%; height:auto }
.pull-right{ float:right } .pull-left{ float:left }
.clearfix::after{ content:""; display:table; clear:both }
.visible-xs,.visible-sm{ display:none }
.btn-primary{ --bs-btn-bg:var(--sky); --bs-btn-border-color:var(--sky); --bs-btn-hover-bg:var(--indigo); --bs-btn-hover-border-color:var(--indigo); border-radius:99px }
.table{ --bs-table-bg:transparent; --bs-table-color:var(--bone) }
.pagination{ --bs-pagination-border-radius:99px; --bs-pagination-color:var(--indigo); --bs-pagination-active-bg:var(--indigo); --bs-pagination-active-border-color:var(--indigo); gap:.3rem }
.pagination .page-link{ border-radius:99px !important; border:0; box-shadow:var(--shadow) }
.pill svg{ flex:none }
.art-fig img{ width:100%; height:auto; border-radius:var(--r) }

/* ============================================================
   LARGHEZZA: tutto segue il .container di Bootstrap
   ============================================================ */
:root{ --cw:calc(100% - 24px) }
@media (min-width:576px){ :root{ --cw:540px } }
@media (min-width:768px){ :root{ --cw:720px } }
@media (min-width:992px){ :root{ --cw:960px } }
@media (min-width:1200px){ :root{ --cw:1140px } }
@media (min-width:1400px){ :root{ --cw:1320px } }
.page-hero,.band,.duo,.boxed,.ticker,.big-marq{ width:var(--cw); max-width:calc(100% - 24px); margin-left:auto; margin-right:auto }
.page-hero > .container,.band > .container,.boxed > .container{ max-width:none; padding-left:clamp(1.25rem,4vw,3rem); padding-right:clamp(1.25rem,4vw,3rem) }
.boxed{ border-radius:var(--r-xl) }
.big-marq{ border-radius:var(--r) }
.hb{ overflow-x:clip }
