/* ============================================================
   Siux For You — design tokens
   Pietra/Ulivo/Bruno/Ambra/Latte: la Puglia reale (pietra a vista,
   ulivi, notti calde), non il crema+terracotta da "sito generico".
   ============================================================ */
:root {
  --pietra: #ede7dd;
  --latte: #faf7f1;
  --ulivo: #4a5240;
  --ulivo-chiaro: #6b7660;
  --bruno: #1c1815;
  --bruno2: #241f19;
  --ambra: #c08a4e;
  --grigio: #8a8272;
  --display: "Fraunces", Georgia, serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", monospace;
}

* { box-sizing: border-box; }
/* Niente "scroll-behavior: smooth" su html: in Chromium impedisce del
   tutto lo scroll-to-anchor nativo (sia al primo caricamento con #hash
   nell'URL sia sui click sugli stessi link di navigazione della pagina —
   bug noto). Lo scroll fluido lo gestiamo via JS con scrollIntoView, vedi
   avviaScrollAncore() in interno.js. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Compensa la testata fissa: uno scrollIntoView non deve mai nascondere
   l'inizio della sezione dietro l'header. */
section[id] { scroll-margin-top: 88px; }

body {
  margin: 0;
  background: var(--pietra);
  color: var(--bruno);
  font-family: var(--body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.eyebrow {
  font-family: var(--body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ambra);
}

.display {
  font-family: var(--display);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.01em;
}

.display em {
  font-style: italic;
  font-weight: 500;
}

.log {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grigio);
}

:focus-visible {
  outline: 2px solid var(--ambra);
  outline-offset: 3px;
}

.contenitore {
  width: min(1180px, 100% - 64px);
  margin-inline: auto;
}

@media (max-width: 640px) {
  .contenitore { width: min(1180px, 100% - 40px); }
}

/* ============================================================
   Reveal on scroll — misurato, rispetta prefers-reduced-motion
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visibile { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Header
   ============================================================ */
.testata {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(14px, 2.2vw, 22px) clamp(20px, 4vw, 48px);
  color: var(--pietra);
  transition: background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
.testata.solida {
  background: rgba(237, 231, 221, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(28, 24, 21, 0.08);
  color: var(--bruno);
}

/* Lockup impilato: monogramma / nome / tagline, come valeriodandrassi.com */
.logotipo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  line-height: 1;
}
.logotipo-monogramma {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
}
.logotipo-nome {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(15px, 1.7vw, 18px);
  letter-spacing: 0.01em;
}
.logotipo-nome em { font-style: italic; color: var(--ambra); font-weight: 500; }
.logotipo-tag {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.6;
}

.nav-desktop {
  display: flex;
  gap: clamp(18px, 2.2vw, 32px);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nav-desktop a { text-decoration: none; opacity: 0.75; transition: opacity 0.2s; }
.nav-desktop a:hover, .nav-desktop a:focus-visible { opacity: 1; }

/* Riapre il popup promozioni (window.riapriPopupPromo in interno.js) —
   stesso trattamento visivo dei link della nav, ma è un <button>. */
.bottone-promo-nav {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.2s;
}
.bottone-promo-nav:hover, .bottone-promo-nav:focus-visible { opacity: 1; }
.menu-mobile .bottone-promo-nav { opacity: 1; }

.testata-azioni {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cta-testata {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--ambra);
  color: var(--bruno);
  border: 1px solid var(--ambra);
  padding: 10px 18px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.cta-testata:hover, .cta-testata:focus-visible {
  background: var(--bruno);
  border-color: var(--bruno);
  color: var(--ambra);
}

.bottone-menu {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: inherit;
}
.bottone-menu svg { width: 22px; height: 22px; }

@media (max-width: 900px) {
  .cta-testata { display: none; }
}
@media (max-width: 800px) {
  .nav-desktop { display: none; }
  .bottone-menu { display: block; }
}

.menu-mobile {
  position: fixed;
  inset: 0;
  background: var(--bruno);
  color: var(--pietra);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  transform: translateY(-100%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.menu-mobile.aperto { transform: translateY(0); }
.menu-mobile a {
  font-family: var(--display);
  font-size: clamp(28px, 8vw, 44px);
  text-decoration: none;
  color: var(--pietra);
}
.menu-mobile .chiudi {
  position: absolute;
  top: 24px; right: 24px;
  background: none; border: none; color: var(--pietra); cursor: pointer; padding: 8px;
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #3a4232 0%, #232922 55%, #1c1815 100%);
  overflow: hidden;
}
.hero-foto {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  animation: derivaFotoHero 24s ease-in-out infinite alternate;
}
/* leggero respiro verticale, mai orizzontale: la foto sembra viva senza
   distrarre. Scala >1 per non scoprire mai il bordo durante la deriva. */
@keyframes derivaFotoHero {
  from { transform: scale(1.09) translateY(-1.6%); }
  to   { transform: scale(1.09) translateY(1.6%); }
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 70% 55% at 50% 50%, rgba(28, 24, 21, 0.5), transparent 72%),
    linear-gradient(180deg, rgba(28, 24, 21, 0.22) 0%, rgba(28, 24, 21, 0.1) 40%, rgba(28, 24, 21, 0.45) 100%),
    radial-gradient(ellipse 60% 50% at 25% 15%, rgba(192, 138, 78, 0.15), transparent);
}
.hero-contenuto {
  position: relative;
  z-index: 2;
  padding: 0 clamp(20px, 6vw, 90px);
  color: var(--pietra);
  width: 100%;
  text-align: center;
}
.hero h1 {
  margin: 0;
  font-size: clamp(38px, 7.4vw, 92px);
  max-width: 18ch;
  margin-inline: auto;
}
.hero-scroll {
  position: absolute;
  right: clamp(20px, 4vw, 48px);
  bottom: clamp(28px, 5vh, 48px);
  z-index: 2;
  writing-mode: vertical-rl;
  color: rgba(237, 231, 221, 0.6);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-scroll::after {
  content: "";
  width: 1px; height: 44px;
  background: rgba(237, 231, 221, 0.4);
  animation: scendi 2.4s ease-in-out infinite;
}
@keyframes scendi {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
}

.cta {
  display: inline-block;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bruno);
  background: var(--ambra);
  padding: 15px 30px;
  text-decoration: none;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s;
}
.cta:hover { transform: translateY(-2px); background: #cf9a5f; }
.cta.contorno {
  background: transparent;
  color: var(--pietra);
  border: 1px solid rgba(237, 231, 221, 0.5);
}
.cta.contorno:hover { background: rgba(237, 231, 221, 0.1); border-color: var(--pietra); }

/* ============================================================
   Chi siamo — subito sotto la cover, come "chi sono" di riferimento
   ============================================================ */
.chi-siamo {
  padding: clamp(80px, 12vw, 140px) 0 clamp(60px, 9vw, 100px);
  text-align: center;
  max-width: 760px;
}
.chi-siamo .eyebrow {
  display: block;
  margin-bottom: 14px;
}
.chi-siamo h2 {
  font-weight: 500;
  font-size: clamp(24px, 3.2vw, 38px);
  color: var(--ulivo);
  margin: 0 0 34px;
  line-height: 1.2;
}
.chi-siamo-testo p {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.75;
  text-align: justify;
  text-align-last: center;
  color: var(--bruno);
  margin: 0 0 18px;
}
.chi-siamo-testo strong { font-weight: 700; color: var(--ulivo); }
.chi-siamo-testo em { font-style: italic; color: var(--ambra); }

.divisore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
}
/* Nel team il divisore separa titolari e collaboratori: senza un
   margin-bottom simmetrico restava "attaccato" alla riga sotto invece di
   stare a metà strada (bug reale corretto il 29/07/2026, notato
   soprattutto su mobile dove lo spazio è già poco). Non tocca l'uso in
   "chi siamo", dove il divisore è l'ultimo elemento della sezione e il
   padding-bottom della sezione basta già da solo. */
#grigliaTeam .divisore { margin-bottom: clamp(28px, 5vw, 44px); }
.divisore span { width: 56px; height: 1px; background: rgba(28, 24, 21, 0.25); }
.divisore i { width: 5px; height: 5px; border-radius: 50%; background: var(--ambra); font-style: normal; }

/* ============================================================
   Lavori
   ============================================================ */
.sezione {
  padding: clamp(70px, 10vw, 130px) 0;
}
.intestazione-sezione {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(36px, 5vw, 60px);
  flex-wrap: wrap;
}
.intestazione-sezione h2 {
  font-size: clamp(32px, 5vw, 56px);
  margin: 10px 0 0;
}

/* Pannelli grandi impilati, edge-to-edge (rompono il .contenitore
   apposta — un lavoro alla volta merita più spazio di una card in griglia). */
.pannelli-lavori {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Striscia, non copertina intera: un terzo dell'altezza di prima (21/10 →
   6.3/1), sempre inquadrata sul centro della cover — è un frammento che
   invita al click, non l'anteprima completa del video. */
.lavoro {
  position: relative;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  display: block;
  width: 100%;
  aspect-ratio: 6.3 / 1;
  min-height: 130px;
  overflow: hidden;
}
.lavoro img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.lavoro:hover img, .lavoro:focus-visible img { transform: scale(1.03); }

.lavoro::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(28, 24, 21, 0.82) 0%, rgba(28, 24, 21, 0.3) 60%, transparent 100%);
  pointer-events: none;
}

.play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity 0.3s, transform 0.3s;
}
.lavoro:hover .play, .lavoro:focus-visible .play { opacity: 1; transform: scale(1.06); }
.play svg {
  width: clamp(34px, 4vw, 52px); height: clamp(34px, 4vw, 52px);
  filter: drop-shadow(0 2px 14px rgba(0,0,0,.5));
}

.lavoro-info {
  position: absolute;
  left: clamp(16px, 3vw, 36px);
  bottom: clamp(12px, 2vw, 22px);
  z-index: 1;
  color: var(--pietra);
}
.lavoro-info h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(17px, 2vw, 24px);
  margin: 0 0 4px;
}
.lavoro-log { margin-top: 2px; color: rgba(237, 231, 221, 0.75); }

.galleria-intestazione { margin-top: clamp(64px, 9vw, 110px); }

/* Collage di celle di dimensioni diverse (dense packing), non una griglia
   uniforme — l'unico "effetto" è uno zoom lieve al passaggio del mouse e
   una comparsa in cascata leggermente sfalsata tra una foto e la successiva. */
.galleria-foto {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 110px;
  grid-auto-flow: dense;
  gap: 8px;
}
.foto-galleria {
  margin: 0;
  overflow: hidden;
  background: linear-gradient(145deg, var(--ulivo-chiaro), var(--ulivo));
}
.foto-galleria img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.foto-galleria:hover img { transform: scale(1.05); }

/* Unità di 5 celle che tassella lo spazio esattamente (nessun buco): il
   primo elemento è un riquadro grande (metà larghezza, doppia altezza), i
   4 successivi riempiono il resto — verificato a mano seguendo l'algoritmo
   di dense packing di CSS Grid, non per tentativi. Funziona senza buchi
   per qualunque numero di foto multiplo di 5 (5, 10, 15…); con un numero
   diverso può restare un buco nell'ultima riga parziale — se possibile
   tenere il totale delle foto attive multiplo di 5. */
.foto-galleria:nth-child(5n+1) { grid-column: span 3; grid-row: span 2; }
.foto-galleria:nth-child(5n+2) { grid-column: span 3; grid-row: span 1; }
.foto-galleria:nth-child(5n+3) { grid-column: span 3; grid-row: span 1; }
.foto-galleria:nth-child(5n+4) { grid-column: span 3; grid-row: span 1; }
.foto-galleria:nth-child(5n) { grid-column: span 3; grid-row: span 1; }

@media (not (prefers-reduced-motion: reduce)) {
  .foto-galleria:nth-child(2n) { transition-delay: 0.08s; }
  .foto-galleria:nth-child(3n) { transition-delay: 0.14s; }
}

@media (max-width: 900px) {
  .galleria-foto { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 90px; }
  .foto-galleria:nth-child(5n+1) { grid-column: span 2; grid-row: span 2; }
  .foto-galleria:nth-child(5n+2),
  .foto-galleria:nth-child(5n+3),
  .foto-galleria:nth-child(5n+4),
  .foto-galleria:nth-child(5n) { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 560px) {
  .galleria-foto { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
  .foto-galleria { grid-column: span 1; grid-row: span 1; }
  .foto-galleria:nth-child(5n+1) { grid-column: span 2; }
}

/* Indicazione che la sezione sotto scorre in orizzontale: eco dell'animazione
   verticale di .hero-scroll, stessa logica ma sull'asse orizzontale. */
.shorts-suggerimento {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--grigio);
  padding-bottom: 8px;
}
.shorts-suggerimento::after {
  content: "";
  width: 40px; height: 1px;
  background: rgba(138, 130, 114, 0.6);
  animation: scorri-lato 2.4s ease-in-out infinite;
}
@keyframes scorri-lato {
  0%, 100% { transform: scaleX(0.35); transform-origin: left; opacity: 0.4; }
  50% { transform: scaleX(1); transform-origin: left; opacity: 1; }
}
@media (max-width: 640px) {
  .intestazione-sezione.galleria-intestazione { align-items: center; }
}

/* Cornice della striscia Shorts: freccine + sfumatura ai due bordi, a
   segnalare che c'è altro fuori dalla vista. Le classi a-inizio/a-fine
   (attivate da interno.js in base allo scroll reale) nascondono freccia
   e sfumatura dal lato dov'è già tutto visibile. */
.striscia-shorts-cornice { position: relative; }
.striscia-shorts-cornice::before,
.striscia-shorts-cornice::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(28px, 6vw, 64px);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.3s ease;
}
.striscia-shorts-cornice::before { left: 0; background: linear-gradient(90deg, var(--pietra), transparent); }
.striscia-shorts-cornice::after { right: 0; background: linear-gradient(270deg, var(--pietra), transparent); }
.striscia-shorts-cornice.a-inizio::before { opacity: 0; }
.striscia-shorts-cornice.a-fine::after { opacity: 0; }

.freccia-shorts {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(28, 24, 21, 0.14);
  background: var(--pietra);
  color: var(--bruno);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(28, 24, 21, 0.14);
  transition: opacity 0.25s ease, background 0.2s, color 0.2s;
}
.freccia-shorts:hover, .freccia-shorts:focus-visible { background: var(--bruno); color: var(--ambra); }
.freccia-shorts-sx { left: 2px; }
.freccia-shorts-dx { right: 2px; }
.striscia-shorts-cornice.a-inizio .freccia-shorts-sx,
.striscia-shorts-cornice.a-fine .freccia-shorts-dx {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 560px) {
  .freccia-shorts { width: 32px; height: 32px; }
}

/* Striscia orizzontale di Shorts (9:16) — scroll, non griglia: sono tanti
   e verticali, uno scorrimento laterale li mostra tutti senza schiacciarli. */
.striscia-shorts {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.striscia-shorts::-webkit-scrollbar { height: 6px; }
.striscia-shorts::-webkit-scrollbar-track { background: transparent; }
.striscia-shorts::-webkit-scrollbar-thumb { background: var(--ulivo); }

.short {
  position: relative;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  flex: 0 0 auto;
  width: clamp(140px, 16vw, 190px);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  scroll-snap-align: start;
}
.short img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.short:hover img, .short:focus-visible img { transform: scale(1.04); }
.short::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(28, 24, 21, 0.75) 0%, transparent 45%);
  pointer-events: none;
}
.short-titolo {
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  z-index: 1;
  color: var(--pietra);
  font-size: 12px;
  line-height: 1.3;
}

