/* CSS del sito — generato da costruisci-assets.py, non modificare a mano */

/* ===== 00-font.css ===== */
/* ============================================================
   FONT self-hosted (Montserrat 500/700, Roboto 400/500).
   Sottoinsiemi latin + latin-ext: coprono italiano e inglese.
   font-display: swap → il testo è subito visibile.
   ============================================================ */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/font/montserrat-500.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/font/montserrat-500-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/font/montserrat-700.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/font/montserrat-700-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/font/roboto-400.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/font/roboto-400-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/font/roboto-500.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/font/roboto-500-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


/* ===== 01-token.css ===== */
/* ============================================================
   DESIGN TOKEN — variabili globali del design system
   Palette derivata dai CSS del sito originale (tema "Aarhus"):
   footer #144290, accento #186ac0, link #1e73be.
   ============================================================ */
:root {
  /* --- Colori --- */
  --colore-primario: #144290;        /* blu istituzionale: footer, bottoni, titoli forti */
  --colore-primario-chiaro: #186ac0; /* hover, menu mobile, accenti */
  --colore-link: #1e73be;            /* link testuali e selezione */
  --colore-scuro: #263238;           /* titoli e testo forte */
  --colore-testo: #4a5560;           /* corpo testo (contrasto AA, al posto del #a5a5a5 originale) */
  --colore-testo-tenue: #6b7680;     /* didascalie e meta-informazioni */
  --colore-sfondo: #ffffff;
  --colore-sfondo-alt: #f5f7fa;      /* sezioni alternate e card */
  --colore-bordo: #dadada;
  --colore-ok: #4e8221;              /* conferme */
  --colore-venduto: #b3261e;         /* badge "Venduto" */

  /* --- Tipografia --- */
  --font-titoli: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-testo: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  /* Scala fluida mobile → desktop */
  --testo-h1: clamp(2.125rem, 1.5rem + 2.6vw, 3.5rem);     /* 34 → 56 px */
  --testo-h2: clamp(1.625rem, 1.3rem + 1.4vw, 2.375rem);   /* 26 → 38 px */
  --testo-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);    /* 20 → 26 px */
  --testo-h4: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);    /* 17 → 20 px */
  --testo-corpo: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem); /* 16 → 17 px */
  --testo-piccolo: 0.875rem;                               /* 14 px */

  /* --- Spaziature (base 4 px) --- */
  --spazio-1: 0.25rem;
  --spazio-2: 0.5rem;
  --spazio-3: 1rem;
  --spazio-4: 1.5rem;
  --spazio-5: 2rem;
  --spazio-6: 3rem;
  --spazio-7: 4.5rem;
  --spazio-8: 6.5rem;

  /* --- Layout --- */
  --larghezza-contenitore: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2rem);

  /* --- Dettagli --- */
  --raggio: 6px;
  --raggio-badge: 999px;
  --ombra-card: 0 2px 12px rgba(20, 66, 144, 0.08);
  --ombra-card-hover: 0 6px 24px rgba(20, 66, 144, 0.14);
  --transizione: 200ms ease;
}


/* ===== 02-globale.css ===== */
/* ============================================================
   STILI GLOBALI — reset leggero, base tipografica, utilità
   Approccio mobile-first: gli stili base valgono per 320–414 px,
   i breakpoint (600/900/1200 px) allargano il layout.
   ============================================================ */

/* --- Reset essenziale --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-testo);
  font-size: var(--testo-corpo);
  line-height: 1.6;
  color: var(--colore-testo);
  background: var(--colore-sfondo);
  /* Nessuno scroll orizzontale, a nessuna larghezza */
  overflow-x: hidden;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* --- Tipografia --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-titoli);
  color: var(--colore-scuro);
  line-height: 1.2;
  text-wrap: balance;
}

h1 { font-size: var(--testo-h1); font-weight: 700; }
h2 { font-size: var(--testo-h2); font-weight: 700; }
h3 { font-size: var(--testo-h3); font-weight: 500; }
h4 { font-size: var(--testo-h4); font-weight: 500; }

p { margin-block: 0 var(--spazio-3); }

a {
  color: var(--colore-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--colore-primario-chiaro); }

::selection {
  background: var(--colore-link);
  color: #fff;
}

/* Focus sempre visibile (tastiera) */
:focus-visible {
  outline: 2px solid var(--colore-primario-chiaro);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Contenitore standard --- */
.contenitore {
  width: 100%;
  max-width: var(--larghezza-contenitore);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- Bottoni --- */
.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spazio-2);
  min-height: 44px; /* target touch ≥ 44 px */
  padding: 0.7em 1.6em;
  font-family: var(--font-titoli);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 2px solid var(--colore-primario);
  border-radius: var(--raggio);
  cursor: pointer;
  transition: background var(--transizione), color var(--transizione), border-color var(--transizione);
}

.bottone--pieno {
  background: var(--colore-primario);
  color: #fff;
}
.bottone--pieno:hover {
  background: var(--colore-primario-chiaro);
  border-color: var(--colore-primario-chiaro);
  color: #fff;
}

.bottone--contorno {
  background: transparent;
  color: var(--colore-primario);
}
.bottone--contorno:hover {
  background: var(--colore-primario);
  color: #fff;
}

/* Variante per fondi scuri (hero, footer) */
.bottone--bianco {
  background: transparent;
  color: #fff;
  border-color: #fff;
}
.bottone--bianco:hover {
  background: #fff;
  color: var(--colore-primario);
}

/* --- Badge --- */
.badge {
  display: inline-block;
  padding: 0.25em 0.9em;
  border-radius: var(--raggio-badge);
  font-family: var(--font-titoli);
  font-size: var(--testo-piccolo);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--colore-primario);
  color: #fff;
}
.badge--venduto { background: var(--colore-venduto); }

/* --- Sezioni --- */
.sezione { padding-block: var(--spazio-6); }
.sezione--alt { background: var(--colore-sfondo-alt); }
.sezione__titolo {
  text-align: center;
  margin-block-end: var(--spazio-5);
}

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

/* --- Link "salta al contenuto" (accessibilità) --- */
.salta-contenuto {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--spazio-2) var(--spazio-3);
  background: var(--colore-primario);
  color: #fff;
}
.salta-contenuto:focus {
  left: 0;
}

