@import url("../font/caratteri.css");

/* ==========================================================================
   NFM Drums - prototipo del sito
   Foglio di stile unico. I commenti sono in italiano, i nomi delle classi
   pure: chi metterà mano al file dopo di noi deve capirlo senza glossario.
   ========================================================================== */

:root{
  /* Fondi. Le fotografie dei rullanti sono tutte scattate su fondo nero:
     il sito parte da lì, così gli strumenti si staccano da soli. */
  --fondo:        #0a0a0b;
  --fondo-2:      #131315;
  --fondo-3:      #1b1b1e;
  --bordo:        #2a2a2e;
  --bordo-chiaro: #3a3a40;

  /* Testo */
  --testo:   #edeae6;
  --testo-2: #9b958d;

  /* Accento: il rame e il bronzo dei fusti. */
  --rame:       #c8763c;
  --rame-caldo: #e09355;

  --misura:  1240px;   /* larghezza massima del contenuto */
  --gutter:  clamp(20px, 5vw, 56px);

  --titolo: "Barlow Condensed", "Helvetica Neue", Arial, sans-serif;
  --testo-f: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--fondo);
  color:var(--testo);
  font-family:var(--testo-f);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--titolo);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.012em;
  line-height:.98;
  margin:0;
}

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.contenitore{
  width:100%;
  max-width:var(--misura);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* Salto al contenuto: si vede solo con la tastiera. */
.salta{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--rame); color:#fff; padding:12px 20px;
  font-weight:600;
}
.salta:focus{ left:0; }

:focus-visible{ outline:2px solid var(--rame-caldo); outline-offset:3px; }


/* ==========================================================================
   Testata
   ========================================================================== */

.testata{
  position:sticky; top:0; z-index:90;
  background:rgba(10,10,11,.86);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--bordo);
}

.testata__riga{
  display:flex; align-items:center; gap:28px;
  min-height:86px;
}

.marchio{ display:flex; align-items:center; flex:0 0 auto; }
.marchio img{ height:54px; width:auto; }

.nav{ margin-left:auto; display:flex; align-items:center; gap:4px; }

.nav__voce{
  position:relative;
  font-family:var(--titolo);
  font-size:18px; font-weight:600; text-transform:uppercase;
  letter-spacing:.07em;
  text-decoration:none;
  color:var(--testo-2);
  padding:9px 14px;
  border-radius:3px;
  transition:color .18s ease, background .18s ease;
  white-space:nowrap;
}
.nav__voce:hover{ color:var(--testo); }
.nav__voce--attiva{ color:var(--testo); }
.nav__voce--attiva::after{
  content:""; position:absolute; left:14px; right:14px; bottom:2px;
  height:2px; background:var(--rame);
}

/* Voce con tendina (le serie di rullanti) */
.tendina{ position:relative; }
.tendina__pannello{
  position:absolute; top:calc(100% + 10px); left:0;
  min-width:250px;
  background:var(--fondo-2);
  border:1px solid var(--bordo);
  border-radius:4px;
  padding:8px;
  box-shadow:0 22px 50px rgba(0,0,0,.6);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.tendina:hover .tendina__pannello,
.tendina:focus-within .tendina__pannello{
  opacity:1; visibility:visible; transform:none;
}
.tendina__voce{
  display:flex; align-items:baseline; gap:10px;
  padding:9px 12px; border-radius:3px;
  text-decoration:none; color:var(--testo-2);
  transition:background .15s ease, color .15s ease;
}
.tendina__voce:hover{ background:var(--fondo-3); color:var(--testo); }
.tendina__voce b{
  font-family:var(--titolo); font-size:19px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--testo);
}
.tendina__voce span{ font-size:13px; color:var(--testo-2); }
.tendina__riga{ height:1px; background:var(--bordo); margin:8px 4px; }

