/* =====================================================================
   GIORGIO PARQUETTES — Design system "Radici"
   Foglio di stile condiviso da tutte le pagine del sito.
   Non duplicare questi stili nelle pagine: modificare solo qui.
   ---------------------------------------------------------------------
   1. Token          2. Atomi        3. Bottoni      4. Logo
   5. Header + mega menu             6. Drawer mobile
   7. Hero home      8. Page hero (pagine interne)   9. Sezioni
   10. Componenti (collezioni, superfici, progetti, storia, zone,
       showroom, blog, split, form)  11. Footer      12. Floating
   16. Sezioni disegnate su richiesta    17. Sotto-menu
   18. Banner promozionale (scritto dall'area riservata)
   ===================================================================== */


/* =====================================================================
   Giorgio Parquettes — Homepage "Radici"
   Token e stili ricostruiti dall'handoff design_handoff_homepage_radici.
   Single-file statico, mobile-first. (no iPhone frame, no React)
   ===================================================================== */
:root{
  --wood-900:#2B1D12; --wood-800:#3D2A1B; --wood-700:#5A3E27; --wood-600:#7A5636;
  --wood-500:#9A7346; --wood-400:#B8904F; --wood-300:#CBA973; --wood-200:#DEC8A3;
  --wood-100:#EBDCC3; --wood-50:#F5ECDC;
  --bianco:#FBF8F3; --pietra-400:#A39A88;
  --bosco:#3D4F3C; --bosco-scuro:#2C3A2B; --bosco-chiaro:#5C745A;
  --ease-out:cubic-bezier(0.16,0.84,0.36,1);
  --font-body:'Lora','Source Sans 3',Georgia,serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body); font-size:16px; line-height:1.65;
  color:var(--wood-700); background:var(--wood-50);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;}

/* ---------- Atoms ---------- */
.eye{font-family:'Source Sans 3',sans-serif;font-weight:500;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--wood-700);margin:0;display:inline-flex;align-items:center;gap:10px;}
.eye::before{content:'';display:inline-block;width:18px;height:1px;background:var(--wood-400);}
.eye--light{color:var(--wood-200);}
.eye--light::before{background:var(--wood-300);}
.eye--bosco{color:var(--bosco);}
.eye--bosco::before{background:var(--bosco);}
.lead{font-family:'Lora',serif;font-style:italic;font-size:17px;line-height:1.65;color:var(--wood-700);margin:0;max-width:42ch;}
.body-copy{font-family:'Lora',serif;font-size:16px;line-height:1.75;color:var(--wood-700);margin:0;text-wrap:pretty;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 22px;min-height:48px;font-family:'Source Sans 3',sans-serif;font-weight:500;font-size:14.5px;letter-spacing:.04em;border-radius:4px;border:1px solid transparent;cursor:pointer;transition:background .2s var(--ease-out),color .2s var(--ease-out),border-color .2s var(--ease-out),transform .2s var(--ease-out);white-space:nowrap;}
.btn .arrow{transition:transform .24s var(--ease-out);display:inline-block;}
.btn:hover .arrow{transform:translateX(4px);}
.btn--primary{background:var(--wood-400);color:#FBF8F3;border-color:var(--wood-400);}
.btn--primary:hover{background:var(--wood-700);border-color:var(--wood-700);}
.btn--dark{background:var(--wood-900);color:#FBF8F3;}
.btn--dark:hover{background:var(--wood-800);}
.btn--ghost{background:transparent;color:var(--wood-900);border-color:var(--wood-700);}
.btn--ghost:hover{background:var(--wood-100);}
.btn--ghost-light{background:rgba(245,236,220,.1);color:#FBF8F3;border-color:rgba(245,236,220,.55);backdrop-filter:blur(6px);}
.btn--ghost-light:hover{background:rgba(245,236,220,.18);border-color:#FBF8F3;}
.btn--bosco{background:var(--bosco);color:#FBF8F3;}
.btn--bosco:hover{background:var(--bosco-scuro);}
.link-inline{font-family:'Source Sans 3',sans-serif;font-weight:500;font-size:14px;letter-spacing:.02em;color:var(--wood-900);display:inline-flex;align-items:center;gap:8px;padding-bottom:4px;border-bottom:1px solid var(--wood-400);transition:border-color .2s var(--ease-out);}
.link-inline:hover{border-color:var(--wood-900);}
/* Dentro un paragrafo il link segue il corpo del testo: niente corpo ridotto
   ne' cambio di carattere. In risalto con il peso e la riga sotto in ottone
   (richiesta cliente, 24 ago 2026). */
p .link-inline,li .link-inline,dd .link-inline{font-family:inherit;font-size:inherit;line-height:inherit;letter-spacing:0;display:inline;font-weight:600;color:var(--wood-900);padding-bottom:1px;border-bottom:2px solid var(--wood-400);}
p .link-inline:hover,li .link-inline:hover,dd .link-inline:hover{border-color:var(--wood-900);}
.link-inline .arrow{transition:transform .24s var(--ease-out);}
.link-inline:hover .arrow{transform:translateX(3px);}

/* ---------- Logo (inline SVG wordmark) ---------- */
.logo{display:flex;align-items:center;gap:11px;}
.logo__mark{width:34px;height:34px;flex:0 0 auto;}
.logo__txt{display:flex;flex-direction:column;line-height:1;}
.logo__txt b{font-family:'Source Sans 3',sans-serif;font-weight:700;font-size:18px;letter-spacing:.02em;color:var(--wood-900);}
.logo__txt span{font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:11px;letter-spacing:.34em;color:var(--wood-400);margin-top:3px;}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:80;background:rgba(245,236,220,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .24s var(--ease-out),background .24s var(--ease-out);}
.header.is-scrolled{border-bottom-color:rgba(90,62,39,.12);background:rgba(245,236,220,.96);}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;max-width:1280px;margin:0 auto;}
.header__right{display:flex;align-items:center;gap:10px;}
.header__call{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;background:var(--wood-900);color:#FBF8F3;border-radius:4px;font-family:'Source Sans 3',sans-serif;font-weight:500;font-size:13px;letter-spacing:.04em;transition:background .2s var(--ease-out);}
.header__call:hover{background:var(--wood-700);}
.header__call svg{stroke:currentColor;}
.header__call-label{display:none;}
@media(min-width:420px){.header__call-label{display:inline;}}
.header__burger{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(90,62,39,.25);border-radius:4px;color:var(--wood-900);}
.header__nav{display:none;}
@media(min-width:960px){
  .header__inner{padding:14px 36px;}
  .header__nav{display:flex;gap:28px;align-items:center;}
  /* le regole dei link di navigazione sono definite più sotto su .nav__link,
     per non colpire anche i link dentro il mega menu */
  .header__burger{display:none;}
}

/* ---------- Mobile drawer ---------- */
.drawer{position:fixed;inset:0;z-index:90;background:var(--wood-50);transform:translateX(100%);transition:transform .36s var(--ease-out);display:flex;flex-direction:column;overflow-y:auto;}
.drawer.is-open{transform:translateX(0);}
.drawer__top{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid rgba(90,62,39,.14);}
.drawer__close{width:44px;height:44px;background:transparent;border:1px solid rgba(90,62,39,.25);border-radius:4px;color:var(--wood-900);display:inline-flex;align-items:center;justify-content:center;}
.drawer__nav{display:flex;flex-direction:column;padding:24px 20px 12px;gap:0;}
.drawer__nav a{display:flex;justify-content:space-between;align-items:center;padding:17px 4px;font-family:'Playfair Display',serif;font-weight:500;font-size:22px;letter-spacing:-.01em;color:var(--wood-900);border-bottom:1px solid rgba(90,62,39,.12);}
.drawer__nav a span{color:var(--wood-400);font-size:18px;}
.drawer__foot{padding:26px 20px 40px;display:flex;flex-direction:column;gap:14px;}
.drawer__foot .btn{width:100%;}
.drawer__territorio{font-family:'Source Sans 3',sans-serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--wood-700);padding-top:20px;margin-top:4px;border-top:1px solid rgba(90,62,39,.14);}
.drawer__territorio strong{display:block;font-weight:600;color:var(--wood-900);margin-bottom:6px;letter-spacing:.14em;}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:640px;display:flex;align-items:flex-end;overflow:hidden;background:var(--wood-900);}
.hero__img{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.02);}
.hero__grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,29,18,.2) 0%,rgba(43,29,18,0) 30%,rgba(43,29,18,.2) 55%,rgba(43,29,18,.82) 100%);}
.hero__mark{position:absolute;top:22px;right:18px;font-family:'Source Sans 3',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(245,236,220,.72);display:flex;align-items:center;gap:10px;writing-mode:vertical-rl;transform:rotate(180deg);padding:20px 0;}
.hero__mark::after{content:'';width:1px;height:44px;background:rgba(245,236,220,.5);}
.hero__content{position:relative;padding:48px 22px 56px;color:#FBF8F3;max-width:780px;width:100%;}
.hero__eye{color:var(--wood-200);margin-bottom:18px;}
.hero__eye::before{background:var(--wood-300);}
.hero__title{font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(42px,10vw,88px);line-height:1.02;letter-spacing:-.022em;margin:0 0 22px;color:#FBF8F3;text-wrap:balance;}
.hero__title em{font-style:italic;font-weight:400;color:var(--wood-200);}
.hero__lead{font-family:'Lora',serif;font-style:italic;font-size:17px;line-height:1.55;color:rgba(245,236,220,.92);margin:0 0 28px;max-width:46ch;}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;}
.hero__meta{position:absolute;bottom:16px;right:20px;font-family:'Source Sans 3',sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,236,220,.6);display:none;}
@media(min-width:560px){.hero__meta{display:inline-flex;gap:14px;}}
@media(min-width:960px){.hero{min-height:780px;}.hero__content{padding:80px 48px 96px;}.hero__lead{font-size:20px;}}

