/* Brizzolari — layout del sito. Usa solo i token di tokens.css. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

[id] { scroll-margin-top: 96px; }

.salta {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100;
  background: var(--oro); color: var(--bruno); border: var(--bordo); border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-4); font-weight: 700; text-decoration: none;
}
.salta:focus { top: var(--s-4); }

.visivamente-nascosto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Testata */
.testata {
  position: sticky; top: 0; z-index: 50;
  background: var(--crema); border-bottom: var(--bordo);
}
.testata__barra { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 76px; }
.marchio { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--bruno); }
.marchio:hover { color: var(--bruno); }
.marchio img { width: 48px; height: auto; }
.marchio__nome { font-family: var(--font-titoli); font-weight: 800; font-size: 1.5rem; line-height: 1; color: var(--blu); }
.marchio__sotto { display: block; white-space: nowrap; font-size: var(--fs-etichetta); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--caramello); }

.menu-toggle {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: 8px 16px;
  font: 700 1rem var(--font-testo); color: var(--bruno);
  background: var(--farina); border: var(--bordo); border-radius: var(--r-pill); box-shadow: var(--ombra-s);
  cursor: pointer;
}
.menu-toggle svg { width: 20px; height: 20px; }

.nav { display: none; }
.nav.aperto { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--crema); border-bottom: var(--bordo); }
.nav ul { list-style: none; margin: 0; padding: var(--s-3) var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-1); }
.nav a {
  display: block; white-space: nowrap; padding: var(--s-3) var(--s-4); border-radius: var(--r-pill);
  font-family: var(--font-titoli); font-weight: 700; font-size: 1.25rem;
  color: var(--bruno); text-decoration: none; border: 2px solid transparent;
}
.nav a:hover { background: var(--farina); border-color: var(--bruno); color: var(--bruno); }
.nav a[aria-current="page"] { background: var(--oro); border-color: var(--bruno); }
.nav .btn { margin-top: var(--s-2); }

@media (min-width: 1100px) {
  .menu-toggle { display: none; }
  .nav, .nav.aperto { display: block; position: static; border: 0; background: none; }
  .nav ul { flex-direction: row; align-items: center; padding: 0; gap: var(--s-2); }
  .nav ul { gap: 0; }
  .nav a { font-size: 1.0625rem; padding: var(--s-2) var(--s-3); }
  .nav .btn { margin: 0 0 0 var(--s-2); padding: 10px 22px; font-size: 1.125rem; min-height: 44px; }
}

/* Utilità di layout */
.riga { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.griglia { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.intro { max-width: 640px; margin-bottom: var(--s-8); }
.intro p:last-child { margin-bottom: 0; }
.due-colonne { display: grid; gap: var(--s-10); align-items: center; }
@media (min-width: 900px) { .due-colonne { grid-template-columns: 1fr 1fr; gap: var(--s-16); } }

/* Hero */
.hero { display: grid; gap: var(--s-10); align-items: center; }
@media (min-width: 900px) { .hero { grid-template-columns: 1.1fr .9fr; } }
.hero .accento { margin: 0 0 var(--s-3); }
.hero .display { margin: 0 0 var(--s-5); }
.hero .sottotitolo { margin: 0 0 var(--s-8); max-width: 520px; }
.hero__logo { transform: rotate(3deg); max-width: 480px; justify-self: center; width: 100%; }
.hero__logo img { width: 100%; height: auto; border-radius: calc(var(--r-l) - var(--s-4)); }

/* Testata di pagina interna */
.testa-pagina { padding-block: clamp(40px, 6vw, 72px) clamp(32px, 4vw, 48px); }
.testa-pagina h1 { margin: 0 0 var(--s-3); }
.testa-pagina p { max-width: 620px; margin: 0; }

/* Il forno */
.forno-numero {
  font-family: var(--font-titoli); font-weight: 800; font-size: var(--fs-display); line-height: .9;
  color: var(--blu);
}
.forno-box { padding: var(--s-8); }
.forno-box .accento { margin: 0 0 var(--s-3); }
.valori { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: grid; gap: var(--s-4); }
.valori li { display: flex; gap: var(--s-3); align-items: flex-start; }
.valori svg { flex: none; width: 28px; height: 28px; margin-top: 2px; }

/* Icone */
.icona { stroke: var(--bruno); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.card-prodotto__media .icona { width: 72px; height: 72px; stroke-width: 1.6; }
.media-nota { position: absolute; bottom: 12px; right: 14px; font-size: var(--fs-etichetta); font-weight: 700; color: var(--bruno); }

/* Torte su ordinazione */
.passi { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-6); counter-reset: passo; }
@media (min-width: 768px) { .passi { grid-template-columns: repeat(3, 1fr); } }
.passo { padding: var(--s-6); counter-increment: passo; }
.passo::before {
  content: counter(passo);
  display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--s-4);
  font-family: var(--font-titoli); font-weight: 800; font-size: 1.75rem; color: var(--bruno);
  background: var(--oro); border: var(--bordo); border-radius: var(--r-pill); box-shadow: var(--ombra-s);
}
.passo h3 { margin-bottom: var(--s-2); }
.passo p { margin: 0; }
.torte-cta { margin-top: var(--s-10); display: flex; flex-wrap: wrap; gap: var(--s-6); align-items: center; justify-content: space-between; }
.torte-cta .cartellino { max-width: 100%; }
.cartellino .icona { width: 48px; height: 48px; flex: none; }

/* Recensioni */
.recensione { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); margin: 0; }
.recensione blockquote { margin: 0; font-size: var(--fs-sottotitolo); font-weight: 500; }
.recensione figcaption { margin-top: auto; font-weight: 700; }
.stelle { display: flex; gap: 2px; }
.stelle svg { width: 22px; height: 22px; fill: var(--oro); stroke: var(--bruno); stroke-width: 1.6; stroke-linejoin: round; }

