/* ==========================================================================
   Allevamento di Prisconte — foglio di stile
   Step 5 (20/10/2026): la home dal design del kit (Design/kit/design-computer.png).
   Colori misurati sul design con confronta-design.py, in #hex qui sotto.
   Caratteri serviti dal sito: Noto Serif (variabile, larghezza e peso) per i titoli,
   Barlow e Barlow Condensed per testi, etichette e pulsanti.
   I titoli stretti del design sono più stretti di ogni serif libero: Noto Serif
   ExtraCondensed Black, stretto ancora in orizzontale (--comp) come nel design.
   I pezzi (occhiello, titolo, pulsanti, righe, garanzie, premio) sono riusabili
   nelle pagine interne.
   ========================================================================== */

@font-face {
  font-family: "Prisconte Serif";
  src: url("/assets/fonts/noto-serif-var-latin.woff2") format("woff2-variations"),
       url("/assets/fonts/noto-serif-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/barlow-condensed-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* colori del design (misurati) */
  --nero: #060605;
  --nero-2: #0E0D09;
  --nero-3: #1B160A;
  --bronzo: #45321C;
  --bronzo-chiaro: #796240;
  --oro-chiaro: #FDE18A;
  --oro: #F9D175;
  --oro-pieno: #DDA543;
  --oro-scuro: #C38932;
  --oro-spento: #B2945C;
  --sabbia: #E0C89B;
  --crema: #FDF8EC;
  --crema-2: #F3E3C8;
  --testo: #FDFAF4;

  /* trasparenze (linee, ombre, luci) */
  --linea: rgba(221, 165, 67, .55);
  --linea-tenue: rgba(221, 165, 67, .28);
  --ombra-scura: rgba(0, 0, 0, .55);

  /* sfumature dei titoli, come nel design */
  --sfum-oro: linear-gradient(180deg, var(--oro-chiaro) 0%, var(--oro) 38%, var(--oro-pieno) 70%, var(--oro-scuro) 100%);
  --sfum-crema: linear-gradient(180deg, var(--testo) 0%, var(--crema) 40%, var(--crema-2) 78%, var(--sabbia) 100%);

  /* caratteri */
  --serif: "Prisconte Serif", "Noto Serif", Georgia, "Times New Roman", serif;
  --sans: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --stretto: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --comp: .76;  /* quanto si stringono i titoli stretti */

  /* misure */
  --largh: 1200px;
  --gutter: 16px;
  --testata: 64px;
  --raggio: 4px;
  /* curve del movimento (Emil Kowalski): entrate e uscite, cose che si spostano */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  background: var(--nero);
}
html.menu-aperto { overflow: hidden; }
body {
  margin: 0;
  background: var(--nero);
  color: var(--testo);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, h1, h2, h3, ul, ol, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }

.salta {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--oro); color: var(--nero); padding: 10px 16px; border-radius: var(--raggio);
  font-weight: 600; text-decoration: none;
}
.salta:focus { top: 12px; }

.contenitore {
  width: 100%;
  max-width: calc(var(--largh) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* ---------- testi ricorrenti ---------- */
.crema, .oro {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.crema { background-image: var(--sfum-crema); }
.oro { background-image: var(--sfum-oro); }

/* stretto in orizzontale, su un blocco intero (una riga di titolo, un nome) */
.comprimi, .titolo--stretto > span {
  display: block;
  width: calc(100% / var(--comp));
  transform: scaleX(var(--comp));
  transform-origin: 0 50%;
}

/* occhiello: «01 —— ALLEVAMENTO DOBERMANN ——» */
.occhiello {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--stretto); font-weight: 500;
  font-size: 14px; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase;
  color: var(--crema);
}
.occhiello::after {
  content: ""; flex: 1 1 auto; max-width: 220px; height: 1px; background: var(--linea);
}
.occhiello__num { color: var(--oro); font-weight: 600; letter-spacing: .06em; }
.occhiello__trattino { width: 34px; height: 1px; background: var(--linea); flex: none; }
.occhiello__sep { color: var(--oro); opacity: .9; }

/* titoli di sezione, stretti come nel design */
.titolo {
  font-family: var(--serif);
  font-weight: 900;
  line-height: .9;
  letter-spacing: 0;
  text-transform: uppercase;
}
.titolo--stretto { font-stretch: 62.5%; }
.titolo > span { padding-bottom: .03em; }
.titolo, .occhiello { min-width: 0; }

/* un titolo stretto su una riga sola, coi colori a pezzi (OLTRE / L'ALLEVAMENTO.) */
.titolo--riga { width: calc(100% / var(--comp)); transform: scaleX(var(--comp)); transform-origin: 0 50%; }
.titolo--stretto.titolo--riga > span { display: inline; width: auto; transform: none; }

/* ---------- pulsanti ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px;
  border-radius: var(--raggio);
  font-family: var(--sans); font-weight: 600; font-size: 16px; line-height: 1.1;
  text-decoration: none; white-space: nowrap;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform 140ms var(--ease-out), box-shadow 220ms ease, background-color 220ms ease, border-color 220ms ease, color 220ms ease;
}
.btn:active { transform: scale(.97); }
.btn--oro {
  color: var(--nero-2);
  background-color: var(--oro-pieno);
  background-image: linear-gradient(180deg, rgba(253, 225, 138, .55), rgba(195, 137, 50, .35)), url("/assets/img/sfondo-oro-spazzolato-640.webp");
  background-size: cover; background-position: center;
  border: 1px solid var(--oro-chiaro);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.btn--linea {
  color: var(--crema);
  background: rgba(6, 6, 5, .35);
  border: 1px solid var(--oro-pieno);
}
.btn--pillola {
  min-height: 44px; padding: 0 22px; border-radius: 999px;
  color: var(--crema); border: 1.5px solid var(--oro-pieno); background: rgba(6, 6, 5, .3);
  font-weight: 500;
}
.freccia { width: 13px; height: auto; flex: none; transition: transform 220ms var(--ease-out); }
.freccia--scura { filter: brightness(0) saturate(0); opacity: .85; }
@media (hover: hover) and (pointer: fine) {
  .btn--oro:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .55), 0 0 0 1px var(--oro-chiaro), inset 0 1px 0 rgba(255, 255, 255, .45); }
  .btn--linea:hover, .btn--pillola:hover { border-color: var(--oro-chiaro); background: rgba(221, 165, 67, .12); }
  .btn:hover .freccia, .link-freccia:hover .freccia { transform: translate(2px, -2px); }
}

.link-freccia {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding-bottom: 2px;
  font-weight: 500; font-size: 16px; color: var(--crema); text-decoration: none;
  border-bottom: 1px solid var(--linea);
  touch-action: manipulation;
}
.link-freccia:active { opacity: .75; }

/* ---------- testata ---------- */
.testata {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  padding-top: env(safe-area-inset-top, 0px);
  transition: transform 320ms var(--ease-out);
}
.testata::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--nero), var(--nero-2));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  opacity: 0; transition: opacity 260ms ease;
}
.testata.scorsa::before { opacity: 1; }
.testata.nascosta { transform: translateY(-110%); transition-duration: 220ms; }
html.menu-aperto .testata { transform: none; }
.marchio__logo { transform-origin: 0 0; transition: transform 320ms var(--ease-out), filter 220ms ease; }
.testata::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(221, 165, 67, .25), var(--linea) 20%, var(--linea) 80%, rgba(221, 165, 67, .25));
}
.testata__barra {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  height: var(--testata);
}
.marchio {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; margin-right: auto; min-width: 0;
}
.marchio__logo { width: 52px; height: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .6)); }
.marchio__nome {
  font-family: var(--serif); font-weight: 800; font-stretch: 62.5%;
  font-size: 26px; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
  background-image: var(--sfum-oro);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

.menu__voci { list-style: none; margin: 0; padding: 0; }
.menu__voci a {
  text-decoration: none; font-weight: 500; color: var(--crema);
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}

/* hamburger (telefono e tablet) */
.hamburger {
  position: relative; z-index: 2;
  width: 46px; height: 46px; flex: none;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: rgba(6, 6, 5, .45); border: 1px solid var(--linea); border-radius: 999px;
  cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.hamburger span { display: block; width: 18px; height: 1.5px; background: var(--oro); transition: transform 260ms var(--ease-out), opacity 200ms ease; }
.hamburger:active { transform: scale(.95); }
html.menu-aperto .hamburger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
html.menu-aperto .hamburger span:nth-child(2) { opacity: 0; }
html.menu-aperto .hamburger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 1079px) {
  .menu {
    position: fixed; inset: 0; z-index: 1;
    height: 100dvh; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    display: flex; flex-direction: column; justify-content: center; gap: 28px;
    padding: calc(var(--testata) + env(safe-area-inset-top, 0px) + 24px) max(24px, env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
    background:
      radial-gradient(80% 50% at 80% 10%, rgba(121, 98, 64, .35), transparent 70%),
      var(--nero);
    opacity: 0; visibility: hidden;
    transition: opacity 200ms var(--ease-out), visibility 0s linear 200ms;
  }
  html.menu-aperto .menu { opacity: 1; visibility: visible; transition: opacity 320ms var(--ease-out), visibility 0s; }
  html.menu-aperto .marchio { position: relative; z-index: 2; }
  .menu__voci { display: flex; flex-direction: column; gap: 4px; }
  .menu__voci a {
    display: flex; align-items: center; min-height: 58px;
    width: calc(100% / var(--comp)); transform: scaleX(var(--comp)); transform-origin: 0 50%;
    font-family: var(--serif); font-weight: 900; font-stretch: 62.5%; text-transform: uppercase;
    font-size: 46px; line-height: 1; color: var(--crema);
    border-bottom: 1px solid var(--linea-tenue);
  }
  .menu__voci a:active { color: var(--oro); }
  .menu__cta { align-self: flex-start; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 100svh;
  padding-top: calc(var(--testata) + env(safe-area-inset-top, 0px));
  background:
    radial-gradient(60% 45% at 70% 18%, rgba(121, 98, 64, .45), transparent 70%),
    radial-gradient(50% 40% at 15% 40%, rgba(69, 50, 28, .45), transparent 75%),
    var(--nero);
  border-bottom: 1px solid var(--linea);
}
.hero__foto {
  position: relative; z-index: -2;
  margin-top: calc(-1 * (var(--testata) + env(safe-area-inset-top, 0px)));
  flex: 1 0 auto; height: 40svh; min-height: 300px;
}
.hero__foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 24% 56%;
  filter: brightness(.5) contrast(1.25) saturate(1.2) sepia(.55);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 5%, #000 22%, #000 60%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, transparent 5%, #000 22%, #000 60%, transparent 100%);
}
.hero__luce {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 30% at 62% 26%, rgba(250, 209, 136, .28), transparent 70%),
    radial-gradient(70% 30% at 50% 50%, rgba(221, 165, 67, .14), transparent 75%),
    linear-gradient(180deg, rgba(6, 6, 5, .8) 0%, rgba(6, 6, 5, .2) 12%, transparent 22%);
}
.hero__corpo {
  position: relative; margin-top: -78px;
  display: flex; flex-direction: column; gap: 12px;
}
.hero__titolo {
  font-size: 34px; line-height: .92; max-width: 640px;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .55));
}
.hero__riga2 { font-size: 1.16em; margin-top: .04em; }
.hero__sotto { font-size: 16.5px; line-height: 1.3; color: var(--testo); }
.hero__fatto { font-size: 16px; line-height: 1.4; color: var(--sabbia); max-width: 520px; }
.hero__azioni { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.hero__azioni .btn { width: 100%; }
.hero__piede {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: auto; padding-top: 22px; padding-bottom: 16px;
  font-family: var(--stretto); font-weight: 500; font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--crema);
}

