/* mastrotortello.com — regole del brandbook v1.1 (01_BRAND/brandbook):
   titoli Barlow Condensed ExtraBold minuscolo · descrittori ed etichette Barlow Condensed SemiBold maiuscolo spaziato
   testi Barlow · una sola frase a mano in Caveat per pagina · giallo, crema, marrone, lavagna; verde e rosso solo come segnali */
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("../fonts/caveat.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --giallo: #FFD600;
  --giallo-chiaro: #fff4b8;
  --marrone: #4e2a24;
  --marrone-2: #6b4a42;
  --crema: #f6f1e9;
  --bianco: #fffdf8;
  --verde: #3d6b39;
  --rosso: #c0392b;
  --lavagna: #2b2724;
  --legno: #7a5232;
  --gesso: #f3eee6;
  --linea: #e4dbcd;
  --gutter: 16px;
  --max: 1120px;
  --titoli: "Barlow Condensed", "Arial Narrow", sans-serif;
  --testo: "Barlow", Arial, sans-serif;
  --mano: "Caveat", "Segoe Print", cursive;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bianco); color: var(--marrone); font: 400 18px/1.55 var(--testo); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--marrone); outline-offset: 3px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salta { position: absolute; left: -999px; top: 8px; background: var(--marrone); color: var(--giallo); padding: 8px 14px; z-index: 50; }
.salta:focus { left: 8px; }
sup { font-size: .55em; line-height: 0; vertical-align: super; font-weight: 600; margin-left: 1px; }

/* tipografia del brandbook */
h1, h2, h3 { font-family: var(--titoli); margin: 0; text-wrap: balance; }
h1 { font-weight: 800; font-size: clamp(44px, 7vw, 86px); line-height: .92; letter-spacing: -.015em; text-transform: lowercase; margin: 0 0 22px; }
h2 { font-weight: 800; font-size: clamp(38px, 5.4vw, 60px); line-height: .95; letter-spacing: -.01em; text-transform: lowercase; margin: 0 0 14px; }
h3 { font-weight: 700; font-size: 22px; line-height: 1.1; letter-spacing: .03em; text-transform: uppercase; margin: 0 0 8px; }
.desc { font: 600 14px/1.3 var(--titoli); letter-spacing: .22em; text-transform: uppercase; margin: 0 0 14px; }
.intro { font-size: 20px; line-height: 1.5; color: var(--marrone-2); max-width: 62ch; margin: 0 0 32px; }
.intro.largo { max-width: none; }
.mano { font-family: var(--mano); font-weight: 700; letter-spacing: 0; }
.piccolo { font-size: 15px; color: var(--marrone-2); }

/* bottoni */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--marrone); color: var(--giallo); text-decoration: none;
  font: 700 17px/1 var(--titoli); letter-spacing: .08em; text-transform: uppercase;
  padding: 14px 22px; border-radius: 999px; border: 2px solid var(--marrone);
}
.bottone:hover { background: #3a1f1a; }
.bottone.chiaro { background: transparent; color: var(--marrone); }
.bottone.chiaro:hover { background: rgba(78,42,36,.08); }
.bottone.giallo { background: var(--giallo); color: var(--marrone); border-color: var(--giallo); }

/* testata: marchio · voci tutte uguali · un solo bottone */
.testata { position: sticky; top: 0; z-index: 20; background: var(--giallo); border-bottom: 1px solid rgba(78,42,36,.14); }
.testata .wrap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px 24px; min-height: 68px; }
.marchio { display: flex; align-items: center; gap: 10px; text-decoration: none; line-height: 1; }
.marchio img { width: 44px; height: 44px; }
.marchio b { display: block; font: 800 28px/1 var(--titoli); letter-spacing: -.01em; text-transform: lowercase; white-space: nowrap; }
.marchio small { display: block; font: 600 10px/1 var(--titoli); letter-spacing: .26em; text-transform: uppercase; margin-top: 4px; }
.nav { justify-self: end; display: flex; align-items: center; gap: 4px 22px; }
.nav a { text-decoration: none; font: 700 15px/1 var(--titoli); letter-spacing: .08em; text-transform: uppercase; padding: 8px 0; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--marrone); }
.testata .prenota { padding: 10px 18px; font-size: 15px; }
@media (max-width: 760px) {
  .testata .wrap { grid-template-columns: 1fr auto; min-height: 0; padding-top: 10px; }
  .marchio img { width: 38px; height: 38px; }
  .marchio b { font-size: 24px; }
  .marchio small { display: none; }
  .nav { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: space-between; border-top: 1px solid rgba(78,42,36,.14); padding: 4px 0 6px; }
  html { scroll-padding-top: 112px; }
}

