/* ===========================================================
   CHINIEQUIPE - foglio di stile
   Tutto il sito usa questi colori e queste misure.
   Cambiando un valore qui, cambia in tutto il sito.
   =========================================================== */

:root{
  --bg:      #ffffff;   /* fondo principale */
  --bg-soft: #f6f5f2;   /* fondo delle fasce chiare */
  --ink:     #121212;   /* testo */
  --muted:   #7a7772;   /* testo secondario */
  --line:    #e4e1db;   /* righe di separazione */
  --dark:    #121212;   /* fondo delle fasce scure */
  --dark-tx: #f2f0ec;   /* testo sulle fasce scure */

  --pad:     clamp(20px, 5vw, 80px);   /* margine laterale */
  --gap:     clamp(40px, 8vw, 120px);  /* aria tra le sezioni */
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

/* --- etichette piccole maiuscole, il tratto ricorrente del sito --- */
.label{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--muted);
  font-weight:500;
}

/* --- titoli --- */
h1,h2,h3{ font-weight:300; letter-spacing:-.02em; line-height:1.08; }
h1{ font-size:clamp(2.4rem,6.5vw,5.4rem); }
h2{ font-size:clamp(1.8rem,4vw,3.2rem); }
h3{ font-size:clamp(1.1rem,2vw,1.5rem); letter-spacing:-.01em; }

p{ max-width:60ch; }
.lead{ font-size:clamp(1rem,1.6vw,1.25rem); color:var(--muted); font-weight:300; }

/* ===========================================================
   BARRA IN ALTO
   =========================================================== */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad);
  background:rgba(255,255,255,0);
  color:var(--dark-tx);
  transition:background .35s ease, box-shadow .35s ease, color .35s ease;
}
/* velo scuro sotto la barra: serve a leggere le voci quando passano sopra la foto */
header::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,0));
  transition:opacity .35s ease;
}
header.solid::before{ opacity:0; }
/* Nota: niente backdrop-filter qui. Renderebbe il menu del telefono
   prigioniero della barra invece di farlo coprire tutto lo schermo. */
header.solid{
  background:#fff;
  box-shadow:0 1px 0 var(--line);
  color:var(--ink);
}

.brand{
  font-size:.82rem; text-transform:uppercase; letter-spacing:.28em; font-weight:500;
  white-space:nowrap;
}

nav{ display:flex; align-items:center; gap:clamp(14px,2.2vw,30px); }
nav .links{ display:flex; align-items:center; gap:clamp(14px,2.2vw,30px); }
nav a{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.16em; font-weight:500;
  opacity:.75; transition:opacity .2s; white-space:nowrap;
}
nav a:hover{ opacity:1; }

.lang{ display:flex; gap:6px; align-items:center; font-size:.7rem; letter-spacing:.14em; }
.lang button{
  background:none; border:0; cursor:pointer; color:inherit; font:inherit;
  text-transform:uppercase; opacity:.45; padding:8px 5px; transition:opacity .2s;
}
.lang button.active{ opacity:1; text-decoration:underline; text-underline-offset:4px; }

.burger{ display:none; background:none; border:0; color:inherit; cursor:pointer; padding:6px; }
.burger span{ display:block; width:22px; height:1px; background:currentColor; margin:5px 0; transition:.3s; }

/* ===========================================================
   APERTURA
   =========================================================== */
/* Apertura in due metà: a sinistra le parole, a destra la foto intera.
   La foto è verticale, quindi in mezza pagina entra quasi senza tagli. */
