/* ==========================================================================
   AZIENDA AGRICOLA MAGLIANO — «LA MONDATURA»
   Concept in Sito Web Codice/CONCEPT.md

   Il ritmo del sito è CARTA e CINEMA alternati: fasce fotografiche scure a
   piena larghezza che si aprono su sezioni di carta chiara dove si legge.
   Nel registro creativo nessun sito THK è portato dalla fotografia: è lì che
   sta la differenza, non nel colore.
   ========================================================================== */

@font-face{
  font-family:'Fraunces';
  src:url('../font/fraunces-latin.woff2') format('woff2');
  font-weight:400 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;
}
@font-face{
  font-family:'Karla';
  src:url('../font/karla-latin.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;
}

:root{
  /* carta */
  --calcare:#E9E7E1;
  --calcare-alto:#F4F2ED;
  --linea:#D5D1C7;
  --inchiostro:#171412;
  --pietra:#6E6A61;
  --cremisi:#8C1C2B;
  --cremisi-scuro:#6E1522;
  /* notte — campionata dalle ombre della fotografia d'apertura */
  --notte:#17120F;
  --notte-alto:#241C17;
  --notte-linea:#3A2E26;
  --osso:#EDE6DA;
  --osso-fioco:#A79B8B;
  --brace:#C9303C;   /* il cremisi acceso: sul nero deve bruciare, non spegnersi */

  --titolo:'Fraunces',Georgia,'Times New Roman',serif;
  --testo:'Karla','Helvetica Neue',Arial,sans-serif;

  --largo:min(1240px,90vw);
  --stretto:min(760px,90vw);
  --r:4px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--calcare); color:var(--inchiostro);
  font-family:var(--testo); font-size:clamp(16.5px,.42vw + 15px,18.5px);
  line-height:1.62; font-weight:400; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--titolo); font-weight:600; line-height:1.02; margin:0; letter-spacing:-.022em; text-wrap:balance}
p{margin:0}
ul,ol,dl{margin:0; padding:0; list-style:none}

.salta{position:absolute;left:-9999px;top:0;background:var(--inchiostro);color:var(--calcare);padding:.7rem 1rem;z-index:99}
.salta:focus{left:.5rem;top:.5rem}
:focus-visible{outline:2px solid var(--brace); outline-offset:3px}

/* ---------- Testata ----------------------------------------------------- */
.testata{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem);
  padding:1rem clamp(1.1rem,4vw,3rem);
  color:var(--osso);
  transition:background .35s ease, padding .35s ease, color .35s ease;
}
.testata.posata{
  background:color-mix(in srgb,var(--calcare) 92%,transparent);
  backdrop-filter:blur(12px); color:var(--inchiostro);
  border-bottom:1px solid var(--linea); padding-top:.6rem; padding-bottom:.6rem;
}
.marchio{text-decoration:none; display:grid; line-height:1; margin-right:auto}
.marchio-alto{font-family:var(--testo); font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; opacity:.72}
.marchio-basso{font-family:var(--titolo); font-weight:600; font-size:1.3rem; letter-spacing:.01em; margin-top:.3rem}
.menu{display:flex; gap:1.7rem}
.menu a{text-decoration:none; font-size:.83rem; letter-spacing:.05em; opacity:.78; padding:.35rem 0; border-bottom:1px solid transparent}
.menu a:hover{opacity:1; border-bottom-color:var(--brace)}
@media (max-width:900px){ .menu{display:none} }