/* hero */
.hero { background: var(--giallo); padding: 40px 0 0; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.hero .testo { padding-bottom: 40px; }
.punti { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; }
.punti li { position: relative; padding-left: 34px; font-size: 19px; line-height: 1.35; }
.punti li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--marrone) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='%23FFD600' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.punti b { font-weight: 700; }
.azioni { display: flex; flex-wrap: wrap; gap: 10px; }
.hero figure { margin: 0; align-self: end; }
.hero figure img { border-radius: 24px 24px 0 0; aspect-ratio: 1; object-fit: cover; width: 100%; }
@media (max-width: 860px) {
  .hero { padding-top: 28px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 8px; }
  .hero .testo { padding-bottom: 24px; }
  .hero figure { margin: 0 calc(var(--gutter) * -1); }
  .hero figure img { border-radius: 0; aspect-ratio: 4/3; }
}

/* timbro niente coperto */
/* rotazione e ombra sono dentro l'SVG: con transform e filter CSS Safari lo disegnava sfocato */
.timbro-coperto { width: 128px; height: 128px; flex: none; }
/* rollio a boomerang: va, torna e si ferma un attimo. L'animazione è sul gruppo dentro l'SVG
   (resta vettoriale, nitido anche in Safari); senza animazione vale la rotazione scritta nell'SVG */