/* --- Utilità solo per screen reader --- */
.visivamente-nascosto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Movimento ridotto: si rispetta la preferenza di sistema --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ===== 10-header.css ===== */
/* ===== HEADER (testata) ===== */
.testata {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--colore-sfondo);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  transition: background var(--transizione), box-shadow var(--transizione);
}

.testata__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-3);
  min-height: 68px;
}

.testata__logo { display: inline-flex; }
.testata__logo img { width: auto; height: 44px; }
.testata__logo-bianco { display: none; }

.testata--trasparente:not(.testata--compatta) {
  position: fixed;
  inset-inline: 0;
  background: transparent;
  box-shadow: none;
}
.testata--trasparente:not(.testata--compatta) .testata__logo-blu { display: none; }
.testata--trasparente:not(.testata--compatta) .testata__logo-bianco { display: block; }
.testata--trasparente:not(.testata--compatta) .testata__nav a { color: #fff; }
.testata--trasparente:not(.testata--compatta) .testata__hamburger-linea { background: #fff; }
.testata--trasparente.testata--compatta { position: fixed; inset-inline: 0; }

.testata__nav { display: none; }

.testata__hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.testata__hamburger-linea {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--colore-scuro);
  transition: transform var(--transizione), opacity var(--transizione);
}
.testata__hamburger[aria-expanded='true'] .testata__hamburger-linea:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.testata__hamburger[aria-expanded='true'] .testata__hamburger-linea:nth-child(2) { opacity: 0; }
.testata__hamburger[aria-expanded='true'] .testata__hamburger-linea:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.testata__hamburger[aria-expanded='true'] .testata__hamburger-linea { background: #fff; }
.testata__hamburger[aria-expanded='true'] { position: relative; z-index: 70; }

.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: var(--colore-primario);
  opacity: 0;
  transition: opacity 250ms ease;
}
.menu-mobile.aperto { opacity: 1; }
/* Ribadire [hidden] contro "display: grid" (stesso bug del banner cookie) */
.menu-mobile[hidden] { display: none; }
.menu-mobile ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--spazio-4);
  text-align: center;
}
.menu-mobile a {
  font-family: var(--font-titoli);
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  padding: var(--spazio-2) var(--spazio-3);
  display: inline-block;
}
.menu-mobile a[aria-current='page'] { text-decoration: underline; text-underline-offset: 6px; }
.menu-mobile__lingua a { font-size: 1rem; font-weight: 500; opacity: 0.85; }

@media (min-width: 900px) {
  .testata__hamburger,
  .menu-mobile { display: none; }

  .testata__nav { display: block; }
  .testata__nav ul {
    display: flex;
    align-items: center;
    gap: var(--spazio-4);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .testata__nav a {
    font-family: var(--font-titoli);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--colore-scuro);
    padding: var(--spazio-2) 0;
  }
  .testata__nav a:hover,
  .testata__nav a[aria-current='page'] { color: var(--colore-primario-chiaro); }

  .testata__lingua a {
    border: 1px solid currentColor;
    border-radius: var(--raggio);
    padding: 0.35em 0.8em;
  }
}


/* ===== 11-footer.css ===== */
/* ===== FOOTER (pie) ===== */
.pie__skyline img {
  width: 100%;
  height: auto;
}

.pie__principale {
  background: var(--colore-primario);
  color: #fff;
  padding-block: var(--spazio-6);
}

.pie__griglia {
  display: grid;
  gap: var(--spazio-5);
}

.pie__logo { width: auto; height: 52px; margin-block-end: var(--spazio-3); }
.pie__fimaa-logo { width: auto; height: 40px; margin-block-start: var(--spazio-3); }

.pie__titolo {
  color: #fff;
  font-size: var(--testo-h4);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-block-end: var(--spazio-3);
}

.pie__fimaa-titolo {
  font-family: var(--font-titoli);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-block-end: var(--spazio-1);
}

.pie__fimaa-testo {
  font-size: var(--testo-piccolo);
  color: rgba(255, 255, 255, 0.75);
}

.pie__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--spazio-2);
}
.pie__lista a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding-block: 0.2em;
}
.pie__lista a:hover { text-decoration: underline; }

.pie__fondo {
  background: var(--colore-primario);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-block: var(--spazio-3);
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--testo-piccolo);
}
.pie__fondo-interno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-3);
}
.pie__fondo p { margin: 0; }

.pie__social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--spazio-2);
}
.pie__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  transition: background var(--transizione);
}
.pie__social a:hover { background: var(--colore-primario-chiaro); }

@media (min-width: 900px) {
  .pie__griglia { grid-template-columns: 1.2fr 1fr 1fr; gap: var(--spazio-6); }
}


/* ===== 20-card-annuncio.css ===== */
/* ===== CARD ANNUNCIO ===== */
.card-annuncio {
  position: relative;
  border-radius: var(--raggio);
  overflow: hidden;
  background: var(--colore-sfondo);
  border: 1px solid var(--colore-bordo);
  box-shadow: var(--ombra-card);
  transition: box-shadow var(--transizione), transform var(--transizione);
}
.card-annuncio:hover {
  box-shadow: var(--ombra-card-hover);
  transform: translateY(-3px);
}

.card-annuncio__collegamento {
  display: block;
  color: inherit;
  text-decoration: none;
}

.card-annuncio__foto { position: relative; }
.card-annuncio__immagine {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.card-annuncio__badge {
  position: absolute;
  top: var(--spazio-2);
  left: var(--spazio-2);
}
.card-annuncio__badge--venduto {
  left: auto;
  right: var(--spazio-2);
}

.card-annuncio__area-video {
  position: absolute;
  inset-inline: 0;
  top: 0;
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: var(--spazio-2);
  pointer-events: none;
}

.card-annuncio__video {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0.35em 1em;
  border-radius: var(--raggio-badge);
  background: #cc0000;
  color: #fff;
  font-family: var(--font-titoli);
  font-size: var(--testo-piccolo);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transition: background var(--transizione), transform var(--transizione);
}
.card-annuncio__video:hover {
  background: #a30000;
  color: #fff;
  transform: translateY(-2px);
}

.card-annuncio__corpo {
  display: grid;
  gap: var(--spazio-1);
  padding: var(--spazio-3);
}

.card-annuncio__titolo { font-size: var(--testo-h4); font-weight: 700; }
.card-annuncio__zona {
  margin: 0;
  font-size: var(--testo-piccolo);
  color: var(--colore-testo-tenue);
}
.card-annuncio__prezzo {
  margin: 0;
  font-family: var(--font-titoli);
  font-size: var(--testo-h3);
  font-weight: 700;
  color: var(--colore-primario);
}
.card-annuncio__dettagli {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-3);
  font-size: var(--testo-piccolo);
  color: var(--colore-testo-tenue);
}


