:root{
  --ink:#3A2E24; --head:#B4552D; --sub:#7A4A2B; --rule:#C9A24B;
  --box:#F7F1E5; --carta:#FDFBF6; --muto:#8A7A66;
  --ami:#B4552D; --bravo:#7A6A2B; --altri:#4E6B57; --pagato:#6B4A78;
  --campo:#FFFFFF; --bordo:#D8C9A8;
  --bandag:#2B2A28; --bandat:#D9D3C6; --bandal:#C9A24B; --bandab:#3E3C38;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#EDE4D6;--carta:#171310;--box:#221B15;--muto:#A9998A;--rule:#8A6E32;
    --head:#D8763F;--sub:#C09A6B;--campo:#241D17;--bordo:#4A3D2C;
    --ami:#D8763F;--bravo:#BBA85A;--altri:#7FA98A;--pagato:#A886B5;
    --bandag:#100D0B;--bandat:#BCB2A2;--bandal:#8A6E32;--bandab:#2A241E;
  }
}
:root[data-theme="dark"]{
  --ink:#EDE4D6;--carta:#171310;--box:#221B15;--muto:#A9998A;--rule:#8A6E32;
  --head:#D8763F;--sub:#C09A6B;--campo:#241D17;--bordo:#4A3D2C;
  --ami:#D8763F;--bravo:#BBA85A;--altri:#7FA98A;--pagato:#A886B5;
  --bandag:#100D0B;--bandat:#BCB2A2;--bandal:#8A6E32;--bandab:#2A241E;
}
*{box-sizing:border-box}
body{margin:0;background:var(--carta);color:var(--ink);
  font-family:Georgia,'Times New Roman',serif;line-height:1.6;-webkit-text-size-adjust:100%}
.wrap{max-width:34rem;margin:0 auto;padding:2.5rem 1.4rem 4rem}
.occhiello{font-family:'Trebuchet MS',sans-serif;font-size:.78rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sub);margin:0 0 .5rem}
h1{font-size:1.9rem;line-height:1.2;margin:0 0 1rem;font-weight:700;text-wrap:balance}
h2{font-size:1.12rem;margin:2.2rem 0 .6rem;font-weight:700}
.epigrafe{font-style:italic;color:var(--muto);margin:0 0 2.2rem;font-size:1.02rem}
hr{border:0;border-top:1px solid var(--rule);opacity:.55;margin:2rem 0}
a.card{display:block;text-decoration:none;color:inherit;background:var(--box);
  border:1px solid var(--rule);border-radius:.7rem;padding:1.1rem 1.2rem;margin:0 0 .9rem;
  transition:transform .12s ease, box-shadow .12s ease}
a.card:active{transform:scale(.985)}
a.card:hover{box-shadow:0 2px 14px rgba(0,0,0,.07)}
a.card:focus-visible{outline:2px solid var(--head);outline-offset:2px}
.card .k{font-family:'Trebuchet MS',sans-serif;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--head);display:block;margin-bottom:.35rem}
.card .t{font-size:1.16rem;font-weight:700;display:block}
.card .s{color:var(--muto);font-size:.95rem;display:block;margin-top:.3rem;font-style:italic}
.card.spento{opacity:.55;background:transparent;border-style:dashed;pointer-events:none}
.nota{font-family:'Trebuchet MS',sans-serif;font-size:.84rem;color:var(--muto);
  line-height:1.55;margin:-.3rem 0 1.4rem;padding-left:.9rem;border-left:2px solid var(--rule)}
.nav{display:flex;justify-content:space-between;gap:1rem;margin-top:2.4rem;
  font-family:'Trebuchet MS',sans-serif;font-size:.85rem}
.nav a{color:var(--sub);text-decoration:none;cursor:pointer}
.nav a:hover{text-decoration:underline}
.pie{margin-top:3rem;color:var(--muto);font-size:.82rem;
  font-family:'Trebuchet MS',sans-serif;text-align:center}
ol.indice{list-style:none;padding:0;margin:0}
ol.indice li{border-bottom:1px solid rgba(201,162,75,.35)}
ol.indice a{display:flex;gap:.9rem;align-items:baseline;padding:.75rem .2rem;
  text-decoration:none;color:inherit;cursor:pointer}
ol.indice a:hover{background:var(--box)}
ol.indice .n{font-family:'Trebuchet MS',sans-serif;font-size:.8rem;color:var(--muto);min-width:2.1rem}
ol.indice .tt{font-size:1.02rem;flex:1}
ol.indice .pt{font-family:'Trebuchet MS',sans-serif;font-size:.72rem;color:var(--muto)}
.griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.6rem;margin:1.5rem 0}
.tess{padding:0;border:1px solid var(--rule);background:var(--box);border-radius:.5rem;
  overflow:hidden;cursor:pointer;aspect-ratio:1;display:block}
.tess img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .18s ease}
.tess:hover img{transform:scale(1.03)}
.tess:focus-visible{outline:2px solid var(--head);outline-offset:2px}
#lente{position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:9;display:flex;
  align-items:center;justify-content:center;flex-direction:column;padding:1rem}
#lente[hidden]{display:none}
#grande{max-width:100%;max-height:82vh;object-fit:contain;border-radius:.4rem;display:block}
#did{color:#EDE4D6;font-style:italic;font-size:.92rem;text-align:center;margin:.9rem 0 0;max-width:34rem}
#lente button{position:absolute;background:none;border:0;color:#fff;font-size:2.4rem;
  line-height:1;cursor:pointer;padding:.6rem 1rem;opacity:.75}
#lente button:hover{opacity:1}
#chiudi{top:.4rem;right:.6rem}#ind{left:.2rem}#ava{right:.2rem}

/* la Mappa */
.pastiglia{display:inline-flex;align-items:center;gap:.45rem;font-family:'Trebuchet MS',sans-serif;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muto)}
.punto{width:.62rem;height:.62rem;border-radius:50%;display:inline-block;flex:none}
.p-ami{background:var(--ami)}.p-bravo{background:var(--bravo)}
.p-altri{background:var(--altri)}.p-pagato{background:var(--pagato)}
.domanda{font-size:1.22rem;line-height:1.42;margin:.2rem 0 .5rem;text-wrap:pretty}
.aiuto{font-style:italic;color:var(--muto);margin:0 0 1.6rem;font-size:.98rem}
label.et{display:block;font-family:'Trebuchet MS',sans-serif;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--head);margin:0 0 .4rem}
input.parola,textarea.parola{width:100%;font-family:Georgia,serif;font-size:1.15rem;color:var(--ink);
  background:var(--campo);border:1px solid var(--bordo);border-bottom:2px solid var(--rule);
  border-radius:.4rem;padding:.7rem .8rem}
