/* =========================================================
   TRIGOMIGO STUDIO - FOGLIO DI STILE DEL SITO STATICO
   Deriva dal CSS aggiuntivo di WordPress (2026-10-08), senza Elementor.
   ========================================================= */

@font-face {
  font-family: "Trigomigo";
  src: url("../fonts/trigomigo.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* DM Sans ospitato sul sito (niente Google Fonts: nessun dato dei visitatori inviato a terzi) */
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-italic.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}

:root {
  --blu: #3E949C;
  --rosa: #EC465C;
  /* Un solo rosa in tutto il sito: quello del logo */
  --rosa-accento: var(--rosa);
  --giallo: #D39912;
  --azzurro: var(--blu);
  /* Il blu del logo, più scuro, per i testi: si legge bene anche piccolo (contrasto 5,6:1) */
  --azzurro-testo: #2B7178;
  /* Rosa del filo che attraversa la pagina (lo stesso dei fili della hero) */
  --filo: #EE8FA6;
  --scuro: #202824;
  --testo: #202824;
  --testo-secondario: #555555;
  --font-titoli: "Trigomigo", "DM Sans", sans-serif;
  --font-testo: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --larghezza: 1280px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-testo);
  font-size: 16px;
  line-height: 1.7;
  color: var(--testo);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: normal;
}

.trigo-container {
  width: 100%;
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: 0 40px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  background: var(--scuro);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  z-index: 100;
}

.skip-link:focus {
  top: 12px;
}

/* =========================
   HEADER
   ========================= */

.trigo-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: 18px 40px;
}

.trigo-header-logo img {
  width: 170px;
}

.trigo-main-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trigo-main-menu a {
  text-decoration: none;
  color: #111111;
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  transition: color 0.2s ease, transform 0.2s ease;
}

.trigo-main-menu a:hover,
.trigo-main-menu a[aria-current="page"] {
  color: var(--azzurro-testo);
}

.trigo-main-menu a:hover {
  transform: translateY(-1px);
}

.trigo-social-icons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

.trigo-social-icons a {
  color: #111111;
  display: inline-flex;
  transition: color 0.2s ease, transform 0.2s ease;
}

.trigo-social-icons svg {
  width: 26px;
  height: 26px;
}

.trigo-social-icons a:hover {
  color: var(--azzurro-testo);
  transform: translateY(-1px);
}

/* Colonna destra dell'header: social e selettore della lingua */
.trigo-header-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 22px;
}

.trigo-lang {
  display: inline-flex;
  border: 1.5px solid var(--scuro);
  border-radius: 999px;
  overflow: hidden;
}

.trigo-lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 32px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-decoration: none;
  color: var(--scuro);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.trigo-lang a[aria-current="true"] {
  background: var(--scuro);
  color: #ffffff;
}

.trigo-lang a:not([aria-current]):hover,
.trigo-lang a:not([aria-current]):focus-visible {
  background: rgba(32, 40, 36, 0.08);
}

/* Pulsante schermo chiaro/scuro (assets/js/tema.js): tondo, bordato come il selettore della lingua */
.trigo-tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  margin-left: -12px;
  padding: 0;
  border: 1.5px solid var(--scuro);
  border-radius: 50%;
  background: transparent;
  color: var(--scuro);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.3s ease;
}

.trigo-tema:hover,
.trigo-tema:focus-visible {
  background: rgba(32, 40, 36, 0.08);
  transform: rotate(-20deg);
}

.trigo-tema svg {
  width: 18px;
  height: 18px;
}

.trigo-tema-sole,
[data-tema="scuro"] .trigo-tema-luna {
  display: none;
}

[data-tema="scuro"] .trigo-tema-sole {
  display: block;
}

/* =========================
   PULSANTI
   ========================= */

.trigo-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

/* Un solo tipo di bottone in tutto il sito: la pillola colorata, come le palline della home.
   Scritta a 24px: con questa misura il bianco su rosa e su blu si legge bene (testo grande, contrasto oltre 3:1) */
.trigo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  padding: 15px 32px;
  font-family: var(--font-titoli);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  color: #ffffff;
  background-color: var(--rosa);
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.trigo-btn-primary {
  background-color: var(--rosa);
}

.trigo-btn-secondary {
  background-color: var(--blu);
}