/* ---------- 02 · il nostro mondo ---------- */
.mondo {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(40% 90% at 85% 50%, rgba(69, 50, 28, .45), transparent 75%),
    var(--nero);
  border-bottom: 1px solid var(--linea);
}
.mondo__foto { height: 190px; position: relative; z-index: -1; }
.mondo__foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: 28% 45%;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.mondo__corpo { display: grid; gap: 16px; margin-top: -36px; padding-bottom: 36px; }
.mondo__testa { display: grid; gap: 10px; min-width: 0; }
.mondo__titolo { font-size: 42px; }
.mondo__lato { display: grid; gap: 8px; justify-items: start; font-size: 16px; line-height: 1.4; color: var(--testo); }

/* ---------- 03 · premi ---------- */
.premi {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 36px 0 32px;
  background:
    radial-gradient(45% 70% at 88% 30%, rgba(121, 98, 64, .4), transparent 72%),
    radial-gradient(35% 60% at 55% 85%, rgba(69, 50, 28, .45), transparent 75%),
    var(--nero);
  border-bottom: 1px solid var(--linea);
}
.alloro { position: absolute; z-index: -1; pointer-events: none; height: auto; opacity: .9; }
.alloro--premi-sx { width: 130px; left: -66px; top: 110px; opacity: .55; }
.alloro--premi-dx { width: 120px; right: -56px; top: 300px; opacity: .6; }
.premi__corpo { position: relative; display: grid; gap: 22px; }
.premi__testa { display: grid; gap: 10px; min-width: 0; }
.premi__titolo { font-size: 66px; }
.premi__elenco {
  display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  margin-inline: calc(-1 * var(--gutter)); padding: 40px var(--gutter) 6px;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.premi__elenco::-webkit-scrollbar { display: none; }
.premio { position: relative; scroll-snap-align: start; display: grid; align-content: start; gap: 2px; min-width: 0; }
.premio__anno {
  position: absolute; z-index: 0; top: -38px; right: 0;
  font-family: var(--serif); font-weight: 900; font-stretch: 62.5%;
  font-size: 84px; line-height: 1; letter-spacing: 0;
  color: transparent; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px var(--oro-pieno);
  transform: scaleX(var(--comp)); transform-origin: 100% 50%;
}
.premio__alloro { display: none; }
.premio__foto {
  position: relative; z-index: 1;
  border: 2px solid var(--oro-pieno);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .6);
  background: var(--nero-2);
  margin-bottom: 10px;
}
.premio--sx .premio__foto { transform: rotate(-1.5deg); }
.premio--dx .premio__foto { transform: rotate(1.2deg); }
.premio__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.premio--sx .premio__foto img { object-position: 50% 60%; }
.premio--dx .premio__foto img { object-position: 45% 55%; }
.premio__titolo {
  position: relative; z-index: 1;
  font-family: var(--serif); font-weight: 900; font-stretch: 62.5%; text-transform: uppercase;
  font-size: 32px; line-height: 1; white-space: nowrap;
  background-image: var(--sfum-oro); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.premio__dove { position: relative; z-index: 1; font-size: 16px; color: var(--testo); }
.premi__link { justify-self: start; }

/* ---------- 04 · il legame ---------- */
.legame {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--nero);
}
.legame__foto { height: 300px; position: relative; z-index: -1; }
.legame__foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: 56% 55%;
  filter: brightness(.88) contrast(1.06) saturate(.9) sepia(.14);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
.legame__corpo { display: grid; gap: 12px; justify-items: start; margin-top: -40px; padding-bottom: 38px; }
.legame__titolo { font-size: 46px; width: 100%; }
.legame__corsivo { text-transform: none; font-size: 1.16em; line-height: .95; }
.legame__sotto { font-size: 17px; color: var(--testo); }