/* Selettore di lingua */
.lingua{
  display:flex; align-items:center;
  border:1px solid var(--bordo-chiaro); border-radius:3px;
  overflow:hidden; flex:0 0 auto;
  font-family:var(--titolo); font-size:15px; font-weight:600;
  letter-spacing:.08em;
}
.lingua a, .lingua span{
  padding:5px 10px; text-decoration:none; line-height:1.3;
}
.lingua span{ background:var(--rame); color:#12100e; }
.lingua a{ color:var(--testo-2); }
.lingua a:hover{ color:var(--testo); background:var(--fondo-3); }

/* Bottoni */
.bottone{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--titolo); font-size:18px; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em;
  text-decoration:none;
  padding:11px 22px;
  border:1px solid var(--rame);
  background:var(--rame); color:#12100e;
  border-radius:3px;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
  white-space:nowrap;
}
.bottone:hover{ background:var(--rame-caldo); border-color:var(--rame-caldo); }
.bottone--vuoto{ background:transparent; color:var(--testo); border-color:var(--bordo-chiaro); }
.bottone--vuoto:hover{ background:transparent; border-color:var(--rame); color:var(--rame-caldo); }

/* Bottone del menu a scomparsa: compare solo sotto i 1000 px */
.menu-bottone{
  display:none; flex:0 0 auto;
  width:44px; height:44px;
  background:none; border:1px solid var(--bordo-chiaro); border-radius:3px;
  cursor:pointer; padding:0;
}
.menu-bottone i{
  display:block; width:20px; height:1.5px; background:var(--testo);
  margin:4px auto; transition:transform .2s ease, opacity .2s ease;
}
.menu-bottone[aria-expanded="true"] i:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.menu-bottone[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.menu-bottone[aria-expanded="true"] i:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }


/* ==========================================================================
   Aperture
   ========================================================================== */

.apertura{ position:relative; background:#000; overflow:hidden; }
.apertura img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  opacity:.72;
}
.apertura--alta{ min-height:min(82vh, 760px); }
.apertura--media{ min-height:min(58vh, 520px); }
.apertura--alta img, .apertura--media img{ position:absolute; inset:0; }

.apertura::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(10,10,11,.55) 0%, rgba(10,10,11,.15) 38%, rgba(10,10,11,.92) 100%);
}

.apertura__testo{
  position:relative; z-index:2;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:inherit;
  padding-block:130px 60px;
}
.apertura--alta .apertura__testo{ min-height:min(82vh, 760px); }
.apertura--media .apertura__testo{ min-height:min(58vh, 520px); }

.occhiello{
  font-family:var(--titolo); font-size:19px; font-weight:600;
  text-transform:uppercase; letter-spacing:.26em;
  color:var(--rame-caldo);
  margin:0 0 14px;
}

.apertura h1{
  font-size:clamp(46px, 8.4vw, 104px);
  max-width:15ch;
  text-shadow:0 2px 30px rgba(0,0,0,.55);
}

.apertura__sommario{
  margin-top:20px; max-width:56ch;
  color:#d6d1ca; font-size:18px;
}

.apertura__azioni{ margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; }

/* Le fotografie di apertura sono strisce con il soggetto da una parte sola e
   il nero dall'altra: il testo va messo dalla parte del nero. */
.apertura--testo-dx .apertura__testo{ align-items:flex-end; text-align:right; }
.apertura--testo-dx .apertura__testo > *{ max-width:min(52ch, 100%); }
.apertura--testo-dx .apertura__azioni{ justify-content:flex-end; }
.apertura--testo-dx h1{ max-width:14ch; }


/* ==========================================================================
   Sezioni
   ========================================================================== */

.sezione{ padding-block:clamp(56px, 8vw, 104px); }
.sezione--chiara{ background:var(--fondo-2); }
.sezione--stretta{ padding-block:clamp(40px, 5vw, 64px); }

.sezione__testata{ margin-bottom:clamp(30px, 4vw, 52px); max-width:62ch; }
.sezione__testata h2{ font-size:clamp(32px, 4.6vw, 54px); }
.sezione__testata p{ margin-top:14px; color:var(--testo-2); }

.sopratitolo{
  font-family:var(--titolo); font-size:16px; font-weight:600;
  text-transform:uppercase; letter-spacing:.24em;
  color:var(--rame); margin:0 0 12px;
}