input.parola:focus,textarea.parola:focus{outline:2px solid var(--head);outline-offset:1px}
textarea.parola{font-size:.92rem;line-height:1.5;min-height:9rem;resize:vertical}
.risposta{min-height:5rem}
.salvato{font-family:'Trebuchet MS',sans-serif;font-size:.78rem;color:var(--altri);
  margin:.5rem 0 0;min-height:1.2em}
.privacy{font-family:'Trebuchet MS',sans-serif;font-size:.78rem;color:var(--muto);
  border-left:2px solid var(--rule);padding:.15rem 0 .15rem .8rem;margin:2.2rem 0 0;line-height:1.5}
.avanz{font-family:'Trebuchet MS',sans-serif;font-size:.8rem;color:var(--muto);margin:.6rem 0 0}
.barra-av{height:.35rem;background:var(--box);border:1px solid var(--bordo);border-radius:1rem;
  overflow:hidden;margin:.45rem 0 0}
.barra-av i{display:block;height:100%;background:var(--head)}
.cerchi{display:grid;gap:.7rem;margin:1.4rem 0 0}
.cerchio{border:1px solid var(--bordo);border-radius:.6rem;padding:.9rem 1rem;background:var(--box)}
.cerchio h3{margin:0 0 .55rem;font-size:1rem;display:flex;align-items:center;gap:.5rem}
.cerchio ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.gettone{font-family:'Trebuchet MS',sans-serif;font-size:.84rem;border:1px solid var(--bordo);
  background:var(--carta);color:var(--ink);border-radius:1rem;padding:.28rem .7rem;cursor:pointer}
.gettone[aria-pressed="true"]{background:var(--head);border-color:var(--head);color:#FFF8EF}
.gettone:focus-visible{outline:2px solid var(--head);outline-offset:2px}
.gettone .cn{color:var(--muto);font-size:.72rem;margin-right:.35rem}
.gettone[aria-pressed="true"] .cn{color:#F3DCC9}
.vuoto{color:var(--muto);font-style:italic;font-size:.92rem}
.tornano{border:1px dashed var(--rule);border-radius:.6rem;padding:.9rem 1rem;margin:1.2rem 0 0}
.tornano p{margin:0 0 .5rem;font-size:.95rem}
.filo{display:flex;gap:.5rem;align-items:baseline;margin:0 0 .55rem}
.filo span{font-family:'Trebuchet MS',sans-serif;font-size:.8rem;color:var(--muto);min-width:1.2rem}
.disegno{width:100%;height:auto;display:block;margin:1.4rem 0 0}
.disegno text{font-family:'Trebuchet MS',sans-serif}
.legenda-cerchi{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;justify-content:center;margin:.4rem 0 0}
.sotto-disegno{font-family:'Trebuchet MS',sans-serif;font-size:.82rem;color:var(--muto);text-align:center;margin:.5rem 0 0;line-height:1.5}
.esito{margin:1.1rem 0 0;padding:1.1rem 1.2rem;background:var(--box);border-left:2px solid var(--head);border-radius:.2rem}
.esito .eti{font-family:'Trebuchet MS',sans-serif;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muto);margin:0 0 .45rem}
.esito .tre{font-size:1.14rem;color:var(--head);margin:0 0 .7rem;line-height:1.4}
.esito .dice{font-size:.95rem;color:var(--ink);margin:0;line-height:1.62}
table.tutto{width:100%;border-collapse:collapse;margin:1.2rem 0 0}
table.tutto td{border-bottom:1px solid rgba(201,162,75,.3);padding:.45rem .3rem;vertical-align:middle}
table.tutto td.n{font-family:'Trebuchet MS',sans-serif;font-size:.78rem;color:var(--muto);width:2.4rem}
table.tutto td.c{width:1rem}
table.tutto input{width:100%;font-family:Georgia,serif;font-size:1rem;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--bordo);padding:.3rem .1rem}
table.tutto input:focus{outline:none;border-bottom:2px solid var(--head)}
button.azione{font-family:'Trebuchet MS',sans-serif;font-size:.86rem;background:var(--box);
  color:var(--ink);border:1px solid var(--rule);border-radius:.45rem;padding:.55rem .9rem;cursor:pointer}
button.azione:hover{background:var(--carta)}
button.azione:focus-visible{outline:2px solid var(--head);outline-offset:2px}
.bottoniera{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0}

/* ============ IL SITO DELLA MARCA ============ */
:root{
  --osso:#F7F4EF; --sabbia:#EAE3DB; --nero:#141312; --inch:#1E1B18;
  --grigio:#6E675F; --terra:#B4462F; --linea:#D9D1C6; --chiaro:#F2EDE5;
  --disp:"Playfair Display",Georgia,serif;
  --testo:"Lora",Georgia,serif;
  --eti:"Archivo","Helvetica Neue",Arial,sans-serif;
}
.marca{max-width:none;padding:0;background:var(--osso);color:var(--inch);font-family:var(--testo)}
.marca *{box-sizing:border-box}
.marca .dentro{max-width:74rem;margin:0 auto;padding:0 1.6rem}
.marca .eti{font-family:var(--eti);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--terra);margin:0 0 1rem;font-weight:500}
.marca .eti.muta{color:var(--grigio)}
.marca h2{font-family:var(--disp);font-weight:400;font-size:clamp(2rem,5.6vw,3.3rem);
  line-height:1.06;margin:0;color:var(--inch);letter-spacing:-.01em}
.marca h3{font-family:var(--disp);font-weight:400;font-size:1.35rem;margin:0 0 .5rem;color:var(--inch)}
.marca p{margin:0 0 1rem;line-height:1.72;color:var(--grigio);font-size:1.02rem}
.marca p.forte{color:var(--inch)}
.marca h2 + p, .marca h2 + .azioni{margin-top:1.6rem}
.marca .dice h2{margin-bottom:1.6rem}

/* barra */
.marca section{scroll-margin-top:5.2rem}
.marca .navbar{position:sticky;top:0;z-index:8;background:rgba(247,244,239,.94);
  backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--linea)}
.marca .navbar .dentro{display:flex;align-items:center;gap:1.4rem;height:4.6rem}
.marca .logotipo{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--inch)}
.marca .sigla{width:2.6rem;height:2.6rem;border:1px solid var(--inch);border-radius:50%;
  display:grid;place-items:center;font-family:var(--eti);font-size:.68rem;letter-spacing:.1em}