/* ---------- garanzie (Pedigree · Vaccinazioni · …) ---------- */
.garanzie {
  background:
    linear-gradient(180deg, rgba(121, 98, 64, .18), rgba(27, 22, 10, 0)),
    var(--nero-3);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.garanzie__elenco {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  padding-top: 6px; padding-bottom: 6px;
}
.garanzie__elenco li {
  display: flex; align-items: center; gap: 12px;
  min-height: 54px; padding: 6px 4px;
  font-family: var(--stretto); font-weight: 600; font-size: 16px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--crema);
}
.garanzie__elenco img { width: 30px; height: auto; flex: none; }

/* ---------- 05 · servizi ---------- */
.servizi {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 36px 0 34px;
  background:
    radial-gradient(45% 80% at 30% 40%, rgba(69, 50, 28, .35), transparent 75%),
    var(--nero);
  border-bottom: 1px solid var(--linea);
}
.alloro--bordo-sx, .alloro--bordo-dx, .alloro--contatti-sx { display: none; }
.servizi__foto {
  position: absolute; z-index: -1; top: 0; right: 0; width: 80%; height: 230px; opacity: .5;
}
.servizi__foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
}
.servizi__corpo { display: grid; gap: 10px; }
.servizi__corpo > * { min-width: 0; }
.servizi__titolo { font-size: 56px; }

/* righe numerate: servizi; nelle pagine anche passaggi e domande */
.righe { list-style: none; padding: 0; margin: 6px 0 0; }
.righe > li + li .riga { border-top: 1px solid var(--linea); }
.riga {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 46px; grid-template-areas: "num nome icona" "num testo icona";
  align-items: center; column-gap: 12px; row-gap: 4px;
  padding: 14px 0;
  text-decoration: none; color: var(--testo);
  touch-action: manipulation;
}
.riga:active { opacity: .8; }
.riga__num { grid-area: num; font-family: var(--stretto); font-weight: 500; font-size: 28px; color: var(--crema); align-self: start; line-height: 1.1; }
.riga__nome {
  grid-area: nome; min-width: 0;
  font-family: var(--serif); font-weight: 900; font-stretch: 62.5%;
  font-size: 42px; line-height: 1; white-space: nowrap;
  background-image: var(--sfum-crema); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.riga__testo { grid-area: testo; min-width: 0; max-width: 270px; font-size: 15px; line-height: 1.35; color: var(--testo); }
.riga__icona { grid-area: icona; width: 44px; height: auto; filter: brightness(1.3) saturate(1.1); transition: transform 260ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .riga:hover .riga__icona { transform: rotate(45deg); }
}

/* ---------- 06 · contatti ---------- */
.contatti {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 40px 0 40px;
  background:
    linear-gradient(180deg, rgba(6, 6, 5, .35), rgba(6, 6, 5, .55)),
    url("/assets/img/sfondo-nero-materico-1600.webp") center / cover no-repeat,
    var(--nero);
}
.alloro--contatti-sx { width: 100px; left: -62px; top: 130px; opacity: .6; }
.alloro--contatti-dx { width: 120px; right: -60px; bottom: -40px; opacity: .7; }
.contatti__corpo {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "testa testa" "cerchio lato";
  align-items: center; column-gap: 18px; row-gap: 24px;
}
.contatti__testa { grid-area: testa; display: grid; gap: 10px; min-width: 0; }
.contatti__titolo { font-size: 46px; }
.contatti__cerchio {
  grid-area: cerchio; display: block; width: 104px; border-radius: 50%;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .65));
  transition: transform 160ms var(--ease-out);
  touch-action: manipulation;
}
.contatti__cerchio:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .contatti__cerchio:hover { transform: scale(1.04) rotate(-4deg); } }
.contatti__lato { grid-area: lato; min-width: 0; }
.contatti__parliamone {
  font-family: var(--stretto); font-weight: 600; font-stretch: normal;
  font-size: 40px; line-height: 1.1; color: var(--crema);
  padding-bottom: 8px; border-bottom: 1px solid var(--oro-pieno); margin-bottom: 8px;
}
.contatti__luogo { font-size: 17px; color: var(--testo); }
.contatti__recapiti { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 0; font-size: 15px; }
.contatti__recapiti li { display: flex; flex-wrap: wrap; column-gap: 6px; align-items: center; }
.contatti__recapiti span { color: var(--sabbia); }
.contatti__recapiti a { text-decoration: none; color: var(--crema); display: inline-flex; align-items: center; min-height: 32px; }

/* ---------- piede ---------- */
.piede {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(60% 70% at 50% 100%, rgba(69, 50, 28, .45), transparent 75%),
    var(--nero);
  border-top: 1px solid var(--linea);
  padding-top: 24px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  font-size: 15px; color: var(--testo);
}
.alloro--piede-sx { width: 100px; left: -54px; bottom: -30px; opacity: .6; }
.alloro--piede-dx { width: 100px; right: -54px; bottom: -30px; opacity: .6; }
.piede__corpo { position: relative; z-index: 1; display: grid; gap: 14px; }
.piede__riga { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; }
.piede__riga--alto { padding-bottom: 12px; border-bottom: 1px solid var(--linea); }
.piede__marchio { font-family: var(--stretto); font-weight: 500; font-size: 15px; letter-spacing: .2em; text-transform: uppercase; color: var(--crema); }
.piede__menu { display: flex; flex-wrap: wrap; gap: 0 22px; }
.piede__menu a, .piede__link-legali a, .piede__social a, .piede__info a {
  text-decoration: none; color: var(--crema);
  display: inline-flex; align-items: center; min-height: 32px;
}
.piede__info { display: grid; gap: 0; color: var(--testo); }
.piede__info p { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; min-height: 32px; }
.piede__info p > span { color: var(--sabbia); }
.piede__info .piede__social { column-gap: 18px; }
.piede__riga--basso { padding-top: 12px; border-top: 1px solid var(--linea); font-size: 14px; }
.piede__legale { color: var(--sabbia); font-size: 13px; }
.piede__link-legali { display: flex; align-items: center; gap: 10px; }
.credit { font-size: .82rem; opacity: .7; }
.credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.piede__scritta { position: relative; z-index: 0; margin-top: 6px; height: 58px; overflow: hidden; }
.piede__scritta img {
  width: min(100%, 1040px); margin-inline: auto;
  filter: brightness(.55) saturate(.8) contrast(1.05);
  opacity: .85;
}
@media (hover: hover) and (pointer: fine) {
  .piede a:hover, .contatti__recapiti a:hover { color: var(--oro); }
  .menu__voci a:hover { color: var(--oro); }
}

/* ---------- pagine interne: legali e 404 ---------- */
.pagina {
  position: relative; isolation: isolate;
  padding-top: calc(var(--testata) + env(safe-area-inset-top, 0px) + 40px);
  padding-bottom: 64px;
  background:
    radial-gradient(50% 40% at 85% 0%, rgba(121, 98, 64, .3), transparent 70%),
    var(--nero);
}
.legale { max-width: 760px; font-size: 16.5px; line-height: 1.6; color: var(--testo); }
.legale h1 {
  width: calc(100% / var(--comp)); transform: scaleX(var(--comp)); transform-origin: 0 50%;
  font-family: var(--serif); font-weight: 900; font-stretch: 62.5%; text-transform: uppercase;
  font-size: 52px; line-height: .95; margin-bottom: 10px;
  background-image: var(--sfum-crema); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.legale h1 + p { color: var(--sabbia); font-size: 14px; margin-bottom: 18px; }
.legale h2 {
  width: calc(100% / var(--comp)); transform: scaleX(var(--comp)); transform-origin: 0 50%;
  font-family: var(--serif); font-weight: 900; font-stretch: 62.5%;
  font-size: 30px; line-height: 1.1; margin: 32px 0 10px; color: var(--oro);
}
.legale p, .legale ul, .legale table { margin-bottom: 12px; }
.legale ul { padding-left: 1.2em; }
.legale li { margin-bottom: 6px; }
.legale li::marker { color: var(--oro-pieno); }
.legale a { color: var(--oro); text-underline-offset: 3px; word-break: break-word; }
.legale table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 14.5px; max-width: 100%; }
.legale th, .legale td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--linea-tenue); }
.legale th { font-family: var(--stretto); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--crema); border-bottom-color: var(--linea); }
.non-trovata { display: grid; gap: 16px; justify-items: start; padding: 24px 0 40px; }
.non-trovata__titolo { font-size: 66px; width: 100%; }
.non-trovata__testo { max-width: 560px; font-size: 18px; }
.non-trovata__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 8px; }