.trigo-btn:hover,
.trigo-btn:focus-visible {
  background-color: color-mix(in srgb, var(--rosa) 85%, #000);
  transform: translateY(-3px);
}

.trigo-btn-secondary:hover,
.trigo-btn-secondary:focus-visible {
  background-color: color-mix(in srgb, var(--blu) 85%, #000);
}

.trigo-btn:focus-visible {
  outline: 3px solid var(--scuro);
  outline-offset: 4px;
}

/* Un solo stile per i titoli delle sezioni */
.trigo-titolo-sezione {
  font-family: var(--font-titoli);
  font-size: 56px;
  line-height: 1.05;
  color: var(--scuro);
}

/* =========================
   HOME - HERO
   ========================= */

.trigo-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: 50px 40px 30px;
  position: relative;
  isolation: isolate;
}

/* Il contenuto delle pagine: i fili e le macchie possono arrivare ai bordi dello schermo
   senza far comparire la barra di scorrimento orizzontale */
main {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}

/* Sugli schermi molto larghi tutto il sito si allarga un po' */
@media (min-width: 1680px) {
  :root {
    --larghezza: 1440px;
  }
}

/* Accenti disegnati sopra le lettere nei testi in font Trigomigo (il font non ha à, è, ò…): vedi acc() nel generatore */
.trigo-acc {
  position: relative;
  display: inline-block;
}

.trigo-acc::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.06em;
  width: 0.11em;
  height: 0.3em;
  margin-left: -0.055em;
  border-radius: 0.06em;
  background: currentColor;
  transform: rotate(-38deg);
}

.trigo-acc-acuto::after {
  transform: rotate(38deg);
}

/* I fili colorati dello sfondo scorrono piano da sinistra verso destra.
   Il disegno si ripete ogni 1920px, quindi il ciclo non ha stacchi.
   Ai lati sfumano, così non si vedono tagliati al bordo.
   Il riquadro è alto quanto il disegno (anche oltre il fondo della hero), così le curve non si tagliano. */
.trigo-hero-fili {
  position: absolute;
  top: -64px;
  /* da bordo a bordo dello schermo, anche se la hero è larga al massimo 1280px */
  left: calc(50% - 50vw);
  width: 100vw;
  height: 640px;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}

.trigo-hero-fili::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + 1920px);
  height: 640px;
  background: url("../img/home-fili.svg") repeat-x 0 0 / 1920px 640px;
  animation: trigo-fili 70s linear infinite;
  will-change: transform;
}

@keyframes trigo-fili {
  from { transform: translateX(-1920px); }
  to { transform: translateX(0); }
}

/* Senza il gomitolo, la scritta occupa il centro della hero */
.trigo-hero-copy {
  flex: 0 1 960px;
  text-align: center;
}

.trigo-hero-copy .trigo-palline {
  justify-content: center;
  margin-top: 64px;
}

.trigo-hero-title {
  font-family: var(--font-titoli);
  font-size: 84px;
  line-height: 0.95;
  letter-spacing: -1px;
  color: var(--scuro);
}

.trigo-hero-subtitle {
  font-family: var(--font-titoli);
  font-size: 32px;
  line-height: 1.2;
  margin-top: 12px;
  color: var(--azzurro-testo);
}

.trigo-hero-text {
  font-size: 18px;
  line-height: 1.6;
  margin: 18px auto 0;
  max-width: 860px;
  color: var(--testo-secondario);
}

/* L'elenco dei servizi va a capo tra un servizio e l'altro, mai dentro un nome */
.trigo-hero-text span {
  white-space: nowrap;
}

/* =========================
   HOME - LE PALLINE-PULSANTE
   Forme morbide come il logo. L'entrata rimbalzando è in assets/js/home.js:
   la classe .trigo-anima (messa in testa alla pagina) le tiene nascoste finché non partono.
   ========================= */

.trigo-palline {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  margin-top: 64px;
}

/* La posa finale è un bottone a pillola; la pallina che rimbalza è il "corpo",
   un cerchio appoggiato sul fondo del bottone che, all'arrivo, si allarga e diventa la pillola */
.trigo-pallina {
  position: relative;
  z-index: 2;
  display: block;
  flex: 0 0 auto;
  height: 58px;
  text-decoration: none;
  color: #ffffff;
  border-radius: 999px;
  --d: 120px;
}

.trigo-pallina-moto {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  transform-origin: 50% 100%;
  will-change: transform;
  transition: transform 0.25s ease;
}

.trigo-pallina-corpo {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.trigo-pallina-corpo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--colore);
  border-radius: 999px;
  transition: background-color 0.25s ease;
}

.trigo-pallina-rosa {
  --colore: var(--rosa);
  --forma: 40% 60% 56% 44% / 60% 42% 58% 40%;
  --forma-2: 52% 48% 42% 58% / 46% 58% 42% 54%;
}