/* ===== 21-card-articolo.css ===== */
/* ===== CARD ARTICOLO ===== */
.card-articolo {
  border-radius: var(--raggio);
  overflow: hidden;
  background: var(--colore-sfondo);
  border: 1px solid var(--colore-bordo);
  box-shadow: var(--ombra-card);
  transition: box-shadow var(--transizione), transform var(--transizione);
}
.card-articolo:hover {
  box-shadow: var(--ombra-card-hover);
  transform: translateY(-3px);
}

/* Colonna a tutta altezza: serve a tenere la data appoggiata in fondo
   (vedi __meta), così in una fila di schede le date stanno tutte alla
   stessa quota anche se le descrizioni hanno lunghezze diverse. */
.card-articolo__collegamento {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.card-articolo__immagine {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.card-articolo__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-1);
  padding: var(--spazio-3);
  flex: 1;                 /* occupa lo spazio che avanza sotto l'immagine */
}

.card-articolo__titolo { font-size: var(--testo-h4); font-weight: 700; }

.card-articolo__descrizione {
  margin: 0;
  font-size: var(--testo-piccolo);
  line-height: 1.6;
}

/* La data: sola, piccola, in fondo. "margin-block-start: auto" la
   spinge in basso spingendo via lo spazio libero, invece di lasciarla
   attaccata alla descrizione. */
.card-articolo__meta {
  margin: 0;
  margin-block-start: auto;
  padding-block-start: var(--spazio-2);
  font-size: var(--testo-piccolo);
  color: var(--colore-testo-tenue);
}


/* ===== 22-instagram.css ===== */
/* ===== VETRINA INSTAGRAM ===== */
.ig {
  --ig-gradiente: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
  display: grid;
  gap: var(--spazio-5);
}
.ig > * { min-width: 0; }

.ig__storie-titolo {
  font-family: var(--font-titoli);
  font-size: var(--testo-piccolo);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--colore-testo-tenue);
  text-align: center;
  margin-block-end: var(--spazio-3);
}

.ig__storie-fila {
  list-style: none;
  margin: 0;
  padding: var(--spazio-1);
  display: flex;
  justify-content: safe center;
  gap: var(--spazio-4);
  overflow-x: auto;
}

.ig__storia {
  display: grid;
  justify-items: center;
  gap: var(--spazio-1);
  text-decoration: none;
  min-width: 84px;
}

.ig__storia-anello {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--ig-gradiente);
  padding: 3px;
  transition: transform var(--transizione);
}
.ig__storia:hover .ig__storia-anello { transform: scale(1.06); }

.ig__storia-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--colore-sfondo);
}

.ig__storia-nome {
  font-size: var(--testo-piccolo);
  color: var(--colore-scuro);
  font-weight: 500;
}

.ig__griglia {
  list-style: none;
  margin: 0;
  padding: var(--spazio-1);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: var(--spazio-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.ig__cella { scroll-snap-align: center; }

.ig__post {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--ombra-card);
}

.ig__foto {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 400ms ease;
}
.ig__post:hover .ig__foto { transform: scale(1.06); }

.ig__velo {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--spazio-2);
  padding: var(--spazio-3);
  text-align: center;
  color: #fff;
  background: linear-gradient(rgba(20, 25, 40, 0.15), rgba(20, 25, 40, 0.75));
  opacity: 0;
  transition: opacity var(--transizione);
}
.ig__post:hover .ig__velo,
.ig__post:focus-visible .ig__velo { opacity: 1; }

.ig__didascalia {
  font-size: var(--testo-piccolo);
  font-weight: 500;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 600px) {
  .ig__griglia {
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow-x: visible;
  }
}

/* ===== BOTTONE "SEGUICI SU INSTAGRAM" ===== */
.bottone-ig {
  display: inline-flex;
  align-items: center;
  gap: var(--spazio-2);
  min-height: 48px;
  padding: 0.75em 1.8em;
  border-radius: 999px;
  background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
  color: #fff;
  font-family: var(--font-titoli);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(204, 35, 102, 0.35);
  transition: transform var(--transizione), box-shadow var(--transizione);
}
.bottone-ig:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(204, 35, 102, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .ig__storia:hover .ig__storia-anello,
  .ig__post:hover .ig__foto,
  .bottone-ig:hover { transform: none; }
}


/* ===== 30-home.css ===== */
/* ===== HOME: sezione Instagram, storia, griglie ===== */
.ig-sezione {
  background:
    radial-gradient(60% 90% at 85% 0%, rgba(220, 39, 67, 0.06), transparent 60%),
    radial-gradient(60% 90% at 15% 100%, rgba(24, 106, 192, 0.07), transparent 60%),
    var(--colore-sfondo);
}

.ig-sezione__testata {
  text-align: center;
  margin-block-end: var(--spazio-5);
}

.ig-sezione__titolo { margin-block-end: var(--spazio-1); }

