.pie.pie--attaccato{margin-top:0}

body.pag-manifesto .wrap.corpo > h2{color:#7B1E4B}

body.pag-manifesto .punti > li::before{color:#7B1E4B}

/* 7 · CHI SIAMO — «L'organizzazione», «Il comitato scientifico»,
   «L'organizzatore»: i tre `<h3>` dentro la griglia `.tre`, su schede bianche.
   Erano `--inchiostro` #603A22.                                             */
body.pag-chi-siamo .tre h3{color:#7B1E4B}

body.pag-news .wrap.apre h1,
body.pag-news .wrap.apre h1 .filo{color:#7B1E4B; -webkit-text-fill-color:#7B1E4B}

.fascia-meta{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; gap:0}
.fascia-meta__testo{padding:76px max(var(--gutter),56px); align-self:center}
.fascia-meta__foto{display:block; position:relative}
.fascia-meta__foto .foto{aspect-ratio:4/3; width:100%; height:100%}
.fascia-meta__foto .foto img{object-position:28% 50%}
@media (max-width:900px){
  .fascia-meta{grid-template-columns:1fr}
  .fascia-meta__testo{padding:48px var(--gutter)}
  .fascia-meta__foto .foto{height:auto}
}

.hero__riga{column-gap:28px}
.hero__riga span{background:none; box-shadow:none; padding:0; border-radius:0; color:#fff;
  text-shadow:0 2px 10px rgba(11,2,4,.6)}

.meta{display:revert}

@media (max-width: 720px){
  .campo > span:not(:has(> input)){ display: revert; gap: normal; }
}

:root{ --t-h1: clamp(min(40px, 10vw), 6.4vw, 92px); }

body h1{ overflow-wrap: break-word; }

@media (max-width: 380px){
  .testata__in{ gap: 8px; }
  .testata .btn{ padding: 0 10px; }
}

@media (max-width: 480px){
  .conto{ gap: 10px; }
  .conto__q{ gap: 4px; }
  .conto__q b{ font-size: 16px; }
  .conto__q i{ font-size: 12px; letter-spacing: .06em; }
}

@media (max-width: 700px){
  .tag{ font-size: 12px; }
  .briciola a, .briciola span{ font-size: 12px; }
}

@media (max-width: 700px){
  .sezione{ padding: 64px 0; }
  .sezione--stretta{ padding: 40px 0; }
  .sezione--zero{ padding: 0; }
}

@media (max-width: 560px){
  #grani .griglia{ grid-template-columns: 1fr; }
}

@media (max-width: 560px){
  .partner__griglia{ grid-template-columns: repeat(2, 1fr); gap: 34px 24px; }
  .partner__c{ justify-content: center; }
  .partner__c img{ object-position: center center; }
  .partner__c--largo{ grid-column: 1 / -1; }
}
@media (max-width: 700px){
  .partner__r{ font-size: 12px; }
}

@media (max-width: 720px){
  br.a-capo-stretto{ display: none; }
}

@media (max-width: 700px){
  .citta{ background: var(--carta-calda); position: relative; padding-right: 56px; }
  .citta::after{
    content: "\2192"; position: absolute; right: 24px; top: 50%;
    transform: translateY(-50%);
    font: 800 22px/1 "Montserrat", sans-serif; color: var(--vino);
  }
}

@media (max-width: 700px){
  .seg{ font-size: 12px; }
}

@media (max-width: 700px){
  .orari > div{ display: block; }
  .orari dt{ margin: 0 0 6px; }
  .orari dd{ text-align: left; }
}

@media (max-width: 700px){
  .contatti dt, .orari dt{ font-size: 12px; }
}

@media (max-width: 700px){
  .link--indirizzo{ text-transform: none; letter-spacing: .01em; }
}

@media (max-width: 720px){
  table.turni td[data-e="Posti"] .barra{ width: 100%; }
}

@media (max-width: 720px){
  .contenuto > footer.pie{ margin-top: 32px; }
  /* la fascia colorata attaccata al piè resta attaccata (v. blocco A) */
  .contenuto > footer.pie.pie--attaccato{ margin-top: 0; }
  .contenuto > main,
  .contenuto > main.contenitore{ padding-bottom: 0; }

  .news-l > .news-a:last-child{ padding-bottom: 0; }   /* −34 px su /news */
  .ptc-sez:last-child{ margin-bottom: 0; }             /* −40 px su /partecipa */
}

@media (max-width: 720px){
  .contenuto > footer.pie{ padding-top: 40px; padding-bottom: 24px; }   /* era 64 / 34 */
  .pie .griglia.g5{ grid-template-columns: repeat(2, 1fr); gap: 14px; } /* era 1 o 2 col, gap 18/22 */
  .pie h4{ margin-bottom: 8px; }                                        /* era 14 */
  .pie .pie__nl{ margin-top: 22px; padding-top: 18px; padding-bottom: 18px; }  /* era 34 / 30 / 30 */
  .pie .pie__coda{ margin-top: 26px; padding-top: 14px; }               /* era 44 / 20 */
  /* il modulo del piè stava su DUE righe perché «Iscrivimi» (padding 0 40px)
     non entrava in riga col campo: 220+10+137 > 350. Con la base del campo a
     150 e i fianchi del bottone a 20 sta su UNA riga. Il bottone resta alto 52. */
  .pie__nl-f input{ flex: 1 1 150px; }
  .pie__nl-f .btn--azione{ padding-left: 20px; padding-right: 20px; }
}

/* ── G2 · IL PIÈ A 1440: RIDUZIONE LIEVE ──────────────────────────────────
   Solo spazi INTERNI al piè: `margin-top` del piè e `padding-bottom` del
   `<main>` restano quelli di prima, così l'ordinata a cui comincia il piè non
   si muove di un pixel e tutto ciò che sta sopra resta identico (impronta).   */
@media (min-width: 721px){
  .contenuto > footer.pie{ padding-top: 52px; padding-bottom: 28px; }   /* era 64 / 34 */
  .pie .pie__nl{ margin-top: 28px; padding-top: 24px; padding-bottom: 24px; }  /* era 34 / 30 / 30 */
  .pie .pie__coda{ margin-top: 34px; }                                  /* era 44 */
}

.pfascia .pc__logo img,            /* i 17 loghi della pagina /partner        */
.pfascia .pc__logo--senza,         /* la casella di chi non ha logo           */
section#partner .partner__c img{   /* i 7 loghi della fascia in home          */
  outline: 0;
  border: 0;
  box-shadow: none;
}

#calendario .locandina__q::after{
  background: linear-gradient(to bottom,
    rgba(20,4,8,.66)   0%,
    rgba(20,4,8,.58)  42%,
    rgba(20,4,8,.62)  78%,
    rgba(20,4,8,.90) 100%);
}

#calendario .locandina__m{ color:#fff; }

#calendario .locandina__l{ color:#fff; }

.ades{ background: var(--carta-calda, #FFEDE1); }
.ades .wrap{ padding-top: 56px; padding-bottom: 56px; }
.ades__in{ display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.ades__dice .occhiello{ margin: 0 0 8px; }
.ades__dice .t-blocco{ margin: 0 0 12px; }
.ades__dice .guida{ margin: 0; text-wrap: pretty; }

.ades__f{ display: grid; gap: 14px; }
.ades__riga{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.campo-ades{ display: grid; gap: 6px; min-width: 0; }
.campo-ades label{
  font: 800 12px/1.2 "Montserrat", sans-serif;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--inchiostro, #603A22);
}
.campo-ades label{ min-height: 0; }
.campo-ades input, .campo-ades select{
  font: 400 16px/1.3 "Montserrat", sans-serif;
  min-height: 52px; padding: 0 14px; width: 100%; max-width: 100%;
  border: 2px solid #46220F; border-radius: 8px;
  background: #fff; color: #46220F;
}
.campo-ades input::placeholder{ color: #8A5A46; }
/* Il campo Azienda lo nasconde il piccolo script del modulo con l'attributo
   `hidden`. In una griglia `display:grid` batte `hidden`, quindi senza questa
   riga il campo resterebbe visibile anche da nascosto. */
.campo-ades[hidden]{ display: none; }

.ades__spunta{
  display: flex; gap: 10px; align-items: start;
  min-height: 44px; padding: 6px 0; cursor: pointer;
  font: 400 15px/1.45 "Montserrat", sans-serif;
  color: var(--inchiostro, #603A22); text-wrap: pretty;
}
.ades__spunta input[type="checkbox"]{
  flex: 0 0 auto; width: 22px; height: 22px; margin: 1px 0 0;
  accent-color: #46220F;
}
.ades__spunta a{ color: var(--vino, #C4400F); }
.ades__f .btn--azione{ min-height: 52px; justify-self: start; }
.ades__p{ margin: 0; font-size: 14px; line-height: 1.5; color: var(--tenue, #8A5A46); }
.ades__f .esca-bot input{
  width: 1px; height: 1px; min-width: 0; min-height: 0;
  padding: 0; border: 0; font-size: 16px;
}

@media (max-width: 900px){
  .ades__in{ grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 560px){
  .ades__riga{ grid-template-columns: 1fr; }
  .ades .wrap{ padding-top: 40px; padding-bottom: 40px; }
}

.ades-vie__guida{ margin: 26px 0 14px; }
.ades-vie{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  /* ⛔ Il margine sotto NON si azzera. `.ades-vie` è un <p> come gli altri del
     corpo, e il respiro prima del titolone della sezione dopo viene da lì:
     con `margin:0` fra i bottoni e «Dal Manifesto al territorio» restavano
     **0 px** (misurato, non temuto), mentre un paragrafo qualsiasi di questa
     pagina ne lascia 17. Il margine sopra invece sì: la riga di guida sta a
     14 px dai suoi bottoni, e devono restare una cosa sola. */
  margin-top: 0;
}
.ades-vie .btn{ white-space: nowrap; }

@media (max-width: 560px){
  .ades-vie{ flex-direction: column; align-items: stretch; gap: 10px; }
  /* In colonna la pillola prende tutta la riga: due bottoni larghi uguali si
     leggono come due strade pari, che è quello che sono. */
  .ades-vie .btn{ width: 100%; white-space: normal; }
}

/* ── I1 · MANIFESTO e MANIFESTO PER I PRODUTTORI ───────────────────────────
   Erano i titoli più attaccati del sito: «I nove valori.» a 14 px dal testo,
   «E allora, perché aderire?» a 23, «Dal Manifesto al territorio.» a 11,
   mentre fra una voce e l'altra dei nove valori ce n'erano 55.
   · `h2` dopo un `p`: il margine dell'h2 collassa con l'1 em del p.
   · `h2` dopo un bottone (`.ades-vie`): sotto il bottone non c'è mezza
     interlinea, quindi 3 px in più che dopo un paragrafo.
   · `h2` dopo l'elenco: il `padding-bottom` dell'ultima voce (26) non
     collassa, si somma.
   · voce → voce: si stringe il padding SOTTO le voci, non quello sopra. Il
     numero della voce (`::before`, `top:24px`) è agganciato alla cima del `li`:
     toccando il padding sopra, numero e titolo si scollerebbero. L'ULTIMA voce
     resta com'è, perché regge il passaggio dopo l'elenco (verso «E allora…» e
     verso la fascia di adesione, che non si tocca).
   · testo → prima voce (solo «Passaporto»): il margine sotto il paragrafo va a
     zero e l'elenco prende 14 px, così il `li` resta intatto.                  */
body.pag-manifesto .corpo > p + h2,
body.pag-manifesto-produttori .corpo > p + h2{ margin-top: 46px; }            /* 14,34 → 43,34 */
body.pag-manifesto .corpo > p.ades-vie + h2{ margin-top: 49px; }             /* 11 → 43 */
body.pag-manifesto .corpo > .punti + h2{ margin-top: 20px; }                 /* 23,34 → 43,34 */
body.pag-manifesto .punti > li:not(:last-child),
body.pag-manifesto-produttori .punti > li:not(:last-child){ padding-bottom: 14px; }  /* 55,34 → 43,34 */
body.pag-manifesto .corpo > p:has(+ .punti){ margin-bottom: 0; }
body.pag-manifesto .corpo > p + .punti{ margin-top: 14px; }                  /* 63,34 → 43,34 */
@media (max-width: 720px){
  body.pag-manifesto .corpo > p + h2,
  body.pag-manifesto-produttori .corpo > p + h2{ margin-top: 43px; }          /* 15,8 → 42,8 */
  body.pag-manifesto .corpo > p.ades-vie + h2{ margin-top: 47px; }           /* 12 → 43 */
  body.pag-manifesto .corpo > .punti + h2{ margin-top: 17px; }               /* 25,8 → 42,8 */
}

.legale > p + .separatore{ margin-top: 39px; }                              /* 17,91 → 42,91 */
.legale > p + h3{ margin-top: 39px; }                                       /* 29,91 → 42,91 */

body.pag-partecipa .ptc-sez:has(+ .ptc-sez > h2:first-child),
body.pag-partecipa .ptc-chiusura:has(+ .ptc-sez > h2:first-child){ margin-bottom: 45px; }  /* 54 · 46 → 43 */
body.pag-partecipa .ptc-sez:has(+ .ptc-sez > .separatore:first-child){ margin-bottom: 43px; }  /* 56 → 43 */
body.pag-partecipa .ptc-sez:has(.ptc-modulo):has(+ .ptc-sez > h2:first-child){ margin-bottom: 18px; }  /* 80,69 → 42,69 */
@media (max-width: 720px){
  body.pag-partecipa .ptc-sez:has(+ .ptc-sez > h2:first-child),
  body.pag-partecipa .ptc-chiusura:has(+ .ptc-sez > h2:first-child){ margin-bottom: 44px; }  /* 39 · 47 → 43 */
  body.pag-partecipa .ptc-sez:has(.ptc-modulo):has(+ .ptc-sez > h2:first-child){ margin-bottom: 17px; }  /* 65,69 → 42,69 */
}

/* ── I4 · PRODUTTORI e PARTNER ──────────────────────────────────────────────
   Fra un gruppo e il titolo del gruppo dopo («CANTINE 2», «SPONSOR»…) lo spazio
   lo fa il `padding-top` della sezione del gruppo. Solo `.gr + .gr`: il primo
   gruppo segue l'apertura, che non si tocca.
   Sui partner 43,5 e non 43 o 44: le due righe che chiudono i gruppi hanno
   mezze interlinee diverse (0,63 e 0,78), e solo 43,5 le porta tutte e due a 43.  */
body.pag-produttori .gr + .gr{ padding-top: 27px; }                          /* 56,34 → 43,34 */
body.pag-partner .pfascia .gr + .gr{ padding-top: 43.5px; }                  /* 51,25 · 51,55 → 42,75 · 43,05 */
@media (max-width: 720px){
  body.pag-produttori .gr + .gr{ padding-top: 29px; }                        /* 53,59 → 42,59 */
}

@media (min-width: 721px){
  body.pag-diventa-partner main h2{ margin-top: 41px; }                      /* 42,19 → 43,19 */
}

body.pag-bere-e-mangiare .contatti + .t3{ margin-top: 23px; }                            /* 64 → 43 · 14 schede */
body.pag-bere-e-mangiare .contatti:not(:has(.social-locale)) + .t3{ margin-top: 8.5px; }
body.pag-bere-e-mangiare .orari + .t3{ margin-top: 25px; }                               /* 61,8 → 42,8 · 13 schede */
body.pag-bere-e-mangiare .orari__nota + .t3{ margin-top: 40px; }                         /* 46,69 → 42,69 · 2 schede */
@media (min-width: 721px){
  body.pag-bere-e-mangiare .mappa-s + .t3{ margin-top: 43px; }                           /* 44 → 43 · 12 schede */
}
@media (max-width: 720px){
  body.pag-bere-e-mangiare .contatti + .t3{ margin-top: 24px; }                          /* 63 → 43 */
  body.pag-bere-e-mangiare .contatti:not(:has(.social-locale)) + .t3{ margin-top: 9.5px; }  /* 77,5 → 43 */
  body.pag-bere-e-mangiare .orari + .t3{ margin-top: 26px; }                             /* 60,8 → 42,8 */
  body.pag-bere-e-mangiare .orari__nota + .t3{ margin-top: 41px; }                       /* 45,69 → 42,69 */
}

@media (min-width: 721px) and (max-width: 1024px){
  body.pag-manifesto .corpo > p + h2,
  body.pag-manifesto-produttori .corpo > p + h2{ margin-top: 43px; }          /* 45,8 → 42,8 */
  body.pag-manifesto .corpo > p.ades-vie + h2{ margin-top: 47px; }           /* 45 → 43 */
  body.pag-manifesto .corpo > .punti + h2{ margin-top: 17px; }               /* 45,8 → 42,8 */
  body.pag-partecipa .ptc-sez:has(+ .ptc-sez > h2:first-child),
  body.pag-partecipa .ptc-chiusura:has(+ .ptc-sez > h2:first-child){ margin-bottom: 44px; }  /* 44 → 43 */
  body.pag-partecipa .ptc-sez:has(.ptc-modulo):has(+ .ptc-sez > h2:first-child){ margin-bottom: 17px; }  /* 43,69 → 42,69 */
  body.pag-diventa-partner main h2{ margin-top: 40px; }                      /* 44,19 → 43,19 */
  body.pag-bere-e-mangiare .contatti + .t3{ margin-top: 24px; }              /* 42 → 43 */
  body.pag-bere-e-mangiare .contatti:not(:has(.social-locale)) + .t3{ margin-top: 20px; }
  body.pag-bere-e-mangiare .orari + .t3{ margin-top: 26px; }                 /* 41,8 → 42,8 */
  body.pag-bere-e-mangiare .orari__nota + .t3{ margin-top: 41px; }           /* 41,69 → 42,69 */
  body.pag-bere-e-mangiare .mappa-s + .t3{ margin-top: 44px; }               /* 42 → 43 */
}
@media (min-width: 1025px) and (max-width: 1360px){
  body.pag-manifesto .corpo > p + h2,
  body.pag-manifesto-produttori .corpo > p + h2{ margin-top: 45px; }          /* 43,8 → 42,8 */
  body.pag-manifesto .corpo > .punti + h2{ margin-top: 19px; }               /* 43,8 → 42,8 */
  body.pag-bere-e-mangiare .contatti + .t3{ margin-top: 24px; }              /* 42 → 43 */
  body.pag-bere-e-mangiare .contatti:not(:has(.social-locale)) + .t3{ margin-top: 9.5px; }
  body.pag-bere-e-mangiare .orari + .t3{ margin-top: 26px; }                 /* 41,8 → 42,8 */
  body.pag-bere-e-mangiare .orari__nota + .t3{ margin-top: 41px; }           /* 41,69 → 42,69 */
  body.pag-bere-e-mangiare .mappa-s + .t3{ margin-top: 44px; }               /* 42 → 43 */
}

body.pag-manifesto .banda__b{ display: flex; flex-wrap: wrap; gap: 12px; }
body.pag-manifesto .banda__b .btn{ white-space: nowrap; }
@media (max-width: 560px){
  body.pag-manifesto .banda__b{ flex-direction: column; align-items: stretch; gap: 10px; }
  body.pag-manifesto .banda__b .btn{ width: 100%; white-space: normal; }
}
@media (hover: hover) and (pointer: fine){
  body.pag-manifesto .banda .btn--filo:hover span{ color: #7B1E4B; }
}

/* ── J2 · la citazione centrale di «Da dove nasce» ───────────────────────── */
body.pag-manifesto .corpo > p.citazione{
  margin: 34px 0 17px;
  padding-left: 20px;
  border-left: 4px solid #FF9028;
  max-width: 34ch;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.25;
  color: #7B1E4B;
  text-wrap: balance;
}

/* ── J3 · il banner del Manifesto ─────────────────────────────────────────── */
.banner-manifesto{ background: #7B1E4B; color: #FFFFFF; }
.banner-manifesto h2, .banner-manifesto p{ color: #FFFFFF; }
.banner-manifesto .btn--azione{ border-color: #FFE500; }
.banner-manifesto__in{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.banner-manifesto__in > div{ flex: 1 1 480px; }
.banner-manifesto__in h2{ margin: 0 0 12px; }
.banner-manifesto__in .guida{ margin: 0; }
.banner-manifesto__in > p{ margin: 0; }
.banner-manifesto--riquadro{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; padding: 32px 40px; }
.banner-manifesto__testo{ flex: 1 1 420px; margin: 0; font-weight: 700; max-width: 62ch; }
.banner-manifesto__b{ margin: 0; }
body.pag-produttori .banner-manifesto--riquadro{ margin: 48px 0 0; }
body.pag-percorso-passaporto .banner-manifesto--riquadro{ margin: 0 0 32px; }
/* la testata è fissa (77 px a 1440, 65 a 390): senza, l'ancora finisce sotto */
#attiva-passaporto{ scroll-margin-top: 90px; }
@media (max-width: 560px){
  .banner-manifesto--riquadro{ padding: 24px 20px; }
  .banner-manifesto__in > p, .banner-manifesto__b{ width: 100%; }
  .banner-manifesto .btn{ width: 100%; }
}

.banner-manifesto .btn{ padding-left: 40px; padding-right: 40px; border-width: 2px; border-style: solid; }
@media (max-width: 560px){
  body.pag-produttori .banner-manifesto--riquadro,
  body.pag-percorso-passaporto .banner-manifesto--riquadro{ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
}

body.pag-manifesto .corpo > p.citazione + h2{ margin-top: 49px; }                       /* 1440 · 40 → 43 */
@media (min-width: 1025px) and (max-width: 1360px){
  body.pag-manifesto .corpo > p.citazione + h2{ margin-top: 49px; }                     /* 1280 · 39 → 43 */
}
@media (min-width: 721px) and (max-width: 1024px){
  body.pag-manifesto .corpo > p.citazione + h2{ margin-top: 47px; }                     /* 768 · 39 → 43 */
}
@media (max-width: 720px){
  body.pag-manifesto .corpo > p.citazione + h2{ margin-top: 47px; }                     /* 390 · 39 → 43 */
}

.ades.ades--scheda{ background: none; }
.ades--scheda .wrap{ padding-top: 56px; padding-bottom: 56px; }
.ades__scheda{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: 32px 48px;
  align-items: center;
  padding: 40px;
  border-radius: 32px;
  background: #7B1E4B;
  color: #FFFFFF;
  box-shadow: 0 24px 60px rgba(70, 34, 15, .16);
}
.ades--scheda .ades__dice .occhiello{ margin: 0 0 14px; color: #FFEDE1; }
.ades--scheda .ades__dice .ades__titolo{ margin: 0; color: #FFFFFF; }
.ades--scheda .ades__dice .ades__sotto{
  margin: 12px 0 20px;
  font-family: "Montserrat", sans-serif; font-style: italic; font-weight: 600;
  font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2;
  color: #FFFFFF; text-wrap: balance;
}
.ades--scheda .ades__dice .ades__testo{ margin: 0; max-width: 60ch; color: #FFFFFF; }
.ades--scheda .ades__dice .ades__chiusa{ margin: 16px 0 0; color: #FFFFFF; }
.ades--scheda .ades__dice .ades__chiusa strong{ font-weight: 700; }

/* ── la scheda bianca dei campi ── */
.ades--scheda .ades__f{
  gap: 12px;
  padding: 24px;
  border-radius: 22px;
  background: #FFFFFF;
  color: #46220F;
}
.ades--scheda .ades__riga{ gap: 12px; }
/* una fila con un campo solo (Email, Azienda) prende tutta la riga */
.ades--scheda .ades__riga > .campo-ades:only-child{ grid-column: 1 / -1; }

/* ── il nome del campo DENTRO la casella, in alto, come nella bozza ──
   ⚠️ Resta un'ETICHETTA VERA e sempre visibile, non un segnaposto: il segnaposto
      sparisce appena si scrive, e la tendina «Profilo» non ne ha. `pointer-events:none`
      perché il clic sul nome arrivi alla casella che ci sta sotto.                    */
.ades--scheda .campo-ades{ position: relative; display: block; }
.ades--scheda .campo-ades label{
  position: absolute; left: 15px; right: 15px; top: 9px; z-index: 1;
  pointer-events: none;
  font: 800 11px/1.2 "Montserrat", sans-serif; letter-spacing: .08em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #603A22;
}
.ades--scheda .campo-ades input,
.ades--scheda .campo-ades select{
  display: block;
  min-height: 58px; padding: 25px 14px 7px;
  border: 1px solid #8A5A46; border-radius: 12px;
  background-color: #FFEDE1; color: #46220F;
  line-height: 1.3;
}
/* La tendina disegnata dal browser non rispetta il riempimento in alto: si toglie
   l'aspetto di serie e la freccia la disegna un'immagine (colore #46220F). */
.ades--scheda .campo-ades select{
  -webkit-appearance: none; appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2346220F' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px;
}
.ades--scheda .ades__spunta{ font-size: 14px; }
.ades--scheda .ades__f .btn--azione{ justify-self: stretch; width: 100%; }

@media (max-width: 1024px){
  .ades__scheda{ grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 560px){
  .ades--scheda .wrap{ padding-top: 40px; padding-bottom: 40px; }
  .ades__scheda{ padding: 28px 20px 20px; border-radius: 24px; gap: 24px; }
  .ades--scheda .ades__f{ padding: 18px 16px; border-radius: 18px; }
}

.topbar .topbar__in,
.topbar .topbar__in *{ color: #FFFFFF; }
.topbar .conto__eti,
.topbar .conto__q i{ opacity: 1; }

/* ── L2 · «Che cos’è Gastronomica.» sulla scala dei titoli di sezione ────────
   `--t-h2` = 56 px a 1440 (clamp 32→56): la stessa dei titoli delle altre sezioni
   della home. Prima era `--t-h3`, 21 px. */
.fascia-meta .t-blocco{
  font-size: var(--t-h2); line-height: var(--t-h2-lh);
  letter-spacing: var(--t-h2-ls); font-weight: 900;
}
/* il paragrafo: 20 px a 1440 (era 17), 18 px sul telefono (era 16) */
.fascia-meta .guida{ font-size: clamp(18px, 1.4vw, 20px); }

@media (min-width: 520px){
  section#partner .testa-sez{ flex-wrap: nowrap; flex-direction: row-reverse; }
}
@media (max-width: 519px){
  section#partner .testa-sez{ flex-direction: column; align-items: flex-start; }
}

.cartolina{ display: grid; gap: 52px; }
.cartolina__riga--due{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 0 48px; align-items: start; }
/* su /partner i gruppi portano `padding-top` da DUE regole sotto: `.pfascia .gr{padding:52px 0 0}`
   (partner.css) e `body.pag-partner .pfascia .gr + .gr{padding-top:43.5px}` (blocco sopra, 0,4,1):
   dentro la cartolina lo spazio lo fa il `gap`, quindi si azzerano con una specificità maggiore.
   ⚠️ Misurato il 15/09 (scatto a 1440 + `paddingTop` letto): «In collaborazione con» stava 43 px
   più in basso di «Un progetto promosso da». Si azzera SOLO sopra/destra/sotto: il sinistro serve
   alla riga verticale qui sotto. */
body.pag-partner .pfascia .cartolina .gr,
body.pag-partner .pfascia .cartolina .gr + .gr,
body.pag-partner .pfascia .cartolina .gr:first-child{ padding-top: 0; padding-right: 0; padding-bottom: 0; }
.cartolina__riga--due > .cartolina__gruppo + .cartolina__gruppo{
  border-left: 2px solid var(--inchiostro, #603A22); padding-left: 48px;
}
@media (min-width: 1001px){
  .pfascia .cartolina__gruppo--partner .pgriglia{ grid-template-columns: repeat(2, 1fr); }
}
/* il titolo del gruppo, uguale in home e su /partner (su /partner `.gr__t` sta nel
   foglio in linea; in home non esiste: si scrive qui per tutte e due)          */
.cartolina .gr__t{
  font: 900 14px/1 "Montserrat", sans-serif; text-transform: uppercase; letter-spacing: .16em;
  color: var(--vino); margin: 0 0 22px; display: flex; align-items: center; gap: 12px;
}
/* (la regola «.pfascia .cartolina .gr{padding:0}» che stava qui azzerava ANCHE il padding sinistro della
   riga verticale, essendo scritta dopo: tolta, l'azzeramento sta sopra e non tocca il lato sinistro) */
/* «Con il patrocinio di» su /partner: 5 loghi in una riga, come la cartolina (sotto i 1000 restano le
   regole di partner.css: 2 colonne, poi 1)                                    */
@media (min-width: 1001px){
  .pfascia .cartolina__gruppo--patrocinio .pgriglia{ grid-template-columns: repeat(5, 1fr); gap: 40px 24px; }
}
/* in home: i loghi in fila, altezza della casella come prima (88 px, `partner.css`) */
.cartolina__loghi{ display: flex; flex-wrap: wrap; gap: 28px 44px; align-items: center; }
.cartolina__loghi .partner__c{ width: auto; max-width: min(100%, 272px); }
.cartolina__loghi .partner__c img{ max-width: 100%; }
#partner .cartolina{ margin-top: 30px; text-align: left; }
@media (max-width: 700px){
  .cartolina{ gap: 40px; }
  .cartolina__riga--due{ grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cartolina__riga--due > .cartolina__gruppo + .cartolina__gruppo,
  body.pag-partner .pfascia .cartolina__riga--due > .cartolina__gruppo + .cartolina__gruppo{
    border-left: 0; padding-left: 0;
    border-top: 2px solid var(--inchiostro, #603A22); padding-top: 32px;
  }
}
@media (max-width: 560px){
  .cartolina__loghi{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .cartolina__loghi .partner__c{ justify-content: center; width: auto; }
  .cartolina__loghi .partner__c img{ object-position: center center; }
  .cartolina__loghi .partner__c--largo{ grid-column: 1 / -1; }
}

/* ── M2 · «ADESIONE REGISTRATA» PIÙ VISIBILE (Manifesto e Manifesto dei Produttori)
   Solo sui due esiti buoni (classe `ades__esito--ok`, messa dal PHP): fondo verde
   tenue (il verde di `.nl-esito--ok` al 10 %), bordo verde a sinistra, testo a
   18 px (era 15) con la spunta disegnata in linea. Gli errori restano com'erano. */
.ades--scheda .ades__f .ades__esito--ok{
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 18px 16px 16px; border-radius: 10px;
  background: rgba(31, 107, 79, .10); border-left: 6px solid #1F6B4F;
  color: #1F6B4F; font-size: 18px; line-height: 1.4;
}
.ades__esito-spunta{ flex: 0 0 26px; width: 26px; height: 26px; margin-top: 1px; }

/* ── M3 · CHI SIAMO: i due testi del sito vecchio, il riquadro, la galleria ────
   Prefisso `cs-`: classi che non esistono in nessuna pila. I titoli `h2` in
   prugna come quelli del Manifesto (blocco 6, stesso #7B1E4B).                 */
body.pag-chi-siamo .cs-terracina h2,
body.pag-chi-siamo .cs-perche h2{ color: #7B1E4B; margin-top: 0; }
.cs-terracina{ margin: 0 0 56px; max-width: 76ch; }
.cs-terracina .cs-sotto{
  margin: -6px 0 18px; font-family: "Montserrat", sans-serif; font-weight: 600; font-style: italic;
  font-size: clamp(19px, 1.7vw, 24px); line-height: 1.25; color: var(--inchiostro, #603A22); text-wrap: balance;
}
.cs-perche{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 32px 56px; align-items: center; margin: 0 0 56px; }
.cs-perche > .separatore{ max-width: 76ch; margin-bottom: calc(clamp(18px, 1.8vw, 28px) - 32px); }
@media (max-width: 700px){ .cs-perche > .separatore{ margin-bottom: calc(20px - 32px); } }
.cs-perche__foto{ margin: 0; }
@media (max-width: 900px){ .cs-perche{ grid-template-columns: minmax(0, 1fr); } }

body.pag-chi-siamo .tre{ margin: 84px 0 84px; }
@media (max-width: 560px){ body.pag-chi-siamo .tre{ margin: 82px 0 72px; } }

body.pag-chi-siamo .tre > div{ padding-left: 0; padding-right: 0; }
@media (min-width: 901px){ body.pag-chi-siamo .tre{ column-gap: 62px; } }

.cs-galleria{ margin: 0 0 8px; }
.cs-galleria__fila{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin: 0 0 22px; }
.cs-galleria__t{
  display: block; padding: 0; border: 0; background: none; cursor: pointer;
  aspect-ratio: 1; overflow: hidden; border-radius: 10px; width: 100%;
}
.cs-galleria__t:focus-visible{ outline: 3px solid var(--vino); outline-offset: 3px; }
.cs-galleria__t img, .cs-galleria__t .cs-tessera{ display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-tessera{ display: block; background: var(--carta-calda, #FFEDE1); border: 1px solid var(--riga, #F0DCCC); border-radius: inherit; }
.cs-galleria__b{ margin: 0; }
@media (max-width: 900px){ .cs-galleria__fila{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px){ .cs-galleria__fila{ grid-template-columns: repeat(2, 1fr); gap: 8px; } }

/* la visione a schermo intero: <dialog> nativo, sfondo del colore scuro del sito */
.cs-visione{ border: 0; padding: 0; margin: 0; background: transparent; width: 100vw; height: 100vh; max-width: none; max-height: none; color: #fff; }
.cs-visione::backdrop{ background: rgba(43, 10, 16, .94); }
.cs-visione__in{ position: fixed; inset: 0; display: grid; place-items: center; }
.cs-visione__foto{ width: 100%; height: 100%; display: grid; place-items: center; padding: 64px 72px; box-sizing: border-box; }
.cs-visione__f{ margin: 0; max-width: 100%; max-height: 100%; display: grid; place-items: center; }
.cs-visione__f img{ display: block; max-width: calc(100vw - 144px); max-height: calc(100vh - 128px); width: auto; height: auto; object-fit: contain; }
.cs-visione__f .cs-tessera{ width: min(70vw, 70vh); height: min(70vw, 70vh); border-radius: 12px; }
.cs-visione__chiudi, .cs-visione__prima, .cs-visione__dopo{
  position: absolute; display: grid; place-items: center; width: 48px; height: 48px;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff;
  font: 400 30px/1 "Montserrat", sans-serif; cursor: pointer;
}
.cs-visione__chiudi:hover, .cs-visione__prima:hover, .cs-visione__dopo:hover{ background: rgba(255, 255, 255, .28); }
.cs-visione__chiudi:focus-visible, .cs-visione__prima:focus-visible, .cs-visione__dopo:focus-visible{ outline: 3px solid #FFE500; outline-offset: 2px; }
.cs-visione__chiudi{ top: 14px; right: 14px; }
.cs-visione__prima{ left: 14px; top: 50%; transform: translateY(-50%); }
.cs-visione__dopo{ right: 14px; top: 50%; transform: translateY(-50%); }
.cs-visione__n{ position: absolute; left: 0; right: 0; bottom: 16px; margin: 0; text-align: center; font: 700 14px/1 "Montserrat", sans-serif; color: #fff; }
@media (max-width: 560px){
  .cs-visione__foto{ padding: 64px 12px 48px; }
  .cs-visione__f img{ max-width: calc(100vw - 24px); max-height: calc(100vh - 112px); }
  .cs-visione__chiudi, .cs-visione__prima, .cs-visione__dopo{ width: 44px; height: 44px; }
  .cs-visione__prima{ left: 8px; top: auto; bottom: 40px; transform: none; }
  .cs-visione__dopo{ right: 8px; top: auto; bottom: 40px; transform: none; }
}

footer.pie .griglia.g5{ grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px){ footer.pie .griglia.g5{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px){ footer.pie .griglia.g5{ grid-template-columns: repeat(2, 1fr); } }

@media (min-width: 821px){
  .riga-ev > .btn{ grid-column: -2 / -1; }
}

.cs-galleria--4 .cs-galleria__fila{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .cs-galleria--4 .cs-galleria__fila{ grid-template-columns: repeat(2, 1fr); } }

body.pag-bere-e-mangiare .cs-galleria + .t3{ margin-top: 43px; }

body.pag-bere-e-mangiare .riga-att:active{ transform: none; }

body.pag-bere-e-mangiare .elenco-att + .t2{ margin-top: 44px; }
body.pag-bere-e-mangiare #bm-calendario{ margin-top: 64px; }

.cs-galleria__t .cs-tessera--esempio,
.cs-visione__f .cs-tessera--esempio{
  display: grid; place-content: center; align-content: center; gap: 4px;
  box-sizing: border-box; padding: 8px; text-align: center;
  background-color: #FFF1EC;      /* fisso: in questa fascia --carta-calda vale #FFD9C2 */
  background-image: repeating-linear-gradient(45deg,
      rgba(20, 33, 43, .05) 0 8px, rgba(20, 33, 43, 0) 8px 16px);
  border: 2px dashed rgba(38, 16, 12, .42);
  object-fit: fill;               /* annulla il `cover` della tessera-foto: qui non c'è immagine */
}
.cs-galleria .cs-galleria__t .cs-tessera--esempio .cs-tessera__eti,
.cs-galleria .cs-galleria__t .cs-tessera--esempio .cs-tessera__n,
.cs-galleria .cs-visione__f .cs-tessera--esempio .cs-tessera__eti,
.cs-galleria .cs-visione__f .cs-tessera--esempio .cs-tessera__n{ color: #26100C; -webkit-text-fill-color: #26100C; }
.cs-tessera__eti{
  display: block; font: 700 14px/1.2 "Montserrat", system-ui, sans-serif;
  letter-spacing: .04em; text-transform: uppercase;
}
.cs-tessera__n{ display: block; font: 400 11px/1.2 "Montserrat", system-ui, sans-serif; opacity: .8; }
@media (max-width: 900px){
  .cs-tessera__eti{ font-size: 11px; letter-spacing: .02em; }
  .cs-tessera__n{ font-size: 9px; }
}
/* nel popup la tessera è un quadrato da 70vw/70vh: le lettere crescono con lei */
.cs-visione__f .cs-tessera--esempio{ border-width: 3px; gap: 10px; }
.cs-visione__f .cs-tessera--esempio .cs-tessera__eti{ font-size: 28px; }
.cs-visione__f .cs-tessera--esempio .cs-tessera__n{ font-size: 16px; }

.news-esempio__f{
  display: grid; place-content: center; align-content: center; gap: 4px;
  box-sizing: border-box; width: 100%; aspect-ratio: 4 / 3; padding: 10px; text-align: center;
  background-color: #FFF1EC;
  background-image: repeating-linear-gradient(45deg,
      rgba(20, 33, 43, .05) 0 8px, rgba(20, 33, 43, 0) 8px 16px);
  border: 2px dashed rgba(38, 16, 12, .42);
}
.card--esempio .news-esempio__f .cs-tessera__eti,
.card--esempio .news-esempio__f .cs-tessera__n,
.news-a--esempio .news-esempio__f .cs-tessera__eti,
.news-a--esempio .news-esempio__f .cs-tessera__n{ color: #26100C; -webkit-text-fill-color: #26100C; }
/* la scheda di esempio si riconosce anche dal bordo: tratteggiato, non pieno come le vere */
.card--esempio{ outline-style: dashed; outline-width: 2px; outline-color: rgba(38, 16, 12, .42); }
.card--esempio .t-card, .news-a--esempio .news-a__t{ color: #26100C; -webkit-text-fill-color: #26100C; }

.news-a__f{ margin: 16px 0; max-width: 700px; }
.news-a__f img{ display: block; width: 100%; height: auto; }
.news-a--esempio .news-a__f{ max-width: 420px; }
@media (max-width: 900px){
  .news-esempio__f .cs-tessera__eti{ font-size: 11px; letter-spacing: .02em; }
  .news-esempio__f .cs-tessera__n{ font-size: 9px; }
}

.ev-partner{ margin: 30px 0 4px; }
.ev-partner__loghi{ display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; }
.ev-partner__loghi .partner__c{
  width: 170px; height: 70px; display: flex; align-items: center; justify-content: center;
}
.ev-partner__loghi .partner__c a{
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
}
.ev-partner__loghi .partner__c img{
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
}
@media (max-width: 560px){
  .ev-partner__loghi .partner__c{ width: 140px; height: 58px; }
}

.foto-manca{
  display: grid; place-content: center; align-content: center; gap: 4px;
  box-sizing: border-box; width: 100%; padding: 10px; text-align: center;
  background-color: #FFF1EC;
  background-image: repeating-linear-gradient(45deg,
      rgba(20, 33, 43, .05) 0 8px, rgba(20, 33, 43, 0) 8px 16px);
  border: 2px dashed rgba(38, 16, 12, .42); border-radius: inherit;
}
.cs-tessera.cs-tessera--esempio.foto-manca .cs-tessera__eti,
.cs-tessera.cs-tessera--esempio.foto-manca .cs-tessera__n{ color: #26100C; -webkit-text-fill-color: #26100C; }
/* nella card: `.foto` è il riquadro quadrato (aspect-ratio della base), il segnaposto lo riempie */
.foto--manca{ background-image: none; outline: 0; }
.foto--manca > .foto-manca{ position: absolute; inset: 0; height: 100%; }
/* nella scheda del Grano: le proporzioni delle foto vere del Moscato (1200×800) */
.grano__testata--manca .foto-manca{ aspect-ratio: 3 / 2; border-radius: 10px; }
.grano__foto--manca .foto-manca{ aspect-ratio: 3 / 2; border-radius: 10px; }
.grano__testata--manca .foto-manca .cs-tessera__eti{ font-size: 18px; }
/* la news VERA senza copertina: il riquadro delle news di esempio, con il testo a quattro classi */
.card.art .news-esempio__f .cs-tessera__eti,
.card.art .news-esempio__f .cs-tessera__n,
.news-a .news-a__f--manca .news-esempio__f .cs-tessera__eti,
.news-a .news-a__f--manca .news-esempio__f .cs-tessera__n{ color: #26100C; -webkit-text-fill-color: #26100C; }
.news-a__f--manca{ max-width: 420px; }
/* la fila di esempio di un luogo: tessere ferme, non bottoni */
span.cs-galleria__t{ cursor: default; }
@media (max-width: 900px){
  .grano__testata--manca .foto-manca .cs-tessera__eti{ font-size: 13px; }
}

@media (min-width: 901px){ .mappa__locali .mappa__locale{ min-height: 0; } }

.banner:hover .banner__fondo{ transform: scale(1.02); }

.riga-att__mosc{ display: block; margin-top: 4px; font: 500 13px/1.35 "Montserrat", system-ui, sans-serif; color: var(--tenue); text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
.scheda__moscato{ margin: 8px 0 0; font: 500 15px/1.4 "Montserrat", system-ui, sans-serif; color: var(--tenue); overflow-wrap: anywhere; }
.mappa__lato ul.mappa__locali--mosc li{ position: relative; padding-left: 17px; }
/* ── 22/09/2026 · UNA MISURA SOLA PER TUTTI I PUNTINI (scatto del capo delle 14:10) ──────────
   Nell'elenco accanto alla mappa convivevano due punti elenco di misura diversa: 9 px rosso sui
   19 del progetto Moscato, 6 px inchiostro su tutti gli altri (giro g38, 19/09). A schermo la
   lista sembrava sbagliata, non segnata. Il segno del Moscato NON si perde: resta il COLORE, che
   e' quello che la legenda sopra l'elenco spiega. Il puntino del Moscato scende quindi a 6 px e
   prende lo stesso posto del semplice (left 1,5 · top 9,5 · 17,5 a telefono): stesso centro, uno
   scarto di 0,00 px fra i due. Nella legenda il puntino resta centrato sulla riga di testo
   (13px/1,35 = 17,55 px di riga → (17,55−6)/2 = 5,8). Prova: strumenti/prova-pallini2209.mjs */
/* ── 22/09/2026, 14:3x · SECONDO ordine del capo: «devi farmeli tutti nello stesso modo» ─────────
   Un'ora prima i puntini erano stati portati tutti a 6 px tenendo il ROSSO sui 19 del progetto
   Moscato. Guardato a schermo, il capo ha chiesto che siano identici: nell'elenco della home il
   segno del Moscato non si vede piu'.
   ⚠️ COSA SI PERDE E DOVE RESTA: sparisce solo la scorciatoia in home. La frase «Aderisce al
      progetto Uva Moscato di Terracina - Patrimonio Vivo» resta dove il cliente l'aveva chiesta
      (riunione 17/09, min 3:14-4:51): sotto il nome nell'elenco di /bere-e-mangiare
      (`.riga-att__mosc`) e nella scheda del luogo (`.scheda__moscato`). Qui in home resta anche
      per chi usa un LETTORE DI SCHERMO, nel testo nascosto `span.mappa__mosc-t`.
   ⚠️ NIENTE E' STATO CANCELLATO: il plugin, il JavaScript e la spunta nella scheda del luogo sono
      intatti. Per rimettere il segno rosso bastano queste due righe: il colore torna `--vino` e la
      legenda torna `display:flex`. Prova: strumenti/prova-pallini2209.mjs
   Il colore e' scritto con la stessa dichiarazione del puntino semplice (`gastronomica-pagine.css`,
   `li::before`), non con un valore copiato: cosi' restano identici anche se la variabile cambia. */
.mappa__lato span.mappa__mosc{ flex: none; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--inchiostro, #14212B); }
.mappa__lato ul.mappa__locali--mosc li > span.mappa__mosc{ position: absolute; left: 1.5px; top: 9.5px; }
@media (max-width: 900px){ .mappa__lato ul.mappa__locali--mosc li > span.mappa__mosc{ top: 17.5px; } }
#mappa .mappa__lato span.mappa__mosc-legenda > span.mappa__mosc{ margin-top: 5.8px; }
.mappa__lato span.mappa__mosc-t{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#mappa .mappa__lato span.mappa__mosc-legenda{ display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 10px; font: 500 13px/1.35 "Montserrat", system-ui, sans-serif; color: var(--inchiostro, #14212B); }
/* 22/09/2026 · la legenda se ne va con il segno rosso: senza una differenza di colore da spiegare
   direbbe una cosa che a schermo non si vede piu'. Era gia' `aria-hidden`, quindi i lettori di
   schermo non perdono niente. Riaccenderla: togliere questa riga. */
#mappa .mappa__lato span.mappa__mosc-legenda{ display: none; }

.serv.serv--mangiare{ background: #F5D3B7 !important; color: var(--chip-testo, #603A22) !important; }
.serv.serv--comprare{ background: #F0BD94 !important; color: var(--chip-testo, #603A22) !important; }
.serv.serv--entrambi{ background: #EBA770 !important; color: var(--chip-testo, #603A22) !important; }

#mappa .mappa__lato p.mappa__locali-t{ color: var(--chip-testo, #603A22); -webkit-text-fill-color: var(--chip-testo, #603A22); }

body.pag-bere-e-mangiare .elenco-att{
  display: grid; gap: 8px; padding: 8px; border: 0; border-radius: 16px;
  background: var(--carta-calda, #FFEDE1);
}
body.pag-bere-e-mangiare .elenco-att .riga-att{
  --riga-pad: 24px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) 232px 24px; column-gap: 24px; row-gap: 0;
  align-items: center; padding: 18px var(--riga-pad); border: 0; border-radius: 10px;
  background: var(--carta, #FFFFFF); min-height: 76px; box-sizing: border-box;
}
body.pag-bere-e-mangiare .elenco-att .riga-att:hover{ padding-left: var(--riga-pad); }
body.pag-bere-e-mangiare .elenco-att .riga-att:hover .riga-att__n{ color: var(--vino, #C4400F); }
body.pag-bere-e-mangiare .elenco-att .riga-att__n{ overflow-wrap: anywhere; }
body.pag-bere-e-mangiare .elenco-att .riga-att__c{ line-height: 1.45; overflow-wrap: anywhere; }
body.pag-bere-e-mangiare .elenco-att .riga-att__s{ display: block; justify-self: start; min-width: 0; }
body.pag-bere-e-mangiare .elenco-att .riga-att__s .serv{ margin: 0; }
body.pag-bere-e-mangiare .elenco-att .riga-att__v{ display: block; justify-self: end; line-height: 1; }
@media (max-width: 820px){
  body.pag-bere-e-mangiare .elenco-att{ gap: 6px; padding: 6px; border-radius: 12px; }
  body.pag-bere-e-mangiare .elenco-att .riga-att{
    --riga-pad: 16px;
    grid-template-columns: minmax(0, 1fr) 24px; column-gap: 12px; row-gap: 0;
    padding: 16px var(--riga-pad); min-height: 0;
  }
  body.pag-bere-e-mangiare .elenco-att .riga-att > *{ grid-column: 1; }
  body.pag-bere-e-mangiare .elenco-att .riga-att > .riga-att__v{ grid-column: 2; grid-row: 1 / span 3; align-self: center; display: block; }
  body.pag-bere-e-mangiare .elenco-att .riga-att__c{ margin-top: 6px; }
  body.pag-bere-e-mangiare .elenco-att .riga-att__s{ margin-top: 10px; }
  body.pag-bere-e-mangiare .elenco-att .riga-att__c:empty,
  body.pag-bere-e-mangiare .elenco-att .riga-att__s:empty{ display: none; }
}

section.newsletter .nl-esito--no{ color: #A32410; -webkit-text-fill-color: #A32410; }
section.newsletter .nl-esito--ok{ color: #1F6B4F; -webkit-text-fill-color: #1F6B4F; }
#newsletter{ scroll-margin-top: 90px; }

.modulo-dati > label.spunta{
  min-height: 0; padding: 11px 0;
}
.modulo-dati > label.spunta + label.spunta,
.modulo-dati > label.spunta + .gastro-antispam{ margin-top: -15px; }
.modulo-dati > label.spunta + .gastro-antispam{ margin-bottom: 0; }
.modulo-dati:has(> label.spunta) > .gastro-antispam .gastro-antispam__riga{
  min-height: 0; padding: 11px 0;
  font: 400 15px/1.35 "Montserrat", sans-serif;
  letter-spacing: 0; text-transform: none; color: var(--inchiostro);
}
.ades__f > label.ades__spunta{ min-height: 0; padding: 11px 0 10px; }
.ades__f > label.ades__spunta + label.ades__spunta,
.ades__f:has(> label.ades__spunta) > .gastro-antispam{ margin-top: -14px; }
.ades--scheda .ades__f > label.ades__spunta + label.ades__spunta,
.ades--scheda .ades__f:has(> label.ades__spunta) > .gastro-antispam{ margin-top: -12px; }
.ades__f:has(> label.ades__spunta) > .gastro-antispam{ margin-bottom: 0; }
.ades__f:has(> label.ades__spunta) > .gastro-antispam .gastro-antispam__riga{
  min-height: 0; padding: 11px 0;
  font: 400 15px/1.45 "Montserrat", sans-serif; color: var(--inchiostro, #603A22);
}
.ades--scheda .ades__f:has(> label.ades__spunta) > .gastro-antispam .gastro-antispam__riga{ font-size: 14px; }
/* Piè: «Non sono un robot» era 17 px sulle pagine della pila «pagine» (home, /manifesto, /news…)
   e 13 px su quelle della pila «percorso» (/passaporto, /calendario, /diventa-partner…), perché
   eredita il corpo del piè, diverso fra le due pile. Si fissa a 14 px / 1.55: è la misura della
   frase accanto («Ti scriviamo quando un evento apre le prenotazioni», `.pie__nl p`), l'unico testo
   del blocco newsletter uguale su tutte le pagine. L'area resta 44 (min-height della riga). */
.pie__nl-f .gastro-antispam__riga{ font: 400 14px/1.55 "Montserrat", sans-serif; }

@media (min-width: 1101px){   /* stesso selettore della regola delle tre soglie (sopra, «footer.pie .griglia.g5»): viene dopo e vince */
  footer.pie .griglia.g5{ grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(min-content, 1fr); }
}
.modulo-dati > p#ricorda-spiega + .gastro-antispam{ margin-top: -15px; }

/* ── Finestre strette (fino a 374 px): niente scorrimento di lato, titoli dentro la scheda ── */
@media (max-width: 1100px){
  .due-colonne{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px){
  .fascia-meta{ grid-template-columns: minmax(0, 1fr); }
}
.fascia-meta .t-blocco{ font-size: min(var(--t-h2, 32px), calc((100vw - 48px) / 9.2)); }
.ades--scheda .ades__dice .ades__titolo{ font-size: min(var(--t-h2, 32px), calc((100vw - 80px) / 9.2)); }
@media (max-width: 374px){
  .topbar__in > .topbar__date{ white-space: normal; }
  .riga-ev:has(.riga-ev__f){ grid-template-areas: "f d t" "f d m" "f b b"; }
}

/* ── Telefono: testata su una riga, pillola della riga evento, data della barra ── */
@media (max-width: 820px){
  .riga-ev:has(.riga-ev__f) .btn{ padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 374px){
  .testata .marchio img{ width: clamp(90px, calc(100vw - 226px), 125px); height: auto; }
  .topbar__in > .topbar__date{ text-wrap: balance; }
}

/* ── g15 · finestre strette: pulsante della riga evento più vicino al luogo, testo dei pulsanti centrato quando va a capo ── */
@media (max-width: 374px){
  .riga-ev:has(.riga-ev__f) .btn{ margin-top: 0; }
}
.btn{ text-align: center; }   /* a tutte le larghezze: su un pulsante a una riga non cambia niente (il flex centra già) */

/* ── g17 · home, apertura: i due pulsanti impilati hanno la stessa larghezza (sulla stessa riga non cambia niente) ── */
.hero__cta{ width: fit-content; }
.hero__cta > .btn{ flex: 1 1 auto; }

/* ── g18 · home, apertura: il filo bianco di «Attiva il Passaporto» sul bordo come il giallo; fino a 374 px pulsante e riga in cima su una riga ── */
.hero__cta > .btn--filo{ border-color: currentColor; }
.hero__cta > .btn--filo:not(:focus-visible){ box-shadow: none; }
@media (max-width: 374px){
  .hero__cta > .btn{ padding-left: 20px; padding-right: 20px; }
  .hero__riga span{ letter-spacing: .06em; }
}
/* il titolo comincia sotto il pesce: la riga in cima tiene l'altezza del pesce (testo in fondo, attaccato al titolo) */
@media (max-width: 620px){
  .hero__riga{ min-height: calc(min(40vw, 165px) * 555 / 700 - 22px); align-content: flex-end; }
}
@media (min-width: 621px) and (max-width: 899px) and (max-height: 760px){
  .hero{ height: auto; min-height: max(78vh, 520px); }
  .hero__riga{ min-height: calc(min(40vw, 165px) * 555 / 700 + 14px); align-content: flex-end; }
}

/* ── g19 · colori chiesti dal capo il 18/09 pomeriggio: scritte bianche sulle fasce colorate, citazione di un colore solo ── */
body .banda--festival .occhio{ color: #FFFFFF; }
body .banda--bere{ --su-banda: #FFFFFF; }
body .ptc-apertura h1, body .ptc-apertura .ptc-claim, body .ptc-apertura .ptc-testo, body .ptc-apertura .ptc-nota{ color: #FFFFFF; }
body .banner .occhiello{ color: #FFFFFF; }
body.pag-manifesto .corpo > p.citazione{ border-left-color: #7B1E4B; }

/* ── g25 · /calendario: le colonne di tutti i giorni sulla stessa linea (ordine del capo 18/09); sotto i 721 px restano le schede ── */
@media (min-width: 721px){ body.pag-percorso-calendario table.turni{ table-layout: fixed; width: 100%; } body.pag-percorso-calendario table.turni th:nth-child(1){ width: 15%; } body.pag-percorso-calendario table.turni th:nth-child(3){ width: 17%; } body.pag-percorso-calendario table.turni th:nth-child(4){ width: 12%; } body.pag-percorso-calendario table.turni th:nth-child(5){ width: 190px; } body.pag-percorso-calendario table.turni td:nth-child(4){ white-space: nowrap; } }
@media (min-width: 900px) and (max-width: 1099px){ body.pag-percorso-calendario table.turni th:nth-child(4){ width: 112px; } }
@media (min-width: 721px) and (max-width: 899px){ body.pag-percorso-calendario table.turni th:nth-child(1){ width: 14%; } body.pag-percorso-calendario table.turni th:nth-child(3){ width: 112px; } body.pag-percorso-calendario table.turni th:nth-child(4){ width: 112px; } body.pag-percorso-calendario table.turni th:nth-child(5){ width: 150px; } }

/* ══════════════════════════════════════════════════════════════════════════
   perc2209 · I QUATTRO PERCORSI DEL FESTIVAL — giro C, 22/09/2026
   Badge, card della home, pagina «I Percorsi». SOLO vestito: il markup e le
   classi li mettono i giri A e B (plugin).

   ⚠️ PERCHÉ QUI E NON NEI FOGLI GROSSI: `gastronomica-base.css`,
      `gastronomica-pagine.css` e `gastronomica-percorso.css` li RIGENERA
      `tema/costruisci-asset.sh` (sono nel registro `tema/costruisci-asset.md5`):
      una regola scritta lì sparirebbe in silenzio al primo rimontaggio.
      `rifiniture.css` è a mano, è l'ULTIMO <link> (functions.php, SLOT 8) e si
      carica su OGNI pagina, comprese le rotte del plugin (calendario, evento).

   ⚠️ IL NOME: nel tema «percorso» era già preso e vuol dire un'altra cosa —
      la pila CSS di /grani/<slug> (`gastronomica-percorso.css`) e il percorso di
      PRENOTAZIONE (`body.pag-percorso-calendario`, `body.pag-percorso-passaporto`).
      Qui `.percorso-badge` / `.percorsi-anteprima` / `.pagina-percorsi` sono i
      Percorsi editoriali del festival: nomi diversi, nessuna collisione di
      selettore (verificato a comando sui CSS del tema).

   🎨 I quattro colori sono quelli del cliente (doc 02 §6), non nostri.
      Contrasti CALCOLATI (WCAG 2.1), non stimati — li ristampa a ogni giro
      `strumenti/prova-perc2209c.mjs`:
        Gusto              #A8432B  bianco      6,00:1  ✓
        Corpo Mente Natura #6C7B38  bianco      4,64:1  ✓ (O2-C 24/09: era #6F7F3A a 4,40:1)
        Cultura e Racconti #243A5E  bianco     11,40:1  ✓
        Sapere in Azione   #C28A2E  inchiostro  6,00:1  ✓ (col bianco sarebbe 3,01: illeggibile)
      Su Corpo Mente Natura il bianco è il MIGLIORE dei due possibili
      (inchiostro 4,11): non si arriva a 4,50 senza scurire il colore.
      O2-C, 24/09/2026, su ordine del dirigente (V1.0 §10, r.317-318 e r.331-342):
      scurito di 0,015 in luminosità HSL, stessa tinta (73,9°) e stessa saturazione
      (0,373): #6F7F3A → #6C7B38, 4,40 → 4,64:1 col bianco. Cambiato in TUTTE le
      righe di questo foglio che lo portano (strumenti/prova-o2-C.php, D1-D2).
      rl4 (24/09/2026): i valori qui sopra sono la SERIE, scritta solo in
      inc/evento.php (gastro_percorsi_colori_serie); lo staff li cambia dal
      pannello (Eventi → Percorsi). passaporto.css non porta più #6F7F3A.
   ═════════════════════════════════════════════════════════════════════════ */

/* --- 1 · il badge: è un `.tag` in più, stessa geometria (base.css:320) --- */
.percorso-badge{
  display:inline-flex; align-items:center; max-width:100%;
  padding:5px 9px; border-radius:0;
  font:800 11px/1.25 "Montserrat",-apple-system,sans-serif;
  text-transform:uppercase; letter-spacing:.09em;
  background:var(--perc-colore,#8A5A46);
  color:var(--perc-testo,#fff);
  text-decoration:none; overflow-wrap:anywhere;
  /* il filetto: su fondo chiaro l'ocra di Sapere in Azione sta a 2,69:1 dalla
     carta e si scioglierebbe. Uguale per tutti e quattro: il set deve sembrare
     progettato insieme (doc 02 §6), non rattoppato sul caso storto. */
  box-shadow:inset 0 0 0 1px rgba(38,16,12,.22);
}
/* su fondo scuro il filetto si gira: il blu notte di Cultura e Racconti sta a
   1,60:1 dalla brace e come forma sparirebbe (il testo dentro resta a 11,40). */
.scura .percorso-badge,
.apertura .percorso-badge{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.55); }

/* --- 2 · i quattro accenti. Da rl4 (24/09/2026) il colore NON sta più qui:
       lo stampa il plugin (inc/evento.php, <style id="gastro-percorsi-colori">
       in wp_head) dal campo «Colore del percorso» di Eventi → Percorsi, con
       la serie scritta solo nel codice. Stessi selettori di prima, :has()
       compresi (la card e il blocco lo prendono dal badge che contengono);
       il colore del testo sopra lo calcola il plugin dal contrasto (4,5:1).
       Qui restano solo i fallback: var(--perc-colore,#8A5A46). ------------ */

/* --- 3 · IL COLORE NON È MAI L'UNICO SEGNALE (doc 02 §6) -----------------
   Il nome sta nel markup. Ma se un badge arriva vuoto — un evento senza
   percorso, un campo non compilato — non deve restare un rettangolo colorato
   muto: il nome lo scrive il foglio. `:empty` scatta solo quando non c'è
   proprio niente dentro, quindi non raddoppia mai un nome già scritto.        */
.percorso-badge--gusto:empty::after{ content:"Gusto"; }
.percorso-badge--corpo-mente-natura:empty::after{ content:"Corpo, Mente e Natura"; }
.percorso-badge--cultura-racconti:empty::after{ content:"Cultura e Racconti"; }
.percorso-badge--sapere-in-azione:empty::after{ content:"Sapere in Azione"; }

/* --- 4 · le quattro card in home ----------------------------------------
   La griglia si accende sul genitore DIRETTO delle card, qualunque sia la sua
   classe: così il giro B non deve concordare un nome in più.                  */
.percorsi-anteprima :has(> .percorsi-anteprima__card),
.percorsi-anteprima:has(> .percorsi-anteprima__card){
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.6vw,24px); align-items:stretch;
}
.percorsi-anteprima__card{
  display:flex; flex-direction:column; gap:12px; min-width:0;
  background:var(--superficie); outline:1px solid var(--riga); outline-offset:-1px;
  border-top:4px solid var(--perc-colore,#8A5A46);
  padding:clamp(18px,1.5vw,26px);
}
.percorsi-anteprima__card > *{ min-width:0; }
.percorsi-anteprima__card .percorso-badge{ align-self:flex-start; }
.percorsi-anteprima__claim{ margin:0; font-size:16px; line-height:1.45; color:var(--inchiostro); }
/* il collegamento resta in fondo anche se i microclaim hanno righe diverse */
.percorsi-anteprima__link{
  margin-top:auto; align-self:flex-start; font-weight:800; font-size:14px;
  text-transform:uppercase; letter-spacing:.06em; color:var(--vino);
  text-decoration:underline; text-underline-offset:4px;
}
.scura .percorsi-anteprima__claim{ color:#fff; }
.scura .percorsi-anteprima__link{ color:var(--accento); }
/* 1440 è il progetto; sotto, la griglia cede per gradi. Il telefono deve
   reggere, non comanda (design-dna, siti desktop-first). */
@media (max-width:1080px){
  .percorsi-anteprima :has(> .percorsi-anteprima__card),
  .percorsi-anteprima:has(> .percorsi-anteprima__card){ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px){
  .percorsi-anteprima :has(> .percorsi-anteprima__card),
  .percorsi-anteprima:has(> .percorsi-anteprima__card){ grid-template-columns:minmax(0,1fr); }
}

/* --- 5 · la pagina «I Percorsi»: quattro blocchi in colonna -------------- */
.pagina-percorsi{ display:grid; gap:clamp(20px,2.4vw,40px); }
.pagina-percorsi__blocco{
  min-width:0; padding:clamp(20px,2vw,32px);
  background:var(--superficie); outline:1px solid var(--riga); outline-offset:-1px;
  border-left:6px solid var(--perc-colore,#8A5A46);
  display:flex; flex-direction:column; gap:12px; align-items:flex-start;
}
.pagina-percorsi__blocco h2{ font-size:clamp(24px,2.6vw,38px); color:var(--perc-colore,#8A5A46); }
.pagina-percorsi__blocco p{ margin:0; max-width:68ch; }
/* il titolo colorato su carta: Sapere in Azione #C28A2E su #FFEFE4 sta a
   2,69:1 e come TESTO non basta. Il titolo resta inchiostro, il colore lo
   porta il filetto a sinistra e il badge. */
.pagina-percorsi__blocco:has(.percorso-badge--sapere-in-azione) h2{ color:var(--inchiostro); }
.scura .pagina-percorsi__blocco h2{ color:#fff; }

/* --- 6 · la card VERA dei giri A e B: è tutta un <a> (letto sul markup
       servito il 22/09 alle 10:02). Due conseguenze da vestire:
       a) senza questa riga il tema sottolinea il microclaim e la card sembra
          un paragrafo con dentro un link, non una scheda cliccabile;
       b) la sottolineatura torna al passaggio del mouse e il fuoco da tastiera
          deve vedersi, perché il bersaglio è l'intera scheda.
       Loro mettono anche il modificatore sulla card (`…__card--gusto`): lo
       accetto come seconda strada, oltre al `:has()` del badge.            --- */
a.percorsi-anteprima__card{ text-decoration:none; color:inherit; }
@media (hover:hover) and (pointer:fine){
  a.percorsi-anteprima__card:hover .percorsi-anteprima__claim{ text-decoration:underline; text-underline-offset:4px; }
  a.percorsi-anteprima__card:hover{ outline-color:var(--perc-colore,#8A5A46); }
}
a.percorsi-anteprima__card:focus-visible{ outline:3px solid var(--azione); outline-offset:2px; }
.pagina-percorsi__blocco--sapere-in-azione h2{ color:var(--inchiostro); }

/* --- 7 · sulla pagina vera (/percorsi, 22/09 ore 10:10) il nome del percorso
       è un `<h2 class="pagina-percorsi__nome">` che contiene SOLO il badge:
       il badge È il titolo. Il tema dà agli h2 `margin:40px 0 16px`, che
       sommato al `gap:12px` del blocco apre un vuoto doppio in cima a ogni
       scheda. Si azzera il margine del primo figlio e si lascia lavorare il
       gap, che è uno solo e uguale per tutti.                              --- */
.pagina-percorsi__blocco > :first-child{ margin-top:0; }
.pagina-percorsi__nome{ margin:0; line-height:1; }
.pagina-percorsi__blocco > :last-child{ margin-bottom:0; }

/* ═══════════════════════════════════════════════════════════════════════════
 * perc2209g · 22/09/2026 — GLI SPAZI DEI PERCORSI (ordine del capo, con due
 * schermate: «aggiusta gli spazi»).
 *
 * Misurato a 1440 prima di toccare:
 *  · HOME, sotto le quattro card: 192 px di vuoto fino al fregio con la G
 *    (96 di coda alla sezione dei Percorsi + 96 di testa al Calendario). Le
 *    card sono alte 110: il blocco finisce e resta un buco più grande di loro.
 *  · /percorsi: 47 px fra il titolo e il sottotitolo, 66 fra il sottotitolo e
 *    il primo paragrafo, mentre fra un paragrafo e l'altro ce ne sono 16.
 *
 * ⛔ Non si tocca la misura comune delle sezioni (`.sezione`, 96/96): la usano
 *    tutte le altre e cambiarla vorrebbe dire rifare la home. Si accorcia solo
 *    la coda del blocco nuovo, e solo lui.
 * ═════════════════════════════════════════════════════════════════════════ */
.sezione.percorsi-anteprima { padding-bottom: 3rem; }           /* era 6rem = 96px */

/* ⚠️ Gli spazi in cima a /percorsi NON venivano dai margini: `.contenitore` è una
   GRIGLIA e la distanza fra i suoi figli la dà `row-gap: 2.16rem` (34,56 px),
   uguale per tutte le pagine. Aggiungere margini ci si sommava soltanto: la
   leva giusta è il passo della griglia, e si stringe solo su questa pagina. */
main.pagina-percorsi { row-gap: 1.25rem; }                      /* era 2.16rem = 34,56px */
.pagina-percorsi > h1 { margin-bottom: 0; }
.pagina-percorsi > .sottotitolo { margin-top: 0; margin-bottom: .5rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   NL — LOTTO `nl2209`, 22/09/2026. Le quattro richieste di Pamela (riunione 15:07).
   ⚠️ Questo file è scritto a mano e caricato per ULTIMO: `gastronomica-base.css`,
      `-pagine` e `-percorso` sono generati da `tema/costruisci-asset.sh` e non si
      toccano. Tutto quello che serve a questo lotto sta qui.
   ═════════════════════════════════════════════════════════════════════════ */

/* --- NL1 · l'invito a cliccare sulle 4 card dei Percorsi in home ----------
   Pamela: «su tutti e quattro i blocchi mettiamo clicca qui».
   È uno `<span>` dentro una card che è già tutta un `<a>` (mai un link dentro
   un link): quindi si veste come un invito, non come un collegamento a sé.
   `margin-top:auto` lo incolla in fondo alla card anche quando i quattro
   microclaim hanno un numero di righe diverso — le card sono `stretch` nella
   griglia e senza questo l'invito ballerebbe a quattro altezze.
   Il colore è `--vino`, lo stesso che il tema usa già per `.percorsi-anteprima__link`:
   nessuna tinta nuova. NON `--perc-colore`, che per «Sapere in Azione» è #C28A2E
   e su carta chiara sta a 2,69:1, cioè sotto ogni soglia. */
.percorsi-anteprima__invito{
  margin-top:auto; align-self:flex-start; padding-top:4px;
  font-weight:800; font-size:14px; line-height:1.3;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--vino);
  /* la freccia dice «si va da qualche parte» senza aggiungere una parola, ed è
     `::after` quindi non finisce in nessuna lettura: la card ha già il suo nome
     accessibile (il badge + il microclaim), e l'invito è `aria-hidden`. */
}
.percorsi-anteprima__invito::after{ content:" \2192"; }
.scura .percorsi-anteprima__invito{ color:var(--accento); }
@media (hover:hover) and (pointer:fine){
  a.percorsi-anteprima__card:hover .percorsi-anteprima__invito{
    text-decoration:underline; text-underline-offset:4px;
  }
}

/* --- NL2 · il Percorso si legge come Percorso, sulla scheda dell'evento ---
   Prima il badge stava in fila con FESTIVAL, LABORATORI BAMBINI, ACCESSIBILE e
   sembrava la quarta etichetta. Adesso è su una riga sua, con davanti la parola
   «Percorso» (dal pannello): stessa riga, due pesi diversi — la parolina è
   piccola e tenue, il nome del Percorso resta il riquadro colorato di sempre.
   ⛔ Il badge NON si ridipinge: `.percorso-badge` resta identico anche qui, in
      home e su /percorsi. Cambia solo dove sta e cosa ha davanti. */
.percorso-tag{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  margin:0 0 10px;
}
.percorso-tag__et{
  font-weight:700; font-size:12px; line-height:1.2;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--tenue);
}
.scura .percorso-tag__et{ color:rgba(255,255,255,.78); }

/* --- NL3 · la testata grafica di /percorsi e /calendario ------------------
   Le regole base di `.banda` stanno nel `<style>` in linea che `inc/teste.php`
   scrive per ogni pagina del TEMA. Queste due pagine sono rotte del plugin: non
   hanno quel foglio, e senza queste righe `class="banda"` non dipingerebbe
   niente. Il colore invece arriva già da `banda.css` (`body .banda--festival`:
   `--banda:#7B1E4B`, `--su-banda:#FFFFFF`, la mora scelta il 07/09).

   ⚠️ TUTTO È AGGANCIATO A `.banda--testata`, che è un modificatore che esiste
      SOLO su queste due pagine. Senza, `rifiniture.css` — caricato per ultimo —
      ridipingerebbe anche le sette pagine che la banda ce l'hanno già, e
      l'impronta salterebbe. Misurato: le 7 pagine modello restano identiche al
      byte dopo questo lotto.

   Le misure non sono inventate: sono le stesse dichiarazioni del foglio in
   linea delle pagine modello (`.banda`, `.banda .apre`, `.occhio`, `h1`,
   `.guida`), ricopiate qui perché lì non arrivano. Alto 383-528 px sulle pagine
   modello; qui viene 4xx, dentro quella forbice. */
.banda.banda--testata{
  background:var(--banda,#7B1E4B); color:var(--su-banda,#FFFFFF);
  padding-bottom:clamp(38px,4.6vw,62px);
}
.banda.banda--testata .apre{ padding-top:clamp(40px,4.6vw,64px); }
.banda.banda--testata .occhio,
.banda.banda--testata h1,
.banda.banda--testata .guida{ color:var(--su-banda,#FFFFFF); }
.banda.banda--testata .occhio{
  font:800 12px/1 "Montserrat",sans-serif; text-transform:uppercase;
  letter-spacing:.16em; margin:0 0 18px;
}
.banda.banda--testata h1{
  font:900 clamp(40px,6.4vw,96px)/.96 "Montserrat",sans-serif;
  text-transform:uppercase; letter-spacing:-.022em; margin:0; text-wrap:balance;
  -webkit-text-fill-color:var(--su-banda,#FFFFFF); -webkit-text-stroke:0;
}
.banda.banda--testata .guida{
  max-width:64ch; margin:24px 0 0; font-size:19px; line-height:1.55;
  text-wrap:pretty;
}
/* 🔴 Difetto visto NELLO SCATTO, non nel codice: il testo della fascia partiva
   38 px più a sinistra di quello della pagina sotto. `.wrap` (il contenitore
   delle pagine del tema) e `main.contenitore` (quello delle pagine del plugin)
   non hanno la stessa scatola: 1180 px con 32 px di lato il secondo, la
   variabile `--contenitore` il primo. Sulle pagine modello il disallineamento
   non c'è perché lì sopra e sotto sono tutti e due `.wrap`. Qui la fascia deve
   allinearsi a ciò che ha SOTTO, quindi prende la scatola di `.contenitore`.
   Le due misure (32 px, e 18 px sotto i 760) sono quelle che `.contenitore` ha
   già in `gastronomica-percorso.css`: copiate, non scelte. */
.banda.banda--testata > .wrap{
  max-width:1180px; padding-left:32px; padding-right:32px;
}
@media (max-width:760px){
  .banda.banda--testata > .wrap{ padding-left:18px; padding-right:18px; }
}
/* La banda è fuori da `<main>`, e `main.contenitore` porta già 40 px di stacco
   in alto: senza questo, fra la fascia e il primo testo ce ne sarebbero 40 e
   basta su /calendario, dove sotto comincia subito un `<h2>`. Si dà l'aria che
   hanno le pagine modello (`.corpo{padding-top:56px}`) senza toccare
   `.contenitore`, che è comune a tutto il sito. */
.banda.banda--testata + main.contenitore{ padding-top:56px; }
@media (max-width:760px){
  .banda.banda--testata + main.contenitore{ padding-top:32px; }
}

/* --- NL3-bis · lo stampo PIENO della testata — lotto `banda2209`, 22/09/2026 --
   Il giro `nl2209` aveva messo la fascia ma non l'aveva fatta come le altre:
   titolo su una riga sola e nessun bottone, 298 px contro i 383-528 di tutte le
   altre pagine interne. Qui c'è il vestito dei due pezzi che mancavano.
   ⚠️ Come sopra, tutto sotto `.banda--testata`: sulle 7 pagine modello queste
      regole arrivano dal `<style>` in linea di `inc/teste.php` e non vanno
      toccate. Le dichiarazioni sono le loro, copiate riga per riga. */

/* la seconda riga del titolo. Sulle pagine modello `h1 .filo` è `--vino`, ma
   DENTRO la banda diventa il colore del testo sulla banda: senza questa riga
   resterebbe vinaccia su mora, cioè illeggibile (`.banda h1 .filo` nel foglio
   in linea fa esattamente questo). `-webkit-text-fill-color` serve perché il
   tema altrove disegna quel testo in contorno: il colore vero è quello. */
.banda.banda--testata h1 .filo{
  color:var(--su-banda,#FFFFFF);
  -webkit-text-fill-color:var(--su-banda,#FFFFFF);
  -webkit-text-stroke:0;
}
/* 🔴 Difetto visto NELLO SCATTO a 390 px, non nel codice: «DI GASTRONOMICA.»
   usciva su TRE righe — «DI», «GASTRONOMICA» e il **punto da solo**, che a
   schermo sembrava un pallino perso in mezzo alla fascia.
   Causa misurata: il tema eredita `overflow-wrap: break-word`, e insieme a
   `text-wrap: balance` (che cerca righe di larghezza simile) il browser spezza
   **dentro** la parola anche quando non ce n'è bisogno — con `normal` la stessa
   parola sta in 336 px su 354 disponibili, cioè ci stava già.
   ⚠️ Vale solo per il titolone della testata, dove le parole sono poche e
      grandi. Rete di sicurezza contro una parola davvero lunga scritta dal
      pannello: il controllo «finestra stretta 390 px» del cancello, che gira su
      tutte e due le pagine. */
.banda.banda--testata h1{ overflow-wrap:normal; }
/* la riga dei bottoni. `flex` + `gap` invece dello spazio fra i due `<a>`: con
   due bottoni, a finestra stretta, vanno a capo invece di uscire dallo schermo. */
.banda.banda--testata .banda__b{
  display:flex; flex-wrap:wrap; gap:12px;
  margin:28px 0 0;
}
/* Il bottone giallo su una banda colorata non ha sagoma: il bordo gliela ridà.
   È la stessa regola del foglio in linea (`.banda .btn--azione`), e `banda.css`
   per `.banda--festival` mette già `--azione-bordo: var(--azione)`. */
.banda.banda--testata .btn--azione{ border:2px solid var(--azione-bordo,var(--azione)); }
/* Il bottone di contorno sulla banda: bordo e testo del colore del testo sopra
   la banda, non del testo di pagina (che qui sarebbe invisibile). */
.banda.banda--testata .btn--filo{
  border:2px solid var(--su-banda,#FFFFFF);
  color:var(--su-banda,#FFFFFF);
}
.banda.banda--testata .btn--filo span{ color:inherit; }

/* ═══════════════════════════════════════════════════════════════════════════
 * pagperc · 22/09/2026 — LE QUATTRO PAGINE DEI SINGOLI PERCORSI
 * `/percorso/gusto`, `/percorso/corpo-mente-natura`, `/percorso/cultura-racconti`,
 * `/percorso/sapere-in-azione`. Prima erano gusci vuoti serviti da `index.php`.
 *
 * Il markup lo scrive `gastro_pagina_percorso_singolo()` (plugin, `inc/pubblico.php`)
 * e riusa componenti che esistono già: `.banda--testata` (§NL3 e §NL3-bis qui sopra),
 * `.briciola` e `main.contenitore` (della pila «percorso»), `.testo-cliente`.
 * Qui sotto c'è SOLO ciò che quei componenti non coprono.
 * ═════════════════════════════════════════════════════════════════════════ */

/* --- 1 · il colore del Percorso, dalla stessa sorgente degli altri due posti.
       Le quattro coppie di valori stanno già scritte due volte più in alto
       (`.percorsi-anteprima__card--*` per le card in home e
       `.pagina-percorsi__blocco--*` per i blocchi di /percorsi). Non se ne fa
       una terza copia: si agganciano i nuovi selettori a quelle stesse righe.
       rl4 (24/09/2026): la sorgente è il campo del percorso nel pannello; il
       plugin stampa anche `.scheda-percorso--slug` nel blocco dei colori. */

/* --- 2 · 🔴 IL TITOLONE: misura scelta sul NOME PIÙ LUNGO, non sul più corto.
       Difetto visto dalla prova, non a occhio: a 1440 px la fascia di
       `/percorso/corpo-mente-natura` era alta **555 px**, cioè più alta di
       ogni altra pagina del sito (la più alta è /manifesto con 528, la più
       bassa /grani con 383). Causa misurata: «CORPO, MENTE E NATURA» a
       92,16 px non sta nei 1116 px del contenitore e va a capo, quindi il
       titolo occupa TRE righe invece di due (265 px contro 177).
       Sonda: alla stessa larghezza il nome sta su una riga sola da 81,16 px in
       giù. Il tetto del `clamp` passa da 96 a **80 px** — sotto la soglia, e
       tondo. Vale per tutte e quattro le pagine insieme, così le sorelle hanno
       lo stesso titolo e non è una regola scritta per una pagina sola.
       ⚠️ Sotto i ~1250 px il `clamp` era già governato dal `6.4vw` e questa
          riga non cambia niente: il difetto esisteva solo a finestra larga.  --- */
body.pag-percorso-scheda .banda.banda--testata h1{
  font-size:clamp(40px,6.4vw,80px);
}

/* --- 3 · il corpo. `main.contenitore` porta già larghezza e margini; qui
       servono solo la misura di riga leggibile (la stessa dei blocchi di
       /percorsi, 68ch) e il microclaim, che è l'ultima riga della pagina e
       deve leggersi come una chiusa, non come un altro paragrafo.           --- */
.scheda-percorso__testo{ max-width:68ch; }
.scheda-percorso__claim{
  max-width:68ch; margin:0;
  font-size:clamp(19px,1.5vw,23px); line-height:1.4;
  border-left:6px solid var(--perc-colore,#8A5A46);
  padding-left:clamp(14px,1.4vw,20px);
}
/* Il colore del Percorso come TESTO non regge su carta chiara: #C28A2E su
   #FFEFE4 sta a 2,69:1. È la stessa misura già pagata sui blocchi di /percorsi
   (§5 qui sopra): il colore lo porta il filetto a sinistra, il testo resta
   inchiostro. */
.scheda-percorso__claim strong{ color:inherit; }

/* audit 23/09/2026 (M9): `html.ha-cursore *{cursor:none}` (gastronomica-base.css) toglieva il cursore
   vero anche nei campi dei moduli: scrivendo l'email della newsletter non si vedeva la barretta. */
html.ha-cursore input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
html.ha-cursore textarea{ cursor:text; }
html.ha-cursore select{ cursor:auto; }

/* audit 23/09/2026 (Basso): su iPhone `100vh` è più alto dell'area visibile e una foto verticale finiva sotto i
   bottoni ‹ › della galleria a schermo intero. `100dvh` = l'area visibile vera; chi non lo conosce resta su 100vh. */
@supports (height: 100dvh){
  .cs-visione{ height: 100dvh; }
  .cs-visione__f img{ max-height: calc(100dvh - 128px); }
  @media (max-width: 560px){ .cs-visione__f img{ max-height: calc(100dvh - 112px); } }
}

/* 23/09/2026 (M23): occhiello e tag delle news; (A4) le date nel piè. */
.occhio__cat{ font-weight: 700; }
.news-a__tag{ list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.news-a__tag li{ font-size: .82rem; letter-spacing: .02em; padding: 4px 12px; border: 1px solid currentColor; border-radius: 999px; opacity: .8; }
.pie__date{ font-weight: 700; }

/* O2-C, 24/09/2026 · home, blocco Passaporto: i claim della V1.0 §11.1 (r.351-354) sotto il paragrafo.
   Un elenco senza punti, con il filetto a sinistra nel colore del testo del blocco (bianco sulla melagrana). */
.pass__claim{ list-style:none; margin:18px 0 0; padding:0 0 0 14px; border-left:3px solid currentColor; max-width:62ch; display:flex; flex-direction:column; gap:6px; }
.pass__claim li{ margin:0; font-weight:600; line-height:1.4; }

/* ═══ §AND · lotto andrea2609, 27/09/2026 (richieste di Andrea del 26/09) ═══════════════════════════════
   Nessun colore nuovo: il riquadro è lo stesso riquadro chiaro del Passaporto (`scheda-passaporto.css:10-18`,
   `.scheda-pass`), ripetuto qui perché quel foglio si carica solo su scheda evento e calendario. */
/* A1 · «Dove si svolge», sotto titolo e sottotitolo della scheda evento. */
.ev-luogo,
.ev-partner--evidenza{
  margin: 0 0 clamp(18px, 2vw, 26px);
  padding: 14px clamp(14px, 1.6vw, 20px);
  background: var(--superficie, #fff);
  outline: 1px solid var(--riga, #e5d6c8); outline-offset: -1px;
  border-left: 6px solid var(--riga, #e5d6c8);
  max-width: 760px;
}
.ev-luogo{ display: flex; flex-direction: column; gap: 4px; }
.ev-luogo p{ margin: 0; }
.ev-luogo__et{ font: 800 12px/1.2 "Montserrat", sans-serif; letter-spacing: .10em; text-transform: uppercase; color: var(--vino); }
.ev-luogo__nome{ font: 800 clamp(19px, 1.8vw, 22px)/1.25 "Montserrat", sans-serif; color: var(--inchiostro); text-wrap: balance; }
.ev-luogo__ind{ font-size: 15px; color: var(--inchiostro); }
.ev-luogo__mappa{ margin-top: 6px !important; }
.ev-luogo__mappa a{ display: inline-flex; align-items: center; min-height: 44px; }
/* A3-A6 · «Evento in collaborazione con:», subito dopo la descrizione (prima stava in fondo: .ev-partner qui sopra). */
.ev-partner.ev-partner--evidenza{ margin-top: 0; }
.ev-partner--evidenza h2{ margin: 0 0 12px; font-size: clamp(15px, 1.4vw, 18px); color: var(--vino); }
/* un partner SENZA logo è il nome scritto: la casella fissa dei loghi (70/58 px) lo farebbe uscire dai bordi
   con un nome lungo (visto a 390 col partner di prova): cresce in altezza, la larghezza resta quella dei loghi. */
.ev-partner--evidenza .partner__c:has(.partner__nome){ height: auto; min-height: 58px; }
.ev-partner--evidenza .partner__nome{ font-weight: 700; color: var(--inchiostro); text-align: center; line-height: 1.25; }
.ev-partner--evidenza .partner__c a{ text-decoration: none; }
/* andrea2609c, 27/09 · i loghi dei LUOGHI nel riquadro sono quasi tutti JPG con fondo bianco (dati del cliente): `multiply`
   fonde il bianco col crema del riquadro. SOLO i luoghi (`.partner__c--luogo`): i PNG trasparenti dei partner non la
   prendono. Un logo su fondo pieno (Casa Sillana rosso, Quelli della Pasta nero) resta un riquadro suo: multiply su un
   colore pieno lascia il colore com'è (il crema quasi bianco lo scurisce appena). */
.ev-partner--evidenza .partner__c--luogo img{ mix-blend-mode: multiply; }
/* A5 · la scheda del partner, /partner/<slug>. */
.pt-scheda__logo{ margin: 0 0 18px; }
/* il filetto grigio delle FOTO (outline 1px sulle img) non va su un logo: su /partner i loghi non ce l'hanno */
.pt-scheda__apre .pt-scheda__logo img{ outline: 0; }
.pt-scheda__logo img{ display: block; max-height: 140px; max-width: min(320px, 80vw); width: auto; height: auto; object-fit: contain; }
.pt-scheda{ max-width: 760px; display: flex; flex-direction: column; gap: 28px; padding-bottom: clamp(40px, 5vw, 72px); }
.pt-scheda__sez .pt-scheda__t{ font: 800 13px/1.2 "Montserrat", sans-serif; letter-spacing: .10em; text-transform: uppercase; color: var(--vino); margin: 0 0 10px; }
.pt-scheda__sez p{ margin: 0; font-size: 16px; line-height: 1.6; max-width: 62ch; }
.pt-scheda__contatti{ margin: 0; display: grid; gap: 10px; }
.pt-scheda__contatti > div{ display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.pt-scheda__contatti dt{ font-weight: 700; font-size: 14px; }
.pt-scheda__contatti dd{ margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px){
  .pt-scheda__contatti > div{ grid-template-columns: 1fr; gap: 2px; }
}

/* andrea2609d, 27/09 · /produttori: il logo ACCANTO al nome, altezza fissa, in linea (non rompe la riga); il nome resta
   leggibile. I JPG a fondo bianco si fondono col fondo della pagina (`multiply`), come i loghi dei luoghi.
   Una classe sola, `logo-riga`, per produttori (/produttori) e locali (/bere-e-mangiare): stessa funzione, stessa misura. */
/* 40 px (dirigente 27/09, dalle tavole: a 32 i loghi quadrati non si leggevano), anche al telefono. */
img.logo-riga{ display: inline-block; height: 40px; width: auto; max-width: 120px; object-fit: contain;
  vertical-align: middle; margin: 0 12px 0 0; outline: 0; }
img.logo-riga--jpg{ mix-blend-mode: multiply; }
@media (max-width: 700px){ img.logo-riga{ height: 40px; max-width: 110px; margin-right: 10px; } }

/* ═══ prod2809 (28/09/2026) · /produttori ORDINATO COME /bere-e-mangiare ════════════════════════════════════
   Capo: «in questa pagina qui ci sono un miscuglio di scritte, rendilo piu ordinato come hai fatto on bere e mangiare».
   Solo CSS, nessuna parola né collegamento cambiato: la riga di `gastro_prod_riga()` (blocchi.php) resta identica.
   Stesso disegno delle righe di /bere-e-mangiare (sopra, `.elenco-att .riga-att`): fondo caldo, righe bianche,
   tre colonne = nome (col logo) · indirizzo e telefono · comune in pastiglia. Sotto 820 px una colonna sola.
   Tornare indietro: togliere questo blocco (copia `rifiniture.css.prima-prod2809`). */
body.pag-produttori .plista{
  display: grid; gap: 8px; padding: 8px; margin: 0; list-style: none; border: 0; border-radius: 16px;
  background: var(--carta-calda, #FFEDE1);
}
body.pag-produttori .plista li{
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.55fr) 170px; column-gap: 24px; row-gap: 4px;
  align-items: center; padding: 18px 24px; margin: 0; border: 0; border-radius: 10px;
  background: var(--carta, #FFFFFF); min-height: 76px; box-sizing: border-box;
}
body.pag-produttori .plista li > b{
  grid-column: 1; grid-row: 1; display: flex; align-items: center; flex-wrap: nowrap;
  font: 900 19px/1.2 "Montserrat", system-ui, sans-serif; overflow-wrap: anywhere; min-width: 0;
}
body.pag-produttori .plista li > b a{ color: inherit; text-decoration: none; }
body.pag-produttori .plista li > b a:hover,
body.pag-produttori .plista li > b a:focus-visible{ color: var(--vino, #C4400F); text-decoration: underline; text-decoration-thickness: 2px; }
body.pag-produttori .plista li > span:not([class]){
  grid-column: 3; grid-row: 1; justify-self: start; align-self: center;
  padding: 4px 10px; border-radius: 999px; background: #F5D3B7; color: var(--chip-testo, #603A22);
  font: 700 13px/1.3 "Montserrat", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .02em;
}
body.pag-produttori .plista li > span:not([class]):empty{ display: none; }
body.pag-produttori .plista li > .plista__c{
  grid-column: 2; grid-row: 1 / span 2; font: 400 15px/1.45 "Montserrat", system-ui, sans-serif;
  color: var(--tenue, #8A5A46); text-transform: none; letter-spacing: 0; overflow-wrap: anywhere;
}
body.pag-produttori .plista li > .plista__c a{ color: inherit; }
body.pag-produttori .plista li > .plista__c a[href^="tel:"]{ white-space: nowrap; }
body.pag-produttori .plista li > b img.logo-riga{ flex: 0 0 auto; }
body.pag-produttori .plista li > .plista__d{
  grid-column: 1; font: 500 13px/1.35 "Montserrat", system-ui, sans-serif;
  color: var(--tenue, #8A5A46); text-transform: none; letter-spacing: 0; overflow-wrap: anywhere;
}
body.pag-produttori .plista li > .plista__foto{ grid-column: 1; }
@media (max-width: 820px){
  body.pag-produttori .plista{ gap: 6px; padding: 6px; border-radius: 12px; }
  body.pag-produttori .plista li{ grid-template-columns: minmax(0, 1fr); padding: 16px; min-height: 0; row-gap: 8px; }
  body.pag-produttori .plista li > *{ grid-column: 1 !important; grid-row: auto !important; }
  body.pag-produttori .plista li > b{ font-size: 17px; }
}

/* ══ avv2809 · 28/09/2026 · L'AVVISO SUL PROGRAMMA («Il programma è in fase di sviluppo») ══════════════
   Lo stampa il plugin in home, nella sezione #calendario sotto il titolo,
   e su /calendario in testa all'elenco. Si accende da Eventi → Avviso sul programma.
   Solo colori già del sito: carta calda di fondo, filetto --accento-l (accento su chiaro), testo inchiostro/tenue. */
.avv2809{
  margin: 0 0 32px; padding: 28px 32px; border-radius: 16px;
  background: var(--carta-calda, #FFF1EC); border-left: 6px solid var(--accento-l, #FF5824);
  color: var(--inchiostro, #14212B);
}
.contenitore > .avv2809{ margin-top: 32px; }
.avv2809__t{ margin: 0; font: 900 clamp(22px, 3vw, 34px)/1.15 "Montserrat", system-ui, sans-serif; color: inherit; overflow-wrap: anywhere; }
.avv2809__r{ margin: 10px 0 0; max-width: 70ch; font: 500 17px/1.5 "Montserrat", system-ui, sans-serif; color: var(--tenue, #5C6B75); overflow-wrap: anywhere; }
@media (max-width: 820px){
  .avv2809{ padding: 20px 20px 22px; margin-bottom: 24px; border-radius: 12px; }
  .contenitore > .avv2809{ margin-top: 24px; }
  .avv2809__r{ font-size: 16px; }
}

/* ══ r0310e · 03/10/2026 · TESTATA DELLA HOME, VARIANTE B «Torna il titolo» ══════════════════════════
   Scelta del capo il 03/10 alle 18:3x («per la testata scelgo la b»), su Andrea delle 11:52: «c'è tutto
   un campo di texture enorme, testo piccolo, non ha senso occupare tutto quello spazio in altezza».
   Causa (ANALISI-3-testata.md): l'apertura era alta 78vh per un titolo da 92 px tolto il 04/09, e il
   testo rimasto (13-18 px) stava appoggiato in fondo. Qui: la prima riga di Andrea («Il cibo che
   unisce», campo home_hero_sub) diventa il titolo pieno (span.hero__titolo, corpo-home.php) e
   l'apertura e' alta quanto il suo contenuto, come le pagine interne. Valori = l'anteprima provata
   nel browser (prova-3/anteprima-varianti.cjs, variante B), senza !important.
   ⛔ Sotto i 900 px NON c'e' nessuna regola: lo span resta in linea dentro il paragrafo di prima,
   che va a capo identico (impronta a 390 e 360 in GIRO-r0310e.md).
   Prove: richieste-03-10/prova-3/prova-testata.cjs + prova-3/r0310e/prova-titolo.cjs (verdi a 4 finestre).
   r0310e2 · 03/10: la stessa B anche fra 701 e 899 px QUANDO la finestra e' verticale (iPad 744-834 in
   verticale; Andrea «sia su desk che ipad»). Telefoni (fino a 700) e finestre orizzontali di quella
   fascia restano come prima. Prove in richieste-03-10/prova-3/r0310e2/ (verdi a 9 finestre). */
@media (min-width: 900px), (min-width: 701px) and (orientation: portrait){
  .hero{ height: auto; min-height: 0; }
  .hero__in{
    padding-top: clamp(48px, 5vw, 72px); padding-bottom: clamp(40px, 4.6vw, 62px);
    padding-right: calc(min(26vw, 380px) + 3vw + 24px);
  }
  /* il pesce resta a destra, centrato sull'altezza della fascia: fuori dalla colonna del testo (padding qui sopra) */
  .apertura-marchio::before{ height: auto; width: min(26vw, 380px); top: 50%; right: 3%; transform: translateY(-50%); }
  .hero__titolo{
    display: block; margin: 0 0 22px;
    font: 900 clamp(46px, 6.2vw, 92px)/.94 "Montserrat", system-ui, sans-serif;
    letter-spacing: -.022em; text-wrap: balance; color: #FFFFFF; text-shadow: 0 2px 14px rgba(11,2,4,.85);
  }
  .hero__titolo + br{ display: none; }   /* l'a capo lo fa gia' il blocco */
}
/* finestre basse (portatile 1366x768, iPad orizzontale): il titolo si riduce con l'altezza, la fascia resta entro l'85% */
@media (min-width: 900px) and (max-height: 800px){
  .hero__titolo{ font-size: min(clamp(46px, 6.2vw, 92px), 8.5vh); }
  .hero__in{ padding-top: 36px; padding-bottom: 36px; }
}
/* r0310e2: la regola 621-899 per finestre basse (riga 905-908) da' alla riga delle date l'altezza del pesce;
   in una finestra verticale e bassa di quella fascia il pesce ora sta di lato, quindi non serve */
@media (min-width: 701px) and (max-width: 899px) and (orientation: portrait){
  .hero__riga{ min-height: 0; }
}