/* REON — sito vetrina. Valori dal mockup approvato il 2026-09-22 (mockup/homepage-b.tpl.html) */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:#121110;color:#efe9df;font-family:Jost,system-ui,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}img{max-width:100%;display:block;height:auto}h1,h2,h3{text-wrap:balance;margin:0}p{margin:0}
:focus-visible{outline:2px solid #c6a052;outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:12px;z-index:10;background:#c6a052;color:#121110;padding:8px 14px;text-decoration:none}

.wrap{max-width:1080px;margin:0 auto;padding-inline:clamp(16px,4vw,48px)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:18px;border-bottom:1px solid #2a2724}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(14px,2.4vw,30px);flex-wrap:wrap;font-size:14px}
.nav a,.nav .nolink{text-decoration:none;color:#c9c1b3;font-weight:400}
.nav a:hover{color:#efe9df}
.nav a.riserv{color:#c6a052}
.soon{font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;border-radius:3px;margin-left:6px;vertical-align:middle;border:1px solid #4a4238;color:#c6a052}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:38px;height:auto}
.brand span{font-family:Marcellus,Georgia,serif;font-size:22px;letter-spacing:.2em;color:#fff}

.hero{padding-block:clamp(48px,7vw,90px) clamp(40px,6vw,72px);text-align:center}
.hero .marchio{width:clamp(110px,15vw,170px);margin:0 auto 32px;filter:drop-shadow(0 0 40px rgba(198,160,82,.25))}
.hero .sopra{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#c6a052;margin-bottom:18px}
h1{font-family:Marcellus,Georgia,serif;font-weight:400;font-size:clamp(36px,5.4vw,66px);line-height:1.05;letter-spacing:.01em;color:#fff}
h1 span{color:#c6a052}
.lead{max-width:38em;margin:26px auto 0;font-size:clamp(16px,1.4vw,19px);line-height:1.65;color:#bdb4a4}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.btn{display:inline-block;padding:14px 28px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:1px solid #c6a052;color:#c6a052;font-weight:400}
.btn.pieno{background:#c6a052;color:#121110;font-weight:500}

.render{position:relative;margin:0;aspect-ratio:21/9;overflow:hidden;border-top:1px solid #2a2724;border-bottom:1px solid #2a2724}
.render img{width:100%;height:100%;object-fit:cover}
.render figcaption{position:absolute;left:0;right:0;bottom:0;padding:clamp(16px,3vw,32px) clamp(16px,4vw,48px);background:linear-gradient(transparent,rgba(18,17,16,.85));display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.render figcaption b{font-family:Marcellus,Georgia,serif;font-weight:400;font-size:clamp(18px,2vw,24px);color:#fff;display:block}
.render figcaption small{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#c6a052}

.sez{padding-block:clamp(48px,7vw,96px)}
.sez.dopo{padding-top:0}
.lab{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#c6a052;margin-bottom:16px}
h2{font-family:Marcellus,Georgia,serif;font-weight:400;font-size:clamp(28px,3.4vw,42px);line-height:1.15;color:#fff}
.intro{color:#a9a092;max-width:40em;line-height:1.65;margin-top:14px}
.tre{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#2a2724;border:1px solid #2a2724;margin-top:44px}
.tre>div{background:#171513;padding:30px 26px}
.tre .n{font-family:Marcellus,Georgia,serif;font-size:13px;letter-spacing:.2em;color:#c6a052}
.tre h3{font-family:Marcellus,Georgia,serif;font-weight:400;font-size:23px;color:#fff;margin-top:18px}
.tre p{color:#a9a092;line-height:1.65;margin-top:12px;font-size:15px}

.anime{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,5vw,64px);margin-top:40px}
.anime h3{font-family:Marcellus,Georgia,serif;font-weight:400;font-size:26px;color:#fff}
.anime p{color:#a9a092;line-height:1.7;margin-top:14px;font-size:16px}
.cit{border-left:1px solid #c6a052;padding-left:22px;font-family:Marcellus,Georgia,serif;font-size:clamp(20px,2.2vw,26px);line-height:1.4;color:#e8d6ad;max-width:30em;margin:44px 0 0}

.dove{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:40px}
.citta{aspect-ratio:16/10;position:relative;overflow:hidden;border:1px solid #2a2724;background:linear-gradient(160deg,#242019,#15130f);margin:0}
.citta img{width:100%;height:100%;object-fit:cover}
.citta .ov{position:absolute;inset:auto 0 0;padding:26px;background:linear-gradient(transparent,rgba(18,17,16,.9))}
.citta h3{font-family:Marcellus,Georgia,serif;font-weight:400;font-size:30px;color:#fff}
.citta p{color:#bdb4a4;margin-top:8px;line-height:1.55;font-size:15px}

.inv{background:#171513;border-top:1px solid #2a2724;border-bottom:1px solid #2a2724}
.inv .riga{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,5vw,64px);align-items:center}
.inv .box{border:1px solid #c6a052;padding:28px;font-size:15px;line-height:1.65;color:#bdb4a4}
.inv .box b{display:block;font-family:Marcellus,Georgia,serif;font-weight:400;font-size:20px;color:#fff;margin-bottom:10px}
.inv .box a{color:#c6a052;text-decoration:none;letter-spacing:.12em;text-transform:uppercase;font-size:12px;display:inline-block;margin-top:16px}

.gruppo .riga{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center}
.gruppo a.link{color:#c6a052;text-decoration:none;letter-spacing:.14em;text-transform:uppercase;font-size:12px;white-space:nowrap}
.gruppo .hold{display:flex;gap:32px;flex-wrap:wrap;margin-top:28px}
.gruppo .hold div{font-size:14px;color:#a9a092;line-height:1.6}
.gruppo .hold b{display:block;font-family:Marcellus,Georgia,serif;font-weight:400;font-size:17px;letter-spacing:.06em;color:#fff}

footer{padding-block:48px 30px;font-size:14px;line-height:1.75;color:#a9a092;border-top:1px solid #2a2724}
footer .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
footer h4{font-family:Marcellus,Georgia,serif;font-weight:400;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#c6a052;margin:0 0 10px}
footer a{color:#efe9df;text-decoration:none}
footer .legal{margin-top:36px;padding-top:18px;border-top:1px solid #2a2724;font-size:12px;color:#6f6455;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
footer .legal a{color:#a9a092}

/* privacy */
.testo{max-width:44em}
.testo h1{font-size:clamp(32px,4.4vw,52px)}
.testo h2{font-size:clamp(20px,2.2vw,26px);margin-top:40px}
.testo p,.testo li{color:#bdb4a4;line-height:1.7;margin-top:14px}
.testo ul{padding-left:1.2em;margin:0}
.testo a{color:#c6a052}

@media (max-width: 720px){
  .tre,.anime,.dove,.inv .riga,.gruppo .riga,footer .cols{grid-template-columns:minmax(0,1fr)}
  .render{aspect-ratio:4/3}
  .nav ul{gap:12px 16px;font-size:13px}
}