.marca .logotipo b{font-family:var(--eti);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.marca .voci{display:flex;gap:1.8rem;margin-left:auto;font-family:var(--eti);font-size:.86rem}
.marca .voci button{background:none;border:0;color:var(--inch);font:inherit;cursor:pointer;padding:.3rem 0;
  border-bottom:1px solid transparent}
.marca .voci button:hover{border-bottom-color:var(--terra);color:var(--terra)}
.marca .voci button:focus-visible{outline:2px solid var(--terra);outline-offset:3px}
.marca .borsa{margin-left:1.4rem;position:relative;width:2.9rem;height:2.9rem;border:1px solid var(--linea);
  background:none;display:grid;place-items:center;cursor:pointer;flex:none}
.marca .borsa:hover{border-color:var(--inch)}
.marca .borsa:focus-visible{outline:2px solid var(--terra);outline-offset:2px}
.marca .borsa i{position:absolute;top:-.45rem;right:-.45rem;width:1.25rem;height:1.25rem;border-radius:50%;
  background:var(--terra);color:#fff;font-family:var(--eti);font-size:.66rem;font-style:normal;
  display:grid;place-items:center}
@media (max-width:44rem){ .marca .navbar .voci{display:none} .marca .navbar .dentro{height:3.9rem} }

/* apertura */
.marca .apre{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:min(80vh,40rem)}
.marca .apre .testo{padding:4rem 1.6rem 4rem clamp(1.6rem,6vw,5rem)}
.marca .apre .foto{align-self:stretch;background:var(--chiaro);overflow:hidden}
.marca .apre .foto img{width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block}
.marca .grido{font-family:var(--disp);font-weight:400;font-size:clamp(2.6rem,6.4vw,4.4rem);line-height:1.02;
  margin:0 0 1.4rem;letter-spacing:-.015em;color:var(--inch)}
.marca .grido em{font-style:italic;color:var(--terra);display:block}
.marca .occhio{max-width:30rem;font-size:1.06rem;line-height:1.66;color:var(--grigio);margin:0 0 2rem}
.marca .azioni{display:flex;flex-wrap:wrap;gap:1.6rem;align-items:center}
.marca .bottone{display:inline-flex;align-items:center;gap:.7rem;background:var(--nero);color:#F7F4EF;
  border:1px solid var(--nero);font-family:var(--eti);font-size:.92rem;padding:.95rem 1.5rem;
  cursor:pointer;text-decoration:none}
.marca .bottone:hover{background:var(--terra);border-color:var(--terra)}
.marca .bottone:focus-visible{outline:2px solid var(--terra);outline-offset:3px}
.marca .bottone.vuoto{background:none;color:var(--inch);border-color:var(--linea)}
.marca .bottone.vuoto:hover{background:none;border-color:var(--inch);color:var(--terra)}
.marca .testolink{background:none;border:0;font-family:var(--eti);font-size:.92rem;color:var(--inch);
  cursor:pointer;padding:.3rem 0;border-bottom:1px solid var(--linea)}
.marca .testolink:hover{color:var(--terra);border-bottom-color:var(--terra)}
.marca .postilla{font-family:var(--eti);font-size:.76rem;color:var(--grigio);margin:2rem 0 0}
@media (max-width:52rem){
  .marca .apre{grid-template-columns:1fr}
  /* La foto non deve prendersi tutto il primo schermo: sotto deve starci
     il titolo, la riga e il pulsante. 6 ottobre 2026. */
  .marca .apre .foto{order:-1;height:38vh;max-height:16.25rem}
  .marca .apre .testo{padding:2.6rem 1.6rem 3rem}
}

/* striscia nera dei numeri */
.marca .numeri{background:var(--nero);color:#EDE6DB}
.marca .numeri .dentro{display:flex;flex-wrap:wrap;gap:1.4rem 3.4rem;padding-top:1.5rem;padding-bottom:1.5rem}
.marca .numeri span{font-family:var(--eti);font-size:.82rem;letter-spacing:.06em;color:#A99E8F}
.marca .numeri b{font-family:var(--disp);font-size:1.3rem;color:#F7F4EF;margin-right:.5rem;font-weight:400}

/* sezione a due colonne */
.marca .sez{padding:5.5rem 0}
.marca .sez.sabbia{background:var(--sabbia)}
.marca .doppia{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem}
.marca .doppia .num{font-family:var(--eti);font-size:.78rem;color:var(--terra);letter-spacing:.1em}
.marca .intesta{display:grid;grid-template-columns:3rem 1fr;gap:0 1.6rem}
@media (max-width:52rem){ .marca .doppia{grid-template-columns:1fr;gap:1.6rem} .marca .intesta{grid-template-columns:1fr} .marca .sez{padding:3.6rem 0} }

/* tre passi */
.marca .tre{display:grid;grid-template-columns:repeat(3,1fr);margin:3.4rem 0 0;border-top:1px solid var(--linea)}
.marca .tre > div{padding:1.6rem 1.6rem 0;border-left:1px solid var(--linea)}
.marca .tre > div:first-child{border-left:0;padding-left:0}
.marca .tre .n{font-family:var(--eti);font-size:.78rem;color:var(--terra);letter-spacing:.1em;display:block;margin:0 0 .6rem}
.marca .tre p{font-size:.96rem;margin:0}
@media (max-width:52rem){ .marca .tre{grid-template-columns:1fr} .marca .tre > div{border-left:0;border-top:1px solid var(--linea);padding:1.4rem 0 0} .marca .tre > div:first-child{border-top:0} }

/* l'autore */
.marca .autore{display:grid;grid-template-columns:1fr 1fr;background:var(--nero)}
.marca .autore .foto{overflow:hidden;background:var(--chiaro)}
.marca .autore .foto img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block;min-height:24rem}
.marca .autore .dice{padding:clamp(2.6rem,5vw,4.6rem)}
.marca .autore h2{color:#F7F4EF}
.marca .autore .eti{color:#B9AE9E}
.marca .autore p{color:#B9AE9E;max-width:34rem}
.marca .firma{font-family:var(--disp);font-style:italic;font-size:1.7rem;color:var(--terra);margin:1.6rem 0 0}
/* la riga che porta al video: il pannello dell'autore e' scuro, quindi il
   collegamento qui e' chiaro, non nero come altrove */
.marca .al-video{margin:1.2rem 0 0}
.marca .autore .testolink{color:#E8A87C;border-bottom-color:rgba(232,168,124,.45);text-align:left}
.marca .autore .testolink:hover{color:#F7F4EF;border-bottom-color:#F7F4EF}
.marca .firma img{display:block;width:250px;max-width:68%;height:auto;margin:0;opacity:.92}
@media (max-width:44rem){ .marca .firma img{width:200px} }
@media (max-width:52rem){ .marca .autore{grid-template-columns:1fr} }

/* la domanda */
.marca .domandona{background:var(--chiaro);padding:5rem 0}
.marca .domandona .d{font-family:var(--disp);font-size:clamp(1.5rem,3.6vw,2.2rem);line-height:1.3;
  color:var(--inch);margin:0 0 1.2rem;max-width:44rem}
.marca .domandona .r{font-style:italic;color:var(--grigio);max-width:38rem;margin:0}

/* edizioni */
.marca .griglia2{display:grid;grid-template-columns:1fr 1fr;margin:3rem 0 0;border-top:1px solid var(--linea)}
.marca .ediz{display:flex;gap:1.1rem;padding:1.8rem 1.8rem 1.8rem 0;border-bottom:1px solid var(--linea);
  align-items:flex-start}
.marca .griglia2 > .ediz:nth-child(even){padding-left:1.8rem;border-left:1px solid var(--linea)}
.marca .ediz svg{flex:none;margin-top:.2rem}
.marca .ediz .corpo{flex:1}
.marca .ediz p{font-size:.94rem;margin:0}
.marca .ediz .vai{font-family:var(--eti);font-size:.86rem;color:var(--terra);background:none;border:0;
  cursor:pointer;white-space:nowrap;padding:.2rem 0}
.marca .ediz .vai:hover{text-decoration:underline}
.marca .ediz .vai[disabled]{color:var(--grigio);cursor:default;text-decoration:none}
@media (max-width:52rem){ .marca .griglia2{grid-template-columns:1fr} .marca .griglia2 > .ediz:nth-child(even){padding-left:0;border-left:0} /* sullo stretto lo stato va a capo, cosi' il testo non si strozza */ .marca .ediz{flex-wrap:wrap} .marca .ediz .stato{width:100%;align-self:flex-start;margin:.9rem 0 0;padding-left:2.4rem} .marca .ediz .compra{align-self:flex-start;margin:.9rem 0 0 2.4rem} }

/* il video dell'autore, sopra le edizioni: sta li' per chi sta ancora decidendo */
.marca .vid-autore{display:grid;grid-template-columns:auto 1fr;gap:2.2rem;align-items:center;
  margin:2.8rem 0 0;padding:2rem 0 0;border-top:1px solid var(--linea)}
.marca .vid-autore video{width:210px;display:block;border-radius:14px;background:#000;
  box-shadow:0 2px 16px rgba(0,0,0,.10)}
.marca .vid-autore h3{font-family:var(--disp);font-size:1.42rem;margin:0 0 .6rem;color:var(--inch);font-weight:400}
.marca .vid-autore p{font-size:.98rem;margin:0;color:var(--grigio)}
@media (max-width:52rem){ .marca .vid-autore{grid-template-columns:1fr;gap:1.4rem;justify-items:center;text-align:center}
  .marca .vid-autore video{width:min(240px,68vw)} }

/* oggetti */
.marca .oggetti{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:3rem 0 0}
.marca .ogg{background:var(--osso);border:1px solid var(--linea);padding:.9rem .9rem 1.1rem}
.marca .ogg .quad{aspect-ratio:1;background:var(--sabbia);display:grid;place-items:center;margin:0 0 .9rem}
.marca .ogg .quad.b{background:#E3D5CD}
.marca .ogg .cat{font-family:var(--eti);font-size:.72rem;color:var(--grigio);margin:0 0 .25rem}
.marca .ogg .nome{font-family:var(--disp);font-size:1.12rem;margin:0 0 .8rem;color:var(--inch)}
.marca .ogg .riga{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.marca .ogg .pr{font-family:var(--testo);font-size:.98rem;color:var(--inch)}
.marca .ogg .agg{font-family:var(--eti);font-size:.84rem;color:var(--terra);background:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:.35rem}
.marca .ogg .agg:hover{text-decoration:underline}
.marca .ogg .agg[disabled]{color:var(--grigio);cursor:default}
@media (max-width:60rem){ .marca .oggetti{grid-template-columns:1fr 1fr} }

/* il percorso */
.marca .percorso{background:var(--nero);color:#EDE6DB;padding:5rem 0}
.marca .percorso h2{color:#F7F4EF}
.marca .percorso .eti{color:#B9AE9E}
.marca .percorso p{color:#B9AE9E}
.marca .percorso .bottone{background:#F7F4EF;color:var(--nero);border-color:#F7F4EF}
.marca .percorso .bottone:hover{background:var(--terra);border-color:var(--terra);color:#fff}
.marca .cerchietti{display:flex;gap:.5rem;margin:0 0 1.4rem}
.marca .cerchietti i{width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid #4A423A;display:block}

/* piede */
.marca .piede{background:var(--osso);border-top:1px solid var(--linea);padding:3rem 0 4rem}
.marca .piede .dentro{display:flex;flex-wrap:wrap;gap:1.6rem;align-items:baseline}
.marca .piede .voci{margin-left:0;flex-wrap:wrap;gap:1.2rem}
.marca .piede a{color:var(--grigio);text-decoration:none;font-family:var(--eti);font-size:.86rem}
.marca .piede a:hover{color:var(--terra)}
.marca .piede .cop{margin-left:auto;font-family:var(--eti);font-size:.78rem;color:var(--grigio)}
.marca .piede .social{display:inline-flex;align-items:center;gap:.55rem}
.marca .piede .social a{display:inline-flex;align-items:center;padding:.35rem;margin:-.35rem;color:var(--grigio)}
.marca .piede .social a:hover{color:var(--terra)}
.marca .piede .social .nome{font-family:var(--eti);font-size:.86rem;color:var(--grigio);margin-left:.1rem}
.marca .nota-bozza{border:1px dashed var(--linea);padding:.9rem 1.1rem;margin:2.4rem 0 0;
  font-family:var(--eti);font-size:.78rem;color:var(--grigio);line-height:1.6}
.marca .nota-bozza b{color:var(--inch)}

/* la bussola */
.marca .rosa .ago{transform-box:view-box;animation:respiro 5s ease-in-out infinite alternate}
.marca .rosa.svegliata .ago{animation:assesta 2.1s cubic-bezier(.22,.9,.25,1) 1,
  respiro 5s ease-in-out 2.1s infinite alternate}
@keyframes assesta{
  0%{transform:rotate(-19deg)} 22%{transform:rotate(13deg)} 45%{transform:rotate(-7deg)}
  68%{transform:rotate(4deg)} 85%{transform:rotate(-1.5deg)} 100%{transform:rotate(0)}}
@keyframes respiro{from{transform:rotate(-4.5deg)} to{transform:rotate(4.5deg)}}
.marca .rosa{cursor:pointer}
.marca .bottone svg{transition:transform .2s ease}
.marca .bottone:hover svg{transform:translateX(3px)}
.marca .bottone.svegliato svg{animation:spinta 1.6s ease-in-out .9s 2}
@keyframes spinta{0%,100%{transform:translateX(0)} 40%{transform:translateX(5px)} 70%{transform:translateX(0)}}
.marca .bottone .quanto{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  opacity:.72;padding-left:.85rem;margin-left:.15rem;border-left:1px solid currentColor}
.marca .nomi-cerchi{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:.5rem 1.2rem;max-width:26rem}
.marca .nomi-cerchi li{display:flex;align-items:baseline;gap:.5rem;
  font-family:var(--eti);font-size:.8rem;color:var(--grigio);line-height:1.4}
.marca .nomi-cerchi .punto{width:.55rem;height:.55rem;border-radius:50%;flex:none;
  display:inline-block;transform:translateY(-.05rem)}
@media (max-width:52rem){ .marca .nomi-cerchi{grid-template-columns:1fr;margin-left:auto;margin-right:auto} }
.marca .bus-invito{font-family:var(--testo);font-style:italic;color:var(--terra);
  font-size:clamp(1.32rem,2.8vw,1.72rem);line-height:1.36;margin:0 0 1.3rem;text-wrap:balance}
.marca .ti-resta{list-style:none;margin:1.6rem 0 0;padding:0}
.marca .ti-resta li{border-top:1px solid var(--linea);padding:.75rem 0 .75rem 1.5rem;
  position:relative;font-size:.97rem;color:var(--grigio);line-height:1.5}
.marca .ti-resta li:last-child{border-bottom:1px solid var(--linea)}
.marca .ti-resta li::before{content:"";position:absolute;left:0;top:1.2rem;width:.48rem;height:.48rem;
  border:1px solid var(--terra);border-radius:50%}
.marca .ti-resta + .azioni{margin-top:1.8rem}
.marca .min{font-family:var(--eti);font-size:.79rem;color:var(--grigio);margin:1.1rem 0 0;line-height:1.5}
.marca .rosa-cont{margin:2rem 0 0}
.marca .rosa-cont.piccola{margin:0 0 2rem;text-align:center}
.marca .rosa{display:block;max-width:100%;height:auto}
.marca .rosa-cont.piccola .rosa{margin:0 auto}
.marca .bus-doppia{align-items:start}
.marca .tre .simb{display:block;margin:.9rem 0 .7rem}
@media (max-width:52rem){ .marca .rosa-cont{text-align:center} .marca .rosa{margin:0 auto} }
.marca .bus{max-width:44rem;margin:0 auto;padding:3.4rem 1.6rem 5rem}
.marca .bus .passo{font-family:var(--eti);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grigio);margin:0 0 1.6rem}
.marca .bus .chiede{font-family:var(--eti);font-size:.92rem;color:var(--grigio);margin:0 0 .8rem}
.marca .bus .dom{font-family:var(--disp);font-size:clamp(1.45rem,4vw,2.05rem);line-height:1.25;
  margin:0 0 2rem;color:var(--inch)}
.marca .scala{display:grid;gap:.6rem}
.marca .scala button{text-align:left;background:none;border:1px solid var(--linea);
  font-family:var(--testo);font-size:1.02rem;color:var(--inch);padding:.95rem 1.2rem;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:1rem}
.marca .scala button:hover{border-color:var(--inch);background:var(--chiaro)}
.marca .scala button:focus-visible{outline:2px solid var(--terra);outline-offset:2px}
.marca .scala button span{font-family:var(--eti);font-size:.74rem;color:var(--grigio)}
.marca .avanti{height:2px;background:var(--linea);margin:0 0 2.4rem}
.marca .avanti i{display:block;height:100%;background:var(--terra);transition:width .25s ease}
.marca .indietro{font-family:var(--eti);font-size:.84rem;color:var(--grigio);background:none;
  border:0;cursor:pointer;padding:.4rem 0;margin:1.8rem 0 0}
.marca .indietro:hover{color:var(--terra)}
.marca .esito{font-family:var(--disp);font-size:clamp(1.8rem,5vw,2.6rem);line-height:1.12;
  margin:.4rem 0 1.2rem;color:var(--inch)}
.marca .perche{border-left:2px solid var(--terra);padding-left:1.1rem;margin:0 0 2.4rem}
.marca .laDomanda{background:var(--nero);color:#F7F4EF;padding:2rem 1.8rem;margin:0 0 2.4rem}
.marca .laDomanda .k{font-family:var(--eti);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:#B9AE9E;margin:0 0 .9rem}
.marca .laDomanda .q{font-family:var(--disp);font-size:1.35rem;line-height:1.34;margin:0}
.marca .barrette{display:grid;gap:.7rem;margin:0 0 2.4rem}
.marca .barrette .r{display:grid;grid-template-columns:13rem 1fr 7.6rem;gap:.9rem;align-items:center;
  font-family:var(--eti);font-size:.82rem;color:var(--grigio)}
.marca .barrette .t{height:.55rem;background:rgba(0,0,0,.06);position:relative}
.marca .barrette .t i{display:block;height:100%;background:#B9AFA1;min-width:.35rem}
.marca .barrette .qui{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--terra);
  white-space:nowrap}
.marca .barrette .r.min{color:var(--terra);font-weight:500}
.marca .barrette .r.min .t{background:rgba(180,85,45,.22);box-shadow:0 0 0 2px rgba(180,85,45,.22)}
.marca .barrette .r.min .t i{background:var(--terra)}
@media (max-width:34rem){
  .marca .barrette .r{grid-template-columns:1fr auto;gap:.3rem .7rem}
  .marca .barrette .t{grid-column:1 / -1}
}
.marca .modulo{border-top:1px solid var(--linea);padding:2.4rem 0 0}
.marca .modulo input[type=email]{width:100%;font-family:var(--testo);font-size:1.05rem;
  padding:.9rem 1rem;border:1px solid var(--linea);background:#fff;color:var(--inch)}
.marca .modulo input[type=email]:focus{outline:2px solid var(--terra);outline-offset:1px}
.marca .consenso{display:flex;gap:.7rem;align-items:flex-start;margin:1.1rem 0 0;
  font-family:var(--eti);font-size:.86rem;color:var(--grigio);line-height:1.5;max-width:34rem}
.marca .consenso input{margin-top:.25rem;flex:none;width:1.05rem;height:1.05rem;accent-color:var(--terra)}
.marca .micro{font-family:var(--eti);font-size:.74rem;color:var(--grigio);line-height:1.6;margin:1.2rem 0 0}
.marca .micro a{color:var(--terra)}

/* pannello del carrello */
.velo{position:fixed;inset:0;background:rgba(20,19,18,.5);z-index:12}
.velo[hidden]{display:none}
.cassetto{position:fixed;top:0;right:0;bottom:0;width:min(24rem,92vw);background:var(--osso);
  z-index:13;padding:1.6rem;overflow:auto;font-family:var(--testo);color:var(--inch);
  border-left:1px solid var(--linea)}
.cassetto[hidden]{display:none}
.cassetto h3{font-family:var(--disp);font-size:1.3rem;margin:0 0 1.2rem}
.cassetto .voce{display:flex;justify-content:space-between;gap:.8rem;padding:.7rem 0;
  border-bottom:1px solid var(--linea);font-size:.94rem}
.cassetto .tot{display:flex;justify-content:space-between;padding:1rem 0;font-family:var(--disp);font-size:1.15rem}
.cassetto .via{background:none;border:0;color:var(--terra);font-family:var(--eti);font-size:.8rem;cursor:pointer}
.cassetto .chiudi{position:absolute;top:.8rem;right:1rem;background:none;border:0;font-size:1.8rem;
  line-height:1;cursor:pointer;color:var(--grigio)}

/* la fascia della copertina, sotto l'eroe */
.marca .fascia-cop{background:var(--sabbia);padding:4.5rem 0}
.marca .fascia-cop .dentro{max-width:60rem;margin:0 auto;padding:0 2rem;display:grid;
  grid-template-columns:auto 1fr;gap:4rem;align-items:center}
.marca .fascia-cop img{height:330px;width:auto;display:block;
  box-shadow:0 24px 56px rgba(20,19,18,.28)}
.marca .fascia-cop h2{font-family:var(--disp);font-size:1.9rem;line-height:1.25;
  margin:.4rem 0 1rem;font-weight:400}
.marca .fascia-cop h2 em{font-style:normal;color:var(--terra)}
.marca .fascia-cop p:not(.eti){color:var(--grigio);margin:0 0 1.6rem;max-width:28rem}
@media (max-width:46rem){
  .marca .fascia-cop{padding:3rem 0}
  .marca .fascia-cop .dentro{grid-template-columns:1fr;gap:2rem;justify-items:start}
  .marca .fascia-cop img{height:250px}
  .marca .fascia-cop h2{font-size:1.5rem}
}

/* ============ revisione del 10 settembre ============ */

/* apertura: la frase principale e quella secondaria */
.marca .occhio{margin-bottom:.9rem;color:var(--inch);font-size:1.14rem}
.marca .occhio-due{max-width:30rem;font-size:1rem;line-height:1.62;
  color:var(--grigio);margin:0 0 2rem}

/* fascia dei numeri: una voce senza cifra, allineata alle altre */
.marca .numeri .parole{font-family:var(--disp);font-size:1.3rem;color:#F7F4EF;
  letter-spacing:0}

/* nota sotto le tre colonne */
.marca .nota-tre{font-family:var(--eti);font-size:.86rem;line-height:1.6;
  color:var(--grigio);margin:2.4rem 0 0;padding-left:1rem;
  border-left:2px solid var(--linea);max-width:44rem}
.marca .nota-tre a{color:var(--terra)}

/* l'autore: titolo piu' contenuto, deve respirare */
.marca .autore h2.corta{font-size:clamp(1.6rem,2.6vw,2.15rem);line-height:1.24;
  max-width:24ch}

/* edizioni: stato statico al posto del pulsante */
.marca .ediz .stato{font-family:var(--eti);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grigio);align-self:center;white-space:nowrap}
/* l'unica edizione che si puo' davvero comprare: un pulsante, non una scritta */
.marca .ediz .compra{font-family:var(--eti);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;background:var(--terra);border:1px solid var(--terra);
  padding:.6rem 1.1rem;text-decoration:none;align-self:center;white-space:nowrap;
  transition:background .15s,border-color .15s}
.marca .ediz .compra:hover{background:var(--inch);border-color:var(--inch);text-decoration:none}

/* oltre il libro: un solo riquadro */
.marca .oltre{display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:start;
  background:var(--osso);border:1px solid var(--linea);padding:2.6rem 2.8rem;
  max-width:52rem}
.marca .oltre .segno{padding-top:.2rem}
.marca .oltre h2{font-family:var(--disp);font-size:1.6rem;font-weight:400;
  line-height:1.25;margin:.3rem 0 1rem}
.marca .oltre p{color:var(--grigio);margin:0;max-width:40ch}
.marca .oltre .stato-sel{font-family:var(--eti);font-size:.74rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--terra);margin-top:1.6rem}
@media (max-width:46rem){
  .marca .oltre{grid-template-columns:1fr;gap:1.2rem;padding:2rem 1.6rem}
}

/* frammenti in terracotta dentro un paragrafo */
.marca .ter{font-style:normal;color:var(--terra)}

/* il ritratto dell'apertura e' gia' ritagliato sopra la testa: si parte dall'alto */
.marca .apre .foto img{object-position:center 5%}   /* la testa intera, con un dito d'aria sopra */

/* l'autore: il ritratto inquadrato dalla testa alle braccia */
.marca .autore .foto img{object-position:center top}

/* lo scopo del libro per chi legge: staccato dal resto, su fondo nero */
.marca .autore .scopo{color:#EDE4D6;font-size:1.06rem;line-height:1.66;
  border-left:2px solid var(--terra);padding-left:1.2rem;margin-top:1.8rem}
.marca .autore .scopo em{font-style:normal;color:#E8A87C}

/* bussola: l'invito al libro al posto del modulo email */
.marca .modulo .invito{font-family:var(--testo);font-size:1.08rem;line-height:1.62;
  color:var(--inch);max-width:34rem;margin:.6rem 0 0}


/* ---- le voci di chi ha letto il libro in anteprima (2 ottobre 2026) ----
   Tre testi veri, accorciati scegliendo fra le loro parole: niente e' stato
   riscritto. La critica di Marco resta: e' lei che rende credibili le altre due. */
.marca #s-voci .voci-sotto{color:var(--grigio);font-size:1.02rem;margin:1.6rem 0 0;max-width:34rem}
.marca #s-voci .voci{display:grid;grid-template-columns:repeat(3,1fr);margin:3.4rem 0 0;
  border-top:1px solid var(--linea)}
.marca #s-voci .voci > figure{margin:0;padding:2.2rem 1.8rem 0;border-left:1px solid var(--linea)}
.marca #s-voci .voci > figure:first-child{border-left:0;padding-left:0}
.marca #s-voci .voci blockquote{font-family:var(--disp);font-size:1.3rem;line-height:1.3;
  margin:0 0 1rem;color:var(--inch);font-style:italic}
.marca #s-voci .voci p{font-size:.95rem;margin:0;color:var(--grigio)}
.marca #s-voci .voci figcaption{font-family:var(--eti);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--inch);margin-top:1.3rem}
.marca #s-voci .voci figcaption span{color:var(--grigio);letter-spacing:.1em;display:block;
  margin-top:.3rem;font-size:.68rem}
@media (max-width:52rem){
  .marca #s-voci .voci{grid-template-columns:1fr}
  .marca #s-voci .voci > figure{border-left:0;border-top:1px solid var(--linea);padding:1.8rem 0 0}
  .marca #s-voci .voci > figure:first-child{border-top:0}
}

/* ---------- la riga della lingua ----------
   Discreta, in cima, sopra la barra. Compare solo a chi ha il telefono
   nell'altra lingua e si puo' chiudere: non fa mai un salto automatico. */
.riga-lingua{
  display:flex;align-items:center;justify-content:center;gap:.9rem;
  flex-wrap:wrap;
  padding:.62rem 3rem .62rem 1rem;position:relative;
  background:var(--sabbia);border-bottom:1px solid var(--linea);
  font-family:var(--testo);font-size:.92rem;color:var(--grigio);
  text-align:center;line-height:1.4}
.riga-lingua a{
  color:var(--terra);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:1px}
.riga-lingua a:hover{opacity:.78}
.riga-lingua a:focus-visible{outline:2px solid var(--terra);outline-offset:3px}
.riga-lingua button{
  position:absolute;right:.55rem;top:50%;transform:translateY(-50%);
  background:none;border:0;cursor:pointer;
  color:var(--grigio);font-size:1.35rem;line-height:1;
  padding:.1rem .45rem;border-radius:4px}
.riga-lingua button:hover{color:var(--inch)}
.riga-lingua button:focus-visible{outline:2px solid var(--terra);outline-offset:2px}
@media (max-width:30rem){
  .riga-lingua{font-size:.86rem;padding:.55rem 2.6rem .55rem .8rem;gap:.55rem}
}

/* la riga della lingua in cima: si vede appena si apre la pagina, a tutti.
   Non e' una domanda ma un interruttore: la lingua in cui si sta e' in
   grassetto, l'altra e' il collegamento. 21 ottobre 2026. */
.riga-due{
  display:flex;align-items:center;justify-content:center;gap:.55rem;
  flex-wrap:wrap;position:relative;
  padding:.6rem 3rem .6rem 1rem;
  background:var(--sabbia);border-bottom:1px solid var(--linea);
  font-family:var(--testo);font-size:.93rem;color:var(--grigio);
  text-align:center;line-height:1.4}
.riga-due b{font-weight:600;color:var(--inch)}
.riga-due a{
  color:var(--terra);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:1px}
.riga-due a:hover{opacity:.78}
.riga-due a:focus-visible{outline:2px solid var(--terra);outline-offset:3px}
.riga-due .sep{color:var(--linea)}
.riga-due .x{
  position:absolute;right:.55rem;top:50%;transform:translateY(-50%);
  background:none;border:0;cursor:pointer;
  color:var(--grigio);font-size:1.35rem;line-height:1;
  padding:.1rem .45rem;border-radius:4px}
.riga-due .x:hover{color:var(--inch)}
.riga-due .x:focus-visible{outline:2px solid var(--terra);outline-offset:2px}
@media (max-width:30rem){
  .riga-due{font-size:.87rem;padding:.55rem 2.6rem .55rem .8rem;gap:.4rem}
}

/* il passaggio di lingua nel menu in alto: si vede, ma non ruba la scena */
.marca .voci .lingua-nav{
  background:var(--terra);color:#fff;text-decoration:none;font:inherit;
  font-weight:600;
  padding:.36rem .78rem;border:1px solid var(--terra);border-radius:999px;
  line-height:1.1;white-space:nowrap;align-self:center}
.marca .voci .lingua-nav:hover{background:#9d3b27;border-color:#9d3b27}
.marca .voci .lingua-nav:focus-visible{outline:2px solid var(--terra);outline-offset:3px}

/* Sul telefono il menu in alto e' nascosto (le voci portano a sezioni della
   stessa pagina, e sul piccolo non servono). Il passaggio di lingua pero' deve
   restare visibile: e' l'unico modo per arrivare all'altra lingua dal telefono. */
@media (max-width:44rem){
  .marca .navbar .voci{display:flex;gap:0;margin-left:auto}
  .marca .navbar .voci button{display:none}
  .marca .navbar .voci .lingua-nav{display:inline-block;font-size:.8rem;padding:.3rem .7rem}
}

/* Sugli schermi larghi e' il TESTO a decidere quanto e' alta la fascia, non la
   proporzione della fotografia. Prima la fotografia si allungava da sola e
   lasciava sotto il testo un pezzo di pagina vuoto. 6 ottobre 2026. */
@media (min-width:52.01rem){
  .marca .apre{min-height:0}
  .marca .apre .foto,
  .marca .autore .foto{position:relative;overflow:hidden}
  .marca .apre .foto img,
  .marca .autore .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
}

/* Le tre fotografie di «Leggi / Esplora / Lascia gli indizi», scattate da Albi
   sulla bozza del libro. La cornice color mattone fa parte della fotografia.
   6 ottobre 2026. */
.marca .tre .passo{display:block;width:100%;height:auto;aspect-ratio:1/1;
  object-fit:cover;margin:0 0 1.1rem}
@media (min-width:52.01rem){
  .marca .tre > div{padding-top:2.2rem}
  /* la prima colonna e' piu' larga delle altre perche' non ha margine a
     sinistra: restringo solo la sua fotografia, cosi' le tre restano uguali */
  .marca .tre > div:first-child .passo{width:calc(100% - 1.6rem)}
}

/* L'onda con il sole, ritagliata dalla copertina vera (non ridisegnata):
   chiude la pagina come chiude la copertina. 6 ottobre 2026. */
/* La striscia esce dai due bordi dello schermo. E' disegnata un po' piu'
   larga della pagina apposta: cosi' i due tratti che si separano dopo il sole
   non finiscono in mezzo al nulla sopra la scritta, ma escono dal bordo, come
   fanno sulla copertina vera quando proseguono sul dorso. 6 ottobre 2026. */
.marca .piede{overflow:hidden}
.marca .piede .onda{display:block;width:112%;max-width:none;height:auto;margin:0 -6% 2.6rem}
@media (max-width:52rem){ .marca .piede .onda{margin-bottom:2rem} }

/* ===================================================================
   LA NUOVA APERTURA — la fotografia sulla barca (11 ottobre)
   La fotografia e' orizzontale e Alberto sta a destra. Regola fissa:
   nessuna scritta deve mai finire sopra di lui.
   - su computer: testo a sinistra su fondo avorio, fotografia a destra;
   - su telefono: fotografia sopra, testo sotto su fondo avorio.
   Cosi' il testo non tocca la persona a nessuna larghezza.
   =================================================================== */
.marca .apre-mare{align-items:stretch}
.marca .apre-mare .testo{align-self:center}
.marca .apre-mare .foto{background:#6E8ECE}
/* su schermo largo la fotografia viene tagliata sopra e sotto, mai ai lati:
   cosi' Alberto resta intero e il cielo resta aperto sopra di lui */
.marca .apre-mare .foto img{object-position:center center}
/* su computer la fotografia sta a DESTRA e il testo a sinistra sull'avorio */
@media (min-width:52.01rem){
  .marca .apre-mare .foto{order:2}
  .marca .apre-mare .testo{order:1}
}
.marca .grido-mare{font-family:var(--disp);font-weight:400;line-height:1.08;
  font-size:clamp(2.1rem,5.4vw,3.5rem);margin:0 0 1.1rem;letter-spacing:-.01em}
.marca .grido-mare em{font-style:italic;color:var(--terra)}
.marca .apre-mare .occhio-due{max-width:30rem}

@media (max-width:52rem){
  /* la fotografia sta sopra e si vede quasi per intero: cielo in alto,
     Alberto a destra. Il testo comincia sotto, sull'avorio. */
  /* la fotografia sta sopra. L'altezza e' limitata, altrimenti su un tablet
     riempie tutto lo schermo e il titolo finisce sotto la piega. */
  /* la fascia prende le stesse proporzioni della fotografia: si vede
     tutta, cielo compreso, senza nessun taglio ai lati */
  .marca .apre-mare .foto{order:-1;width:100%;height:auto;max-height:none;aspect-ratio:1600/1161}
  .marca .apre-mare .foto img{height:100%;object-position:center center}
  .marca .apre-mare .testo{padding:2.2rem 1.6rem 2.8rem}
}

/* ===================================================================
   «CHI SONO» — la fotografia al tramonto, di fianco al testo
   La fotografia e' quadrata e Alberto sta al centro: il testo resta
   nella sua colonna, quindi non lo copre mai.
   =================================================================== */
.marca .autore .foto img{object-position:center 40%}
@media (max-width:52rem){
  /* su telefono la fotografia sta sopra, con un'altezza contenuta */
  .marca .autore .foto img{min-height:0;height:min(50vh,22rem)}
}

/* ===================================================================
   «DA FUORI» — la serie su Instagram
   =================================================================== */
.marca .dafuori{background:var(--nero);padding:clamp(2rem,3.4vw,2.8rem) 0}
.marca .dafuori h2{font-size:clamp(1.5rem,2.5vw,2rem);line-height:1.15}
.marca .dafuori .dentro{max-width:46rem;margin:0 auto;padding:0 clamp(1.6rem,6vw,3rem)}
.marca .dafuori .eti{color:#B9AE9E}
.marca .dafuori h2{color:#F7F4EF;margin:0 0 .9rem}
.marca .dafuori p{color:#B9AE9E;max-width:36rem}
.marca .dafuori .azioni{margin-top:1.3rem}
/* i due loghi al posto del pulsante: area di tocco larga, nessun riquadro */
.marca .dafuori .trovi{font-family:var(--eti);font-size:.84rem;letter-spacing:.06em;
  color:#B9AE9E;margin:1.3rem 0 .2rem}
.marca .dafuori .loghi{display:flex;gap:.4rem;margin-top:0}
.marca .dafuori .social-grande{display:inline-flex;align-items:center;justify-content:center;
  width:3rem;height:3rem;color:#F7F4EF;opacity:.85;transition:opacity .18s,color .18s}
.marca .dafuori .social-grande:hover{opacity:1;color:#E8A87C}
.marca .dafuori .social-grande:focus-visible{outline:2px solid #E8A87C;outline-offset:2px;opacity:1}
.marca .dafuori .bottone{background:none;border:1px solid #F7F4EF;color:#F7F4EF}
.marca .dafuori .bottone:hover{background:var(--terra);border-color:var(--terra);color:#fff}
.marca .dafuori .bottone:focus-visible{outline:2px solid #E8A87C;outline-offset:3px}

/* ===================================================================
   IL TRAILER (11 ottobre)
   Il filmato e' verticale e largo 480 pixel: non va mai allargato oltre,
   altrimenti si sgrana. Su computer sta di fianco al testo, su telefono
   sotto. Non parte da solo e si scarica solo quando lo premi
   (preload="none"): altrimenti 9,5 MB li scaricherebbe chiunque apra
   la pagina, anche chi non lo guarda.
   =================================================================== */
.marca .trailer{background:var(--nero);padding:clamp(2.6rem,5vw,4rem) 0}
.marca .trailer .dentro{max-width:62rem;margin:0 auto;padding:0 clamp(1.6rem,6vw,3rem);
  display:grid;grid-template-columns:minmax(0,24rem) auto;justify-content:center;
  gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.marca .trailer .eti{color:#B9AE9E}
.marca .trailer h2{color:#F7F4EF;margin:0 0 .7rem;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.15}
.marca .trailer .min{color:#8F8579;font-size:.9rem;margin:0}
.marca .trailer .schermo{width:min(23.75rem,100%)}
.marca .trailer video{display:block;width:100%;height:auto;aspect-ratio:480/848;
  background:#000;border:0}
@media (max-width:52rem){
  .marca .trailer .dentro{grid-template-columns:1fr}
  .marca .trailer .schermo{width:100%;max-width:23.75rem;margin:0 auto}
}

/* L'annuncio dell'edizione spagnola. Sta dentro la fascia della copertina,
   sotto il pulsante, staccato da una riga sottile. Esiste solo in /es/.
   18 ottobre 2026. */
.marca .fascia-cop .avviso-es{margin:2.4rem 0 0;padding:1.8rem 0 0;
  border-top:1px solid var(--linea);max-width:28rem}
.marca .fascia-cop .avviso-es .eti{margin-bottom:.6rem}
.marca .fascia-cop .avviso-es h3{font-family:var(--disp);font-weight:400;
  font-size:clamp(1.45rem,4.4vw,1.95rem);line-height:1.2;margin:0 0 .7rem;color:var(--inch)}
.marca .fascia-cop .avviso-es p:not(.eti){margin:0;color:var(--grigio)}