/* ==========================================================================
   Tablet (da 720 px)
   ========================================================================== */
@media (min-width: 720px) {
  :root { --gutter: 32px; }
  .hero__foto { height: 56svh; max-height: 600px; }
  .hero__titolo { font-size: 64px; }
  .hero__azioni { flex-direction: row; flex-wrap: wrap; }
  .hero__azioni .btn { width: auto; min-width: 230px; }
  .mondo__titolo { font-size: 62px; }
  .premi__titolo { font-size: 84px; }
  .premi__elenco { grid-auto-flow: row; grid-template-columns: 1fr 1.2fr; grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding: 46px 0 0; gap: 34px; }
  .premio__anno { font-size: 110px; top: -54px; }
  .legame__titolo { font-size: 62px; }
  .garanzie__elenco { grid-template-columns: repeat(4, 1fr); }
  .garanzie__elenco li { justify-content: center; }
  .servizi__titolo { font-size: 92px; }
  .riga { grid-template-columns: 56px 250px minmax(0, 1fr) 52px; grid-template-areas: "num nome testo icona"; column-gap: 20px; }
  .riga__icona { width: 50px; }
  .contatti__titolo { font-size: 76px; }
  .contatti__cerchio { width: 140px; }
  .legale h1 { font-size: 68px; }
  .non-trovata__titolo { font-size: 96px; }
}

/* ==========================================================================
   Computer (da 1080 px): l'impaginazione del design
   ========================================================================== */
@media (min-width: 1080px) {
  :root { --gutter: 40px; --testata: 66px; }

  /* testata */
  .testata__barra { gap: 0; }
  .marchio { margin-right: 0; gap: 18px; align-self: flex-start; align-items: flex-start; padding-top: 4px; }
  .marchio__logo { width: 108px; }
  .marchio__nome { font-size: 40px; margin-top: 8px; letter-spacing: .035em; }
  .hamburger { display: none; }
  .menu { display: flex; align-items: center; flex: 1; margin-left: 48px; }
  .menu__voci { display: flex; gap: 38px; margin-right: auto; }
  .menu__voci a { font-size: 16.5px; display: inline-flex; align-items: center; min-height: 44px; position: relative; }
  .menu__voci a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--oro);
    transform: scaleX(0); transform-origin: left; transition: transform 260ms var(--ease-out);
  }
  .menu__cta { min-height: 40px; padding: 0 22px; font-size: 15.5px; }

  /* hero */
  .hero { min-height: clamp(540px, 39vw, 640px); height: auto; padding-top: var(--testata); }
  .hero__foto {
    position: absolute; z-index: -2; top: 0; right: 0; bottom: 0; width: 52%;
    margin: 0; height: auto; min-height: 0; max-height: none;
  }
  .hero__foto img {
    object-position: 50% 80%;   /* testa sotto la testata, prato sotto le zampe */
    filter: brightness(.5) contrast(1.25) saturate(1.2) sepia(.55);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .75) 10%, #000 22%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .75) 10%, #000 22%);
  }
  .hero__luce {
    background:
      radial-gradient(28% 40% at 62% 30%, rgba(250, 209, 136, .28), transparent 70%),
      radial-gradient(40% 40% at 70% 92%, rgba(221, 165, 67, .16), transparent 75%),
      radial-gradient(62% 80% at 66% 46%, transparent 52%, rgba(6, 6, 5, .5) 100%),
      radial-gradient(30% 45% at 100% 0%, rgba(6, 6, 5, .7), transparent 80%),
      linear-gradient(180deg, rgba(6, 6, 5, .9) 0%, rgba(6, 6, 5, .5) 14%, transparent 26%, transparent 82%, rgba(6, 6, 5, .45) 100%);
  }
  .hero__corpo { margin-top: 0; padding-top: clamp(30px, 3.1vw, 46px); gap: 0; }
  .hero__corpo .occhiello { margin-bottom: 4px; padding-left: 0; }
  .hero__corpo .occhiello::after { max-width: 230px; }
  .hero__titolo { font-size: clamp(48px, 4vw, 64px); margin-top: 4px; max-width: 700px; }
  .hero__sotto { font-size: 19px; margin-top: 12px; }
  .hero__fatto { font-size: 16.5px; margin-top: 6px; }
  .hero__azioni { margin-top: 12px; gap: 16px; }
  .hero__azioni .btn { min-width: 226px; min-height: 46px; }
  .hero__piede { padding-top: 8px; padding-bottom: 14px; font-size: 14px; }

  /* 02 · mondo */
  .mondo { min-height: clamp(136px, 10.2vw, 165px); display: flex; align-items: center; }
  .mondo__foto {
    position: absolute; inset: 0 auto 0 0; width: 40%; height: auto; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
  }
  .mondo__foto img {
    -webkit-mask-image: none; mask-image: none;
    object-position: 20% 21%;   /* l'occhio in primo piano, come nel design */
    transform: scale(1.7); transform-origin: 30% 30%;
  }

  .mondo__corpo {
    margin-top: 0; padding-top: 10px; padding-bottom: 12px;
    grid-template-columns: minmax(0, 1fr) 240px; align-items: center; column-gap: 40px;
    padding-left: max(var(--gutter), calc(38vw + 10px - (100vw - min(100vw, var(--largh) + 2 * var(--gutter))) / 2));
  }
  .mondo__titolo { font-size: clamp(46px, 3.95vw, 62px); }
  .mondo__lato { font-size: 15px; }

  /* 03 · premi */
  .premi { padding: 14px 0 16px; }
  .alloro--premi-sx { width: 170px; left: 1%; top: 70px; opacity: .7; }
  .alloro--premi-dx { width: 150px; right: .5%; top: 34px; opacity: .85; }
  .premi__corpo {
    grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) minmax(0, 1.3fr);
    grid-template-areas: "testa sx dx" "link sx dx";
    grid-template-rows: auto 1fr;
    column-gap: 64px; row-gap: 10px;
  }
  .premi__testa { grid-area: testa; }
  .premi__titolo { font-size: clamp(66px, 5.6vw, 88px); }
  .premi__elenco { display: contents; }
  .premio--sx { grid-area: sx; padding-top: 34px; }
  .premio--dx { grid-area: dx; padding-top: 42px; }
  .premio__anno { font-size: clamp(110px, 9.7vw, 150px); top: -34px; right: -84px; }
  .premio--dx .premio__anno { right: -52px; top: -30px; }
  .premio__alloro { display: block; position: absolute; width: 104px; right: -88px; top: 60px; opacity: .8; }
  .premio--sx .premio__foto img { aspect-ratio: 1.5 / 1; }
  .premio--dx .premio__foto img { aspect-ratio: 2 / 1; }
  .premio__titolo { font-size: 32px; }
  .premi__link { grid-area: link; align-self: end; justify-self: start; }

  /* 04 · legame */
  .legame { min-height: clamp(240px, 17.4vw, 290px); display: flex; align-items: center; }
  .legame__foto { position: absolute; z-index: -1; inset: 0 0 0 auto; width: 64%; height: auto; }
  .legame__foto img {
    object-position: 50% 58%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .7) 16%, #000 34%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .7) 16%, #000 34%);
  }
  .legame__corpo { margin-top: 0; padding-top: 12px; padding-bottom: 12px; gap: 8px; }
  .legame__titolo { font-size: clamp(44px, 3.7vw, 58px); max-width: 560px; }
  .legame__sotto { font-size: 18px; }
  .legame .btn { margin-top: 6px; min-height: 46px; }

  /* garanzie */
  .garanzie__elenco { padding-top: 2px; padding-bottom: 2px; }
  .garanzie__elenco li { min-height: 50px; font-size: 17px; position: relative; }
  .garanzie__elenco li + li::before {
    content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 26px; transform: translateY(-50%);
    background: var(--oro-pieno); opacity: .8;
  }

  /* 05 · servizi */
  .servizi { padding: 20px 0 22px; }
  .alloro--bordo-sx, .alloro--bordo-dx, .alloro--contatti-sx { display: block; }
  .alloro--bordo-sx { width: 150px; left: -64px; top: 24px; opacity: .85; }
  .alloro--bordo-dx { width: 150px; right: -64px; top: 24px; opacity: .85; }
  .servizi__foto { width: 46%; height: 100%; opacity: 1; }
  .servizi__foto img {
    object-position: 80% 30%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
  }
  .servizi__corpo { gap: 4px; }
  .servizi__titolo { font-size: clamp(70px, 6.3vw, 98px); }
  .righe { margin-top: 0; max-width: 770px; }
  .riga { grid-template-columns: 86px 260px minmax(0, 1fr) 52px; padding: 8px 0; }
  .riga__num { font-size: 34px; align-self: center; }
  .riga__nome { font-size: 50px; }
  .riga__testo { font-size: 17px; }

  /* 06 · contatti */
  .contatti { padding: 18px 0 22px; }
  .alloro--contatti-sx { width: 150px; left: -40px; top: -14px; opacity: .85; }
  .alloro--contatti-dx { width: 170px; right: -30px; top: -20px; bottom: auto; opacity: .9; }
  .contatti__corpo {
    grid-template-columns: minmax(0, 1fr) auto minmax(240px, 300px); grid-template-areas: "testa cerchio lato";
    column-gap: 48px;
  }
  .contatti__titolo { font-size: clamp(58px, 5.2vw, 80px); }
  .contatti__cerchio { width: 162px; }
  .contatti__parliamone { font-size: 48px; }
  .contatti__luogo { font-size: 19px; }

  /* piede */
  .piede { padding-top: 14px; }
  .piede__corpo { gap: 8px; }
  .piede__riga--alto { padding-bottom: 6px; }
  .piede__info { grid-auto-flow: column; justify-content: space-between; align-items: center; gap: 0 24px; font-size: 14px; }
  .piede__riga--basso { padding-top: 8px; }
  .piede__scritta { margin-top: 0; height: 112px; }
  .piede__scritta img { width: min(66%, 980px); }

  /* pagine interne */
  .pagina { padding-top: calc(var(--testata) + 90px); padding-bottom: 80px; }
}

