/* Fernando Botero in Sicilia — pagina di presentazione delle due mostre
   Due identità, un artista: viola di Palazzo Riso + ocra della Valle dei Templi */

:root{
  --viola:#6636A0; --viola-a:#7141AC; --viola-b:#46297C;
  --ocra:#D5811A; --ocra-a:#DE8E24; --ocra-b:#C06F0E;
  --oro:#E8942F; --lavanda:#C9B8E6; --crema:#F6E3C2;
  --accento-ag:#5C3A96;
  --bianco:#FFFFFF; --carta:#FBFAF8; --inchiostro:#2E2536; --grigio:#6F6779;
  --bruno:#4A3410; --viola-scuro:#46297C;
  --display:"Playfair Display",Didot,"Bodoni MT",serif;
  --testo:"Source Serif 4",Georgia,serif;
  --etichetta:"Archivo","Helvetica Neue",Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{font-family:var(--testo);color:var(--inchiostro);background:var(--carta);line-height:1.75;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--oro);outline-offset:3px;border-radius:2px}

/* ---------- testata ---------- */
.testata{
  background:var(--bianco);padding:22px clamp(20px,5vw,56px) 26px;
  display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;
}
.testata .marchio{font-family:var(--etichetta);font-weight:800;font-size:clamp(20px,2.8vw,26px);color:var(--inchiostro);line-height:1}
.testata .marchio span{color:var(--viola)}
.testata .sotto{font-family:var(--etichetta);font-weight:600;color:var(--grigio);text-transform:uppercase;font-size:12px;letter-spacing:.18em;margin-top:7px}
.testata .estate{
  font-family:var(--display);font-weight:700;font-size:clamp(16px,2.4vw,22px);
  color:var(--viola-scuro);letter-spacing:.08em;text-transform:uppercase;text-align:right;line-height:1.35;
}
.testata .estate small{display:block;font-family:var(--etichetta);font-weight:500;font-size:11.5px;letter-spacing:.03em;text-transform:none;color:var(--grigio);margin-top:4px}