.ig-sezione__handle {
  display: inline-block;
  font-family: var(--font-titoli);
  font-size: var(--testo-h4);
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(45deg, #e6683c, #dc2743 45%, #cc2366 70%, #bc1888);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ig-sezione__handle:hover { text-decoration: underline; text-decoration-color: #cc2366; }

.ig-sezione__sottotitolo {
  max-width: 55ch;
  margin: var(--spazio-2) auto 0;
}

.ig-sezione__cta { margin: var(--spazio-4) 0 0; }

/* --- Storia --- */
.storia__intro {
  max-width: 65ch;
  margin-inline: auto;
  text-align: center;
  margin-block-end: var(--spazio-6);
}

/* --- Griglie e link di sezione --- */
.griglia-tre {
  display: grid;
  gap: var(--spazio-4);
}
.sezione__link {
  text-align: center;
  margin-block-start: var(--spazio-5);
}

@media (min-width: 600px) {
  .griglia-tre { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .griglia-tre { grid-template-columns: repeat(3, 1fr); }
}


/* ===== 31-hero.css ===== */
/* ===== HERO SLIDER (eroe) ===== */
.eroe {
  position: relative;
  height: min(88vh, 720px);
  min-height: 420px;
  overflow: hidden;
  background: var(--colore-primario);
}

.eroe__slides,
.eroe__slide {
  position: absolute;
  inset: 0;
}

.eroe__slide {
  opacity: 0;
  transition: opacity 700ms ease;
  pointer-events: none;
}
.eroe__slide--attiva {
  opacity: 1;
  pointer-events: auto;
}

.eroe__immagine {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eroe__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(15, 30, 60, 0.35), rgba(15, 30, 60, 0.55));
}

.eroe__contenuto {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spazio-4);
  text-align: center;
}

.eroe__titolo {
  color: #fff;
  font-size: var(--testo-h1);
  max-width: 18ch;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.eroe__freccia {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
  transition: background var(--transizione);
}
.eroe__freccia:hover { background: rgba(255, 255, 255, 0.32); }
.eroe__freccia--prec { left: var(--spazio-4); }
.eroe__freccia--succ { right: var(--spazio-4); }

.eroe__indicatori {
  position: absolute;
  bottom: var(--spazio-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: var(--spazio-2);
}
.eroe__punto {
  width: 30px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
}
.eroe__punto::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transition: background var(--transizione), transform var(--transizione);
}
.eroe__punto--attivo::after {
  background: #fff;
  transform: translate(-50%, -50%) scale(1.3);
}

@media (min-width: 900px) {
  .eroe__freccia { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  .eroe__slide { transition: none; }
}


/* ===== 32-portfolio.css ===== */
/* ===== PORTFOLIO GALLERIA ===== */
.portfolio__griglia {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spazio-3);
}

.portfolio__voce {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--raggio);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--colore-sfondo-alt);
}

.portfolio__miniatura {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 400ms ease;
}
.portfolio__voce:hover .portfolio__miniatura { transform: scale(1.05); }

.portfolio__titolo {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--spazio-4) var(--spazio-3) var(--spazio-2);
  background: linear-gradient(transparent, rgba(15, 30, 60, 0.75));
  color: #fff;
  font-family: var(--font-titoli);
  font-size: var(--testo-piccolo);
  font-weight: 500;
  text-align: left;
}

/* --- Lightbox --- */
.portfolio__lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100dvh;
  width: 100%;
  height: 100%;
}
.portfolio__lightbox::backdrop { background: rgba(10, 18, 34, 0.92); }
.portfolio__lightbox[open] {
  display: grid;
  place-items: center;
}

.portfolio__figura {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: var(--spazio-2);
  max-width: min(92vw, 1100px);
}
.portfolio__grande {
  max-width: 100%;
  max-height: 78dvh;
  width: auto;
  height: auto;
  border-radius: var(--raggio);
}
.portfolio__didascalia {
  color: #fff;
  font-family: var(--font-titoli);
  font-size: var(--testo-h4);
}

.portfolio__chiudi,
.portfolio__nav {
  position: fixed;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
}
.portfolio__chiudi:hover,
.portfolio__nav:hover { background: rgba(255, 255, 255, 0.3); }
.portfolio__chiudi { top: var(--spazio-3); right: var(--spazio-3); }
.portfolio__nav { top: 50%; transform: translateY(-50%); }
.portfolio__nav--prec { left: var(--spazio-2); }
.portfolio__nav--succ { right: var(--spazio-2); }

@media (min-width: 900px) {
  .portfolio__griglia { grid-template-columns: repeat(3, 1fr); }
}


/* ===== 33-timeline.css ===== */
/* ===== TIMELINE STORIA (cronologia) ===== */
.cronologia {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: var(--spazio-5);
}

.cronologia::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 8px;
  width: 2px;
  background: var(--colore-bordo);
}

.cronologia__tappa {
  position: relative;
  padding-left: var(--spazio-5);
}

.cronologia__tappa::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--colore-primario);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--colore-primario);
}

.cronologia__anno {
  font-family: var(--font-titoli);
  font-size: var(--testo-h3);
  font-weight: 700;
  color: var(--colore-primario);
  margin-block-end: var(--spazio-1);
}

.cronologia__titolo {
  font-size: var(--testo-h4);
  font-weight: 700;
  margin-block-end: var(--spazio-1);
}

.cronologia__testo {
  margin: 0;
  max-width: 55ch;
}

@media (min-width: 900px) {
  .cronologia::before { left: 50%; margin-left: -1px; }

  .cronologia__tappa {
    width: 50%;
    padding-left: 0;
    padding-right: var(--spazio-6);
    text-align: right;
  }
  .cronologia__tappa::before {
    left: auto;
    right: -7px;
  }
  .cronologia__tappa .cronologia__testo { margin-left: auto; }

  .cronologia__tappa:nth-child(even) {
    margin-left: 50%;
    padding-right: 0;
    padding-left: var(--spazio-6);
    text-align: left;
  }
  .cronologia__tappa:nth-child(even)::before {
    right: auto;
    left: -7px;
  }
  .cronologia__tappa:nth-child(even) .cronologia__testo { margin-left: 0; }
}


/* ===== 34-testimonianze.css ===== */
/* ===== TESTIMONIANZE (recensioni) ===== */
.recensioni__nastro {
  list-style: none;
  margin: 0;
  padding: var(--spazio-1);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(85%, 420px);
  gap: var(--spazio-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.recensioni__nastro::-webkit-scrollbar { display: none; }

.recensioni__scheda {
  scroll-snap-align: center;
  display: grid;
}

.recensioni__citazione {
  margin: 0;
  display: grid;
  align-content: start;
  gap: var(--spazio-2);
  padding: var(--spazio-4);
  background: var(--colore-sfondo);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-card);
}

.recensioni__titolo {
  font-family: var(--font-titoli);
  font-size: var(--testo-h4);
  font-weight: 700;
  color: var(--colore-primario);
  margin: 0;
}

.recensioni__testo {
  margin: 0;
  font-size: var(--testo-piccolo);
  line-height: 1.7;
}

.recensioni__autore {
  font-family: var(--font-titoli);
  font-weight: 500;
  color: var(--colore-scuro);
}

.recensioni__controlli {
  display: flex;
  justify-content: center;
  gap: var(--spazio-3);
  margin-block-start: var(--spazio-4);
}

.recensioni__freccia {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--colore-primario);
  border-radius: 50%;
  background: transparent;
  color: var(--colore-primario);
  cursor: pointer;
  transition: background var(--transizione), color var(--transizione);
}
.recensioni__freccia:hover {
  background: var(--colore-primario);
  color: #fff;
}


