/* ==========================================================================
   Premalabs International - foglio di stile unico
   Corporate, sobrio, istituzionale. Mobile first.
   Tutte le spaziature usano proprieta logiche, cosi l'arabo da destra a
   sinistra funziona senza un secondo foglio di stile.
   ========================================================================== */

/* Caratteri ospitati sul sito. Rigenerare con strumenti/scarica-font.py */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/source-serif-4-400-latin-ext.155f6e70.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/source-serif-4-400-latin.f2ea9c12.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/source-serif-4-600-latin-ext.155f6e70.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/source-serif-4-600-latin.f2ea9c12.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-400-latin-ext.34b9c504.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-400-latin.3100e775.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-500-latin-ext.34b9c504.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-500-latin.3100e775.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-600-latin-ext.34b9c504.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-600-latin.3100e775.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-arabic-400-arabic.6010e7fd.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-arabic-400-latin.9ed8dcb0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-arabic-600-arabic.16734a5a.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-arabic-600-latin.63f47572.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   1. Token
   -------------------------------------------------------------------------- */
:root {
  /* Marca. Quattro colori, niente altro. */
  --blu: #002f6c;            /* Pantone 294 C   rgb(0,47,108)    */
  --nero: #000000;           /* Pantone Black 6 rgb(0,0,0)       */
  --bianco: #ffffff;         /*                 rgb(255,255,255) */
  --turchese: #22a5b6;       /* Pantone 7467 C  rgb(34,165,182)  */

  /* Due token di servizio per l'accento: il turchese del logo non ha
     contrasto sufficiente come testo su fondo chiaro, e su fondo scuro
     guadagna leggibilita se schiarito. Misurati, non stimati. */
  --turchese-su-chiaro: #0b7383;  /* 5.53:1 su bianco */
  --turchese-su-scuro: #45c3d6;   /* 6.18:1 su blu, 10.03:1 su nero */

  /* Blu derivati, solo luminosita diversa. */
  --blu-notte: #001a3d;
  --blu-chiaro: #e8eef6;
  --blu-bordo: #c7d5e8;

  /* Grigi neutri, solo dove servono per leggibilita. */
  --inchiostro: #11161c;
  --grigio: #5a6472;         /* 6.00:1 su bianco */
  --grigio-chiaro: #eef1f4;
  --grigio-bordo: #dde2e8;
  --grigio-su-scuro: #b9c3d1;

  /* Tipografia */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Scala tipografica fluida */
  --t-display: clamp(2.125rem, 1.45rem + 3vw, 3.75rem);
  --t-h1: clamp(1.875rem, 1.35rem + 2.3vw, 3rem);
  --t-h2: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
  --t-h3: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --t-corpo: 1.0625rem;
  --t-piccolo: 0.9375rem;
  --t-minuto: 0.8125rem;

  /* Spaziature */
  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;     --s7: 3rem;    --s8: 4rem;
  --s9: 6rem;

  --larghezza: 1200px;
  --margine: 1.5rem;
  --raggio: 2px;             /* angoli quasi vivi: istituzionale, non startup */
  --transizione: 180ms ease;
}

@media (min-width: 600px) { :root { --margine: 2rem; } }
@media (min-width: 1000px) { :root { --margine: 3rem; } }

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(34, 165, 182, 0.2);
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-corpo);
  line-height: 1.7;
  color: var(--inchiostro);
  background: var(--bianco);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Arabo: famiglia dedicata, interlinea piu generosa. */
html[dir="rtl"] body {
  font-family: "IBM Plex Sans Arabic", "Noto Naskh Arabic", var(--sans);
  line-height: 1.95;
}
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] .display {
  font-family: "IBM Plex Sans Arabic", "Noto Naskh Arabic", var(--sans);
  letter-spacing: 0;
}

