/* Agape Articoli Religiosi — step 5 (11/11/2026): la home fedele al design (versione 6), rifinita.
   Colori misurati sul design con confronta-design.py --colori e sui suoi pixel. Caratteri serviti dal sito. */

@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("/assets/fonts/lora-latin-500-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

:root {
  --bianco: #FFFFFF;
  --nebbia: #F9FBFC;
  --carta: #F0F3F5;
  --azzurro: #00B4DC;
  --azzurro-profondo: #0094D0;
  --azzurro-titolo: #0098D4;
  --azzurro-testo: #0074C0;
  --blu-notte: #101828;
  --testo: #4C5058;
  --testo-tenue: #60646C;
  --cielo: #E8F8FC;
  --cielo-chiaro: #F0F8FC;
  --cielo-ovale: #ECF8FC;
  --cielo-scheda: #E0F8FC;
  --cielo-contatti: #E4F8FC;
  --linea: #B0E4F0;
  --bordo-campo: #D0E0E4;

  --contenitore: 1240px;
  --gutter: 16px;
  --sezione: 32px;
  --raggio: 18px;
  --ombra-libro: 0 22px 44px -18px rgba(16, 24, 40, .22), 0 4px 12px rgba(16, 24, 40, .06);
  --curva: cubic-bezier(.23, 1, .32, 1);
}

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

html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
html.menu-aperto { overflow: hidden; }

body {
  margin: 0;
  background: var(--bianco);
  color: var(--testo);
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; color: var(--blu-notte); text-wrap: balance; }
p { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button { font: inherit; color: inherit; }

[id] { scroll-margin-top: 88px; }

:focus-visible { outline: 3px solid var(--azzurro); outline-offset: 3px; border-radius: 6px; }

.contenitore {
  width: 100%;
  max-width: calc(var(--contenitore) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.nascosto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

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

/* ── Pulsanti ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 28px;
  border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 600; font-size: 16px; line-height: 1.2; letter-spacing: .005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .16s var(--curva);
}
.btn:active { transform: scale(.97); }
.btn--pieno {
  color: var(--bianco);
  background: linear-gradient(180deg, var(--azzurro) 0%, var(--azzurro-profondo) 100%);
  box-shadow: 0 10px 22px -12px rgba(0, 148, 208, .75);
}
.btn--linea {
  color: var(--azzurro-testo);
  background: var(--bianco);
  border-color: var(--azzurro);
}
.btn--linea .wa { color: var(--azzurro); }
.btn--grande { min-height: 56px; padding: 0 34px; font-size: 17px; }
.btn--piccolo { min-height: 42px; padding: 0 22px; font-size: 15px; }
.btn--largo { width: 100%; }
.btn__freccia { width: 9px; height: auto; filter: brightness(0) invert(1); }
.wa { width: 22px; height: 22px; flex: none; }

@media (hover: hover) and (pointer: fine) {
  .btn--pieno:hover { box-shadow: 0 14px 28px -12px rgba(0, 148, 208, .9); background: linear-gradient(180deg, var(--azzurro-profondo) 0%, var(--azzurro-profondo) 100%); }
  .btn--linea:hover { background: var(--cielo-chiaro); }
}

/* ── Intestazione ────────────────────────────────────── */
.testata {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .97);
  transition: box-shadow .3s ease;
}
.testata.ombra { box-shadow: 0 8px 24px -16px rgba(16, 24, 40, .35); }
.testata__barra {
  position: relative;
  display: flex; align-items: center;
  height: 68px;
}
.testata__logo { display: block; width: 124px; position: relative; z-index: 65; }
.testata__logo img { width: 100%; }

.testata__apri {
  position: relative; z-index: 70;
  margin-left: auto;
  width: 48px; height: 48px; margin-right: -8px;
  display: grid; place-content: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  touch-action: manipulation;
}
.testata__apri span {
  display: block; width: 26px; height: 2px; border-radius: 2px;
  background: var(--blu-notte);
  transition: transform .3s var(--curva), opacity .2s ease;
}
html.menu-aperto .testata__apri span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
html.menu-aperto .testata__apri span:nth-child(2) { opacity: 0; }
html.menu-aperto .testata__apri span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 60;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  padding: 92px 24px 32px;
  background: var(--bianco);
  overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; opacity: 0; transform: translateY(-10px);
  transition: opacity .25s ease, transform .3s var(--curva), visibility 0s linear .3s;
}
html.menu-aperto .menu {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity .3s ease, transform .4s var(--curva), visibility 0s;
}
.menu__voci a {
  display: block; padding: 16px 2px;
  font-size: 26px; font-weight: 500; color: var(--blu-notte); text-decoration: none;
  border-bottom: 1px solid var(--cielo);
  touch-action: manipulation;
}
.menu__voci a:active { color: var(--azzurro-testo); }
.menu__azione { margin-top: 32px; min-height: 56px; }

.motto {
  margin: 0;
  display: flex; align-items: center; gap: 14px;
  padding-block: 4px 6px;
  font-size: 13px; font-weight: 500; color: var(--azzurro-testo);
  white-space: nowrap;
}
.motto::before, .motto::after { content: ""; flex: 1; height: 1px; background: var(--linea); }

/* ── Hero ────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; isolation: isolate; padding-top: 20px; }
.hero__fondo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero__dentro { display: grid; gap: 8px; }
.occhiello {
  margin: 0 0 14px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blu-notte);
}
.occhiello--azzurro { color: var(--azzurro-testo); font-weight: 600; }
.hero__titolo {
  font-size: clamp(34px, 9vw, 44px);
  font-weight: 400; line-height: 1.08; letter-spacing: -.015em;
  margin-bottom: 18px;
}
.hero__titolo .riga { display: block; }
.azzurro { color: var(--azzurro-titolo); }
.hero__sotto { font-size: 16.5px; line-height: 1.65; max-width: 30em; margin-bottom: 26px; }
.hero__azioni { display: grid; gap: 12px; }
.hero__azioni .btn { width: 100%; }

.vetrina { position: relative; margin: 8px -6px 0; }
.vetrina__scena { width: 100%; height: auto; overflow: visible; }

/* le linee, a schede di cartella */
.schede { position: relative; margin-top: 18px; }
.schede::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--linea); }
.schede__voci {
  display: flex; gap: 4px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none;
  padding: 6px 2px 0;
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
}
.schede__voci::-webkit-scrollbar { display: none; }
.schede__voci { padding-inline-end: 56px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.schede__voci li { flex: none; scroll-snap-align: start; position: relative; }
.schede__voci a {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 22px;
  font-size: 14.5px; font-weight: 600; color: var(--azzurro-testo); text-decoration: none; white-space: nowrap;
  touch-action: manipulation;
}
.schede__voci a::before {
  content: ""; position: absolute; inset: 0 -4px; z-index: -1;
  background: var(--bianco);
  border: 1px solid var(--linea); border-bottom: 0;
  border-radius: 14px 14px 0 0;
  transform: perspective(70px) rotateX(5deg); transform-origin: 50% 100%;
  transition: background-color .25s ease;
}
.schede__voci a[aria-current="true"]::before { background: var(--cielo-scheda); }
.schede__voci a[aria-current="true"] { color: var(--blu-notte); }

/* ── Sezioni ─────────────────────────────────────────── */
.titolo {
  font-size: clamp(28px, 7.4vw, 34px);
  font-weight: 400; line-height: 1.16; letter-spacing: -.012em;
}
.titolo--medio { font-size: clamp(26px, 6.6vw, 30px); }
.trattino { display: block; width: 42px; height: 3px; border-radius: 3px; background: var(--azzurro); }

/* ── Showroom e doppie pagine ────────────────────────── */
.showroom { position: relative; isolation: isolate; background: var(--nebbia); padding: 40px 0 var(--sezione); }
.showroom__testa { display: grid; gap: 20px; margin-bottom: 30px; }
.showroom__sotto { margin: 8px 0 0; font-size: 15.5px; }

.cerca { position: relative; width: 100%; }
.cerca__icona { position: absolute; left: 18px; top: 26px; transform: translateY(-50%); width: 20px; height: 20px; pointer-events: none; }
.cerca__campo {
  width: 100%; height: 52px;
  padding: 0 20px 0 50px;
  border: 1px solid var(--bordo-campo); border-radius: 999px;
  background: var(--bianco); color: var(--blu-notte);
  font: inherit; font-size: 16px;
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cerca__campo::placeholder { color: #808894; }
.cerca__campo:focus { outline: none; border-color: var(--azzurro); box-shadow: 0 0 0 4px rgba(0, 180, 220, .14); }
.cerca__risultati {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30;
  background: var(--bianco);
  border-radius: 18px; padding: 10px;
  box-shadow: 0 24px 60px -18px rgba(16, 24, 40, .3), 0 2px 8px rgba(16, 24, 40, .06);
  max-height: min(70vh, 460px); overflow-y: auto; overscroll-behavior: contain;
}
.cerca__esito { margin: 6px 10px 8px; font-size: 14px; color: var(--testo); }
.cerca__esito a { color: var(--azzurro-testo); font-weight: 600; }
.cerca__elenco li {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px;
  padding: 8px; border-radius: 12px;
}
.cerca__elenco li + li { border-top: 1px solid var(--carta); }
.cerca__elenco img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--carta); }
.cerca__elenco strong { display: block; color: var(--blu-notte); font-size: 15px; line-height: 1.3; }
.cerca__elenco span { display: block; font-size: 13px; color: var(--testo-tenue); }
.cerca__linea { color: var(--testo-tenue); text-underline-offset: 2px; }
.cerca__elenco li > a {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 12px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: var(--azzurro-testo); text-decoration: none;
  border: 1.5px solid var(--azzurro); white-space: nowrap;
  touch-action: manipulation;
}
.cerca__elenco li > a .wa { width: 18px; height: 18px; color: var(--azzurro); }

.libri {
  display: flex; gap: 14px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(-1 * var(--gutter));
  padding: 6px var(--gutter) 30px;
  scroll-padding-inline: var(--gutter);
}
.libri::-webkit-scrollbar { display: none; }
.libro { display: contents; }
.libri .pagina { flex: 0 0 86%; scroll-snap-align: start; scroll-snap-stop: always; align-content: start; }

.pagina {
  position: relative;
  display: grid; gap: 16px; grid-template-rows: auto auto 1fr;
  padding: 24px 18px 18px;
  background: var(--bianco);
  border-radius: 16px;
  box-shadow: var(--ombra-libro);
}
.pagina::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 26px;
  border-radius: 16px 0 0 16px;
  background: linear-gradient(90deg, rgba(16, 24, 40, .07), rgba(16, 24, 40, 0));
  pointer-events: none;
}
.pagina__titolo {
  font-size: 27px; font-weight: 500; line-height: 1.12; letter-spacing: -.01em;
}
.pagina__titolo::after { content: ""; display: block; width: 40px; height: 3px; margin-top: 14px; border-radius: 3px; background: var(--azzurro); }
.pagina__descrizione { margin: 14px 0 12px; font-size: 15.5px; line-height: 1.5; color: #303438; }
.pagina__codice { margin: 0; font-size: 16.5px; font-weight: 700; color: var(--blu-notte); letter-spacing: .01em; }
.pagina__codice--righe span { display: inline-block; margin-right: 18px; }

.pagina__foto img { width: 100%; border-radius: 6px; }
.pagina__foto--libera img { border-radius: 0; }
.pagina__coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: center; }
.bambinelli { display: grid; gap: 4px; justify-items: center; }
.bambinelli__grande { width: 100%; }
.bambinelli__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; align-items: end; }
.bambinelli__fila img { width: 100%; }
.bambinelli__codici { padding-top: 4px; font-size: 11.5px; line-height: 1.35; font-weight: 700; color: var(--blu-notte); text-align: center; letter-spacing: -.01em; }