/* ===== 40-immobili-elenco.css ===== */
/* ===== ELENCO IMMOBILI ===== */
.immobili__sottotitolo {
  max-width: 60ch;
  margin-block-end: var(--spazio-5);
}

.filtri {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spazio-3);
  align-items: end;
  padding: var(--spazio-3);
  background: var(--colore-sfondo-alt);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  margin-block-end: var(--spazio-4);
}

.filtri__campo {
  display: grid;
  gap: var(--spazio-1);
}
.filtri__campo label {
  font-family: var(--font-titoli);
  font-size: var(--testo-piccolo);
  font-weight: 500;
  color: var(--colore-scuro);
}
.filtri__campo select {
  width: 100%;
  min-width: 0;
  font: inherit;
  color: var(--colore-scuro);
  min-height: 44px;
  padding: 0.4em 0.6em;
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  background: var(--colore-sfondo);
}

.filtri__azzera {
  justify-self: start;
  min-height: 44px;
  padding: 0.5em 1em;
  font: inherit;
  font-size: var(--testo-piccolo);
  color: var(--colore-link);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.immobili__conteggio {
  font-size: var(--testo-piccolo);
  color: var(--colore-testo-tenue);
  margin-block-end: var(--spazio-3);
}

.immobili__griglia {
  display: grid;
  gap: var(--spazio-4);
}

.immobili__vuoto {
  padding: var(--spazio-6) 0;
  text-align: center;
  color: var(--colore-testo-tenue);
}

@media (min-width: 600px) {
  .immobili__griglia { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .filtri { grid-template-columns: repeat(5, minmax(0, 1fr)) auto; }
  .immobili__griglia { grid-template-columns: repeat(3, 1fr); }
}


/* ===== 41-immobile.css ===== */
/* ===== DETTAGLIO ANNUNCIO ===== */
.annuncio { padding-block-start: var(--spazio-4); }

.annuncio__avviso-lingua {
  display: inline-block;
  margin-block-end: var(--spazio-3);
  padding: var(--spazio-1) var(--spazio-3);
  background: var(--colore-sfondo-alt);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-badge);
  font-size: var(--testo-piccolo);
  color: var(--colore-testo-tenue);
}

.annuncio__corpo {
  display: grid;
  gap: var(--spazio-5);
  padding-block: var(--spazio-5) var(--spazio-6);
}

.annuncio__intestazione {
  display: flex;
  gap: var(--spazio-2);
  margin-block-end: var(--spazio-2);
}

.annuncio__titolo { margin-block-end: var(--spazio-1); }
.annuncio__zona {
  color: var(--colore-testo-tenue);
  margin-block-end: var(--spazio-4);
}

/* Tipografia della descrizione Markdown */
.annuncio__descrizione blockquote {
  margin: 0 0 var(--spazio-3);
  padding: var(--spazio-2) var(--spazio-3);
  border-left: 4px solid var(--colore-primario-chiaro);
  background: var(--colore-sfondo-alt);
  border-radius: 0 var(--raggio) var(--raggio) 0;
  font-size: var(--testo-piccolo);
}
.annuncio__descrizione ul { padding-left: 1.2em; }
.annuncio__descrizione li { margin-block-end: var(--spazio-1); }
.annuncio__descrizione strong { color: var(--colore-scuro); }

/* --- Colonna laterale --- */
.annuncio__laterale {
  align-self: start;
  padding: var(--spazio-4);
  background: var(--colore-sfondo);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-card);
}

.annuncio__prezzo {
  font-family: var(--font-titoli);
  font-size: var(--testo-h2);
  font-weight: 700;
  color: var(--colore-primario);
  margin-block-end: var(--spazio-3);
}

.annuncio__scheda-titolo {
  font-size: var(--testo-h4);
  margin-block-end: var(--spazio-2);
}

.annuncio__scheda { margin: 0 0 var(--spazio-4); }
.annuncio__scheda-riga {
  display: flex;
  justify-content: space-between;
  gap: var(--spazio-3);
  padding-block: var(--spazio-2);
  border-bottom: 1px solid var(--colore-sfondo-alt);
  font-size: var(--testo-piccolo);
}
.annuncio__scheda-riga dt { color: var(--colore-testo-tenue); }
.annuncio__scheda-riga dd {
  margin: 0;
  font-weight: 500;
  color: var(--colore-scuro);
  text-align: right;
}

.annuncio__cta {
  display: grid;
  gap: var(--spazio-2);
}

/* Bottone YouTube: rosso riconoscibile, scurito per il contrasto AA */
.bottone--youtube {
  background: #cc0000;
  border-color: #cc0000;
  color: #fff;
}
.bottone--youtube:hover {
  background: #a30000;
  border-color: #a30000;
  color: #fff;
}

/* Bottone WhatsApp: verde scurito per il contrasto AA */
.bottone--whatsapp {
  background: #0f7a3c;
  border-color: #0f7a3c;
  color: #fff;
}
.bottone--whatsapp:hover {
  background: #0c6331;
  border-color: #0c6331;
  color: #fff;
}

.annuncio__simili {
  display: grid;
  gap: var(--spazio-4);
}

/* --- Barra CTA fissa su mobile --- */
.annuncio__barra-mobile {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--spazio-2);
  padding: var(--spazio-2) var(--spazio-3);
  padding-bottom: calc(var(--spazio-2) + env(safe-area-inset-bottom, 0px));
  background: var(--colore-sfondo);
  border-top: 1px solid var(--colore-bordo);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
}
.annuncio__barra-mobile .bottone {
  font-size: var(--testo-piccolo);
  padding-inline: 0.5em;
}
.annuncio { padding-block-end: 76px; }

@media (min-width: 600px) {
  .annuncio__simili { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .annuncio__corpo { grid-template-columns: 1.5fr 1fr; }
  .annuncio__laterale {
    position: sticky;
    top: 84px;
  }
  .annuncio__simili { grid-template-columns: repeat(3, 1fr); }
  .annuncio__barra-mobile { display: none; }
  .annuncio { padding-block-end: 0; }
}


/* ===== 42-galleria-annuncio.css ===== */
/* ===== GALLERIA ANNUNCIO ===== */
.galleria__nastro {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: var(--spazio-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--raggio);
}
.galleria__voce { scroll-snap-align: center; }

.galleria__apri {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.galleria__immagine {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--raggio);
}

.galleria__miniature {
  display: flex;
  gap: var(--spazio-2);
  margin-block-start: var(--spazio-2);
  overflow-x: auto;
}
.galleria__miniatura {
  flex: 0 0 auto;
  width: 80px;
  height: 60px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--raggio);
  overflow: hidden;
  cursor: pointer;
  background: none;
}
.galleria__miniatura.attiva { border-color: var(--colore-primario); }
.galleria__miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Lightbox --- */
.galleria__lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100dvh;
  width: 100%;
  height: 100%;
}
.galleria__lightbox::backdrop { background: rgba(10, 18, 34, 0.92); }
.galleria__lightbox[open] {
  display: grid;
  place-items: center;
}