@media (min-width: 1080px) and (hover: hover) and (pointer: fine) {
  .menu__voci a:hover::after { transform: scaleX(1); }
}


/* ==========================================================================
   Step 5-bis · il sito vivo (20/10/2026)
   Come si muove: regole di Emil Kowalski (Animazioni/). Solo transform e opacity
   (con le proprietà translate, scale e rotate, che si sommano ai transform già usati
   dall'impaginazione), curve --ease-out e --ease-in-out, entrate 600-900 ms,
   pulsanti 100-160 ms, uscite più veloci delle entrate. Niente sposta l'impaginazione.
   ========================================================================== */

/* ---------- 1 · la prima schermata entra (CSS, senza aspettare il JS) ---------- */
@keyframes sale {
  from { opacity: 0; translate: 0 34px; }
  to { opacity: 1; translate: none; }
}
@keyframes linea {
  from { opacity: 0; scale: .2 1; }
  to { opacity: 1; scale: none; }
}
@keyframes posa {            /* la foto c'è da subito: si assesta, non compare */
  from { scale: 1.07; }
  to { scale: none; }
}
@keyframes luce-accende {
  from { opacity: .35; }
  to { opacity: 1; }
}
@keyframes luce-respira {    /* il controluce oro che passa fra gli alberi */
  from { translate: -6% 2%; scale: 1; opacity: .75; }
  to { translate: 7% -3%; scale: 1.18; opacity: 1; }
}
.hero__foto img { animation: posa 1800ms var(--ease-out) both; }
.hero__luce { animation: luce-accende 1400ms ease both; }
.hero__luce::after {
  content: ""; position: absolute; left: 44%; top: -8%; width: 48%; height: 70%;
  background: radial-gradient(closest-side, rgba(250, 209, 136, .22), rgba(221, 165, 67, .08) 55%, transparent);
  animation: luce-respira 11s var(--ease-in-out) 1.2s infinite alternate both;
  pointer-events: none;
}
.hero__corpo > .occhiello { animation: sale 700ms var(--ease-out) 80ms both; }
.hero__corpo > .occhiello::after, .hero__corpo .occhiello__trattino { transform-origin: 0 50%; animation: linea 900ms var(--ease-out) 260ms both; }
.hero__riga1 { animation: sale 850ms var(--ease-out) 140ms both; }
.hero__riga2 { animation: sale 850ms var(--ease-out) 240ms both; }
.hero__sotto { animation: sale 750ms var(--ease-out) 380ms both; }
.hero__fatto { animation: sale 750ms var(--ease-out) 430ms both; }
.hero__azioni > .btn { animation: sale 700ms var(--ease-out) 470ms both; }
.hero__azioni > .btn + .btn { animation-delay: 540ms; }
.hero__piede { animation: sale 700ms var(--ease-out) 640ms both; }

/* ---------- 2 · le sezioni arrivano mentre si scorre (.reveal → .in) ---------- */
html.js .reveal { opacity: 0; translate: 0 32px; }
html.js .reveal.in {
  --ritardo: calc(var(--i, 0) * 70ms);
  opacity: 1; translate: none;
  /* l'entrata ha il suo ritardo; pressione e hover dei pulsanti restano immediati */
  transition: opacity 700ms var(--ease-out) var(--ritardo), translate 800ms var(--ease-out) var(--ritardo),
    transform 140ms var(--ease-out), box-shadow 220ms ease, background-color 220ms ease, border-color 220ms ease, color 220ms ease;
}
/* l'occhio del Dobermann si apre da sinistra */
html.js .reveal--svela { opacity: 1; translate: none; clip-path: inset(0 100% 0 0); }
html.js .reveal--svela.in { clip-path: inset(0 0 0 0); transition: clip-path 1100ms var(--ease-in-out) 120ms; }
/* il muso entra di lato (la sezione ha overflow: hidden) */
html.js .reveal--lato { translate: 48px 0; }
/* il cerchio d'oro arriva ruotando appena */
html.js .reveal--cerchio { scale: .9; rotate: -24deg; }
html.js .reveal--cerchio.in { scale: none; rotate: none; transition: opacity 700ms var(--ease-out) var(--ritardo), translate 800ms var(--ease-out) var(--ritardo), scale 900ms var(--ease-out) var(--ritardo), rotate 1000ms var(--ease-out) var(--ritardo), transform 160ms var(--ease-out); }
/* gli allori si aprono, poi ondeggiano piano */
html.js .reveal--alloro { translate: none; scale: .92; rotate: -7deg; }
html.js .reveal--alloro.in { scale: none; rotate: none; transition: opacity 900ms ease var(--ritardo), scale 1100ms var(--ease-out) var(--ritardo), rotate 1200ms var(--ease-out) var(--ritardo); }
@keyframes ondeggia { from { rotate: 0deg; } to { rotate: 2.5deg; } }
.alloro--premi-sx, .premio__alloro, .alloro--contatti-sx { transform-origin: 70% 95%; }
.alloro--premi-dx, .alloro--contatti-dx { transform-origin: 30% 95%; }
html.js [data-ondeggia].in { animation: ondeggia 6.5s var(--ease-in-out) 1.4s infinite alternate; }
.premio__alloro { animation-delay: 2.1s !important; }
/* foto che si assesta quando la sezione entra */
.legame__foto img { transition: scale 1600ms var(--ease-out); }
html.js .legame:not(.in) .legame__foto img { scale: 1.06; }
.mondo__foto img { transition: scale 1600ms var(--ease-out) 120ms; }
html.js .mondo__foto:not(.in) img { scale: 1.08; }

