/* ============================================================
   SPIRITO DRINK — stili aggiuntivi (prodotti, partner, ricette)
   ============================================================ */

/* Logo immagine nella nav */
.nav__logo-img{height:58px;width:auto;display:block}
.nav.scrolled .nav__logo-img{height:48px}

/* CTA row hero */
.hero__cta-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.btn-ghost{
  display:inline-block;padding:16px 32px;border-radius:2px;
  font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--cream);
  border:1px solid rgba(243,233,214,.25);transition:all .3s;
}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-2)}
.btn-mini{
  display:inline-block;padding:9px 18px;border:1px solid var(--gold);border-radius:2px;
  font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-2);white-space:nowrap;transition:all .25s;
}
.btn-mini:hover{background:var(--gold);color:#160f04}

/* ---------- Numbers band (guadagni) ---------- */
.partner-band{background:
  radial-gradient(900px 500px at 80% 20%,rgba(80,55,18,.35),transparent 60%),
  linear-gradient(180deg,#0a0705,#0d0906)}
.numbers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;margin-top:52px}
.num-card{
  background:linear-gradient(180deg,var(--panel),#0c0805);border:1px solid var(--line);
  border-radius:8px;padding:34px 24px;text-align:center;
}
.num-card.highlight{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset,0 20px 50px rgba(0,0,0,.4)}
.num-card .num{font-family:"Cinzel",serif;font-size:clamp(30px,4vw,44px);color:var(--gold-2);line-height:1}
.num-card .num span{display:inline-block;font-size:13px;color:var(--muted);margin-left:6px;letter-spacing:1px}
.num-label{margin-top:14px;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);line-height:1.6}

/* ---------- Cocktail detail extras ---------- */
.cocktail-card__recipe{color:var(--gold-2);font-size:14px;margin-bottom:8px;letter-spacing:.3px}
.cocktail-card__meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;font-size:13px;color:var(--muted);align-items:center}
.cocktail-card__meta .price{margin-left:auto;font-family:"Cinzel",serif;color:var(--gold-2);font-size:18px}
.cocktail-grid--detail .cocktail-card__img{aspect-ratio:1/1}

/* ---------- Prodotti ---------- */
.cat-block{margin-top:64px}
.cat-title{font-family:"Cinzel",serif;font-size:clamp(22px,3vw,32px);color:var(--cream);
  padding-bottom:14px;margin-bottom:30px;border-bottom:1px solid var(--line)}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:26px}
.product-card{
  position:relative;background:linear-gradient(180deg,var(--panel),#0c0805);
  border:1px solid var(--line);border-radius:8px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .35s,border-color .35s,box-shadow .35s;
}
.product-card:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 24px 50px rgba(0,0,0,.5)}
.product-badge{
  position:absolute;top:14px;right:14px;z-index:2;
  background:var(--gold-grad);color:#160f04;font-weight:600;font-size:11px;letter-spacing:1.5px;
  padding:6px 12px;border-radius:2px;
}
.product-card__img{aspect-ratio:4/3;background:#0d0906 center/contain no-repeat;
  display:flex;align-items:center;justify-content:center}
.product-card__img .placeholder{font-size:52px;opacity:.5}
.product-card__body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.product-card__name{font-family:"Cinzel",serif;font-size:21px;color:var(--cream);margin-bottom:8px}
.product-card__sub{color:var(--muted);font-size:14px;line-height:1.6;margin-bottom:14px}
.product-feat{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:8px}
.product-feat li{position:relative;padding-left:22px;font-size:14px;color:var(--text);line-height:1.5}
.product-feat li::before{content:"✓";position:absolute;left:0;color:var(--gold-2);font-size:13px}
.product-card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-top:16px;border-top:1px solid rgba(201,162,39,.14)}
.product-price{font-family:"Cinzel",serif;font-size:22px;color:var(--gold-2);line-height:1.2}
.product-price small{display:block;font-family:"Jost",sans-serif;font-size:11px;color:var(--muted);letter-spacing:.5px}
.product-price .on-request{font-family:"Jost",sans-serif;font-size:14px;color:var(--muted)}

