:root{
  /* "ink" e "pietra" SONO i colori reali delle pareti del negozio (RAL cliente):
     grigio antracite al posto del nero, grigio tela al posto del grigio pietra. */
  --ink:#3E4246; --carbon:#141416; --panna:#EFEAE1; --pietra:#C4C4C4; --ottone:#B99B6B;
  --grigio-antracite:#3E4246; --grigio-tele:#C4C4C4;
}
  html{ -webkit-font-smoothing:antialiased; }
  body{ background:var(--ink); color:var(--panna); overflow-x:hidden; }

  /* ---- Firma del progetto: la messa a fuoco ----
     Titoli e media entrano sfocati e si risolvono in nitidezza,
     come un forottero che compone la diottria corretta. ---- */

  /* Word reveal mascherato */
  .w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; }
  .w > i{ display:inline-block; font-style:inherit; will-change:transform; }

  /* Contenitori media: gradiente di fondo se un asset manca */
  .media{ background: radial-gradient(120% 90% at 30% 20%, #232326 0%, #121214 55%, #0A0A0B 100%); }
  .media img, .media video{ display:block; width:100%; height:100%; object-fit:cover; }

  /* Grana pellicola */
  .grain::after{
    content:""; position:absolute; inset:0; pointer-events:none; opacity:.16; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  }

  .eyebrow{ font-size:.65rem; letter-spacing:.42em; text-transform:uppercase; color:var(--ottone); font-weight:500; }
  .rule{ height:1px; background:linear-gradient(90deg, rgba(185,155,107,.55), rgba(185,155,107,0)); }

  /* Bottoni */
  .btn{
    position:relative; display:inline-flex; align-items:center; gap:.9rem;
    padding:1.05rem 2.1rem; font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; font-weight:500;
    border:1px solid rgba(239,234,225,.28); color:var(--panna); overflow:hidden; isolation:isolate;
    transition:color .5s ease, border-color .5s ease; background:rgba(10,10,11,.25);
    backdrop-filter:blur(6px);
  }
  .btn::before{
    content:""; position:absolute; inset:0; z-index:-1; background:var(--panna);
    transform:translateY(101%); transition:transform .55s cubic-bezier(.65,0,.35,1);
  }
  .btn:hover{ color:var(--ink); border-color:var(--panna); }
  .btn:hover::before{ transform:translateY(0); }
  .btn--gold{ border-color:rgba(185,155,107,.6); color:var(--ottone); }
  .btn--gold::before{ background:var(--ottone); }
  .btn--gold:hover{ color:var(--ink); border-color:var(--ottone); }
  .btn--dark{ border-color:rgba(10,10,11,.25); color:var(--ink); background:transparent; backdrop-filter:none; }
  .btn--dark::before{ background:var(--ink); }
  .btn--dark:hover{ color:var(--panna); border-color:var(--ink); }

  /* Su mobile i pannelli sono sovrapposti: uno slider a due slide */
  @media (max-width:767px){
    .hero-panel{ position:absolute; inset:0; height:100%; }
    .panel-cta{ display:none; }
    #hero-split{ display:none; }
  }

  .hero-tab{
    font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; font-weight:500; color:rgba(239,234,225,.45);
    padding-bottom:.45rem; position:relative; transition:color .45s ease;
  }
  .hero-tab::after{
    content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--ottone);
    transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.65,0,.35,1);
  }
  .hero-tab.is-active{ color:var(--ottone); }
  .hero-tab.is-active::after{ transform:scaleX(1); }

  /* Bottone di categoria che compare sul pannello in hover */
  .panel-cta{
    position:absolute; z-index:25; left:50%; bottom:16%;
    transform:translateX(-50%); opacity:0; pointer-events:none;
    border-color:rgba(239,234,225,.55);
  }
  .panel-cta .btn-arrow{ display:inline-block; transition:transform .5s cubic-bezier(.65,0,.35,1); }
  .panel-cta:hover .btn-arrow{ transform:translateX(5px); }
  @media (max-width:767px){ .panel-cta{ bottom:12%; } }

  .navlink{ position:relative; font-weight:500; }
  .navlink::after{
    content:""; position:absolute; left:0; bottom:-.15em; width:100%; height:1px;
    background:var(--ottone); transform:scaleX(0); transform-origin:right;
    transition:transform .6s cubic-bezier(.65,0,.35,1);
  }
  .navlink:hover::after{ transform:scaleX(1); transform-origin:left; }

  .diottria{ writing-mode:vertical-rl; letter-spacing:.35em; font-size:.6rem; font-weight:500; }

  /* HERO SPLIT */
  .hero-panel{ position:relative; flex:1 1 0%; overflow:hidden; will-change:flex-grow; }
  @media (min-width:768px){ .hero-panel{ height:100%; } }

  /* Marquee */
  .marquee{ display:flex; white-space:nowrap; will-change:transform; }
  .marquee span{ padding-right:3rem; }

  /* ---- CURSORE ----
     Bianco in mix-blend-mode:difference: si inverte automaticamente su
     qualsiasi fondo (foto, logo, nero, panna) senza logica sui colori. */
  .cursor-on, .cursor-on a, .cursor-on button, .cursor-on .hero-panel{ cursor:none; }
  /* Admin bar di WP e banner cookie di Complianz: non sono elementi del
     tema, quindi devono restare col cursore nativo del sistema. */
  #wpadminbar, #wpadminbar *,
  #cmplz-cookiebanner-container, #cmplz-cookiebanner-container *{ cursor:auto !important; }
  #wpadminbar a, #wpadminbar button, #wpadminbar [role="button"],
  #cmplz-cookiebanner-container a, #cmplz-cookiebanner-container button, #cmplz-cookiebanner-container [role="button"]{ cursor:pointer !important; }
  /* z-index sopra qualunque overlay a schermo intero del sito (loader e
     lightbox usano z-[100]/z-index:100): sotto quel valore il cursore
     spariva "coperto" dall'overlay invece di restare visibile sopra. */
  #cursor-dot, #cursor-ring{
    position:fixed; top:0; left:0; z-index:110; pointer-events:none;
    mix-blend-mode:difference; will-change:transform; opacity:0;
  }
  #cursor-dot{
    width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:#fff;
  }
  /* Stato "zoom" (gallery con lightbox): il pallino pieno diventa una
     crocetta sottile invece del cursor:zoom-in nativo del browser. */
  #cursor-dot.is-plus{ width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:0; background:none; }
  #cursor-dot.is-plus::before,
  #cursor-dot.is-plus::after{ content:""; position:absolute; background:#fff; }
  #cursor-dot.is-plus::before{ top:50%; left:0; width:100%; height:1px; margin-top:-.5px; }
  #cursor-dot.is-plus::after{ left:50%; top:0; width:1px; height:100%; margin-left:-.5px; }
  #cursor-ring{
    width:44px; height:44px; margin:-22px 0 0 -22px; color:#fff;
    display:flex; align-items:center; justify-content:center;
  }
  /* Cerchio "spezzato" come il logo (reticolo/messa a fuoco): due archi
     speculari via SVG, con un piccolo stacco solo in alto e in basso al
     centro, invece del bordo pieno di prima. Riempie l'anello qualunque
     dimensione gli dia il JS (hover video/link), senza toccare site.js. */
  .cursor-ring-svg{ position:absolute; inset:0; width:100%; height:100%; }
  #cursor-label{
    font-size:.55rem; letter-spacing:.22em; text-transform:uppercase; color:#fff;
    opacity:0; transform:scale(.8); white-space:nowrap;
  }
  .paused-chip{
    position:absolute; z-index:20; top:1.75rem; left:1.5rem;
    font-size:.55rem; letter-spacing:.3em; text-transform:uppercase; font-weight:500; color:var(--ottone);
    display:flex; align-items:center; gap:.5rem; opacity:0; pointer-events:none;
    transition:opacity .4s ease;
  }
  .paused-chip::before{ content:""; width:5px; height:5px; background:var(--ottone); }
  .is-paused .paused-chip{ opacity:1; }

  /* ---- LOGO ----
     .logo-white è rimasta solo per eventuale contenuto Elementor più
     vecchio: forza una silhouette bianca via filtro. Ovunque nel tema
     usiamo invece due file reali (logo chiaro/scuro caricati dal pannello
     Optical Store) e un cross-fade di opacità, mai un filtro che "inventa"
     un colore che il file non ha. */
  .logo-white{ filter:brightness(0) invert(1); transition:filter .5s ease; }
  #header.on-light .logo-white{ filter:brightness(0) invert(0); }
  #header.on-light #menu-open{ color:var(--ink); }
  #header.on-light #header-cta{ color:var(--ink); border-color:rgba(10,10,11,.35); }

  /* ---- HEADER ----
     Trasparente di base (sopra la hero): sulle pagine con hero a due video,
     site.js lo porta a sfondo bianco mentre il logo sale e si blocca al
     centro (vedi #hero-logo-mark). Sulle altre pagine resta come prima:
     sempre trasparente, solo logo/menu passano al nero su sezione panna. */
  #header{ background-color:rgba(255,255,255,0); }

  /* Due file reali sovrapposti (chiaro/scuro): #header ha position:fixed,
     quindi fa lui stesso da "contenitore" per il centraggio assoluto di
     entrambe le immagini, senza bisogno che il link attorno sia posizionato. */
  #header-logo-mobile img{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    transition:opacity .4s ease;
  }
  #header-logo-mobile .logo-dark{ opacity:0; }
  #header.on-light #header-logo-mobile .logo-light{ opacity:0; }
  #header.on-light #header-logo-mobile .logo-dark{ opacity:1; }

  #header-cta{
    font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
    color:var(--panna); border:1px solid rgba(239,234,225,.5);
    padding:.55rem 1rem; border-radius:999px; white-space:nowrap;
  }
  #header-cta:hover{ background:var(--panna); color:var(--ink); }
  @media (min-width:768px){
    #header-cta{ font-size:.65rem; letter-spacing:.24em; padding:.65rem 1.35rem; }
  }

  /* ---- HEADER HOME SU MOBILE: come le pagine interne ----
     Solo sotto 768px la home riusa il layout delle pagine interne (logo
     statico a sinistra, CTA+Menu raggruppati a destra) e diventa bianca
     allo scroll (.is-stuck-home, gestito da site.js). Il desktop non è
     toccato: lì il logo resta quello che sale dalla hero e si incastra
     nell'header (vedi PRELOADER + HERO SPLIT in site.js). */
  @media (max-width:767px){
    #header:not(.header-inner){ justify-content:flex-start; }
    #header:not(.header-inner) #header-logo-mobile{ position:relative; display:block; line-height:0; order:-1; }
    #header:not(.header-inner) #header-logo-mobile img{ position:static; transform:none; height:40px; }
    #header:not(.header-inner) #header-logo-mobile .logo-dark{ position:absolute; left:0; top:0; }
    #header:not(.header-inner) #header-cta{ order:1; margin-left:auto; }
    #header:not(.header-inner) #menu-open{ order:2; margin-left:1.15rem; }

    #header:not(.header-inner).is-stuck-home{
      background-color:#fff;
      box-shadow:0 1px 0 rgba(10,10,11,.08);
    }
    #header:not(.header-inner).is-stuck-home #header-logo-mobile .logo-light{ opacity:0; }
    #header:not(.header-inner).is-stuck-home #header-logo-mobile .logo-dark{ opacity:1; }
    #header:not(.header-inner).is-stuck-home #menu-open{ color:var(--ink); }
    #header:not(.header-inner).is-stuck-home #header-cta{ color:var(--ink); border-color:rgba(10,10,11,.35); }
    #header:not(.header-inner).is-stuck-home #header-cta:hover{ background:var(--ink); color:var(--panna); }
  }

  #menu-open, #menu-close{ font-weight:500; }

  a:focus-visible, button:focus-visible{ outline:1px solid var(--ottone); outline-offset:6px; }
  ::-webkit-scrollbar{ width:7px; } ::-webkit-scrollbar-track{ background:#0A0A0B; }
  ::-webkit-scrollbar-thumb{ background:#2a2a2d; }

  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
    [data-reveal], [data-reveal-words], [data-mask]{ opacity:1 !important; filter:none !important; transform:none !important; clip-path:none !important; }
  }

/* =========================================================
   COMPONENTI PAGINE INTERNE
   ========================================================= */

/* Hero di pagina */
.page-hero{ height:78vh; min-height:520px; }
@media (max-width:767px){ .page-hero{ height:70vh; min-height:440px; } }

/* Elenchi con spunta */
.tick{ position:relative; padding-left:2rem; color:var(--pietra); font-weight:300; line-height:1.7; }
.tick::before{
  content:""; position:absolute; left:0; top:.7em; width:14px; height:1px; background:var(--ottone);
}

/* Blocchi numerati */
.numbered .num{
  font-family:"Cormorant Garamond", Georgia, serif; font-size:2.25rem; line-height:1;
  color:rgba(140,136,128,.55); display:block;
}
[data-light-section] .numbered .num{ color:rgba(10,10,11,.28); }

/* Card su fondo chiaro */
.card-light{ border-top:1px solid rgba(10,10,11,.16); padding-top:1.5rem; }

/* Citazione / box */
.quote-block{ border-left:1px solid rgba(185,155,107,.5); padding-left:1.75rem; }

/* Accordion disturbi */
.acc-item{ border-top:1px solid rgba(239,234,225,.12); }
.acc-item:last-child{ border-bottom:1px solid rgba(239,234,225,.12); }
.acc-head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:1.6rem 0; text-align:left; color:var(--panna); transition:color .4s ease;
}
.acc-head:hover{ color:var(--ottone); }
.acc-icon{ position:relative; width:16px; height:16px; flex:none; }
.acc-icon::before, .acc-icon::after{
  content:""; position:absolute; left:0; top:50%; width:100%; height:1px; background:var(--ottone);
  transition:transform .45s cubic-bezier(.65,0,.35,1);
}
.acc-icon::after{ transform:rotate(90deg); }
.acc-item.is-open .acc-icon::after{ transform:rotate(0deg); }
.acc-body{ height:0; overflow:hidden; }
.acc-inner{ padding:0 0 2rem; max-width:60ch; }