.miniature { display: flex; gap: 10px; margin-top: 16px; }
.miniatura {
  flex: none; width: 60px; padding: 0;
  border: 2px solid transparent; border-radius: 10px; overflow: hidden;
  background: var(--carta); cursor: pointer;
  touch-action: manipulation;
  transition: border-color .2s ease, transform .16s var(--curva);
}
.miniatura img { width: 100%; height: 56px; object-fit: cover; }
.miniatura[aria-pressed="true"] { border-color: var(--azzurro); }
.miniatura:active { transform: scale(.96); }
.miniature--colonna { margin-top: 0; }
.pagina:has(> .miniature--colonna) { grid-template-columns: minmax(0, 1fr) 64px; column-gap: 12px; }
.pagina:has(> .miniature--colonna) > .pagina__testo, .pagina:has(> .miniature--colonna) > .pagina__piede { grid-column: 1 / -1; }
.pagina > .miniature--colonna { flex-direction: column; align-self: start; }
.miniature--colonna .miniatura { width: 64px; }
.miniature--colonna .miniatura img { height: 84px; }
.miniature--riga { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 0; }
.miniatura--etichetta { width: auto; background: none; border-radius: 10px; }
.miniatura--etichetta img { height: auto; aspect-ratio: 4 / 3; border-radius: 8px; background: var(--carta); }
.miniatura--etichetta span { display: block; padding: 6px 0 2px; font-size: 12px; font-weight: 700; color: var(--blu-notte); text-align: center; white-space: nowrap; letter-spacing: -.01em; }
.miniatura--etichetta[aria-pressed="true"] img { box-shadow: 0 0 0 2px var(--azzurro); }
.miniatura--etichetta[aria-pressed="true"] { border-color: transparent; }