.galleria__figura {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: var(--spazio-2);
  max-width: min(92vw, 1200px);
}
.galleria__grande {
  max-width: 100%;
  max-height: 80dvh;
  width: auto;
  height: auto;
  border-radius: var(--raggio);
}
.galleria__contatore {
  color: #fff;
  font-family: var(--font-titoli);
}

.galleria__chiudi,
.galleria__nav {
  position: fixed;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
}
.galleria__chiudi:hover,
.galleria__nav:hover { background: rgba(255, 255, 255, 0.3); }
.galleria__chiudi { top: var(--spazio-3); right: var(--spazio-3); }
.galleria__nav { top: 50%; transform: translateY(-50%); }
.galleria__nav--prec { left: var(--spazio-2); }
.galleria__nav--succ { right: var(--spazio-2); }


/* ===== 50-blog-elenco.css ===== */
/* ===== PAGINA BLOG (elenco) ===== */
.blog__testata {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: start;
  gap: var(--spazio-3);
  margin-block-end: var(--spazio-4);
}
.blog__sottotitolo {
  max-width: 60ch;
  margin: 0;
}
.blog__rss {
  display: inline-flex;
  align-items: center;
  gap: var(--spazio-1);
  font-size: var(--testo-piccolo);
  text-decoration: none;
  padding: var(--spazio-2);
}
.blog__rss:hover { text-decoration: underline; }

.blog__filtro {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2);
  margin-block-end: var(--spazio-4);
}
.blog__tag {
  min-height: 44px;
  padding: 0.4em 1em;
  font: inherit;
  font-size: var(--testo-piccolo);
  color: var(--colore-scuro);
  background: var(--colore-sfondo-alt);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-badge);
  cursor: pointer;
  transition: background var(--transizione), color var(--transizione);
  text-transform: capitalize;
}
.blog__tag:hover { border-color: var(--colore-primario-chiaro); }
.blog__tag--attivo {
  background: var(--colore-primario);
  border-color: var(--colore-primario);
  color: #fff;
}

.blog__griglia {
  display: grid;
  gap: var(--spazio-4);
}

.blog__vuoto {
  padding: var(--spazio-6) 0;
  text-align: center;
  color: var(--colore-testo-tenue);
}

@media (min-width: 600px) {
  .blog__griglia { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .blog__griglia { grid-template-columns: repeat(3, 1fr); }
}


/* ===== 51-articolo.css ===== */
/* ===== PAGINA ARTICOLO ===== */
.articolo { padding-block-start: var(--spazio-5); }

/* Colonna di lettura: larghezza da ~70 caratteri */
.articolo__colonna {
  max-width: 820px;
}

.articolo__avviso-lingua {
  display: inline-block;
  margin-block-end: var(--spazio-3);
  padding: var(--spazio-1) var(--spazio-3);
  background: var(--colore-sfondo-alt);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-badge);
  font-size: var(--testo-piccolo);
  color: var(--colore-testo-tenue);
}

.articolo__testata { margin-block-end: var(--spazio-4); }
.articolo__meta {
  font-size: var(--testo-piccolo);
  color: var(--colore-testo-tenue);
  margin-block-end: var(--spazio-2);
}
.articolo__titolo { margin-block-end: var(--spazio-2); }

.articolo__tag {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2);
  margin: 0;
}
.articolo__tag-voce {
  font-size: var(--testo-piccolo);
  text-decoration: none;
  padding: 0.25em 0.9em;
  background: var(--colore-sfondo-alt);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-badge);
  color: var(--colore-scuro);
  text-transform: capitalize;
}
.articolo__tag-voce:hover { border-color: var(--colore-primario-chiaro); }

.articolo__copertina {
  width: 100%;
  border-radius: var(--raggio);
  margin-block-end: var(--spazio-5);
}

/* --- Tipografia del corpo (Markdown) --- */
.articolo__corpo {
  font-size: var(--testo-corpo);
  line-height: 1.75;
}
.articolo__corpo h2 {
  font-size: var(--testo-h3);
  margin-block: var(--spazio-5) var(--spazio-3);
}
.articolo__corpo h3,
.articolo__corpo h4 {
  font-size: var(--testo-h4);
  margin-block: var(--spazio-4) var(--spazio-2);
}
.articolo__corpo p { margin-block-end: var(--spazio-3); }
.articolo__corpo strong { color: var(--colore-scuro); }
.articolo__corpo ul {
  padding-left: 1.2em;
  margin-block-end: var(--spazio-3);
}
.articolo__corpo li { margin-block-end: var(--spazio-1); }
.articolo__corpo img,
.articolo__immagine {
  border-radius: var(--raggio);
  margin-block: var(--spazio-3);
  height: auto;
}
.articolo__corpo a { word-break: break-word; }
.articolo__corpo blockquote {
  margin: 0 0 var(--spazio-3);
  padding: var(--spazio-2) var(--spazio-3);
  border-left: 4px solid var(--colore-primario-chiaro);
  background: var(--colore-sfondo-alt);
  border-radius: 0 var(--raggio) var(--raggio) 0;
}

/* --- Condivisione --- */
.articolo__pie {
  display: flex;
  align-items: center;
  gap: var(--spazio-3);
  margin-block: var(--spazio-6);
  padding-block-start: var(--spazio-4);
  border-top: 1px solid var(--colore-bordo);
  /* Serve all'anteprima del link, che deve andare a capo sotto le icone
     invece di affiancarsi a esse. Sulla riga di titolo + icone non
     cambia nulla: il ritorno a capo scatta solo se c'è altro. */
  flex-wrap: wrap;
}
.articolo__condividi-titolo {
  margin: 0;
  font-family: var(--font-titoli);
  font-weight: 500;
  color: var(--colore-scuro);
}
.articolo__condivisione {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--spazio-2);
}
/* Vale sia per i link di condivisione sia per il pulsante «Copia link»:
   lo stesso cerchio da 44 px, che è anche la misura minima comoda da
   toccare con un dito. */