/* ---------- Bottoni ----------------------------------------------------- */
.bottone{
  display:inline-block; text-decoration:none; background:var(--cremisi); color:#fff;
  font-weight:600; font-size:.95rem; letter-spacing:.005em;
  padding:1rem 1.7rem; border-radius:2px;
  transition:background .18s ease, transform .18s ease;
}
.bottone:hover{background:var(--cremisi-scuro); transform:translateY(-2px)}
.bottone-acceso{background:var(--brace)}
.bottone-acceso:hover{background:#A82531}
.bottone-piccolo{padding:.7rem 1.15rem; font-size:.82rem}
.bottone-linea{background:transparent; box-shadow:inset 0 0 0 1.5px currentColor; color:var(--cremisi)}
.bottone-linea:hover{background:var(--cremisi); color:#fff; box-shadow:none}

/* ==========================================================================
   1 · HERO — fotografia a piena pagina, il tipo dentro l'immagine
   ========================================================================== */
/* Hero SPEZZATA: il tipo sul nero a sinistra, la fotografia a filo a destra.
   Provata prima a piena pagina col testo sopra la foto: il titolo cadeva
   addosso al vasetto e l'occhiello scendeva a 1,67 di contrasto. */
.hero{
  position:relative; min-height:100svh; background:var(--notte); color:var(--osso);
  display:grid; grid-template-columns:1.04fr .96fr; align-items:stretch; overflow:hidden;
}
.hero-foto{position:relative; order:2}
.hero-foto img{width:100%; height:100%; object-fit:cover; object-position:52% 46%}
.hero-foto::after{  /* raccorda la foto al nero, così il taglio non è una toppa */
  content:''; position:absolute; inset:0;
  background:linear-gradient(to right, var(--notte) 0%, rgba(23,18,15,.55) 12%, rgba(23,18,15,0) 34%);
}
.hero-dentro{
  order:1; display:flex; flex-direction:column; justify-content:flex-end;
  padding:9rem clamp(2rem,4vw,4rem) clamp(2.2rem,5vw,3.6rem) max(1.1rem, calc((100vw - var(--largo))/2));
}
.occhiello{
  font-size:.68rem; letter-spacing:.34em; text-transform:uppercase; font-weight:700;
  color:var(--brace); margin-bottom:1.5rem;
}
/* Sul nero pieno l'occhiello in brace regge; sulla fotografia no.
   Qui è osso, con un trattino brace davanti. */
.hero .occhiello{color:var(--osso-fioco); display:flex; align-items:center; gap:.8rem}
.hero .occhiello::before{content:''; width:2rem; height:2px; background:var(--brace); flex:none}
.hero h1{
  font-size:clamp(2.9rem,5.6vw,5.4rem); font-weight:600; letter-spacing:-.032em;
  max-width:13ch; margin-bottom:1.7rem;
}
.hero h1 em{font-style:italic; font-weight:400; color:var(--brace)}
.hero-sommario{
  max-width:40ch; color:color-mix(in srgb,var(--osso) 82%,transparent);
  font-size:1.08rem; margin-bottom:2.2rem;
}

/* la striscia dei fatti, appoggiata in fondo alla hero */
.fatti{
  border-top:1px solid rgba(237,230,218,.22); margin-top:clamp(2.4rem,6vw,4rem);
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(237,230,218,.16);
}
.fatti li{background:transparent; padding:1.5rem 1.6rem 0 0}
.fatti b{
  display:block; font-family:var(--titolo); font-weight:900; line-height:1;
  font-size:clamp(1.5rem,2.9vw,2.3rem); color:var(--osso); font-variant-numeric:tabular-nums;
}
.fatti span{display:block; margin-top:.5rem; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; color:var(--osso-fioco)}
@media (max-width:1000px){
  .hero{grid-template-columns:1fr; min-height:auto}
  .hero-foto{order:1; height:44svh; min-height:280px}
  .hero-foto::after{background:linear-gradient(to bottom, rgba(23,18,15,.45) 0%, rgba(23,18,15,0) 40%, var(--notte) 100%)}
  .hero-dentro{order:2; padding:2.4rem clamp(1.1rem,5vw,2rem) 2.6rem}
}
@media (max-width:760px){
  .fatti{grid-template-columns:1fr; gap:0; background:none}
  .fatti li{padding:1rem 0; border-bottom:1px solid rgba(237,230,218,.16); display:flex; align-items:baseline; gap:.9rem}
  .fatti b{font-size:1.5rem; min-width:5.5ch}
  .fatti span{margin-top:0}
}

/* ==========================================================================
   2 · LA MONDATURA — la firma, su fondo notte: qui il rosso brucia
   ========================================================================== */
.mondatura{position:relative; background:var(--notte); color:var(--osso); padding-bottom:clamp(3rem,8vw,6rem)}
.mondatura::before{
  content:''; position:absolute; top:0; left:0; right:0; height:140px;
  background:linear-gradient(to bottom, rgba(0,0,0,.35), transparent); pointer-events:none;
}
.campo{position:sticky; top:0; height:100svh; margin-bottom:-100svh; z-index:0; pointer-events:none; overflow:hidden}
.campo canvas{width:100%; height:100%; display:block}
.contatori{
  position:absolute; left:0; right:0; bottom:clamp(1.2rem,3vw,2.4rem);
  display:flex; justify-content:space-between; width:var(--largo); margin:0 auto;
  font-variant-numeric:tabular-nums;
}
.contatori p{display:grid}
.contatori p:last-child{text-align:right}
.contatori b{font-family:var(--titolo); font-weight:900; font-size:clamp(1.4rem,2.8vw,2.2rem); line-height:1; color:var(--osso)}
.contatori span{font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--osso-fioco); margin-top:.4rem}

.carte{position:relative; z-index:1; width:var(--largo); margin:0 auto; padding-top:20svh; display:grid}
.carta{
  position:sticky; width:min(660px,100%); justify-self:end;
  background:color-mix(in srgb,var(--notte-alto) 92%,transparent);
  backdrop-filter:blur(14px);
  border:1px solid var(--notte-linea); border-radius:var(--r);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9);
  padding:clamp(1.7rem,3vw,2.6rem);
}
.carta:nth-of-type(1){top:92px}
.carta:nth-of-type(2){top:108px}
.carta:nth-of-type(3){top:124px}
.carta:nth-of-type(4){top:140px}
.carta:last-child{margin-bottom:0}
.carta + .carta{margin-top:clamp(1.6rem,4vw,3rem)}