.pagina__piede {
  align-self: end;
  display: flex; align-items: center; justify-content: center; position: relative;
  padding-top: 4px; min-height: 42px;
}
.pagina__numero { position: absolute; bottom: 10px; font-size: 13px; font-weight: 600; color: var(--blu-notte); }
.pagina--sinistra .pagina__numero { left: 0; }
.pagina--destra .pagina__numero { right: 0; }

@media (hover: hover) and (pointer: fine) {
  .miniatura:hover { border-color: var(--linea); }
  .miniatura[aria-pressed="true"]:hover { border-color: var(--azzurro); }
}

/* ── Personalizzati ──────────────────────────────────── */
.personalizzati { padding: var(--sezione) 0; }
.personalizzati__ovale {
  position: relative; text-align: center;
  padding: 40px 18px 36px;
  background: var(--cielo-ovale);
  border-radius: 40px;
  box-shadow: 0 0 0 10px rgba(236, 248, 252, .55);
}
.personalizzati__sotto { margin: 10px auto 0; max-width: 34em; color: var(--blu-notte); font-size: 15.5px; }
.personalizzati__scena { display: grid; gap: 18px; margin: 26px auto 0; max-width: 980px; align-items: end; }
.personalizzati__statue { position: relative; }
.personalizzati__statue img { position: relative; z-index: 2; width: 100%; margin-bottom: -16px; }
.personalizzati__base { position: relative; display: block; height: 44px; margin: 0 -3%; }
.personalizzati__base::before,
.personalizzati__base::after { content: ""; position: absolute; left: 0; right: 0; }
.personalizzati__base::after {
  top: 13px; height: 31px;
  border-radius: 0 0 50% 50% / 0 0 13px 13px;
  background:
    linear-gradient(90deg, rgba(173, 197, 199, .55), rgba(255, 255, 255, .45) 38%, rgba(220, 235, 239, .3) 70%, rgba(173, 197, 199, .65)),
    url("/assets/img/vetrina/marmo.webp") 0 0 / 180px;
  box-shadow: 0 18px 26px -16px rgba(128, 110, 114, .55);
}
.personalizzati__base::before {
  top: 0; height: 26px; z-index: 1;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 45% 40%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .4) 70%, rgba(220, 235, 239, .75)),
    url("/assets/img/vetrina/marmo.webp") 40px 20px / 180px;
  box-shadow: inset 0 0 0 1px #DCEBEF;
}
.personalizzati__magnete { width: 100%; max-width: 210px; margin-inline: auto; justify-self: center; }
.personalizzati__magnete img { width: 100%; filter: drop-shadow(0 14px 18px rgba(16, 24, 40, .16)); }

