/* Sezione 3 "I panini": base comune delle varianti, con gli stessi gesti della hero B (giallo, notte, rosso, ombre piene).
   Le foto dei panini sono quelle ufficiali del menù su fondo bianco: stanno sempre su bianco pieno, mai su un fondo colorato. */
.pn { position: relative; overflow: clip; }
.pn-giro { width: 100%; max-width: 1440px; margin: 0 auto; padding-block: clamp(64px, 8vw, 112px); padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.pn h2 { margin: 0; font-family: var(--titolo); font-weight: 700; letter-spacing: -.035em; line-height: .95; font-size: clamp(42px, 5.6vw, 88px); text-wrap: balance; }
.pn h3 { margin: 0; font-family: var(--titolo); font-weight: 700; letter-spacing: -.025em; line-height: 1; }
.pn p { margin: 0; }
.pn .lead { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; max-width: 34em; font-weight: 500; }
.pn .giallo.su-chiaro { -webkit-text-stroke-width: .05em; text-shadow: .045em .05em 0 var(--rosso); }
.pn .btn.primo { background: var(--rosso); color: var(--bianco); box-shadow: 0 6px 0 var(--notte); }
.pn .btn.primo:hover { box-shadow: 0 8px 0 var(--notte); }
.pn .btn.vuoto { background: transparent; color: inherit; box-shadow: inset 0 0 0 3px currentColor; }
.pn .prezzo { font-family: var(--titolo); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pn .club { display: inline-flex; align-items: center; gap: 6px; background: var(--giallo); color: var(--notte); border-radius: 999px; padding: 5px 12px; font-family: var(--titolo); font-weight: 700; font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Interruttore a due posizioni (panino o menù, prezzo o Club): il lato acceso è rosso con l'ombra piena, come i bottoni della hero. */
.pn-scelta { display: inline-flex; padding: 5px; border-radius: 999px; background: var(--bianco); box-shadow: inset 0 0 0 2px var(--notte); gap: 4px; }
.pn-scelta button { font: 700 15px/1 var(--titolo); color: var(--notte); background: transparent; border: 0; border-radius: 999px; padding: 12px 18px; cursor: pointer; white-space: nowrap; }
.pn-scelta button[aria-pressed="true"] { background: var(--rosso); color: var(--bianco); box-shadow: 0 4px 0 var(--notte); }
.pn-scelta button:focus-visible { outline: 3px solid var(--giallo); outline-offset: 2px; }
@media (max-width: 760px) { .pn .btn { font-size: 16px; padding: 16px 22px; } .pn-scelta button { padding: 11px 14px; font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .pn *, .pn *::before, .pn *::after { transition: none !important; animation: none !important; } }