/* Cinese semplificato: caratteri di sistema, nessun megabyte da scaricare. */
html[lang="zh"] body, html[lang="zh"] h1, html[lang="zh"] h2,
html[lang="zh"] h3, html[lang="zh"] .display {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Noto Sans SC", var(--sans);
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  color: var(--blu);
  margin: 0 0 var(--s4);
  letter-spacing: -0.012em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.3; }

p { margin: 0 0 var(--s4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--turchese-su-chiaro); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--blu); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--turchese-su-chiaro);
  outline-offset: 2px;
  border-radius: var(--raggio);
}

.salta {
  position: absolute; inset-inline-start: var(--s4); top: -100px;
  z-index: 200; background: var(--blu); color: var(--bianco);
  padding: var(--s3) var(--s5); text-decoration: none; border-radius: var(--raggio);
}
.salta:focus { top: var(--s3); color: var(--bianco); }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Impalcatura
   -------------------------------------------------------------------------- */
.contenitore {
  width: 100%;
  max-width: var(--larghezza);
  margin-inline: auto;
  padding-inline: max(var(--margine), env(safe-area-inset-left)) max(var(--margine), env(safe-area-inset-right));
}

.stretto { max-width: 760px; }

.sezione { padding-block: var(--s8); }
@media (min-width: 900px) { .sezione { padding-block: var(--s9); } }

.sezione--chiara { background: var(--grigio-chiaro); }
.sezione--blu { background: var(--blu); color: var(--bianco); }
.sezione--blu h2, .sezione--blu h3 { color: var(--bianco); }
.sezione--blu a { color: var(--turchese-su-scuro); }
.sezione--nera { background: var(--nero); color: var(--bianco); }
.sezione--nera h2, .sezione--nera h3 { color: var(--bianco); }

.occhiello {
  font-family: var(--sans);
  font-size: var(--t-minuto);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--turchese-su-chiaro);
  margin: 0 0 var(--s3);
}
.sezione--blu .occhiello, .sezione--nera .occhiello { color: var(--turchese-su-scuro); }
html[dir="rtl"] .occhiello { letter-spacing: 0; }

.filo {
  width: 48px; height: 2px; background: var(--turchese);
  border: 0; margin: 0 0 var(--s5);
}

.guida { color: var(--grigio); font-size: 1.125rem; }
.sezione--blu .guida, .sezione--nera .guida { color: var(--grigio-su-scuro); }

/* --------------------------------------------------------------------------
   4. Intestazione
   -------------------------------------------------------------------------- */
.testata {
  position: sticky; top: 0; z-index: 100;
  background: var(--nero);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.testata__riga {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 68px;
}
@media (min-width: 1000px) { .testata__riga { min-height: 84px; } }

.marchio { display: flex; align-items: center; margin-inline-end: auto; }
.marchio img { height: 30px; width: auto; }
@media (min-width: 1000px) { .marchio img { height: 38px; } }

.menu { display: none; }
@media (min-width: 1000px) {
  .menu { display: flex; align-items: center; gap: var(--s5); }
  .menu a {
    color: var(--bianco); text-decoration: none;
    font-size: var(--t-piccolo); font-weight: 500;
    padding-block: var(--s3); position: relative;
  }
  .menu a::after {
    content: ""; position: absolute; inset-inline: 0; bottom: 0;
    height: 2px; background: var(--turchese); transform: scaleX(0);
    transition: transform var(--transizione);
  }
  .menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); }
  .menu a[aria-current="page"] { color: var(--turchese-su-scuro); }
}

/* Pulsanti dell'intestazione: lingua e menu, sempre visibili sul telefono */
.testata__azioni { display: flex; align-items: center; gap: var(--s2); }

.bott-testata {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; padding-inline: var(--s3);
  background: transparent; color: var(--bianco);
  border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--raggio);
  font: inherit; font-size: var(--t-piccolo); font-weight: 500;
  cursor: pointer; transition: border-color var(--transizione), color var(--transizione);
}
.bott-testata:hover { border-color: var(--turchese); color: var(--turchese-su-scuro); }
.bott-testata svg { width: 16px; height: 16px; flex: none; fill: currentColor; }