@media (max-width: 560px) {
  .short { width: clamp(110px, 38vw, 150px); }
}

/* ============================================================
   Team
   ============================================================ */
/* I titolari (Alessandro, Morfeo) hanno card più grandi e centrate in cima;
   i collaboratori esterni seguono sotto in una griglia più fitta — l'unica
   distinzione è dimensionale/posizionale, mai un'etichetta testuale. */
.team-titolari {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(32px, 5vw, 64px);
  margin-bottom: clamp(36px, 5vw, 56px);
}
.team-titolari .membro { width: min(320px, 80vw); }
.team-titolari h3 { font-size: 22px; }

/* Flex, non grid: con un numero di collaboratori che non riempie una riga
   intera un grid a colonne fisse la lascia disallineata a sinistra invece
   che centrata — flex-wrap + justify-content:center centra sempre la riga,
   completa o no, e si adatta senza bisogno di breakpoint per-colonna. */
.team-collaboratori {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 2vw, 28px);
}
.team-collaboratori .membro { width: 260px; }

.membro-foto {
  aspect-ratio: 1;
  overflow: hidden;
  background: linear-gradient(145deg, var(--ulivo-chiaro), var(--ulivo));
  margin-bottom: 14px;
}
.membro-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.membro-foto:hover img { transform: scale(1.045); }
.membro-iniziali {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: 0.04em;
  color: rgba(250, 247, 241, 0.85);
}
.membro h3 { font-family: var(--display); font-weight: 600; font-size: 18px; margin: 0 0 2px; }
.membro .ruolo { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ambra); display: block; margin-bottom: 8px; }
.membro p.bio { font-size: 14px; color: var(--grigio); margin: 0; }
.membro a.link { font-size: 12px; text-decoration: underline; text-underline-offset: 3px; color: var(--ulivo); }