.prosa{ max-width:68ch; font-size:17px; color:#d2cdc6; }
/* Testo di apertura di una pagina: un corpo piu' grande, cosi' non resta
   un paragrafo orfano in mezzo alla pagina. */
.prosa--guida{ font-size:clamp(18px, 1.6vw, 21px); line-height:1.6; color:#dcd6ce; }
.prosa p + p{ margin-top:0; }


/* ==========================================================================
   Le quattro serie - riquadri della home
   ========================================================================== */

.serie-griglia{
  display:grid; gap:18px;
  grid-template-columns:repeat(2, 1fr);
}

.serie-carta{
  position:relative; display:block;
  aspect-ratio:3/2;
  overflow:hidden; border-radius:4px;
  text-decoration:none;
  background:#000;
  border:1px solid var(--bordo);
}
.serie-carta img{
  width:100%; height:100%; object-fit:cover; object-position:center 36%;
  opacity:.68;
  transition:transform .7s cubic-bezier(.2,.7,.2,1), opacity .4s ease;
}
.serie-carta:hover img{ transform:scale(1.045); opacity:.82; }
.serie-carta::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(0,0,0,.12) 0%, rgba(0,0,0,.34) 40%, rgba(0,0,0,.96) 100%);
}
.serie-carta__testo{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  padding:clamp(20px, 3vw, 34px);
}
.serie-carta__testo h3{
  font-size:clamp(30px, 3.4vw, 44px);
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
}
.serie-carta__testo h3 em{
  font-style:normal; font-size:.44em; letter-spacing:.2em;
  color:var(--rame-caldo);
}
.serie-carta__testo p{
  margin:10px 0 0; max-width:44ch; font-size:15px; color:#cbc6bf;
}
.serie-carta__freccia{
  display:inline-block; margin-top:14px;
  font-family:var(--titolo); font-size:16px; font-weight:600;
  text-transform:uppercase; letter-spacing:.14em; color:var(--rame-caldo);
}


/* ==========================================================================
   Modelli - la scheda con la galleria
   ========================================================================== */

.modelli{
  display:grid; gap:clamp(22px, 3vw, 34px);
  grid-template-columns:repeat(auto-fill, minmax(330px, 1fr));
}

.modello{
  background:var(--fondo-2);
  border:1px solid var(--bordo);
  border-radius:4px;
  overflow:hidden;
  display:flex; flex-direction:column;
}

.modello__foto{
  position:relative; background:#000;
  aspect-ratio:4/3; overflow:hidden;
}
.modello__foto img{
  width:100%; height:100%; object-fit:cover;
  transition:opacity .28s ease;
}

.modello__mignature{
  display:flex; gap:6px; padding:10px 14px 0;
}
.modello__mignatura{
  width:52px; height:40px; padding:0; border-radius:3px; overflow:hidden;
  border:1px solid var(--bordo); background:#000; cursor:pointer;
  opacity:.5; transition:opacity .18s ease, border-color .18s ease;
}
.modello__mignatura img{ width:100%; height:100%; object-fit:cover; }
.modello__mignatura:hover{ opacity:.85; }
.modello__mignatura[aria-current="true"]{ opacity:1; border-color:var(--rame); }

.modello__testo{ padding:16px 20px 22px; }
.modello__testo h3{
  font-size:25px; letter-spacing:.03em;
}
.modello__misura{
  display:inline-block; margin-top:8px;
  font-family:var(--titolo); font-size:16px; font-weight:600;
  letter-spacing:.1em; color:var(--rame-caldo);
  border:1px solid rgba(200,118,60,.42); border-radius:2px;
  padding:1px 9px;
}
.modello__testo p{
  margin-top:11px; font-size:15px; line-height:1.6; color:var(--testo-2);
}


/* ==========================================================================
   Caratteristiche in breve - le righe chiave di una serie
   ========================================================================== */

.punti{
  display:grid; gap:0;
  border-top:1px solid var(--bordo);
}
.punto{
  display:grid; grid-template-columns:minmax(150px, 210px) 1fr; gap:24px;
  padding:16px 0;
  border-bottom:1px solid var(--bordo);
}
.punto dt{
  font-family:var(--titolo); font-size:20px; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; color:var(--testo);
}
.punto dd{ margin:0; color:var(--testo-2); font-size:15.5px; }


/* ==========================================================================
   Tabella di confronto fra le serie
   ========================================================================== */