.bott-menu { display: inline-flex; }
@media (min-width: 1000px) { .bott-menu { display: none; } }

/* Tendina delle lingue */
.lingue { position: relative; }
.lingue__elenco {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px);
  min-width: 190px; margin: 0; padding: var(--s2) 0;
  list-style: none; background: var(--bianco);
  border: 1px solid var(--grigio-bordo); border-radius: var(--raggio);
  box-shadow: 0 12px 32px rgba(0, 20, 50, 0.22);
  z-index: 120;
}
.lingue__elenco[hidden] { display: none; }
.lingue__elenco a {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding: var(--s3) var(--s4);
  color: var(--inchiostro); text-decoration: none; font-size: var(--t-piccolo);
}
.lingue__elenco a:hover { background: var(--blu-chiaro); color: var(--blu); }
.lingue__elenco a[aria-current="true"] { color: var(--blu); font-weight: 600; }
.lingue__elenco a[aria-current="true"]::after { content: "\2022"; color: var(--turchese-su-chiaro); }

/* Menu del telefono */
.pannello {
  display: none;
  background: var(--nero);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: var(--s4) var(--s6);
}
.pannello.aperto { display: block; }
.pannello { overscroll-behavior: contain; max-height: calc(100dvh - 68px); overflow-y: auto; }
@media (min-width: 1000px) { .pannello, .pannello.aperto { display: none; } }

.pannello__voci { list-style: none; margin: 0 0 var(--s5); padding: 0; }
.pannello__voci a {
  display: block; padding: var(--s3) 0;
  color: var(--bianco); text-decoration: none; font-size: 1.125rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.pannello__voci a[aria-current="page"] { color: var(--turchese-su-scuro); }

.pannello__lingue { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pannello__lingue a {
  padding: var(--s2) var(--s4); min-height: 44px;
  display: inline-flex; align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--raggio);
  color: var(--bianco); text-decoration: none; font-size: var(--t-piccolo);
}
.pannello__lingue a[aria-current="true"] {
  border-color: var(--turchese); color: var(--turchese-su-scuro);
}

/* --------------------------------------------------------------------------
   5. Pulsanti
   -------------------------------------------------------------------------- */
.bott {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 52px; padding: var(--s3) var(--s6);
  font: inherit; font-weight: 600; font-size: var(--t-piccolo);
  letter-spacing: 0.02em; text-decoration: none; cursor: pointer;
  border-radius: var(--raggio); border: 1px solid transparent;
  transition: background var(--transizione), color var(--transizione), border-color var(--transizione);
}
.bott--pieno { background: var(--blu); color: var(--bianco); border-color: var(--blu); }
.bott--pieno:hover { background: var(--blu-notte); color: var(--bianco); border-color: var(--blu-notte); }
.bott--chiaro { background: var(--bianco); color: var(--blu); border-color: var(--bianco); }
.bott--chiaro:hover { background: var(--turchese); color: var(--nero); border-color: var(--turchese); }
.bott--filo { background: transparent; color: var(--bianco); border-color: rgba(255, 255, 255, 0.45); }
.bott--filo:hover { border-color: var(--turchese); color: var(--turchese-su-scuro); }

/* --------------------------------------------------------------------------
   6. Apertura con la scena in tre dimensioni
   -------------------------------------------------------------------------- */
.apertura {
  position: relative; isolation: isolate;
  background: var(--nero);
  color: var(--bianco);
  overflow: hidden;
}
.apertura__scena {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0; transition: opacity 1.4s ease;
}
.apertura__scena.accesa { opacity: 1; }
.apertura__scena canvas { width: 100%; height: 100%; display: block; }

/* Da tablet in su il globo si sposta di lato e il testo gli sta accanto. */
@media (min-width: 1000px) {
  .apertura__scena { inset-inline-start: 42%; }
}

.apertura::after {
  /* velo che tiene il testo leggibile sopra la scena */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.08) 45%, rgba(0,0,0,0.6) 100%),
    linear-gradient(to right, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.8) 26%, rgba(0,0,0,0) 62%);
}
html[dir="rtl"] .apertura::after {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.08) 45%, rgba(0,0,0,0.6) 100%),
    linear-gradient(to left, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.8) 26%, rgba(0,0,0,0) 62%);
}