/* Fascia blu */
.fascia .accento { color: var(--oro); margin: 0 0 var(--s-2); }
.fascia .display { margin: 0 0 var(--s-6); }

/* Orari e dove siamo */
.card-orari h2, .card-orari h3 { color: var(--farina); }
.card-orari__riga:last-of-type { border-bottom: 0; }
.card-orari__riga > :last-child { font-weight: 700; text-align: right; }
.campo [aria-invalid="true"] { border-color: var(--mattone); box-shadow: var(--ombra-s); }
[hidden] { display: none !important; }
.card-orari dl { margin: 0; }
.card-orari dd { margin: 0; }
.mappa {
  border: var(--bordo); border-radius: var(--r-m); box-shadow: var(--ombra-m); overflow: hidden;
  background: var(--farina); height: 360px;
}
@media (min-width: 768px) { .mappa { height: auto; aspect-ratio: 16 / 9; } }
.mappa iframe { display: block; width: 100%; height: 100%; border: 0; }
.dove { display: grid; gap: var(--s-8); align-items: start; }
@media (min-width: 900px) { .dove { grid-template-columns: .9fr 1.1fr; } }
.indirizzo { font-style: normal; }
.info-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
.info-lista li { display: flex; gap: var(--s-3); align-items: flex-start; }
.info-lista svg { flex: none; width: 24px; height: 24px; margin-top: 2px; }