.numero{
  font-family:var(--titolo); font-weight:900; font-size:.76rem; letter-spacing:.2em;
  color:var(--brace); margin-bottom:1rem;
}
.carta h2{font-size:clamp(1.8rem,3.3vw,2.6rem); margin-bottom:1.05rem; color:var(--osso)}
.carta p{color:var(--osso-fioco); max-width:46ch}
.rilievo{color:var(--osso) !important; font-family:var(--titolo); font-weight:600; font-size:1.16rem; margin-top:1.15rem !important}

.punti{margin-top:1.5rem; display:grid; gap:.68rem}
.punti li{position:relative; padding-left:1.55rem; color:var(--osso); font-size:.96rem}
.punti li::before{content:''; position:absolute; left:0; top:.62em; width:.68rem; height:1.5px; background:var(--brace)}
.carta-figura{margin:1.6rem 0 0; border-radius:var(--r); overflow:hidden; background:var(--notte)}
.carta-figura img{width:100%; aspect-ratio:16/6.6; object-fit:cover}
#carta-4 .carta-figura img{aspect-ratio:16/8.4; object-position:50% 46%}
.carta-offerta .bottone{margin-top:1.7rem}

/* il calcolatore, dentro la carta scura */
.calcolatore{
  margin-top:1.7rem; background:rgba(0,0,0,.28); border:1px solid var(--notte-linea);
  border-radius:var(--r); padding:clamp(1.2rem,2.4vw,1.7rem);
}
.calcolatore-titolo{color:var(--osso) !important; font-family:var(--titolo); font-weight:600; font-size:1.05rem; line-height:1.25}
.cursore{margin:1.3rem 0 1.5rem}
.cursore input[type=range]{width:100%; -webkit-appearance:none; appearance:none; background:transparent; height:44px; cursor:pointer; display:block}
.cursore input[type=range]::-webkit-slider-runnable-track{height:2px; background:var(--notte-linea)}
.cursore input[type=range]::-moz-range-track{height:2px; background:var(--notte-linea)}
.cursore input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:24px; height:24px; border-radius:50%;
  background:var(--brace); border:3px solid var(--notte-alto); margin-top:-11px;
  box-shadow:0 0 0 1px var(--notte-linea), 0 4px 14px rgba(201,48,60,.4);
}
.cursore input[type=range]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; background:var(--brace); border:3px solid var(--notte-alto);
}
.cursore output{display:block; margin-top:.4rem; font-family:var(--titolo); font-weight:900; font-size:1.1rem; color:var(--osso); font-variant-numeric:tabular-nums}
.risultati{display:grid; gap:.8rem; border-top:1px solid var(--notte-linea); padding-top:1.15rem}
.risultati > div{display:flex; justify-content:space-between; align-items:baseline; gap:1rem}
.risultati dt{font-size:.84rem; color:var(--osso-fioco)}
.risultati dd{margin:0; font-family:var(--titolo); font-weight:900; font-size:1.18rem; color:var(--brace); font-variant-numeric:tabular-nums; white-space:nowrap}
#calc-whatsapp{margin-top:1.5rem; display:block; text-align:center; font-size:.88rem; padding:.8rem 1rem; color:var(--osso)}
#calc-whatsapp:hover{background:var(--brace); color:#fff; box-shadow:none}