/* ---------- Section shell ---------- */
.section{padding:72px 22px;max-width:1280px;margin:0 auto;}
.section--tint,.section--deep,.section--dark{max-width:none;padding-left:22px;padding-right:22px;}
.section--tint{background:var(--wood-100);}
.section--deep{background:var(--wood-200);}
.section--dark{background:var(--wood-900);color:var(--wood-100);}
.section--tint>.section__inner,.section--deep>.section__inner,.section--dark>.section__inner{max-width:1280px;margin:0 auto;}
.section--dark .section__title{color:#FBF8F3;}
.section--dark .body-copy{color:var(--wood-200);}
.section__head{max-width:660px;margin-bottom:40px;}
.section__head--row{max-width:1280px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;}
.section__head .eye{margin-bottom:14px;}
.section__title{font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(30px,5.2vw,50px);line-height:1.08;letter-spacing:-.02em;color:var(--wood-900);margin:0 0 16px;text-wrap:pretty;}
.section__title em{font-style:italic;font-weight:400;color:var(--wood-700);}
.section--dark .section__title em{color:var(--wood-300);}
.section__kicker{font-family:'Lora',serif;font-style:italic;font-size:17px;line-height:1.6;color:var(--wood-700);margin:0;max-width:54ch;}
.section--dark .section__kicker{color:var(--wood-200);}
@media(min-width:960px){.section,.section--tint,.section--deep,.section--dark{padding:112px 36px;}.section__head{margin-bottom:56px;}}

/* ---------- Collezioni ---------- */
.coll{display:grid;grid-template-columns:1fr;gap:24px;}
.coll__card{background:var(--wood-50);border:1px solid rgba(90,62,39,.14);overflow:hidden;transition:border-color .24s var(--ease-out);display:flex;flex-direction:column;}
.coll__card:hover{border-color:var(--wood-400);}
.coll__imgwrap{overflow:hidden;position:relative;}
.coll__img{aspect-ratio:4/5;background-size:cover;background-position:center;transition:transform .6s var(--ease-out);}
.coll__card:hover .coll__img{transform:scale(1.04);}
.coll__badge{position:absolute;top:14px;left:14px;font-family:'Source Sans 3',sans-serif;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#FBF8F3;background:rgba(43,29,18,.65);backdrop-filter:blur(4px);padding:6px 10px;border-radius:2px;}
.coll__body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1;}
.coll__name{font-family:'Playfair Display',serif;font-weight:500;font-size:24px;line-height:1.15;letter-spacing:-.01em;color:var(--wood-900);margin:0;}
.coll__name em{font-style:italic;font-weight:400;color:var(--wood-700);}
.coll__desc{font-family:'Lora',serif;font-size:15px;line-height:1.6;color:var(--wood-700);margin:0;}
.coll__spec{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:6px;padding-top:14px;border-top:1px solid rgba(90,62,39,.14);font-family:'Source Sans 3',sans-serif;font-size:12px;letter-spacing:.04em;color:var(--wood-700);}
.coll__spec span::before{content:'· ';color:var(--wood-400);margin-right:4px;}
.coll__spec span:first-child::before{content:'';margin-right:0;}
.coll__link{margin-top:auto;padding-top:8px;}
/* Tutta la card porta al link, immagine compresa: il link "Scopri la
   collezione" si estende invisibile sull'intera card (richiesta cliente,
   24 ago 2026). Stessa cosa sotto per le card delle guide. */
.coll__card{position:relative;}
.coll__link::after{content:"";position:absolute;inset:0;}
@media(min-width:720px){.coll{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.coll{grid-template-columns:repeat(4,1fr);gap:28px;}.coll__img{aspect-ratio:3/4;}}

/* ---------- Progetti ---------- */
.prog{display:grid;grid-template-columns:1fr;gap:20px;}
.prog__item{position:relative;overflow:hidden;background:var(--wood-200);cursor:pointer;}
.prog__img{aspect-ratio:4/5;background-size:cover;background-position:center;transition:transform .7s var(--ease-out);}
.prog__item:hover .prog__img{transform:scale(1.05);}
.prog__overlay{position:absolute;inset:auto 0 0 0;padding:20px;background:linear-gradient(180deg,rgba(43,29,18,0) 0%,rgba(43,29,18,.85) 100%);color:#FBF8F3;}
.prog__city{font-family:'Source Sans 3',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--wood-200);margin:0 0 6px;}
.prog__title{font-family:'Playfair Display',serif;font-weight:500;font-size:22px;line-height:1.2;letter-spacing:-.01em;margin:0 0 10px;color:#FBF8F3;}
.prog__title em{font-style:italic;font-weight:400;color:var(--wood-200);}
.prog__tags{display:flex;flex-wrap:wrap;gap:6px;}
.prog__tag{font-family:'Source Sans 3',sans-serif;font-size:11px;letter-spacing:.06em;padding:4px 10px;border-radius:2px;background:rgba(245,236,220,.14);color:#FBF8F3;border:1px solid rgba(245,236,220,.3);}
.prog__item--wide{grid-column:1/-1;}
@media(min-width:720px){
  .prog{grid-template-columns:repeat(6,1fr);gap:24px;}
  .prog__item{grid-column:span 3;}
  .prog__item--wide{grid-column:span 6;}
  .prog__item--wide .prog__img{aspect-ratio:16/9;}
  .prog__item--third{grid-column:span 2;}
}
.prog__foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-top:40px;padding-top:28px;border-top:1px solid rgba(90,62,39,.2);}
.prog__count{font-family:'Playfair Display',serif;font-size:20px;color:var(--wood-900);}
.prog__count strong{font-weight:500;color:var(--wood-400);font-size:28px;}
.prog__count em{font-style:italic;color:var(--wood-700);}

/* ---------- Storia ---------- */
.storia{display:grid;grid-template-columns:1fr;gap:36px;align-items:start;}
.storia__media{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.storia__media .img{width:100%;aspect-ratio:3/4;background-size:cover;background-position:center;}
.storia__media .img--wide{grid-column:1/-1;aspect-ratio:16/10;}
.storia__body{display:flex;flex-direction:column;gap:24px;}
.storia__quote{font-family:'Playfair Display',serif;font-style:italic;font-weight:400;font-size:clamp(22px,3.4vw,30px);line-height:1.35;color:var(--wood-900);margin:0;padding:20px 0 0;border-top:1px solid var(--wood-400);max-width:40ch;}
.storia__quote::before{content:'« ';color:var(--wood-400);}
.storia__quote::after{content:' »';color:var(--wood-400);}
.storia__attr{font-family:'Source Sans 3',sans-serif;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--wood-700);margin:10px 0 0;}
.storia__attr strong{color:var(--wood-900);font-weight:600;}
.timeline{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:0;}
.timeline li{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:18px 0;border-top:1px solid rgba(90,62,39,.14);align-items:baseline;}
.timeline li:last-child{border-bottom:1px solid rgba(90,62,39,.14);}
.timeline__year{font-family:'Playfair Display',serif;font-weight:500;font-size:20px;color:var(--wood-400);letter-spacing:-.01em;}
.timeline__what{font-family:'Lora',serif;font-size:15.5px;line-height:1.55;color:var(--wood-800);}
.timeline__what strong{color:var(--wood-900);font-weight:600;}
@media(min-width:900px){.storia{grid-template-columns:1fr 1fr;gap:72px;}.storia__media{position:sticky;top:92px;}}

/* ---------- Zone servite ---------- */
.zone{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;}
.zone__map{background:var(--wood-50);border:1px solid rgba(90,62,39,.14);padding:22px;position:relative;}
.zone__map svg{width:100%;height:auto;display:block;}
.zone__city{cursor:pointer;transition:fill .2s var(--ease-out),r .2s var(--ease-out);}
.zone__city circle{transition:fill .2s var(--ease-out);}
.zone__halo{fill:none;stroke:var(--wood-400);stroke-width:1.5;opacity:0;transition:opacity .25s var(--ease-out);}
.zone__city.is-active .zone__halo{opacity:.8;}
.zone__city .dot{fill:var(--wood-500);}
.zone__city:hover .dot,.zone__city.is-active .dot{fill:var(--wood-400);}
.zone__city-label{font-family:'Source Sans 3',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;fill:var(--wood-900);pointer-events:none;}
.zone__list{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid rgba(90,62,39,.14);}
.zone__prov{padding:18px 4px;border-bottom:1px solid rgba(90,62,39,.14);display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:background .2s var(--ease-out);}
.zone__prov:nth-child(odd){border-right:1px solid rgba(90,62,39,.14);padding-right:20px;}
.zone__prov:nth-child(even){padding-left:20px;}
.zone__prov.is-active{background:rgba(184,144,79,.1);}
.zone__prov-name{font-family:'Playfair Display',serif;font-weight:500;font-size:22px;color:var(--wood-900);margin:0;display:flex;align-items:center;gap:8px;}
.zone__prov-name::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--wood-400);opacity:0;transition:opacity .2s var(--ease-out);}
.zone__prov.is-active .zone__prov-name::before{opacity:1;}
.zone__prov-meta{font-family:'Source Sans 3',sans-serif;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--wood-700);}
.zone__claim{font-family:'Playfair Display',serif;font-style:italic;font-weight:400;font-size:clamp(24px,3.6vw,34px);line-height:1.25;color:var(--bosco);margin:20px 0 0;max-width:24ch;}
.zone__cta{margin-top:24px;}
@media(min-width:900px){.zone{grid-template-columns:1.1fr 1fr;gap:72px;}}

/* ---------- Showroom ---------- */
.shr{display:grid;grid-template-columns:1fr;gap:28px;align-items:stretch;}
/* Riquadro ORIZZONTALE, non verticale: la foto dello showroom (azienda.jpg,
   1360x765) e' un'inquadratura larga dell'ambiente. In un riquadro 4/5 il
   ritaglio "cover" ne mangiava il 55% della larghezza, cioe' quasi tutto lo
   showroom: restava la fetta centrale. A 3/2 se ne vede l'84%. */
.shr__img{aspect-ratio:3/2;background-size:cover;background-position:center;min-height:220px;}
.shr__card{background:#FBF8F3;padding:32px 26px;display:flex;flex-direction:column;gap:22px;border:1px solid rgba(90,62,39,.14);}
.shr__info{display:grid;gap:16px;}
.shr__info-row{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;padding-bottom:16px;border-bottom:1px solid rgba(90,62,39,.1);font-family:'Lora',serif;font-size:15.5px;line-height:1.55;color:var(--wood-800);}
.shr__info-row:last-child{border-bottom:0;padding-bottom:0;}
.shr__info-row svg{stroke:var(--wood-400);}
.shr__info-row strong{display:block;font-weight:600;color:var(--wood-900);font-family:'Source Sans 3',sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px;}
.shr__info-row a:hover{color:var(--wood-400);}
.shr__actions{display:flex;flex-wrap:wrap;gap:12px;}
@media(min-width:900px){.shr{grid-template-columns:1.2fr 1fr;gap:40px;}.shr__img{aspect-ratio:auto;min-height:560px;}.shr__card{padding:48px 40px;}}

/* ---------- Blog ---------- */
.blog{display:grid;grid-template-columns:1fr;gap:24px;}
.blog__card{background:transparent;border-top:1px solid rgba(90,62,39,.18);padding:22px 0 0;display:flex;flex-direction:column;gap:14px;}
.blog__imgwrap{overflow:hidden;}
.blog__img{aspect-ratio:16/10;background-size:cover;background-position:center;transition:transform .6s var(--ease-out);}
.blog__card:hover .blog__img{transform:scale(1.04);}
.blog__meta{display:flex;gap:12px;font-family:'Source Sans 3',sans-serif;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--wood-700);}
.blog__meta span:nth-child(2){color:var(--wood-400);}
.blog__title{font-family:'Playfair Display',serif;font-weight:500;font-size:22px;line-height:1.22;letter-spacing:-.01em;color:var(--wood-900);margin:0;}
.blog__title em{font-style:italic;font-weight:400;color:var(--wood-700);}
.blog__excerpt{font-family:'Lora',serif;font-size:15px;line-height:1.6;color:var(--wood-700);margin:0;}
.blog__link{margin-top:4px;}
.blog__card{position:relative;}
.blog__link::after{content:"";position:absolute;inset:0;}
@media(min-width:720px){.blog{grid-template-columns:repeat(3,1fr);gap:32px;}}

/* ---------- Split CTA ---------- */
.split{display:grid;grid-template-columns:1fr;gap:2px;background:rgba(245,236,220,.18);}
.split__card{padding:40px 28px 44px;display:flex;flex-direction:column;gap:18px;background:var(--wood-900);color:#FBF8F3;min-height:360px;position:relative;overflow:hidden;}
.split__card--bosco{background:var(--bosco);}
.split__card .eye{color:var(--wood-200);}
.split__card--bosco .eye{color:rgba(245,236,220,.78);}
.split__card .eye::before{background:var(--wood-300);}
.split__card--bosco .eye::before{background:rgba(245,236,220,.6);}
.split__title{font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(30px,5vw,44px);line-height:1.08;letter-spacing:-.02em;color:#FBF8F3;margin:0;}
.split__title em{font-style:italic;font-weight:400;color:var(--wood-200);}
.split__card--bosco .split__title em{color:rgba(245,236,220,.7);}
.split__body{font-family:'Lora',serif;font-size:16px;line-height:1.6;color:rgba(245,236,220,.88);margin:0;}
.split__list{list-style:none;padding:0;margin:8px 0 18px;display:grid;gap:10px;}
.split__list li{font-family:'Source Sans 3',sans-serif;font-size:13.5px;letter-spacing:.02em;color:rgba(245,236,220,.82);display:flex;gap:10px;align-items:baseline;}
.split__list li::before{content:'—';color:var(--wood-400);flex-shrink:0;}
.split__card--bosco .split__list li::before{color:rgba(245,236,220,.7);}
.split__cta{margin-top:auto;}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;}.split__card{padding:64px 48px;min-height:460px;}}