.apertura__corpo {
  position: relative; z-index: 2;
  padding-block: var(--s8) var(--s8);
  max-width: 820px;
}
@media (min-width: 900px) {
  .apertura__corpo { padding-block: var(--s9) var(--s9); max-width: 700px; }
  .apertura { min-height: 76vh; display: flex; align-items: center; }
  .apertura > .contenitore { width: 100%; }
}

.apertura h1 {
  font-size: var(--t-display);
  color: var(--bianco);
  margin-bottom: var(--s5);
}
.apertura__guida {
  font-size: 1.125rem; color: #d6dde6; max-width: 62ch; margin-bottom: var(--s6);
}
@media (min-width: 900px) { .apertura__guida { font-size: 1.25rem; } }

.apertura__sedi {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: var(--t-minuto); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--grigio-su-scuro);
}
html[dir="rtl"] .apertura__sedi { letter-spacing: 0; text-transform: none; }

/* --------------------------------------------------------------------------
   7. Griglie e schede
   -------------------------------------------------------------------------- */
.griglia { display: grid; gap: var(--s5); }
@media (min-width: 680px) { .griglia--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 680px) { .griglia--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .griglia--3 { grid-template-columns: repeat(3, 1fr); } }

.scheda {
  background: var(--bianco);
  border: 1px solid var(--grigio-bordo);
  border-top: 3px solid var(--turchese);
  padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s3);
}
.scheda h3 { margin: 0; }
.scheda p { color: var(--grigio); font-size: var(--t-piccolo); margin: 0; }
.scheda__numero {
  font-family: var(--serif); font-size: 0.875rem; font-weight: 600;
  color: var(--turchese-su-chiaro); letter-spacing: 0.1em;
}

a.scheda { text-decoration: none; transition: border-color var(--transizione), transform var(--transizione); }
a.scheda:hover { border-color: var(--blu-bordo); border-top-color: var(--turchese); }
a.scheda:hover h3 { color: var(--turchese-su-chiaro); }

/* Tre principi */
.principi { display: grid; gap: var(--s6); }
@media (min-width: 860px) { .principi { grid-template-columns: repeat(3, 1fr); gap: var(--s7); } }
.principio { padding-top: var(--s4); border-top: 2px solid var(--turchese); }
.principio h3 { color: var(--bianco); margin-bottom: var(--s2); }
.principio p { color: var(--grigio-su-scuro); font-size: var(--t-piccolo); margin: 0; }

/* --------------------------------------------------------------------------
   8. Aree di attivita, pagina intera
   -------------------------------------------------------------------------- */
.attivita { display: grid; gap: var(--s7); }
.attivita__voce {
  display: grid; gap: var(--s4);
  padding-top: var(--s6);
  border-top: 1px solid var(--grigio-bordo);
  scroll-margin-top: 7rem;
}
.attivita__voce:first-child { padding-top: 0; border-top: 0; }
@media (min-width: 860px) {
  .attivita__voce { grid-template-columns: 280px 1fr; gap: var(--s7); }
}
.attivita__indice {
  font-family: var(--serif); font-size: 0.875rem; font-weight: 600;
  color: var(--turchese-su-chiaro); letter-spacing: 0.12em; margin-bottom: var(--s2);
}
.attivita__voce h2 { font-size: var(--t-h3); margin: 0; }
.attivita__voce p { color: var(--grigio); margin: 0; }

