/* ==========================================================================
       AZIENDA — solo quello che serve a questa pagina.
       Colori, intestazione, piede e pulsanti stanno in assets/comune.css,
       che questa pagina carica prima del proprio foglio.
       ========================================================================== */
    .dentro { max-width: none; }

    /* --- fascia bianca di apertura -------------------------------------------- */
    /* L'apertura ha un'onda di colore: due sfumature azzurre sfocate, più
       dense dietro la foto e sempre più leggere verso il testo, che si
       spostano e sfumano piano (18 secondi). Con il movimento ridotto restano
       ferme. Il contenuto sta sopra, su un proprio livello. */
    .testa { position: relative; overflow: hidden; isolation: isolate; }
    .testa::before { content: ""; position: absolute; z-index: -1; pointer-events: none;
                     top: -25%; bottom: -25%; left: 20%; right: -15%;
                     background:
                       radial-gradient(ellipse 45% 55% at 62% 45%, rgba(78, 160, 212, 0.75), rgba(78, 160, 212, 0) 72%),
                       radial-gradient(ellipse 40% 50% at 85% 70%, rgba(12, 82, 120, 0.50), rgba(12, 82, 120, 0) 70%),
                       radial-gradient(ellipse 35% 40% at 30% 25%, rgba(78, 160, 212, 0.30), rgba(78, 160, 212, 0) 70%);
                     filter: blur(40px); animation: onda 18s ease-in-out infinite; }
    @keyframes onda {
      0%   { transform: translate(-3%, 2%) scale(0.96) rotate(0deg);  opacity: 0.55; }
      35%  { transform: translate(3%, -4%) scale(1.07) rotate(5deg);  opacity: 1; }
      65%  { transform: translate(5%, 3%) scale(1.02) rotate(-4deg);  opacity: 0.75; }
      100% { transform: translate(-3%, 2%) scale(0.96) rotate(0deg);  opacity: 0.55; }
    }
    .testa { background: var(--bianco); border-bottom: 1px solid var(--ardesia);
             padding: clamp(24px, 3vw, 46px) var(--lato) clamp(30px, 3.6vw, 52px) var(--lato); }
    /* senza foto il testo occupa la fascia intera, ma le righe restano leggibili */
    /* le due colonne hanno la stessa altezza: la giostra parte con l'occhiello
       e finisce con l'ultimo paragrafo */
    .testa-griglia { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
                     gap: clamp(26px, 3.4vw, 56px); align-items: stretch; }
    .testa-testo { max-width: 64ch; }

    /* --- linea del tempo -------------------------------------------------------
       Tre schede verticali in piedi, a 120 gradi l'una dall'altra intorno a un
       asse verticale. La giostra ruota in 3D: la scheda davanti va di lato e
       sparisce dietro, la successiva arriva dall'altra parte. Il retro delle
       schede non si vede. --giro lo aggiorna azienda.js, in gradi. */
    /* La giostra occupa tutta la colonna: ogni scheda è larga quanto la
       colonna e alta quanto il testo accanto. --l è la
       larghezza della colonna (100cqw); dove le unità di contenitore non ci
       sono vale un valore fisso. */
    .ruota { position: relative; container-type: inline-size; --l: 560px; --l: 100cqw; --tempo: 0.7s;
             display: flex; flex-direction: column; }
    /* la scheda è in 4:3: le foto d'epoca riempiono il riquadro senza bordi */
    .ruota-scena { position: relative; z-index: 1; flex: none; aspect-ratio: 4 / 3;
                   perspective: 1400px; perspective-origin: 50% 45%; }
    .ruota-giostra { position: absolute; inset: 0; transform-style: preserve-3d;
                     transform: translateZ(calc(var(--l) * -0.3)) rotateY(calc(var(--giro, 0) * 1deg));
                     transition: transform var(--tempo) cubic-bezier(0.65, 0, 0.35, 1); }
    .ruota-posto { position: absolute; inset: 0; margin: 0; backface-visibility: hidden;
                   transform: rotateY(calc(var(--posto) * 120deg)) translateZ(calc(var(--l) * 0.3)); }
    .ruota-vuota, .ruota-posto img { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
                   object-fit: cover; border-radius: 12px; }
    /* il ritaglio di ogni foto tiene i volti sopra la didascalia */
    .ruota-posto img.ruota-1963 { object-position: 50% 21%; }
    /* la foto di oggi: il ritaglio tiene i tre volti, sopra la didascalia */
    .ruota-posto img.ruota-oggi { object-position: 50% 62%; }
    .ruota-posto img.ruota-ottanta { object-position: 50% 58%; }
    .ruota-vuota { background: repeating-linear-gradient(140deg, rgba(215, 218, 218, 0.92) 0 12px, rgba(226, 228, 228, 0.92) 12px 24px);
                   font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
                   color: #505A60; }
    /* la didascalia sta sulla scheda, in basso, e gira con lei */
    .ruota-posto figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 14px 12px 14px;
                   border-radius: 0 0 12px 12px; background: linear-gradient(rgba(18, 48, 63, 0), rgba(18, 48, 63, 0.72) 40%, rgba(18, 48, 63, 0.94));
                   font-family: var(--titoli); font-weight: 600; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.25;
                   letter-spacing: -0.02em; color: var(--bianco); }
    /* la scelta del momento: tre voci sotto la scheda. Quella attiva ha il
       filetto; mentre la giostra gira da sola il filetto si riempie fino al
       cambio. Dopo il primo clic la giostra non gira più da sola. */
    .ruota-scelta { display: flex; gap: clamp(14px, 2vw, 28px); margin-top: 14px; }
    .ruota-scelta button { position: relative; flex: 1 1 0; padding: 10px 0 12px 0; border: 0; background: none;
                   border-top: 2px solid rgba(18, 48, 63, 0.18); cursor: pointer; text-align: left;
                   font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
                   color: #505A60; transition: color 0.2s; }
    .ruota-scelta button:hover { color: var(--notte); }
    .ruota-scelta button[aria-selected="true"] { color: var(--notte); }
    .ruota-scelta button::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
                   background: var(--mare); transform: scaleX(0); transform-origin: left; }
    .ruota-scelta button[aria-selected="true"]::before { transform: scaleX(1); }
    .ruota.gira .ruota-scelta button[aria-selected="true"]::before { animation: riempi var(--attesa, 6s) linear both; }
    @keyframes riempi { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .ruota-scelta button:focus-visible { outline: 2px solid var(--mare); outline-offset: 3px; }
    .ruota-scena { cursor: pointer; }
    .ruota-posto figcaption b { display: block; margin-bottom: 3px; font-family: var(--mono); font-weight: 500;
                   font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--azzurro); }
    @media (prefers-reduced-motion: reduce) {
      .ruota { --tempo: 0s; }
      .testa::before { animation: none; }
    }
    .testa p { margin: 0 0 18px 0; font-size: clamp(17px, 1.26vw, 18px); line-height: 1.65; color: var(--testo); }
    .testa p:last-child { margin-bottom: 0; }

    /* i quattro riquadri dei numeri */
    .numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px;
              margin-top: clamp(26px, 3vw, 34px); }
    .num { background: var(--bianco); border: 1px solid var(--ardesia); padding: 24px; }
    .num b { display: block; font-family: var(--titoli); font-weight: 700; font-size: clamp(38px, 3.02vw, 39px);
             line-height: 0.95; letter-spacing: -0.045em; color: var(--mare); }
    .num-cosa { display: block; margin-top: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
                text-transform: uppercase; color: var(--notte); }
    .num-nota { display: block; margin-top: 6px; font-size: 15px; line-height: 1.5; color: #626C72; }
    .num-scuro { background: var(--notte); border-color: var(--notte); }
    .num-scuro b { font-size: clamp(28px, 2.18vw, 28px); line-height: 1.1; letter-spacing: -0.04em; color: var(--azzurro); }
    .num-scuro .num-cosa { margin-top: 14px; color: var(--bianco); }
    .num-scuro .num-nota { color: var(--su-scuro); }

    /* --- mezzi ----------------------------------------------------------------- */
    .due { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
           gap: clamp(26px, 3.4vw, 56px); align-items: center; }
    .due p { margin: 0; font-size: clamp(16px, 1.13vw, 16px); line-height: 1.7; color: var(--testo); }
    .elenco-mezzi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
    @media (max-width: 1000px) { .elenco-mezzi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .mezzo { padding: 14px 16px; background: var(--bianco); border: 1px solid var(--ardesia);
             font-size: 15px; line-height: 1.4; color: var(--testo); }

    /* --- sponsorizzazioni ------------------------------------------------------- */
    .intro-sez { max-width: 820px; margin-bottom: clamp(22px, 2.6vw, 30px); }
    .intro-sez p { margin: 14px 0 0 0; font-size: clamp(16px, 1.13vw, 16px); line-height: 1.7; color: var(--testo); }
    .iniziative { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(16px, 2vw, 22px); }
    .iniz { background: var(--bianco); border: 1px solid var(--ardesia); display: flex; flex-direction: column; }
    .iniz img { width: 100%; height: 180px; object-fit: cover; display: block; }
    .iniz-dentro { padding: clamp(22px, 2.4vw, 28px); display: flex; flex-direction: column; flex-grow: 1; }
    .iniz-quando { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
                   text-transform: uppercase; color: #626C72; margin-bottom: 12px; }
    .iniz h3 { margin: 0 0 12px 0; font-family: var(--titoli); font-weight: 600; font-size: clamp(21px, 1.68vw, 21px);
               line-height: 1.12; letter-spacing: -0.035em; color: var(--notte); }
    .iniz p { margin: 0 0 18px 0; font-size: clamp(15px, 1.01vw, 15px); line-height: 1.65; color: var(--testo); }
    .iniz strong { font-weight: 600; color: var(--notte); }

    .cta a:not([class]) { color: var(--azzurro); }
    .cta a:not([class]):hover { color: var(--bianco); }

    @media (max-width: 900px) {
      .testa-griglia, .due { grid-template-columns: 1fr; }
      /* sul telefono la giostra va sotto il testo, con schede un po' più strette */
      .ruota { --l: calc(100vw - 48px); --l: 100cqw; }
      .testa::before { top: 30%; bottom: 22%; left: -30%; right: -30%; }
    }

    @media (max-width: 620px) {
      .num-cosa, .iniz-quando { font-size: 13px; }
      .num-nota, .mezzo { font-size: 16px; }
      .elenco-mezzi { grid-template-columns: 1fr; }
    }