/* marcolungo.it — foglio unico
   Colori: carta, inchiostro, amaranto (il basco della Folgore), piombo, nebbia.
   Caratteri: Besley per i titoli, Atkinson Hyperlegible Next per il testo. */

/* ---------- caratteri (in locale) + ripieghi a metriche uguali, contro i salti ---------- */
@font-face{font-family:"Besley";font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/besley-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Next";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/atkinson-hyperlegible-next-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Next";font-style:italic;font-weight:400;font-display:swap;
  src:url(../fonts/atkinson-hyperlegible-next-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Atkinson Next";font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/atkinson-hyperlegible-next-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Besley ripiego";src:local("Georgia");
  size-adjust:118.61%;ascent-override:105.39%;descent-override:35.83%;line-gap-override:0%}
@font-face{font-family:"Atkinson ripiego";src:local("Arial"),local("Helvetica"),local("Liberation Sans"),local("Arimo");
  size-adjust:99.1%;ascent-override:99.29%;descent-override:31.89%;line-gap-override:0%}

:root{
  --carta:#FCFCFA;
  --inchiostro:#1F1D20;
  --chiaro:#F4F2F0;
  --grigio-scuro:#B9B5BB;
  --amaranto:#8A1C2E;
  --amaranto-chiaro:#E8A3AE;
  --piombo:#586174;
  --nebbia:#E6E7E3;
  --titoli:"Besley","Besley ripiego",Georgia,serif;
  --testo:"Atkinson Next","Atkinson ripiego",Arial,sans-serif;
  --larghezza:1160px;
  --margine:clamp(16px,4vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--carta);color:var(--inchiostro);
  font:400 1.1875rem/1.6 var(--testo);font-kerning:normal}
img,video{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--titoli);font-weight:600;line-height:1.12;margin:0;letter-spacing:-.005em}
p{margin:0 0 1em}
a{color:var(--amaranto);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--amaranto);outline-offset:3px;border-radius:2px}
.scuro :focus-visible{outline-color:var(--amaranto-chiaro)}
.salta{position:absolute;left:-9999px;top:0}
.salta:focus{left:var(--margine);top:8px;z-index:1000;background:var(--carta);padding:.5em 1em}
.contenitore{max-width:var(--larghezza);margin:0 auto;padding:0 var(--margine)}

/* ---------- testata ---------- */
.testata{background:var(--inchiostro);border-bottom:1px solid rgba(255,255,255,.08)}
.testata .contenitore{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:68px}
.marchio{font:600 1.35rem/1 var(--titoli);color:var(--chiaro);text-decoration:none;white-space:nowrap}
.marchio:hover{color:var(--amaranto-chiaro)}
.menu ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1.5rem}
.menu a{color:var(--chiaro);text-decoration:none;font-size:1rem;padding:.4em 0;display:inline-block}
.menu a:hover,.menu a[aria-current="page"]{color:var(--amaranto-chiaro);text-decoration:underline}
.menu-telefono{display:none}
@media (max-width:900px){
  .menu-largo{display:none}
  .menu-telefono{display:block;position:relative}
  .menu-telefono summary{list-style:none;cursor:pointer;font-size:1rem;padding:.5em .9em;border:1px solid var(--chiaro);border-radius:999px;color:var(--chiaro)}
  .menu-telefono summary::-webkit-details-marker{display:none}
  .menu-telefono[open] summary{background:var(--chiaro);color:var(--inchiostro)}
  .menu-telefono ul{position:absolute;right:0;top:calc(100% + 8px);z-index:50;display:block;min-width:240px;
    background:var(--inchiostro);border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:.5rem 1rem;box-shadow:0 10px 30px rgba(0,0,0,.3)}
  .menu-telefono li a{display:block;padding:.6em 0}
}

