/* ============================================================

   HEARTBEAT LAB — CSS CONDIVISO

   Usato da: index.html + tutte le pagine categoria

   ============================================================ */



*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }



:root {

  --c-bg:       #f0f4ff;

  --c-surface:  #ffffff;

  --c-card:     #ffffff;

  --c-border:   rgba(0,0,0,0.08);

  --c-text:     #1a1a2e;

  --c-muted:    #6b7280;

  --c-a:        #ff4d6d;

  --c-b:        #ffd166;

  --c-c:        #06d6a0;

  --c-d:        #8b5cf6;

  --c-e:        #0ea5e9;

  --font-head:  'Syne', sans-serif;

  --font-body:  'DM Sans', sans-serif;

  --radius:     18px;

  --transition: 0.35s cubic-bezier(0.4,0,0.2,1);

}



html { scroll-behavior: smooth; scroll-padding-top: 80px; }



body {

  background: var(--c-bg);

  color: var(--c-text);

  font-family: var(--font-body);

  font-size: 16px;

  line-height: 1.65;

  overflow-x: hidden;

}



/* ── ORB BACKGROUND ── */

.bg-orbs { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }

.orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.22; animation: orb-drift 18s ease-in-out infinite alternate; }

.orb-1 { width:600px;height:600px;top:-200px;left:-150px;background:var(--c-d);animation-delay:0s; }

.orb-2 { width:500px;height:500px;top:40%;right:-200px;background:var(--c-a);animation-delay:-6s; }

.orb-3 { width:400px;height:400px;bottom:-100px;left:30%;background:var(--c-c);animation-delay:-12s; }

.orb-4 { width:350px;height:350px;top:20%;left:40%;background:var(--c-b);opacity:0.18;animation-delay:-4s; }



@keyframes orb-drift {

  from { transform: translate(0,0) scale(1); }

  to   { transform: translate(40px,30px) scale(1.08); }

}



@media (max-width:600px) {

  .bg-orbs { display:none !important; }

  body {

    background:

      radial-gradient(ellipse 120% 40% at 0% 0%,   rgba(139,92,246,0.18) 0%, transparent 60%),

      radial-gradient(ellipse 100% 50% at 100% 20%, rgba(255,77,109,0.14) 0%, transparent 60%),

      radial-gradient(ellipse 90%  45% at 30% 100%, rgba(6,214,160,0.12)  0%, transparent 55%),

      radial-gradient(ellipse 80%  35% at 60% 50%,  rgba(255,209,102,0.10)0%, transparent 50%),

      #f0f4ff;

  }

}



/* ── CONTAINER ── */

.container { max-width:1200px; margin:0 auto; padding:0 24px; position:relative; z-index:2; }

section { position:relative; z-index:2; }



/* ── NAVBAR ── */

nav {

  position: fixed;

  top: 50px; left: 0; right: 0;

  z-index: 100;

  overflow: visible;

  padding: 0 24px;

  background: transparent;

  border-bottom: 1px solid transparent;

  box-shadow: none;

  transition: background 0.55s ease, padding 0.55s cubic-bezier(0.4,0,0.2,1),

              box-shadow 0.55s ease, border-color 0.55s ease,

              top 0.55s cubic-bezier(0.4,0,0.2,1);

}

nav.scrolled {

  top: 0;

  padding: 6px 24px;

  background: rgba(255,255,255,0.95);

  border-bottom: 1px solid var(--c-border);

  box-shadow: 0 2px 20px rgba(0,0,0,0.07);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

}

.nav-inner {

  max-width: 1200px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  position: relative;

  height: 70px;

}

.nav-logo {

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  transition: left 0.7s cubic-bezier(0.4,0,0.2,1),

              transform 0.7s cubic-bezier(0.4,0,0.2,1);

  z-index: 101;

}

.nav-logo img {

  height: 160px;

  object-fit: contain;

  transition: height 0.7s cubic-bezier(0.4,0,0.2,1), filter 0.7s ease;

  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.18));

}

nav.scrolled .nav-logo { left: 0; transform: translateX(0); }

nav.scrolled .nav-logo img { height: 42px; filter: none; }

.nav-links { display:none !important; }

.hamburger { display:flex; flex-direction:column; gap:5px; cursor:pointer; padding:10px; z-index:210; }

.hamburger span { display:block; width:26px; height:2px; background:var(--c-text); border-radius:2px; transition:var(--transition); }

.nav-mobile {

  display:none; flex-direction:column; gap:0; background:rgba(255,255,255,0.98);

  padding:6px 0; align-items:stretch; border-radius:14px;

  box-shadow:0 8px 32px rgba(0,0,0,0.15);

  position:fixed; top:56px; right:14px; width:170px; z-index:300;

  border:1px solid var(--c-border);

}

.nav-mobile a { color:var(--c-text); text-decoration:none; font-size:0.95rem; font-weight:600; padding:12px 20px; border-bottom:1px solid var(--c-border); display:block; transition:color var(--transition); }

.nav-mobile a:last-child { border-bottom:none; }

.nav-mobile.open { display:flex; }

.nav-mobile-row { position:fixed !important; top:14px !important; right:24px !important; z-index:210; }

nav.scrolled .nav-mobile-row { top:14px !important; }



/* ── BUTTONS ── */

.btn { display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:100px; font-family:var(--font-body); font-size:0.95rem; font-weight:600; cursor:pointer; text-decoration:none; transition:transform var(--transition), box-shadow var(--transition); }

.btn:hover { transform:translateY(-3px); }