/* ---------- Contact form ---------- */
.contatti__grid{display:grid;grid-template-columns:1fr;gap:36px;}
.form-card{background:#FBF8F3;padding:28px 24px;border:1px solid rgba(90,62,39,.14);max-width:760px;}
.form-grid{display:grid;grid-template-columns:1fr;gap:16px;}
.form-row{display:grid;gap:6px;}
.form-row label{font-family:'Source Sans 3',sans-serif;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--wood-700);font-weight:500;}
.form-row input,.form-row select,.form-row textarea{font-family:'Lora',serif;font-size:16px;line-height:1.4;color:var(--wood-900);background:var(--wood-50);border:1px solid rgba(90,62,39,.2);padding:13px 14px;border-radius:3px;min-height:48px;width:100%;transition:border-color .18s var(--ease-out),box-shadow .18s var(--ease-out);}
.form-row select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235A3E27' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px;}
.form-row textarea{min-height:120px;resize:vertical;}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:none;border-color:var(--wood-400);box-shadow:0 0 0 3px rgba(184,144,79,.18);}
.form-consent{font-family:'Source Sans 3',sans-serif;font-size:12.5px;line-height:1.5;color:var(--wood-700);display:flex;gap:10px;align-items:flex-start;}
.form-consent a{text-decoration:underline;text-underline-offset:2px;}
.form-consent input{margin-top:3px;accent-color:var(--wood-400);min-height:auto;width:auto;}
.form-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.form-note{font-family:'Source Sans 3',sans-serif;font-size:12.5px;color:var(--wood-700);}
.form-error{flex:1 0 100%;margin:6px 0 0;font-family:'Source Sans 3',sans-serif;font-size:13.5px;line-height:1.5;color:#8B2E2E;background:rgba(139,46,46,.07);border-left:2px solid #8B2E2E;padding:10px 14px;}
.form-error[hidden]{display:none;}
/* Trappola anti-spam: nel DOM ma fuori dallo schermo, non raggiungibile col tab. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-sent{background:#FBF8F3;border:1px solid rgba(90,62,39,.14);padding:48px 32px;max-width:760px;text-align:center;display:none;}
.form-sent h3{font-family:'Playfair Display',serif;font-weight:500;font-size:30px;color:var(--wood-900);margin:0 0 12px;}
.form-sent p{font-family:'Lora',serif;font-style:italic;color:var(--wood-700);margin:0 0 24px;}
.contatti__aside{display:flex;flex-direction:column;gap:18px;font-family:'Lora',serif;}
.contatti__aside .ci{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:15.5px;color:var(--wood-800);}
.contatti__aside .ci svg{stroke:var(--wood-400);margin-top:2px;}
.contatti__aside .ci strong{display:block;font-family:'Source Sans 3',sans-serif;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--wood-900);margin-bottom:3px;}
@media(min-width:720px){.form-grid{grid-template-columns:1fr 1fr;}.form-row--full{grid-column:1/-1;}.form-card{padding:40px;}}
@media(min-width:960px){.contatti__grid{grid-template-columns:1.6fr 1fr;gap:56px;}}

/* ---------- Footer ---------- */
.footer{background:var(--wood-900);color:var(--wood-100);padding:64px 22px 24px;}
.footer__inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:40px;}
.footer__brand{display:flex;flex-direction:column;gap:16px;}
.footer__wordmark{font-family:'Playfair Display',serif;font-weight:500;font-size:28px;line-height:1;letter-spacing:-.01em;color:#FBF8F3;}
.footer__wordmark em{display:block;font-style:italic;font-weight:400;color:var(--wood-300);font-size:16px;letter-spacing:.14em;text-transform:uppercase;margin-top:10px;}
.footer__tag{font-family:'Lora',serif;font-style:italic;font-size:16px;line-height:1.5;color:var(--wood-200);margin:0;max-width:34ch;}
.footer__contact{display:grid;gap:10px;font-family:'Source Sans 3',sans-serif;font-size:14px;color:var(--wood-100);padding-top:16px;border-top:1px solid rgba(245,236,220,.14);}
.footer__contact a:hover{color:#FBF8F3;}
.footer__social{display:flex;gap:10px;margin-top:6px;}
.footer__social a{width:40px;height:40px;border:1px solid rgba(245,236,220,.2);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--wood-200);transition:background .18s var(--ease-out),border-color .18s var(--ease-out),color .18s var(--ease-out);}
.footer__social a:hover{background:var(--wood-400);border-color:var(--wood-400);color:#FBF8F3;}
/* Cinque colonne, ma senza numeri fissi: si dispongono da sole in base allo
   spazio, cosi' aggiungerne una domani non richiede di ritoccare il CSS. */
.footer__col ul{list-style:none;margin:0;padding:0;}
.footer__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:30px 26px;}
.footer__col h4{font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--wood-400);margin:0 0 16px;}
.footer__col ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;}
.footer__col ul a{font-family:'Lora',serif;font-size:15px;color:var(--wood-100);transition:color .18s var(--ease-out);}
.footer__col ul a:hover{color:#FBF8F3;}
.footer__cert{margin-top:26px;font-family:'Source Sans 3',sans-serif;font-size:12.5px;line-height:1.7;color:var(--wood-200);}
.footer__cert strong{display:block;color:var(--wood-400);font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px;}
.footer__legal{max-width:1280px;margin:48px auto 0;padding-top:24px;border-top:1px solid rgba(245,236,220,.14);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-family:'Source Sans 3',sans-serif;font-size:12px;letter-spacing:.04em;color:var(--pietra-400);}
.footer__legal a:hover{color:#FBF8F3;}
@media(min-width:900px){.footer{padding:96px 36px 36px;}.footer__inner{grid-template-columns:minmax(0,1.05fr) minmax(0,2.5fr);gap:56px;}
  .footer__cols{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(min-width:1200px){.footer__inner{grid-template-columns:minmax(0,1.35fr) minmax(0,3fr);gap:52px;}
  /* sopra i 1200 le cinque colonne stanno in fila: se le lascio disporre
     da sole, la colonna del marchio si allarga e ne butta giu' una. */
  .footer__cols{grid-template-columns:repeat(5,minmax(0,1fr));gap:30px 22px;}}

/* ---------- Floating ----------
   In basso, su telefono, convivono tre cose: WhatsApp, il badge di Iubenda
   (quello che riapre le preferenze sui cookie) e la barra Chiamaci/Preventivo.
   Sull'iPhone il badge finiva sopra al pulsante "Preventivo".

   Il badge lo disegna lo script di Iubenda, ma FINISCE NEL NOSTRO DOM
   (.floatable-wrapper > .iubenda-tp-btn): si sposta benissimo da qui, basta
   ripetere il loro !important. Una nota precedente in questo punto diceva che
   non si poteva toccare perche' stava "sul loro dominio": era sbagliata, ed e'
   il motivo per cui WhatsApp era stato spostato a sinistra di ripiego.

   Come funziona adesso:

   --flotta-basso  e' l'altezza da terra della riga WhatsApp+Iubenda, uguale
                   per entrambi. E' l'unico numero da cambiare per muoverli
                   tutti e due: sono elementi separati e senza una misura
                   condivisa si disallineano al primo ritocco.
   :root.barra-su  la riga sale sopra la barra Chiamaci/Preventivo quando la
                   barra c'e'. Il valore 88px non e' a caso: la barra sta a
                   16px da terra ed e' alta 60px (8+44+8), quindi 76px, piu'
                   12px d'aria.
   :root.flotta-giu  scrollando in giu' scendono e spariscono tutti e tre.
                   Solo da telefono: da computer la barra non esiste, niente
                   si copre, e due pulsanti che vanno e vengono darebbero solo
                   fastidio.
   --wa-alt        l'altezza di WhatsApp (56px da telefono, 60 da computer).
                   Serve a centrarci sopra il badge di Iubenda, che e' piu'
                   basso e di altezza ignota: la riga poggia su WhatsApp, il
                   piu' alto dei due, altrimenti il suo bordo finirebbe a tre
                   pixel dalla barra.

                   Come si centra il badge senza sapere quanto e' alto:
                   il "bottom" lo porta sulla LINEA DI CENTRO di WhatsApp
                   (--flotta-basso + meta' di --wa-alt), poi translateY(50%)
                   lo riabbassa di meta' della PROPRIA altezza. In translateY
                   la percentuale e' riferita all'elemento stesso, quindi il
                   conto lo fa il browser e resta giusto anche se Iubenda
                   cambia le dimensioni del badge.

                   Prima quell'altezza la misurava gp.js. Non funzionava: il
                   badge lo disegna il loro script e quando compare nel DOM
                   non ha ancora l'altezza definitiva, quindi il numero letto
                   era sbagliato e restava sbagliato. Non misurare e' meglio
                   che misurare al momento giusto. */
:root{--flotta-basso:16px;--wa-alt:56px;}
:root.barra-su{--flotta-basso:88px;}

.whatsapp{position:fixed;left:16px;right:auto;bottom:var(--flotta-basso);z-index:70;width:var(--wa-alt);height:var(--wa-alt);border-radius:50%;background:#25D366;color:#FBF8F3;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(37,211,102,.35),0 4px 10px rgba(43,29,18,.2);transition:transform .34s var(--ease-out),bottom .34s var(--ease-out),box-shadow .2s var(--ease-out);}
.whatsapp:hover{box-shadow:0 14px 36px rgba(37,211,102,.45),0 6px 14px rgba(43,29,18,.22);}
.whatsapp__ping{position:absolute;top:-2px;right:-2px;width:14px;height:14px;background:var(--wood-400);border:2px solid var(--wood-50);border-radius:50%;}

/* Il badge di Iubenda, portato sulla riga di WhatsApp.
   Il loro CSS mette bottom:0 piu' margin:16px, cioe' 16px da terra: qui il
   margine si azzera e l'altezza la decide --flotta-basso, la stessa di
   WhatsApp. Le due varianti (wrapper 2025 e pulsante da solo) ci sono
   entrambe perche' Iubenda aggiorna il widget senza avvisare: se cambia
   markup, una delle due regge.

   IL PREFISSO "html:root" NON E' DECORATIVO, non toglierlo. La loro regola
   e' .floatable-wrapper.iub-floatable-wrapper-2025[data-tp-float=bottom-right]
   {bottom:0!important}: stesso peso della nostra. A parita' di peso vince chi
   viene dopo, e il loro foglio lo inietta il loro script a pagina caricata,
   cioe' sempre dopo gp.css. Senza il prefisso il badge resta incollato in
   basso e finisce sopra al pulsante "Preventivo". */
html:root .floatable-wrapper.iub-floatable-wrapper-2025[data-tp-float^="bottom-"],
html:root .floatable-wrapper[data-tp-float^="bottom-"]{
  margin:0!important;left:auto!important;right:16px!important;
  bottom:calc(var(--flotta-basso) + var(--wa-alt) / 2)!important;
  transform:translateY(50%)!important;
  transition:transform .34s var(--ease-out),bottom .34s var(--ease-out);
}
html:root .iubenda-tp-btn:not(.iubenda-floatable-tb-btn)[data-tp-float^="bottom-"]{
  left:auto!important;right:16px!important;
  bottom:calc(var(--flotta-basso) + var(--wa-alt) / 2)!important;
  transform:translateY(50%)!important;
  transition:transform .34s var(--ease-out),bottom .34s var(--ease-out);
}

.sticky-call{position:fixed;left:12px;right:12px;bottom:16px;z-index:70;display:flex;gap:8px;padding:8px;background:rgba(43,29,18,.94);backdrop-filter:blur(10px);border-radius:6px;box-shadow:0 14px 40px rgba(43,29,18,.3);transform:translateY(140%);transition:transform .36s var(--ease-out);}
.sticky-call.is-visible{transform:translateY(0);}
.sticky-call a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 14px;min-height:44px;font-family:'Source Sans 3',sans-serif;font-weight:500;font-size:13.5px;letter-spacing:.04em;border-radius:4px;}
.sticky-call__call{background:var(--wood-400);color:#FBF8F3;}
.sticky-call__wa{background:rgba(245,236,220,.08);color:#FBF8F3;border:1px solid rgba(245,236,220,.2);}

/* Sparizione allo scroll in giu'. Solo telefono e tablet stretto.
   Si scende di tutta la propria altezza piu' lo spazio da terra: cosi' si
   esce davvero dallo schermo e non resta il bordo di sopra a spuntare. */
@media(max-width:899px){
  :root.flotta-giu .whatsapp{transform:translateY(calc(100% + var(--flotta-basso) + 20px));}
  :root.flotta-giu .sticky-call.is-visible{transform:translateY(140%);}

  /* Il badge di Iubenda NON segue la direzione dello scroll come gli altri
     due: obbedisce a "sono in cima o no". Si vede all'apertura, se ne va al
     primo scorrimento e torna solo tornando in cima.

     E' un adempimento che si usa una volta sola, o mai: tenerlo per tutta la
     lettura nell'angolo dove sta il pollice e' uno scambio sbagliato. Ma non
     lo si toglie del tutto, perche' il consenso dev'essere revocabile con la
     stessa facilita' con cui e' stato dato - e su iPhone tornare in cima e'
     un tocco sulla barra di stato.

     Il 50% che lo centra su WhatsApp non va perso: si somma, non si
     sostituisce. Il 150% complessivo piu' l'altezza da terra lo porta sotto
     lo schermo qualunque sia la sua altezza. */
  :root.cookie-via .floatable-wrapper[data-tp-float^="bottom-"],
  :root.cookie-via .iubenda-tp-btn:not(.iubenda-floatable-tb-btn)[data-tp-float^="bottom-"]{
    transform:translateY(calc(50% + 100% + var(--flotta-basso) + 40px))!important;
  }
}

/* Chi ha chiesto meno animazioni al sistema operativo non deve vedere niente
   scivolare: i pulsanti compaiono e spariscono e basta. */
@media(prefers-reduced-motion:reduce){
  .whatsapp,.sticky-call,
  .floatable-wrapper[data-tp-float^="bottom-"],
  .iubenda-tp-btn:not(.iubenda-floatable-tb-btn)[data-tp-float^="bottom-"]{transition:none!important;}
}

@media(min-width:900px){:root{--flotta-basso:28px;--wa-alt:60px;}.sticky-call{display:none;}.whatsapp{left:28px;}.whatsapp:hover{transform:translateY(-2px);}}
/* Saltando a un'ancora (#contatti dal pulsante "Preventivo", le voci di menu)
   il browser porta la sezione a filo del bordo superiore - ma li' sopra c'e'
   l'header fisso, che se la mangia. scroll-margin-top gli dice di fermarsi
   piu' in basso. L'altezza vera dell'header la misura gp.js e la scrive in
   --h-header; il 92px e' solo la rete se lo script non e' ancora partito. */
[id]{scroll-margin-top:calc(var(--h-header,92px) + 14px);}

body.no-scroll{overflow:hidden;}
.hbone-divider{height:22px;background-image:linear-gradient(135deg,transparent 46%,var(--wood-300) 46%,var(--wood-300) 54%,transparent 54%),linear-gradient(45deg,transparent 46%,var(--wood-300) 46%,var(--wood-300) 54%,transparent 54%);background-size:18px 18px;opacity:.35;max-width:200px;margin:0;}

/* =====================================================================
   AGGIUNTE PER IL SITO MULTI-PAGINA
   (mega menu, drawer ad accordion, hero pagine interne, breadcrumb,
    griglia superfici)
   ===================================================================== */

/* ---------- Header: nav multi-livello ---------- */
.header__inner{position:relative;}
.nav__link{display:inline-flex;align-items:center;gap:6px;font-family:'Source Sans 3',sans-serif;font-weight:500;font-size:14px;letter-spacing:.03em;color:var(--wood-800);padding:8px 0;position:relative;background:none;border:0;}
.nav__link::after{content:'';position:absolute;left:0;right:100%;bottom:2px;height:1px;background:var(--wood-400);transition:right .26s var(--ease-out);}
.nav__link:hover,.nav__link:focus-visible{color:var(--wood-900);}
.nav__link:hover::after{right:0;}
.nav__link .chev{transition:transform .24s var(--ease-out);flex:0 0 auto;}
.nav__item.is-open>.nav__link .chev{transform:rotate(180deg);}
.nav__link.is-current{color:var(--wood-900);}
.nav__link.is-current::after{right:0;background:var(--wood-900);}

/* Pannello mega (Pavimenti) — largo quanto il contenitore dell'header */
.mega,.drop{opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s var(--ease-out),transform .22s var(--ease-out),visibility .22s;z-index:85;}
.nav__item--mega{position:static;}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--bianco);border:1px solid rgba(90,62,39,.14);border-top:2px solid var(--wood-400);box-shadow:0 26px 60px -28px rgba(43,29,18,.45);padding:34px 36px 30px;}
/* Il pannello non deve mai uscire dallo schermo: quello che restava sotto il
   bordo era lì, visibile a metà e non cliccabile. Il contenitore del pannello
   è l'header (l'unico antenato posizionato), quindi il suo 100% è l'altezza
   dell'header: lo spazio buono è tutto il resto della finestra, meno un dito
   di margine. 100dvh perché su mobile la barra del browser entra ed esce. */
.mega{max-height:calc(100dvh - var(--h-header,92px) - 14px);overflow-y:auto;overscroll-behavior:contain;}
/* Nota: qui c'era `calc(100dvh - 100%)`. Sembrava giusto — il 100% e'
   l'altezza dell'header, che e' il contenitore del pannello — ma una
   percentuale in max-height vale solo se il contenitore ha un'altezza
   dichiarata. L'header e' alto quanto il suo contenuto, quindi in molti
   browser quella regola veniva semplicemente ignorata: il pannello
   usciva dallo schermo e non scorreva. Adesso l'altezza dell'header la
   misura gp.js e la scrive in --h-header. */
.mega::-webkit-scrollbar{width:10px;}
.mega::-webkit-scrollbar-thumb{background:rgba(90,62,39,.22);border-radius:6px;border:3px solid var(--bianco);}
.mega::-webkit-scrollbar-thumb:hover{background:rgba(90,62,39,.34);}
.mega{scrollbar-width:thin;scrollbar-color:rgba(90,62,39,.28) transparent;}
.mega__grid{display:grid;grid-template-columns:1.5fr 1.5fr 1fr 1fr;gap:30px;}
/* Menu per famiglie: nove voci invece di sessantatre. Tre colonne piu' la
   promo, e ogni voce porta il suo sottotitolo — cosi' il pannello resta
   basso e si legge in un colpo d'occhio invece che a fatica. */
.mega__grid--fam{grid-template-columns:repeat(3,1fr) .82fr;align-items:start;}
.mega__grid--fam .mega__list{gap:6px;}
.mega__grid--fam .mega__lead{padding:14px 10px 14px 0;}
.mega__grid--fam .mega__lead small{margin-top:4px;}
.mega__grid--fam .mega__promo-img{aspect-ratio:16/9;}
.mega__list--tutto{margin-top:18px;padding-top:14px;border-top:1px solid rgba(90,62,39,.14);}
.mega__list--tutto a{font-family:'Source Sans 3',sans-serif;font-size:13px;letter-spacing:.03em;color:var(--wood-400);}
.mega__list--tutto a:hover{color:var(--wood-900);background:none;padding-left:0;}
.mega__list.mega__list--2col{display:block;columns:2;column-gap:26px;margin-top:6px;}
.mega__list--2col li{break-inside:avoid;}
.mega__col{display:flex;flex-direction:column;}
.mega__head{font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--wood-400);margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid rgba(90,62,39,.14);}
.mega__list{list-style:none;padding:0;margin:0;display:grid;gap:2px;}
.mega__list a{display:block;font-family:'Lora',serif;font-size:14.5px;line-height:1.35;color:var(--wood-800);padding:7px 8px 7px 0;border-radius:3px;transition:color .16s var(--ease-out),padding .16s var(--ease-out);}
.mega__list a:hover{color:var(--wood-900);padding-left:8px;padding-right:0;background:rgba(184,144,79,.09);}
.mega__list a.is-current{color:var(--wood-900);font-weight:500;box-shadow:inset 2px 0 0 var(--wood-400);padding-left:10px;}
.mega__list .mega__lead{font-family:'Playfair Display',serif;font-size:17px;color:var(--wood-900);}
.mega__list small{display:block;font-family:'Source Sans 3',sans-serif;font-size:11.5px;letter-spacing:.02em;color:var(--pietra-400);margin-top:2px;}
.mega__promo{display:flex;flex-direction:column;gap:12px;background:var(--wood-900);color:var(--wood-100);padding:22px;}
.mega__promo-img{aspect-ratio:16/10;background-size:cover;background-position:center;}
.mega__promo h5{font-family:'Playfair Display',serif;font-weight:500;font-size:20px;line-height:1.2;color:#FBF8F3;margin:0;}
.mega__promo p{font-family:'Lora',serif;font-size:13.5px;line-height:1.5;color:var(--wood-200);margin:0;}
.mega__promo .link-inline{color:#FBF8F3;border-color:var(--wood-400);margin-top:auto;}

/* Dropdown compatto (Servizi, Azienda) */
.nav__item--drop{position:relative;}
.drop{position:absolute;top:100%;left:-16px;min-width:250px;background:var(--bianco);border:1px solid rgba(90,62,39,.14);border-top:2px solid var(--wood-400);box-shadow:0 22px 50px -26px rgba(43,29,18,.45);padding:12px;}
.drop{max-height:calc(100dvh - var(--h-header,92px) - 14px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;}
.drop a{display:block;font-family:'Lora',serif;font-size:14.5px;color:var(--wood-800);padding:10px 12px;border-radius:3px;transition:background .16s var(--ease-out),color .16s var(--ease-out);}
.drop a:hover{background:rgba(184,144,79,.1);color:var(--wood-900);}
.drop a small{display:block;font-family:'Source Sans 3',sans-serif;font-size:11.5px;color:var(--pietra-400);margin-top:2px;}

.nav__item:hover>.mega,.nav__item:hover>.drop,
.nav__item:focus-within>.mega,.nav__item:focus-within>.drop,
.nav__item.is-open>.mega,.nav__item.is-open>.drop{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s;}
/* Fra il fondo del link e il bordo dell'header ci sono ~20px scoperti: il
   mouse che scende verso il pannello perde l'hover e il menu inizia a
   richiudersi (su Safari si nota di piu'). Due rimedi che lavorano insieme:
   1. mentre la voce e' attiva, la sua area di hover si allunga fin sotto
      l'header (padding compensato dal margine: il layout non si muove; da
      chiusa non c'e', quindi non copre mai i click sulla pagina);
   2. la chiusura parte con un sesto di secondo di ritardo, cosi' uscire e
      rientrare per un pixel non fa sparire nulla. */
.nav__item--mega:hover,.nav__item--mega.is-open,
.nav__item--drop:hover,.nav__item--drop.is-open{padding-bottom:34px;margin-bottom:-34px;}
.mega,.drop{transition-delay:.16s;}

@media(min-width:960px){
  .header__nav{display:flex;gap:26px;align-items:center;}
  .header__burger{display:none;}
}
@media(min-width:1180px){.header__nav{gap:32px;}}

/* ---------- Drawer: accordion ---------- */
.drawer__nav .acc{border-bottom:1px solid rgba(90,62,39,.12);}
.drawer__nav .acc__head{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:17px 4px;background:none;border:0;text-align:left;font-family:'Playfair Display',serif;font-weight:500;font-size:22px;letter-spacing:-.01em;color:var(--wood-900);}
.drawer__nav .acc__head .chev{color:var(--wood-400);transition:transform .26s var(--ease-out);flex:0 0 auto;}
.drawer__nav .acc.is-open .acc__head .chev{transform:rotate(180deg);}
.drawer__nav .acc__panel{overflow:hidden;max-height:0;transition:max-height .34s var(--ease-out);}
.drawer__nav .acc.is-open .acc__panel{max-height:3000px;}
.drawer__nav .acc__panel-in{overflow:hidden;min-height:0;padding:2px 4px 18px;display:grid;gap:0;}
.drawer__nav .acc__group{font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--wood-400);padding:14px 0 6px;}
.drawer__nav .acc__panel a{display:flex;justify-content:space-between;align-items:center;font-family:'Lora',serif;font-weight:400;font-size:16px;color:var(--wood-800);padding:11px 0 11px 14px;border-bottom:0;border-left:1px solid rgba(90,62,39,.16);}
.drawer__nav .acc__panel a:active{color:var(--wood-400);}
.drawer__nav>a{display:flex;justify-content:space-between;align-items:center;padding:17px 4px;font-family:'Playfair Display',serif;font-weight:500;font-size:22px;letter-spacing:-.01em;color:var(--wood-900);border-bottom:1px solid rgba(90,62,39,.12);}
.drawer__nav>a span{color:var(--wood-400);font-size:18px;}
.drawer__nav a.is-current{color:var(--wood-400);}

/* ---------- Hero pagine interne ---------- */
.phero{position:relative;background:var(--wood-900);overflow:hidden;}
.phero__img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.55;}
.phero__grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,29,18,.55) 0%,rgba(43,29,18,.35) 45%,rgba(43,29,18,.88) 100%);}
.phero__inner{position:relative;max-width:1280px;margin:0 auto;padding:44px 22px 52px;color:#FBF8F3;}
.phero__title{font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(32px,7vw,62px);line-height:1.05;letter-spacing:-.02em;margin:14px 0 16px;color:#FBF8F3;text-wrap:balance;}
.phero__title em{font-style:italic;font-weight:400;color:var(--wood-200);}
.phero__lead{font-family:'Lora',serif;font-style:italic;font-size:17px;line-height:1.6;color:rgba(245,236,220,.9);margin:0;max-width:52ch;}
.phero .eye{color:var(--wood-200);}
.phero .eye::before{background:var(--wood-300);}
@media(min-width:960px){.phero__inner{padding:72px 36px 88px;}.phero__lead{font-size:19px;}}

/* ---------- Breadcrumb ---------- */
.crumb{max-width:1280px;margin:0 auto;padding:16px 22px;font-family:'Source Sans 3',sans-serif;font-size:12px;letter-spacing:.06em;color:var(--wood-700);display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.crumb a{color:var(--wood-700);}
.crumb a:hover{color:var(--wood-900);}
.crumb span[aria-current]{color:var(--wood-900);font-weight:600;}
.crumb .sep{color:var(--wood-400);}
@media(min-width:960px){.crumb{padding:18px 36px;}}

/* ---------- Griglia "Superfici" (home) ---------- */
.surf{display:grid;grid-template-columns:1fr;gap:16px;}
.surf__card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:190px;padding:22px;overflow:hidden;background:var(--wood-800);color:#FBF8F3;}
.surf__bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:.88;transition:transform .6s var(--ease-out),opacity .3s var(--ease-out);}
.surf__card:hover .surf__bg{transform:scale(1.05);opacity:1;}
.surf__card::after{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(43,29,18,0) 0%,rgba(43,29,18,.32) 42%,rgba(43,29,18,.88) 100%);}
.surf__name,.surf__desc,.surf__go{position:relative;z-index:1;}
.surf__name{font-family:'Playfair Display',serif;font-weight:500;font-size:23px;line-height:1.15;margin:0 0 6px;color:#FBF8F3;}
.surf__name em{font-style:italic;font-weight:400;color:var(--wood-200);}
.surf__desc{font-family:'Lora',serif;font-size:14px;line-height:1.5;color:rgba(245,236,220,.86);margin:0 0 12px;max-width:34ch;}
.surf__go{font-family:'Source Sans 3',sans-serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--wood-300);display:inline-flex;align-items:center;gap:8px;}
.surf__card:hover .surf__go{color:#FBF8F3;}
.surf__card--tall{min-height:260px;}
@media(min-width:660px){.surf{grid-template-columns:repeat(2,1fr);gap:18px;}}
@media(min-width:1024px){
  .surf{grid-template-columns:repeat(6,1fr);gap:20px;}
  .surf__card{grid-column:span 2;min-height:240px;padding:26px;}
  .surf__card--tall{grid-column:span 3;min-height:300px;}
}

/* ---------- Utility ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--wood-900);color:#FBF8F3;padding:12px 18px;font-family:'Source Sans 3',sans-serif;font-size:14px;}
.skip-link:focus{left:12px;top:12px;}
:focus-visible{outline:2px solid var(--wood-400);outline-offset:3px;}

/* =====================================================================
   COMPONENTI DELLE PAGINE INTERNE
   (blocco categoria, tessere prodotto, chip, box dati, tabella
    di confronto, FAQ, testo editoriale)
   ===================================================================== */

/* ---------- Testo editoriale ---------- */
.prose{max-width:70ch;}
.prose p{font-family:'Lora',serif;font-size:16.5px;line-height:1.75;color:var(--wood-700);margin:0 0 18px;text-wrap:pretty;}
.prose p strong{color:var(--wood-900);font-weight:600;}
.prose p:last-child{margin-bottom:0;}
.prose--lead p:first-child{font-size:19px;line-height:1.6;color:var(--wood-800);}
@media(min-width:960px){.prose--lead p:first-child{font-size:21px;}}

/* ---------- Box "in sintesi": i dati che contano, in chiaro ---------- */
.facts{background:var(--bianco);border:1px solid rgba(90,62,39,.16);border-left:3px solid var(--wood-400);padding:26px 24px;margin:36px 0 0;}
.facts h2,.facts h3{font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--wood-400);margin:0 0 18px;}
.facts dl{margin:0;display:grid;grid-template-columns:1fr;gap:0;}
.facts dt{font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--wood-700);padding-top:14px;}
/* Stesso difetto delle tessere dei contatti, in tre punti diversi: un
   indirizzo email o PEC e' una parola senza spazi, e su schermi stretti e'
   piu' larga della colonna che la ospita. Dove possono comparire, il testo
   deve poter andare a capo e la cella potersi stringere.
   Vedi la nota estesa su .tile__spec. */
.facts dd,.shr__info-row,.contatti__aside .ci{overflow-wrap:anywhere;min-width:0;}

.facts dd{font-family:'Lora',serif;font-size:16px;line-height:1.5;color:var(--wood-900);margin:4px 0 14px;padding-bottom:14px;border-bottom:1px solid rgba(90,62,39,.12);}
.facts dd:last-of-type{border-bottom:0;padding-bottom:0;margin-bottom:0;}
.facts a{border-bottom:1px solid var(--wood-400);}
@media(min-width:720px){
  .facts{padding:32px 34px;}
  .facts dl{grid-template-columns:190px 1fr;column-gap:28px;}
  .facts dt{padding-top:16px;border-top:1px solid rgba(90,62,39,.12);}
  .facts dd{margin:0;padding:16px 0;border-bottom:0;border-top:1px solid rgba(90,62,39,.12);}
  .facts dt:first-of-type,.facts dd:first-of-type{border-top:0;padding-top:0;}
}

/* ---------- Blocco categoria ---------- */
.cat{padding-top:56px;border-top:1px solid rgba(90,62,39,.16);margin-top:56px;}
.cat:first-of-type{border-top:0;padding-top:0;margin-top:0;}
.cat__head{display:grid;gap:22px;margin-bottom:30px;}
.cat__media{aspect-ratio:16/10;background-size:cover;background-position:center;}
.cat__intro{display:flex;flex-direction:column;gap:14px;}
.cat__title{font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(26px,4vw,38px);line-height:1.12;letter-spacing:-.02em;color:var(--wood-900);margin:0;}
.cat__title em{font-style:italic;font-weight:400;color:var(--wood-700);}
.cat__desc{font-family:'Lora',serif;font-size:16px;line-height:1.7;color:var(--wood-700);margin:0;max-width:62ch;}
.cat__actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.cat__count{font-family:'Source Sans 3',sans-serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--pietra-400);}
@media(min-width:900px){
  .cat__head{grid-template-columns:360px 1fr;gap:44px;align-items:center;}
  .cat__media{aspect-ratio:4/3;min-height:240px;}
}