.passi { display: grid; gap: 14px; margin: 28px auto 24px; max-width: 760px; text-align: left; }
.passo { display: flex; align-items: center; gap: 14px; color: var(--blu-notte); font-size: 15.5px; line-height: 1.35; }
.passo img { width: 38px; height: 38px; object-fit: contain; flex: none; }
.passo br { display: none; }
.personalizzati__azione { width: 100%; }

/* ── Storia ──────────────────────────────────────────── */
.storia { padding: var(--sezione) 0; }
.storia__griglia { display: grid; gap: 20px; }
.storia__info .trattino { margin-top: 2px; }
.storia__luogo { margin: 14px 0 0; font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--blu-notte); }
.storia__marchio { max-width: 420px; }
.storia__marchio img { width: 100%; }
.storia__racconto { border-left: 2px solid var(--linea); padding-left: 20px; }
.storia__racconto p { font-size: 15.5px; }
.storia__racconto .storia__riga { margin-bottom: 2px; }
.storia__racconto .storia__cuore { margin: 0 0 4px; font-size: 22px; font-weight: 600; color: var(--azzurro-titolo); }
.storia__racconto .storia__citazione { margin: 0; font-family: "Lora", Georgia, serif; font-style: italic; font-weight: 500; font-size: 20px; color: var(--blu-notte); }

/* ── Catalogo ────────────────────────────────────────── */
.catalogo { padding: var(--sezione) 0; }
.catalogo__griglia { display: grid; gap: 20px; }
.riquadro { background: var(--cielo); border-radius: 24px; padding: 28px 22px; }
.riquadro__titolo { font-size: 25px; font-weight: 400; line-height: 1.2; margin-bottom: 8px; }
.riquadro p { margin-bottom: 20px; color: var(--blu-notte); }
.riquadro .btn { width: 100%; }
.spedizioni {
  display: flex; align-items: center; gap: 14px;
  margin: 30px auto 0; max-width: 760px;
  font-size: 15px; color: var(--blu-notte);
}
.spedizioni { justify-content: center; }
.spedizioni::before, .spedizioni::after { content: ""; flex: 1; height: 1px; background: var(--linea); min-width: 16px; display: none; }
.spedizioni img { width: 34px; height: 34px; flex: none; }
.spedizioni span { flex: 0 1 auto; text-align: center; }

