/* ===========================================================
   Giugapet — Design System "Vivace & Amichevole"
   Fredoka (titoli tondi) · Nunito (testo) · icone SVG
   Teal del logo + giallo sole + corallo · tutto arrotondato
   =========================================================== */

:root {
  --teal: #2a9d8f;
  --teal-600: #218a7c;
  --teal-700: #1c7165;
  --teal-100: #d7ece8;
  --teal-50: #eaf6f3;
  --sun: #8fc740;        /* lime */
  --sun-100: #e9f3d3;
  --coral: #f59133;      /* arancio */
  --coral-100: #fde3c9;
  --coral-700: #c26a12;

  --ink: #2b2a27;
  --ink-2: #5f5a52;
  --ink-3: #938c81;
  --line: #efe6d6;
  --bg: #fff9ef;
  --bg-2: #fdf1de;
  --paper: #ffffff;
  --footer: #143f39;
  --wa: #1faa5a;

  --display: "Fredoka", system-ui, sans-serif;
  --sans: "Nunito", system-ui, sans-serif;

  --r: 18px;
  --r-md: 24px;
  --r-lg: 32px;
  --shadow: 0 22px 48px -22px rgba(35,80,72,.45);
  --shadow-sm: 0 12px 26px -16px rgba(35,80,72,.4);
  --shadow-pop: 0 10px 0 -2px rgba(28,113,101,.18);
  --wrap: 1160px;
  --ease: cubic-bezier(.34,1.4,.5,1);
}

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin:0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.65; font-weight: 500; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-700); text-decoration: none; transition: color .2s; }
a:hover { color: var(--coral-700); }

h1,h2,h3 { font-family: var(--display); font-weight: 600; line-height: 1.08; color: var(--ink); margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.5rem, 6vw, 4.2rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3rem); }
h3 { font-size: 1.3rem; font-weight: 600; }
p { margin: 0 0 1rem; color: var(--ink-2); }
.lead { font-size: clamp(1.08rem, 2vw, 1.25rem); color: var(--ink-2); max-width: 56ch; }

:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; scroll-behavior:auto; } }
.skip-link { position:absolute; left:12px; top:-60px; z-index:200; background:var(--teal-700); color:#fff; padding:.7rem 1.1rem; border-radius:0 0 14px 14px; font-weight:700; transition:top .2s; }
.skip-link:focus { top:0; color:#fff; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }
.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section--paper { background: var(--paper); }
.section--mint { background: var(--teal-50); }

/* Pill label allegra */
.kicker { display:inline-flex; align-items:center; gap:.5rem; background:var(--sun-100); color:var(--coral-700); font-family:var(--display); font-weight:600; font-size:.82rem; letter-spacing:.02em; padding:.4rem .9rem; border-radius:999px; margin-bottom:1rem; }
.kicker .bar { display:none; }
.sec-head.center .kicker { margin-inline:auto; }

/* Icone SVG */
.ico { width:26px; height:26px; flex:none; stroke:currentColor; stroke-width:1.9; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.ico-sm { width:20px; height:20px; }
.ico-lg { width:32px; height:32px; }

/* Bottoni pill pop */
.btn { display:inline-flex; align-items:center; gap:.55rem; font-family:var(--display); font-weight:600; font-size:1.02rem; padding:.85rem 1.7rem; border-radius:999px; border:0; cursor:pointer; transition:transform .2s var(--ease), box-shadow .2s, background .2s, color .2s; }
.btn:hover { transform:translateY(-3px); }
.btn .ico { width:20px; height:20px; }
.btn--teal { background:var(--teal); color:#fff; box-shadow:var(--shadow-pop); }
.btn--teal:hover { background:var(--teal-600); color:#fff; }
.btn--sun { background:var(--sun); color:#2f4711; box-shadow:0 10px 0 -2px rgba(120,160,40,.3); }
.btn--sun:hover { background:#7eb333; color:#2f4711; }
.btn--coral { background:var(--coral); color:#fff; box-shadow:0 10px 0 -2px rgba(214,90,48,.25); }
.btn--coral:hover { background:var(--coral-700); color:#fff; }
.btn--wa { background:var(--wa); color:#fff; box-shadow:0 10px 0 -2px rgba(20,130,60,.25); }
.btn--wa:hover { background:#178a49; color:#fff; }
.btn--ghost { background:#fff; color:var(--teal-700); box-shadow:inset 0 0 0 2px var(--teal-100); }
.btn--ghost:hover { background:var(--teal-50); color:var(--teal-700); }

.arrow-link { display:inline-flex; align-items:center; gap:.45rem; font-family:var(--display); font-weight:600; color:var(--teal-700); }
.arrow-link .ico { width:18px; height:18px; transition:transform .2s var(--ease); }
.arrow-link:hover { color:var(--coral-700); }
.arrow-link:hover .ico { transform:translateX(4px); }

/* ============ Header ============ */
.site-header { position:sticky; top:0; z-index:100; background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(10px); border-bottom:2px solid var(--bg-2); }
.nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 0; width:min(100% - 2.4rem, var(--wrap)); margin-inline:auto; }
.brand { display:flex; align-items:center; gap:.55rem; font-family:var(--display); font-weight:600; font-size:1.55rem; color:var(--ink); }
.brand:hover { color:var(--ink); }
.brand-logo { height:42px; width:auto; }
.nav-links { display:flex; align-items:center; gap:.25rem; list-style:none; margin:0; padding:0; }
.nav-links a { font-family:var(--display); font-weight:500; font-size:1rem; color:var(--ink-2); padding:.5rem .95rem; border-radius:999px; transition:background .2s,color .2s; }
.nav-links a:hover { background:var(--teal-50); color:var(--teal-700); }
.nav-links a.active { background:var(--teal-100); color:var(--teal-700); }
.nav-cta { margin-left:.35rem; }
.nav-toggle { display:none; background:none; border:0; cursor:pointer; padding:.5rem; min-width:44px; min-height:44px; color:var(--ink); }
.nav-toggle .ico { width:28px; height:28px; }
@media (max-width:880px){
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .nav-links{ position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; background:var(--paper); padding:1rem 1.3rem 1.5rem; gap:.2rem; border-bottom:2px solid var(--bg-2); box-shadow:var(--shadow); transform:translateY(-130%); transition:transform .32s var(--ease); max-height:calc(100dvh - 64px); overflow:auto; }
  .nav-links.open{ transform:translateY(0); }
  .nav-links a{ padding:.85rem 1rem; font-size:1.08rem; }
  .nav-cta{ margin:.6rem 0 0; } .nav-cta .btn{ width:100%; justify-content:center; }
}

/* ============ Hero ============ */
.hero { padding: clamp(2rem,4vw,3.5rem) 0 clamp(3rem,6vw,5rem); }
.hero-panel { background: linear-gradient(150deg, var(--teal-50) 0%, var(--sun-100) 130%); border-radius: var(--r-lg); padding: clamp(1.8rem,4vw,3.2rem); position:relative; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns: 1.02fr .98fr; gap: clamp(1.5rem,4vw,3rem); align-items:center; }
.hero h1 em { font-style:normal; color:var(--teal-700); }
.hero .lead { margin-top:.4rem; color:var(--ink); }
.hero-cta { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem; }
.hero-media { position:relative; }
.hero-media img { border-radius:var(--r-md); box-shadow:var(--shadow); aspect-ratio:4/5; object-fit:cover; width:100%; }
.hero-media .stamp { position:absolute; bottom:-14px; left:-12px; background:var(--coral); color:#fff; font-family:var(--display); font-weight:600; font-size:.78rem; padding:.55rem 1rem; border-radius:999px; box-shadow:var(--shadow-sm); transform:rotate(-3deg); }
.hero-feats { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem; }
.hero-feats span { display:inline-flex; align-items:center; gap:.5rem; background:#fff; border-radius:999px; padding:.5rem 1rem; font-family:var(--display); font-weight:500; font-size:.92rem; color:var(--ink); box-shadow:var(--shadow-sm); }
.hero-feats .ico { width:20px; height:20px; color:var(--teal); }
@media (max-width:860px){ .hero-grid{ grid-template-columns:1fr; } .hero-media{ order:-1; max-width:420px; margin-inline:auto; } }

/* Section head */
.sec-head { max-width:62ch; margin-bottom: clamp(1.8rem,3.5vw,2.6rem); }
.sec-head.center { margin-inline:auto; text-align:center; }
.sec-head .lead { margin-top:.3rem; }
.sec-head.split { display:grid; grid-template-columns:1fr auto; align-items:end; gap:1.2rem; max-width:none; }
@media (max-width:680px){ .sec-head.split{ grid-template-columns:1fr; } }

/* Grids */
.grid { display:grid; gap: clamp(1rem,2.2vw,1.6rem); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:920px){ .g-3,.g-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr; } }

/* Feature card */
.feature { background:var(--paper); border:2px solid var(--bg-2); border-radius:var(--r-md); padding:1.8rem 1.6rem; transition:transform .22s var(--ease), box-shadow .22s, border-color .22s; }
.feature:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--teal-100); }
.feature .ico-badge { width:58px; height:58px; display:grid; place-items:center; border-radius:18px; background:var(--teal-100); color:var(--teal-700); margin-bottom:1.1rem; }
.feature:nth-child(3n+2) .ico-badge { background:var(--sun-100); color:#3f5d16; }
.feature:nth-child(3n) .ico-badge { background:var(--coral-100); color:var(--coral-700); }
.feature h3 { margin-bottom:.35rem; }
.feature p { margin:0; font-size:.98rem; }
.feature .num { display:none; }

/* Categoria — bubble card */
.cat { display:block; background:var(--paper); border:2px solid var(--bg-2); border-radius:var(--r-md); overflow:hidden; transition:transform .22s var(--ease), box-shadow .22s, border-color .2s; }
.cat:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--teal-100); }
.cat-figure { aspect-ratio:4/3; overflow:hidden; background:var(--teal-50); }
.cat-figure img { width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .5s var(--ease); }
.cat:hover .cat-figure img { transform:scale(1.06); }
.cat-body { padding:1.1rem 1.3rem 1.3rem; display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
.cat-body h3 { margin:0; }
.cat-body p { margin:.2rem 0 0; font-size:.9rem; color:var(--ink-2); }
.cat-body .chip { width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--teal-100); color:var(--teal-700); transition:background .2s,color .2s; }
.cat:hover .cat-body .chip { background:var(--teal); color:#fff; }
.cat:nth-child(2) .cat-body .chip,.cat:nth-child(5) .cat-body .chip { background:var(--sun-100); color:var(--coral-700); }
.cat:nth-child(2):hover .cat-body .chip,.cat:nth-child(5):hover .cat-body .chip { background:var(--sun); color:#2f4711; }
.cat:nth-child(3) .cat-body .chip,.cat:nth-child(6) .cat-body .chip { background:var(--coral-100); color:var(--coral-700); }
.cat:nth-child(3):hover .cat-body .chip,.cat:nth-child(6):hover .cat-body .chip { background:var(--coral); color:#fff; }
.img-top{object-position:center top!important}.img-bottom{object-position:center bottom!important}
.img-left{object-position:left center!important}.img-right{object-position:right center!important}
.img-center{object-position:center center!important}.img-contain{object-fit:contain!important;background:var(--teal-50)}

/* Steps */
.steps { display:grid; gap:1rem; }
.step { display:grid; grid-template-columns:auto 1fr; gap:1.2rem; align-items:start; background:var(--paper); border:2px solid var(--bg-2); border-radius:var(--r-md); padding:1.4rem 1.5rem; }
.step .n { width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--teal); color:#fff; font-family:var(--display); font-weight:600; font-size:1.3rem; }
.step:nth-child(2) .n{ background:var(--sun); color:#2f4711; }
.step:nth-child(3) .n{ background:var(--coral); }
.step h3 { margin-bottom:.25rem; }
.step p { margin:0; }

/* Galleria */
.gallery { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; gap:.8rem; }
.gallery a { border-radius:var(--r-md); overflow:hidden; background:var(--teal-50); }
.gallery img { width:100%; height:100%; object-fit:cover; aspect-ratio:1/1; transition:transform .5s var(--ease); }
.gallery .tall { grid-row:span 2; }
.gallery .tall img { aspect-ratio:auto; }
.gallery a:hover img { transform:scale(1.07); }
@media (max-width:720px){ .gallery{ grid-template-columns:repeat(2,1fr); } .gallery .tall{ grid-row:span 1; } }

/* CTA band */
.cta-band { background:var(--teal); color:#fff; border-radius:var(--r-lg); padding:clamp(2.2rem,5vw,3.6rem); display:grid; grid-template-columns:1fr auto; gap:1.4rem 2.2rem; align-items:center; position:relative; overflow:hidden; }
.cta-band h2 { color:#fff; margin:0; }
.cta-band p { color:rgba(255,255,255,.92); margin:.5rem 0 0; }
.cta-band .btn-row { display:flex; flex-wrap:wrap; gap:.7rem; }
@media (max-width:760px){ .cta-band{ grid-template-columns:1fr; } }

/* ============ Pagina interna ============ */
.page-hero { padding: clamp(2.5rem,5vw,4rem) 0 clamp(1.5rem,3vw,2.5rem); }
.page-hero .wrap { text-align:center; }
.page-hero .kicker { margin-inline:auto; }
.page-hero .lead { margin-inline:auto; }
.breadcrumb { font-family:var(--display); font-weight:500; font-size:.82rem; color:var(--ink-3); margin-bottom:.8rem; }
.breadcrumb a { color:var(--ink-3); }
.breadcrumb a:hover { color:var(--coral-700); }

/* Blocco prodotto */
.prod { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.2rem); align-items:center; }
.prod img { border-radius:var(--r-lg); box-shadow:var(--shadow-sm); aspect-ratio:4/3; object-fit:cover; width:100%; }
.prod.rev .prod-media { order:2; }
.prod ul { list-style:none; margin:1rem 0 0; padding:0; columns:2; }
.prod ul li { display:flex; align-items:center; gap:.5rem; padding:.35rem 0; font-size:.96rem; break-inside:avoid; }
.prod ul li .ico { width:18px; height:18px; color:var(--teal); }
@media (max-width:760px){ .prod{ grid-template-columns:1fr; } .prod.rev .prod-media{ order:0; } .prod ul{ columns:1; } }

/* Contatti */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,2.6rem); }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.info-list { list-style:none; margin:0 0 1.4rem; padding:0; }
.info-list li { display:flex; gap:1rem; align-items:flex-start; padding:.9rem 0; border-bottom:2px solid var(--bg-2); }
.info-list .ico-badge { width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:14px; background:var(--teal-100); color:var(--teal-700); }
.info-list li:nth-child(3n+2) .ico-badge{ background:var(--sun-100); color:#3f5d16; }
.info-list li:nth-child(3n) .ico-badge{ background:var(--coral-100); color:var(--coral-700); }
.info-list b { font-family:var(--display); font-weight:600; display:block; margin-bottom:.1rem; }
.btn-row { display:flex; flex-wrap:wrap; gap:.7rem; }

/* Form */
.form-card { background:var(--paper); border:2px solid var(--bg-2); border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.4rem); }
.field { margin-bottom:1.05rem; }
.field label { display:block; font-family:var(--display); font-weight:600; font-size:.92rem; margin-bottom:.35rem; }
.field input, .field textarea { width:100%; padding:.85rem 1rem; border:2px solid var(--bg-2); border-radius:14px; font-family:var(--sans); font-weight:500; font-size:1rem; background:var(--bg); color:var(--ink); transition:border-color .2s; }
.field input:focus, .field textarea:focus { outline:none; border-color:var(--teal); }
.form-note { font-size:.82rem; color:var(--ink-3); }
#form-ok { background:var(--teal-100); color:var(--teal-700); padding:.8rem 1rem; border-radius:12px; font-weight:700; margin-top:1rem; }

/* Mappa */
.map-embed { border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.map-embed iframe { width:100%; min-height:380px; border:0; display:block; }
.map-consent { display:grid; place-items:center; text-align:center; gap:.9rem; min-height:380px; padding:2rem; background:var(--teal-50); }
.map-consent p { margin:0; max-width:42ch; color:var(--ink-2); }

/* ============ Footer ============ */
.site-footer { background:var(--footer); color:#bcd6d0; padding:clamp(3rem,6vw,4.5rem) 0 1.6rem; }
.site-footer a { color:#dcefe9; }
.site-footer a:hover { color:var(--sun); }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1.2fr; gap:clamp(1.6rem,4vw,3rem); }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; gap:2rem; } }
.footer-brand { display:flex; align-items:center; gap:.55rem; font-family:var(--display); font-weight:600; font-size:1.6rem; color:#fff; margin-bottom:.7rem; }
.footer-brand img { height:46px; background:#fff; padding:5px 7px; border-radius:12px; }
.footer-col h4 { font-family:var(--display); font-weight:600; font-size:.95rem; color:#fff; margin:0 0 1rem; }
.footer-list { list-style:none; padding:0; margin:0; }
.footer-list li { margin-bottom:.55rem; display:flex; gap:.6rem; align-items:flex-start; }
.footer-list .ico { width:18px; height:18px; color:var(--sun); margin-top:3px; flex:none; }
.social-row { display:flex; gap:.6rem; margin-top:1rem; }
.social-row a { width:44px; height:44px; display:grid; place-items:center; background:rgba(255,255,255,.08); border-radius:50%; color:#dcefe9; transition:background .2s,color .2s,transform .2s var(--ease); }
.social-row a:hover { background:var(--sun); color:var(--footer); transform:translateY(-3px); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); margin-top:2.4rem; padding-top:1.4rem; font-size:.82rem; color:#8fb3ac; display:flex; flex-wrap:wrap; gap:.4rem 1rem; justify-content:space-between; }
.footer-bottom a { color:#8fb3ac; }

/* WhatsApp flottante */
.wa-float { position:fixed; right:18px; bottom:18px; z-index:90; width:60px; height:60px; border-radius:50%; background:var(--wa); color:#fff; display:grid; place-items:center; box-shadow:0 12px 26px -8px rgba(31,170,90,.6); transition:transform .2s var(--ease); }
.wa-float:hover { transform:scale(1.1); color:#fff; }
.wa-float .ico { width:28px; height:28px; }

/* Cookie banner */
.cookie-banner { position:fixed; left:14px; right:14px; bottom:14px; z-index:110; background:var(--footer); color:#dcefe9; border-radius:var(--r-md); box-shadow:var(--shadow); padding:1.1rem 1.3rem; display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.3rem; justify-content:center; max-width:960px; margin-inline:auto; }
.cookie-banner p { margin:0; font-size:.9rem; color:#bcd6d0; flex:1 1 320px; }
.cookie-banner a { color:var(--sun); }
.cookie-banner[hidden] { display:none; }

/* Utility */
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mb-0{margin-bottom:0}.center{text-align:center}