/* ---------- 1. primo schermo: foto + chi viene per lavoro ---------- */
.ingresso{position:relative;overflow:hidden}
.ingresso-foto{display:block}
.ingresso h1{font-size:clamp(2rem,1.2rem + 2.4vw,3rem);color:#F7F6F3;text-wrap:balance}
.ingresso .sotto{font-size:clamp(1.15rem,1rem + .5vw,1.35rem);margin:1.3em 0 1em;color:#D7D4D9}
.porte{list-style:none;margin:0;padding:0;border-top:2px solid var(--chiaro)}
.porte li{border-bottom:1px solid rgba(255,255,255,.14)}
.porte a{display:block;padding:.75rem .25rem .8rem;text-decoration:none;color:var(--chiaro)}
.porte .bisogno,.porte .sito{display:block}
.porte .bisogno{font-size:1rem;line-height:1.35;color:var(--grigio-scuro)}
.porte .sito{font:600 clamp(1.3rem,1rem + 1vw,1.7rem)/1.2 var(--titoli);color:#fff;overflow-wrap:anywhere}
.porte a:hover{background:rgba(255,255,255,.06)}
.porte a:hover .sito{color:var(--amaranto-chiaro);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em}
.ingresso .altro{margin:1.3em 0 0;font-size:1.1rem;color:#D7D4D9}
@media (min-width:900px){
  .ingresso{min-height:clamp(620px,calc(100svh - 68px),900px);display:flex;align-items:center}
  .ingresso-foto{position:absolute;right:max(0px,calc((100vw - var(--larghezza))/2 - 120px));bottom:0;height:100%;width:auto;max-width:52%;
    object-fit:contain;object-position:right bottom;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 22%);mask-image:linear-gradient(to right,transparent 0,#000 22%)}
  .ingresso .contenitore{position:relative;z-index:1;width:100%;padding-top:48px;padding-bottom:56px}
  .ingresso-testo{max-width:min(600px,50%)}
}
@media (max-width:899px){
  .ingresso-foto{width:100%;height:56svh;max-height:560px;object-fit:cover;object-position:50% 12%;
    -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,#000 70%,transparent 100%)}
  .ingresso .contenitore{position:relative;margin-top:-3rem;padding-bottom:48px}
}

/* ---------- 2. mettiti comodo: le due facce ---------- */
.scuro{background:var(--inchiostro);color:#F1F2EE}
.scuro a{color:var(--amaranto-chiaro)}
.comodo{padding:clamp(56px,9vh,112px) 0}
.comodo h2{font-size:clamp(1.9rem,1.2rem + 3vw,3.25rem);max-width:16em;text-wrap:balance}
.comodo .presentazione{max-width:36em;margin:1.2em 0 2.4em;font-size:clamp(1.1rem,1rem + .4vw,1.3rem);color:var(--piombo)}
.facce{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,3vw,40px);max-width:60rem;margin:0}
.facce figure{margin:0}
.facce img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--nebbia)}
.facce figcaption{font:600 clamp(1.05rem,.8rem + 1.2vw,1.65rem)/1.2 var(--titoli);margin-top:.8rem;color:var(--inchiostro)}
.comodo .avanti{margin:2rem 0 0;font:600 clamp(1.2rem,1rem + .8vw,1.5rem)/1.2 var(--titoli)}

/* ---------- 3. il resto del sito ---------- */
.sezioni{padding:clamp(56px,9vh,104px) 0 clamp(32px,5vh,56px);background:#F3F2EE}
.griglia-sezioni{display:grid;grid-template-columns:7fr 5fr;gap:clamp(24px,4vw,56px);align-items:start}
.voce a.immagine{display:block}
.voce img{width:100%;object-fit:cover;background:var(--nebbia)}
.voce .grande img{aspect-ratio:1600/1089}
.voce .media img{aspect-ratio:16/9;object-position:45% 30%}
.voce h2{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.2rem);margin:1rem 0 .4rem}
.voce h2 a{color:var(--inchiostro);text-decoration:none}
.voce h2 a:hover{color:var(--amaranto);text-decoration:underline;text-decoration-thickness:2px}
.voce p{color:var(--piombo);max-width:30em}
.cazzeggio{margin-top:clamp(32px,5vw,64px);padding:clamp(24px,4vw,40px) 0;border-top:2px solid var(--inchiostro);
  display:grid;grid-template-columns:5fr 7fr;gap:clamp(16px,4vw,56px);align-items:baseline}
.cazzeggio h2{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.2rem)}
.cazzeggio h2 a{color:var(--inchiostro);text-decoration:none}
.cazzeggio h2 a:hover{color:var(--amaranto);text-decoration:underline}
.cazzeggio p{font:600 clamp(1.25rem,1rem + 1.1vw,1.75rem)/1.3 var(--titoli);margin:0;color:var(--amaranto)}
@media (max-width:760px){
  .griglia-sezioni,.cazzeggio{grid-template-columns:1fr}
}

/* ---------- 4. libri e giornali ---------- */
.libri{padding:clamp(40px,7vh,88px) 0;border-top:1px solid var(--nebbia)}
.libri h2{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.2rem);margin-bottom:1.4rem}
.copertine{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,200px));gap:clamp(14px,3vw,40px)}
.copertine a{display:block;text-decoration:none;color:var(--inchiostro)}
.copertine img{width:100%;aspect-ratio:2/3;object-fit:cover;box-shadow:0 1px 0 var(--nebbia),0 12px 24px -12px rgba(26,34,51,.45)}
.copertine span{display:block;font-size:.95rem;line-height:1.35;margin-top:.7rem}
.copertine a:hover span{color:var(--amaranto);text-decoration:underline}
.giornali{margin:2rem 0 0;max-width:40em;color:var(--piombo)}