/* Come nel logo, la blu è un po' più grande della rosa */
.trigo-pallina-blu {
  --colore: var(--blu);
  --forma: 58% 42% 46% 54% / 44% 58% 42% 56%;
  --forma-2: 46% 54% 58% 42% / 56% 44% 56% 44%;
  --d: 134px;
}

@keyframes trigo-respira {
  0%, 100% { border-radius: var(--forma); }
  50% { border-radius: var(--forma-2); }
}

.trigo-pallina-testo {
  position: relative;
  padding: 0 34px;
  font-family: var(--font-titoli);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  transition: opacity 0.15s ease, transform 0.25s cubic-bezier(0.34, 1.7, 0.5, 1);
}

/* Ombra a terra: c'è solo mentre la pallina rimbalza */
.trigo-pallina-ombra {
  position: absolute;
  left: calc(50% - var(--d) * 0.38);
  width: calc(var(--d) * 0.76);
  bottom: -9px;
  height: 14px;
  border-radius: 50%;
  /* sfumatura invece del filtro "blur": la stessa ombra morbida, ma molto più leggera da animare */
  background: radial-gradient(closest-side, var(--scuro), transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Al passaggio del mouse il bottone si alza un poco e scurisce, come gli altri bottoni del sito */
.trigo-pallina:hover .trigo-pallina-moto,
.trigo-pallina:focus-visible .trigo-pallina-moto {
  transform: translateY(-3px);
}

.trigo-pallina:hover .trigo-pallina-corpo::before,
.trigo-pallina:focus-visible .trigo-pallina-corpo::before {
  background-color: color-mix(in srgb, var(--colore) 85%, #000);
}

.trigo-pallina:focus-visible {
  outline: 3px solid var(--scuro);
  outline-offset: 5px;
}

/* ---- Prima e durante l'entrata (solo con l'animazione attiva) ---- */

/* Prima di partire le palline non si vedono; se lo script non parte, dopo 4 secondi compaiono i bottoni */
.trigo-anima .trigo-pallina:not(.trigo-in-volo):not(.trigo-ferma) {
  visibility: hidden;
  animation: trigo-rivela 0s 4s forwards;
}

@keyframes trigo-rivela {
  to { visibility: visible; }
}

/* In volo il corpo è una pallina morbida, centrata sul bottone e appoggiata al suo fondo */
.trigo-anima .trigo-pallina:not(.trigo-ferma) .trigo-pallina-corpo {
  left: calc(50% - var(--d) / 2);
  width: var(--d);
  height: var(--d);
}

.trigo-anima .trigo-pallina:not(.trigo-ferma) .trigo-pallina-corpo::before {
  border-radius: var(--forma);
  animation: trigo-respira 7s ease-in-out infinite;
}

.trigo-anima .trigo-pallina-blu .trigo-pallina-corpo::before {
  animation-delay: -3s;
}

.trigo-in-volo .trigo-pallina-ombra {
  opacity: 0.12;
}

.trigo-anima .trigo-pallina:not(.trigo-ferma) .trigo-pallina-testo {
  opacity: 0;
  transform: scale(0.6);
}

/* All'arrivo la pallina si schiaccia e si allunga fino a diventare la pillola */
.trigo-anima .trigo-ferma .trigo-pallina-corpo {
  transition: left 0.32s cubic-bezier(0.34, 1.5, 0.64, 1), width 0.32s cubic-bezier(0.34, 1.5, 0.64, 1), height 0.26s ease-out;
}

.trigo-anima .trigo-ferma .trigo-pallina-corpo::before {
  transition: border-radius 0.2s ease-out, background-color 0.25s ease;
}

.trigo-anima .trigo-ferma .trigo-pallina-testo {
  transition-delay: 0.12s;
}

.trigo-in-volo {
  pointer-events: none;
}

.trigo-in-volo .trigo-pallina-moto {
  transition: none;
}

/* Apertura della home, un pezzo alla volta invece che tutto insieme:
   fili sullo sfondo e titolo, poi sottotitolo e servizi, poi entrano le palline (home.js) e infine il filo comincia a srotolarsi (filo.js).
   Solo con le animazioni attive (classe .trigo-anima). */
/* I fili dello sfondo non compaiono dal nulla: entrano da sinistra come se venissero tirati dentro */
.trigo-anima .trigo-hero-fili {
  animation: trigo-tira-fili 1.8s cubic-bezier(0.3, 0.6, 0.2, 1) both;
}

@keyframes trigo-tira-fili {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

.trigo-anima .trigo-hero-title,
.trigo-anima .trigo-hero-subtitle,
.trigo-anima .trigo-hero-text {
  animation: trigo-entra 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.trigo-anima .trigo-hero-subtitle {
  animation-delay: 0.2s;
}

.trigo-anima .trigo-hero-text {
  animation-delay: 0.35s;
}

@keyframes trigo-entra {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

@keyframes trigo-dissolvi {
  from {
    opacity: 0;
  }
}

/* =========================
   HOME - CLIENTI
   L'altezza di ogni logo è in --alto (nel generatore), così sembrano tutti della stessa grandezza.
   ========================= */

/* In fondo alla home, tra i servizi e la chiusura */
.trigo-clienti {
  padding: 30px 0 0;
}

.trigo-clienti h2 {
  font-family: var(--font-titoli);
  font-size: 30px;
  line-height: 1.1;
  text-align: center;
  color: var(--scuro);
  margin-bottom: 34px;
}

.trigo-clienti-loghi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px 72px;
}

.trigo-clienti-loghi img {
  display: block;
  height: var(--alto, 60px);
  width: auto;
  max-width: 100%;
  transition: transform 0.25s ease;
}

.trigo-clienti-loghi img:hover {
  transform: scale(1.06);
}

/* =========================
   HOME - ABOUT US
   ========================= */

/* Impaginata come una rivista: a sinistra titolo, motto e definizione (fermi mentre si legge),
   a destra il testo su righe corte; sotto, la citazione in grande */
.trigo-home-about {
  padding: 60px 0 90px;
}

.trigo-chi-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 70px;
  align-items: start;
}

.trigo-chi-lato {
  position: sticky;
  top: 40px;
}

.trigo-chi-motto {
  font-family: var(--font-titoli);
  font-size: 34px;
  line-height: 1.15;
  color: var(--azzurro-testo);
  margin: 14px 0 34px;
}

.trigo-chi-definizione {
  margin: 0;
  padding-left: 18px;
  border-left: 4px solid var(--giallo);
  font-size: 18px;
  line-height: 1.5;
  color: var(--testo-secondario);
}

.trigo-chi-definizione span {
  display: block;
  font-family: var(--font-titoli);
  font-size: 36px;
  line-height: 1.1;
  color: var(--scuro);
  margin-bottom: 6px;
}

.trigo-home-about-text p {
  font-size: 19px;
  line-height: 1.65;
  margin: 0 0 22px;
  max-width: 64ch;
}

@media (max-width: 900px) {
  .trigo-chi-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .trigo-chi-lato {
    position: static;
  }
}

.trigo-chi-citazione {
  margin: 70px 0 0;
  padding: 0;
  max-width: 30ch;
  font-family: var(--font-titoli);
  font-size: 38px;
  line-height: 1.2;
  color: var(--scuro);
}

/* I link del menu portano alle sezioni della home: lasciano un po' d'aria sopra il titolo */
#chi-siamo,
#servizi {
  scroll-margin-top: 20px;
}

/* =========================
   ABOUT
   ========================= */

.trigo-about {
  padding: 60px 0 100px;
}

.trigo-about-title h1 {
  font-family: var(--font-titoli);
  font-size: 64px;
  line-height: 1;
  margin-bottom: 36px;
}

.trigo-about-body p {
  font-size: 20px;
  line-height: 1.6;
  margin: 0 0 22px;
  max-width: 980px;
}

.trigo-about-quote {
  margin: 40px 0 0;
  padding: 0;
  font-size: 28px;
  line-height: 1.5;
  font-style: italic;
  color: #333333;
}

/* =========================
   SERVIZI - ELENCO CHE SI APRE
   Un servizio aperto alla volta. Su computer a destra c'è il riquadro con l'illustrazione
   del servizio scelto o sotto il mouse (assets/js/servizi.js); sul telefono l'illustrazione
   sta dentro il servizio aperto.
   ========================= */

.trigo-servizi {
  padding: 40px 0 80px;
}

.trigo-servizi-intro {
  margin: 10px 0 34px;
  font-size: 18px;
  color: var(--testo-secondario);
}

.trigo-servizi-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 60px;
  align-items: start;
}

.trigo-servizio {
  border-top: 1.5px solid rgba(32, 40, 36, 0.15);
}

.trigo-servizio:last-child {
  border-bottom: 1.5px solid rgba(32, 40, 36, 0.15);
}

.trigo-servizio summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
}

.trigo-servizio summary::-webkit-details-marker {
  display: none;
}

.trigo-servizio-nome {
  font-family: var(--font-titoli);
  font-size: 38px;
  line-height: 1.05;
  color: var(--scuro);
  transition: color 0.2s ease, transform 0.25s ease;
}

.trigo-servizio summary:hover .trigo-servizio-nome,
.trigo-servizio summary:focus-visible .trigo-servizio-nome,
.trigo-servizio[open] .trigo-servizio-nome {
  color: var(--rosa);
}

.trigo-servizio summary:hover .trigo-servizio-nome {
  transform: translateX(6px);
}

.trigo-servizio summary:focus-visible {
  outline: 3px solid var(--scuro);
  outline-offset: 4px;
  border-radius: 6px;
}

/* Il segno + diventa − quando il servizio è aperto */
.trigo-servizio-segno {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(32, 40, 36, 0.06);
  transition: background-color 0.2s ease, transform 0.3s ease;
}

.trigo-servizio-segno::before,
.trigo-servizio-segno::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 19px;
  height: 2px;
  border-radius: 2px;
  background: var(--scuro);
  transition: transform 0.3s ease;
}