@media (max-width:900px){
  .carta{position:static; width:100%}
  .carte{padding-top:7svh}
  .carta-figura img{aspect-ratio:16/9}
}

/* ==========================================================================
   Fasce di carta
   ========================================================================== */
.fascia{width:var(--largo); margin:0 auto; padding:clamp(4rem,9vw,7.5rem) 0}
.fascia + .fascia{border-top:1px solid var(--linea)}
.titolo-sezione{font-size:clamp(1.9rem,3.8vw,3rem); margin-bottom:2rem}
.fascia p{color:var(--pietra); max-width:56ch}
.fascia p + p{margin-top:.9rem}
.guida{
  font-size:clamp(1.15rem,1.9vw,1.4rem); line-height:1.45; color:var(--inchiostro) !important;
  font-family:var(--titolo); font-weight:400; max-width:26ch;
}

/* 🔴 Nascosto SOLO se il JS è vivo (classe .js messa in testa al documento):
   senza questa guardia, un errore di script o un IntersectionObserver che non
   parte lascerebbero mezza pagina invisibile. */
.js [data-rivela]{opacity:0; transform:translateY(22px)}
.js [data-rivela].dentro{opacity:1; transform:none; transition:opacity .75s ease, transform .75s cubic-bezier(.22,.61,.36,1)}

/* fascia fotografica a piena larghezza */
.lastra{
  position:relative; margin:0; padding:clamp(4.5rem,11vw,9rem) 0;
  background:var(--notte); color:var(--osso); isolation:isolate; overflow:hidden;
}
.lastra-foto{position:absolute; inset:0; z-index:-2}
.lastra-foto img{width:100%; height:100%; object-fit:cover}
.lastra::before{content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(to right, rgba(11,8,6,.92), rgba(11,8,6,.55) 62%, rgba(11,8,6,.75))}
.lastra-dentro{width:var(--largo); margin:0 auto}
.lastra h2{font-size:clamp(2rem,4.4vw,3.4rem); color:var(--osso); max-width:18ch; margin-bottom:1.2rem}
.lastra p{color:color-mix(in srgb,var(--osso) 80%,transparent); max-width:46ch}
.lastra .occhiello{color:var(--brace)}
.lastra .bottone-linea{margin-top:2rem; color:var(--osso)}
.lastra .bottone-linea:hover{background:var(--osso); color:var(--notte); box-shadow:none}

/* passi */
.elenco-passi{display:grid; gap:0; border-top:1px solid var(--linea)}
.elenco-passi li{padding:clamp(1.3rem,2.6vw,1.9rem) 0; display:flex; gap:1.4rem; align-items:baseline; border-bottom:1px solid var(--linea)}
.elenco-passi b{font-family:var(--titolo); font-weight:900; font-size:1.15rem; color:var(--brace); min-width:2.2ch; font-variant-numeric:tabular-nums}
.elenco-passi p{color:var(--inchiostro); font-family:var(--titolo); font-weight:400; font-size:clamp(1.05rem,1.7vw,1.3rem)}
@media (min-width:900px){
  .elenco-passi{grid-template-columns:repeat(4,1fr); border-top:none; gap:1px; background:var(--linea)}
  .elenco-passi li{flex-direction:column; gap:.9rem; background:var(--calcare); padding:1.8rem 1.5rem 2.2rem; border-bottom:none}
}

/* consegne */
.consegne-griglia{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,5rem); align-items:center}
.distanze{display:grid}
.distanze li{padding:1.3rem 0; display:flex; justify-content:space-between; align-items:baseline; gap:1rem; border-bottom:1px solid var(--linea)}
.distanze li:first-child{border-top:1px solid var(--linea)}
.distanze b{font-family:var(--titolo); font-weight:900; font-size:1.5rem; color:var(--cremisi)}
.distanze span{font-size:.78rem; letter-spacing:.15em; text-transform:uppercase; color:var(--pietra)}
@media (max-width:860px){ .consegne-griglia{grid-template-columns:1fr} }