/* ── Domande ─────────────────────────────────────────── */
.domande { padding: var(--sezione) 0; }
.domande__griglia { display: grid; margin-top: 26px; }
.domanda { display: flex; gap: 16px; padding: 18px 0; }
.domanda + .domanda { border-top: 1px solid var(--linea); }
.domanda img { width: 36px; height: 36px; object-fit: contain; flex: none; margin-top: 2px; }
.domanda h3 { font-size: 16.5px; font-weight: 600; margin-bottom: 4px; }
.domanda p { margin: 0; font-size: 15px; }

/* ── Contatti ────────────────────────────────────────── */
.contatti { padding: var(--sezione) 0; }
.contatti__pannello { display: grid; gap: 28px; background: var(--cielo-contatti); border-radius: 26px; padding: 30px 20px; }
.recapiti { display: grid; gap: 16px; margin: 22px 0 24px; }
.recapiti li { display: flex; align-items: center; gap: 16px; }
.recapiti img, .wa--recapito { width: 30px; height: 30px; object-fit: contain; flex: none; color: var(--azzurro); }
.recapiti strong { display: block; color: var(--blu-notte); font-size: 15px; line-height: 1.3; }
.recapiti span { display: block; font-size: 14.5px; line-height: 1.35; }
.contatti__dati .btn { width: 100%; }

.modulo { display: grid; gap: 12px; align-content: start; }
.campo input, .campo textarea {
  width: 100%;
  border: 1px solid var(--bordo-campo); border-radius: 999px;
  background: var(--bianco); color: var(--blu-notte);
  font: inherit; font-size: 16px;
  min-height: 50px; padding: 0 20px;
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.campo textarea { border-radius: 20px; min-height: 104px; padding: 14px 20px; resize: vertical; line-height: 1.5; }
.campo input::placeholder, .campo textarea::placeholder { color: #808894; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--azzurro); box-shadow: 0 0 0 4px rgba(0, 180, 220, .14); }
.campo [aria-invalid="true"] { border-color: #C0392B; }
.modulo .btn { min-height: 52px; font-size: 16.5px; }
.modulo__esito { margin: 0; min-height: 0; font-size: 14px; color: var(--blu-notte); }
.modulo__esito:empty { display: none; }
.modulo__privacy { margin: 0; font-size: 13px; line-height: 1.5; color: var(--testo-tenue); }
.modulo__privacy a { color: var(--azzurro-testo); }

/* ── Piè di pagina ───────────────────────────────────── */
.piede { padding: 36px 0 96px; border-top: 1px solid var(--cielo); }
.piede__riga { display: grid; gap: 18px; justify-items: start; }
.piede__logo { display: block; width: 140px; }
.piede__motto { margin: 0; font-size: 14.5px; color: var(--testo); }
.piede__link { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; }
.piede__link a { color: var(--blu-notte); text-decoration: none; padding: 6px 0; touch-action: manipulation; }
.piede__legale { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--carta); font-size: 12.5px; line-height: 1.6; color: var(--testo-tenue); }
.piede__legale p { margin: 0 0 8px; }
.piede__legale a { color: var(--azzurro-testo); }
.credit { white-space: nowrap; }
.piede__wa { display: none; }
.credit a { font-weight: 600; }

@media (hover: hover) and (pointer: fine) {
  .piede__link a:hover, .menu__voci a:hover { color: var(--azzurro-testo); }
}

/* pulsante WhatsApp sempre a portata di pollice */
.wa-fisso {
  position: fixed; z-index: 45;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bianco); color: var(--azzurro);
  border: 2px solid var(--azzurro);
  box-shadow: 0 12px 26px -10px rgba(0, 148, 208, .55);
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform .16s var(--curva), box-shadow .25s ease;
}
.wa-fisso .wa { width: 30px; height: 30px; }
.wa-fisso:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .wa-fisso:hover { box-shadow: 0 16px 30px -10px rgba(0, 148, 208, .75); }
}