.trigo-servizio-segno::after {
  transform: rotate(90deg);
}

.trigo-servizio[open] .trigo-servizio-segno {
  background: var(--rosa);
  transform: rotate(180deg);
}

.trigo-servizio[open] .trigo-servizio-segno::before,
.trigo-servizio[open] .trigo-servizio-segno::after {
  background: #ffffff;
}

.trigo-servizio[open] .trigo-servizio-segno::after {
  transform: rotate(0deg);
}

/* Apertura morbida nei browser che lo permettono (negli altri si apre di colpo) */
@supports (interpolate-size: allow-keywords) {
  .trigo-servizi {
    interpolate-size: allow-keywords;
  }

  .trigo-servizio::details-content {
    height: 0;
    overflow: clip;
    transition: height 0.4s ease, content-visibility 0.4s allow-discrete;
  }

  .trigo-servizio[open]::details-content {
    height: auto;
  }
}

.trigo-servizio-corpo {
  padding: 0 0 30px;
  max-width: 62ch;
}

.trigo-servizio-corpo p {
  margin: 0 0 14px;
  font-size: 18px;
  line-height: 1.6;
}

.trigo-servizio-corpo .trigo-include {
  margin: 20px 0 8px;
  font-weight: 800;
}

.trigo-servizio-corpo ul {
  margin: 0 0 26px;
  padding-left: 20px;
  columns: 2;
  column-gap: 34px;
}