/* ---------- Diventa Partner ---------- */
.flow{display:flex;align-items:stretch;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:52px}
.flow-step{background:linear-gradient(180deg,var(--panel),#0c0805);border:1px solid var(--line);
  border-radius:8px;padding:26px 30px;text-align:center;min-width:200px}
.flow-step.gain{border-color:var(--gold)}
.flow-val{font-family:"Cinzel",serif;font-size:34px;color:var(--gold-2);line-height:1}
.flow-step.gain .flow-val{color:#7bd88f}
.flow-val small{display:block;font-family:"Jost",sans-serif;font-size:12px;color:var(--muted);margin-top:2px}
.flow-step span{display:block;margin-top:12px;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;line-height:1.6}
.flow-arrow{display:flex;align-items:center;color:var(--gold);font-size:26px}
.example-box{margin:44px auto 0;max-width:560px;text-align:center;background:linear-gradient(180deg,#12100a,#0b0805);
  border:1px solid var(--gold);border-radius:10px;padding:30px 24px}
.example-box>span{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.example-num{margin-top:12px;font-family:"Cinzel",serif;font-size:26px;color:var(--cream)}
.example-num strong{color:#7bd88f;font-size:38px}
.example-num small{font-size:14px;color:var(--muted)}

.package-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:52px}
.package-card{background:linear-gradient(180deg,var(--panel),#0c0805);border:1px solid var(--line);
  border-radius:10px;padding:30px 28px;display:flex;flex-direction:column}
.package-card.featured{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.package-card__img{margin:-30px -28px 22px;aspect-ratio:16/10;background-size:cover;background-position:center;
  border-radius:10px 10px 0 0}
.showcase-img{width:100%;aspect-ratio:21/9;background-size:cover;background-position:center;
  border-radius:10px;border:1px solid var(--line);margin-top:44px}
.package-head{font-family:"Cinzel",serif;letter-spacing:2px;font-size:15px;color:var(--gold-2);margin-bottom:14px}
.package-sub{font-size:13px;color:var(--muted);margin:-8px 0 16px;line-height:1.5}
.tag-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
.tag-pill{border:1px solid var(--line);border-radius:20px;padding:8px 18px;font-size:12px;
  letter-spacing:1px;color:var(--gold-2);text-transform:uppercase;white-space:nowrap}
.package-price{font-family:"Cinzel",serif;font-size:34px;color:var(--cream);margin-bottom:20px}
.package-price small{font-family:"Jost",sans-serif;font-size:14px;color:var(--muted)}
.sim{margin-top:auto;padding-top:18px;border-top:1px solid rgba(201,162,39,.14);
  display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--muted)}
.sim strong{color:var(--cream)}
.sim .util{color:#7bd88f;font-family:"Cinzel",serif;font-size:17px;margin-top:4px}

.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.info-panel{background:linear-gradient(180deg,var(--panel),#0c0805);border:1px solid var(--line);
  border-radius:10px;padding:34px 32px}
.info-panel h3{font-family:"Cinzel",serif;font-size:24px;color:var(--gold-2);margin-bottom:14px}
.info-panel p{color:var(--text);font-size:16px;line-height:1.7}
.info-panel strong{color:var(--cream)}

.provide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;margin-top:52px}
.provide-card{text-align:center;padding:28px 20px;background:linear-gradient(180deg,var(--panel),#0c0805);
  border:1px solid var(--line);border-radius:8px}
.provide-card .ic{font-size:34px;display:block;margin-bottom:14px}
.provide-card h4{font-family:"Cinzel",serif;font-size:17px;color:var(--cream);margin-bottom:8px}
.provide-card p{font-size:14px;color:var(--muted);line-height:1.6}

.cta-final{background:radial-gradient(900px 500px at 50% 0%,rgba(80,55,18,.4),transparent 60%),
  linear-gradient(180deg,#0d0906,#0a0705)}

/* Hero con foto reale (ragazza + spina): pannello agganciato al bordo destro,
   non più sfondo a piena larghezza dietro al testo (altrimenti su schermi larghi
   l'immagine si vede a piena larghezza e la protagonista finisce nascosta sotto
   il testo/gradiente). Il pannello lascia il testo libero a sinistra. */
.hero__photo-panel{
  position:absolute;top:0;right:0;bottom:0;width:58%;
  overflow:hidden;z-index:0;
}
.hero__photo-img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.hero__photo-panel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,7,5,.85) 0%,rgba(10,7,5,0) 12%,rgba(10,7,5,0) 78%,rgba(10,7,5,.35) 100%);
}
/* La foto ha già una piccola freccia "scorri giù" disegnata sopra il frigo bar:
   nasconde la nostra freccia .scroll-hint per non avere due frecce sfalsate
   una sull'altra in fondo all'hero. */
.hero--photo .scroll-hint{display:none}
.hero--photo .hero__inner{grid-template-columns:1fr}
.hero--photo .hero__left{max-width:600px}

/* La scritta "SPIRITO" usa un font-size legato alla larghezza dell'intera
   viewport (vw): su schermi larghi supera i 600px disponibili nella colonna
   di testo e sconfina sopra la foto. La riduciamo solo in modalità foto,
   solo da desktop in su (sotto i 1024px la foto passa in secondo piano
   e il layout torna a una sola colonna, quindi il problema non si pone). */
@media(min-width:1025px){
  .hero--photo .hero__logo .spirito{font-size:clamp(48px,6vw,100px)}
}

/* Immagini cocktail (bottiglie) mostrate intere, non tagliate */
.cocktail-card__img{background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#0b0806}

/* Bottone "Richiedi Info": sfondo trasparente, diventa oro all'hover */
.nav .btn-outline{background:transparent;border:1px solid var(--gold);color:var(--gold-2)}
.nav .btn-outline:hover{background:var(--gold-grad);color:#160f04;border-color:transparent}

/* Fix: .nav__links a{padding:6px 0} vinceva su .btn-outline per specificità,
   schiacciando il padding orizzontale del bottone contro il testo */
.nav__links a.btn-outline{display:inline-block;padding:12px 26px}

/* Chi Siamo — righe testo + immagine */
.media-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.media-row--reverse .media-txt{order:2}
.media-row--reverse .media-img{order:1}
.media-txt .section__title{margin-bottom:18px}
.media-txt p{color:var(--text);font-size:17px;line-height:1.8;margin-bottom:14px}
.media-txt strong{color:var(--cream)}
.media-img{border-radius:10px;min-height:360px;background:center/cover no-repeat;
  border:1px solid var(--line);box-shadow:0 24px 50px rgba(0,0,0,.5)}

/* Anteprima snippet Google (backend SEO stile Yoast) */
.seo-snippet{font-family:Arial,Helvetica,sans-serif;background:#fff;border:1px solid #dfe1e5;
  border-radius:8px;padding:16px 18px;max-width:600px}
.seo-snippet .s-url{color:#202124;font-size:12px;margin-bottom:3px}
.seo-snippet .s-title{color:#1a0dab;font-size:19px;line-height:1.3;margin:2px 0 3px}
.seo-snippet .s-desc{color:#4d5156;font-size:13px;line-height:1.5}

/* ================= RESPONSIVE ================= */
@media(max-width:1024px){
  .media-row{grid-template-columns:1fr}
  .media-row--reverse .media-txt{order:1}
  .media-row--reverse .media-img{order:2}
  .media-img{min-height:260px}
}
@media(max-width:760px){
  .split-grid{grid-template-columns:1fr}
  .flow-arrow{transform:rotate(90deg)}
  .hero__photo-panel{width:100%;opacity:.35}
  .hero__photo-panel::after{background:linear-gradient(180deg,rgba(10,7,5,.55),rgba(10,7,5,.92))}
  .hero__cta-row{flex-direction:column;align-items:stretch}
  .hero__cta-row .btn-solid,.hero__cta-row .btn-ghost{text-align:center}
  .numbers-grid{grid-template-columns:1fr 1fr}
  .provide-grid{grid-template-columns:1fr 1fr}
  .package-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  body{font-size:16px}
  .numbers-grid,.provide-grid{grid-template-columns:1fr}
  .hero__logo .spirito{font-size:54px}
  .section__title{font-size:27px}
  .flow-step{min-width:0;width:100%}
}


/* Chi Siamo — tag pubblico target */
.tag-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:40px}
.tag{border:1px solid var(--line);color:var(--cream);border-radius:40px;
  padding:10px 22px;font-size:14px;letter-spacing:1px;background:linear-gradient(180deg,var(--panel),#0c0805);transition:all .25s}
.tag:hover{border-color:var(--gold);color:var(--gold-2)}


/* ===== Menu leggibile sopra la foto hero (prima dello scroll) ===== */
.nav:not(.scrolled){
  background:linear-gradient(180deg,rgba(6,4,3,.72) 0%,rgba(6,4,3,.30) 58%,transparent 100%);
}
.hero::before{
  content:"";position:absolute;top:0;left:0;right:0;height:190px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.38) 55%,transparent 100%);
}


/* ===== Footer ampliato ===== */
.footer{padding:56px 0 30px}
.footer__top{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-bottom:28px;margin-bottom:34px;border-bottom:1px solid var(--line)}
.footer__social{display:flex;align-items:center;gap:14px}
.footer__social-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-right:4px}
.social-ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);color:var(--gold-2);transition:all .25s}
.social-ic:hover{background:var(--gold-grad);color:#160f04;border-color:transparent;transform:translateY(-2px)}
.footer__social--sm .social-ic{width:34px;height:34px}

.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1.2fr;gap:40px;align-items:start}
.footer__col h5{font-family:"Cinzel",serif;font-size:14px;letter-spacing:2px;color:var(--cream);
  text-transform:uppercase;margin-bottom:16px}
.footer__about p{color:var(--muted);font-size:14px;line-height:1.75;margin-bottom:18px;max-width:340px}
.footer__about strong{color:var(--cream)}
.footer__nav{display:flex;flex-direction:column;gap:10px}
.footer__nav a{font-size:14px;letter-spacing:.5px;text-transform:none;color:var(--muted)}
.footer__nav a:hover{color:var(--gold-2)}
.footer__contacts{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;
  color:var(--muted);font-size:14px;line-height:1.5}
.footer__contacts a{color:var(--text)}
.footer__contacts a:hover{color:var(--gold-2)}
.footer__contacts small{color:var(--gold-3)}

.footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:40px;padding-top:22px;border-top:1px solid rgba(201,162,39,.14);
  font-size:12px;color:var(--muted);letter-spacing:.5px}

@media(max-width:900px){ .footer__grid{grid-template-columns:1fr 1fr} }
@media(max-width:560px){
  .footer__grid{grid-template-columns:1fr}
  .footer__top{flex-direction:column;align-items:flex-start}
  .footer__bottom{flex-direction:column;align-items:flex-start;text-align:left}
}

/* Icone nelle etichette dei form (Contatti / Richiedi Info) */
.field label{display:flex;align-items:center;gap:7px}
.field label .icon{font-size:14px;line-height:1;filter:grayscale(1) brightness(1.4)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.55}

/* Sezione richiamo brochure (Contatti / Diventa Partner / Chi Siamo) */
.brochure-cta{padding-top:20px;padding-bottom:60px}
.brochure-cta__actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:26px}
@media(max-width:560px){.brochure-cta__actions{flex-direction:column;align-items:stretch}}