.confronto{ width:100%; border-collapse:collapse; font-size:15px; }
.confronto th, .confronto td{
  text-align:left; vertical-align:top;
  padding:15px 18px 15px 0;
  border-bottom:1px solid var(--bordo);
}
.confronto thead th{
  font-family:var(--titolo); font-size:17px; font-weight:600;
  text-transform:uppercase; letter-spacing:.12em;
  color:var(--rame); padding-bottom:10px;
  border-bottom:1px solid var(--bordo-chiaro);
}
.confronto tbody th{
  font-family:var(--titolo); font-size:26px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
  white-space:nowrap; padding-right:28px;
}
.confronto tbody th a{ text-decoration:none; }
.confronto tbody th a:hover{ color:var(--rame-caldo); }
.confronto td{ color:var(--testo-2); }


/* ==========================================================================
   Blocchi alternati (hardware, storia)
   ========================================================================== */

.alternato{
  display:grid; gap:clamp(26px, 4vw, 58px);
  grid-template-columns:1fr 1fr;
  align-items:center;
}
.alternato + .alternato{ margin-top:clamp(48px, 7vw, 90px); }
.alternato--rovescio .alternato__figura{ order:2; }

.alternato__figura{ display:grid; gap:12px; }
.alternato__figura img{
  width:100%; border-radius:4px; border:1px solid var(--bordo);
  background:#000;
}
.alternato__figura--doppia{ grid-template-columns:1fr 1fr; }
.alternato__figura--doppia img{ aspect-ratio:4/3; object-fit:cover; }

.alternato__testo h3{ font-size:clamp(28px, 3.4vw, 40px); margin-bottom:16px; }


/* ==========================================================================
   Chiamata all'azione, contatti, piè di pagina
   ========================================================================== */

.richiamo{
  background:var(--fondo-2);
  border-top:1px solid var(--bordo);
  border-bottom:1px solid var(--bordo);
  padding-block:clamp(48px, 7vw, 86px);
}
.richiamo__riga{
  display:flex; align-items:center; justify-content:space-between;
  gap:34px; flex-wrap:wrap;
}
.richiamo h2{ font-size:clamp(30px, 4vw, 48px); }
.richiamo p{ margin-top:12px; color:var(--testo-2); max-width:52ch; }

.schede{
  display:grid; gap:clamp(24px, 4vw, 48px);
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
}
.scheda h3{
  font-size:18px; letter-spacing:.16em; color:var(--rame);
  margin-bottom:14px;
}
.scheda p, .scheda li{ font-size:15.5px; color:var(--testo-2); }
.scheda ul{ list-style:none; margin:0; padding:0; }
.scheda li + li{ margin-top:7px; }
.scheda a{ color:var(--testo); text-decoration:none; border-bottom:1px solid var(--bordo-chiaro); }
.scheda a:hover{ color:var(--rame-caldo); border-color:var(--rame); }

.persona{ padding:16px 0; border-bottom:1px solid var(--bordo); }
.persona:first-child{ border-top:1px solid var(--bordo); }
.persona b{
  font-family:var(--titolo); font-size:24px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; display:block;
}
.persona span{ font-size:15px; color:var(--testo-2); }

.pie{ padding-block:52px 34px; border-top:1px solid var(--bordo); }
.pie__riga{
  display:grid; gap:34px;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
}
.pie img{ height:56px; width:auto; opacity:.9; }
.pie h4{ font-size:16px; letter-spacing:.16em; color:var(--rame); margin-bottom:12px; }
.pie ul{ list-style:none; margin:0; padding:0; }
.pie li + li{ margin-top:7px; }
.pie a{ color:var(--testo-2); text-decoration:none; font-size:15px; }
.pie a:hover{ color:var(--testo); }
.pie address{ font-style:normal; font-size:15px; color:var(--testo-2); margin-top:16px; }
.pie__chiusura{
  margin-top:40px; padding-top:20px; border-top:1px solid var(--bordo);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:13.5px; color:#6f6a64;
}