/* salvagente: se lo script non parte, dopo 3 s si vede tutto */
@keyframes salvagente { to { opacity: 1; translate: none; scale: none; rotate: none; clip-path: inset(0 0 0 0); } }
html.js:not(.reveal-pronto) .reveal { animation: salvagente 1ms linear 3s forwards; }

/* ---------- 3 · l'intestazione cambia scorrendo ---------- */
@media (min-width: 1080px) {
  .marchio__nome { transition: translate 320ms var(--ease-out); }
  .testata.scorsa .marchio__logo { transform: scale(.56); }
  .testata.scorsa .marchio__nome { translate: -46px 0; }
}

/* ---------- 4 · tutto risponde al mouse, alla tastiera e al dito ---------- */
.riga { position: relative; transition: transform 140ms var(--ease-out); }
.riga::before {
  content: ""; position: absolute; inset: 0 -14px; z-index: -1; border-radius: 6px;
  background: linear-gradient(90deg, rgba(221, 165, 67, .14), rgba(221, 165, 67, 0) 70%);
  opacity: 0; transition: opacity 220ms ease;
}
.righe > li { position: relative; isolation: isolate; }
.riga:active { transform: scale(.97); opacity: 1; }
.riga:active::before, .riga:focus-visible::before { opacity: 1; }
.riga:active .riga__icona { rotate: 45deg; }
.riga__nome { transition: translate 260ms var(--ease-out); }
.riga__icona { transition: transform 260ms var(--ease-out), rotate 260ms var(--ease-out); }
.link-freccia { transition: border-color 220ms ease, color 220ms ease; }
.premio__foto { overflow: hidden; }
.premio__foto img { transition: scale 700ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .riga:hover::before { opacity: 1; }
  .riga:hover .riga__nome { translate: 10px 0; }
  .riga:hover .riga__icona { transform: none; rotate: 45deg; }
  .link-freccia:hover { border-color: var(--oro-pieno); color: var(--oro); }
  .premio:hover .premio__foto img { scale: 1.06; }
  .marchio:hover .marchio__logo { filter: drop-shadow(0 4px 14px rgba(250, 209, 136, .35)); }
}

/* il menu da telefono: le voci arrivano una dopo l'altra, escono tutte insieme e più in fretta */
@media (max-width: 1079px) {
  .menu__voci li, .menu__cta { opacity: 0; translate: 0 18px; transition: opacity 150ms ease, translate 150ms var(--ease-out); }
  html.menu-aperto .menu__voci li, html.menu-aperto .menu__cta { opacity: 1; translate: none; transition: opacity 420ms var(--ease-out), translate 480ms var(--ease-out); }
  html.menu-aperto .menu__voci li:nth-child(2) { transition-delay: 50ms; }
  html.menu-aperto .menu__voci li:nth-child(3) { transition-delay: 100ms; }
  html.menu-aperto .menu__voci li:nth-child(4) { transition-delay: 150ms; }
  html.menu-aperto .menu__voci li:nth-child(5) { transition-delay: 200ms; }
  html.menu-aperto .menu__voci li:nth-child(6) { transition-delay: 250ms; }
  html.menu-aperto .menu__voci li:nth-child(7) { transition-delay: 300ms; }
  html.menu-aperto .menu__cta { transition-delay: 220ms; }
}

/* ---------- 5 · i premi scorrono col dito (telefono) ---------- */
.premi__barra { display: none; }
@media (max-width: 719px) {
  .premi__elenco { scroll-behavior: smooth; }
  .premi__barra {
    display: block; position: relative; height: 2px; margin-top: -6px;
    background: var(--linea-tenue); border-radius: 2px; overflow: hidden;
  }
  .premi__barra span {
    position: absolute; top: 0; bottom: 0; left: 0; width: 50%;
    background: var(--oro-pieno); border-radius: 2px;
  }
}

/* ---------- 6 · la firma d'oro in fondo: un riflesso che la attraversa ---------- */
.piede__scritta-box { position: relative; width: min(100%, 1040px); margin-inline: auto; }
.piede__scritta .piede__scritta-box img { width: 100%; }
.piede__luccichio {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask: url("/assets/img/scritta-prisconte-oro-900.webp") 0 0 / 100% 100% no-repeat;
  mask: url("/assets/img/scritta-prisconte-oro-900.webp") 0 0 / 100% 100% no-repeat;
}
.piede__luccichio span {
  position: absolute; top: 0; bottom: 0; left: 0; width: 26%;
  background: linear-gradient(100deg, rgba(253, 225, 138, 0), rgba(253, 225, 138, .55) 50%, rgba(253, 225, 138, 0));
  translate: -120% 0;
  animation: riflesso 7s linear 2s infinite;
}
@keyframes riflesso {
  0% { translate: -120% 0; }
  45%, 100% { translate: 420% 0; }
}
@media (min-width: 1080px) {
  .piede__scritta .piede__scritta-box { width: min(66%, 980px); }
}

/* ==========================================================================
   Meno movimento: restano dissolvenze e colori, spariscono gli spostamenti
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @keyframes sale { from { opacity: 0; } to { opacity: 1; } }
  @keyframes linea { from { opacity: 0; } to { opacity: 1; } }
  .hero__foto img { animation: none; }
  .hero__luce::after { animation: none; opacity: .85; }
  html.js .reveal, html.js .reveal--lato, html.js .reveal--cerchio, html.js .reveal--alloro { translate: none; scale: none; rotate: none; }
  html.js .reveal--svela { clip-path: none; opacity: 0; }
  html.js .reveal--svela.in { opacity: 1; transition: opacity 700ms ease; }
  html.js .legame:not(.in) .legame__foto img, html.js .mondo__foto:not(.in) img { scale: none; }
  html.js [data-ondeggia].in { animation: none; }
  .piede__luccichio span { animation: none; opacity: 0; }
  .menu__voci li, .menu__cta { translate: none !important; }
  .riga:hover .riga__nome { translate: none; }
  .premi__elenco { scroll-behavior: auto; }
}

/* ==========================================================================
   Step 6 · il copy della home (20/10/2026)
   Le sezioni nuove del copy usano le forme del design: la fascia del «legame»
   (cuccioli), le righe numerate dei servizi (passaggi, servizi, domande), la
   striscia delle garanzie (consegna), le cornici d'oro dei premi (cani e campioni)
   e la fascia del «mondo» (storia).
   ========================================================================== */

/* testo che si legge (più paragrafi) e nomi dei cani che portano alla scheda */
.testo { display: grid; gap: 10px; font-size: 17px; line-height: 1.5; color: var(--testo); max-width: 560px; }
.nome-cane, .cani__nome, .risultato__cane a {
  color: var(--oro); text-decoration: none;
  background-image: linear-gradient(var(--linea), var(--linea)); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: color 200ms ease;
}
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .nome-cane:hover, .cani__nome:hover, .risultato__cane a:hover { color: var(--oro-chiaro); }
}