/* --------------------------------------------------------------------------
   9. Squadra
   -------------------------------------------------------------------------- */
.squadra { display: grid; gap: var(--s8); }
.persona { display: grid; gap: var(--s5); scroll-margin-top: 7rem; }
@media (min-width: 760px) {
  .persona { grid-template-columns: 300px 1fr; gap: var(--s7); align-items: start; }
}
.persona__ritratto {
  background: var(--grigio-chiaro);
  border-bottom: 3px solid var(--turchese);
  aspect-ratio: 4 / 5; width: 100%; max-width: 300px;
  object-fit: cover; object-position: center top;
  filter: grayscale(1);
}
.persona__nome {
  font-family: var(--serif); font-size: var(--t-h3); font-weight: 600;
  color: var(--blu); margin: 0 0 var(--s1); letter-spacing: 0.01em;
}
.persona__ruolo {
  font-size: var(--t-minuto); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--turchese-su-chiaro); margin: 0 0 var(--s4);
}
html[dir="rtl"] .persona__ruolo { letter-spacing: 0; text-transform: none; }
.persona__bio { color: var(--grigio); font-size: var(--t-piccolo); }

/* --------------------------------------------------------------------------
   10. Modulo
   -------------------------------------------------------------------------- */
.modulo { display: grid; gap: var(--s5); }
@media (min-width: 760px) { .modulo__coppia { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); } }

.campo { display: grid; gap: var(--s2); }
.campo > label { font-size: var(--t-piccolo); font-weight: 600; color: var(--blu); }
.campo .richiesto { color: var(--turchese-su-chiaro); }