/* prodotti */
.prodotti-griglia{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.2vw,1.8rem); margin-bottom:2.6rem}
.prodotti-griglia article{background:var(--calcare-alto); border:1px solid var(--linea); border-radius:var(--r); overflow:hidden}
.prodotti-griglia img{width:100%; aspect-ratio:4/3; object-fit:cover}
.prodotti-griglia .testo{padding:1.3rem 1.4rem 1.6rem}
.prodotti-griglia h3{font-size:1.35rem; margin-bottom:.45rem}
.prodotti-griglia p{font-size:.93rem}
.ortaggi{display:flex; flex-wrap:wrap; gap:.5rem}
.ortaggi li{font-size:.82rem; padding:.42rem .85rem; border:1px solid var(--linea); border-radius:999px; color:var(--pietra); background:var(--calcare-alto)}
@media (max-width:820px){ .prodotti-griglia{grid-template-columns:1fr} .prodotti-griglia img{aspect-ratio:16/9} }

/* chi siamo */
.chi-griglia{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center}
.chi-figura{margin:0; border-radius:var(--r); overflow:hidden}
.chi-figura img{width:100%; aspect-ratio:4/3.2; object-fit:cover}
@media (max-width:860px){ .chi-griglia{grid-template-columns:1fr} }

/* domande */
.lista-domande{border-top:1px solid var(--linea)}
.lista-domande details{border-bottom:1px solid var(--linea)}
.lista-domande summary{cursor:pointer; list-style:none; padding:1.35rem 2.6rem 1.35rem 0; position:relative; font-family:var(--titolo); font-weight:600; font-size:clamp(1.05rem,1.7vw,1.22rem)}
.lista-domande summary::-webkit-details-marker{display:none}
.lista-domande summary::after{
  content:''; position:absolute; right:.4rem; top:50%; width:11px; height:11px;
  border-right:1.6px solid var(--cremisi); border-bottom:1.6px solid var(--cremisi);
  transform:translateY(-70%) rotate(45deg); transition:transform .22s ease;
}
.lista-domande details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.lista-domande p{padding:0 0 1.5rem}

/* contatti */
.contatti{background:var(--notte); color:var(--osso); width:100%; max-width:none; padding:clamp(4rem,9vw,7rem) clamp(1.1rem,4vw,3rem)}
.contatti-blocco{width:var(--stretto); margin:0 auto; text-align:center; display:grid; justify-items:center; gap:1.6rem}
.contatti h2{font-size:clamp(2rem,4.2vw,3.2rem); color:var(--osso)}
.contatti address{font-style:normal; color:var(--osso-fioco); line-height:2}
.contatti address a{color:var(--osso); text-decoration-color:var(--brace); text-underline-offset:4px; display:inline-block; padding:.45rem .1rem}

/* piede */
.pie{
  background:var(--notte); color:var(--osso-fioco);
  border-top:1px solid var(--notte-linea);
  padding:2.4rem clamp(1.1rem,4vw,3rem) 3rem; text-align:center;
  font-size:.79rem; display:grid; gap:.6rem;
}
.pie a{color:var(--osso)}
.crediti{font-size:.71rem; opacity:.72; max-width:74ch; margin:0 auto}

/* avviso biscotti */
.biscotti{
  position:fixed; left:50%; bottom:1rem; transform:translateX(-50%);
  width:min(700px,94vw); z-index:60; display:flex; align-items:center; gap:1rem; justify-content:space-between;
  background:var(--notte-alto); color:var(--osso); border:1px solid var(--notte-linea);
  padding:.7rem .8rem .7rem 1.2rem; border-radius:2px; font-size:.8rem;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.8);
}
.biscotti[hidden]{display:none}
.biscotti a{color:var(--osso); text-underline-offset:3px}
.biscotti button{
  font:inherit; font-weight:700; cursor:pointer; white-space:nowrap;
  background:var(--osso); color:var(--notte); border:0; padding:.7rem 1.15rem; border-radius:2px; min-height:44px;
}
@media (max-width:560px){ .biscotti{flex-direction:column; align-items:flex-start; gap:.7rem} }

/* pagina di testo */
.documento{max-width:70ch; padding-top:9rem}
.documento .titolo-sezione{font-size:clamp(1.15rem,2vw,1.4rem); margin:2.6rem 0 .8rem}
.documento .titolo-sezione:first-of-type{margin-top:0}

/* ---------- Meno movimento ---------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-rivela]{opacity:1; transform:none}
  .campo{position:relative; height:56svh; margin-bottom:0}
  .carte{padding-top:2.5rem}
  .carta{position:static; width:100%}
}