/* Griglia brand — card separate (mai bordo a bordo) con rilievo al hover */
.brand-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:1.5rem; }
.brand-card{
  position:relative; background:var(--panna); padding:2rem 1.75rem; min-height:230px;
  display:flex; flex-direction:column; justify-content:space-between; overflow:hidden;
  border:1px solid rgba(10,10,11,.14);
  box-shadow:0 1px 2px rgba(10,10,11,.04);
  transition:transform .5s cubic-bezier(.65,0,.35,1), box-shadow .5s cubic-bezier(.65,0,.35,1), border-color .5s ease;
}
.brand-card:hover{
  transform:translateY(-7px);
  box-shadow:0 28px 44px -16px rgba(10,10,11,.32);
  border-color:rgba(185,155,107,.6);
}
.brand-card::after{
  content:""; position:absolute; inset:0; background:var(--ink); transform:translateY(100%);
  transition:transform .6s cubic-bezier(.65,0,.35,1); z-index:0;
}
.brand-card:hover::after{ transform:translateY(0); }
.brand-card > *{ position:relative; z-index:1; transition:color .5s ease; }
.brand-card:hover h3, .brand-card:hover .brand-logo span{ color:var(--panna); }
.brand-card p{ color:rgba(10,10,11,.62); font-weight:400; }
.brand-card:hover p{ color:rgba(239,234,225,.75); }
.brand-logo{ height:56px; display:flex; align-items:center; }
.brand-logo span{
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; font-weight:600; color:rgba(10,10,11,.65);
}
.brand-num{ position:absolute; top:1.25rem; right:1.5rem; font-size:.6rem; letter-spacing:.2em; color:rgba(10,10,11,.3); }
.brand-card:hover .brand-num{ color:var(--ottone); }