/* ---------- hero bicolore ---------- */
.eroe{position:relative;color:var(--bianco);overflow:hidden}
.eroe .meta{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr}
.eroe .meta .pa{background:linear-gradient(160deg,var(--viola-a),var(--viola) 55%,var(--viola-b))}
.eroe .meta .ag{background:linear-gradient(200deg,var(--ocra-a),var(--ocra) 55%,var(--ocra-b))}
.eroe .contenuto{position:relative;text-align:center;padding:clamp(34px,6vw,72px) 20px clamp(40px,6vw,80px)}
.eroe .firma{font-family:var(--etichetta);font-weight:600;letter-spacing:.44em;text-transform:uppercase;font-size:clamp(11px,1.4vw,14px);opacity:.9}
.eroe .stack{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(84px,17vw,220px);line-height:.82;letter-spacing:.02em;margin-top:14px;
  text-shadow:0 4px 40px rgba(30,10,40,.25);
}
.eroe .stack span{display:block}
.eroe .in-sicilia{
  font-family:var(--display);font-style:italic;font-weight:600;
  font-size:clamp(20px,3.2vw,32px);margin-top:22px;letter-spacing:.04em;
}
.eroe .due{
  font-family:var(--etichetta);font-weight:600;font-size:clamp(12px,1.5vw,14.5px);
  letter-spacing:.22em;text-transform:uppercase;margin-top:12px;opacity:.92;
}
@media (max-width:720px){
  .eroe .meta{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
}

/* ---------- corpo ---------- */
.contenitore{max-width:1100px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.intro{max-width:720px;margin:0 auto;text-align:center;padding:clamp(40px,6vw,64px) 22px clamp(30px,4vw,44px)}
.intro .occhiello{font-family:var(--etichetta);font-weight:700;letter-spacing:.3em;text-transform:uppercase;font-size:12px;color:var(--viola)}
.intro h2{font-family:var(--display);font-weight:700;font-size:clamp(26px,4vw,38px);margin:10px 0 14px;line-height:1.25}
.intro p{font-size:clamp(16.5px,1.9vw,18.5px);color:var(--grigio)}
.filo{width:64px;height:3px;background:var(--oro);margin:22px auto 0;border-radius:2px}

/* ---------- selettore lingua ---------- */
.lingue{display:flex;justify-content:center;margin:0 auto 10px;width:max-content;border:1.5px solid var(--viola);border-radius:999px;overflow:hidden}
.lingue button{font-family:var(--etichetta);font-weight:700;font-size:13px;letter-spacing:.18em;padding:9px 26px;border:0;background:transparent;color:var(--viola);cursor:pointer}
.lingue button[aria-pressed="true"]{background:var(--viola);color:var(--bianco)}
[data-lang]{display:none}
[data-lang].attiva{display:block}

/* ---------- schede mostra ---------- */
.mostre{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.5vw,44px);padding-bottom:clamp(50px,7vw,90px)}
@media (max-width:860px){.mostre{grid-template-columns:1fr}}
.mostra{background:var(--bianco);box-shadow:0 4px 22px rgba(44,35,66,.10);display:flex;flex-direction:column;overflow:hidden}
.mostra .fascia{color:var(--bianco);padding:clamp(22px,3vw,32px) clamp(22px,3vw,34px) 0;position:relative}
.mostra.pa .fascia{background:linear-gradient(160deg,var(--viola-a),var(--viola) 60%,var(--viola-b))}
.mostra.ag .fascia{background:linear-gradient(160deg,var(--ocra-a),var(--ocra) 60%,var(--ocra-b))}
.mostra .luogo{font-family:var(--etichetta);font-weight:800;font-size:clamp(20px,2.6vw,26px);line-height:1}
.mostra .sede{font-family:var(--etichetta);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12.5px;margin-top:6px;opacity:.92}
.mostra .titolo-mostra{
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  font-size:clamp(21px,2.9vw,28px);margin-top:16px;
}
.mostra.pa .titolo-mostra{color:var(--oro)}
.mostra.ag .titolo-mostra{color:var(--accento-ag)}
.mostra .quando{font-family:var(--etichetta);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-top:6px;opacity:.92}
.mostra .vetrina{
  margin:22px auto -46px;background:var(--bianco);padding:10px;width:min(62%,300px);
  box-shadow:0 16px 44px rgba(24,10,52,.38);position:relative;z-index:2;
}
.mostra.ag .vetrina{box-shadow:0 16px 44px rgba(64,40,6,.38)}
.mostra .vetrina img{width:100%;aspect-ratio:4/5;object-fit:contain;background:var(--bianco)}
.mostra .corpo{padding:66px clamp(22px,3vw,34px) 28px;display:flex;flex-direction:column;gap:16px;flex:1}
.mostra .descr{font-size:16.5px;color:var(--grigio)}
.mostra .numeri{
  font-family:var(--etichetta);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grigio);border-top:1px solid #ECE7F2;padding-top:14px;line-height:2;
}
.mostra .azioni{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.bottone{
  display:block;text-align:center;text-decoration:none;
  font-family:var(--etichetta);font-weight:700;font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:14px 18px;border-radius:4px;transition:transform .2s ease,box-shadow .2s ease;
}
.bottone:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(44,35,66,.18)}
.mostra.pa .bottone{background:var(--viola);color:var(--bianco)}
.mostra.ag .bottone{background:var(--ocra);color:var(--bianco)}
.mostra.ag .bottone.secondo{background:transparent;color:var(--ocra-b);border:1.5px solid var(--ocra)}

/* ---------- fascia comune ---------- */
.comune{background:var(--viola-scuro);color:var(--lavanda);text-align:center;padding:clamp(36px,6vw,64px) 22px}
.comune .collezione{
  font-family:var(--display);font-style:italic;font-weight:600;
  font-size:clamp(20px,3vw,28px);color:var(--bianco);max-width:30ch;margin:0 auto;line-height:1.5;
}
.comune .cura{font-family:var(--etichetta);font-size:13px;margin-top:18px;line-height:1.9}
.comune .cura strong{color:var(--bianco)}

/* ---------- piede ---------- */
.piede{
  background:var(--bruno);color:var(--crema);
  padding:clamp(28px,5vw,48px) clamp(20px,5vw,56px);
  font-family:var(--etichetta);font-size:12.5px;line-height:1.9;letter-spacing:.03em;
}
.piede .colonne{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap}
.piede .titoli{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:16px;color:var(--bianco);margin-bottom:6px}
.piede a{color:var(--bianco);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.piede a:hover{border-color:var(--oro)}
.strappo{display:block;width:100%;height:clamp(34px,5vw,64px)}
.bordo{line-height:0}
.bordo.su-eroe{background:transparent;position:relative;z-index:3;margin-bottom:-1px}