/* ===== Sfere di Cappuccino · Tisane su Stecco — foglio di stile ===== */
:root{
  --crema:#fdf1ef;
  --crema-2:#f8e3e0;
  --carta:#fffdfc;
  --inchiostro:#2b1d1b;
  --inchiostro-2:#6e5552;
  --oro:#d9677a;
  --oro-scuro:#a8475a;
  --salvia:#6e3a33;
  --salvia-chiara:#f8dde0;
  --bordo:#f0d9d5;
  --ombra:0 1px 2px rgba(46,38,32,.06), 0 8px 24px rgba(46,38,32,.08);
  --raggio:14px;
  --max:1080px;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip;max-width:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-size:18px;
  line-height:1.65;
  color:var(--inchiostro);
  background:var(--crema);
}
img{max-width:100%;display:block}
a{color:var(--oro-scuro);text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0 0 .4em}
h1{font-size:clamp(2rem,5vw,3.2rem)}
h2{font-size:clamp(1.6rem,3.5vw,2.3rem)}
h3{font-size:1.3rem}
p{margin:0 0 1em}
.contenitore{max-width:var(--max);margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ===== Intestazione ===== */
.sito-header{
  position:sticky;top:0;z-index:50;
  background:rgba(253,241,239,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--bordo);
}
.sito-header .contenitore{display:flex;align-items:center;gap:14px 18px;min-height:64px;flex-wrap:wrap}
.logo{font-family:var(--serif);font-weight:600;font-size:1.35rem;color:var(--inchiostro);text-decoration:none;letter-spacing:.2px;white-space:nowrap;flex:0 0 auto}
.logo span{color:var(--oro)}
.nav{display:flex;gap:6px;margin-left:auto;max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav::-webkit-scrollbar{display:none}
.nav a{
  text-decoration:none;color:var(--inchiostro-2);font-weight:600;font-size:.92rem;
  padding:8px 12px;border-radius:999px;white-space:nowrap;flex:0 0 auto;
}
.nav a:hover{background:var(--crema-2);color:var(--inchiostro)}
.nav a.attivo{background:var(--inchiostro);color:var(--crema)}

/* ===== Ricerca ===== */
.barra-ricerca{padding:18px 0 0}
.barra-ricerca input{
  width:100%;padding:13px 16px;font-size:1rem;font-family:var(--sans);
  border:1px solid var(--bordo);border-radius:999px;background:var(--carta);color:var(--inchiostro);
}
.barra-ricerca input:focus{outline:2px solid var(--oro);border-color:transparent}

/* ===== Hero ===== */
.hero{padding:64px 0 54px;text-align:center;margin-top:18px;color:#fbeef0;background:radial-gradient(ellipse at 20% 0%,rgba(217,103,122,.5),transparent 55%),radial-gradient(ellipse at 85% 100%,rgba(168,71,90,.55),transparent 58%),#2a1d1b}
.hero h1{color:#fff8f8}
.hero .occhiello{text-transform:uppercase;letter-spacing:.18em;font-size:.8rem;font-weight:700;color:#f3b06b;margin-bottom:14px}
.hero p.sub{font-size:1.15rem;color:#f3dfe1;max-width:620px;margin:0 auto}
.hero .btn-primario{background:#d9677a;color:#fff}
.hero .btn-primario:hover{background:#c25569}
.hero .btn-fantasma{color:#fbeef0;border-color:rgba(251,238,240,.45)}
.hero .btn-fantasma:hover{background:rgba(251,238,240,.12)}
.azioni-hero{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}

/* ===== Bottoni ===== */
.btn{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--sans);font-weight:700;font-size:.95rem;
  padding:12px 20px;border-radius:999px;border:1px solid transparent;text-decoration:none;
}
.btn-primario{background:var(--oro);color:#fff}
.btn-primario:hover{background:#c25569}
.btn-fantasma{background:transparent;border-color:var(--bordo);color:var(--inchiostro)}
.btn-fantasma:hover{background:var(--crema-2)}

/* ===== Griglia categorie ===== */
.griglia-cat{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin:34px 0}
.card-cat{
  display:block;text-decoration:none;color:inherit;background:var(--carta);
  border:1px solid var(--bordo);border-radius:var(--raggio);padding:26px;box-shadow:var(--ombra);
  transition:transform .15s ease;
}
.card-cat:hover{transform:translateY(-3px)}
.card-cat .tag{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;padding:4px 10px;border-radius:999px;color:#fff;margin-bottom:14px}
.card-cat h3{margin-bottom:.3em}
.card-cat p{color:var(--inchiostro-2);font-size:.96rem;margin:0}
.card-cat .conta{margin-top:14px;font-weight:700;color:var(--oro-scuro);font-size:.9rem}

/* ===== Sezione / elenco ricette ===== */
.sezione{padding:26px 0 10px}
.sezione-testa{margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid var(--bordo)}
.sezione-testa .tag{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;padding:4px 10px;border-radius:999px;color:#fff;margin-bottom:10px}
.sezione-testa p{color:var(--inchiostro-2);max-width:70ch;margin:0}

.griglia-ric{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px;margin-top:8px}
.card-ric{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--carta);
  border:1px solid var(--bordo);border-radius:var(--raggio);overflow:hidden;box-shadow:var(--ombra);
  transition:transform .15s ease;
}
.card-ric:hover{transform:translateY(-3px)}
.card-ric .foto{aspect-ratio:4/3;width:100%;object-fit:cover;background:var(--crema-2)}
.card-ric .corpo{padding:14px 16px 16px}
.card-ric h3{font-size:1.12rem;margin:0 0 .2em}
.card-ric .mini{font-size:.86rem;color:var(--inchiostro-2);margin:0}
.badge-gusto{align-self:flex-start;margin:12px 0 0 16px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--oro-scuro);background:#fbe9ec;padding:3px 9px;border-radius:999px}
.badge-gusto.salata{color:var(--salvia);background:var(--salvia-chiara)}

/* ===== Foto segnaposto ===== */
.foto-segnaposto{
  display:flex;align-items:center;justify-content:center;font-size:2.6rem;
  background:radial-gradient(circle at 30% 30%,var(--crema-2),#f3d3d8);
}

/* ===== Vista ricetta ===== */
.ricetta{max-width:820px;margin:0 auto;padding:26px 0 60px}
.ricetta .torna{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.9rem;text-decoration:none;color:var(--inchiostro-2);margin-bottom:18px}
.ricetta .torna:hover{color:var(--inchiostro)}
.ricetta-hero{border-radius:var(--raggio);overflow:hidden;border:1px solid var(--bordo);box-shadow:var(--ombra);margin-bottom:22px;background:var(--crema-2)}
.ricetta-hero img,.ricetta-hero .foto-segnaposto{width:100%;aspect-ratio:16/9;object-fit:cover}
.ricetta .cat-eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;font-weight:700;color:var(--oro-scuro)}
.ricetta h1{margin:.15em 0 .3em}
.ricetta .intro{font-size:1.15rem;color:var(--inchiostro-2);font-style:italic;margin-bottom:20px}
.meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.meta span{background:var(--carta);border:1px solid var(--bordo);border-radius:999px;padding:6px 14px;font-size:.86rem;font-weight:600}
.meta span b{color:var(--oro-scuro);font-weight:700}

.blocco{background:var(--carta);border:1px solid var(--bordo);border-radius:var(--raggio);padding:22px 24px;margin-bottom:18px;box-shadow:var(--ombra)}
.blocco h2{font-size:1.35rem;margin-bottom:.5em}
.lista-ingredienti{list-style:none;padding:0;margin:0}
.lista-ingredienti li{padding:9px 0 9px 28px;position:relative;border-bottom:1px dashed var(--bordo)}
.lista-ingredienti li:last-child{border-bottom:0}
.lista-ingredienti li::before{content:"";position:absolute;left:6px;top:17px;width:8px;height:8px;border-radius:50%;background:var(--oro)}
.passi{margin:0;padding:0;counter-reset:p;list-style:none}
.passi li{position:relative;padding:6px 0 18px 46px;margin:0}
.passi li::before{
  counter-increment:p;content:counter(p);
  position:absolute;left:0;top:2px;width:30px;height:30px;border-radius:50%;
  background:var(--inchiostro);color:var(--crema);font-weight:700;font-family:var(--serif);
  display:flex;align-items:center;justify-content:center;font-size:.95rem;
}
.passi li:not(:last-child)::after{content:"";position:absolute;left:14px;top:34px;bottom:4px;width:2px;background:var(--bordo)}
.dritta{background:var(--salvia-chiara);border:1px solid #efc9cf;border-left:4px solid var(--salvia);border-radius:10px;padding:16px 20px;margin-bottom:18px}
.dritta b{color:var(--salvia)}
.avviso{font-size:.88rem;color:var(--inchiostro-2);border:1px dashed var(--bordo);border-radius:10px;padding:10px 14px;margin-bottom:18px}
.avviso a{font-weight:700}
.azioni-ric{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 4px}

.nav-ric{display:flex;justify-content:space-between;gap:12px;margin-top:30px;flex-wrap:wrap}
.nav-ric a{flex:1;min-width:200px;text-decoration:none;background:var(--carta);border:1px solid var(--bordo);border-radius:var(--raggio);padding:14px 18px;color:inherit}
.nav-ric a small{display:block;color:var(--inchiostro-2);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.nav-ric a b{font-family:var(--serif);font-weight:600;font-size:1.05rem}
.nav-ric a.avanti{text-align:right}

/* ===== Vendere ===== */
.vendere{max-width:820px;margin:0 auto;padding:26px 0 60px}
.vendere .blocco h3{color:var(--oro-scuro);margin-top:1.1em}
.vendere .blocco h3:first-of-type{margin-top:0}

/* ===== Footer ===== */
.sito-footer{border-top:1px solid var(--bordo);background:var(--crema-2);padding:30px 0;margin-top:40px;text-align:center;color:var(--inchiostro-2);font-size:.9rem}

/* ===== Schermi piccoli ===== */
@media (max-width:520px){
  body{font-size:17px}
  .contenitore{padding:0 16px}
  .sito-header .contenitore{min-height:56px}
  .nav{width:100%;margin:0;padding-bottom:2px}
  .blocco{padding:18px 16px}
  .passi li{padding-left:40px}
  .nav-ric a{min-width:0;flex:1 1 100%;text-align:left}
  .nav-ric a.avanti{text-align:left}
  .meta{gap:8px}
}

/* ===== Stampa ===== */
.solo-stampa{display:none}
#print-root{display:none}

@media print{
  @page{size:A4;margin:14mm 15mm}
  :root{--crema:#fff;--carta:#fff}
  body{background:#fff;font-size:9.6pt;line-height:1.36;color:#000}
  .sito-header,.sito-footer,.barra-ricerca,.azioni-hero,.azioni-ric,.nav-ric,.avviso,.ricetta .torna,.no-stampa,#risultati-ricerca{display:none !important}
  .solo-stampa{display:block}

  body.stampa-tutto #app{display:none}
  body.stampa-tutto #print-root{display:block}

  #print-root .p-ricetta{page-break-inside:avoid;break-inside:avoid;padding:0 0 4mm;margin-bottom:5mm;border-bottom:1px solid #d9d9d9;overflow:hidden}
  #print-root .p-cat{page-break-before:always;padding-top:2mm}
  #print-root > .p-titolo-libro + .p-intro + .p-cat,#print-root .p-solo{page-break-before:avoid}
  #print-root h1.p-titolo-libro{font-size:30pt;margin:30mm 0 3mm;font-family:var(--serif)}
  #print-root > .p-intro{font-size:12pt;font-style:italic;color:#444;margin-bottom:0}
  #print-root .p-brand{font-family:var(--serif);font-weight:600;font-size:12pt;color:#a8475a;margin:0 0 5mm}
  #print-root h2.p-cat-titolo{font-size:17pt;border-bottom:2px solid #000;padding-bottom:2mm;margin:0 0 3mm;font-family:var(--serif)}
  #print-root h3{font-size:12pt;margin:0 0 1mm;font-family:var(--serif);break-after:avoid}
  #print-root b{font-size:9.4pt;display:inline-block;margin-top:1.5mm}
  #print-root .p-intro{font-style:italic;color:#333;margin:0 0 1.5mm}
  #print-root .p-meta{font-size:8.6pt;color:#555;margin:0 0 1.5mm}
  #print-root ul,#print-root ol{margin:.5mm 0 1.5mm;padding-left:5mm}
  #print-root .p-ricetta ul{columns:2;column-gap:7mm}
  #print-root li{margin:0;break-inside:avoid}
  #print-root .p-dritta{font-size:9pt;background:#f2f2f2;padding:1.5mm 3mm;border-left:3px solid #999;margin-top:1.5mm;font-style:normal}
  #print-root .p-foto{float:right;width:42mm;height:30mm;object-fit:cover;margin:0 0 2mm 4mm;border-radius:2mm}
  .ricetta,.blocco{box-shadow:none;border-color:#ddd}
  a[href]::after{content:""}
}

/* 17/10: tarjeta de la app gemela (Capsule <-> Bombe, se venden juntas en la OTO2) */
.gemella{display:flex;gap:14px;align-items:center;background:var(--carta);border:2px solid var(--oro);border-radius:var(--raggio);padding:12px;margin:20px 0 4px;text-decoration:none;color:var(--inchiostro);box-shadow:var(--ombra)}
.gemella img{width:92px;height:92px;border-radius:12px;object-fit:cover;flex:0 0 auto}
.gemella span{font-size:.92rem;line-height:1.4;color:var(--inchiostro-2)}
.gemella small{display:block;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--oro)}
.gemella b{display:block;font-family:var(--serif);font-weight:600;font-size:1.12rem;color:var(--inchiostro);margin:1px 0 2px}
.gemella em{display:block;font-style:normal;font-weight:800;color:var(--oro-scuro);margin-top:5px}

/* 17/10: una ficha A4 por receta (stampa_schede_patch.py) */
@media print{
  #print-root .p-ricetta.scheda{break-before:page;page-break-before:always;break-inside:avoid;page-break-inside:avoid;border-bottom:0;margin:0;padding:0}
  #print-root .p-solo .p-ricetta.scheda{break-before:auto;page-break-before:auto}
  #print-root .scheda .p-brand{font-size:10pt;margin:0 0 3mm;padding-bottom:2mm;border-bottom:1px solid #d9d9d9}
}
@media print{
  /* la guía corre seguida (no deja hojas casi vacías); las fichas siguen enteras */
  #print-root .p-cat .p-ricetta:not(.scheda){break-inside:auto;page-break-inside:auto}
  #print-root .p-cat .p-ricetta:not(.scheda) b{break-after:avoid;page-break-after:avoid}
}

/* 26/10: línea de bienvenida (Tisane su Stecco) */
.hero .benvenuto{font-family:var(--serif);font-style:italic;font-size:1.08rem;line-height:1.45;color:#fde3e8;max-width:560px;margin:0 auto 14px}