/* Contatti: orari */
.hours{ width:100%; border-collapse:collapse; }
.hours th{ text-align:left; font-weight:300; color:var(--panna); padding:.55rem 1.5rem .55rem 0; white-space:nowrap; }
.hours td{ text-align:right; color:var(--pietra); font-weight:300; padding:.55rem 0; border-bottom:1px solid rgba(239,234,225,.08); }
.hours th{ border-bottom:1px solid rgba(239,234,225,.08); }
.map-frame{ filter:grayscale(1) contrast(.9) brightness(.85); transition:filter .6s ease; }
.map-frame:hover{ filter:grayscale(0) contrast(1) brightness(1); }

/* Form */
.field{ position:relative; }
.field input, .field textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid rgba(10,10,11,.25);
  padding:1.5rem 0 .6rem; color:var(--ink); font-weight:300; outline:none;
  transition:border-color .4s ease;
}
.field textarea{ resize:vertical; }
.field label{
  position:absolute; left:0; top:1.4rem; color:rgba(10,10,11,.5);
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; pointer-events:none;
  transition:transform .4s cubic-bezier(.65,0,.35,1), color .4s ease;
  transform-origin:left top;
}
.field input:focus + label, .field textarea:focus + label,
.field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + label{
  transform:translateY(-1.35rem) scale(.85); color:var(--ottone);
}
.field input:focus, .field textarea:focus{ border-color:var(--ottone); }
.field.has-error input, .field.has-error textarea{ border-color:#9c4a3c; }

.check{ display:flex; align-items:flex-start; gap:.9rem; cursor:pointer; font-weight:300; color:rgba(10,10,11,.7); font-size:.9rem; }
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check .box{ width:18px; height:18px; border:1px solid rgba(10,10,11,.35); flex:none; margin-top:.15rem; position:relative; transition:border-color .3s ease; }
.check .box::after{
  content:""; position:absolute; inset:4px; background:var(--ottone); transform:scale(0);
  transition:transform .3s cubic-bezier(.65,0,.35,1);
}
.check input:checked + .box::after{ transform:scale(1); }
.check input:checked + .box{ border-color:var(--ottone); }
.check input:focus-visible + .box{ outline:1px solid var(--ottone); outline-offset:4px; }

/* ---- Sigillo centrale hero: il logo grande tra i due video ----
   Vive FUORI da #hero apposta (vedi commento nel PHP): è sempre
   position:fixed, centrato sul viewport, quindi all'apertura della pagina
   (scroll a 0) coincide visivamente col centro della hero. Da desktop
   diventa anche l'unico logo dell'header: site.js traduce/scala ENTRAMBE
   le immagini insieme (stessa altezza, stesso punto) e incrocia le loro
   opacità, così il logo che arriva nell'header è un file vero (quello
   "scuro" caricato in Optical Store), non un filtro CSS che inventa un
   colore che il PNG non ha. #hero-logo-mark-dark parte invisibile. */
.hero-logo-img{
  /* z-index sopra l'header (z-50): una volta che il suo sfondo diventa
     bianco opaco, senza questo il logo finirebbe coperto proprio mentre
     "attracca" in posizione. */
  position:fixed; top:50%; left:50%; z-index:55;
  display:block; height:90px; width:auto; object-fit:contain;
  filter:drop-shadow(0 2px 18px rgba(0,0,0,.45));
  will-change:transform, opacity;
}
#hero-logo-mark-dark{ opacity:0; filter:none; }

/* Dentro l'editor di Elementor, essendo position:fixed, il logo resta
   visivamente incollato al centro mentre si scrolla il canvas della pagina
   in modifica — fastidioso per chi costruisce la pagina. Elementor aggiunge
   da solo questa classe al <body> dell'iframe di anteprima quando sei in
   modalità modifica: la usiamo per non mostrarlo lì, resta invariato sul
   sito pubblicato. */
body.elementor-editor-active #hero-logo-link{ display:none !important; }

@media (min-width:768px){
  /* Il chiaro parte più grande (180px) e si restringe fino a 90px viaggiando
     verso l'header (fase 1). Lo scuro nasce già a 90px, la dimensione
     finale: non si ridimensiona mai, compare e basta sopra al chiaro
     ormai fermo (fase 2) — vedi "PRELOADER + HERO SPLIT" in site.js. */
  #hero-logo-mark{ height:180px; }
  #hero-logo-mark-dark{ height:90px; }
}

/* ---- Griglia servizi rapidi (home): nero su champagne, ben separati, rilievo al click ---- */
.service-tile{
  position:relative; display:flex; flex-direction:column; gap:.9rem;
  background:var(--panna); color:var(--ink); padding:2.25rem 2rem;
  border:1px solid rgba(10,10,11,.08);
  transition:transform .5s cubic-bezier(.65,0,.35,1), box-shadow .5s cubic-bezier(.65,0,.35,1);
}
.service-tile:hover{ transform:translateY(-8px); box-shadow:0 30px 48px -16px rgba(0,0,0,.55); }
.service-tile-icon{ width:30px; height:30px; color:var(--ink); }
.service-tile-icon svg{ width:100%; height:100%; stroke:var(--ink); fill:none; stroke-width:1.3; }
.service-tile h3{ font-weight:600; font-size:1.05rem; letter-spacing:-.005em; }
.service-tile p{ color:rgba(10,10,11,.65); font-size:.9rem; font-weight:400; line-height:1.6; }
.service-tile-arrow{
  margin-top:.4rem; font-size:.65rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600;
  color:var(--ottone); display:inline-flex; align-items:center; gap:.6rem;
}
.service-tile-arrow span{ display:inline-block; transition:transform .5s cubic-bezier(.65,0,.35,1); }
.service-tile:hover .service-tile-arrow span{ transform:translateX(6px); }

/* ---- Materiali dello store: pareti + oro dei mobili (chi-siamo) ---- */
.materiali-strip{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:1px; background:rgba(239,234,225,.1); border:1px solid rgba(239,234,225,.1); }
.materiale-sample{ background:var(--carbon); padding:1.75rem 1.5rem; display:flex; flex-direction:column; gap:1rem; }
.materiale-swatch{ height:52px; width:100%; border:1px solid rgba(239,234,225,.12); }
.materiale-sample .nome{ font-size:.6rem; letter-spacing:.25em; text-transform:uppercase; color:var(--panna); font-weight:500; }
.materiale-sample .ref{ font-size:.6rem; letter-spacing:.1em; color:var(--pietra); }