.trigo-servizio-corpo li {
  margin-bottom: 6px;
  font-size: 16px;
  line-height: 1.4;
  break-inside: avoid;
}

/* L'illustrazione dentro il servizio serve solo sul telefono */
.trigo-servizio-img {
  display: none;
}

/* Il riquadro è alto quanto l'elenco dei servizi e resta fermo (non segue lo scorrimento) */
.trigo-servizi-anteprima {
  position: relative;
  align-self: stretch;
  min-height: 420px;
  border-radius: 32px;
  overflow: hidden;
  background: rgba(32, 40, 36, 0.04);
}

.trigo-servizi-anteprima img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.4s ease, transform 0.6s ease;
}

.trigo-servizi-anteprima img.attiva {
  opacity: 1;
  transform: none;
}

@media (max-width: 900px) {
  .trigo-servizi-grid {
    grid-template-columns: 1fr;
  }

  .trigo-servizi-anteprima {
    display: none;
  }

  .trigo-servizio-img {
    display: block;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 24px;
    margin: 0 0 20px;
  }

  .trigo-servizio-corpo ul {
    columns: 1;
  }
}

/* =========================
   SHOWREEL (compare solo quando c'è assets/video/showreel.mp4)
   ========================= */

.trigo-showreel {
  padding: 30px 0 50px;
}

.trigo-showreel-video {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  background: var(--scuro);
}

.trigo-showreel-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.trigo-showreel-audio {
  position: absolute;
  right: 24px;
  bottom: 24px;
}

/* =========================
   HOME - CHIUSURA (dove finisce il filo)
   ========================= */

.trigo-chiusura {
  padding: 100px 0 130px;
  text-align: center;
}

.trigo-chiusura p {
  margin: 16px auto 34px;
  max-width: 46ch;
  font-size: 19px;
  color: var(--testo-secondario);
}

.trigo-chiusura-btn {
  margin: 0 auto;
}

/* =========================
   IL FILO CHE ATTRAVERSA LA HOME
   Disegnato da assets/js/filo.js: si srotola mentre si scorre la pagina.
   ========================= */

.trigo-filo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  overflow: visible;
}

.trigo-filo path {
  fill: none;
  stroke: var(--filo);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================
   CONTATTI
   ========================= */

.trigo-contact {
  padding: 100px 0 120px;
}

.trigo-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 60px;
}