.articolo__condivisione a,
.articolo__condivisione button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--colore-primario);
  background: none;
  font: inherit;
  border: 1px solid var(--colore-bordo);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--transizione), color var(--transizione);
}
.articolo__condivisione a:hover,
.articolo__condivisione button:hover {
  background: var(--colore-primario);
  color: #fff;
}

/* Le due icone del pulsante «Copia link» stanno nella STESSA cella:
   così si alternano senza far cambiare dimensione al pulsante.
   Quale si vede lo decide il CSS e non l'attributo "hidden", che su un
   elemento SVG alcuni browser ignorano: succedeva di vedere il segno di
   spunta sempre, accanto all'icona di copia. */
.articolo__condivisione .condivisione__copia > svg { grid-area: 1 / 1; }
.condivisione__icona-fatto { display: none; }

/* Conferma della copia: per due secondi il pulsante diventa verde e
   l'icona diventa un segno di spunta. Il colore da solo non basterebbe
   (chi non distingue i colori non lo coglierebbe), e in più il messaggio
   «Link copiato» viene annunciato ai lettori di schermo. */
.condivisione__copia--fatto .condivisione__icona-copia { display: none; }
.condivisione__copia--fatto .condivisione__icona-fatto { display: block; }

.articolo__condivisione .condivisione__copia--fatto,
.articolo__condivisione .condivisione__copia--fatto:hover {
  background: var(--colore-ok);
  border-color: var(--colore-ok);
  color: #fff;
}

.articolo__correlati {
  display: grid;
  gap: var(--spazio-4);
}

@media (min-width: 600px) {
  .articolo__correlati { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .articolo__correlati { grid-template-columns: repeat(3, 1fr); }
}

/* ===== ANTEPRIMA DEL LINK COPIATO =====
   Compare sotto le icone dopo aver premuto «Copia link» e mostra
   copertina e descrizione breve: si vede cosa comparirà una volta
   incollato, prima di incollarlo. */
.anteprima-link {
  position: relative;
  flex-basis: 100%;            /* va a capo, sotto le icone */
  margin-block-start: var(--spazio-3);
  padding: var(--spazio-3);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  background: var(--colore-sfondo-alt);
  max-width: 34rem;
}

.anteprima-link__intestazione {
  margin: 0 0 var(--spazio-2);
  font-size: var(--testo-piccolo);
  font-weight: 500;
  color: var(--colore-ok);
  padding-inline-end: var(--spazio-4);   /* spazio per la ✕ */
}

.anteprima-link__scheda {
  display: flex;
  gap: var(--spazio-3);
  align-items: flex-start;
  background: var(--colore-sfondo);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  overflow: hidden;
}

.anteprima-link__immagine {
  width: 7.5rem;
  align-self: stretch;
  object-fit: cover;
  flex: none;
  background: var(--colore-sfondo-alt);
}

.anteprima-link__testi {
  padding: var(--spazio-2) var(--spazio-3) var(--spazio-2) 0;
  min-width: 0;                          /* consente il troncamento */
}

.anteprima-link__dominio {
  margin: 0;
  font-size: var(--testo-piccolo);
  color: var(--colore-testo-tenue);
  text-transform: lowercase;
}

.anteprima-link__nome {
  margin: 0;
  font-family: var(--font-titoli);
  font-weight: 700;
  color: var(--colore-scuro);
  line-height: 1.3;
  /* Titolo lungo: due righe e poi i puntini, come fanno i social */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.anteprima-link__descrizione {
  margin: var(--spazio-1) 0 0;
  font-size: var(--testo-piccolo);
  color: var(--colore-testo);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.anteprima-link__chiudi {
  position: absolute;
  top: var(--spazio-2);
  right: var(--spazio-2);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font: inherit;
  font-size: var(--testo-piccolo);
  color: var(--colore-testo-tenue);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.anteprima-link__chiudi:hover {
  background: var(--colore-bordo);
  color: var(--colore-scuro);
}

/* Su schermi stretti la copertina va sopra, non a fianco */
@media (max-width: 30rem) {
  .anteprima-link__scheda { flex-direction: column; }
  .anteprima-link__immagine { width: 100%; aspect-ratio: 16 / 9; }
  .anteprima-link__testi { padding: 0 var(--spazio-3) var(--spazio-3); }
}


/* ===== 60-vendi.css ===== */
/* ===== PAGINA VENDI ===== */
.vendi-intro {
  display: grid;
  gap: var(--spazio-5);
  align-items: center;
}
.vendi-intro__testo { max-width: 60ch; }
.vendi-intro__foto {
  border-radius: var(--raggio);
  width: 100%;
  object-fit: cover;
}

/* --- Punti numerati --- */
.punti {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--spazio-5);
  counter-reset: punto;
}
.punto__numero {
  font-family: var(--font-titoli);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--colore-primario-chiaro);
  opacity: 0.35;
  margin-block-end: var(--spazio-1);
}
.punto__titolo {
  font-weight: 700;
  margin-block-end: var(--spazio-2);
}
.punto__testo {
  margin: 0;
  max-width: 45ch;
}

/* --- Barre dei dati --- */
.dati__sotto {
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
  margin-block-end: var(--spazio-5);
}
.barre {
  display: grid;
  gap: var(--spazio-4);
  max-width: 720px;
  margin-inline: auto;
}
.barra__etichetta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-titoli);
  font-weight: 500;
  color: var(--colore-scuro);
  margin-block-end: var(--spazio-1);
}
.barra__valore { color: var(--colore-primario); font-weight: 700; }
.barra__binario {
  height: 12px;
  border-radius: var(--raggio-badge);
  background: var(--colore-sfondo-alt);
  border: 1px solid var(--colore-bordo);
  overflow: hidden;
}
.barra__riempimento {
  height: 100%;
  width: var(--percento); /* senza JS la barra è già piena al valore corretto */
  border-radius: inherit;
  background: linear-gradient(90deg, var(--colore-primario), var(--colore-primario-chiaro));
}
.barra--pronta .barra__riempimento {
  width: 0;
  transition: width 1200ms ease;
}
.barra--animata .barra__riempimento { width: var(--percento); }