/* ---------- intestazione con le 7 voci della mappa ---------- */
@media (min-width: 1080px) {
  .menu { margin-left: 28px; }
  .menu__voci { gap: 20px; }
  .menu__voci a { font-size: 15px; white-space: nowrap; }
  .menu__cta { padding: 0 16px; font-size: 14.5px; white-space: nowrap; }
  .marchio__nome { font-size: 32px; margin-top: 12px; }
}
@media (min-width: 1080px) and (max-width: 1599px) {
  .marchio__nome { display: none; }
  .menu { margin-left: 36px; }
  .menu__voci { gap: 22px; }
  .menu__voci a { font-size: 15.5px; }
}

/* ---------- 02 · cuccioli (fascia del legame, foto più alta) ---------- */
.legame--cuccioli .legame__foto img { object-position: 50% 45%; }
.legame--cuccioli .btn { margin-top: 6px; }
@media (min-width: 1080px) {
  .legame--cuccioli { min-height: 460px; }
  .legame--cuccioli .legame__foto { width: 48%; }
  .legame--cuccioli .legame__corpo { padding-top: 40px; padding-bottom: 44px; gap: 14px; }
  .legame--cuccioli .legame__titolo { max-width: 600px; }
}

/* ---------- 03 · come prenotare: righe dei passaggi ---------- */
.riga--passo { grid-template-columns: 34px minmax(0, 1fr) 40px; grid-template-areas: "num testo icona"; }
.riga--passo .riga__testo { max-width: none; font-size: 17px; line-height: 1.45; }
.riga--passo .riga__testo a { color: var(--oro); text-underline-offset: 3px; }
.riga--passo .riga__icona { width: 36px; filter: none; }
.riga--passo:active { transform: none; }
.servizi__cta { justify-self: start; margin-top: 14px; }
@media (min-width: 720px) {
  .riga--passo { grid-template-columns: 56px minmax(0, 1fr) 44px; grid-template-areas: "num testo icona"; }
}
@media (min-width: 1080px) {
  .servizi--passi { padding: 36px 0 40px; }
  .servizi--passi .righe { max-width: 720px; }
  .riga--passo { grid-template-columns: 86px minmax(0, 1fr) 44px; padding: 12px 0; }
  .riga--passo .riga__testo { font-size: 19px; }
}

/* ---------- 04 · consegna: titolo, poi la striscia d'oro ---------- */
.garanzie--consegna { padding-top: 34px; background: var(--nero); }
.garanzie__testa { display: grid; gap: 14px; padding-bottom: 22px; }
.garanzie__titolo { font-size: 44px; }
.garanzie__genitori { font-size: 17px; line-height: 1.5; color: var(--testo); max-width: 460px; }
.garanzie__striscia {
  background: linear-gradient(180deg, rgba(121, 98, 64, .18), rgba(27, 22, 10, 0)), var(--nero-3);
  border-top: 1px solid var(--linea);
}
.garanzie__riga { display: grid; gap: 4px; padding-top: 10px; padding-bottom: 10px; }
.garanzie__intro { font-size: 16px; color: var(--sabbia); padding-top: 6px; }
.garanzie--consegna .garanzie__elenco { grid-template-columns: 1fr; padding: 0; }
.garanzie--consegna .garanzie__elenco li { min-height: 50px; }
@media (min-width: 720px) {
  .garanzie__testa { grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); align-items: end; column-gap: 48px; }
  .garanzie__titolo { font-size: 62px; }
  .garanzie__riga { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 32px; }
  .garanzie__intro { padding-top: 0; }
  .garanzie--consegna .garanzie__elenco { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1080px) {
  .garanzie--consegna { padding-top: 40px; }
  .garanzie__titolo { font-size: clamp(58px, 5vw, 76px); }
  .garanzie__intro { font-size: 17px; }
  .garanzie--consegna .garanzie__elenco li { justify-content: flex-start; padding-left: 28px; }
}

/* ---------- 05 · i nostri cani (cornice d'oro dei premi + elenco) ---------- */
.premi--cani { padding-bottom: 40px; }
.cani__corpo { position: relative; display: grid; gap: 26px; }
.cani__foto { margin: 0; padding-top: 34px; }
.cani__foto .premio__foto img { aspect-ratio: 3 / 2; object-position: 45% 50%; }
.cani__foto .premio__anno { right: 6px; }
.cani__lista { display: grid; gap: 18px; justify-items: start; }
.cani__elenco { display: grid; gap: 14px; }
.cani__elenco li { display: grid; gap: 2px; }
.cani__nome {
  font-family: var(--serif); font-weight: 900; font-stretch: 62.5%; text-transform: uppercase;
  font-size: 34px; line-height: 1; background-image: none; justify-self: start;
}
.cani__titolo { font-size: 16px; color: var(--testo); }
.cani__scheda { font-size: 16px; color: var(--sabbia); max-width: 420px; }
@media (min-width: 720px) {
  .cani__corpo { grid-template-columns: 1fr 1fr; grid-template-areas: "testa testa" "sx lista"; }
  .cani__corpo .premi__testa { grid-area: testa; }
  .cani__corpo .cani__foto { grid-area: sx; }
  .cani__lista { grid-area: lista; }
}
@media (min-width: 1080px) {
  .premi--cani { padding: 26px 0 44px; }
  .cani__corpo { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) minmax(0, .9fr); grid-template-areas: "testa sx lista"; column-gap: 56px; align-items: start; }
  .premi--cani .premi__titolo, #campioni .premi__titolo { font-size: clamp(48px, 4.1vw, 62px); }
  #campioni .premi__corpo { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) minmax(0, 1.3fr); }
  .cani__foto { padding-top: 44px; }
  .cani__lista { padding-top: 40px; }
  .cani__nome { font-size: 40px; }
}

/* ---------- 06 · campioni: gli anni a contorno d'oro, poi i risultati ---------- */
.campioni { display: grid; gap: 28px; padding-top: 30px; }
.campioni__elenco { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 18px; }
.campione { position: relative; display: grid; gap: 4px; padding-top: 4px; }
.campione__anno {
  font-family: var(--serif); font-weight: 900; font-stretch: 62.5%;
  font-size: 64px; line-height: .9;
  color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.3px var(--oro-pieno);
  transform: scaleX(var(--comp)); transform-origin: 0 50%;
}
.campione p { font-size: 16px; line-height: 1.4; color: var(--testo); }
.campione .nome-cane {
  font-family: var(--serif); font-weight: 900; font-stretch: 62.5%; text-transform: uppercase;
  font-size: 1.5em; line-height: 1; background-image: none;
}
.campioni__testo { display: grid; gap: 10px; align-content: start; font-size: 17px; line-height: 1.5; color: var(--testo); max-width: 720px; }
.risultati {
  display: grid; gap: 14px; justify-items: start;
  padding: 22px 0 0; border-top: 1px solid var(--linea);
}
.risultati__titolo {
  font-family: var(--stretto); font-weight: 600; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--oro);
}
.risultati__elenco { display: grid; gap: 0; width: 100%; }
.risultato {
  display: grid; grid-template-columns: 1fr; gap: 2px;
  padding: 12px 0; border-bottom: 1px solid var(--linea-tenue);
}
.risultato__data { font-family: var(--stretto); font-weight: 500; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--sabbia); }
.risultato__evento { font-size: 15px; color: var(--testo); }
.risultato__cane { font-size: 17px; font-weight: 600; }
.risultato__esito { font-size: 16px; color: var(--crema); }
@media (min-width: 720px) {
  .campioni__elenco { grid-template-columns: repeat(4, 1fr); }
  .campione__anno { font-size: 84px; }
  .risultato { grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); align-items: baseline; column-gap: 20px; }
}
@media (min-width: 1080px) {
  .campioni { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 64px; padding-top: 36px; padding-bottom: 8px; }
  .campioni__elenco { grid-column: 1 / -1; }
  .campione__anno { font-size: 104px; }
  .risultati { padding-top: 0; border-top: 0; }
}