.trigo-contact h1,
.trigo-contact h2 {
  font-family: var(--font-titoli);
  font-size: 56px;
  line-height: 1.05;
  margin-bottom: 30px;
}

.trigo-contact h2 {
  font-size: 40px;
}

.trigo-contact-info dl {
  margin: 0 0 30px;
}

.trigo-contact-info dt {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1px;
  margin-top: 22px;
}

.trigo-contact-info dd {
  margin: 4px 0 0;
  font-size: 18px;
}

.trigo-contact-info dd a {
  text-decoration: none;
}

.trigo-contact-info dd a:hover {
  color: var(--rosa-accento);
}

.trigo-contact-info .trigo-social-icons {
  justify-content: flex-start;
}

/* Mappa: anteprima statica (immagine nostra, nessun dato a terzi) con lo spillo rosa al centro;
   al clic la mappa di Google prende il suo posto (assets/js/contatti.js) */
.trigo-mappa {
  position: relative;
  margin-top: 32px;
  aspect-ratio: 4 / 3;
  max-width: 460px;
  border-radius: 24px;
  overflow: hidden;
  background: #e8eef0 url("/assets/img/mappa-anteprima.jpg") center / cover no-repeat;
  box-shadow: 0 10px 30px rgba(32, 40, 36, 0.12);
}

/* Spillo: goccia rosa con un buco bianco, che rimbalza piano */
.trigo-mappa-spillo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  margin: -34px 0 0 -17px;
  border-radius: 50% 50% 50% 0;
  background: var(--rosa);
  transform: rotate(-45deg);
  box-shadow: -3px 3px 8px rgba(0, 0, 0, 0.25);
  animation: trigo-spillo 2.4s ease-in-out infinite;
}

.trigo-mappa-spillo::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: #fff;
}

@keyframes trigo-spillo {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

@media (prefers-reduced-motion: reduce) {
  .trigo-mappa-spillo { animation: none; }
}

.trigo-mappa-osm {
  position: absolute;
  top: 8px;
  right: 10px;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.8);
  font-size: 11px;
}

.trigo-mappa-osm a {
  color: inherit;
}

.trigo-mappa-barra {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
}

.trigo-mappa-barra .trigo-btn {
  flex-shrink: 0;
}

.trigo-mappa-barra p {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}

.trigo-mappa-barra a {
  color: var(--azzurro-testo);
}

.trigo-mappa.aperta {
  background: none;
}