/* ── Pagine legali e 404 ─────────────────────────────── */
.legale { padding: 48px 0 72px; }
.legale.contenitore, .legale .contenitore { max-width: 900px; }
.legale h1 { font-size: clamp(30px, 7vw, 44px); font-weight: 400; line-height: 1.15; margin-bottom: 8px; }
.legale h2 { font-size: 22px; font-weight: 600; margin: 34px 0 10px; }
.legale h3 { font-size: 18px; font-weight: 600; margin: 24px 0 8px; }
.legale p, .legale li { font-size: 16px; }
.legale ul, .legale ol { list-style: disc; padding-left: 22px; margin: 0 0 1em; }
.legale table { display: block; width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border-collapse: collapse; margin: 0 0 1.2em; font-size: 15px; }
.legale td:first-child { min-width: 120px; }
.legale th, .legale td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--carta); vertical-align: top; }
.legale a { color: var(--azzurro-testo); }
.non-trovata { padding: 80px 0 96px; text-align: center; }
.non-trovata h1 { font-size: clamp(32px, 7vw, 52px); font-weight: 400; margin-bottom: 12px; }
.non-trovata .azioni { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 26px; }

/* ═══════════════ TABLET (da 760 px) ═══════════════ */
@media (min-width: 760px) {
  :root { --gutter: 32px; --sezione: 48px; }
  .hero__titolo { font-size: clamp(42px, 5.6vw, 54px); }
  .hero__azioni { display: flex; flex-wrap: wrap; gap: 14px; }
  .hero__azioni .btn { width: auto; }
  .titolo { font-size: clamp(32px, 4.4vw, 42px); }
  .titolo--medio { font-size: clamp(28px, 3.4vw, 34px); }
  .showroom__testa { grid-template-columns: 1fr minmax(280px, 400px); align-items: end; }

  .libri { display: block; overflow: visible; margin: 0; padding: 0; }
  .libro { display: grid; gap: 28px; margin-bottom: 28px; }
  .libro:last-child { margin-bottom: 0; }
  .libri .pagina { flex: none; }
  .pagina { grid-template-columns: 170px 1fr; grid-template-rows: auto 1fr auto; column-gap: 26px; padding: 34px 32px 22px; }
  .pagina__titolo { font-size: 30px; }
  .pagina__testo { grid-column: 1; grid-row: 1 / 3; }
  .pagina > .pagina__foto, .pagina > .pagina__coppia { grid-column: 2; grid-row: 1 / 3; }
  .pagina__piede { grid-column: 1 / -1; }
  .pagina > .miniature--colonna { grid-column: 3; grid-row: 1 / 3; flex-direction: column; }
  .pagina:has(> .miniature--colonna) { grid-template-columns: 160px 1fr 66px; }
  .pagina:has(> .miniature--colonna) > .pagina__testo { grid-column: 1; }
  .pagina--swarovski > .pagina__foto { grid-row: 1; }
  .pagina--swarovski > .pagina__foto, .pagina--swarovski > .miniature--riga { max-width: 310px; }
  .pagina--swarovski > .miniature--riga { grid-column: 2; grid-row: 2; }

  .personalizzati__ovale { padding: 56px 48px 48px; border-radius: 50% / 22%; }
  .personalizzati__scena { grid-template-columns: 1.65fr 1fr; gap: 32px; }
  .passi { grid-template-columns: repeat(3, 1fr); gap: 0; text-align: center; }
  .passo { flex-direction: column; justify-content: flex-start; gap: 10px; padding: 0 16px; }
  .passo + .passo { position: relative; }
  .passo + .passo::before { content: ""; position: absolute; left: 0; top: 14px; height: 52px; width: 1px; background: var(--linea); }
  .passo br { display: inline; }
  .personalizzati__azione { width: auto; min-width: 380px; }

  .catalogo__griglia { grid-template-columns: 1fr 1fr; gap: 30px; }
  .spedizioni::before, .spedizioni::after { display: block; }
  .riquadro { padding: 36px 40px; }
  .riquadro .btn { width: auto; min-width: 260px; }

  .domande__griglia { grid-template-columns: repeat(3, 1fr); }
  .domanda { padding: 0 26px; }
  .domanda:first-child { padding-left: 0; }
  .domanda + .domanda { border-top: 0; border-left: 1px solid var(--linea); }

  .contatti__pannello { grid-template-columns: 1fr 1.2fr; gap: 0; padding: 44px 44px; }
  .contatti__dati { padding-right: 44px; border-right: 2px solid var(--linea); }
  .modulo { padding-left: 44px; }
  .contatti__dati .btn { width: auto; min-width: 300px; }

  .storia__griglia { grid-template-columns: 200px 1fr; grid-template-areas: "titolo titolo" "info marchio" "racconto racconto"; column-gap: 32px; align-items: center; }
  .storia__titolo { grid-area: titolo; }
  .storia__info { grid-area: info; align-self: start; }
  .storia__marchio { grid-area: marchio; }
  .storia__racconto { grid-area: racconto; padding-left: 32px; }

  .piede { padding-bottom: 96px; }
  .piede__riga { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
  .piede__motto { padding-left: 28px; border-left: 1px solid var(--linea); }
  .piede__link { margin-left: auto; }
  .piede__legale { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
  .piede__legale p { margin: 0; }
}

/* ═══════════════ COMPUTER (da 1100 px) ═══════════════ */
@media (min-width: 1100px) {
  :root { --gutter: 40px; --sezione: 52px; --contenitore: 1320px; --salto: 40px; }
  [id] { scroll-margin-top: 104px; }
  body { font-size: 16.5px; }

  .testata { top: calc(-1 * var(--salto)); }
  .testata__barra { height: 124px; }
  .testata__logo { position: absolute; left: 50%; top: 50%; width: 272px; transform: translate(-50%, -50%) translateY(6px); transform-origin: 50% 50%; transition: transform .35s var(--curva); }
  .testata.ombra .testata__logo { transform: translate(-50%, -50%) translateY(20px) scale(.662); }
  .menu { transition: transform .35s var(--curva); }
  .testata.ombra .menu { transform: translateY(20px); }
  .testata__apri { display: none; }
  .menu {
    position: static; height: auto; inset: auto; z-index: auto;
    flex-direction: row; align-items: center; width: 100%;
    padding: 0; background: none; overflow: visible;
    visibility: visible; opacity: 1; transform: none; transition: none;
  }
  .menu__voci { display: flex; align-items: center; gap: 46px; flex: 1; }
  .menu__voci li:nth-child(3) { margin-left: auto; }
  .menu__voci a { padding: 8px 0; border: 0; font-size: 16.5px; font-weight: 500; position: relative; }
  .menu__voci a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px; background: var(--azzurro); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--curva); }
  .menu__azione { margin: 0 0 0 36px; min-height: 48px; padding: 0 26px; font-size: 16px; }
  .motto { font-size: 15px; padding-block: 0 8px; }

  .hero { padding-top: 4px; }
  .hero__dentro { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); align-items: center; gap: 0; min-height: 0; }
  .hero__testo { padding-bottom: 30px; }
  .occhiello { font-size: 14px; margin-bottom: 18px; }
  .hero__titolo { font-size: clamp(48px, 4.03vw, 58px); margin-bottom: 24px; }
  .hero__titolo .riga { white-space: nowrap; }
  .hero__sotto { font-size: 18px; margin-bottom: 32px; max-width: 26em; }
  .hero__azioni { display: grid; justify-items: start; gap: 16px; }
  .hero__azioni .btn { min-width: 340px; }
  .vetrina { margin: 0 -20px 0 0; max-width: 860px; justify-self: end; width: calc(100% + 20px); }

  .schede { margin-top: 0; }
  .schede__voci { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; overflow: visible; margin: 0; padding: 6px 4px 0; -webkit-mask-image: none; mask-image: none; }
  .schede__voci a { height: 52px; padding: 0 10px; font-size: 15.5px; }

  .showroom { padding: 44px 0 var(--sezione); }
  .showroom > .contenitore { max-width: 1440px; padding-inline: 24px; }
  .showroom__testa { padding-inline: 36px; }
  .showroom__testa { margin-bottom: 36px; }
  .showroom__sotto { font-size: 16.5px; }

  .libro {
    position: relative;
    grid-template-columns: 1fr 1fr; gap: 0;
    margin-bottom: 30px;
    border-radius: 8px;
    background: var(--bianco);
    box-shadow: 0 1px 0 #E3E7EA, 0 22px 40px -22px rgba(16, 24, 40, .32), 0 3px 10px rgba(16, 24, 40, .06);
  }
  .libro::before, .libro::after {
    content: ""; position: absolute; z-index: -1; border-radius: 0 0 8px 8px;
    background: var(--carta); border: 1px solid #E1E5E8; border-top: 0;
  }
  .libro::before { left: 5px; right: 5px; bottom: -6px; height: 46px; box-shadow: 0 4px 8px -6px rgba(16, 24, 40, .3); }
  .libro::after { left: 12px; right: 12px; bottom: -12px; height: 46px; background: #E8EBED; box-shadow: 0 10px 18px -10px rgba(16, 24, 40, .35); }
  .pagina { box-shadow: none; border-radius: 0; background: none; padding: 36px 36px 22px; }
  .pagina--sinistra { border-radius: 8px 0 0 8px; background: linear-gradient(270deg, rgba(16, 24, 40, .17) 0, rgba(16, 24, 40, .07) 10px, rgba(16, 24, 40, .025) 34px, rgba(16, 24, 40, 0) 80px); }
  .pagina--destra { border-radius: 0 8px 8px 0; background: linear-gradient(90deg, rgba(16, 24, 40, .17) 0, rgba(16, 24, 40, .07) 10px, rgba(16, 24, 40, .025) 34px, rgba(16, 24, 40, 0) 80px); }
  .pagina--destra::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(16, 24, 40, .22); }
  .pagina::before { display: none; }
  .pagina { grid-template-columns: 186px minmax(0, 380px); column-gap: 30px; justify-content: start; }
  .pagina:has(> .miniature--colonna) { grid-template-columns: 186px minmax(0, 228px) 70px; column-gap: 26px; justify-content: start; }
  .pagina__titolo { font-size: 34px; }
  .pagina__descrizione { font-size: 16px; }
  .pagina__codice { font-size: 17px; }
  .pagina__codice--righe { display: grid; justify-items: end; padding-right: 2px; }
  .pagina__codice--righe span { margin: 22px 0 0; }
  .pagina__codice--righe span + span { margin-top: 64px; }
  .miniature { margin-top: 24px; gap: 8px; }
  .miniatura { width: 56px; }
  .miniatura img { height: 54px; }
  .miniature--colonna .miniatura { width: 70px; }
  .miniature--colonna .miniatura img { height: 88px; }
  .pagina__coppia { gap: 22px; }
  .pagina--natale { grid-template-columns: 182px minmax(0, 1fr); column-gap: 20px; }
  .pagina--natale .pagina__coppia { grid-template-columns: 220px 186px; gap: 14px; align-items: center; }
  .bambinelli__codici { white-space: nowrap; font-size: 12px; }
  .pagina--personalizzati { grid-template-columns: 186px minmax(0, 1fr); }
  .pagina--personalizzati .pagina__coppia { grid-template-columns: 1.15fr .85fr; align-items: end; }

  .personalizzati__ovale { padding: 36px 90px 32px; border-radius: 50% / 24%; }
  .personalizzati__testa .titolo { font-size: 44px; }
  .personalizzati__sotto { font-size: 17px; }
  .personalizzati__scena { margin-top: 18px; grid-template-columns: 1.7fr 1fr; gap: 44px; max-width: 620px; }
  .personalizzati__magnete { max-width: 250px; }
  .miniature--riga { gap: 12px; }
  .miniature--riga .miniatura { width: auto; }
  .miniature--riga .miniatura img { height: auto; aspect-ratio: 4 / 3; }
  .passi { margin: 22px auto 18px; }
  .passo { font-size: 16.5px; }
  .passo img { width: 44px; height: 44px; }

  .storia__griglia { grid-template-columns: 250px minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "titolo titolo ." "info marchio racconto"; column-gap: 44px; row-gap: 20px; }
  .storia__titolo { font-size: 46px; }
  .storia__info { padding-top: 6px; }
  .storia__racconto { padding-left: 44px; }
  .storia__racconto p { font-size: 16.5px; }
  .storia__racconto .storia__cuore { font-size: 26px; }
  .storia__racconto .storia__citazione { font-size: 23px; }

  .riquadro { padding: 32px 52px 34px; }
  .riquadro__titolo { font-size: 31px; }
  .spedizioni { font-size: 16px; margin-top: 32px; }
  .spedizioni img { width: 40px; height: 40px; }

  .domande__griglia { margin-top: 38px; }
  .domanda { padding: 0 40px; }
  .domanda img { width: 40px; height: 40px; }
  .domanda h3 { font-size: 17.5px; }
  .domanda p { font-size: 15.5px; }

  .contatti__pannello { padding: 40px 64px; grid-template-columns: 1fr 1.18fr; }
  .contatti__dati { padding-right: 60px; }
  .modulo { padding-left: 60px; }
  .titolo--medio { font-size: 34px; }

  .piede { padding: 28px 0 24px; }
  .piede__legale { margin-top: 18px; }
  .wa-fisso { display: none; }
  .piede__wa { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--azzurro); color: var(--azzurro); background: var(--bianco); margin-left: 8px; transition: box-shadow .25s ease, transform .16s var(--curva); }
  .piede__wa .wa { width: 28px; height: 28px; }
  .piede__wa:active { transform: scale(.94); }
  .piede__logo { width: 160px; }
  .piede__link { gap: 40px; }
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.a-capo { display: none; }
@media (min-width: 1100px) { .a-capo { display: inline; } }