.hero{
  min-height:100svh;
  display:grid; grid-template-columns:1.05fr 1fr;
  color:var(--dark-tx); background:var(--dark);
  overflow:hidden;
}
.hero-inner{
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:120px var(--pad) clamp(44px,7vh,80px);
}
.hero h1{ font-size:clamp(2.1rem,4.2vw,3.9rem); }
.hero-photo{ position:relative; overflow:hidden; background:#cfc7d4; }
.hero-photo img{
  position:absolute; left:0; bottom:0;
  width:100%; height:145%;
  object-fit:cover; object-position:center bottom;
}
.hero h1{ margin:16px 0 22px; }
.hero .lead{ color:rgba(242,240,236,.8); max-width:52ch; }
.hero .label{ color:rgba(242,240,236,.65); }

.actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.btn{
  display:inline-block; padding:14px 26px;
  font-size:.7rem; text-transform:uppercase; letter-spacing:.16em; font-weight:500;
  border:1px solid currentColor; transition:background .25s,color .25s;
}
.btn.fill{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn.fill:hover{ background:transparent; color:var(--ink); }
.hero .btn.fill{ background:#fff; color:var(--ink); border-color:#fff; }
.hero .btn.fill:hover{ background:transparent; color:#fff; }
.hero .btn.ghost:hover{ background:#fff; color:var(--ink); }
.btn.ghost:hover{ background:var(--ink); color:#fff; }

/* ===========================================================
   SEZIONI
   =========================================================== */
section{ padding:var(--gap) var(--pad); }
section.soft{ background:var(--bg-soft); }
section.dark{ background:var(--dark); color:var(--dark-tx); }
section.dark .lead,
section.dark .label{ color:rgba(242,240,236,.65); }
section.dark .card{ border-color:rgba(242,240,236,.18); }
section.dark .card p{ color:rgba(242,240,236,.6); }

.head{ margin-bottom:clamp(28px,5vw,56px); }
.head h2{ margin-top:14px; }
.head p{ margin-top:18px; }

.grid{ display:grid; gap:clamp(20px,3vw,40px); }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1200px){ .g4{ grid-template-columns:repeat(2,1fr); } }

/* numeri */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,4vw,60px); margin-top:clamp(30px,5vw,60px); }
.stat{ border-top:1px solid var(--line); padding-top:18px; }
.stat .n{ font-size:clamp(1.8rem,3.4vw,2.8rem); font-weight:300; letter-spacing:-.03em; }
.stat .t{ font-size:.78rem; color:var(--muted); margin-top:6px; }
section.dark .stat{ border-color:rgba(242,240,236,.2); }
section.dark .stat .t{ color:rgba(242,240,236,.6); }

/* schede marchi */
.card{ border-top:1px solid var(--line); padding-top:20px; }
.card h3{ margin:14px 0 10px; }

/* il riquadro col marchio, al posto della vecchia foto */
.marchio{
  background:var(--bg-soft); aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(10px,2vw,22px); margin-bottom:22px;
}
/* ogni marchio ha una forma diversa: qui li si porta alla stessa
   grandezza d'occhio, altrimenti il N.6 schiaccia gli altri due */
.marchio img{ display:block; width:auto; height:auto; max-width:100%; max-height:100%; }
.marchio.n6  img{ max-height:90%; }
.marchio.fc  img{ max-width:92%; }
.marchio.lo  img{ max-width:88%; }
section.dark .marchio{ background:rgba(242,240,236,.06); }

/* il quarto marchio, ancora coperto: in negativo rispetto agli altri tre,
   così l'occhio ci finisce sopra invece di scivolarci via */
.marchio.attesa{
  background:var(--dark); color:var(--dark-tx);
  flex-direction:column; gap:16px;
}
.marchio.attesa .filo{ width:38%; height:1px; background:currentColor; opacity:.4; }
.marchio.attesa .t{
  font-size:clamp(.6rem,1.1vw,.72rem);
  text-transform:uppercase; letter-spacing:.3em; text-indent:.3em; font-weight:500;
}

/* il nome resta scritto per Google e per i lettori di schermo, ma non si vede:
   nel riquadro sopra c'e' gia' il marchio che lo dice */
.solo-lettori{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.card p{ font-size:.92rem; color:var(--muted); }
.card .links{ margin-top:16px; display:flex; gap:16px; flex-wrap:wrap; }
.card .links a{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.16em;
  border-bottom:1px solid currentColor; padding-bottom:3px; opacity:1;
}

/* la riga forte: il made in Italy */
.claim{
  margin-top:26px; padding:16px 0;
  border-top:1px solid currentColor; border-bottom:1px solid currentColor;
  font-size:clamp(1rem,1.7vw,1.3rem); font-weight:400;
  letter-spacing:.01em; max-width:none;
}

/* elenco gruppi private label */
.groups{ display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:26px; }
.groups span{
  font-size:.74rem; text-transform:uppercase; letter-spacing:.14em;
  border:1px solid rgba(242,240,236,.25); padding:9px 16px;
}

/* ===========================================================
   SEGNAPOSTO FOTO (si tolgono quando arrivano le immagini vere)
   =========================================================== */
.ph{
  position:relative; width:100%; background:#dedbd5;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.ph::before{
  content:attr(data-ph);
  font-size:.62rem; text-transform:uppercase; letter-spacing:.2em;
  color:#8d8980; text-align:center; padding:12px; line-height:1.8;
}
.ph.tall{ aspect-ratio:3/4; }
.ph.wide{ aspect-ratio:16/9; }
.ph.sq{ aspect-ratio:1/1; }
.ph.fill{ position:absolute; inset:0; height:100%; align-items:flex-start; padding-top:90px; }

/* ---------- foto vere ----------
   Le campagne sono tagliate sopra la testa: si vedono il capo e la calzatura,
   mai il viso della modella. Il taglio si regola con l'altezza qui sotto:
   piu' alta = si taglia piu' in basso.                                      */
.foto-crop{ position:relative; overflow:hidden; aspect-ratio:3/4; width:100%; }
.foto-crop img{
  position:absolute; left:0; bottom:0;
  width:100%; height:142%;
  object-fit:cover; object-position:center bottom;
}
.foto{ width:100%; object-fit:cover; }
.foto.tall{ aspect-ratio:3/4; }
.foto.wide{ aspect-ratio:16/9; }
.foto.sq{ aspect-ratio:1/1; }

/* ===========================================================
   FASCIA DELLE FOTO DI CAMPAGNA (a tutta larghezza, senza margini)
   =========================================================== */
.campagna-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.campagna-grid .foto-crop{ aspect-ratio:3/4; }

/* ===========================================================
   SHOWROOM
   =========================================================== */
.split{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px,4vw,64px); align-items:center; }

/* le due foto dello showroom, una per piano */
.showroom-foto{ display:grid; gap:clamp(10px,1.4vw,18px); }
.showroom-foto img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }

/* Bianco e nero applicato dal sito, non dal file: le foto restano a colori
   sul computer. Per tornare a colori basta togliere la classe "bn" dal
   tag <img>, oppure cancellare questa riga.                                */
.bn{ filter:grayscale(1) contrast(1.06); }
.info-rows{ margin-top:30px; }
.info-rows .r{ display:flex; gap:20px; padding:14px 0; border-top:1px solid var(--line); font-size:.9rem; }
.info-rows .k{ min-width:140px; color:var(--muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.16em; padding-top:3px; }
section.dark .info-rows .r{ border-color:rgba(242,240,236,.18); }
section.dark .info-rows .k{ color:rgba(242,240,236,.55); }

/* ===========================================================
   PAGINE DI SOLO TESTO (privacy)
   =========================================================== */
.testo-lungo{ max-width:760px; margin:0 auto; padding-top:clamp(110px,14vh,170px); }
.testo-lungo h1{ font-size:clamp(2rem,5vw,3.4rem); margin-top:12px; }
.testo-lungo h2{ font-size:clamp(1.1rem,2vw,1.4rem); margin:38px 0 10px; }
.testo-lungo p{ max-width:none; color:var(--muted); }
.testo-lungo .lead{ color:var(--ink); }
.testo-lungo .aggiornata{ margin-top:44px; padding-top:18px; border-top:1px solid var(--line); font-size:.8rem; }

/* ===========================================================
   CONTATTI
   =========================================================== */
form{ display:grid; gap:14px; max-width:520px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
label{ font-size:.66rem; text-transform:uppercase; letter-spacing:.18em; color:var(--muted); display:block; margin-bottom:6px; }
input,textarea{
  width:100%; font:inherit; font-size:.95rem; color:var(--ink);
  background:#fff; border:1px solid var(--line); padding:12px 14px; border-radius:0;
}
input:focus,textarea:focus{ outline:none; border-color:var(--ink); }
textarea{ min-height:120px; resize:vertical; }
button.send{
  justify-self:start; margin-top:8px; cursor:pointer;
  background:var(--ink); color:#fff; border:1px solid var(--ink);
  padding:14px 30px; font-size:.7rem; text-transform:uppercase; letter-spacing:.16em; font-weight:500;
  transition:background .25s,color .25s;
}
button.send:hover{ background:transparent; color:var(--ink); }

/* la riga che dice com'e' andato l'invio */
.esito{ font-size:.85rem; color:var(--muted); min-height:1.2em; margin-top:4px; }
.esito.ok{ color:var(--ink); font-weight:500; }

.contact-direct a{ display:block; margin-bottom:10px; font-size:1.05rem; font-weight:300; }
.contact-direct a:hover{ text-decoration:underline; text-underline-offset:5px; }

/* ===========================================================
   FONDO PAGINA
   =========================================================== */
footer{
  background:var(--dark); color:var(--dark-tx);
  padding:clamp(50px,7vw,90px) var(--pad) 34px;
}
.foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; }
footer .brand{ font-size:1rem; }
footer p,footer a{ font-size:.85rem; color:rgba(242,240,236,.7); }
footer a:hover{ color:#fff; }
footer .col a{ display:block; margin-bottom:9px; }
.foot-bottom{
  margin-top:clamp(40px,6vw,70px); padding-top:22px;
  border-top:1px solid rgba(242,240,236,.15);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:.72rem; color:rgba(242,240,236,.5);
}

/* pulsante whatsapp fisso */
.wa{
  position:fixed; right:20px; bottom:20px; z-index:90;
  width:54px; height:54px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 24px rgba(0,0,0,.22); transition:transform .2s;
}
.wa:hover{ transform:scale(1.07); }
.wa svg{ width:27px; height:27px; fill:#fff; }

/* ===========================================================
   LOOKBOOK
   =========================================================== */
.gate{ min-height:100svh; display:flex; align-items:center; justify-content:center; padding:110px var(--pad) 60px; background:var(--bg-soft); }
.gate-box{ width:100%; max-width:420px; text-align:center; }
.gate-box h1{ font-size:clamp(1.8rem,4vw,2.6rem); margin:14px 0 14px; }
.gate-box form{ max-width:none; margin-top:28px; }
.gate-box input{ text-align:center; letter-spacing:.14em; }
.err{ color:#a12b2b; font-size:.8rem; min-height:20px; margin-top:4px; }
.book{ display:none; padding-top:110px; }
.book.open{ display:block; }
.book-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,2vw,26px); }

@media (max-width:980px){
  .g3,.g4,.foot-grid,.book-grid{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; }

  /* apertura: prima la foto, poi le parole */
  .hero{ grid-template-columns:1fr; min-height:0; }
  .hero-photo{ order:-1; aspect-ratio:4/5; }
  .hero-photo img{ object-position:center 22%; }
  .hero-inner{ padding:clamp(34px,6vw,56px) var(--pad) clamp(44px,8vw,70px); }

  /* sotto questa larghezza il menu diventa a comparsa */
  nav .links{
    position:fixed; inset:0; background:var(--bg); color:var(--ink);
    flex-direction:column; align-items:center; justify-content:center; gap:26px;
    display:none;
  }
  nav .links.open{ display:flex; }
  nav .links a{ font-size:1.05rem; letter-spacing:.14em; opacity:1; }
  .burger{ display:block; }

  /* con il menu aperto logo, lingua e pulsante restano sopra al pannello */
  header.menu-open{ color:var(--ink); }
  header.menu-open .brand,
  header.menu-open .lang,
  header.menu-open .burger{ position:relative; z-index:2; }
  header.menu-open .burger span:first-child{ transform:translateY(3px) rotate(45deg); }
  header.menu-open .burger span:last-child{ transform:translateY(-3px) rotate(-45deg); }
  body.no-scroll{ overflow:hidden; }
}
@media (max-width:640px){
  .g2,.g3,.foot-grid,.book-grid,.row2,.stats{ grid-template-columns:1fr; }
  .g4{ grid-template-columns:1fr; }
  /* la scritta del quarto marchio non deve toccare i bordi della casella */
  .marchio.attesa .t{ letter-spacing:.14em; text-indent:.14em; font-size:.56rem; }
  .marchio.attesa .filo{ width:46%; }
  /* al telefono: due foto affiancate e la terza distesa sotto.
     Prima erano tre a tutta pagina e da sole facevano 1125px di scorrimento. */
  .campagna-grid{ grid-template-columns:1fr 1fr; }
  .campagna-grid .foto-crop{ aspect-ratio:1/1; }
  .campagna-grid .foto-crop:last-child{ grid-column:1 / -1; aspect-ratio:16/10; }
  /* il riquadro del marchio diventa basso e largo: stessa leggibilita',
     meta' dello scorrimento */
  .marchio{ aspect-ratio:16/10; }
  .stats{ gap:18px; }
  .wa{ width:50px; height:50px; right:14px; bottom:14px; }
}