.btn-primary { background:linear-gradient(135deg,var(--c-a),var(--c-b)); color:#1a1a2e; box-shadow:0 8px 32px rgba(255,77,109,0.30); }

.btn-primary:hover { box-shadow:0 12px 40px rgba(255,77,109,0.45); }

.btn-ghost { background:transparent; color:var(--c-text); border:2px solid var(--c-border); }

.btn-ghost:hover { border-color:rgba(0,0,0,0.25); }



/* ── SECTION TAGS ── */

.section-tag { display:inline-block; padding:4px 14px; border-radius:100px; font-size:0.78rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:12px; }

.tag-a { background:rgba(255,77,109,0.12); color:var(--c-a); }

.tag-b { background:rgba(255,209,102,0.18); color:#b45309; }

.tag-c { background:rgba(6,214,160,0.12); color:#059669; }

.tag-d { background:rgba(139,92,246,0.12); color:var(--c-d); }

.tag-e { background:rgba(14,165,233,0.12); color:var(--c-e); }



.section-title { font-family:var(--font-head); font-size:clamp(1.8rem,3vw,2.6rem); font-weight:800; line-height:1.1; margin-bottom:16px; }



/* ── FADE-UP ANIMATION ── */

.fade-up { opacity:0; transform:translateY(24px); transition:opacity .55s ease, transform .55s ease; }

.fade-up.visible { opacity:1; transform:translateY(0); }



/* ── PRODUCT GRID ── */

.prod-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }

@media (max-width:600px) { .prod-grid { grid-template-columns:repeat(2,1fr); } }



.prod-card { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,0.07); cursor:pointer; transition:transform .2s, box-shadow .2s; }

.prod-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.12); }

.prod-card-img { width:100%; height:150px; overflow:hidden; }

.prod-card-img img { width:100%; height:100%; object-fit:cover; display:block; }

.prod-card-body { padding:10px 12px 14px; }

.prod-card-name { font-family:var(--font-head); font-weight:700; font-size:0.88rem; margin-bottom:4px; }

.prod-card-desc { font-size:0.75rem; color:var(--c-muted); line-height:1.4; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }



/* ── FOOTER ── */

footer { padding:32px 0; border-top:1px solid var(--c-border); position:relative; z-index:2; margin-top:40px; }

.footer-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }

.footer-links { display:flex; gap:24px; list-style:none; }

.footer-links a { color:var(--c-muted); text-decoration:none; font-size:0.88rem; transition:color var(--transition); }

.footer-links a:hover { color:var(--c-text); }



/* ── SOCIAL BUTTON ── */

.social-btn { display:inline-flex; align-items:center; gap:8px; color:#fff; text-decoration:none; padding:10px 16px; border-radius:12px; font-size:0.85rem; font-weight:700; transition:transform .2s, opacity .2s; }

.social-btn:hover { transform:translateY(-2px); opacity:0.9; }



/* ── WA FISSO + TORNA SU ── */

#wa-fixed { position:fixed; bottom:24px; left:20px; z-index:500; background:#25d366; color:#fff; width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(37,211,102,0.45); text-decoration:none; font-size:1.6rem; transition:transform .2s; }

#wa-fixed:hover { transform:scale(1.1); }

#totop { position:fixed; bottom:24px; right:20px; z-index:500; background:var(--c-a); color:#fff; width:44px; height:44px; border-radius:50%; border:none; cursor:pointer; box-shadow:0 4px 16px rgba(255,77,109,0.35); font-size:1.2rem; display:none; align-items:center; justify-content:center; transition:transform .2s; }

#totop:hover { transform:scale(1.1); }



/* ── DETAIL POPUP (prodotto) ── */

@keyframes slideUp { from { transform:translateY(30px); opacity:0; } to { transform:translateY(0); opacity:1; } }

@keyframes sparklePop { 0%{transform:scale(0)} 70%{transform:scale(1.2)} 100%{transform:scale(1)} }



/* ── MOBILE ── */

@media (max-width: 600px) {

  nav {

    top: 0 !important;

    overflow: visible !important;

    background: transparent !important;

    box-shadow: none !important;

    border: none !important;

    padding: 0 12px !important;

    transition: none !important;

  }

  nav.scrolled {

    background: rgba(255,255,255,0.97) !important;

    box-shadow: 0 1px 10px rgba(0,0,0,0.1) !important;

  }

  /* Nav-inner: alta quanto serve per il logo grande */

  .nav-inner {

    height: 120px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    position: relative !important;

    transition: none !important;

  }

  /* Logo centrato e grande */

  .nav-logo {

    position: absolute !important;

    left: 50% !important;

    top: 8px !important;

    transform: translateX(-50%) !important;

    transition: none !important;

    z-index: 102 !important;

  }

  .nav-logo img {

    height: 108px !important;

    display: block !important;

    filter: drop-shadow(0 2px 10px rgba(0,0,0,0.15)) !important;

    transition: none !important;

  }

  /* Scrolled: nav compatta, logo piccolo */

  nav.scrolled .nav-inner {

    height: 50px !important;

  }

  nav.scrolled .nav-logo {

    top: 7px !important;

    left: 8px !important;

    transform: none !important;

  }

  nav.scrolled .nav-logo img {

    height: 36px !important;

    filter: none !important;

  }

  /* Hamburger sempre in alto a destra */

  .nav-mobile-row {

    position: fixed !important;

    top: 10px !important;

    right: 14px !important;

    z-index: 300 !important;

  }

  .hamburger span { width: 22px !important; }

  /* Nasconde il logo grande mobile (non esiste più) */

}

@media (min-width: 601px) {

  #mobile-logo-big { display: none !important; }

  nav.scrolled .nav-inner { height: 56px; }

  nav.scrolled .nav-logo { left: 8px !important; transform: translateX(0) !important; }

}



/* portfolio styles sono in index.html inline */