/* ============================================================
   Testimonianze — sezione scura full-bleed
   ============================================================ */
.testimonianze {
  background: var(--bruno);
  color: var(--pietra);
  margin-top: clamp(20px, 3vw, 40px);
  padding: clamp(64px, 8vw, 110px) 0;
  text-align: center;
}
.testimonianze .eyebrow { color: var(--ambra); }
/* Altezza fissa apposta (non min-height): ogni voce è troncata a un
   numero di caratteri fisso (troncaVoce() in interno.js) e i .quote
   restano sempre assoluti/centrati anche da attivi, così il riquadro
   non cresce mai in base alla voce mostrata — stessa misura per tutte. */
.carosello-quote { max-width: 760px; margin: 40px auto 0; position: relative; height: clamp(200px, 24vw, 240px); }
.quote {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
.quote.attiva { opacity: 1; transform: none; pointer-events: auto; }
.quote p.testo {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.5;
  color: var(--pietra);
}
.quote p.firma {
  margin-top: 20px;
  font-family: var(--display);
  font-style: italic;
  font-size: 18px;
  color: var(--ambra);
}
.dots { display: flex; justify-content: center; gap: 10px; margin-top: 32px; }
.dots button {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(237,231,221,.3); border: none; cursor: pointer; padding: 0;
  transition: background 0.2s, transform 0.2s;
}
.dots button.attivo { background: var(--ambra); transform: scale(1.3); }

.link-tutte-voci {
  display: inline-block;
  margin-top: 40px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none;
  color: var(--ambra);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.link-tutte-voci:hover { color: var(--pietra); }

/* ============================================================
   Pagina "Tutte le voci" (voci.html) — lista verticale, non carosello
   ============================================================ */
.lista-voci-sezione { padding-bottom: clamp(70px, 10vw, 130px); }
.lista-voci { max-width: 720px; margin: 0 auto; }
.voce-card { padding: clamp(26px, 4vw, 40px) 0; border-bottom: 1px solid rgba(28, 24, 21, 0.1); }
.voce-card:first-child { padding-top: 0; }
.voce-card:last-child { border-bottom: none; }
.voce-card p.testo {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.5;
  color: var(--bruno);
}
.voce-card p.firma {
  margin-top: 14px;
  font-family: var(--display);
  font-style: italic;
  font-size: 16px;
  color: var(--ambra);
}

/* ============================================================
   Contatti / footer
   ============================================================ */
.contatti { padding: clamp(90px, 13vw, 160px) 0 60px; }
.contatti-griglia {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}
@media (max-width: 800px) { .contatti-griglia { grid-template-columns: 1fr; } }
.contatti h2 { font-size: clamp(34px, 5vw, 58px); margin: 10px 0 20px; }
.contatti p.testo { max-width: 42ch; color: var(--ulivo); font-size: 16px; margin-bottom: 28px; }
.recapiti { display: grid; gap: 18px; }
.recapiti div b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: 0.6;
  margin-bottom: 3px;
}
.recapiti div span, .recapiti div a { font-size: 16px; text-decoration: none; }
.recapiti div a:hover { text-decoration: underline; }

footer.piede {
  border-top: 1px solid rgba(28,24,21,.12);
  margin-top: 70px;
  padding-top: 24px;
  padding-bottom: clamp(40px, 6vw, 70px);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--grigio);
}
footer.piede a { text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   Selettore lingua (Google Website Translator)
   Widget di terze parti: possiamo restilizzare solo il pulsante che lo
   attiva (il menu a tendina è dentro un iframe di Google, fuori dal
   nostro controllo) — e neutralizzare il banner che Google inserisce in
   cima alla pagina spostando giù tutto il sito.
   ============================================================ */
body { top: 0 !important; }
/* Il banner "Tradotto in..." in cima: la classe interna di Google cambia
   di tanto in tanto (best-effort, non garantito per sempre) — l'id
   "N.container" con position:fixed sembra più stabile della classe. */
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame,
iframe.skiptranslate[id$=".container"] { display: none !important; }
.selettore-lingua { display: inline-flex; align-items: center; gap: 6px; }
#google_translate_element { display: inline-flex; align-items: center; }
.lingua-reset {
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 8px;
  cursor: pointer;
  opacity: 0.75;
}
.lingua-reset:hover, .lingua-reset:focus-visible { opacity: 1; }
.goog-te-gadget { font-family: var(--body) !important; }
.goog-te-gadget > span, .goog-te-gadget br { display: none !important; }
/* I nomi delle classi interne di Google cambiano di versione in versione
   (osservato: .goog-te-menu-value a volte non c'è proprio) — invece di
   inseguirle una per una, forziamo lo stile su TUTTI i discendenti del
   pulsante con un selettore jolly, indipendente dalla struttura interna. */
.goog-te-gadget-simple {
  background: none !important;
  border: 1px solid currentColor !important;
  border-radius: 0 !important;
  padding: 6px 10px !important;
  cursor: pointer;
  line-height: 1.2 !important;
}
.goog-te-gadget-simple,
.goog-te-gadget-simple * {
  font-family: var(--body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: inherit !important;
  border: none !important;
  text-decoration: none !important;
  background: none !important;
}
.goog-te-gadget-simple img { display: none !important; }
.bottone-cookie {
  background: none; border: none; padding: 0; font: inherit; color: inherit;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}

/* ============================================================
   Pagina Privacy
   ============================================================ */
.privacy-corpo { max-width: 720px; padding-bottom: clamp(60px, 9vw, 100px); font-size: 16px; line-height: 1.7; }
.privacy-corpo h2 {
  font-family: var(--display); font-weight: 700; color: var(--ulivo);
  margin: 1.8em 0 .5em; font-size: clamp(20px, 2.4vw, 24px);
}
.privacy-corpo h2:first-of-type { margin-top: 0; }
.privacy-corpo p { margin: 0 0 1.1em; }
.privacy-corpo ul { margin: 0 0 1.1em 1.2em; }
.privacy-corpo li { margin-bottom: .5em; }
.privacy-corpo a { color: var(--ambra); text-decoration: underline; text-underline-offset: 2px; }
.privacy-corpo strong { color: var(--ulivo); }
.privacy-aggiornato { color: var(--grigio); font-size: 13px; margin-bottom: 2.5em; }

/* ============================================================
   Lightbox video (YouTube)
   ============================================================ */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(12, 10, 8, 0.96);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(8px, 2vw, 28px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.lightbox.aperta { opacity: 1; pointer-events: auto; }
/* Quasi a tutto schermo, capiente sia per 16:9 sia per 21:9: il riquadro è
   il più grande possibile che sta nella finestra mantenendo una forma
   ultra-wide (~21:9) — un video 16:9 ci sta comodamente "incorniciato",
   un video 21:9 la riempie quasi bordo a bordo. */
.lightbox-corpo {
  position: relative;
  width: min(96vw, calc(96vh * 2.35));
  height: min(96vh, calc(96vw / 2.35));
  background: #000;
}
/* Su schermi stretti (ritratto) la formula sopra produce una striscia
   sottilissima: 96vw / 2.35 è minuscolo quando vw è piccola. Sotto i 700px
   ragioniamo per larghezza e un rapporto 16:9 (lo standard reale degli
   showreel), capiente comunque anche per un video 21:9 (resta incorniciato
   con bande nere, invece di essere quasi invisibile). */
@media (max-width: 700px) {
  .lightbox-corpo {
    width: 96vw;
    height: min(80vh, calc(96vw * 9 / 16));
  }
}
/* Shorts: verticale (9:16), formula invertita rispetto al riquadro
   standard sopra — il vincolo stavolta è l'altezza della finestra, non
   la larghezza. */
.lightbox-corpo.verticale {
  width: min(92vw, calc(92vh * 9 / 16));
  height: min(92vh, calc(92vw * 16 / 9));
}
#lightboxPlayer, #ytPlayerHost { width: 100%; height: 100%; }
.lightbox-corpo iframe { width: 100%; height: 100%; border: 0; }
.lightbox-chiudi {
  position: absolute; top: 10px; right: 10px;
  z-index: 1;
  background: rgba(12, 10, 8, 0.8);
  border-radius: 50%;
  border: none; color: var(--pietra); cursor: pointer; padding: 8px;
}

/* ============================================================
   Testata di pagina (blog.html, articolo.html) — sotto l'header fisso
   ============================================================ */
.testata-pagina {
  padding: clamp(120px, 16vw, 180px) 0 clamp(40px, 6vw, 70px);
}
.testata-pagina h1 {
  margin: 10px 0 0;
  font-size: clamp(36px, 6vw, 64px);
}
.testata-pagina h1 em { font-style: italic; color: var(--ambra); font-weight: 500; }

/* ============================================================
   Blog — lista articoli (blog.html) e teaser (homepage)
   ============================================================ */
.sezione-blog { padding-bottom: clamp(70px, 10vw, 130px); }

.lista-articoli, .griglia-blog-teaser {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 34px);
  /* Senza questo, i grid item si stirano (default align-items:stretch) a
     un'altezza di riga a volte più corta del loro contenuto reale — il
     testo dell'ultima card (specie a una colonna su mobile) trabocca fuori
     dalla card e si sovrappone visivamente alla sezione successiva. Bug
     reale corretto il 29/07/2026. */
  align-items: start;
}
@media (max-width: 900px) {
  .lista-articoli, .griglia-blog-teaser { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .lista-articoli, .griglia-blog-teaser { grid-template-columns: 1fr; }
}

.articolo-card { display: block; text-decoration: none; color: inherit; }
.articolo-card-cover {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(145deg, var(--ulivo) 0%, #37402f 60%, var(--bruno) 100%);
  margin-bottom: 16px;
}
.articolo-card-cover img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.articolo-card:hover .articolo-card-cover img,
.articolo-card:focus-visible .articolo-card-cover img { transform: scale(1.045); }
.articolo-card .log { display: block; margin-bottom: 8px; }
.articolo-card h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  margin: 0 0 8px;
  line-height: 1.25;
}
.articolo-card p { font-size: 14px; color: var(--grigio); line-height: 1.55; margin: 0; }

.blog-teaser { padding: clamp(70px, 10vw, 130px) 0; }
.blog-teaser h2 em { color: var(--ambra); }
.blog-teaser .intestazione-sezione a.link-tutti {
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; color: var(--ulivo); border-bottom: 1px solid currentColor; padding-bottom: 2px;
}

/* ============================================================
   Pagina articolo
   ============================================================ */
.articolo-testata { padding: clamp(120px, 16vw, 180px) 0 40px; max-width: 760px; }
.articolo-testata h1 { margin: 10px 0 14px; font-size: clamp(32px, 5vw, 52px); }
.articolo-testata .sottotitolo { font-size: 17px; color: var(--ulivo); margin: 0 0 18px; }
.articolo-meta { display: flex; gap: 14px; flex-wrap: wrap; }

.articolo-cover { width: 100%; aspect-ratio: 21 / 9; overflow: hidden; margin-bottom: clamp(30px, 5vw, 56px); }
.articolo-cover img { width: 100%; height: 100%; object-fit: cover; }

.articolo-corpo { width: min(720px, 100% - 40px); margin-inline: auto; padding-bottom: clamp(60px, 9vw, 100px); font-size: 17px; line-height: 1.75; }
.articolo-corpo h2 { font-family: var(--display); font-weight: 700; font-size: 28px; margin: 1.3em 0 .5em; color: var(--ulivo); }
.articolo-corpo h3 { font-family: var(--display); font-weight: 700; font-size: 22px; margin: 1.1em 0 .4em; }
.articolo-corpo p { margin: 0 0 1em; }
.articolo-corpo ul, .articolo-corpo ol { margin: 0 0 1em 1.3em; }
.articolo-corpo li { margin-bottom: .4em; }
.articolo-corpo a { color: var(--ambra); text-decoration: underline; }
.articolo-corpo img { max-width: 100%; margin: 1.4em 0; }
.articolo-corpo iframe { max-width: 100%; aspect-ratio: 16/9; width: 100%; margin: 1.4em 0; }

.articolo-non-trovato { padding: clamp(140px, 18vw, 200px) 0 clamp(80px, 12vw, 140px); max-width: 620px; }

/* ============================================================
   Pagina profilo team (profilo.html, /team/<slug>)
   ============================================================ */
.profilo-corpo {
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  padding-bottom: clamp(60px, 9vw, 100px);
}
.profilo-foto {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(145deg, var(--ulivo-chiaro), var(--ulivo));
}
.profilo-foto img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(100%); }
.profilo-bio { font-size: 17px; line-height: 1.75; padding-top: 6px; }
.profilo-bio p { margin: 0 0 1em; }
@media (max-width: 720px) {
  .profilo-corpo { grid-template-columns: 1fr; }
  .profilo-foto { max-width: 320px; margin-inline: auto; }
}

/* ============================================================
   Schermata manutenzione — sostituisce l'intera pagina quando
   impostazioni_sito.manutenzione_attiva è true (vedi interno.js,
   mostraSchermataManutenzione). Nessuna eccezione/bypass voluta.
   ============================================================ */
.schermata-manutenzione {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bruno);
  color: var(--pietra);
  text-align: center;
  padding: 40px 24px;
}
.schermata-manutenzione-interno { max-width: 560px; }
.schermata-manutenzione .logotipo { margin: 0 auto 40px; color: var(--pietra); }
.schermata-manutenzione .eyebrow { display: block; margin-bottom: 14px; }
.schermata-manutenzione h1 { font-size: clamp(32px, 5vw, 48px); margin: 0 0 20px; }
.schermata-manutenzione p.messaggio { font-size: 16px; line-height: 1.7; color: #c9c4b4; margin: 0; }

/* ============================================================
   Popup promozioni — overlay modale, una volta per sessione
   (vedi interno.js, mostraPopupPromo)
   ============================================================ */
.popup-promo-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(12, 10, 8, 0.75);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.popup-promo {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--bruno2);
  color: var(--pietra);
  border: 1px solid rgba(237, 231, 221, 0.14);
  padding: clamp(32px, 5vw, 48px);
  text-align: center;
}
.popup-promo .eyebrow { display: block; margin-bottom: 10px; }
.popup-promo h2 { font-size: clamp(22px, 3vw, 28px); margin: 0 0 14px; }
.popup-promo p.testo { font-size: 15px; line-height: 1.6; color: #c9c4b4; margin: 0 0 28px; }
.popup-promo-chiudi {
  position: absolute;
  top: 12px; right: 12px;
  background: none;
  border: none;
  color: var(--grigio);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 10px;
}
.popup-promo-chiudi:hover { color: var(--ambra); }