/* ---------- 07 · storia (fascia del mondo, più testo a lato) ---------- */
.mondo--storia .mondo__lato { gap: 10px; }
.mondo--storia .mondo__lato p { max-width: 420px; }
@media (min-width: 1080px) {
  .mondo--storia { min-height: 300px; }
  .mondo--storia .mondo__corpo { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); padding-top: 34px; padding-bottom: 34px; }
  .mondo--storia .mondo__titolo { font-size: clamp(40px, 3.3vw, 52px); }
  .mondo--storia .mondo__corpo { padding-left: max(var(--gutter), calc(40vw + 10px - (100vw - min(100vw, var(--largh) + 2 * var(--gutter))) / 2)); }
  .mondo--storia .mondo__lato { font-size: 16px; }
}

/* ---------- 08 · addestramento e pensione: la riga porta alla pagina ---------- */
.riga--servizio { grid-template-columns: 34px minmax(0, 1fr) 46px; grid-template-areas: "num nome icona" "num testo testo" "num vai vai"; }
.riga--servizio .riga__testo { max-width: none; }
.riga__vai {
  grid-area: vai; justify-self: start; margin-top: 4px;
  font-weight: 500; font-size: 15px; color: var(--oro); border-bottom: 1px solid var(--linea);
}
.servizi__foto--manica img { object-position: 50% 55%; }
@media (min-width: 720px) {
  .riga--servizio { grid-template-columns: 56px 220px minmax(0, 1fr) 52px; grid-template-areas: "num nome testo icona" "num nome vai icona"; }
}
@media (min-width: 1080px) {
  .servizi:not(.servizi--passi) { padding: 32px 0 36px; }
  .servizi__foto--manica { width: 40%; }
  .servizi__foto--manica img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .8) 22%, #000 40%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .8) 22%, #000 40%);
    filter: brightness(.85) contrast(1.08) sepia(.2);
  }
  .riga--servizio { grid-template-columns: 86px 280px minmax(0, 1fr) 52px; padding: 14px 0; }
  .servizi:not(.servizi--passi) .servizi__titolo { font-size: clamp(54px, 4.6vw, 70px); max-width: 860px; }
  .servizi--passi .servizi__titolo { font-size: clamp(56px, 5vw, 76px); }
  .riga--servizio .riga__testo { max-width: 360px; font-size: 16.5px; }
  .servizi:not(.servizi--passi) .righe { max-width: 820px; }
}
@media (hover: hover) and (pointer: fine) {
  .riga--servizio:hover .riga__vai { border-color: var(--oro); }
}

/* ---------- 09 · domande frequenti (fisarmonica, una alla volta) ---------- */
.domande {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 40px 0 44px;
  background: radial-gradient(45% 80% at 80% 30%, rgba(69, 50, 28, .35), transparent 75%), var(--nero);
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}
.domande__corpo { display: grid; gap: 20px; }
.domande__testa { display: grid; gap: 10px; }
.domande__titolo { font-size: 52px; }
.faq { border-top: 1px solid var(--linea); }
.faq__voce { border-bottom: 1px solid var(--linea); }
.faq__domanda {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 40px; grid-template-areas: "num testo icona"; align-items: center; column-gap: 12px;
  min-height: 60px; padding: 12px 0; cursor: pointer; list-style: none;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.faq__domanda::-webkit-details-marker { display: none; }
.faq__domanda .riga__num { font-size: 24px; }
.faq__testo { grid-area: testo; font-weight: 600; font-size: 17px; line-height: 1.35; color: var(--crema); }
.faq__domanda .riga__icona { width: 36px; transition: rotate 260ms var(--ease-out); }
.faq__voce[open] .faq__domanda .riga__icona { rotate: 135deg; }
.faq__domanda:active { opacity: .85; }
.faq__risposta { padding: 0 52px 18px 46px; font-size: 16px; line-height: 1.5; color: var(--testo); }
.faq__risposta a { color: var(--oro); }
.faq__voce[open] .faq__risposta { animation: sale 360ms var(--ease-out) both; }
@media (min-width: 720px) {
  .domande__titolo { font-size: 72px; }
  .faq__domanda { grid-template-columns: 56px minmax(0, 1fr) 44px; column-gap: 20px; }
  .faq__risposta { padding-left: 76px; }
}
@media (min-width: 1080px) {
  .domande { padding: 40px 0 48px; }
  .domande__corpo { grid-template-columns: minmax(250px, 340px) minmax(0, 1fr); column-gap: 64px; align-items: start; }
  .domande__titolo { font-size: clamp(66px, 5.6vw, 88px); }
  .faq__domanda { grid-template-columns: 70px minmax(0, 1fr) 44px; }
  .faq__testo { font-size: 18.5px; }
  .faq__risposta { padding-left: 90px; font-size: 17px; max-width: 760px; }
}
@media (hover: hover) and (pointer: fine) {
  .faq__domanda:hover .faq__testo { color: var(--oro); }
}

/* ---------- 10 · contatti: i recapiti e i due pulsanti ---------- */
.contatti__recapiti { font-size: 16px; gap: 2px; margin-top: 0; }
.contatti__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 14px; }
.contatti__corpo { row-gap: 22px; }
@media (max-width: 719px) {
  .contatti__corpo { grid-template-areas: "testa testa" "cerchio lato" "azioni azioni"; }
  .contatti__lato, html.js .contatti__lato.reveal { display: contents; opacity: 1; translate: none; }
  .contatti__recapiti { grid-area: lato; font-size: 15px; }
  .contatti__azioni { grid-area: azioni; margin-top: 0; }
  .contatti__azioni .btn { width: 100%; }
  .contatti__cerchio { width: 92px; }
}
/* da telefono e tablet la foto dell'addestramento sta sopra il testo, non sotto il titolo */
@media (max-width: 1079px) {
  .servizi__foto--manica { position: relative; width: auto; height: 260px; opacity: 1; margin: -36px 0 -28px; }
  .servizi__foto--manica img {
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    object-position: 50% 62%;
  }
}
@media (min-width: 1080px) {
  .contatti { padding: 34px 0 40px; }
  .contatti__corpo { grid-template-columns: minmax(0, 1fr) auto minmax(300px, 380px); }
  .contatti__titolo { font-size: clamp(54px, 4.6vw, 72px); }
  .contatti__recapiti { font-size: 17px; }
}

/* ---------- piede: descrizione e 7 voci ---------- */
.piede__marca { display: grid; gap: 4px; }
.piede__descr { font-size: 14px; color: var(--sabbia); }
.piede__menu { gap: 0 18px; }

/* ---------- il pulsante WhatsApp fisso, solo da telefono ---------- */
.whatsapp-fisso { display: none; }
@media (max-width: 719px) {
  .whatsapp-fisso {
    display: inline-flex; position: fixed; z-index: 25;
    left: calc(16px + env(safe-area-inset-left, 0px)); right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 10px 28px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .35);
    translate: 0 calc(100% + 30px); opacity: 0;
    transition: translate 220ms var(--ease-out), opacity 180ms ease, transform 140ms var(--ease-out);
  }
  html.oltre-hero .whatsapp-fisso { translate: none; opacity: 1; transition: translate 420ms var(--ease-out), opacity 300ms ease, transform 140ms var(--ease-out); }
  html.menu-aperto .whatsapp-fisso { translate: 0 calc(100% + 30px); opacity: 0; }
  .piede { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-fisso { translate: none !important; }
  .faq__voce[open] .faq__risposta { animation: none; }
}