/* ---------- 5. chiusura ---------- */
.chiacchierata{padding:clamp(48px,8vh,96px) 0 24px}
.chiacchierata h2{font-size:clamp(1.7rem,1.2rem + 2.4vw,2.9rem);max-width:15em;text-wrap:balance;color:#F7F6F3}
.bottoni{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.6rem}
.bottone{display:inline-flex;align-items:center;gap:.55em;min-height:52px;padding:.7em 1.25em;border-radius:999px;
  font:700 1.05rem/1.1 var(--testo);text-decoration:none;border:2px solid var(--inchiostro);color:var(--inchiostro);background:transparent}
.bottone svg{flex:none}
.bottone:hover{background:var(--inchiostro);color:var(--carta)}
.scuro .bottone{border-color:var(--chiaro);color:var(--chiaro)}
.scuro .bottone:hover{background:var(--chiaro);color:var(--inchiostro)}
.bottone.whatsapp{background:#25D366;border-color:#25D366;color:#0b2e18}
.bottone.whatsapp:hover{background:#1fb457;border-color:#1fb457;color:#0b2e18}

/* ---------- piede ---------- */
.piede{padding:40px 0 56px;border-top:1px solid rgba(255,255,255,.1);font-size:.98rem;color:#C9CDD6}
@media (max-width:640px){.piede{padding-bottom:calc(100px + env(safe-area-inset-bottom))}}
.piede p{max-width:46em}
.piede .chi{font:600 1.2rem/1.2 var(--titoli);color:#F7F7F4}
.piede .legale{font-size:.9rem;color:#9EA5B3}

/* ---------- fumetto WhatsApp (come Ristorazione Strategica) ---------- */
.whatsapp-btn{position:fixed;bottom:calc(1.25rem + env(safe-area-inset-bottom));right:1.25rem;z-index:999;display:inline-flex;align-items:center;gap:.6rem;
  max-width:calc(100vw - 2.5rem);padding:.85rem 1.15rem;background:#25D366;color:#0b2e18;border-radius:32px;
  font:700 .95rem/1.15 var(--testo);text-decoration:none;box-shadow:0 4px 15px rgba(37,211,102,.4);transition:transform .3s}
.whatsapp-btn svg{flex:none}
.whatsapp-btn:hover{transform:translateY(-2px);color:#0b2e18}
@media (max-width:420px){.whatsapp-btn{font-size:.88rem;padding:.75rem 1rem;bottom:calc(1rem + env(safe-area-inset-bottom));right:1rem}}

/* ---------- foto vera + movimento (pagina Un grande futuro alle spalle) ---------- */
.ml-clip{margin:2rem 0}
.ml-clip-box{position:relative;aspect-ratio:1600/1089;background:#d8cdb8;overflow:hidden;border-radius:4px}
.ml-clip-box img,.ml-clip-box video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ml-clip-box video{opacity:0;transition:opacity .6s ease}
.ml-clip.is-playing video{opacity:1}
.ml-clip-replay{position:absolute;right:12px;bottom:12px;z-index:2;display:flex;align-items:center;gap:.4em;padding:.45em .8em;
  border:0;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font:700 14px/1 var(--testo);cursor:pointer}
.ml-clip-replay[hidden]{display:none}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
  .ml-clip-box video{display:none}
}

/* =====================================================================
   PAGINE INTERNE
   ===================================================================== */
/* ---------- testata della pagina, scura come la home ---------- */
.testa-pagina{position:relative;overflow:hidden}
.testa-foto{display:block}
.testa-pagina h1{font-size:clamp(2.1rem,1.3rem + 3vw,3.6rem);color:#F7F6F3;text-wrap:balance}
.testa-pagina .sotto{font-size:clamp(1.1rem,1rem + .45vw,1.32rem);color:#D7D4D9;max-width:30em;margin:1.1em 0 0}
@media (min-width:900px){
  .testa-pagina{min-height:clamp(420px,60svh,600px);display:flex;align-items:center}
  .testa-pagina .contenitore{position:relative;z-index:1;width:100%;padding-top:48px;padding-bottom:56px}
  .testa-testo{max-width:min(600px,52%)}
  .testa-foto{position:absolute;right:max(0px,calc((100vw - var(--larghezza))/2 - 120px));bottom:0;height:100%;width:auto;max-width:50%;
    object-fit:contain;object-position:right bottom;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 22%);mask-image:linear-gradient(to right,transparent 0,#000 22%)}
  .testa-foto.copri{right:0;width:46%;max-width:none;object-fit:cover;object-position:50% 25%;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 30%);mask-image:linear-gradient(to right,transparent 0,#000 30%)}
}
@media (max-width:899px){
  .testa-foto{width:100%;height:46svh;max-height:460px;object-fit:cover;object-position:50% 18%;
    -webkit-mask-image:linear-gradient(to bottom,#000 65%,transparent 100%);mask-image:linear-gradient(to bottom,#000 65%,transparent 100%)}
  .testa-pagina .contenitore{position:relative;margin-top:-2.5rem;padding-bottom:40px}
}

/* ---------- testo ---------- */
.corpo{padding:clamp(48px,8vh,96px) 0}
.corpo.grigio{background:#F3F2EE}
.prosa{max-width:38em}
.prosa h2{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.1rem);margin:2.2em 0 .6em}
.prosa > h2:first-child{margin-top:0}
.prosa p{margin:0 0 1em}
.prosa .battuta{font:600 clamp(1.2rem,1rem + .8vw,1.55rem)/1.3 var(--titoli);color:var(--amaranto);margin:1.4em 0}
.prosa h3{font-size:clamp(1.2rem,1.05rem + .7vw,1.5rem);margin:2em 0 .5em}
.prosa .citazione{margin:1.6rem 0}
.battute{list-style:none;padding:0;margin:1.4rem 0 1.8rem}
.battute li{font:600 clamp(1.2rem,1rem + .8vw,1.55rem)/1.3 var(--titoli);color:var(--amaranto);padding:.9rem 0;border-top:1px solid var(--nebbia)}
.battute li:first-child{border-top:0;padding-top:0}
.battute .risposta{display:block;color:var(--inchiostro);margin-top:.3rem}
.figura{margin:2.2rem 0}
.figura img{width:100%;height:auto;background:var(--nebbia)}
.figura video{display:block;width:100%;height:auto;background:#000;border-radius:4px}
.figura figcaption{font-size:.95rem;color:var(--piombo);margin-top:.55rem}
.da-fare{background:#FFF0B8;color:#4D3B00;padding:.1em .4em;border-radius:3px;font-size:.92em}

/* ---------- citazioni ---------- */
.citazioni{display:grid;gap:2rem;margin:2rem 0 0}
.citazione{margin:0;padding-left:1.25rem;border-left:3px solid var(--amaranto)}
.citazione p{font:600 clamp(1.12rem,1rem + .55vw,1.4rem)/1.35 var(--titoli);margin:0 0 .55rem}
.citazione footer{font-size:.95rem;color:var(--piombo)}

/* ---------- le carte (ritagli e attestati) ---------- */
.carte{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px}
.carte a{display:block;text-decoration:none;color:var(--piombo);font-size:.88rem;line-height:1.3}
.carte img{width:100%;height:auto;border:1px solid var(--nebbia);background:#fff;margin-bottom:.45rem}
.carte a:hover span{color:var(--amaranto);text-decoration:underline}

/* ---------- le storie, in ordine di tempo ---------- */
.storie{list-style:none;margin:0;padding:0}
.storia{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:0 clamp(16px,3vw,40px);padding:clamp(32px,5vh,52px) 0;border-top:1px solid var(--nebbia)}
.storia .quando{font:600 clamp(1.45rem,1.2rem + 1vw,2rem)/1.05 var(--titoli);color:var(--amaranto);padding-top:.15rem}
.storia h2{font-size:clamp(1.35rem,1.1rem + 1.2vw,1.9rem);margin:0 0 .55rem}
.storia .contenuto{max-width:40em}
.storia .contenuto p{margin:0 0 1em}
.storia .figura{margin:1.4rem 0 .4rem}
@media (max-width:640px){.storia{grid-template-columns:1fr}.storia .quando{margin-bottom:.5rem}}

/* ---------- tesi ---------- */
.tesi{list-style:none;margin:0;padding:0}
.tesi li{padding:clamp(26px,4vh,42px) 0;border-top:1px solid var(--nebbia)}
.tesi li:first-child{border-top:0;padding-top:0}
.tesi h2{font-size:clamp(1.4rem,1.1rem + 1.4vw,2rem);max-width:22em;margin:0 0 .6rem}
.tesi p{max-width:38em;margin:0 0 .8em}

/* ---------- video YouTube: si carica solo al clic ---------- */
.video{position:relative;aspect-ratio:16/9;background:#000;border-radius:4px;overflow:hidden;max-width:820px}
.video img,.video iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.video button{position:absolute;inset:0;margin:auto;width:76px;height:54px;border:0;border-radius:14px;background:rgba(0,0,0,.72);cursor:pointer}
.video button::before{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #fff}
.video button:hover,.video button:focus-visible{background:var(--amaranto)}

/* ---------- contatti ---------- */
.modulo{display:grid;gap:1.05rem;max-width:36rem;margin-top:1.4rem;position:relative}
.campo label{display:block;font-weight:700;font-size:1rem;margin-bottom:.3rem}
.campo .nota{font-weight:400;color:var(--piombo)}
.campo input,.campo textarea{width:100%;font:inherit;font-size:1.05rem;padding:.7rem .8rem;border:1px solid #A9A5AC;border-radius:6px;background:#fff;color:var(--inchiostro)}
.campo textarea{min-height:9rem;resize:vertical}
.campo input:focus,.campo textarea:focus{outline:3px solid var(--amaranto);outline-offset:1px;border-color:var(--amaranto)}
.consenso{display:flex;gap:.6rem;align-items:flex-start;font-size:.98rem}
.consenso input{width:1.2rem;height:1.2rem;margin-top:.25rem;flex:none}
.bottone.pieno{background:var(--inchiostro);color:var(--carta);cursor:pointer}
.bottone.pieno:hover{background:var(--amaranto);border-color:var(--amaranto)}
.bottone[disabled]{opacity:.6;cursor:wait}
.esito{padding:.9rem 1rem;border-radius:6px;font-weight:700}
.esito.ok{background:#E3F1E6;color:#1E5B2C}
.esito.errore{background:#F7E1E4;color:#7A1A28}
.trappola{position:absolute;left:-9999px;top:0;width:1px;height:1px;opacity:0;overflow:hidden}
.titolo-semplice{font-size:clamp(2rem,1.4rem + 2.4vw,3rem);margin-bottom:.6em}
/* la colonna di testo resta allineata a sinistra come i titoli delle testate */
.contenitore.prosa{max-width:var(--larghezza)}
.contenitore.prosa > *{max-width:38em}
.contenitore.prosa > .citazioni,.contenitore.prosa > .carte,.contenitore.prosa > .figura,.contenitore.prosa > .video{max-width:44rem}
.testa-foto.copri.in-basso{object-position:50% 72%}
/* video verticale accanto a una citazione */
.contenitore.prosa > .detto-video{max-width:44rem}
.detto-video{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:clamp(18px,3vw,32px);align-items:center;margin:2rem 0 2.4rem}
.detto-video video{display:block;width:100%;height:auto;aspect-ratio:9/16;background:#000;border-radius:6px}
@media (max-width:560px){.detto-video{grid-template-columns:1fr}.detto-video video{max-width:240px}}
/* foto piccola nella prosa, griglia di video */
.contenitore.prosa > .figura.piccola{max-width:360px}
.contenitore.prosa > .video-griglia{max-width:44rem}
.video-griglia{list-style:none;padding:0;margin:1.4rem 0 .6rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px}
.video-griglia p{font-size:.95rem;color:var(--piombo);margin:.6rem 0 0}
.storia .carte{margin-top:1.2rem}
.storia .figura.piccola-storia{max-width:300px}
/* battute a dialogo: la battuta che chiude in amaranto */
.battute .dialogo span{display:block;color:var(--inchiostro)}
.battute .dialogo span + span{margin-top:.3rem}
.battute .dialogo .colpo{color:var(--amaranto)}
.battute + p{margin-top:0}