.campo input, .campo select, .campo textarea {
  font: inherit; font-size: var(--t-corpo); color: var(--inchiostro);
  background: var(--bianco);
  border: 1px solid var(--grigio-bordo); border-radius: var(--raggio);
  padding: var(--s3) var(--s4); min-height: 52px; width: 100%;
  transition: border-color var(--transizione), box-shadow var(--transizione);
}
.campo textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--turchese-su-chiaro);
  box-shadow: 0 0 0 3px rgba(11, 115, 131, 0.16);
  outline: none;
}
.campo input:user-invalid, .campo textarea:user-invalid { border-color: #a6231f; }
.campo .errore { font-size: var(--t-minuto); color: #a6231f; }

.consenso { display: flex; align-items: flex-start; gap: var(--s3); }
.consenso input { width: 22px; height: 22px; min-height: 0; flex: none; margin-top: 3px; accent-color: var(--blu); }
.consenso label { font-size: var(--t-piccolo); color: var(--grigio); font-weight: 400; }

.trappola { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Riquadro recapiti */
.recapiti { display: grid; gap: var(--s5); }
.recapito__etichetta {
  font-size: var(--t-minuto); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--turchese-su-chiaro); margin: 0 0 var(--s2);
}
html[dir="rtl"] .recapito__etichetta { letter-spacing: 0; text-transform: none; }
.recapito p { color: var(--grigio); font-size: var(--t-piccolo); margin: 0; }

@media (min-width: 900px) {
  .contatto { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s8); align-items: start; }
}

/* --------------------------------------------------------------------------
   11. Testo lungo (privacy, grazie, 404)
   -------------------------------------------------------------------------- */
.testo h2 { font-size: var(--t-h3); margin-top: var(--s6); }
.testo h2:first-child { margin-top: 0; }
.testo p, .testo li { color: var(--grigio); }
.testo ul { padding-inline-start: 1.25rem; margin: 0 0 var(--s4); }
.testo li { margin-bottom: var(--s2); }

.centrato { text-align: center; max-width: 620px; margin-inline: auto; }

/* --------------------------------------------------------------------------
   12. Piede
   -------------------------------------------------------------------------- */
.piede {
  background: var(--nero); color: var(--grigio-su-scuro);
  padding-block: var(--s7) var(--s6);
  padding-bottom: calc(var(--s6) + env(safe-area-inset-bottom));
}
.piede a { color: var(--grigio-su-scuro); text-decoration: none; }
.piede a:hover { color: var(--turchese-su-scuro); text-decoration: underline; }

.piede__alto { display: grid; gap: var(--s6); padding-bottom: var(--s6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
@media (min-width: 860px) { .piede__alto { grid-template-columns: 1.3fr 1fr 1fr; gap: var(--s7); } }
.piede__marchio img { height: 34px; width: auto; margin-bottom: var(--s4); }
.piede h2 {
  font-family: var(--sans); font-size: var(--t-minuto); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--bianco);
  margin: 0 0 var(--s4);
}
html[dir="rtl"] .piede h2 { letter-spacing: 0; text-transform: none; }
.piede ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.piede__testo { font-size: var(--t-piccolo); margin: 0; }

.piede__basso { padding-top: var(--s5); display: grid; gap: var(--s4); font-size: var(--t-minuto); }
.piede__nota { color: #8e9bab; line-height: 1.6; margin: 0; }

/* --------------------------------------------------------------------------
   13. Rispetto delle preferenze di sistema
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .apertura__scena { display: none; }
}

@media print {
  .testata, .pannello, .piede, .apertura__scena { display: none !important; }
  body { color: #000; font-size: 11pt; }
}

/* --------------------------------------------------------------------------
   14. Immagini: le quattro piazze e le fasce di architettura
   -------------------------------------------------------------------------- */
.sedi { display: grid; gap: var(--s4); }
@media (min-width: 620px) { .sedi { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sedi { grid-template-columns: repeat(4, 1fr); gap: var(--s5); } }

.sede { margin: 0; }
.sede img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  filter: grayscale(1); background: var(--grigio-chiaro);
  border-bottom: 2px solid var(--turchese);
}
.sede figcaption {
  padding-top: var(--s3);
  font-size: var(--t-minuto); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--grigio);
}
html[dir="rtl"] .sede figcaption { letter-spacing: 0; text-transform: none; }
.sezione--blu .sede figcaption, .sezione--nera .sede figcaption { color: var(--grigio-su-scuro); }
.sezione--blu .sede img, .sezione--nera .sede img { background: var(--blu-notte); }

.fascia { margin: 0; overflow: hidden; background: var(--nero); }
.fascia img {
  width: 100%; aspect-ratio: 21 / 9; object-fit: cover;
  filter: grayscale(1); display: block;
}
@media (max-width: 619px) { .fascia img { aspect-ratio: 16 / 10; } }

/* Blocco a due colonne: testo e immagine affiancati */
.duecolonne { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 900px) {
  .duecolonne { grid-template-columns: 1fr 1fr; gap: var(--s8); }
}
.riquadro { margin: 0; }
.riquadro img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  filter: grayscale(1); background: var(--grigio-chiaro);
  border-bottom: 3px solid var(--turchese);
}

/* Tocco d'oro, scelto da Andrea il 2/11/2026: filo sotto il titolo della home,
   riga sopra le sedi e il solo settore dei metalli preziosi. Il turchese resta
   il colore d'accento del marchio. --oro-su-chiaro regge il contrasto AA su bianco. */
:root { --oro: #b8955a; --oro-chiaro: #cdb27c; --oro-su-chiaro: #8c6d33; }
.apertura h1::after { content: ""; display: block; width: 56px; height: 2px;
  background: var(--oro-chiaro); margin-top: var(--s5); }
.apertura__sedi { border-top-color: rgba(205, 178, 124, 0.45); }
.scheda[href*="precious-metals"],
.scheda[href*="precious-metals"]:hover { border-top-color: var(--oro); }
.scheda[href*="precious-metals"] .scheda__numero { color: var(--oro-su-chiaro); }