:root {
  color-scheme: light;
  --ink: #262523;
  --muted: #746f69;
  --paper: #fcf8f2;
  --surface: #fffdf9;
  --line: #e9e0d5;
  --accent: #8f4d31;
  --accent-soft: #f1dfce;
  --dark: #292b22;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
body.beauty { --paper: #f9f5f2; --surface: #fffdfa; --line: #ebdfe0; --accent: #87585f; --accent-soft: #f0e1e3; --dark: #3d3537; }
a { color: inherit; }
button { font: inherit; }
.serif { font-family: Georgia, 'Times New Roman', serif; }
.topline { padding: 9px 6%; background: var(--dark); color: #f7f1e8; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; text-align: center; }
.site-header { min-height: 86px; padding: 13px max(5%, calc((100% - 1300px)/2)); background: #fffefa; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; white-space: nowrap; }
.mark { width: 41px; height: 41px; border: 1px solid var(--accent); border-radius: 50%; display: grid; place-items: center; color: var(--accent); font: italic 28px Georgia, serif; }
.wordmark strong { display: block; font: 700 25px/1 Georgia, serif; letter-spacing: -.04em; }
.wordmark small { display: block; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }
.site-nav { display: flex; align-items: center; gap: 20px; }
.site-nav a { text-decoration: none; font-size: 12px; font-weight: 700; }
.site-nav a:hover { color: var(--accent); }
.site-nav .admin { border: 1px solid var(--accent); color: var(--accent); padding: 10px 15px; border-radius: 100px; white-space: nowrap; }
.site-nav .admin:hover { background: var(--accent); color: white; }
.page-shell { max-width: 1400px; margin: auto; }
.hero { display: grid; grid-template-columns: .91fr 1.09fr; min-height: 535px; background: var(--surface); }
.hero-content { padding: clamp(44px, 6vw, 98px) clamp(28px, 6.4vw, 94px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.eyebrow, .section-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 10px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .21em; }
.eyebrow::before, .section-eyebrow::before { content: ''; width: 25px; height: 1px; background: currentColor; }
h1,h2,h3,p { margin-top: 0; }
.hero h1 { font: 400 clamp(48px, 5.8vw, 84px)/.98 Georgia, serif; letter-spacing: -.055em; max-width: 660px; margin: 28px 0 22px; }
.hero h1 em { font-style: italic; color: var(--accent); }
.hero p { color: #66615b; font-size: 15px; line-height: 1.8; max-width: 480px; margin-bottom: 28px; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 22px; border-radius: 100px; font-size: 12px; font-weight: 800; text-decoration: none; border: 1px solid var(--accent); background: var(--accent); color: white; transition: transform .18s, background .18s; }
.btn:hover { transform: translateY(-2px); }
.btn.outline { color: var(--accent); background: transparent; }
.hero-visual { position: relative; min-height: 540px; overflow: hidden; }
.hero-visual::before { content: ''; position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .7s; }
.menu .hero-visual::before { background-image: url('menu-digitale-ristorante-banner.webp'); }
.beauty .hero-visual::before { background-image: url('listino-estetista-banner.webp'); }
.hero-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(31,20,15,.42), transparent 60%); pointer-events: none; }
.hero-caption { position: absolute; z-index: 1; bottom: 33px; left: 37px; right: 190px; color: white; font: italic 25px Georgia, serif; text-shadow: 0 2px 18px #0006; }
.qr-box { position: absolute; z-index: 2; bottom: 23px; right: 24px; width: 129px; padding: 10px; background: #fffefa; border-radius: 15px; box-shadow: 0 13px 40px #0004; text-align: center; }
.qr-box img { display: block; width: 100%; height: auto; }
.qr-box strong { display: block; font-size: 10px; padding-top: 6px; }
.qr-box small { display: block; font-size: 9px; color: var(--muted); }
.trust { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; background: var(--dark); color: #fffaf3; }
.trust div { padding: 23px 30px; text-align: center; border-right: 1px solid #ffffff20; font-size: 12px; letter-spacing: .03em; }
.trust div:last-child { border: 0; }
.trust span { display: block; font: italic 22px Georgia, serif; color: #e5c6b0; margin-bottom: 4px; }
.content-section { padding: 88px clamp(22px, 6%, 90px); }
.content-section.inner { padding-top: 32px; }
.section-intro { display: flex; justify-content: space-between; align-items: end; gap: 22px; margin-bottom: 34px; }
.section-intro h2 { font: 400 clamp(36px, 4.3vw, 58px)/1 Georgia, serif; letter-spacing: -.04em; margin: 16px 0 0; }
.section-intro p { max-width: 390px; font-size: 14px; color: var(--muted); line-height: 1.75; margin: 0; }
.featured { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; }
.feature-card { overflow: hidden; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 12px 36px #33201908; }
.feature-photo { width: 100%; aspect-ratio: 1.12; overflow: hidden; background-color: var(--accent-soft); }
.feature-photo .atlas, .item-thumb .atlas { height: 100%; width: 100%; background-repeat: no-repeat; background-size: 200% 200%; }
.menu .atlas { background-image: url('v49-food-atlas.webp'); }
.beauty .atlas { background-image: url('v49-beauty-atlas.webp'); }
.atlas.p0 { background-position: 0 0; }
.atlas.p1 { background-position: 100% 0; }
.atlas.p2 { background-position: 0 100%; }
.atlas.p3 { background-position: 100% 100%; }
.feature-photo img, .item-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.feature-body { padding: 19px 20px 21px; }
.feature-tag { color: var(--accent); text-transform: uppercase; letter-spacing: .16em; font-size: 9px; font-weight: 800; }
.feature-body h3 { font: 700 22px/1.15 Georgia,serif; letter-spacing: -.02em; margin: 11px 0 9px; }
.feature-body p { color: var(--muted); line-height: 1.55; font-size: 12px; min-height: 38px; margin-bottom: 12px; }
.feature-end { display: flex; justify-content: space-between; gap: 12px; align-items: center; border-top: 1px solid var(--line); padding-top: 13px; }
.feature-end strong { font-size: 17px; color: var(--accent); }
.feature-end small { font-size: 10px; color: var(--muted); }
.menu-panel { background: #f3ede5; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.beauty .menu-panel { background: #f3ebea; }
.filters { display: flex; gap: 9px; flex-wrap: wrap; margin: 30px 0 27px; }
.filter { padding: 11px 18px; font-size: 12px; font-weight: 700; color: var(--accent); background: #fffcf9; border: 1px solid #e7d8cd; border-radius: 100px; cursor: pointer; transition: .2s; }
.filter[aria-pressed="true"], .filter:hover { background: var(--accent); border-color: var(--accent); color: white; }
.list-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.item { display: flex; align-items: center; gap: 18px; padding: 14px; border: 1px solid var(--line); background: var(--surface); border-radius: 15px; min-width: 0; }
.item-thumb { flex: 0 0 80px; width: 80px; height: 76px; background: var(--accent-soft); overflow: hidden; border-radius: 11px; }
.item-thumb.initial { display: grid; place-items: center; color: var(--accent); font: italic 38px Georgia,serif; }
.item-copy { min-width: 0; flex: 1; }
.item-kicker { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; color: var(--accent); display: block; margin-bottom: 6px; }
.item-head { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; }
.item h3 { margin: 0; font: 700 17px/1.15 Georgia,serif; }
.item .price { color: var(--accent); font-size: 14px; font-weight: 800; white-space: nowrap; }
.item p { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 7px 0 0; }
.item small { display: inline-block; font-size: 10px; color: #877d74; margin-top: 6px; }
.notice { margin-top: 25px; color: #766e65; font-size: 11px; line-height: 1.6; display: flex; gap: 10px; align-items: start; }
.notice::before { content: 'ⓘ'; font-size: 16px; color: var(--accent); }
.promo-strip { display: grid; grid-template-columns: .86fr 1.14fr; margin: 0 clamp(22px, 6%, 90px) 78px; border-radius: 23px; overflow: hidden; background: #e8d7d6; }
.promo-art { min-height: 310px; overflow: hidden; }
.promo-art .atlas { height: 100%; width: 100%; background-repeat: no-repeat; background-size: 200% 200%; }
.promo-copy { padding: clamp(32px, 6vw, 76px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.promo-copy h2 { font: italic 400 clamp(36px, 4.3vw, 58px)/1.04 Georgia,serif; letter-spacing: -.03em; margin: 15px 0 13px; }
.promo-copy p { font-size: 14px; line-height: 1.75; color: #65585a; max-width: 510px; }
.promo-copy .btn { margin-top: 8px; }
.experience { display: grid; grid-template-columns: 1.1fr .9fr; gap: 0; background: var(--dark); color: #fff; }
.experience .story { padding: 80px clamp(30px, 7vw, 105px); }
.experience .story .section-eyebrow { color: #d8b7a2; }
.experience h2 { font: 400 clamp(38px, 4vw, 56px)/1.06 Georgia,serif; letter-spacing: -.04em; margin: 20px 0; }
.experience p { font-size: 14px; line-height: 1.8; color: #e0d9d0; max-width: 540px; }
.experience .side { padding: 80px clamp(28px, 6vw, 80px); background: #ffffff0c; display: flex; flex-direction: column; justify-content: center; }
.experience .side strong { font: italic 28px Georgia,serif; color: #e3c1ad; margin-bottom: 17px; }
.experience .side span { border-top: 1px solid #ffffff30; padding: 11px 0; font-size: 13px; }
.about-actions { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 13px; }
.about-actions .btn { background: #f9e9d9; color: var(--dark); border-color: transparent; }
.about-actions .btn.outline { color: #fff; background: transparent; border-color: #ffffff77; }
.legal { padding: 27px clamp(22px, 6%, 90px); font-size: 11px; line-height: 1.7; color: #766b63; background: #fff; }
.footer { padding: 25px 6%; background: #201e1b; color: #e8e0d8; display: flex; gap: 15px; justify-content: space-between; align-items: center; flex-wrap: wrap; font-size: 11px; }
.footer a { color: #e8e0d8; }
[hidden] { display: none !important; }
@media(max-width:1100px) {
  .site-header { padding: 14px 4%; }
  .site-nav { gap: 12px; }
  .featured { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hero-content { padding-left: 6vw; padding-right: 5vw; }
}
@media(max-width:760px) {
  .topline { font-size: 8px; padding: 8px 5%; }
  .site-header { flex-direction: column; align-items: stretch; gap: 14px; }
  .wordmark { justify-content: center; }
  .site-nav { justify-content: center; gap: 15px; flex-wrap: wrap; }
  .site-nav a { font-size: 11px; }
  .hero { grid-template-columns: 1fr; }
  .hero-content { padding: 53px 7% 48px; }
  .hero h1 { max-width: 570px; margin: 21px 0; }
  .hero-visual { min-height: 350px; }
  .hero-caption { bottom: 32px; left: 28px; right: 150px; font-size: 22px; }
  .trust { grid-template-columns: 1fr 1fr 1fr; }
  .trust div { padding: 19px 8px; font-size: 10px; }
  .trust span { font-size: 17px; }
  .content-section { padding: 66px 5%; }
  .section-intro { display: block; }
  .section-intro p { margin-top: 15px; }
  .list-grid { grid-template-columns: 1fr; }
  .promo-strip { grid-template-columns: 1fr; margin: 0 5% 60px; }
  .promo-art { min-height: 260px; }
  .promo-copy { padding: 35px 7%; }
  .experience { grid-template-columns: 1fr; }
  .experience .story, .experience .side { padding: 50px 7%; }
}
@media(max-width:420px) {
  .wordmark strong { font-size: 23px; }
  .site-nav { gap: 9px 13px; }
  .site-nav .admin { padding: 8px 12px; }
  .hero h1 { font-size: 50px; }
  .hero-visual { min-height: 295px; }
  .qr-box { width: 100px; right: 13px; bottom: 14px; padding: 7px; }
  .hero-caption { left: 18px; right: 118px; bottom: 24px; font-size: 20px; }
  .featured { gap: 10px; }
  .feature-body { padding: 14px; }
  .feature-body h3 { font-size: 18px; }
  .feature-body p { font-size: 11px; min-height: 50px; }
  .feature-end strong { font-size: 15px; }
  .item { gap: 12px; padding: 11px; }
  .item-thumb { flex-basis: 67px; width: 67px; height: 67px; }
  .item h3 { font-size: 16px; }
}