/* Sul telefono il riquadro è più alto e la barra va in colonna */
@media (max-width: 600px) {
  .trigo-mappa {
    aspect-ratio: 4 / 5;
  }

  .trigo-mappa-barra {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

.trigo-mappa iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Modulo */

.trigo-form {
  display: grid;
  gap: 18px;
}

.trigo-form label {
  display: block;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 6px;
}

.trigo-form input[type="text"],
.trigo-form input[type="email"],
.trigo-form input[type="tel"],
.trigo-form textarea {
  width: 100%;
  font: inherit;
  color: var(--scuro);
  border: 1.5px solid rgba(32, 40, 36, 0.28);
  border-radius: 12px;
  background-color: #ffffff;
  padding: 12px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.trigo-form textarea {
  min-height: 160px;
  resize: vertical;
}

.trigo-form input:hover,
.trigo-form textarea:hover {
  border-color: rgba(32, 40, 36, 0.5);
}

.trigo-form input:focus,
.trigo-form textarea:focus {
  border-color: var(--scuro);
  box-shadow: 0 0 0 3px rgba(242, 77, 107, 0.25);
  outline: none;
}

.trigo-form-privacy {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
}

/* Casella più grande, facile da toccare col dito */
.trigo-form-privacy input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--rosa);
}

.trigo-form-privacy label {
  font-weight: normal;
  margin: 0;
}

/* Campo trappola per i bot: invisibile alle persone */
.trigo-form-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.trigo-form button {
  justify-self: start;
}

/* Invio: il bottone si stringe in una pallina che rimbalza e rotola via (assets/js/contatti.js) */
.trigo-form button.trigo-invio {
  color: transparent;
  pointer-events: none;
}

.trigo-form-esito {
  padding: 14px 18px;
  border-radius: 12px;
  font-weight: 700;
}

.trigo-form-esito[hidden] {
  display: none;
}

.trigo-form-esito.ok {
  background: rgba(62, 148, 156, 0.12);
  color: #22585d;
}

.trigo-form-esito.errore {
  background: rgba(236, 70, 92, 0.12);
  color: #a3192c;
}

/* =========================
   FOOTER
   ========================= */

.trigo-footer {
  border-top: 1px solid rgba(32, 40, 36, 0.10);
  padding: 50px 0 30px;
}

.trigo-footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.trigo-footer-logo img {
  width: 150px;
}

.trigo-footer h2 {
  font-family: var(--font-titoli);
  font-size: 22px;
  line-height: 1.1;
  margin-bottom: 14px;
}

.trigo-footer-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trigo-footer a {
  color: var(--scuro);
  text-decoration: none;
  transition: color 0.2s ease;
}

.trigo-footer a:hover {
  color: var(--rosa-accento);
}

.trigo-footer-contact p {
  margin: 0 0 8px;
}

.trigo-footer .trigo-social-icons {
  justify-content: flex-start;
}

.trigo-footer .trigo-social-icons a:hover {
  color: var(--rosa-accento);
}

.trigo-footer-copy {
  margin-top: 35px;
  font-size: 14px;
  color: var(--testo-secondario);
}

/* =========================
   TABLET
   ========================= */

@media (max-width: 1024px) {
  .trigo-hero-title {
    font-size: 58px;
  }

  .trigo-contact-grid {
    grid-template-columns: 1fr;
  }

  .trigo-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* =========================
   SMARTPHONE
   ========================= */

@media (max-width: 767px) {
  .trigo-container {
    padding: 0 25px;
  }

  .trigo-header {
    display: flex;
    flex-direction: column;
    padding: 18px 20px 6px;
    gap: 6px;
    position: relative;
  }

  /* Logo a sinistra: a destra, sulla stessa riga, stanno lingua e schermo scuro */
  .trigo-header-logo {
    align-self: flex-start;
    margin-top: 8px;
  }

  .trigo-header-logo img {
    width: 140px;
  }

  .trigo-main-menu {
    flex-wrap: wrap;
    gap: 0 4px;
  }

  /* Voci del menu più alte, così si toccano bene col dito (almeno 44px) */
  .trigo-main-menu a {
    font-size: 15px;
    white-space: nowrap;
    padding: 15px 9px;
  }

  .trigo-header .trigo-social-icons {
    display: none;
  }

  /* Su telefono il selettore della lingua sta in alto a destra */
  .trigo-header-right {
    position: absolute;
    top: 18px;
    right: 16px;
  }

  .trigo-lang a {
    min-height: 40px;
  }

  .trigo-tema {
    width: 43px;
    height: 43px;
    margin-left: -14px;
  }

  .trigo-titolo-sezione {
    font-size: 38px;
  }

  .trigo-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 45px 28px 60px;
    min-height: auto;
    gap: 32px;
  }

  .trigo-hero-copy {
    flex: none;
    width: 100%;
  }

  .trigo-hero-title {
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: -0.5px;
  }

  .trigo-hero-subtitle {
    font-size: 22px;
  }

  .trigo-hero-text {
    font-size: 16px;
    line-height: 1.5;
  }

  /* Sul telefono i due bottoni stanno uno sotto l'altro: palline più piccole e più distanti,
     così mentre rimbalzano non si toccano (la pallina sporge sopra il bottone di --d meno 54px;
     quella sotto fa salti bassi, vedi home.js) */
  .trigo-hero-copy .trigo-palline {
    flex-direction: column;
    align-items: center;
    gap: 52px;
    margin-top: 56px;
  }

  .trigo-pallina {
    --d: 72px;
    height: 54px;
  }

  .trigo-pallina-blu {
    --d: 80px;
  }

  .trigo-pallina-testo {
    padding: 0 26px;
  }

  .trigo-clienti {
    padding: 20px 0 0;
  }

  .trigo-clienti h2 {
    font-size: 24px;
    margin-bottom: 26px;
  }

  .trigo-clienti-loghi {
    gap: 30px 40px;
  }

  .trigo-clienti-loghi img {
    height: calc(var(--alto, 60px) * 0.75);
  }

  .trigo-home-about-text p {
    font-size: 17px;
  }

  .trigo-chi-motto {
    font-size: 26px;
  }

  .trigo-chi-definizione span {
    font-size: 30px;
  }

  .trigo-chi-citazione {
    font-size: 24px;
  }

  .trigo-servizio summary {
    padding: 18px 0;
  }

  .trigo-servizio-nome {
    font-size: 26px;
  }

  .trigo-chiusura {
    padding: 70px 0 90px;
  }

  .trigo-btn {
    padding: 15px 26px;
  }

  .trigo-about-title h1 {
    font-size: 42px;
  }

  .trigo-about-body p {
    font-size: 17px;
    text-align: left;
  }

  .trigo-about-quote {
    font-size: 21px;
  }

  .trigo-contact {
    padding: 40px 0 70px;
  }

  .trigo-contact h1 {
    font-size: 38px;
  }

  .trigo-contact h2 {
    font-size: 30px;
  }

  .trigo-footer-grid {
    grid-template-columns: 1fr;
  }
}

/* Chi ha chiesto meno animazioni al sistema non vede il gomitolo fluttuare */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* =========================
   PAGINE DI TESTO (privacy)
   ========================= */

.trigo-legal .trigo-about-body h2 {
  font-size: 22px;
  font-weight: 800;
  margin: 36px 0 10px;
}

.trigo-legal .trigo-about-body p {
  font-size: 17px;
  text-align: left;
}

/* =========================
   SCHERMO SCURO (pulsante accanto alle lingue, assets/js/tema.js)
   Si cambiano le variabili dei colori e i pochi colori scritti a mano più sopra.
   ========================= */

:root[data-tema="scuro"] {
  --scuro: #F1EEE8;
  --testo: #E4E1DB;
  --testo-secondario: #A9B1AF;
  /* Il blu dei testi, più chiaro per leggersi sul fondo scuro */
  --azzurro-testo: #7CC3CA;
  --fondo-scuro: #171D1B;
  color-scheme: dark;
}

[data-tema="scuro"] body {
  background: var(--fondo-scuro);
}

[data-tema="scuro"] .skip-link,
[data-tema="scuro"] .trigo-lang a[aria-current="true"] {
  color: var(--fondo-scuro);
}

[data-tema="scuro"] .trigo-main-menu a,
[data-tema="scuro"] .trigo-social-icons a,
[data-tema="scuro"] .trigo-about-quote {
  color: var(--testo);
}

[data-tema="scuro"] .trigo-main-menu a:hover,
[data-tema="scuro"] .trigo-main-menu a[aria-current="page"],
[data-tema="scuro"] .trigo-social-icons a:hover {
  color: var(--azzurro-testo);
}

[data-tema="scuro"] .trigo-lang a:not([aria-current]):hover,
[data-tema="scuro"] .trigo-lang a:not([aria-current]):focus-visible,
[data-tema="scuro"] .trigo-tema:hover,
[data-tema="scuro"] .trigo-tema:focus-visible {
  background: rgba(255, 255, 255, 0.1);
}

/* Logo nero: diventa chiaro */
[data-tema="scuro"] .trigo-header-logo img,
[data-tema="scuro"] .trigo-footer-logo img {
  filter: invert(1);
}

/* Loghi dei clienti: su un cartoncino chiaro, così restano nei loro colori */
[data-tema="scuro"] .trigo-clienti-loghi img {
  box-sizing: content-box;
  padding: 10px 16px;
  border-radius: 14px;
  background: #F4F1EA;
}

[data-tema="scuro"] .trigo-pallina-ombra {
  background: radial-gradient(closest-side, #000, transparent);
}

[data-tema="scuro"] .trigo-servizio,
[data-tema="scuro"] .trigo-servizio:last-child {
  border-color: rgba(255, 255, 255, 0.15);
}

[data-tema="scuro"] .trigo-servizio-segno,
[data-tema="scuro"] .trigo-servizi-anteprima {
  background: rgba(255, 255, 255, 0.07);
}

[data-tema="scuro"] .trigo-showreel-video {
  background: #000;
}

/* Mappa: la barra resta bianca, quindi testi scuri */
[data-tema="scuro"] .trigo-mappa-barra p,
[data-tema="scuro"] .trigo-mappa-osm {
  color: #202824;
}

[data-tema="scuro"] .trigo-mappa-barra a {
  color: #2B7178;
}

[data-tema="scuro"] .trigo-form input[type="text"],
[data-tema="scuro"] .trigo-form input[type="email"],
[data-tema="scuro"] .trigo-form input[type="tel"],
[data-tema="scuro"] .trigo-form textarea {
  background-color: #222A28;
  border-color: rgba(255, 255, 255, 0.25);
}

[data-tema="scuro"] .trigo-form input[type="text"]:hover,
[data-tema="scuro"] .trigo-form input[type="email"]:hover,
[data-tema="scuro"] .trigo-form input[type="tel"]:hover,
[data-tema="scuro"] .trigo-form textarea:hover {
  border-color: rgba(255, 255, 255, 0.45);
}

[data-tema="scuro"] .trigo-form-esito.ok {
  color: #9FD8DD;
}

[data-tema="scuro"] .trigo-form-esito.errore {
  color: #FF9AA8;
}

[data-tema="scuro"] .trigo-footer {
  border-top-color: rgba(255, 255, 255, 0.1);
}