/* --- CTA --- */
.vendi-cta { background: var(--colore-primario); }
.vendi-cta__interno {
  display: grid;
  justify-items: center;
  gap: var(--spazio-4);
  text-align: center;
}
.vendi-cta__titolo { color: #fff; }

.vendi-illustrazione { width: 100%; }

@media (min-width: 900px) {
  .vendi-intro { grid-template-columns: 1.1fr 1fr; }
  .punti { grid-template-columns: repeat(3, 1fr); }
}


/* ===== 61-contatti.css ===== */
/* ===== PAGINA CONTATTI ===== */
.contatti__sottotitolo {
  max-width: 60ch;
  margin-block-end: var(--spazio-5);
}

.contatti {
  display: grid;
  gap: var(--spazio-6);
}

.contatti__voce-titolo {
  font-size: var(--testo-h3);
  margin-block-end: var(--spazio-3);
}

.contatti__indirizzo {
  font-style: normal;
  font-family: var(--font-titoli);
  font-weight: 500;
  color: var(--colore-scuro);
  margin-block-end: var(--spazio-4);
}

.contatti__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--spazio-3);
}
.contatti__lista li {
  display: grid;
  gap: 2px;
}
.contatti__etichetta {
  font-size: var(--testo-piccolo);
  color: var(--colore-testo-tenue);
}
.contatti__lista a {
  font-family: var(--font-titoli);
  font-size: var(--testo-h4);
  font-weight: 500;
  text-decoration: none;
  padding-block: 0.15em;
}
.contatti__lista a:hover { text-decoration: underline; }

/* --- Modulo --- */
#modulo-contatti {
  display: grid;
  gap: var(--spazio-3);
}
.campo { display: grid; gap: var(--spazio-1); }
.campo label {
  font-family: var(--font-titoli);
  font-size: var(--testo-piccolo);
  font-weight: 500;
  color: var(--colore-scuro);
}
.campo input,
.campo textarea {
  font: inherit;
  color: var(--colore-scuro);
  padding: 0.7em 0.9em;
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  background: var(--colore-sfondo);
  min-height: 44px;
}
.campo input:focus,
.campo textarea:focus {
  outline: 2px solid var(--colore-primario-chiaro);
  outline-offset: 1px;
  border-color: var(--colore-primario-chiaro);
}

.form-esito { margin: 0; font-weight: 500; }
.form-esito.ok { color: var(--colore-ok); }
.form-esito.errore { color: var(--colore-venduto); }
.form-nota {
  margin: 0;
  font-size: var(--testo-piccolo);
  color: var(--colore-testo-tenue);
}
.campo__nota {
  margin: 0;
  font-size: var(--testo-piccolo);
  color: var(--colore-testo-tenue);
}

/* Consenso: la casella accanto all'etichetta, non sopra — con
   "display: grid" del .campo finirebbe larga quanto la colonna. */
.campo--consenso {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--spazio-2);
}
.campo--consenso input {
  min-height: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: var(--colore-primario);
}
.campo--consenso label {
  font-family: inherit;
  font-weight: 400;
  line-height: 1.4;
}

/* --- Ripiego quando il programma di posta non si apre --- */
.form-ripiego {
  display: grid;
  gap: var(--spazio-2);
  margin-top: var(--spazio-3);
  padding: var(--spazio-3);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  background: var(--colore-sfondo-alt, var(--colore-sfondo));
}
.form-ripiego[hidden] { display: none; }
.form-ripiego__titolo {
  margin: 0;
  font-size: var(--testo-h4);
}
.form-ripiego p { margin: 0; }
.form-ripiego__testo {
  font: inherit;
  width: 100%;
  padding: 0.7em 0.9em;
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  background: var(--colore-sfondo);
  color: var(--colore-scuro);
  resize: vertical;
}

/* --- Mappa --- */
.mappa {
  position: relative;
  display: block;
  border-radius: var(--raggio);
  overflow: hidden;
  box-shadow: var(--ombra-card);
}
.mappa__immagine { width: 100%; }
.mappa__cta {
  position: absolute;
  bottom: var(--spazio-3);
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  white-space: nowrap;
}
.mappa__attribuzione {
  margin-block: var(--spazio-2) 0;
  font-size: 0.75rem;
  color: var(--colore-testo);
  text-align: right;
}

@media (min-width: 900px) {
  .contatti { grid-template-columns: 1fr 1.3fr; }
}


/* ===== 62-instagram-pagina.css ===== */
/* ===== PAGINA INSTAGRAM ===== */
.ig-pagina {
  background:
    radial-gradient(55% 70% at 90% 0%, rgba(220, 39, 67, 0.07), transparent 60%),
    radial-gradient(55% 70% at 10% 100%, rgba(24, 106, 192, 0.08), transparent 60%),
    var(--colore-sfondo);
}

.ig-pagina__profilo {
  display: grid;
  justify-items: center;
  gap: var(--spazio-2);
  text-align: center;
  margin-block-end: var(--spazio-6);
}

.ig-pagina__avatar-anello {
  display: grid;
  place-items: center;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
  padding: 4px;
  transition: transform var(--transizione);
}
.ig-pagina__avatar-anello:hover { transform: scale(1.05); }

.ig-pagina__avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--colore-sfondo);
  background: var(--colore-sfondo);
}

.ig-pagina__titolo { margin-block-start: var(--spazio-2); }

.ig-pagina__handle {
  font-family: var(--font-titoli);
  font-size: var(--testo-h3);
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(45deg, #e6683c, #dc2743 45%, #cc2366 70%, #bc1888);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ig-pagina__handle:hover { text-decoration: underline; text-decoration-color: #cc2366; }

.ig-pagina__sottotitolo {
  max-width: 60ch;
  margin: var(--spazio-2) auto 0;
}

.ig-pagina__cta { margin: var(--spazio-4) 0 0; }

@media (prefers-reduced-motion: reduce) {
  .ig-pagina__avatar-anello:hover { transform: none; }
}


/* ===== 90-404.css ===== */
/* ===== PAGINA 404 ===== */
.pagina-404 { text-align: center; padding-block: var(--spazio-7); }
.pagina-404__codice {
  font-family: var(--font-titoli);
  font-size: clamp(4rem, 10vw, 7rem);
  font-weight: 700;
  color: var(--colore-primario);
  line-height: 1;
  margin-block-end: var(--spazio-3);
}
.pagina-404__en { color: var(--colore-testo-tenue); font-size: var(--testo-piccolo); }
.pagina-404__azioni {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spazio-3);
  margin-block-start: var(--spazio-4);
}