/* ---------- Tessere prodotto (nome + marchio) ---------- */
.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.tile{display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-width:0;min-height:104px;padding:16px;background:var(--bianco);border:1px solid rgba(90,62,39,.14);transition:border-color .2s var(--ease-out),transform .2s var(--ease-out),box-shadow .2s var(--ease-out);}
.tile:hover{border-color:var(--wood-400);transform:translateY(-2px);box-shadow:0 12px 26px -18px rgba(43,29,18,.4);}
.tile__name{font-family:'Playfair Display',serif;font-weight:500;font-size:17px;line-height:1.2;letter-spacing:-.01em;color:var(--wood-900);margin:0;}
.tile__brand{font-family:'Source Sans 3',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--wood-400);margin:0;}
/* sottotitolo descrittivo: dice cos'è il prodotto, non chi lo fa */
/* min-width:0 sopra e overflow-wrap qui sono la coppia che impedisce alle
   tessere di essere tagliate. Una cella di griglia non si stringe sotto la
   larghezza del suo contenuto, e la parola piu' lunga detta il minimo: in
   contatti.html e' GIANLUCA.RAMPIN@GMAIL.COM, 176px in maiuscoletto contro i
   139 che offre la colonna su uno schermo da 390px. La griglia sfondava, e
   con body{overflow-x:hidden} le tessere di destra venivano tagliate invece
   che poter scorrere.
   "anywhere" e non "break-word": solo il primo riduce anche la larghezza
   minima calcolata dal browser, che e' cio' che fa rientrare la griglia. */
