:root{
  --bg:#fff; --text:#0f172a; --muted:#64748b;
  --primary:#0ea5e9; --accent:#e91e63; --cream:#fff6ea; --gold:#c9a227;

  --container:1180px; --r:18px;
  --s1:.5rem; --s2:.75rem; --s3:1rem; --s4:1.5rem; --s5:2rem; --s6:3rem;

  --shadow:0 12px 30px rgba(15,23,42,.10);
  --shadow-strong:0 22px 60px rgba(15,23,42,.18);

  --dur:.7s; --ease:cubic-bezier(.22,.61,.36,1);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Poppins,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); background:var(--bg); line-height:1.6;
}
img,video{max-width:100%; height:auto; display:block}

/* Layout */
.container{max-width:var(--container); margin-inline:auto; padding-inline:clamp(var(--s3),4vw,var(--s5))}
.section{padding-block:clamp(var(--s5),7vw,var(--s6))}
h1,h2,h3{line-height:1.2; margin:0}
h1{font-size:clamp(2rem,4vw,3rem); font-weight:700}
h2{font-size:clamp(1.5rem,3vw,2.2rem); font-weight:600}
h3{font-size:clamp(1.1rem,2vw,1.3rem); font-weight:600}
.lead{font-size:clamp(1rem,1.4vw,1.125rem); color:var(--muted)}
.eyebrow{font-size:.9rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.center{text-align:center}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 18px; border-radius:999px; font-weight:600; text-decoration:none; border:1px solid transparent; transform:translateZ(0)}
.btn-primary{background:var(--primary); color:#fff}
.btn-accent{background:var(--accent); color:#fff}
.btn-ghost{background:#fff; color:var(--text); border-color:rgba(15,23,42,.12)}
.btn:hover{filter:brightness(1.05)} .btn:active{transform:translateY(1px)}
.cta{display:flex; flex-wrap:wrap; gap:.8rem}

/* ---------- HERO come Manuel ---------- */
.hero-aero .banner{
  position:relative; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-strong);
  min-height:clamp(360px,48vw,520px);
}
.hero-aero .banner > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:55% 55%;
  filter: brightness(1.06) contrast(1.04);
}
.hero-aero .overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(var(--s4),4vw,var(--s6)); text-align:center; background:none; color:#fff;
  perspective:1200px;             /* per tilt 3D del titolo */
}
/* Titolo bianco brillante + 3D glow + gleam (niente grigio sopra) */
.hero-title{
  margin:0; color:#fff; line-height:1.18;
  text-shadow:
    0 22px 44px rgba(0,0,0,.26),
    0 8px 18px rgba(0,0,0,.20),
    0 2px 0 rgba(0,0,0,.12);
  transform:translateZ(40px);     /* base “stacco” 3D */
  will-change:transform;
}
.hero-title .shine{ color:#fff; position:relative; animation:gleam 4.2s ease-in-out infinite; }
.hero-title .shine + br + .shine{ animation-delay:.8s; }

@keyframes gleam{
  0%{ text-shadow:0 22px 44px rgba(0,0,0,.26),0 8px 18px rgba(0,0,0,.20),0 2px 0 rgba(0,0,0,.12),0 0 0 rgba(255,255,255,0); filter:none; }
  45%{ text-shadow:0 22px 44px rgba(0,0,0,.24),0 8px 18px rgba(0,0,0,.18),0 2px 0 rgba(0,0,0,.10),0 0 32px rgba(255,255,255,.35); filter:brightness(1.02); }
  55%{ text-shadow:0 22px 44px rgba(0,0,0,.22),0 8px 18px rgba(0,0,0,.16),0 2px 0 rgba(0,0,0,.10),0 0 56px rgba(255,255,255,.55),0 0 96px rgba(255,255,255,.40); filter:brightness(1.06) saturate(1.06); }
  100%{ text-shadow:0 22px 44px rgba(0,0,0,.26),0 8px 18px rgba(0,0,0,.20),0 2px 0 rgba(0,0,0,.12),0 0 0 rgba(255,255,255,0); filter:none; }
}

/* Bottoncini glass in hero – posizionati in alto a destra */
.hero-quick{
  position:absolute; top:clamp(10px,2vw,14px); right:clamp(10px,2vw,14px);
  display:flex; gap:.5rem; flex-wrap:wrap; justify-content:flex-end; z-index:5;
}
.btn-glass{
  height:34px; padding:0 14px; font-size:.92rem;
  border-radius:999px; color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.35);
  background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.04));
  backdrop-filter:blur(6px);
}
.btn-glass:hover{ border-color:#fff; background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.08)); }

/* ---------- VIDEO ---------- */
.video{border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-strong)}
.section.center{ padding-top: clamp(2rem,4vw,3rem); }
.section.center h2{ margin-top:0; margin-bottom: clamp(2rem,4vw,3rem); line-height:1.3; text-align:center; }
.section.center .video{ max-width:90%; margin:0 auto; }
@media (max-width:768px){ .section.center .video{ max-width:100%; } }