/* Modulo di contatto (solo nelle versioni pubblicate: lo gestisce Netlify). */
.modulo{
  margin-top:44px; max-width:760px;
  background:var(--fondo);
  border:1px solid var(--bordo); border-radius:4px;
  padding:clamp(22px, 3vw, 36px);
}
.modulo h3{ font-size:28px; margin-bottom:22px; }
.modulo__griglia{ display:grid; gap:16px 20px; grid-template-columns:1fr 1fr; }
.modulo__largo{ grid-column:1 / -1; }
.modulo label{
  display:flex; flex-direction:column; gap:7px;
  font-family:var(--titolo); font-size:16px; font-weight:600;
  text-transform:uppercase; letter-spacing:.12em; color:var(--testo-2);
}
.modulo input, .modulo textarea{
  font:inherit; font-family:var(--testo-f); font-size:16px;
  text-transform:none; letter-spacing:0;
  color:var(--testo); background:var(--fondo-2);
  border:1px solid var(--bordo-chiaro); border-radius:3px;
  padding:11px 13px;
}
.modulo textarea{ resize:vertical; min-height:140px; }
.modulo input:focus, .modulo textarea:focus{ outline:none; border-color:var(--rame); }
.modulo__privacy{ margin:18px 0 22px; font-size:13.5px; color:var(--testo-2); max-width:70ch; }
.nascosto{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Riquadro della bozza: dice a chi guarda che cosa non è ancora deciso. */
.nota-bozza{
  border:1px dashed var(--rame);
  background:rgba(200,118,60,.07);
  border-radius:4px;
  padding:20px 24px;
  font-size:15px; color:#d9d2ca;
}
.nota-bozza b{ color:var(--rame-caldo); }


/* ==========================================================================
   Comparsa allo scorrimento
   ========================================================================== */

.comparsa{ opacity:0; transform:translateY(18px); }
.comparsa--visibile{
  opacity:1; transform:none;
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .comparsa{ opacity:1; transform:none; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}


/* ==========================================================================
   Schermi stretti
   ========================================================================== */

@media (max-width:1000px){
  .menu-bottone{ display:block; order:3; }
  .lingua{ order:2; margin-left:auto; }
  .testata .bottone{ display:none; }

  .nav{
    order:4; width:100%; margin:0;
    display:none; flex-direction:column; align-items:stretch; gap:0;
    padding:8px 0 22px;
    border-top:1px solid var(--bordo);
  }
  .nav--aperta{ display:flex; }
  .testata__riga{ flex-wrap:wrap; height:auto; padding-block:14px; }

  .nav__voce{ padding:13px 2px; font-size:22px; }
  .nav__voce--attiva::after{ left:2px; right:auto; width:30px; }

  .tendina__pannello{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; background:transparent; border:0;
    padding:0 0 10px 14px; min-width:0;
    border-left:1px solid var(--bordo);
    margin-left:2px;
  }
  .tendina__riga{ display:none; }
}

@media (max-width:820px){
  .serie-griglia{ grid-template-columns:1fr; }
  .alternato{ grid-template-columns:1fr; }
  .alternato--rovescio .alternato__figura{ order:0; }
  .pie__riga{ grid-template-columns:1fr 1fr; }
  .punto{ grid-template-columns:1fr; gap:4px; }
  .modulo__griglia{ grid-template-columns:1fr; }
  .richiamo__riga{ flex-direction:column; align-items:flex-start; }

  /* La tabella di confronto sotto gli 820 px diventa un elenco di schede. */
  .confronto, .confronto tbody, .confronto tr, .confronto td, .confronto th{
    display:block; width:100%;
  }
  .confronto thead{ display:none; }
  .confronto tr{
    border:1px solid var(--bordo); border-radius:4px;
    padding:18px 20px; margin-bottom:14px;
  }
  .confronto th, .confronto td{ border:0; padding:0; }
  .confronto tbody th{ margin-bottom:10px; }
  .confronto td{ padding:8px 0; border-top:1px solid var(--bordo); }
  .confronto td::before{
    content:attr(data-voce);
    display:block;
    font-family:var(--titolo); font-size:15px; font-weight:600;
    text-transform:uppercase; letter-spacing:.14em; color:var(--rame);
    margin-bottom:3px;
  }
}

@media (max-width:560px){
  .pie__riga{ grid-template-columns:1fr; }
  .modelli{ grid-template-columns:1fr; }
  .marchio img{ height:44px; }
  .apertura__testo{ padding-block:96px 44px; }
}