.tile__spec{font-family:'Source Sans 3',sans-serif;font-size:11.5px;font-weight:500;letter-spacing:.06em;line-height:1.45;color:var(--wood-700);margin:0;text-transform:uppercase;overflow-wrap:anywhere;}
.tile__spec b{font-weight:600;color:var(--wood-400);}
.tile--img{padding:0;min-height:0;overflow:hidden;}
.tile__imgwrap{position:relative;overflow:hidden;}
.tile--img .tile__img{aspect-ratio:4/3;background-size:cover;background-position:center;transition:transform .6s var(--ease-out);}
.tile--img:hover .tile__img{transform:scale(1.05);}
.tile--img .tile__body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:8px;}
.tile--img .tile__img{aspect-ratio:4/3;}
@media(min-width:1024px){.tile--img .tile__body{padding:20px 20px 22px;}}
/* Sul telefono le tessere di NAVIGAZIONE vanno a una colonna: la foto passa
   da 167x125 a 346x260, cioe' quattro volte l'area. Con una mediana di 5
   tessere per pagina la pagina si allunga di pochi pollici di scorrimento.

   Restano a due colonne quelle della GALLERIA, che hanno la lente: li' la
   tessera e' un provino e si tocca per vederla grande, quindi ingrandirla
   nella griglia non serve a niente e allungherebbe la pagina di 36 foto.

   Restano a due colonne anche le griglie di SOLO TESTO, che una foto non ce
   l'hanno e quindi non hanno il problema: senza questa condizione
   domande-frequenti.html andrebbe a una colonna con 116 tessere, e
   parquet-ceramiche con 72.

   Le due distinzioni le fa :has() leggendo il contenuto - "griglia che ha
   delle foto e NON contiene link con la lente" - invece di una classe da
   ricordarsi di scrivere su 122 pagine e in 9 generatori. In questo progetto
   le copie a mano si sono gia' disallineate due volte.

   LA SECONDA CONDIZIONE E' IN NEGATIVO DI PROPOSITO: un browser che non
   conosce :has() considera invalido l'intero selettore e butta via la regola,
   ritrovandosi le due colonne di oggi. Il caso peggiore e' "come prima", non
   "rotto". */