/* Contatti */
.contatto { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.contatto h2 { font-size: 1.625rem; font-weight: 700; color: var(--bruno); margin: 0; }
.contatto p { margin: 0; }
.contatto .btn { align-self: flex-start; margin-top: auto; }
.contatto__icona {
  display: grid; place-items: center; width: 56px; height: 56px;
  border: var(--bordo); border-radius: var(--r-s); box-shadow: var(--ombra-s);
}
.contatto__icona svg { width: 28px; height: 28px; }

.modulo { padding: var(--s-6); display: grid; gap: var(--s-5); }
@media (min-width: 768px) { .modulo { padding: var(--s-10); } }
.modulo__riga { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .modulo__riga { grid-template-columns: 1fr 1fr; } }
.campo { display: grid; gap: var(--s-2); }
.campo label { font-weight: 700; }
.campo .aiuto { font-size: var(--fs-piccolo); color: var(--caramello); }
.campo input, .campo select, .campo textarea {
  font: inherit; color: var(--bruno);
  background: var(--crema); border: var(--bordo); border-radius: var(--r-s);
  padding: 12px 14px; min-height: 48px; width: 100%;
}
.campo textarea { min-height: 140px; resize: vertical; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.modulo__nota { margin: 0; font-size: var(--fs-piccolo); color: var(--caramello); }

/* Footer */
.footer__griglia { display: grid; gap: var(--s-10); }
@media (min-width: 768px) { .footer__griglia { grid-template-columns: auto 1fr 1fr 1fr; gap: var(--s-8); } }
.footer .logo-riquadro { width: 120px; padding: var(--s-2); border-radius: var(--r-m); box-shadow: var(--ombra-s); }
.footer .logo-riquadro img { border-radius: var(--r-s); }
.footer h2 { font-size: 1.375rem; font-weight: 700; color: var(--farina); margin-bottom: var(--s-3); }
.footer p, .footer ul { margin: 0; }
.footer ul { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.footer .card-orari__riga { padding: var(--s-1) 0; gap: var(--s-4); }
.footer .accento { color: var(--oro); font-size: 1.125rem; }
.footer__fondo {
  margin-top: var(--s-10); padding-top: var(--s-6); border-top: 1px solid var(--linea-scura);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); justify-content: space-between;
  font-size: var(--fs-piccolo);
}
.footer a:hover { color: var(--farina); }
.footer :focus-visible { outline-color: var(--oro); }

/* ================= v2: varietà delle sezioni e movimento ================= */

main { overflow-x: clip; }
.logo-riquadro img { width: 100%; height: auto; }
.footer .logo-riquadro { align-self: start; }

/* Bordo ondulato (crosta) in cima alla sezione, nel colore della sezione */
.bordo-onda { position: relative; }
.bordo-onda::before {
  content: ""; position: absolute; left: 0; right: 0; top: -15px; height: 16px;
  background-color: inherit;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16'%3E%3Cpath d='M0 16C0 7 9 0 20 0s20 7 20 16Z'/%3E%3C/svg%3E") repeat-x left bottom / 40px 16px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16'%3E%3Cpath d='M0 16C0 7 9 0 20 0s20 7 20 16Z'/%3E%3C/svg%3E") repeat-x left bottom / 40px 16px;
  pointer-events: none;
}
.recensioni { background: var(--crema); }

/* Nastro che scorre */
.nastro {
  position: relative; z-index: 2;
  background: var(--oro); border-block: var(--bordo);
  transform: rotate(-1.5deg); margin: 0 -24px -12px; padding: 14px 0;
  overflow: hidden; box-shadow: 0 6px 0 var(--bruno);
}
.nastro__binario { display: flex; width: max-content; animation: scorri 38s linear infinite; }
.nastro span {
  display: inline-flex; align-items: center; gap: 28px; padding-right: 28px;
  font-family: var(--font-titoli); font-weight: 800; font-size: 1.375rem; line-height: 1;
  color: var(--bruno); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
}
.nastro span::after {
  content: ""; width: 12px; height: 12px; border-radius: 50%;
  background: var(--blu); border: 2px solid var(--bruno);
}
@keyframes scorri { to { transform: translateX(-50%); } }

/* Hero: entrata, Brizzo che galleggia, vapore */
.hero__testo > * { animation: sali .7s cubic-bezier(.2,.7,.3,1.2) backwards; }
.hero__testo > :nth-child(2) { animation-delay: 90ms; }
.hero__testo > :nth-child(3) { animation-delay: 180ms; }
.hero__testo > :nth-child(4) { animation-delay: 270ms; }
.hero__scena { position: relative; justify-self: center; width: 100%; max-width: 480px; animation: entra-brizzo .9s cubic-bezier(.2,.7,.3,1.3) 150ms backwards; }
.hero__scena .hero__logo { animation: galleggia 5s ease-in-out 1.1s infinite; }
.vapore {
  position: absolute; top: -44px; width: 18px; height: 48px; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 48'%3E%3Cpath d='M9 46c-8-7 8-12 0-20S1 12 9 2' fill='none' stroke='%239A541F' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
  animation: vapore 3.6s ease-in infinite;
}
.vapore--1 { left: 30%; }
.vapore--2 { left: 48%; animation-delay: 1.2s; }
.vapore--3 { left: 66%; animation-delay: 2.4s; }
@keyframes sali { from { opacity: 0; translate: 0 24px; } }
@keyframes entra-brizzo { from { opacity: 0; scale: .7; rotate: -10deg; } }
@keyframes galleggia { 50% { translate: 0 -12px; } }
@keyframes vapore { 0% { opacity: 0; translate: 0 16px; } 30% { opacity: .8; } 100% { opacity: 0; translate: 0 -24px; } }

/* Comparsa allo scroll */
@media (prefers-reduced-motion: no-preference) {
  .js [data-rivela]:not(.rivelato) { opacity: 0; }
}
.rivelato { animation: sali .7s cubic-bezier(.2,.7,.3,1.1) var(--ritardo, 0ms) backwards; }

/* Card che si sollevano */
.card-prodotto { transition: transform var(--transizione), box-shadow var(--transizione); }
.card-prodotto:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--bruno); }
.card-prodotto:hover .card-prodotto__media .icona { animation: dondola .6s ease-in-out; }
@keyframes dondola { 25% { rotate: -10deg; } 75% { rotate: 8deg; } }