/* ---------- ZIG ---------- */
.zig{display:grid; gap:clamp(var(--s4),4vw,var(--s6)); grid-template-columns:1.05fr .95fr; align-items:center}
@media (max-width:980px){ .zig{grid-template-columns:1fr} }
.callout{background:#fff; border:1px solid rgba(15,23,42,.06); border-radius:var(--r); padding:clamp(var(--s4),3vw,var(--s5)); box-shadow:var(--shadow)}
.float{border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-strong)}

/* ---------- Workshop (se usato) ---------- */
.workshop{
  background:linear-gradient(135deg, color-mix(in oklab, var(--primary)15%, #fff), #fff);
  border:1px solid rgba(15,23,42,.06); border-radius:var(--r);
  padding:clamp(var(--s4),3vw,var(--s5)); box-shadow:var(--shadow);
  text-align:center;
}

/* ---------- STORIA ---------- */
.story{display:grid; gap:clamp(var(--s4),4vw,var(--s6)); grid-template-columns:.95fr 1.05fr; align-items:start}
@media (max-width:980px){ .story{grid-template-columns:1fr} }
.story .img{border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-strong)}

/* ---------- QUOTE / CONTATTI ---------- */
.quote{display:grid; gap:clamp(var(--s4),4vw,var(--s6)); grid-template-columns:1.05fr .95fr; align-items:center}
@media (max-width:980px){ .quote{grid-template-columns:1fr} }
blockquote{
  margin:0; padding:var(--s5); background:var(--cream);
  border-left:4px solid var(--gold); border-radius:var(--r);
  font-weight:500; font-size:clamp(1.05rem,2.2vw,1.25rem);
}
blockquote footer{margin-top:.75rem; color:var(--muted); font-weight:600}
.shadow{box-shadow:var(--shadow-strong)}
.quote img{ filter:none !important; }

/* ---------- Separator (barca) full-bleed ---------- */
.banner{ position:relative; border-radius:var(--r); overflow:hidden; }
.banner img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.banner-full{
  height: clamp(180px, 26vw, 360px);
  width:100vw;
  margin-inline: calc(50% - 50vw);
  border-radius:0;
}

/* ---------- Footer ---------- */
.site-footer{padding:20px 0; border-top:1px solid #eee; background:#fff; margin-top:30px}
.footer-inner{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.footer-nav a{color:var(--primary); text-decoration:none}
.footer-nav a:hover{text-decoration:underline}

/* ---------- Effetti 3D / InView ---------- */
.media-3d{transform:perspective(1200px) translate3d(0,0,0) rotateX(0) rotateY(0); transition:transform .35s var(--ease), box-shadow .35s var(--ease); will-change:transform; border-radius:var(--r)}
.media-3d:hover{transform:perspective(1200px) translateZ(10px) rotateX(.6deg) rotateY(.6deg); box-shadow:var(--shadow-strong)}
.txt-3d{transform:translateZ(0); will-change:transform}

.inview{opacity:0; transform:translateY(16px)}
.inview--from-left{transform:translateX(-40px) rotateY(6deg)}
.inview--from-right{transform:translateX(40px) rotateY(-6deg)}
.inview--from-top{transform:translateY(-36px)}
.inview--from-bottom{transform:translateY(36px)}
.inview.inview--show{opacity:1; transform:none; transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease)}

/* ---------- Icone animate + Tilt ---------- */
.icon-animated{
  display:inline-grid; place-items:center;
  width: clamp(84px, 8vw, 120px); height: clamp(84px, 8vw, 120px);
  border-radius:22px;
  background:color-mix(in oklab, var(--accent)12%, #fff);
  border:1px solid color-mix(in oklab, var(--accent)30%, #fff);
  animation:popin .7s var(--ease) both, bob 6s ease-in-out infinite .6s;
  transform-style:preserve-3d;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.icon-animated img{
  width:clamp(44px, 4vw, 64px); height:clamp(44px, 4vw, 64px);
  object-fit:contain; transition:transform .5s var(--ease), filter .5s var(--ease);
}
.callout:hover .icon-animated img{ transform:translateY(-2px) scale(1.06) rotate(-1.5deg); filter:drop-shadow(0 8px 16px rgba(15,23,42,.15)); }
@keyframes popin{0%{opacity:0; transform:translateY(12px) scale(.92)}60%{opacity:1; transform:translateY(-2px) scale(1.02)}100%{transform:translateY(0) scale(1)}}
@keyframes bob{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}
}
.icon-animated.is-tilting{ animation:none !important; }

/* Accessibilità motion */
@media (prefers-reduced-motion: reduce){
  .inview,.inview--from-left,.inview--from-right,.inview--from-top,.inview--from-bottom{transform:none !important; opacity:1 !important}
  .media-3d,.media-3d:hover{transform:none !important}
  .icon-animated{animation:none}
}

/* Mobile: hero un filo più alto */
@media (max-width:720px){
  .hero-aero .banner{ min-height: clamp(360px, 60vw, 520px); }
  .hero-quick{ right:clamp(8px,3vw,12px); top:clamp(8px,3vw,12px); }
  .hero-aero .overlay{ padding:clamp(var(--s3),5vw,var(--s5)); }
}/* =========================================================
   ADS — HERO UNIFY (Manuel + Lara)
   Obiettivo: +10–15% più grande, meno bianco attorno, stessa cornice.
   Incolla in FONDO al CSS (o includi come file dopo gli altri CSS).
========================================================= */

:root{
  /* ~+15% vs 1100px/92vw */
  --ads-hero-max: 1260px;
  --ads-hero-vw: 96vw;

  --ads-hero-radius: 26px;
  --ads-hero-mt: clamp(10px, 1.6vw, 18px);

  /* ~+12–15% vs clamp(360px,48vw,520px) */
  --ads-hero-minh: clamp(400px, 54vw, 600px);
}

/* copre sia <header class="hero"> che eventuali <section class="hero"> */
header.hero,
section.hero,
.hero{
  width: min(var(--ads-hero-max), var(--ads-hero-vw));
  margin: var(--ads-hero-mt) auto 0;

  border-radius: var(--ads-hero-radius);
  overflow: hidden;

  border: 1px solid rgba(233,238,246,.72); /* Platinum */
  box-shadow:
    0 22px 60px rgba(0,0,0,.16),
    inset 0 0 0 1px rgba(255,255,255,.18);

  min-height: var(--ads-hero-minh);
}

/* Mobile: ancora più “piena” e meno bordo */
@media (max-width: 560px){
  header.hero,
  section.hero,
  .hero{
    width: 97vw;
    border-radius: 20px;
    min-height: clamp(340px, 72vw, 520px);
  }
}