@media(max-width:559px){
  .tiles:has(.tile--img):not(:has(a[data-lb])){grid-template-columns:1fr;gap:16px;}
}

@media(min-width:620px){.tiles{grid-template-columns:repeat(3,1fr);gap:16px;}}
@media(min-width:1024px){.tiles{grid-template-columns:repeat(4,1fr);gap:18px;}.tile{min-height:118px;padding:20px;}.tile__name{font-size:19px;}}

/* ---------- Telefono: piu' spazio al contenuto ----------
   Tre correzioni che valgono solo sotto i 560px.

   1. MARGINE LATERALE da 22 a 18px. Sembra niente: su uno schermo da 360px
      sono 8px in piu' per ogni foto, il 5% di larghezza, gratis. Va cambiato
      su TUTTI i contenitori insieme - sezioni, hero, briciole, footer -
      perche' si allineano fra loro: cambiarne uno solo lascia il bordo
      sinistro seghettato mentre si scorre, e si nota.

   2. STACCO VERTICALE da 72 a 52px. Su un telefono 72px sono un terzo di
      schermata vuota fra un blocco e l'altro: e' una delle ragioni per cui
      tutto sembra piccolo e lontano.

   3. SOTTOTITOLO DELLE TESSERE da 11,5 a 12,5px, con meno spaziatura fra le
      lettere. E' scritto in maiuscoletto, e il maiuscolo sotto i 12px si
      legge a fatica: le lettere hanno tutte la stessa altezza e la parola
      perde la sagoma che l'occhio riconosce a colpo d'occhio. */
@media(max-width:559px){
  .section{padding:52px 18px;}
  .section--tint,.section--deep,.section--dark{padding-left:18px;padding-right:18px;}
  .hero__content{padding:44px 18px 52px;}
  .phero__inner{padding:40px 18px 48px;}
  .crumb{padding:14px 18px;}
  .footer{padding:56px 18px 24px;}
  .tile__spec{font-size:12.5px;letter-spacing:.045em;}
}

/* ---------- Chip (elenchi lunghi senza pagina dedicata) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;}
.chips li{font-family:'Source Sans 3',sans-serif;font-size:13px;letter-spacing:.04em;color:var(--wood-800);background:var(--bianco);border:1px solid rgba(90,62,39,.16);border-radius:3px;padding:8px 13px;}
.chips--link li{padding:0;}
.chips--link a{display:block;padding:8px 13px;transition:background .16s var(--ease-out),border-color .16s var(--ease-out);}
.chips--link li:hover{border-color:var(--wood-400);}

/* ---------- Tabella di confronto ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid rgba(90,62,39,.16);background:var(--bianco);}
.tbl{width:100%;min-width:660px;border-collapse:collapse;font-family:'Source Sans 3',sans-serif;font-size:14px;}
.tbl caption{text-align:left;font-family:'Source Sans 3',sans-serif;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--wood-400);font-weight:600;padding:0 0 14px;}
.tbl th,.tbl td{text-align:left;padding:14px 16px;border-bottom:1px solid rgba(90,62,39,.12);vertical-align:top;line-height:1.5;}
.tbl thead th{font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--wood-700);background:var(--wood-50);border-bottom:1px solid rgba(90,62,39,.2);white-space:nowrap;}
.tbl tbody th{font-family:'Playfair Display',serif;font-weight:500;font-size:17px;letter-spacing:-.01em;color:var(--wood-900);white-space:nowrap;}
.tbl tbody th a{border-bottom:1px solid var(--wood-400);}
.tbl td{color:var(--wood-700);}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0;}
.tbl tbody tr:hover td,.tbl tbody tr:hover th{background:rgba(184,144,79,.06);}

/* ---------- FAQ ---------- */
.faq{max-width:820px;border-top:1px solid rgba(90,62,39,.16);}
.faq details{border-bottom:1px solid rgba(90,62,39,.16);}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:22px 4px;}
.faq summary h3{font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(19px,2.4vw,23px);line-height:1.3;letter-spacing:-.01em;color:var(--wood-900);margin:0;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+';font-family:'Source Sans 3',sans-serif;font-size:22px;font-weight:300;color:var(--wood-400);flex:0 0 auto;transition:transform .24s var(--ease-out);line-height:1;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details>div{padding:0 4px 24px;max-width:66ch;}
.faq details>div p{font-family:'Lora',serif;font-size:16px;line-height:1.75;color:var(--wood-700);margin:0 0 14px;}
.faq details>div p:last-child{margin-bottom:0;}
.faq details>div a{border-bottom:1px solid var(--wood-400);color:var(--wood-900);}

/* ------------------------------------------------------------------
   13. Scheda prodotto (struttura, caratteristiche, formati, finiture, AR)
   Usate dalle pagine di singola collezione. Nessuna pagina le duplica.
------------------------------------------------------------------ */
.split2{display:grid;grid-template-columns:1fr;gap:32px;align-items:center;}
.split2__media img{width:100%;height:auto;display:block;}
.split2__media img.blend{mix-blend-mode:multiply;}
@media(min-width:900px){.split2{grid-template-columns:1fr 1fr;gap:64px;}.split2--rev .split2__media{order:2;}}

.strut{list-style:none;margin:26px 0 0;padding:0;counter-reset:strato;}
.strut li{counter-increment:strato;display:grid;grid-template-columns:34px 1fr;gap:16px;padding:16px 0;border-top:1px solid rgba(90,62,39,.16);}
.strut li::before{content:counter(strato)'°';font-family:'Playfair Display',serif;font-size:19px;color:var(--wood-400);line-height:1.3;}
.strut b{display:block;font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--wood-700);margin-bottom:5px;}
.strut span{font-family:'Lora',serif;font-size:15.5px;line-height:1.6;color:var(--wood-900);}

.feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(90,62,39,.16);border:1px solid rgba(90,62,39,.16);}
.feats li{background:var(--bianco);padding:22px 16px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;}
.feats img{width:40px;height:40px;opacity:.62;}
.feats span{font-family:'Source Sans 3',sans-serif;font-size:12.5px;font-weight:500;letter-spacing:.05em;line-height:1.4;color:var(--wood-800);}
@media(min-width:700px){.feats{grid-template-columns:repeat(4,1fr);}}