.intro--centro { margin-inline: auto; text-align: center; }
@media (min-width: 900px) {
  .griglia--sfalsata { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .griglia--sfalsata > :nth-child(2) { margin-top: 48px; }
}

/* Il forno: bollino che gira */
.forno-scena { position: relative; }
.bollino {
  position: absolute; top: -28px; right: -12px;
  display: grid; place-items: center; text-align: center;
  width: 108px; height: 108px; border-radius: 50%;
  background: var(--crosta); border: var(--bordo); box-shadow: var(--ombra-s);
  font-family: var(--font-titoli); font-weight: 700; font-size: 1rem; line-height: 1; color: var(--bruno);
  animation: gira 24s linear infinite;
}
.bollino strong { font-size: 1.625rem; font-weight: 800; }
@keyframes gira { to { rotate: 360deg; } }
@media (min-width: 768px) { .bollino { right: -28px; } }

/* Pasticceria: vetrina con lista orizzontale */
.vetrina { display: grid; gap: var(--s-10); }
.vetrina__lista { display: grid; gap: var(--s-6); }
.vetrina__testo .cartellino { margin-top: var(--s-6); }
@media (min-width: 900px) {
  .vetrina { grid-template-columns: .85fr 1.15fr; align-items: start; gap: var(--s-16); }
  .vetrina__testo { position: sticky; top: 120px; }
}
@media (min-width: 560px) {
  .card-prodotto--orizzontale { flex-direction: row; }
  .card-prodotto--orizzontale .card-prodotto__media { width: 40%; flex: none; aspect-ratio: auto; min-height: 180px; border-bottom: 0; border-right: var(--bordo); }
}
.cartellino__titolo { font-family: var(--font-titoli); font-weight: 800; font-size: 1.625rem; line-height: 1.05; }
.cartellino__prezzo { font-family: var(--font-titoli); font-weight: 800; font-size: 2.25rem; color: var(--blu); }
.cartellino--oscilla { transform-origin: 50% -20px; animation: oscilla 6s ease-in-out infinite; }
.cartellino--oscilla:hover { animation-duration: 1.2s; }
@keyframes oscilla { 0%, 100% { rotate: 0deg; } 50% { rotate: 2.5deg; } }

/* Torte su fondo blu */
.sezione--blu .occhiello { color: var(--farina); }
.sezione--blu .card, .sezione--blu .cartellino { color: var(--bruno); }
.sezione--blu .card h3 { color: var(--blu); }
.btn--chiaro { background: var(--farina); color: var(--bruno); box-shadow: var(--ombra-s); }
.btn--chiaro:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--bruno); color: var(--bruno); }
.passo { transition: transform var(--transizione), box-shadow var(--transizione); }
.passo:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--bruno); }
.passo:hover::before { animation: rimbalza .5s ease; }
@keyframes rimbalza { 40% { translate: 0 -8px; } }

/* Recensioni a biglietti colorati */
.recensione { position: relative; padding-top: var(--s-10); }
.recensione__virgolette {
  position: absolute; top: -26px; left: 20px;
  display: grid; place-items: center; width: 52px; height: 52px; padding-top: 18px;
  background: var(--blu); color: var(--farina); border: var(--bordo); border-radius: 50%; box-shadow: var(--ombra-s);
  font-family: var(--font-titoli); font-weight: 800; font-size: 3rem; line-height: 1;
}
.griglia--biglietti { row-gap: var(--s-12); padding-top: var(--s-4); }

/* Fascia finale oro con Brizzo */
.fascia { background: var(--oro); color: var(--bruno); }
.fascia .accento, .fascia .display { color: var(--bruno); }
.fascia__griglia { display: grid; gap: var(--s-8); align-items: center; }
.fascia__brizzo { width: 180px; justify-self: center; rotate: 6deg; transition: rotate .3s; }
.fascia__brizzo:hover { rotate: -4deg; }
@media (min-width: 768px) {
  .fascia__griglia { grid-template-columns: 1fr auto; }
  .fascia__brizzo { width: 240px; }
}

/* Testata delle pagine interne con Brizzo */
.testa-pagina__griglia { display: grid; grid-template-columns: 1fr auto; column-gap: var(--s-6); align-items: center; }
.testa-pagina__griglia > :not(.testa-pagina__brizzo) { grid-column: 1; }
.testa-pagina__brizzo {
  grid-column: 2; grid-row: 1 / span 3; width: 88px;
  background: var(--crema); border: var(--bordo); border-radius: var(--r-m); box-shadow: var(--ombra-m);
  padding: 6px; rotate: 6deg; animation: galleggia 5s ease-in-out infinite;
}
.testa-pagina__brizzo img { width: 100%; height: auto; border-radius: var(--r-s); }
@media (min-width: 768px) { .testa-pagina__brizzo { width: 170px; } }
@media (max-width: 479px) { .testa-pagina__brizzo { width: 72px; align-self: start; } }

@media (prefers-reduced-motion: reduce) {
  .card-prodotto:hover, .passo:hover { transform: none; }
  .fascia__brizzo:hover { rotate: 6deg; }
}
.forno-box .accento { padding-right: 72px; }
.recensione { overflow: visible; }
@media (max-width: 899px) { .hero__scena { width: 86%; margin-top: var(--s-6); } }
.recensione__virgolette { padding-top: 12px; }
@media (min-width: 900px) { .griglia--biglietti { grid-template-columns: repeat(3, 1fr); } }