@media (prefers-reduced-motion: no-preference) {
  .timbro-coperto .rollio { transform-origin: 100px 100px; animation: rollio 3.6s cubic-bezier(.45,0,.25,1) infinite; }
}
@keyframes rollio {
  0%, 12% { transform: rotate(-10deg); }
  45% { transform: rotate(14deg); }
  55% { transform: rotate(10deg); }
  88%, 100% { transform: rotate(-10deg); }
}
.testa-momenti { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.testa-momenti .timbro-coperto { width: 136px; height: 136px; margin-bottom: 32px; }
@media (max-width: 760px) { .testa-momenti { align-items: flex-start; gap: 14px; } .testa-momenti .timbro-coperto { width: 92px; height: 92px; margin: 0; } }

/* sezioni */
section { padding: 76px 0; }
section.crema { background: var(--crema); }
@media (max-width: 760px) { section { padding: 54px 0; } }

/* modi di viverlo: righe allineate tra le schede (subgrid) */
.momenti { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.momenti.n2 { grid-template-columns: repeat(2, 1fr); }
.momento { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 10px; background: var(--bianco); border: 1px solid var(--linea); border-radius: 20px; padding: 26px 26px 24px; }
.momento .quando { font: 600 13px/1.2 var(--titoli); letter-spacing: .2em; text-transform: uppercase; color: var(--marrone-2); }
.momento h3 { font-size: 26px; white-space: nowrap; margin: 0; }
.momento .prezzo { font: 800 44px/1 var(--titoli); margin: 0; }
.momento .cosa { margin: 0; }
.momento a { font: 700 15px var(--titoli); letter-spacing: .08em; text-transform: uppercase; align-self: end; }
@media (max-width: 860px) { .momenti, .momenti.n2 { grid-template-columns: 1fr; } .momento { grid-row: auto; grid-template-rows: none; } }

/* lavagna del pranzo */
.lavagna {
  position: relative; background: var(--lavagna); color: var(--gesso); border-radius: 22px; padding: 38px 40px;
  border: 12px solid var(--legno); box-shadow: inset 0 0 60px rgba(255,255,255,.05);
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
}
.lavagna h2 { color: var(--giallo); }
.lavagna h3 { color: var(--giallo); font-size: 18px; margin: 26px 0 8px; }
.lavagna .colonna > h3:first-child { margin-top: 0; }
.lavagna .desc { color: var(--gesso); margin: 0; }
.lavagna .grande { font: 800 84px/.9 var(--titoli); color: var(--giallo); margin: 14px 0 0; }
.righe { margin: 0; }
.righe div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 9px 0; border-bottom: 1px dashed rgba(243,238,230,.25); }
.righe dt { font-weight: 600; white-space: nowrap; }
.righe dd { margin: 0; text-align: right; color: var(--giallo); font-weight: 600; }
.passi { margin: 0; padding: 0; list-style: none; counter-reset: p; }
.passi li { counter-increment: p; display: grid; grid-template-columns: 30px 1fr; gap: 8px; padding: 7px 0; }
.passi li::before { content: counter(p); font: 800 22px/1.1 var(--titoli); color: var(--giallo); }
.lavagna .nota { font-size: 16px; opacity: .85; margin: 22px 0 0; }
.lavagna .timbro-coperto { position: absolute; right: -24px; top: -40px; width: 120px; height: 120px; }
@media (max-width: 860px) {
  .lavagna { grid-template-columns: 1fr; padding: 28px 20px; border-width: 9px; gap: 10px; }
  .lavagna .grande { font-size: 68px; }
  .lavagna .timbro-coperto { right: -6px; top: -46px; width: 100px; height: 100px; }
}

/* fatta qui */
.fattaqui { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.galleria { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.galleria img { border-radius: 16px; aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.galleria picture:has(img.largo) { grid-column: 1 / -1; }
.galleria img.largo { aspect-ratio: 3/2; }
.elenco-sì { list-style: none; padding: 0; margin: 0; }
.elenco-sì li { padding: 9px 0 9px 34px; position: relative; border-bottom: 1px solid var(--linea); }
.elenco-sì li::before { content: ""; position: absolute; left: 0; top: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--giallo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='%234e2a24' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.benvenuto { font-size: 38px; line-height: 1.05; margin: 26px 0 0; transform: rotate(-2deg); transform-origin: left; }
@media (max-width: 860px) { .fattaqui { grid-template-columns: 1fr; } }

/* piatti */
.piatti { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 0 30px; }
.piatti figure { margin: 0; }
.piatti img { border-radius: 16px; aspect-ratio: 1; object-fit: cover; width: 100%; }
.piatti figcaption { font: 700 20px/1.2 var(--titoli); margin-top: 10px; }
.piatti figcaption span { display: block; font: 600 12px/1.3 var(--titoli); letter-spacing: .2em; text-transform: uppercase; color: var(--marrone-2); }
@media (max-width: 860px) { .piatti { grid-template-columns: 1fr 1fr; } }

/* recensioni */
.voto { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 44px; }
.voto .numero { font: 800 104px/.85 var(--titoli); }
.voto .stelle { color: #e0a800; font-size: 28px; letter-spacing: 2px; }
.voto h2 { margin-bottom: 8px; }
.voto p { margin: 0; }

/* dove siamo */
.dove { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; }
.orari { width: 100%; border-collapse: collapse; margin: 8px 0 22px; }
.orari th, .orari td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.orari th { font: 700 14px/1.6 var(--titoli); letter-spacing: .12em; text-transform: uppercase; padding-right: 18px; white-space: nowrap; }
.orari small { color: var(--marrone-2); font-size: 15px; }
.contatti { list-style: none; padding: 0; margin: 0 0 18px; font-size: 19px; }
.contatti li { padding: 3px 0; }
.scheda-prenota { background: var(--giallo); border-radius: 22px; padding: 30px; align-self: start; }
.scheda-prenota p { margin: 0 0 18px; }
.scheda-prenota .piccolo { color: var(--marrone); margin: 18px 0 0; }
@media (max-width: 860px) { .dove { grid-template-columns: 1fr; } }

/* fascia a casa */
.acasa { background: var(--marrone); color: var(--crema); padding: 34px 0; }
.acasa .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.acasa p { margin: 0; font: 700 26px/1.2 var(--titoli); }
.acasa p span { color: var(--giallo); }

/* menu completo */
.menu-testata { background: var(--giallo); padding: 44px 0 38px; }
.menu-testata .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.menu-testata p { margin: 0; font-size: 19px; max-width: 56ch; }
.menu-testata .timbro-coperto { width: 140px; height: 140px; }
@media (max-width: 760px) { .menu-testata .timbro-coperto { width: 96px; height: 96px; align-self: flex-start; } .menu-testata .wrap { align-items: flex-start; } }
.menu-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 56px; align-items: start; }
.categoria { margin: 0 0 30px; }
.categoria h2, .categoria h3 { font: 800 40px/1 var(--titoli); text-transform: lowercase; letter-spacing: -.01em; border-bottom: 3px solid var(--marrone); padding-bottom: 8px; margin: 0; }
.categoria h2 sup, .categoria h3 sup { font-size: .38em; font-weight: 700; vertical-align: top; position: relative; top: .3em; margin-left: 2px; }
.categoria .sottotitolo { font: 600 13px/1.3 var(--titoli); letter-spacing: .2em; text-transform: uppercase; color: var(--marrone-2); margin: 10px 0 2px; }
.voci { list-style: none; padding: 0; margin: 0; }
.voci li { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); font: 500 21px/1.25 var(--titoli); }
.voci .nome { flex: 1; }
.voci .nome small { font-size: 16px; color: var(--marrone-2); font-weight: 500; }
.voci .prezzo { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.voci .corona { display: inline-block; width: 26px; height: auto; vertical-align: -1px; margin-left: 4px; }
.voci .logo-fio { display: inline-block; width: 52px; height: auto; vertical-align: -3px; margin-left: 6px; }
.etichetta { display: inline-block; font: 800 12px/1 var(--titoli); letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; vertical-align: 2px; margin-left: 6px; }
.etichetta.best { background: var(--rosso); color: #fff; }
.extra { background: var(--giallo-chiaro); border-radius: 14px; padding: 14px 18px; font-size: 17px; margin: 14px 0 0; }
.modulo-fio { display: flex; align-items: center; gap: 12px; border: 1px solid var(--linea); border-radius: 14px; padding: 12px 16px; margin: 14px 0 0; font-size: 15px; color: var(--marrone-2); }
.modulo-fio img { width: 64px; height: auto; flex: none; }
.note-menu { font-size: 15px; color: var(--marrone-2); border-top: 1px solid var(--linea); padding-top: 18px; margin-top: 12px; }
.note-menu p { margin: 0 0 6px; }
.note-menu .coperto { display: flex; align-items: center; gap: 18px; background: var(--crema); border-radius: 16px; padding: 14px 20px; margin: 0 0 16px; color: var(--marrone); font-size: 17px; }
.note-menu .coperto .timbro-coperto { width: 84px; height: 84px; }
.note-menu .coperto p { margin: 0; }
@media (max-width: 860px) { .menu-griglia { grid-template-columns: 1fr; } }

/* pagine di testo */
.pagina { padding: 52px 0 76px; }
.pagina .wrap { max-width: 760px; }
.pagina p { font-size: 19px; }

/* piede */
.piede { background: var(--lavagna); color: #e9e2d6; padding: 54px 0 28px; font-size: 17px; }
.piede .colonne { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 28px; }
.piede h2 { font: 700 16px/1.2 var(--titoli); letter-spacing: .14em; text-transform: uppercase; color: var(--giallo); margin: 0 0 12px; }
.piede ul { list-style: none; padding: 0; margin: 0; }
.piede li { padding: 3px 0; }
.piede a { color: #fff; }
.piede .timbro { width: 84px; height: 84px; margin-bottom: 12px; }
.piede .legale { border-top: 1px solid rgba(255,255,255,.15); margin-top: 32px; padding-top: 18px; font-size: 14px; color: #b9b0a3; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; }
.piede .legale a { color: #d8d0c4; }
@media (max-width: 860px) { .piede .colonne { grid-template-columns: 1fr; } }

@media print {
  .testata, .piede, .acasa, .azioni { display: none; }
  body { font-size: 12pt; }
}

/* pagina /link/ (al posto di Linktree): mobile first, una colonna */
.link-corpo { background: var(--crema); }
.link-pagina { max-width: 520px; margin: 0 auto; padding: 0 0 32px; }
.link-testa { background: var(--giallo); text-align: center; padding: 28px 20px 22px; border-radius: 0 0 28px 28px; }
.link-testa img { width: 112px; height: 112px; margin: 0 auto 10px; }
.link-testa h1 { margin: 0; font-size: 46px; line-height: 1; }
.link-cat { margin: 8px 0 0; font: 600 12px/1.3 var(--titoli); letter-spacing: .24em; text-transform: uppercase; }
.link-info { margin: 12px 0 0; font-size: 16px; }
.link-avviso { margin: 16px 16px 0; background: var(--giallo); border: 2px solid var(--marrone); border-radius: 14px; padding: 12px 16px; font-weight: 600; text-align: center; }
.link-lista { display: flex; flex-direction: column; gap: 10px; padding: 20px 16px 0; }
.link-lista h2 { margin: 16px 4px 0; font: 700 14px/1.2 var(--titoli); letter-spacing: .2em; text-transform: uppercase; color: var(--marrone-2); }
.link-bottone {
  display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 12px 18px;
  background: var(--bianco); color: var(--marrone); border: 2px solid var(--marrone); border-radius: 14px;
  text-decoration: none; text-align: center; font: 700 19px/1.2 var(--titoli); letter-spacing: .02em;
}
.link-bottone:hover { background: var(--giallo-chiaro); }
.link-bottone.evidenza { background: var(--marrone); color: var(--giallo); text-transform: uppercase; letter-spacing: .08em; }
.link-bottone.evidenza:hover { background: #3a1f1a; }
.link-loghi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.link-logo { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 10px 12px; background: #fff; border: 2px solid var(--marrone); border-radius: 14px; }
.link-logo img { max-height: 30px; width: auto; max-width: 100%; }
.link-logo:hover { background: var(--giallo-chiaro); }
.link-foto { display: block; margin: 0; border-radius: 14px; overflow: hidden; border: 2px solid var(--marrone); }
.link-foto img { width: 100%; }
.link-piede { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 30px; padding: 0 16px; font-size: 13px; text-align: center; color: var(--marrone-2); }
.link-piede a { font-weight: 600; }
.link-testa { position: relative; }
.link-lingua { position: absolute; top: 14px; right: 18px; margin: 0; font: 700 13px/1 var(--titoli); letter-spacing: .12em; text-transform: uppercase; }
.menu-testata .aggiornato { margin-top: 18px; }