.fmt{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.fmt li{background:var(--bianco);border:1px solid rgba(90,62,39,.14);padding:18px 16px;}
.fmt b{display:block;font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--wood-400);margin-bottom:10px;}
.fmt dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;}
.fmt dt{font-family:'Source Sans 3',sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--wood-700);padding-top:3px;}
.fmt dd{margin:0;font-family:'Lora',serif;font-size:15px;line-height:1.45;color:var(--wood-900);}
@media(min-width:700px){.fmt{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1100px){.fmt{grid-template-columns:repeat(6,1fr);}}

.fin__ess{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--wood-700);margin:56px 0 4px;padding-bottom:10px;border-bottom:1px solid rgba(90,62,39,.2);}
.fin__ess:first-of-type{margin-top:0;}
.fin__ess em{font-style:italic;font-family:'Lora',serif;text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:400;color:var(--wood-400);}
.fin__ess b{margin-left:auto;font-weight:500;font-size:10.5px;letter-spacing:.12em;color:var(--wood-400);}
.fin__ess-tag{display:block;font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--wood-700);margin-bottom:3px;}
.fin{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.fin li{position:relative;}
.fin figure{margin:0;}
.fin img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block;background:var(--wood-50);}
.fin figcaption{padding:7px 1px 0;}
.fin__code{display:block;font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:9.5px;letter-spacing:.12em;color:var(--wood-400);}
.fin__name{display:block;font-family:'Lora',serif;font-size:12.5px;line-height:1.3;color:var(--wood-900);margin-top:1px;}
.fin__ar{position:absolute;top:6px;right:6px;background:rgba(43,29,18,.78);color:#fff;border:0;cursor:pointer;font-family:'Source Sans 3',sans-serif;font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:4px 6px;border-radius:2px;transition:background .18s var(--ease-out);}
.fin__ar:hover,.fin__ar:focus-visible{background:var(--bosco,#2f4034);}
@media(min-width:560px){.fin{grid-template-columns:repeat(4,1fr);}}
@media(min-width:820px){.fin{grid-template-columns:repeat(6,1fr);gap:12px;}}
@media(min-width:1150px){.fin{grid-template-columns:repeat(8,1fr);}}

.armod[hidden]{display:none;}
.armod{position:fixed;inset:0;z-index:120;background:rgba(24,16,9,.86);display:flex;align-items:center;justify-content:center;padding:20px;}
.armod__box{background:var(--bianco);width:min(680px,100%);max-height:92vh;overflow:auto;padding:22px;position:relative;}
.armod__close{position:absolute;top:10px;right:12px;background:none;border:0;font-size:26px;line-height:1;color:var(--wood-700);cursor:pointer;padding:6px;}
.armod__title{font-family:'Playfair Display',serif;font-weight:500;font-size:22px;color:var(--wood-900);margin:0 0 4px;padding-right:34px;}
.armod__sub{font-family:'Source Sans 3',sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--wood-400);margin:0 0 16px;}
.armod model-viewer{width:100%;height:min(56vh,420px);background:var(--wood-50);display:block;}
.armod__note{font-family:'Lora',serif;font-size:14px;line-height:1.6;color:var(--wood-700);margin:16px 0 0;}

/* ------------------------------------------------------------------
   14. Lightbox (immagine grande navigabile)
   Il markup del modale lo crea gp.js: le pagine mettono solo
   <a data-lb="<gruppo>" href="<foto grande>" data-lb-cap="<didascalia>">.
   Senza JavaScript il link apre comunque la foto, quindi non si perde nulla.
------------------------------------------------------------------ */
.lb[hidden]{display:none;}
.lb{position:fixed;inset:0;z-index:130;background:rgba(24,16,9,.93);display:flex;align-items:center;justify-content:center;padding:56px 16px 72px;}
.lb__fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%;}
.lb__img{max-width:min(1280px,94vw);max-height:78vh;width:auto;height:auto;object-fit:contain;display:block;background:rgba(255,255,255,.04);}
.lb__cap{font-family:'Lora',serif;font-size:15px;line-height:1.5;color:rgba(250,244,235,.86);text-align:center;margin:0;max-width:60ch;}
.lb__count{position:absolute;top:20px;left:22px;font-family:'Source Sans 3',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.14em;color:rgba(250,244,235,.6);margin:0;}
.lb__close{position:absolute;top:12px;right:14px;background:none;border:0;cursor:pointer;padding:10px;line-height:0;color:rgba(250,244,235,.8);transition:color .18s var(--ease-out);}
.lb__close:hover,.lb__close:focus-visible{color:#fff;}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border:1px solid rgba(250,244,235,.28);background:rgba(24,16,9,.5);color:rgba(250,244,235,.9);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s var(--ease-out),border-color .18s var(--ease-out);}
.lb__nav:hover,.lb__nav:focus-visible{background:var(--wood-400);border-color:var(--wood-400);color:#fff;}
.lb__nav[hidden]{display:none;}
.lb__nav--prev{left:14px;}
.lb__nav--next{right:14px;}
@media(min-width:900px){.lb__nav--prev{left:28px;}.lb__nav--next{right:28px;}}
/* la miniatura cliccabile: eredita il layout in cui sta, cambia solo il cursore.
   Niente display:block generico, altrimenti sovrascriverebbe il flex di .tile */
a[data-lb]{cursor:zoom-in;}
.fin a[data-lb]{display:block;line-height:0;}
.split2__media a[data-lb]{display:block;}

/* ------------------------------------------------------------------
   14. Scala dei formati (SVG generato da assets/tools/scala_formati.py)
------------------------------------------------------------------ */
.scala{margin:0;}
.scala__viz{position:relative;}
.scala__svg{width:100%;height:auto;display:block;}
.scala__viz--lg{display:none;}
@media(min-width:760px){.scala__viz--sm{display:none;}.scala__viz--lg{display:block;}}

.scala__tacca{stroke:rgba(90,62,39,.2);stroke-width:1;stroke-dasharray:2 6;}
.scala__base{stroke:rgba(90,62,39,.45);stroke-width:1.2;}
.scala__quota{fill:var(--wood-500);font-family:'Source Sans 3',sans-serif;letter-spacing:.06em;text-anchor:end;}
.scala__uomo{fill:var(--wood-200);}
.scala__uomo-lbl{fill:var(--pietra-400);font-family:'Source Sans 3',sans-serif;letter-spacing:.1em;}
.scala__legno{}
.scala__vene{fill:none;stroke:var(--wood-400);stroke-width:.6;opacity:.5;}
.scala__bordo{fill:none;stroke:var(--wood-500);stroke-width:1;}
.scala__num{fill:var(--wood-500);font-family:'Source Sans 3',sans-serif;font-weight:600;letter-spacing:.04em;}

/* le plance crescono dalla base, una dopo l'altra, al primo scroll */
.scala__tacche,.scala__uomo,.scala__uomo-lbl{opacity:0;transition:opacity .7s ease;}
.scala.is-in .scala__tacche{opacity:1;}
.scala.is-in .scala__uomo,.scala.is-in .scala__uomo-lbl{opacity:1;transition-delay:.18s;}
.scala__plancia{transform:scaleY(.02);transition:transform 1s var(--ease-out);transition-delay:calc(var(--i)*90ms + 260ms);}
.scala.is-in .scala__plancia{transform:scaleY(1);}
.scala__vene,.scala__num{opacity:0;transition:opacity .6s ease;transition-delay:calc(var(--i)*90ms + 900ms);}
.scala.is-in .scala__vene{opacity:.5;}
.scala.is-in .scala__num{opacity:1;}

/* passando sulla legenda si isola la plancia corrispondente */
.scala__g{transition:opacity .25s var(--ease-out);}
.scala[data-hi] .scala__g{opacity:.22;}
.scala[data-hi] .scala__g.is-hi{opacity:1;}

.scala__legenda{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(90,62,39,.14);border:1px solid rgba(90,62,39,.14);}
.scala__legenda li{background:var(--bianco);padding:14px;display:flex;gap:11px;align-items:baseline;transition:background .2s var(--ease-out);}
.scala__legenda li:hover,.scala__legenda li:focus-visible{background:var(--wood-50);outline:none;}
.scala__legenda li.scala__vuota{background:var(--bianco);}
@media(min-width:1080px){.scala__legenda li.scala__vuota{display:none;}}
.scala__n{font-family:'Playfair Display',serif;font-size:17px;color:var(--wood-400);min-width:13px;}
.scala__t b{display:block;font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--wood-800);}
.scala__t span{display:block;font-family:'Lora',serif;font-size:13.5px;line-height:1.45;color:var(--wood-700);margin-top:3px;}
@media(min-width:620px){.scala__legenda{grid-template-columns:repeat(4,1fr);}}
@media(min-width:1080px){.scala__legenda{grid-template-columns:repeat(7,1fr);}}
.scala__nota{font-family:'Source Sans 3',sans-serif;font-size:12.5px;line-height:1.6;color:var(--pietra-400);margin:16px 0 0;max-width:62ch;}

/* ------------------------------------------------------------------
   15. Galleria di ambienti + comparsa al primo scroll
------------------------------------------------------------------ */
.amb{display:grid;grid-template-columns:1fr;gap:12px;}
.amb figure{margin:0;overflow:hidden;background:var(--wood-100);}
.amb img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform 1.1s var(--ease-out);}
.amb figure:hover img{transform:scale(1.045);}
@media(min-width:760px){
  .amb{grid-template-columns:repeat(12,1fr);gap:14px;}
  .amb figure:nth-child(1){grid-column:span 7;}
  .amb figure:nth-child(2){grid-column:span 5;}
  .amb figure:nth-child(3){grid-column:span 5;}
  .amb figure:nth-child(4){grid-column:span 7;}
  .amb img{aspect-ratio:16/10;}
}

/* comparsa generica: si attiva con data-anima + .is-in (vedi gp.js) */
[data-anima]{--i:0;}
.rivela{opacity:0;transform:translateY(20px);transition:opacity .75s var(--ease-out),transform .75s var(--ease-out);transition-delay:calc(var(--i)*110ms);}
.is-in .rivela,.rivela.is-in{opacity:1;transform:none;}

@media(prefers-reduced-motion:reduce){
  .scala__plancia,.scala__vene,.scala__num,.scala__tacche,.scala__uomo,.scala__uomo-lbl,
  .rivela,.amb img{transition:none!important;transform:none!important;opacity:1!important;}
  .scala.is-in .scala__vene{opacity:.5!important;}
}

/* ------------------------------------------------------------------
   16. Sezioni fuori schermo: si disegnano quando servono

   Quasi tutte le foto del sito sono sfondi CSS, e uno sfondo CSS non
   conosce loading="lazy": il browser lo scarica appena legge la regola,
   anche se sta a dodicimila pixel più in basso. La home partiva così con
   36 immagini e quasi 5 MB prima ancora che si scorresse.
   Con content-visibility il browser salta le sezioni lontane — niente
   layout, niente disegno e soprattutto niente download — e le prepara
   quando ci si avvicina. Se il browser non lo conosce, non cambia nulla.
   contain-intrinsic-size dà una stima dell'altezza (900 px, la media
   delle nostre sezioni) e `auto` fa sì che, una volta misurata davvero,
   quella misura resti.
------------------------------------------------------------------ */
@supports (content-visibility:auto){
  main>section:not(.hero){content-visibility:auto;contain-intrinsic-size:auto 900px;}
  /* La sezione della storia ha dentro un'immagine sticky: con la
     containment lo sticky smette di agganciarsi e la foto scorre via.
     Quella sezione resta quindi sempre disegnata. */
  main>section:has(.storia__media){content-visibility:visible;}
}

/* ------------------------------------------------------------------
   16. Video animati (esterni)
   Il file parte solo quando il video entra nello schermo: vedi gp.js.
   Markup: <figure class="vid"><div class="vid__box"><video …></div>
           <figcaption>…</figcaption></figure>
------------------------------------------------------------------ */
.vid{margin:0;}
.vid__box{position:relative;overflow:hidden;background:var(--wood-50);border:1px solid rgba(90,62,39,.14);}
.vid__box video{width:100%;height:auto;display:block;}
.vid figcaption{font-family:'Source Sans 3',sans-serif;font-size:12.5px;line-height:1.5;letter-spacing:.02em;color:var(--wood-700);padding:10px 2px 0;}
.vid figcaption b{font-weight:600;color:var(--wood-900);}
.vid-duo{display:grid;grid-template-columns:1fr;gap:22px;}
@media(min-width:820px){.vid-duo{grid-template-columns:1fr 1fr;gap:26px;}}

/* ------------------------------------------------------------------
   Simulatore d'ambiente SKEMA (Roomvo)
   Il pulsante sta sopra al campione, come quello dell'AR sulle collezioni
   in legno: stessa posizione e stessa taglia, così le due schede si
   comportano allo stesso modo. Lo script del simulatore viene caricato
   al primo click (vedi gp.js).
------------------------------------------------------------------ */
.fin__vis{position:absolute;top:6px;right:6px;background:rgba(43,29,18,.78);color:#fff;border:0;cursor:pointer;font-family:'Source Sans 3',sans-serif;font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:4px 6px;border-radius:2px;transition:background .18s var(--ease-out);}
.fin__vis:hover,.fin__vis:focus-visible{background:var(--bosco,#2f4034);}
.fin__vis.is-loading{opacity:.6;cursor:progress;}
.fin__vis.is-loading::after{content:'…';}
.fin__spec{display:block;font-family:'Source Sans 3',sans-serif;font-size:10px;letter-spacing:.04em;color:var(--wood-400);margin-top:2px;}

/* riquadro che spiega il simulatore, in testa alla griglia dei decorativi */
.vis{display:flex;flex-wrap:wrap;align-items:center;gap:18px;background:var(--bianco);border:1px solid rgba(90,62,39,.16);border-left:3px solid var(--bosco,#2f4034);padding:20px 22px;margin:0 0 26px;}
.vis__txt{flex:1 1 320px;margin:0;font-family:'Lora',serif;font-size:15.5px;line-height:1.6;color:var(--wood-700);}
.vis__txt b{color:var(--wood-900);font-weight:600;}
.vis__err{flex:1 1 100%;margin:0;font-family:'Source Sans 3',sans-serif;font-size:13.5px;color:#8a3b2a;}
.btn--vis{flex:0 0 auto;}

/* etichetta "fuori produzione" sulle schede dei prodotti usciti di catalogo */
.dismesso{background:#f6efe6;border:1px solid rgba(90,62,39,.22);border-left:3px solid #a2653a;padding:22px 24px;margin:0 0 30px;}
.dismesso h2{font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#a2653a;margin:0 0 12px;}
.dismesso p{font-family:'Lora',serif;font-size:16px;line-height:1.65;color:var(--wood-800);margin:0 0 14px;}
.dismesso p:last-child{margin-bottom:0;}
.tag-off{display:inline-block;font-family:'Source Sans 3',sans-serif;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#a2653a;border:1px solid #a2653a;border-radius:2px;padding:3px 7px;vertical-align:middle;margin-left:8px;}

/* ------------------------------------------------------------------
   17. Sotto-menu: la freccetta accanto alla famiglia

   Il pannello resta corto — nove famiglie — e chi vuole vedere le
   singole pagine apre il ramo che gli interessa. Vale uguale sul
   computer e sul telefono, perché il contenuto viene dallo stesso
   file (parti/menu.json).

   L'apertura usa max-height con un tetto abbondante: la strada
   elegante (griglia da 0fr a 1fr) su Safari per Mac non espandeva
   la riga, e un menu che non si apre vale meno di un'animazione
   perfetta. Il tetto deve restare sopra l'elenco più lungo.
------------------------------------------------------------------ */
.fam__riga{display:flex;align-items:flex-start;gap:6px;}
.fam__riga>a{flex:1 1 auto;min-width:0;}
.fam__apri{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin-top:9px;padding:0;background:none;border:0;border-radius:4px;color:var(--wood-400);cursor:pointer;transition:background .16s var(--ease-out),color .16s var(--ease-out);}
.fam__apri:hover{background:rgba(184,144,79,.14);color:var(--wood-900);}
.fam__apri:focus-visible{outline:2px solid var(--wood-400);outline-offset:2px;}
.fam__apri .chev{transition:transform .26s var(--ease-out);}
.fam.is-aperta>.fam__riga .fam__apri .chev{transform:rotate(180deg);}

/* Prima qui c'era grid-template-rows 0fr->1fr: Safari su Mac non espandeva
   la riga e il sotto-menu restava invisibile anche da aperto (la freccia
   girava, l'elenco no). max-height e' meno elegante ma si apre ovunque. */
.fam__sub{overflow:hidden;max-height:0;transition:max-height .3s var(--ease-out);}
.fam.is-aperta>.fam__sub{max-height:900px;}
.fam__sub>ul{overflow:hidden;min-height:0;list-style:none;margin:0;padding:0;}

.mega .fam__sub>ul{margin:2px 0 10px 2px;padding-left:2px;border-left:1px solid rgba(90,62,39,.16);}
.mega .fam__sub a{display:block;font-family:'Lora',serif;font-size:13.5px;line-height:1.3;color:var(--pietra-400);padding:6px 8px 6px 12px;border-radius:3px;}
.mega .fam__sub a:hover{color:var(--wood-900);background:rgba(184,144,79,.09);}
.mega .fam__sub--fitto>ul{columns:2;column-gap:16px;}
.mega .fam__sub--fitto li{break-inside:avoid;}

.drawer__nav .fam--drawer .fam__riga{align-items:center;gap:0;}
.drawer__nav .fam--drawer .fam__riga>a{flex:1 1 auto;}
.drawer__nav .fam__apri{width:44px;height:44px;margin:0;}
.drawer__nav .fam__sub>ul{margin-left:14px;border-left:1px solid rgba(90,62,39,.16);}
.drawer__nav .fam__sub a{font-size:15px;color:var(--pietra-400);padding-left:14px;border-left:0;}


/* ------------------------------------------------------------------
   18. Banner promozionale (lo accende e lo scrive l'area riservata)

   E' una finestra che si apre sopra la home dopo un attimo, per dire
   che in magazzino c'e' materiale pronto. Il testo non sta qui ne'
   nell'HTML scritto a mano: lo riscrive il pannello di gestione dentro
   index.html, fra i commenti <!-- promo:inizio --> e <!-- promo:fine -->.
   Se il database non risponde, in pagina resta l'ultima versione
   pubblicata: il sito non se ne accorge.

   La palette e' quella di sempre: la versione sul sito vecchio usava
   gia' gli stessi valori scritti a mano (#B8904F, #2B1D12), qui sono
   le variabili, cosi' se un domani cambia il marrone cambia anche qui.

   Sta sotto al lightbox (130) e sopra a tutto il resto: se il
   visitatore apre una foto mentre il banner e' aperto, la foto vince.
------------------------------------------------------------------ */
.promo[hidden]{display:none;}
.promo{position:fixed;inset:0;z-index:125;display:flex;align-items:center;justify-content:center;padding:16px;}
.promo__velo{position:absolute;inset:0;background:rgba(43,29,18,.72);backdrop-filter:blur(4px);}

.promo__card{position:relative;display:flex;flex-direction:column;width:min(860px,100%);max-height:92vh;overflow:auto;overscroll-behavior:contain;background:var(--bianco);border-radius:6px;box-shadow:0 30px 80px rgba(43,29,18,.5);opacity:0;transform:translateY(20px);transition:opacity .38s var(--ease-out),transform .38s var(--ease-out);}
.promo.is-visible .promo__card{opacity:1;transform:none;}

.promo__chiudi{position:absolute;top:10px;right:10px;z-index:3;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;background:rgba(43,29,18,.5);border:0;border-radius:50%;color:var(--bianco);font-size:24px;line-height:1;cursor:pointer;transition:background .18s var(--ease-out);}
.promo__chiudi:hover{background:rgba(43,29,18,.78);}
.promo__chiudi:focus-visible{outline:2px solid var(--wood-200);outline-offset:2px;}

.promo__media{position:relative;flex:0 0 auto;aspect-ratio:16/9;overflow:hidden;background:var(--wood-100);}
.promo__media img{width:100%;height:100%;object-fit:cover;display:block;}
.promo__bollo{position:absolute;left:14px;bottom:14px;padding:6px 12px;background:rgba(61,79,60,.95);color:var(--wood-50);font-family:'Source Sans 3',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;border-radius:2px;}

.promo__corpo{padding:26px 22px 24px;}
.promo__titolo{font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(25px,5.4vw,34px);line-height:1.14;color:var(--wood-900);margin:10px 0 12px;}
.promo__titolo em{font-style:italic;color:var(--wood-600);}
.promo__testo{font-family:'Lora',serif;font-size:16px;line-height:1.6;color:var(--wood-700);margin:0 0 22px;max-width:46ch;}
.promo__azioni{display:flex;flex-wrap:wrap;gap:10px;}

@media(min-width:720px){
  .promo__card{flex-direction:row;align-items:stretch;}
  .promo__media{width:46%;aspect-ratio:auto;min-height:380px;}
  .promo__corpo{width:54%;display:flex;flex-direction:column;justify-content:center;padding:40px 38px;}
}

/* Chi ha chiesto meno movimento non se lo becca lo stesso. */
@media(prefers-reduced-motion:reduce){
  .promo__card{transition:none;opacity:1;transform:none;}
}

/* ============================================================
   HERO "ESPLOSO" (solo home) — la tavola si apre nei tre strati
   guidata dallo scroll (assets/js/hero-esploso.js).
   Senza JavaScript, o con "riduci movimento" attivo, la sezione
   resta un hero normale: foto della stanza + titolo.
   ============================================================ */
.esplo{position:relative;background:radial-gradient(120% 90% at 50% 32%,#3a2a1e 0%,#241812 55%,#160e09 100%);}
.esplo__sticky{position:relative;min-height:640px;height:100vh;height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.esplo.is-attivo{height:380vh;}
.esplo.is-attivo .esplo__sticky{position:sticky;top:0;}

/* il canvas dei fotogrammi: spento senza JS, acceso con .is-attivo */
.esplo__canvas{position:absolute;inset:0;width:100%;height:100%;display:none;z-index:2;}
.esplo.is-attivo .esplo__canvas{display:block;}

/* etichette dei tre strati: pastiglia scura, sempre leggibili sul video */
.esplo__eti{position:absolute;z-index:3;display:none;opacity:0;max-width:280px;padding:14px 18px;background:rgba(22,14,9,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(245,236,220,.14);border-radius:8px;will-change:transform,opacity;}
.esplo.is-attivo .esplo__eti{display:block;}
.esplo__eti::before{content:"";display:block;width:34px;height:2px;background:var(--wood-400);margin-bottom:9px;}
.esplo__eti b{display:block;font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:#FBF8F3;margin-bottom:3px;}
.esplo__eti span{font-family:'Lora',serif;font-style:italic;font-size:14.5px;line-height:1.4;color:var(--wood-200);}
.esplo__eti--nobile{top:12vh;left:5vw;}
.esplo__eti--anima{top:57vh;right:5vw;text-align:right;}
.esplo__eti--anima::before{margin-left:auto;}
.esplo__eti--contro{bottom:8vh;left:34vw;}

/* la stanza: visibile di default (fallback), spenta quando la scena e' attiva */
.esplo__room{position:absolute;inset:0;background-size:cover;background-position:center;z-index:1;will-change:opacity,transform;}
.esplo__grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,14,9,.12) 30%,rgba(22,14,9,.62) 100%);z-index:1;}
.esplo.is-attivo .esplo__room,.esplo.is-attivo .esplo__grad{opacity:0;}

/* il claim: in basso a sinistra come l'hero classico.
   Nell'hero a video il finale può essere chiaro (parete, luce): ombra morbida
   dietro al testo così titolo e "Dal 1965." restano leggibili ovunque. */
.esplo .hero__title,.esplo .hero__lead,.esplo .hero__eye{text-shadow:0 1px 3px rgba(22,14,9,.55),0 4px 22px rgba(22,14,9,.55);}
.esplo .hero__title em{color:#EFD9A7;}
.esplo__claim{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;}
.esplo__claim .hero__content{margin:0 auto 0 0;}
.esplo.is-attivo .esplo__claim{opacity:0;pointer-events:none;will-change:transform,opacity;}

/* la riga emozionale sul primo fotogramma: si dissolve appena si scrolla */
.esplo__apertura{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) translateY(var(--ap-y,0px));z-index:4;display:none;width:min(92vw,980px);margin:0;text-align:center;font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(30px,4.8vw,64px);line-height:1.16;letter-spacing:-.012em;color:#FBF8F3;text-shadow:0 1px 3px rgba(22,14,9,.55),0 4px 26px rgba(22,14,9,.6);will-change:opacity,transform;}
.esplo__apertura em{font-style:italic;color:#EFD9A7;}
.esplo.is-attivo .esplo__apertura{display:block;}
/* il velo del primo fotogramma: solo su schermi larghi, si alza con lo scroll */
.esplo__velo-inizio{position:absolute;inset:0;z-index:3;display:none;background:radial-gradient(90% 70% at 50% 50%,rgba(22,14,9,.42) 0%,rgba(22,14,9,.22) 55%,rgba(22,14,9,0) 100%);will-change:opacity;pointer-events:none;}
.esplo.is-attivo .esplo__velo-inizio{display:block;}
@media(max-width:720px){
  .esplo__apertura{top:13vh;transform:translate(-50%,0) translateY(var(--ap-y,0px));font-size:clamp(24px,7.4vw,32px);}
  .esplo__velo-inizio{display:none!important;}
}

/* invito a scorrere */
.esplo__scorri{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:5;display:none;flex-direction:column;align-items:center;gap:6px;font-family:'Source Sans 3',sans-serif;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--wood-200);}
.esplo.is-attivo .esplo__scorri{display:flex;}
.esplo__scorri i{font-style:normal;animation:esplo-giu 1.6s ease-in-out infinite;}
@keyframes esplo-giu{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}

@media(max-width:720px){
  .esplo.is-attivo{height:320vh;}
  .esplo__eti{max-width:200px;padding:11px 14px;}
  .esplo__eti b{font-size:12px;letter-spacing:.12em;}
  .esplo__eti span{font-size:12.5px;}
  .esplo__eti--nobile{top:9vh;left:4vw;}
  .esplo__eti--anima{top:40vh;right:4vw;}
  .esplo__eti--contro{bottom:12vh;left:4vw;}
}
@media(prefers-reduced-motion:reduce){
  .esplo__scorri i{animation:none;}
}