/* ==================================================================
   TOTTI Onoranze Funebri
   Palette: #E9E9E9 fondo - var(--verde) principale - #A77E44 accento
   ================================================================== */

:root {
  --pietra: #E9E9E9;
  --pietra-scura: #DCDEDD;
  --carta: #FFFFFF;
  --verde: var(--verde);
  --verde-cupo: var(--verde-cupo);
  --verde-fondo: var(--verde-fondo);
  --verde-velo: #EBF4F1;
  --bronzo: #A77E44;
  --bronzo-chiaro: #C99C5E;
  --bronzo-velo: #F4EDE2;
  --inchiostro: #16211D;
  --fumo: #6C7975;
  --bordo: #D3D7D5;
  --bordo-scuro: rgba(255, 255, 255, 0.10);
  --rosso: #B3453C;

  --display: 'Marcellus', 'Cormorant Garamond', Georgia, serif;
  --testo: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;

  --larghezza: 1440px;
  --stretto: 760px;
  --raggio: 4px;
  --raggio-g: 10px;
  --ombra: 0 1px 2px rgba(22, 33, 29, 0.05), 0 8px 24px -12px rgba(22, 33, 29, 0.18);
  --ombra-alta: 0 2px 4px rgba(22, 33, 29, 0.06), 0 24px 48px -20px rgba(22, 33, 29, 0.30);
  --transizione: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--pietra);
  color: var(--inchiostro);
  font-family: var(--testo);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--verde-cupo); text-decoration: none; }
a:hover { color: var(--verde-fondo); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 0;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

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

.salta {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--scuro); color: #fff; padding: 12px 20px;
}
.salta:focus { left: 12px; top: 12px; }

/* ---------------- impalcatura ---------------- */

.contenitore {
  width: 100%;
  max-width: var(--larghezza);
  margin-inline: auto;
  padding-inline: 24px;
}

.sezione { padding-block: 88px; }
.sezione--stretta { padding-block: 64px; }
.sezione--carta { background: var(--carta); }
.sezione--velo { background: var(--verde-velo); }
.sezione--scura { background: var(--scuro); color: #DCE3E0; }
.sezione--scura h2, .sezione--scura h3 { color: #F1F4F3; }

.occhiello {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronzo);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.occhiello::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--bronzo), transparent);
  max-width: 120px;
}
.occhiello--centro { justify-content: center; }
.occhiello--centro::after { display: none; }
.sezione--scura .occhiello { color: var(--bronzo-chiaro); }

.titolo-sezione {
  font-size: clamp(30px, 4vw, 46px);
  max-width: 20ch;
  margin-bottom: 16px;
}
.sottotitolo-sezione {
  color: var(--fumo);
  max-width: 58ch;
  font-size: 17.5px;
}
.sezione--scura .sottotitolo-sezione { color: #A8B5B0; }

.testata-sezione { margin-bottom: 48px; }
.testata-sezione--centro { text-align: center; }
.testata-sezione--centro .titolo-sezione,
.testata-sezione--centro .sottotitolo-sezione { margin-inline: auto; }

/* ---------------- bottoni ---------------- */

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--raggio);
  font-family: var(--testo);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--transizione), color var(--transizione),
              border-color var(--transizione), transform var(--transizione);
  text-align: center;
}
.bottone:active { transform: translateY(1px); }
.bottone[disabled] { opacity: 0.5; cursor: not-allowed; }

.bottone--primario { background: var(--verde); color: #fff; }
.bottone--primario:hover { background: var(--verde-fondo); color: #fff; }

.bottone--bronzo { background: var(--bronzo); color: #fff; }
.bottone--bronzo:hover { background: #8F6A36; color: #fff; }

.bottone--contorno { background: transparent; border-color: var(--bordo); color: var(--inchiostro); }
.bottone--contorno:hover { border-color: var(--verde); color: var(--verde-fondo); background: var(--verde-velo); }

.bottone--chiaro { background: transparent; border-color: rgba(255, 255, 255, 0.28); color: #EDF1EF; }
.bottone--chiaro:hover { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255,255,255,.5); }

.bottone--pieno { width: 100%; }
.bottone--piccolo { padding: 9px 16px; font-size: 13.5px; }

/* ---------------- barra reperibilita ---------------- */

.barra-urgenza { background: var(--scuro); color: #C6D2CE; font-size: 13.5px; }
.barra-urgenza .contenitore {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 42px;
  padding-block: 8px;
}
.barra-urgenza__stato { display: flex; align-items: center; gap: 10px; }
.barra-urgenza__numero { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.barra-urgenza__numero:hover { color: var(--bronzo-chiaro); }
.barra-urgenza__sedi { color: #8FA09B; }

.pulsazione {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--verde);
  animation: respiro 2.8s ease-out infinite;
  flex: none;
}
@keyframes respiro {
  0%   { box-shadow: 0 0 0 0 rgba(21, 73, 89, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(21, 73, 89, 0); }
  100% { box-shadow: 0 0 0 0 rgba(21, 73, 89, 0); }
}

/* ---------------- intestazione ---------------- */

.intestazione {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(233, 233, 233, 0.88);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--bordo);
}
.intestazione .contenitore { display: flex; align-items: center; gap: 28px; min-height: 78px; }

.marchio { display: flex; align-items: baseline; gap: 11px; flex: none; }
.marchio__nome {
  font-family: var(--display);
  font-size: 27px;
  letter-spacing: 0.16em;
  color: var(--inchiostro);
  line-height: 1;
}
.marchio__coda {
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bronzo);
  font-weight: 600;
  padding-bottom: 2px;
}

.navigazione { display: flex; gap: 4px; margin-left: auto; }
.navigazione a {
  padding: 9px 14px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--inchiostro);
  border-radius: var(--raggio);
  position: relative;
}
.navigazione a:hover { background: rgba(22, 33, 29, 0.05); }
.navigazione a[aria-current='page'] { color: var(--verde-fondo); }
.navigazione a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 3px;
  height: 2px;
  background: var(--verde);
}

.azioni-intestazione { display: flex; align-items: center; gap: 10px; flex: none; }

.carrello-scorciatoia {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  color: var(--inchiostro);
  background: transparent;
  cursor: pointer;
}
.carrello-scorciatoia:hover { border-color: var(--verde); color: var(--verde-fondo); }
.carrello-scorciatoia__conteggio {
  position: absolute;
  top: -7px; right: -7px;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--bronzo);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.carrello-scorciatoia__conteggio.visibile { display: flex; }

.apri-menu {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: transparent;
  cursor: pointer;
  color: var(--inchiostro);
  align-items: center;
  justify-content: center;
}

/* ---------------- eroe ---------------- */

.eroe { position: relative; background: var(--scuro); color: #D9E2DE; overflow: hidden; }
.eroe::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(167, 126, 68, 0.16), transparent 58%),
    radial-gradient(80% 70% at 12% 100%, rgba(21, 73, 89, 0.13), transparent 62%),
    repeating-linear-gradient(102deg, rgba(255,255,255,0.014) 0 2px, transparent 2px 7px);
  pointer-events: none;
}
.eroe .contenitore { position: relative; }

.eroe__griglia {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: center;
  padding-block: 96px 88px;
}

.eroe__titolo {
  font-size: clamp(42px, 6.2vw, 74px);
  line-height: 1.03;
  letter-spacing: -0.015em;
  color: #E4EAE7;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.10), 0 -1px 1px rgba(0, 0, 0, 0.55);
  margin-bottom: 22px;
}
.eroe__titolo em { font-style: normal; color: var(--bronzo-chiaro); }
.eroe__testo { font-size: 19px; color: #A9B7B2; max-width: 46ch; margin-bottom: 34px; }
.eroe__azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }

.eroe__garanzie {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--bordo-scuro);
}
.garanzia { display: flex; gap: 11px; align-items: flex-start; max-width: 212px; }
.garanzia svg { flex: none; margin-top: 2px; color: var(--verde); }
.garanzia b { display: block; color: #E4EAE7; font-size: 14.5px; font-weight: 600; }
.garanzia span { font-size: 13.5px; color: #8FA09B; line-height: 1.45; }

/* la firma del sito: il lumino sempre acceso */

.lumino {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 24px;
  min-height: 380px;
}
.lumino__alone {
  position: absolute;
  top: 2%;
  left: 50%;
  width: 340px; height: 340px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(201, 156, 94, 0.26) 0%, rgba(201, 156, 94, 0.07) 42%, transparent 68%);
  animation: alone 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes alone {
  0%, 100% { opacity: 0.75; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;    transform: translateX(-50%) scale(1.06); }
}
.lumino svg { position: relative; width: 210px; height: auto; }
.lumino__fiamma { transform-origin: 50% 100%; animation: fiamma 3.4s ease-in-out infinite; }
@keyframes fiamma {
  0%, 100% { transform: scale(1, 1) rotate(0deg); opacity: 1; }
  25%      { transform: scale(0.94, 1.07) rotate(-2.5deg); opacity: 0.92; }
  50%      { transform: scale(1.05, 0.95) rotate(1.5deg); opacity: 1; }
  75%      { transform: scale(0.97, 1.04) rotate(2deg); opacity: 0.95; }
}
.lumino__didascalia {
  position: relative;
  margin-top: 26px;
  text-align: center;
  font-family: var(--display);
  font-size: 17px;
  color: #9FAEA9;
  max-width: 26ch;
  line-height: 1.4;
}
.lumino__didascalia b { color: var(--bronzo-chiaro); font-weight: 400; }

/* ---------------- le prime ore ---------------- */

.passi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.passo { padding: 30px 26px 30px 0; border-top: 2px solid var(--bordo); position: relative; }
.passo + .passo { padding-left: 26px; }
.passo::before {
  content: attr(data-ora);
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronzo);
  margin-bottom: 12px;
}
.passo::after {
  content: '';
  position: absolute;
  top: -2px; left: 0;
  width: 34px; height: 2px;
  background: var(--verde);
}
.passo + .passo::after { left: 26px; }
.passo h3 { font-size: 21px; margin-bottom: 8px; }
.passo p { font-size: 15px; color: var(--fumo); }

/* ---------------- servizi ---------------- */

.griglia-servizi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--bordo);
  border: 1px solid var(--bordo);
}
.carta-servizio { background: var(--carta); padding: 34px 30px; transition: background var(--transizione); }
.carta-servizio:hover { background: var(--verde-velo); }
.carta-servizio__icona { width: 40px; height: 40px; color: var(--verde); margin-bottom: 18px; }
.carta-servizio h3 { font-size: 22px; margin-bottom: 10px; }
.carta-servizio p { font-size: 15px; color: var(--fumo); }

/* ---------------- negozio ---------------- */

.filtri-negozio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-bottom: 26px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--bordo);
}
.filtro {
  padding: 8px 16px;
  border: 1px solid var(--bordo);
  background: transparent;
  border-radius: 100px;
  font-family: var(--testo);
  font-size: 14px;
  font-weight: 500;
  color: var(--inchiostro);
  cursor: pointer;
  transition: all var(--transizione);
}
.filtro:hover { border-color: var(--verde); color: var(--verde-fondo); }
.filtro.attivo { background: var(--verde); border-color: var(--verde); color: #fff; }
.filtri-negozio .spinta { margin-left: auto; }
.filtri-negozio select {
  padding: 9px 14px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  font-family: var(--testo);
  font-size: 14px;
  background: var(--carta);
  color: var(--inchiostro);
}

.griglia-prodotti { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 26px; }

.carta-prodotto {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transizione), box-shadow var(--transizione), transform var(--transizione);
}
.carta-prodotto:hover { border-color: var(--verde); box-shadow: var(--ombra); transform: translateY(-3px); }
.carta-prodotto__figura {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(168deg, var(--figura-a) 0%, var(--figura-b) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--bordo);
  overflow: hidden;
}
.carta-prodotto__figura img { width: 100%; height: 100%; object-fit: cover; }
.carta-prodotto__figura svg { width: 58%; height: 58%; }
.carta-prodotto__nastro {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--bronzo);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
}
.carta-prodotto__nastro--esaurito { background: var(--fumo); }
.carta-prodotto__corpo { padding: 20px; display: flex; flex-direction: column; flex: 1; gap: 6px; }
.carta-prodotto__categoria {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--verde-cupo);
}
.carta-prodotto__nome { font-size: 21px; }
.carta-prodotto__nome a { color: var(--inchiostro); }
.carta-prodotto__nome a:hover { color: var(--verde-fondo); }
.carta-prodotto__dettaglio { font-size: 13.5px; color: var(--fumo); }
.carta-prodotto__piede {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
}
.prezzo {
  font-family: var(--display);
  font-size: 25px;
  color: var(--bronzo);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.prezzo small { font-size: 12px; font-family: var(--testo); color: var(--fumo); letter-spacing: 0; }

.scheda-prodotto { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.scheda-prodotto__figura {
  background: linear-gradient(168deg, var(--figura-a) 0%, var(--figura-b) 100%);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.scheda-prodotto__figura svg { width: 62%; height: 62%; }
.scheda-prodotto__figura img { width: 100%; height: 100%; object-fit: cover; }
.scheda-prodotto h1 { font-size: clamp(32px, 4vw, 46px); margin-bottom: 14px; }
.scheda-prodotto .prezzo { font-size: 36px; display: block; margin-bottom: 22px; }

.tabella-specifiche { width: 100%; border-collapse: collapse; margin: 26px 0; }
.tabella-specifiche th, .tabella-specifiche td {
  text-align: left;
  padding: 12px 0;
  border-bottom: 1px solid var(--bordo);
  font-size: 15px;
  vertical-align: top;
}
.tabella-specifiche th { font-weight: 600; color: var(--fumo); width: 38%; font-family: var(--testo); }

.selettore-quantita {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--carta);
}
.selettore-quantita button {
  width: 44px; height: 48px;
  border: 0; background: transparent;
  font-size: 20px; cursor: pointer; color: var(--inchiostro);
  font-family: var(--testo);
}
.selettore-quantita button:hover { color: var(--verde-fondo); }
.selettore-quantita input {
  width: 48px; height: 48px;
  border: 0; text-align: center;
  font-family: var(--testo); font-size: 16px; font-weight: 600;
  background: transparent; color: var(--inchiostro);
  -moz-appearance: textfield;
}
.selettore-quantita input::-webkit-outer-spin-button,
.selettore-quantita input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------------- tariffe ---------------- */

.griglia-tariffe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.carta-tariffa {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
}
.carta-tariffa--scelta { border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde); position: relative; }
.carta-tariffa--scelta::before {
  content: 'Il più richiesto';
  position: absolute;
  top: -11px; left: 30px;
  background: var(--verde);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 2px;
}
.carta-tariffa h3 { font-size: 25px; margin-bottom: 6px; }
.carta-tariffa__prezzo {
  font-family: var(--display);
  font-size: 42px;
  color: var(--bronzo);
  margin: 14px 0 4px;
  font-variant-numeric: tabular-nums;
}
.carta-tariffa__nota { font-size: 13px; color: var(--fumo); margin-bottom: 22px; }
.elenco-segni { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; }
.elenco-segni li { display: flex; gap: 11px; font-size: 15px; align-items: flex-start; }
.elenco-segni li::before {
  content: '';
  flex: none;
  width: 7px; height: 7px;
  margin-top: 9px;
  background: var(--verde);
  transform: rotate(45deg);
}
.carta-tariffa .bottone { margin-top: auto; }

/* ---------------- recensioni ---------------- */

.griglia-recensioni { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.recensione {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-left: 3px solid var(--bronzo);
  border-radius: var(--raggio);
  padding: 30px 28px;
}
.recensione__testo { font-family: var(--display); font-size: 19px; line-height: 1.5; margin-bottom: 20px; }
.recensione__firma { font-size: 13.5px; color: var(--fumo); }
.recensione__firma b { color: var(--inchiostro); font-weight: 600; display: block; font-size: 14.5px; }
.stelle { color: var(--bronzo); letter-spacing: 3px; font-size: 14px; margin-bottom: 14px; }

/* ---------------- moduli ---------------- */

.modulo { display: grid; gap: 18px; }
.campo { display: grid; gap: 7px; }
.campo label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fumo);
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--carta);
  font-family: var(--testo);
  font-size: 15.5px;
  color: var(--inchiostro);
  transition: border-color var(--transizione), box-shadow var(--transizione);
}
.campo textarea { resize: vertical; min-height: 118px; line-height: 1.55; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(21, 73, 89, 0.18);
}
.campo__aiuto { font-size: 13px; color: var(--fumo); text-transform: none; letter-spacing: 0; font-weight: 400; }
.coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.avviso { padding: 14px 18px; border-radius: var(--raggio); font-size: 14.5px; border: 1px solid; display: none; }
.avviso.visibile { display: block; }
.avviso--ok { background: var(--verde-velo); border-color: var(--verde); color: var(--verde-fondo); }
.avviso--errore { background: var(--rosso-velo); border-color: var(--rosso); color: var(--rosso); }

/* ---------------- appuntamento ---------------- */

.blocco-appuntamento {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 0;
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-g);
  overflow: hidden;
  box-shadow: var(--ombra);
}
.blocco-appuntamento__lato { background: var(--scuro); color: #B9C6C1; padding: 44px 40px; }
.blocco-appuntamento__lato h2 { color: #F1F4F3; font-size: 32px; margin-bottom: 14px; }
.blocco-appuntamento__modulo { padding: 44px 40px; }

.orari-riga {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--bordo-scuro); font-size: 14.5px;
}
.orari-riga:last-child { border-bottom: 0; }
.orari-riga span:last-child { color: #E4EAE7; font-variant-numeric: tabular-nums; }

.fasce { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 9px; }
.fascia {
  padding: 11px 4px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--carta);
  font-family: var(--testo);
  font-size: 14.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--inchiostro);
  cursor: pointer;
  transition: all var(--transizione);
}
.fascia:hover { border-color: var(--verde); color: var(--verde-fondo); }
.fascia.scelta { background: var(--verde); border-color: var(--verde); color: #fff; }
.fasce-vuote { font-size: 14.5px; color: var(--fumo); padding: 14px 0; }

/* ---------------- carrello ---------------- */

.carrello-impianto { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }

.riga-carrello {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--bordo);
}
.riga-carrello__figura {
  width: 96px; height: 96px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: linear-gradient(168deg, var(--figura-a), var(--figura-b));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.riga-carrello__figura svg { width: 62%; height: 62%; }
.riga-carrello__figura img { width: 100%; height: 100%; object-fit: cover; }
.riga-carrello h3 { font-size: 20px; margin-bottom: 4px; }
.riga-carrello__meta { font-size: 13.5px; color: var(--fumo); }
.riga-carrello__destra { text-align: right; display: grid; gap: 8px; justify-items: end; }
.togli {
  background: none; border: 0; padding: 0;
  font-family: var(--testo); font-size: 13px;
  color: var(--fumo); cursor: pointer; text-decoration: underline;
}
.togli:hover { color: var(--rosso); }

.riepilogo {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 30px 28px;
  position: sticky;
  top: 100px;
}
.riepilogo h2 { font-size: 24px; margin-bottom: 20px; }
.riepilogo__riga { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: 15px; }
.riepilogo__riga span:last-child { font-variant-numeric: tabular-nums; }
.riepilogo__totale {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin-top: 14px; padding-top: 18px;
  border-top: 1px solid var(--bordo);
}
.riepilogo__totale b { font-family: var(--display); font-size: 17px; font-weight: 400; }
.riepilogo__totale .prezzo { font-size: 30px; }

.vuoto { text-align: center; padding: 70px 20px; }
.vuoto h2 { font-size: 28px; margin-bottom: 10px; }
.vuoto p { color: var(--fumo); margin-bottom: 24px; }

/* ---------------- richiamo finale ---------------- */

.richiamo {
  background: var(--scuro);
  color: #DCE3E0;
  border-radius: var(--raggio-g);
  padding: 56px 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.richiamo::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(90% 140% at 88% 0%, rgba(167, 126, 68, 0.20), transparent 60%);
  pointer-events: none;
}
.richiamo > * { position: relative; }
.richiamo h2 { color: #F1F4F3; font-size: clamp(27px, 3.4vw, 38px); margin-bottom: 10px; }
.richiamo p { color: #9FAEA9; max-width: 50ch; }
.richiamo__azioni { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------------- piede ---------------- */

.piede { background: var(--scuro); color: #93A29D; padding-block: 66px 0; font-size: 14.5px; }
.piede__griglia {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 44px;
  padding-bottom: 48px;
}
.piede h4 {
  font-family: var(--testo);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronzo-chiaro);
  margin-bottom: 18px;
}
.piede a { color: #B9C6C1; }
.piede a:hover { color: #fff; }
.piede ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.piede .marchio__nome { color: #F1F4F3; }
.piede__intro { margin-top: 18px; max-width: 34ch; line-height: 1.6; }
.piede__coda {
  border-top: 1px solid var(--bordo-scuro);
  padding-block: 22px 26px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #71807B;
}

/* ---------------- pagine di testo ---------------- */

.testata-pagina {
  background: var(--scuro);
  color: #D9E2DE;
  padding-block: 66px 60px;
  position: relative;
  overflow: hidden;
}
.testata-pagina::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(80% 120% at 85% 10%, rgba(167, 126, 68, 0.16), transparent 60%);
}
.testata-pagina .contenitore { position: relative; }
.testata-pagina h1 { font-size: clamp(34px, 5vw, 56px); color: #E4EAE7; max-width: 20ch; margin-bottom: 14px; }
.testata-pagina p { color: #9FAEA9; max-width: 60ch; font-size: 18px; }
.briciole { font-size: 13px; color: #7C8B86; margin-bottom: 20px; }
.briciole a { color: #9FAEA9; }
.briciole a:hover { color: var(--bronzo-chiaro); }

.prosa { max-width: var(--stretto); }
.prosa h2 { font-size: 30px; margin: 44px 0 14px; }
.prosa h3 { font-size: 22px; margin: 30px 0 10px; }
.prosa p, .prosa li { color: #46524E; }
.prosa ul { padding-left: 20px; display: grid; gap: 8px; margin-bottom: 20px; }
.prosa > *:first-child { margin-top: 0; }

.griglia-due { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.blocco-contatto { display: grid; gap: 22px; }
.contatto-voce { display: flex; gap: 14px; align-items: flex-start; }
.contatto-voce svg { flex: none; color: var(--verde); margin-top: 3px; }
.contatto-voce b { display: block; font-size: 15px; }
.contatto-voce span, .contatto-voce a { font-size: 14.5px; color: var(--fumo); }

/* ---------------- pannello amministratore ---------------- */

.accesso {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 30px;
  background:
    radial-gradient(90% 70% at 20% 0%, rgba(21, 73, 89, 0.16), transparent 60%),
    radial-gradient(80% 70% at 90% 100%, rgba(167, 126, 68, 0.16), transparent 60%),
    var(--inchiostro);
}
.accesso__carta {
  width: 100%;
  max-width: 420px;
  background: var(--carta);
  border-radius: var(--raggio-g);
  padding: 44px 40px;
  box-shadow: var(--ombra-alta);
}
.accesso__carta .marchio { justify-content: center; margin-bottom: 10px; }
.accesso__carta h1 { font-size: 27px; text-align: center; margin-bottom: 6px; }
.accesso__carta > p { text-align: center; color: var(--fumo); font-size: 14.5px; margin-bottom: 28px; }

.admin-impianto { display: grid; grid-template-columns: 246px 1fr; min-height: 100vh; }
.admin-lato {
  background: var(--scuro);
  color: #B9C6C1;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.admin-lato .marchio { margin-bottom: 28px; padding-inline: 10px; }
.admin-lato .marchio__nome { color: #F1F4F3; font-size: 23px; }
.voce-lato {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px;
  border: 0;
  border-radius: var(--raggio);
  background: transparent;
  color: #B9C6C1;
  font-family: var(--testo); font-size: 14.5px; font-weight: 500;
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: background var(--transizione), color var(--transizione);
}
.voce-lato:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.voce-lato.attiva { background: var(--verde); color: #fff; }
.pallino {
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px;
  background: var(--bronzo);
  color: #fff;
  font-size: 11px; font-weight: 700;
  display: none; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.pallino.visibile { display: flex; }
.voce-lato.attiva .pallino { background: rgba(0, 0, 0, 0.28); }
.admin-lato__coda { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--bordo-scuro); }

.admin-area { padding: 34px 38px 70px; overflow-x: hidden; }
.admin-testata {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin-bottom: 28px;
}
.admin-testata h1 { font-size: 34px; }
.admin-testata p { color: var(--fumo); font-size: 15px; margin: 0; }

.pannello { display: none; }
.pannello.attivo { display: block; }

.griglia-numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; margin-bottom: 34px; }
.numero { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 22px 24px; }
.numero__etichetta {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fumo); margin-bottom: 8px;
}
.numero__valore { font-family: var(--display); font-size: 38px; line-height: 1; font-variant-numeric: tabular-nums; }
.numero--rilievo { border-color: var(--verde); }
.numero--rilievo .numero__valore { color: var(--verde-fondo); }
.numero--bronzo .numero__valore { color: var(--bronzo); }

.tavola-guscio { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); overflow-x: auto; }
.tavola { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 720px; }
.tavola th {
  text-align: left;
  padding: 14px 18px;
  background: var(--carta-2);
  border-bottom: 1px solid var(--bordo);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fumo);
  white-space: nowrap;
}
.tavola td { padding: 15px 18px; border-bottom: 1px solid var(--bordo); vertical-align: middle; }
.tavola tr:last-child td { border-bottom: 0; }
.tavola tbody tr:hover { background: var(--carta-2); }
.tavola .numerico { font-variant-numeric: tabular-nums; text-align: right; }
.tavola__vuota { padding: 50px 20px; text-align: center; color: var(--fumo); }

.pastiglia {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid;
  white-space: nowrap;
}
.pastiglia--nuovo, .pastiglia--richiesto { background: var(--bronzo-velo); border-color: var(--bronzo); color: #825F2C; }
.pastiglia--confermato, .pastiglia--spedito { background: var(--verde-velo); border-color: var(--verde); color: var(--verde-fondo); }
.pastiglia--consegnato, .pastiglia--concluso { background: var(--carta-2); border-color: var(--bordo); color: var(--fumo); }
.pastiglia--annullato { background: var(--rosso-velo); border-color: var(--rosso); color: var(--rosso); }
.pastiglia--attivo { background: var(--verde-velo); border-color: var(--verde); color: var(--verde-fondo); }
.pastiglia--nascosto { background: var(--carta-2); border-color: var(--bordo); color: var(--fumo); }

.mini-figura {
  width: 46px; height: 46px;
  border: 1px solid var(--bordo);
  border-radius: 3px;
  background: linear-gradient(168deg, var(--figura-a), var(--figura-b));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex: none;
}
.mini-figura svg { width: 66%; height: 66%; }
.mini-figura img { width: 100%; height: 100%; object-fit: cover; }
.cella-articolo { display: flex; align-items: center; gap: 14px; }

.azioni-riga { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.azione {
  border: 1px solid var(--bordo);
  background: var(--carta);
  border-radius: 3px;
  padding: 5px 11px;
  font-family: var(--testo); font-size: 12.5px; font-weight: 600;
  color: var(--inchiostro);
  cursor: pointer;
  transition: all var(--transizione);
}
.azione:hover { border-color: var(--verde); color: var(--verde-fondo); }
.azione--pericolo:hover { border-color: var(--rosso); color: var(--rosso); }

.finestra {
  position: fixed;
  inset: 0;
  background: rgba(22, 33, 29, 0.55);
  backdrop-filter: blur(3px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
  z-index: 200;
}
.finestra.aperta { display: flex; }
.finestra__carta {
  background: var(--carta);
  border-radius: var(--raggio-g);
  width: 100%;
  max-width: 680px;
  box-shadow: var(--ombra-alta);
  overflow: hidden;
}
.finestra__testata {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 24px 30px;
  border-bottom: 1px solid var(--bordo);
}
.finestra__testata h2 { font-size: 26px; }
.finestra__corpo { padding: 30px; }
.finestra__piede {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 20px 30px;
  border-top: 1px solid var(--bordo);
  background: var(--carta-2);
}
.chiudi-finestra {
  border: 0; background: transparent; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--fumo); padding: 4px 8px;
}
.chiudi-finestra:hover { color: var(--inchiostro); }

.anteprima-immagine {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--bordo);
  border-radius: var(--raggio);
  background: linear-gradient(168deg, var(--figura-a), var(--figura-b));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  margin-bottom: 10px;
}
.anteprima-immagine svg { width: 46%; height: 46%; }
.anteprima-immagine img { width: 100%; height: 100%; object-fit: cover; }

.interruttore { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.interruttore input { width: 18px; height: 18px; accent-color: var(--verde); cursor: pointer; }

.brindello { font-size: 13.5px; color: var(--fumo); }
.dettaglio-ordine { display: grid; gap: 6px; font-size: 14.5px; }
.dettaglio-ordine__riga { display: flex; justify-content: space-between; gap: 16px; }

/* ---------------- responsivo ---------------- */

@media (max-width: 1080px) {
  .eroe__griglia { grid-template-columns: 1fr; gap: 44px; padding-block: 66px; }
  .lumino { min-height: 300px; }
  .griglia-servizi { grid-template-columns: repeat(2, 1fr); }
  .passi { grid-template-columns: repeat(2, 1fr); }
  .passo + .passo { padding-left: 0; }
  .passo:nth-child(even) { padding-left: 26px; }
  .passo::after { left: 0; }
  .passo:nth-child(even)::after { left: 26px; }
  .griglia-tariffe, .griglia-recensioni { grid-template-columns: 1fr; }
  .carrello-impianto, .griglia-due, .scheda-prodotto { grid-template-columns: 1fr; gap: 36px; }
  .riepilogo { position: static; }
  .blocco-appuntamento { grid-template-columns: 1fr; }
  .admin-impianto { grid-template-columns: 1fr; }
  .admin-lato { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .admin-lato .marchio { margin-bottom: 0; }
  .admin-lato__coda { margin-top: 0; padding-top: 0; border-top: 0; margin-left: auto; }
  .voce-lato { width: auto; }
  .piede__griglia { grid-template-columns: 1fr 1fr; gap: 34px; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .sezione { padding-block: 58px; }
  .contenitore { padding-inline: 18px; }
  .navigazione {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--carta);
    border-bottom: 1px solid var(--bordo);
    flex-direction: column;
    padding: 12px;
    box-shadow: var(--ombra);
  }
  .navigazione.aperta { display: flex; }
  .navigazione a { padding: 13px 14px; font-size: 16px; }
  .navigazione a[aria-current='page']::after { display: none; }
  .apri-menu { display: inline-flex; }
  .intestazione .contenitore { min-height: 66px; gap: 12px; position: relative; }
  .azioni-intestazione { margin-left: auto; }
  .azioni-intestazione .bottone { display: none; }
  .barra-urgenza__sedi { display: none; }
  .griglia-servizi { grid-template-columns: 1fr; }
  .passi { grid-template-columns: 1fr; }
  .passo, .passo:nth-child(even) { padding-left: 0; }
  .passo::after, .passo:nth-child(even)::after { left: 0; }
  .griglia-prodotti { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 16px; }
  .carta-prodotto__corpo { padding: 15px; }
  .carta-prodotto__nome { font-size: 18px; }
  .carta-prodotto__piede { flex-direction: column; align-items: stretch; gap: 10px; }
  .richiamo { padding: 38px 26px; }
  .blocco-appuntamento__lato, .blocco-appuntamento__modulo { padding: 32px 24px; }
  .coppia { grid-template-columns: 1fr; }
  .riga-carrello { grid-template-columns: 70px 1fr; }
  .riga-carrello__figura { width: 70px; height: 70px; }
  .riga-carrello__destra { grid-column: 1 / -1; justify-items: start; text-align: left; }
  .admin-area { padding: 24px 18px 60px; }
  .piede__griglia { grid-template-columns: 1fr; }
  .accesso__carta { padding: 34px 26px; }
  .finestra { padding: 20px 12px; }
  .finestra__corpo { padding: 22px; }
}


/* ==================================================================
   v2 - fotografie, oro, movimento, respiro
   ================================================================== */

:root {
  --oro: #A77E44;
  --oro-chiaro: #D9B071;
  --oro-velo: rgba(167, 126, 68, 0.14);
  --oro-filo: rgba(167, 126, 68, 0.32);
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- rivelazione allo scorrimento ---------- */

[data-rivela] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.75s var(--curva), transform 0.75s var(--curva);
  will-change: opacity, transform;
}
[data-rivela].visto { opacity: 1; transform: none; }
[data-rivela][data-ritardo="1"] { transition-delay: 0.08s; }
[data-rivela][data-ritardo="2"] { transition-delay: 0.16s; }
[data-rivela][data-ritardo="3"] { transition-delay: 0.24s; }
[data-rivela][data-ritardo="4"] { transition-delay: 0.32s; }
[data-rivela][data-ritardo="5"] { transition-delay: 0.40s; }



/* ---------- fili e fregi in oro ---------- */

.filo-oro {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--oro) 15%, var(--oro) 85%, transparent);
  opacity: 0.55;
}

.fregio {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--oro);
}
.fregio::before, .fregio::after {
  content: '';
  height: 1px;
  flex: 1;
  background: var(--oro-filo);
}
.fregio__rombo {
  width: 7px; height: 7px;
  background: var(--oro);
  transform: rotate(45deg);
  flex: none;
}

/* occhiello piu ricco, con il rombo dorato */
.occhiello::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--oro);
  transform: rotate(45deg);
  flex: none;
}

/* ---------- eroe con fotografia ---------- */

.eroe--foto { min-height: 88vh; display: flex; align-items: center; }
.eroe__sfondo {
  position: absolute;
  inset: -3%;
  background-size: cover;
  background-position: center 40%;
  filter: grayscale(0.35) brightness(0.44) contrast(1.06);
  transform: scale(1.04);
  animation: respiroFoto 26s ease-in-out infinite alternate;
}
@keyframes respiroFoto {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.10) translate3d(0, -1.2%, 0); }
}
.eroe__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(22,33,29,0.86) 0%, rgba(22,33,29,0.60) 42%, rgba(22,33,29,0.94) 100%),
    radial-gradient(70% 60% at 74% 30%, rgba(167,126,68,0.22), transparent 62%);
}
.eroe--foto .eroe__griglia { padding-block: 120px 96px; }

.eroe__titolo em {
  background: linear-gradient(96deg, var(--oro-chiaro), #F0DCB4 45%, var(--oro));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- fotografie nei blocchi ---------- */

.foto {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  background: var(--figura-b);
}
.foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--curva), filter 0.6s var(--curva);
  filter: grayscale(0.28) contrast(1.03);
}
.foto:hover img { transform: scale(1.045); filter: grayscale(0) contrast(1.05); }
.foto::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--oro-filo);
  pointer-events: none;
}
.foto--alta { aspect-ratio: 3 / 4; }
.foto--larga { aspect-ratio: 16 / 9; }
.foto--quadra { aspect-ratio: 1 / 1; }

.foto-didascalia {
  margin-top: 12px;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--fumo);
}

/* banda fotografica a tutta larghezza */
.banda {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--scuro);
}
.banda__sfondo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: grayscale(0.4) brightness(0.42);
}
.banda__velo {
  position: absolute; inset: 0;
  background: linear-gradient(92deg, rgba(22,33,29,0.92) 0%, rgba(22,33,29,0.60) 58%, rgba(22,33,29,0.30) 100%);
}
.banda .contenitore { position: relative; padding-block: 76px; }
.banda h2 { color: #F2F5F4; font-size: clamp(28px, 3.6vw, 44px); margin-bottom: 14px; }
.banda p { color: #B6C3BE; max-width: 52ch; }

/* ---------- icone in oro ---------- */

.icona {
  width: 26px; height: 26px;
  flex: none;
  color: var(--oro);
}
.icona--grande { width: 34px; height: 34px; }
.icona__massa { fill: var(--oro); opacity: 0.14; }
.icona__tratto { fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }

.medaglione {
  width: 62px; height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--oro-velo);
  border: 1px solid var(--oro-filo);
  margin-bottom: 20px;
  transition: background 0.4s var(--curva), border-color 0.4s var(--curva), transform 0.4s var(--curva);
}
.carta-servizio:hover .medaglione,
.carta-vantaggio:hover .medaglione {
  background: rgba(167, 126, 68, 0.20);
  border-color: var(--oro);
  transform: translateY(-2px);
}

/* la griglia servizi diventa piu ariosa e chiara */
.griglia-servizi { background: transparent; border: 0; gap: 26px; }
.carta-servizio {
  border: 1px solid var(--bordo);
  border-top: 2px solid var(--oro);
  border-radius: 3px;
  padding: 38px 32px 34px;
}
.carta-servizio:hover { background: var(--carta); border-color: var(--bordo); border-top-color: var(--oro); box-shadow: var(--ombra); }
.carta-servizio h3 { margin-bottom: 12px; }

/* ---------- numeri grandi in oro ---------- */

.cifre { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--oro-filo); }
.cifra { background: var(--pietra); padding: 34px 24px; text-align: center; }
.sezione--carta .cifra { background: var(--carta); }
.cifra__numero {
  font-family: var(--display);
  font-size: clamp(38px, 4.6vw, 58px);
  line-height: 1;
  color: var(--oro);
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: 10px;
}
.cifra__voce {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fumo);
}

/* ---------- necrologi ---------- */

.griglia-necrologi { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 26px; }

.necrologio {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.4s var(--curva), transform 0.4s var(--curva), border-color 0.4s var(--curva);
}
.necrologio:hover { box-shadow: var(--ombra); transform: translateY(-3px); border-color: var(--oro-filo); }
.necrologio__testata {
  position: relative;
  padding: 30px 28px 24px;
  text-align: center;
  border-bottom: 1px solid var(--bordo);
  background: linear-gradient(180deg, var(--carta-2), var(--carta));
}
.necrologio__testata::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--oro), transparent);
}
.necrologio__ritratto {
  width: 96px; height: 116px;
  margin: 0 auto 16px;
  border: 1px solid var(--oro-filo);
  padding: 5px;
  background: var(--carta);
  position: relative;
}
.necrologio__ritratto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.necrologio__ritratto span {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  background: linear-gradient(168deg, var(--figura-a), var(--figura-b));
  font-family: var(--display);
  font-size: 32px;
  color: var(--oro);
  letter-spacing: 0.06em;
}
.necrologio__croce { color: var(--oro); font-size: 15px; display: block; margin-bottom: 8px; }
.necrologio__nome { font-size: 24px; line-height: 1.2; }
.necrologio__date {
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--fumo);
  font-variant-numeric: tabular-nums;
}
.necrologio__corpo { padding: 22px 28px 26px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.necrologio__riga { display: flex; gap: 11px; font-size: 14px; color: var(--fumo); align-items: flex-start; }
.necrologio__riga svg { flex: none; margin-top: 3px; color: var(--oro); }
.necrologio__riga b { color: var(--inchiostro); font-weight: 600; }
.necrologio__azioni { margin-top: auto; padding-top: 8px; display: grid; gap: 8px; }

.striscia-nera {
  display: inline-block;
  width: 34px; height: 3px;
  background: var(--inchiostro);
  margin: 0 auto 14px;
}

/* scheda del singolo necrologio */
.scheda-necrologio { display: grid; grid-template-columns: 320px 1fr; gap: 56px; align-items: start; }
.scheda-necrologio__ritratto {
  border: 1px solid var(--oro-filo);
  padding: 10px;
  background: var(--carta);
}
.scheda-necrologio__ritratto > * { aspect-ratio: 3 / 4; width: 100%; }
.scheda-necrologio__ritratto img { object-fit: cover; filter: grayscale(1); }
.scheda-necrologio__ritratto span {
  display: grid; place-items: center;
  background: linear-gradient(168deg, var(--figura-a), var(--figura-b));
  font-family: var(--display); font-size: 76px; color: var(--oro); letter-spacing: 0.06em;
}

.pensiero {
  border-left: 2px solid var(--oro);
  padding: 4px 0 4px 20px;
  margin-bottom: 22px;
}
.pensiero p { font-family: var(--display); font-size: 18px; line-height: 1.5; margin-bottom: 8px; }
.pensiero span { font-size: 13px; color: var(--fumo); }

.blocco-fiori {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-top: 2px solid var(--oro);
  border-radius: 3px;
  padding: 30px 28px;
}
.blocco-fiori h2 { font-size: 26px; margin-bottom: 8px; }

/* ---------- ripuliture: piu aria, meno rumore ---------- */

.sezione { padding-block: 104px; }
.sezione--stretta { padding-block: 72px; }
.testata-sezione { margin-bottom: 56px; }

.intestazione { background: rgba(233, 233, 233, 0.92); }
.intestazione.rimpicciolita { box-shadow: 0 1px 0 var(--oro-filo), 0 10px 30px -22px rgba(22,33,29,.5); }
.intestazione.rimpicciolita .contenitore { min-height: 64px; }
.intestazione .contenitore { transition: min-height 0.35s var(--curva); }

.navigazione a::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 1px;
  background: var(--oro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--curva);
}
.navigazione a:hover::after { transform: scaleX(1); }
.navigazione a:hover { background: transparent; color: var(--oro); }
.navigazione a[aria-current='page'] { color: var(--inchiostro); }
.navigazione a[aria-current='page']::after { background: var(--oro); transform: scaleX(1); height: 2px; }

.bottone--primario { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10); }
.bottone--bronzo:hover { background: #8F6A36; }
.bottone--oro {
  background: linear-gradient(100deg, var(--oro), var(--oro-chiaro) 55%, var(--oro));
  background-size: 200% 100%;
  color: #23180A;
  font-weight: 700;
  transition: background-position 0.6s var(--curva), transform 0.2s var(--curva);
}
.bottone--oro:hover { background-position: 100% 0; color: #23180A; }

.carta-prodotto { border-radius: 3px; }
.carta-prodotto:hover { border-color: var(--oro-filo); transform: translateY(-4px); }
.carta-prodotto__figura { aspect-ratio: 1 / 1; background: linear-gradient(168deg, var(--carta-2) 0%, var(--figura-b) 100%); }
.carta-prodotto__figura img { transition: transform 0.9s var(--curva); }
.carta-prodotto:hover .carta-prodotto__figura img { transform: scale(1.05); }
.carta-prodotto__categoria { color: var(--oro); }
.carta-prodotto__nastro { background: var(--oro); letter-spacing: 0.14em; }

.carta-tariffa { border-top: 2px solid var(--bordo); }
.carta-tariffa--scelta { border-top-color: var(--oro); box-shadow: none; border-color: var(--oro-filo); }
.carta-tariffa--scelta::before { background: var(--oro); }
.carta-tariffa__prezzo { letter-spacing: -0.01em; }
.elenco-segni li::before { background: var(--oro); width: 6px; height: 6px; margin-top: 10px; }

.recensione { border-left-width: 2px; border-left-color: var(--oro); }
.recensione__testo::before { content: '\201C'; color: var(--oro); font-size: 26px; line-height: 0; margin-right: 3px; }

.piede { padding-block: 26px 0; }
.piede__griglia { border-top: 1px solid rgba(167,126,68,0.22); padding-top: 52px; }
.piede h4 { color: var(--oro-chiaro); }

.testata-pagina { padding-block: 78px 70px; }
.testata-pagina::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--oro) 30%, var(--oro) 70%, transparent);
  opacity: 0.7;
}

.richiamo { border: 1px solid rgba(167,126,68,0.28); }
.richiamo::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--oro), transparent);
}

/* barra urgenza: il pallino diventa una fiammella dorata */
.barra-urgenza { border-bottom: 1px solid rgba(167,126,68,0.28); }
.pulsazione { background: var(--oro-chiaro); }
@keyframes respiro {
  0%   { box-shadow: 0 0 0 0 rgba(217, 176, 113, 0.60); }
  70%  { box-shadow: 0 0 0 9px rgba(217, 176, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 176, 113, 0); }
}

/* ---------- categorie del negozio a piastrelle ---------- */

.piastrelle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.piastrella {
  position: relative;
  display: block;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  border-radius: 3px;
  background: var(--scuro);
}
.piastrella img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.5) brightness(0.52);
  transition: transform 1s var(--curva), filter 0.6s var(--curva);
}
.piastrella:hover img { transform: scale(1.06); filter: grayscale(0.15) brightness(0.62); }
.piastrella__testo {
  position: absolute;
  left: 26px; right: 26px; bottom: 22px;
  color: #fff;
}
.piastrella__testo b { font-family: var(--display); font-size: 25px; font-weight: 400; display: block; }
.piastrella__testo span { font-size: 13px; color: #C9D3CF; }
.piastrella::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(217, 176, 113, 0.42);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s var(--curva), inset 0.45s var(--curva);
}
.piastrella:hover::after { opacity: 1; inset: 8px; }

@media (max-width: 1080px) {
  .cifre { grid-template-columns: repeat(2, 1fr); }
  .piastrelle { grid-template-columns: repeat(2, 1fr); }
  .scheda-necrologio { grid-template-columns: 1fr; gap: 34px; }
  .scheda-necrologio__ritratto { max-width: 300px; }
}
@media (max-width: 760px) {
  .sezione { padding-block: 66px; }
  .cifre { grid-template-columns: repeat(2, 1fr); }
  .piastrelle { grid-template-columns: 1fr; }
  .eroe--foto { min-height: auto; }
  .eroe--foto .eroe__griglia { padding-block: 86px 70px; }
  .banda { min-height: auto; }
  .banda .contenitore { padding-block: 56px; }
}

.piede__griglia { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr; gap: 36px; }
@media (max-width: 1080px) { .piede__griglia { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 760px)  { .piede__griglia { grid-template-columns: 1fr; } }

/* ==================================================================
   v3 - menu a tendina e hover
   ================================================================== */

.intestazione { overflow: visible; }
.navigazione { display: flex; align-items: center; gap: 2px; margin-left: auto; }

.voce { position: relative; }

.voce__testa,
.voce__solo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  border: 0;
  background: transparent;
  font-family: var(--testo);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--inchiostro);
  cursor: pointer;
  border-radius: 3px;
  transition: color 0.28s var(--curva);
}
.voce__testa::after,
.voce__solo::after {
  content: '';
  position: absolute;
  left: 13px; right: 13px; bottom: 5px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--oro), var(--oro-chiaro));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.38s var(--curva);
}
.voce:hover .voce__testa,
.voce__solo:hover,
.voce__testa[aria-expanded="true"] { color: var(--oro); }

.voce:hover .voce__testa::after,
.voce__solo:hover::after,
.voce__testa[aria-expanded="true"]::after { transform: scaleX(1); }

.voce__solo[aria-current="page"] { color: var(--inchiostro); }
.voce__solo[aria-current="page"]::after { transform: scaleX(1); }

.voce__punta {
  width: 7px; height: 7px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.34s var(--curva);
  opacity: 0.65;
}
.voce:hover .voce__punta { transform: rotate(-135deg) translateY(-3px); opacity: 1; }

/* --- il pannello --- */

.tendina {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  width: min(1080px, calc(100vw - 40px));
  transform: translateX(-50%) translateY(-10px);
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-top: 2px solid var(--oro);
  border-radius: 4px;
  box-shadow: 0 30px 70px -30px rgba(22, 33, 29, 0.42);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s var(--curva), transform 0.34s var(--curva), visibility 0.3s;
  z-index: 90;
}
.tendina--stretta { width: min(640px, calc(100vw - 40px)); }

.voce:hover .tendina,
.voce:focus-within .tendina {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* ponte invisibile: il mouse non perde il menu nel salto */
.voce::after {
  content: '';
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: 10px;
}

.tendina__interno {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px 28px;
  padding: 26px 28px;
}
.tendina--stretta .tendina__interno { grid-template-columns: repeat(2, 1fr); }

.tendina__titolo {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0 0 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--oro-filo);
}

.tendina__colonna a {
  position: relative;
  display: block;
  padding: 8px 10px 8px 15px;
  border-radius: 3px;
  color: var(--inchiostro);
  transition: background 0.26s var(--curva), padding-left 0.26s var(--curva);
}
.tendina__colonna a b {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  transition: color 0.26s var(--curva);
}
.tendina__colonna a span {
  display: block;
  font-size: 12.5px;
  color: var(--fumo);
  line-height: 1.35;
  margin-top: 1px;
}
.tendina__colonna a::before {
  content: '';
  position: absolute;
  left: 4px; top: 50%;
  width: 5px; height: 5px;
  margin-top: -2.5px;
  background: var(--oro);
  transform: rotate(45deg) scale(0);
  transition: transform 0.28s var(--curva);
}
.tendina__colonna a:hover { background: var(--oro-velo); padding-left: 20px; }
.tendina__colonna a:hover b { color: var(--oro); }
.tendina__colonna a:hover::before { transform: rotate(45deg) scale(1); }

.tendina__piede {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 28px;
  border-top: 1px solid var(--bordo);
  background: linear-gradient(90deg, var(--oro-velo), transparent);
  color: var(--inchiostro);
  transition: background 0.3s var(--curva);
}
.tendina__piede b { font-family: var(--display); font-size: 18px; font-weight: 400; }
.tendina__piede span { font-size: 13px; color: var(--fumo); }
.tendina__piede:hover { background: linear-gradient(90deg, rgba(167,126,68,0.22), transparent); color: var(--oro); }

/* ---------- hover rifatti ovunque ---------- */

/* bottoni: lampo dorato che passa */
.bottone { position: relative; overflow: hidden; isolation: isolate; }
.bottone::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.30) 48%, transparent 76%);
  transform: translateX(-120%);
  transition: transform 0.72s var(--curva);
}
.bottone:hover::before { transform: translateX(120%); }
.bottone--primario:hover, .bottone--bronzo:hover, .bottone--oro:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -14px rgba(22, 33, 29, 0.55);
}
.bottone--contorno:hover { transform: translateY(-2px); }
.bottone:active { transform: translateY(0); }

/* carte prodotto: cornice dorata che si stringe */
.carta-prodotto__figura::after {
  content: '';
  position: absolute;
  inset: 16px;
  border: 1px solid var(--oro);
  opacity: 0;
  transition: opacity 0.4s var(--curva), inset 0.45s var(--curva);
  pointer-events: none;
}
.carta-prodotto:hover .carta-prodotto__figura::after { opacity: 0.55; inset: 10px; }
.carta-prodotto__nome a { position: relative; }
.carta-prodotto__nome a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--oro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.36s var(--curva);
}
.carta-prodotto:hover .carta-prodotto__nome a::after { transform: scaleX(1); }

/* carte servizio: il filo d oro cresce dal centro */
.carta-servizio { position: relative; overflow: hidden; }
.carta-servizio::after {
  content: '';
  position: absolute;
  top: -2px; left: 50%; right: 50%;
  height: 2px;
  background: var(--oro);
  transition: left 0.45s var(--curva), right 0.45s var(--curva);
}
.carta-servizio:hover::after { left: 0; right: 0; }
.carta-servizio:hover .medaglione { transform: translateY(-3px) rotate(-4deg); }
.medaglione { transition: background 0.4s var(--curva), border-color 0.4s var(--curva), transform 0.5s var(--curva); }

/* necrologi: la scheda si solleva e il filo si accende */
.necrologio__testata::before { transition: opacity 0.4s var(--curva); opacity: 0.5; }
.necrologio:hover .necrologio__testata::before { opacity: 1; }
.necrologio__ritratto { transition: border-color 0.4s var(--curva), transform 0.5s var(--curva); }
.necrologio:hover .necrologio__ritratto { border-color: var(--oro); transform: translateY(-2px); }
.necrologio:hover { box-shadow: 0 22px 44px -26px rgba(22, 33, 29, 0.45); }

/* pagine collegate */
.piastrelle-testo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.collegata {
  position: relative;
  display: block;
  padding: 22px 24px 22px 26px;
  background: var(--pietra);
  border: 1px solid var(--bordo);
  border-left: 2px solid var(--oro-filo);
  border-radius: 3px;
  color: var(--inchiostro);
  overflow: hidden;
  transition: border-left-color 0.34s var(--curva), background 0.34s var(--curva), transform 0.34s var(--curva);
}
.sezione--carta .collegata { background: var(--carta); }
.collegata b { display: block; font-family: var(--display); font-size: 21px; font-weight: 400; }
.collegata span { display: block; font-size: 13.5px; color: var(--fumo); margin-top: 3px; }
.collegata__freccia {
  position: absolute;
  right: 20px; top: 22px;
  color: var(--oro);
  font-size: 19px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.34s var(--curva), transform 0.34s var(--curva);
}
.collegata:hover {
  border-left-color: var(--oro);
  background: var(--oro-velo);
  transform: translateX(4px);
  color: var(--inchiostro);
}
.collegata:hover .collegata__freccia { opacity: 1; transform: translateX(0); }

/* link del piede: pallino dorato */
.piede ul a { position: relative; display: inline-block; padding-left: 0; transition: padding-left 0.3s var(--curva), color 0.3s var(--curva); }
.piede ul a::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 4px; height: 4px;
  margin-top: -2px;
  background: var(--oro-chiaro);
  transform: rotate(45deg) scale(0);
  transition: transform 0.3s var(--curva);
}
.piede ul a:hover { padding-left: 13px; color: var(--oro-chiaro); }
.piede ul a:hover::before { transform: rotate(45deg) scale(1); }

/* righe di tabella */
.tavola tbody tr { transition: background 0.24s var(--curva); }
.tavola tbody tr td:first-child { position: relative; }
.tavola tbody tr td:first-child::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--oro);
  transform: scaleY(0);
  transition: transform 0.3s var(--curva);
}
.tavola tbody tr:hover td:first-child::before { transform: scaleY(1); }

/* marchio */
.marchio__nome { transition: letter-spacing 0.4s var(--curva), color 0.3s var(--curva); }
.marchio:hover .marchio__nome { letter-spacing: 0.2em; color: var(--oro); }

/* carrello e recensioni */
.carrello-scorciatoia { transition: border-color 0.3s var(--curva), color 0.3s var(--curva), transform 0.3s var(--curva); }
.carrello-scorciatoia:hover { border-color: var(--oro); color: var(--oro); transform: translateY(-2px); }
.recensione { transition: border-left-color 0.34s var(--curva), transform 0.34s var(--curva), box-shadow 0.34s var(--curva); }
.recensione:hover { transform: translateY(-3px); box-shadow: var(--ombra); border-left-color: var(--oro-chiaro); }

/* barra urgenza */
.barra-urgenza__numero { position: relative; transition: color 0.3s var(--curva); }
.barra-urgenza__numero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: var(--oro-chiaro);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.36s var(--curva);
}
.barra-urgenza__numero:hover::after { transform: scaleX(1); transform-origin: left; }

/* prosa: i link prendono il sottolineato dorato */
.prosa a, .necrologio__corpo a {
  color: var(--verde-fondo);
  background-image: linear-gradient(var(--oro), var(--oro));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.36s var(--curva), color 0.28s var(--curva);
  padding-bottom: 1px;
}
.prosa a:hover, .necrologio__corpo a:hover { background-size: 100% 1px; color: var(--oro); }

/* ---------- testata di pagina con fotografia ---------- */

.testata-pagina--foto { position: relative; overflow: hidden; }
.testata-pagina__sfondo {
  position: absolute;
  inset: -4%;
  background-size: cover;
  background-position: center 45%;
  filter: grayscale(0.42) brightness(0.34);
  transform: scale(1.03);
  animation: respiroFoto 30s ease-in-out infinite alternate;
}
.testata-pagina--foto::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22,33,29,0.80), rgba(22,33,29,0.62) 55%, rgba(22,33,29,0.90)),
              radial-gradient(70% 60% at 78% 25%, rgba(167,126,68,0.22), transparent 62%);
}

/* ---------- menu su schermi piccoli ---------- */

.apri-menu {
  flex-direction: column;
  gap: 5px;
  border-color: var(--bordo);
}
.apri-menu__riga {
  display: block;
  width: 18px; height: 1.6px;
  background: var(--inchiostro);
  transition: transform 0.34s var(--curva), opacity 0.24s var(--curva);
}
.apri-menu[aria-expanded="true"] .apri-menu__riga:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.apri-menu[aria-expanded="true"] .apri-menu__riga:nth-child(2) { opacity: 0; }
.apri-menu[aria-expanded="true"] .apri-menu__riga:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

@media (max-width: 1180px) {
  .voce__testa, .voce__solo { padding: 10px 9px; font-size: 13.5px; }
  .voce__testa::after, .voce__solo::after { left: 9px; right: 9px; }
  .azioni-intestazione .bottone { display: none; }
}

@media (max-width: 1000px) {
  .navigazione {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    background: var(--carta);
    border-top: 2px solid var(--oro);
    border-bottom: 1px solid var(--bordo);
    box-shadow: 0 24px 50px -30px rgba(22,33,29,.5);
    padding: 8px;
  }
  .navigazione.aperta { display: flex; }
  .apri-menu { display: inline-flex; }
  .intestazione .contenitore { position: relative; min-height: 66px; }

  .voce { border-bottom: 1px solid var(--bordo); }
  .voce:last-of-type { border-bottom: 0; }
  .voce__testa { width: 100%; justify-content: space-between; padding: 15px 12px; font-size: 16px; }
  .voce__testa::after { display: none; }
  .voce::after { display: none; }
  .voce__solo { padding: 15px 12px; font-size: 16px; }
  .voce__solo::after { display: none; }

  .tendina {
    position: static;
    width: auto;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    border: 0;
    box-shadow: none;
    display: none;
    background: var(--carta-2);
    border-radius: 0;
  }
  .voce.aperta .tendina { display: block; }
  .voce:hover .tendina { transform: none; }
  .voce.aperta .voce__punta { transform: rotate(-135deg) translateY(-3px); }
  .tendina__interno { grid-template-columns: 1fr; padding: 6px 10px 14px; gap: 0; }
  .tendina--stretta .tendina__interno { grid-template-columns: 1fr; }
  .tendina__titolo { margin-top: 14px; }
  .tendina__colonna a span { display: none; }
  .tendina__colonna a { padding: 10px 10px 10px 15px; }
  .tendina__piede { padding: 14px 16px; }
  .piastrelle-testo { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .piastrelle-testo { grid-template-columns: 1fr; }
  .collegata { padding: 18px 20px; }
}

@media (hover: none) {
  .voce:hover .tendina { opacity: 0; visibility: hidden; pointer-events: none; }
  .voce.aperta .tendina { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
}

/* ---------- piede a sei colonne, social, riga reperibilita ---------- */

.piede__griglia { grid-template-columns: 1.5fr repeat(5, 1fr); gap: 30px; }
.piede ul { gap: 8px; font-size: 13.5px; }

.social { display: flex; gap: 10px; margin-top: 20px; }
.social a {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(167, 126, 68, 0.34);
  border-radius: 50%;
  color: #B9C6C1;
  transition: color 0.3s var(--curva), border-color 0.3s var(--curva),
              background 0.3s var(--curva), transform 0.3s var(--curva);
}
.social a svg { width: 17px; height: 17px; }
.social a:hover {
  color: #16211D;
  background: var(--oro-chiaro);
  border-color: var(--oro-chiaro);
  transform: translateY(-3px);
}

.piede__reperibile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
  border-top: 1px solid rgba(167, 126, 68, 0.22);
  font-size: 14.5px;
  color: #B9C6C1;
  flex-wrap: wrap;
}
.piede__reperibile a { color: #fff; font-weight: 600; }
.piede__reperibile a:hover { color: var(--oro-chiaro); }

@media (max-width: 1180px) { .piede__griglia { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .piede__griglia { grid-template-columns: repeat(2, 1fr); gap: 26px; } }
@media (max-width: 460px)  { .piede__griglia { grid-template-columns: 1fr; } }

/* ---------- la tendina si ancora al contenitore, non alla voce ---------- */

.intestazione .contenitore { position: relative; }
.voce { position: static; }

.tendina {
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  transform: translateY(-10px);
}
.tendina--stretta { width: auto; }
.voce:hover .tendina,
.voce:focus-within .tendina { transform: translateY(0); }

.tendina::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 10px;
}
.voce::after { display: none; }

.tendina__interno { max-width: 1180px; margin-inline: auto; }
.tendina--stretta .tendina__interno { max-width: 720px; margin-inline: auto; }
.tendina--stretta .tendina__piede { max-width: none; }

@media (hover: none) {
  .voce.aperta .tendina { transform: translateY(0); }
}

@media (max-width: 1000px) {
  .intestazione .contenitore { position: relative; }
  .tendina { transform: none; }
  .tendina::before { display: none; }
  .tendina__interno, .tendina--stretta .tendina__interno { max-width: none; }
}

/* ==================================================================
   v4 - ricerca, chat, carrello, tendine appiccicose
   ================================================================== */

/* ---------- ricerca ---------- */

.apri-cerca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: transparent;
  color: var(--inchiostro);
  cursor: pointer;
  transition: border-color 0.3s var(--curva), color 0.3s var(--curva), transform 0.3s var(--curva);
}
.apri-cerca:hover { border-color: var(--oro); color: var(--oro); transform: translateY(-2px); }
.apri-cerca[aria-expanded="true"] { background: var(--oro); border-color: var(--oro); color: #fff; }

.cerca {
  position: sticky;
  top: 78px;
  z-index: 85;
  background: var(--carta);
  border-bottom: 2px solid var(--oro);
  box-shadow: 0 22px 44px -30px rgba(22, 33, 29, 0.5);
  animation: cercaGiu 0.34s var(--curva);
}
@keyframes cercaGiu { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.cerca[hidden] { display: none; }

.cerca__riga {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: 22px 8px;
}
.cerca__lente { width: 22px; height: 22px; color: var(--oro); flex: none; }
.cerca__riga input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: var(--display);
  font-size: clamp(20px, 3vw, 30px);
  color: var(--inchiostro);
  padding: 6px 0;
}
.cerca__riga input:focus { outline: none; }
.cerca__riga input::placeholder { color: #A9B3B0; }
.cerca__chiudi {
  border: 0; background: transparent; cursor: pointer;
  font-size: 30px; line-height: 1; color: var(--fumo); padding: 0 6px;
  transition: color 0.25s var(--curva), transform 0.25s var(--curva);
}
.cerca__chiudi:hover { color: var(--oro); transform: rotate(90deg); }

.cerca__suggerimenti {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  padding-bottom: 20px;
  font-size: 13px; color: var(--fumo);
}
.cerca__suggerimenti a {
  padding: 5px 13px;
  border: 1px solid var(--bordo);
  border-radius: 100px;
  color: var(--inchiostro);
  font-size: 13px;
  transition: all 0.28s var(--curva);
}
.cerca__suggerimenti a:hover { border-color: var(--oro); background: var(--oro-velo); color: var(--oro); }

.cerca__esiti { max-height: 58vh; overflow-y: auto; padding-bottom: 22px; }
.cerca__gruppo {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--oro); padding: 16px 0 8px; border-bottom: 1px solid var(--oro-filo); margin-bottom: 6px;
}
.esito {
  display: block;
  position: relative;
  padding: 12px 16px 12px 18px;
  border-radius: 3px;
  color: var(--inchiostro);
  transition: background 0.24s var(--curva), padding-left 0.24s var(--curva);
}
.esito b { display: block; font-size: 16px; font-weight: 600; }
.esito span { display: block; font-size: 13.5px; color: var(--fumo); margin-top: 2px; }
.esito mark { background: rgba(167, 126, 68, 0.24); color: inherit; border-radius: 2px; padding: 0 2px; }
.esito::before {
  content: '';
  position: absolute; left: 5px; top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px;
  background: var(--oro);
  transform: rotate(45deg) scale(0);
  transition: transform 0.26s var(--curva);
}
.esito:hover, .esito.scelto { background: var(--oro-velo); padding-left: 24px; }
.esito:hover::before, .esito.scelto::before { transform: rotate(45deg) scale(1); }
.esito__prezzo { color: var(--oro); font-family: var(--display); font-size: 17px; float: right; }
.cerca__niente { padding: 26px 0; color: var(--fumo); font-size: 15px; }

@media (max-width: 1000px) { .cerca { top: 66px; } }

/* ---------- chat dal vivo ---------- */

.chat-bolla {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 180;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 20px 13px 16px;
  border: 0;
  border-radius: 100px;
  background: var(--scuro);
  color: #EDF1EF;
  font-family: var(--testo);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 18px 40px -18px rgba(22, 33, 29, 0.65);
  transition: transform 0.34s var(--curva), box-shadow 0.34s var(--curva), background 0.34s var(--curva);
}
.chat-bolla:hover {
  transform: translateY(-3px);
  background: #1F2E29;
  box-shadow: 0 24px 50px -20px rgba(22, 33, 29, 0.75);
}
.chat-bolla svg { width: 19px; height: 19px; color: var(--oro-chiaro); }
.chat-bolla__stato {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--fumo);
  flex: none;
}
.chat-bolla__stato.online { background: var(--verde); animation: respiro 2.8s ease-out infinite; }
.chat-bolla__segno {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 20px; height: 20px;
  border-radius: 10px;
  background: var(--oro);
  color: #fff;
  font-size: 11px; font-weight: 700;
  display: none; align-items: center; justify-content: center;
}
.chat-bolla__segno.visibile { display: flex; }

.chat {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 181;
  width: min(380px, calc(100vw - 30px));
  max-height: min(620px, calc(100vh - 44px));
  display: none;
  flex-direction: column;
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-top: 2px solid var(--oro);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 30px 70px -26px rgba(22, 33, 29, 0.55);
  animation: chatSu 0.34s var(--curva);
}
.chat.aperta { display: flex; }
@keyframes chatSu { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }

.chat__testa {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--scuro);
  color: #E4EAE7;
}
.chat__ritratto {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--oro-chiaro), var(--oro));
  display: grid; place-items: center;
  font-family: var(--display);
  font-size: 17px;
  color: #16211D;
  flex: none;
}
.chat__chi b { display: block; font-size: 15px; font-weight: 600; }
.chat__chi span { display: block; font-size: 12.5px; color: #8FA09B; display: flex; align-items: center; gap: 6px; }
.chat__chiudi {
  margin-left: auto;
  border: 0; background: transparent; cursor: pointer;
  color: #8FA09B; font-size: 24px; line-height: 1; padding: 2px 6px;
  transition: color 0.24s var(--curva), transform 0.24s var(--curva);
}
.chat__chiudi:hover { color: #fff; transform: rotate(90deg); }

.chat__corpo {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  background: var(--carta-2);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 220px;
}
.chat__nota {
  font-size: 12.5px;
  color: var(--fumo);
  text-align: center;
  padding: 6px 10px;
  line-height: 1.45;
}
.messaggio {
  max-width: 82%;
  padding: 11px 15px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.5;
  animation: messaggioSu 0.28s var(--curva);
  word-break: break-word;
}
@keyframes messaggioSu { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.messaggio--ospite { align-self: flex-end; background: var(--verde); color: #fff; border-bottom-right-radius: 4px; }
.messaggio--agenzia { align-self: flex-start; background: var(--carta); border: 1px solid var(--bordo); border-bottom-left-radius: 4px; }
.messaggio__quando { display: block; font-size: 11px; opacity: 0.7; margin-top: 4px; }

.chat__piede { padding: 14px 16px; border-top: 1px solid var(--bordo); background: var(--carta); }
.chat__scrivi { display: flex; gap: 9px; align-items: flex-end; }
.chat__scrivi textarea {
  flex: 1;
  border: 1px solid var(--bordo);
  border-radius: 18px;
  padding: 11px 15px;
  font-family: var(--testo);
  font-size: 14.5px;
  resize: none;
  max-height: 110px;
  min-height: 42px;
  line-height: 1.4;
}
.chat__scrivi textarea:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px var(--oro-velo); }
.chat__manda {
  width: 42px; height: 42px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--oro);
  color: #fff;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.28s var(--curva), transform 0.28s var(--curva);
}
.chat__manda:hover { background: #8F6A36; transform: scale(1.06); }
.chat__manda:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.chat__manda svg { width: 18px; height: 18px; }

.chat .campo { margin-bottom: 12px; }
.chat__avvio { padding: 20px 18px; }
.chat__avvio h3 { font-size: 20px; margin-bottom: 6px; }
.chat__avvio p { font-size: 14px; color: var(--fumo); margin-bottom: 18px; }

@media (max-width: 520px) {
  .chat-bolla { right: 14px; bottom: 14px; padding: 12px 17px 12px 14px; font-size: 13.5px; }
  .chat { right: 10px; left: 10px; bottom: 10px; width: auto; max-height: calc(100vh - 20px); }
}

/* ---------- tendine: restano aperte, non scappano ---------- */

/* il comando passa al JS: niente piu apertura sul solo :hover */
.voce:hover .tendina { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px); }
.voce.aperta .tendina,
.voce:focus-within .tendina {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.voce.aperta .voce__testa,
.voce:focus-within .voce__testa { color: var(--oro); }
.voce.aperta .voce__testa::after { transform: scaleX(1); }
.voce.aperta .voce__punta { transform: rotate(-135deg) translateY(-3px); opacity: 1; }

/* quando e bloccata da un clic si vede che resta li */
.voce.bloccata .voce__testa { background: var(--oro-velo); }
.voce.bloccata .tendina { border-top-width: 3px; }

@media (max-width: 1000px) {
  .voce.aperta .tendina, .voce:focus-within .tendina { transform: none; }
  .voce:hover .tendina { display: none; }
  .voce.aperta .tendina { display: block; }
}

/* ---------- carrello a cassetto ---------- */

.velo-carrello {
  position: fixed;
  inset: 0;
  background: rgba(22, 33, 29, 0.45);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.34s var(--curva), visibility 0.34s;
  z-index: 190;
}
.velo-carrello.aperto { opacity: 1; visibility: visible; }

.cassetto {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(430px, 100vw);
  background: var(--carta);
  z-index: 191;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.42s var(--curva), box-shadow 0.42s var(--curva);
  box-shadow: none;
}
/* l ombra solo da aperto: da chiuso il pannello e fuori schermo ma l ombra
   rientrava e disegnava una striscia scura sul bordo destro di ogni pagina */
.cassetto.aperto { transform: none; box-shadow: -24px 0 60px -30px rgba(22, 33, 29, 0.6); }

.cassetto__testa {
  display: flex; align-items: center; gap: 14px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--bordo);
}
.cassetto__testa h2 { font-size: 24px; }
.cassetto__testa .brindello { margin-left: 4px; }
.cassetto__chiudi {
  margin-left: auto;
  border: 0; background: transparent; cursor: pointer;
  font-size: 28px; line-height: 1; color: var(--fumo); padding: 0 4px;
  transition: color 0.24s var(--curva), transform 0.24s var(--curva);
}
.cassetto__chiudi:hover { color: var(--oro); transform: rotate(90deg); }

.cassetto__corpo { flex: 1; overflow-y: auto; padding: 8px 24px; }
.cassetto__piede { padding: 20px 24px 24px; border-top: 1px solid var(--bordo); background: var(--carta-2); }

.riga-cassetto {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--bordo);
}
.riga-cassetto:last-child { border-bottom: 0; }
.riga-cassetto__figura {
  width: 68px; height: 68px;
  border: 1px solid var(--bordo);
  border-radius: 3px;
  background: linear-gradient(168deg, var(--figura-a), var(--figura-b));
  display: grid; place-items: center;
  overflow: hidden;
}
.riga-cassetto__figura svg { width: 62%; height: 62%; }
.riga-cassetto__figura img { width: 100%; height: 100%; object-fit: cover; }
.riga-cassetto b { display: block; font-family: var(--display); font-size: 17px; font-weight: 400; line-height: 1.25; }
.riga-cassetto__meta { font-size: 12.5px; color: var(--fumo); margin-top: 2px; }
.riga-cassetto__destra { text-align: right; }
.riga-cassetto__destra .prezzo { font-size: 18px; display: block; }

.contatore {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--bordo);
  border-radius: 100px;
  overflow: hidden;
  margin-top: 8px;
}
.contatore button {
  width: 28px; height: 28px;
  border: 0; background: transparent; cursor: pointer;
  font-size: 15px; color: var(--inchiostro); font-family: var(--testo);
  transition: background 0.22s var(--curva), color 0.22s var(--curva);
}
.contatore button:hover { background: var(--oro-velo); color: var(--oro); }
.contatore span { min-width: 26px; text-align: center; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* barra della spedizione gratuita */
.spedizione-barra { margin: 14px 0 6px; }
.spedizione-barra__testo { font-size: 13px; color: var(--fumo); margin-bottom: 7px; }
.spedizione-barra__testo b { color: var(--oro); }
.spedizione-barra__pista {
  height: 5px;
  border-radius: 3px;
  background: var(--pietra-scura);
  overflow: hidden;
}
.spedizione-barra__pieno {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--oro), var(--oro-chiaro));
  width: 0;
  transition: width 0.6s var(--curva);
}
.spedizione-barra--completa .spedizione-barra__pieno { background: linear-gradient(90deg, var(--verde), var(--verde-cupo)); }

.cassetto__totale {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
}
.cassetto__totale b { font-family: var(--display); font-size: 18px; font-weight: 400; }
.cassetto__totale .prezzo { font-size: 28px; }
.cassetto__vuoto { text-align: center; padding: 60px 20px; }
.cassetto__vuoto svg { width: 54px; height: 54px; color: var(--oro); opacity: 0.55; margin: 0 auto 18px; }
.cassetto__vuoto h3 { font-size: 22px; margin-bottom: 8px; }
.cassetto__vuoto p { color: var(--fumo); font-size: 14.5px; margin-bottom: 22px; }

/* ---------- chat nel pannello ---------- */

.admin-chat {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  align-items: start;
  min-height: 60vh;
}
.admin-chat__elenco {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  overflow: hidden;
  max-height: 72vh;
  overflow-y: auto;
}
.conversazione {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--bordo);
  background: transparent;
  padding: 15px 18px;
  cursor: pointer;
  font-family: var(--testo);
  transition: background 0.24s var(--curva);
}
.conversazione:hover { background: var(--carta-2); }
.conversazione.scelta { background: var(--oro-velo); box-shadow: inset 3px 0 0 var(--oro); }
.conversazione b { display: block; font-size: 15px; }
.conversazione span { display: block; font-size: 12.5px; color: var(--fumo); margin-top: 2px; }
.conversazione__anteprima { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversazione.nuova b::after {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  margin-left: 7px;
  border-radius: 50%;
  background: var(--oro);
}

.admin-chat__finestra {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  display: flex;
  flex-direction: column;
  min-height: 60vh;
  max-height: 72vh;
  overflow: hidden;
}
.admin-chat__testa {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--bordo);
  flex-wrap: wrap;
}
.admin-chat__testa h2 { font-size: 21px; }
.admin-chat__testa .azioni-riga { margin-left: auto; }
.admin-chat__corpo {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  background: var(--carta-2);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-chat__corpo .messaggio--ospite { align-self: flex-start; background: var(--carta); border: 1px solid var(--bordo); color: var(--inchiostro); border-bottom-left-radius: 4px; border-bottom-right-radius: 14px; }
.admin-chat__corpo .messaggio--agenzia { align-self: flex-end; background: var(--verde); color: #fff; border-bottom-right-radius: 4px; border-bottom-left-radius: 14px; }
.admin-chat__piede { padding: 14px 18px; border-top: 1px solid var(--bordo); }
.admin-chat__vuota { display: grid; place-items: center; height: 100%; color: var(--fumo); font-size: 15px; padding: 40px; text-align: center; }

@media (max-width: 1080px) { .admin-chat { grid-template-columns: 1fr; } .admin-chat__elenco { max-height: 300px; } }

/* ==================================================================
   v5 - il lumino centrato sul testo, e vivo
   ================================================================== */

.eroe--foto .eroe__griglia { align-items: center; }

.lumino {
  justify-content: center;
  align-self: center;
  min-height: auto;
  padding: 0;
}
.lumino svg {
  width: 240px;
  max-width: 100%;
  animation: luminoGalleggia 7.5s ease-in-out infinite;
  transform-origin: 50% 92%;
}

/* respiro lentissimo della lampada: si alza e si abbassa di pochissimo */
@keyframes luminoGalleggia {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-7px) rotate(0.4deg); }
}

/* l alone: due tempi diversi, cosi non si vede il ciclo */
.lumino__alone {
  top: -6%;
  width: 400px; height: 400px;
  background: radial-gradient(circle,
    rgba(255, 215, 140, 0.30) 0%,
    rgba(201, 156, 94, 0.13) 38%,
    rgba(167, 126, 68, 0.04) 62%,
    transparent 74%);
  animation: alone 5.5s ease-in-out infinite, sfarfallio 3.1s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes sfarfallio {
  0%, 100% { filter: brightness(1); }
  18%      { filter: brightness(1.14); }
  34%      { filter: brightness(0.93); }
  57%      { filter: brightness(1.08); }
  76%      { filter: brightness(0.97); }
}

/* i raggi: un ventaglio di luce che gira pianissimo */
.lumino__raggi {
  position: absolute;
  top: -14%;
  left: 50%;
  width: 480px; height: 480px;
  transform: translateX(-50%);
  pointer-events: none;
  background: conic-gradient(from 0deg,
    rgba(255, 214, 138, 0.11) 0deg 6deg, transparent 6deg 26deg,
    rgba(255, 214, 138, 0.08) 26deg 30deg, transparent 30deg 58deg,
    rgba(255, 214, 138, 0.13) 58deg 63deg, transparent 63deg 96deg,
    rgba(255, 214, 138, 0.07) 96deg 100deg, transparent 100deg 140deg,
    rgba(255, 214, 138, 0.11) 140deg 145deg, transparent 145deg 190deg,
    rgba(255, 214, 138, 0.09) 190deg 195deg, transparent 195deg 240deg,
    rgba(255, 214, 138, 0.12) 240deg 245deg, transparent 245deg 292deg,
    rgba(255, 214, 138, 0.08) 292deg 297deg, transparent 297deg 340deg,
    rgba(255, 214, 138, 0.10) 340deg 345deg, transparent 345deg 360deg);
  -webkit-mask-image: radial-gradient(circle, #000 12%, rgba(0,0,0,.55) 34%, transparent 68%);
  mask-image: radial-gradient(circle, #000 12%, rgba(0,0,0,.55) 34%, transparent 68%);
  animation: raggiGirano 64s linear infinite;
  opacity: 0.85;
}
@keyframes raggiGirano {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg); }
}

/* la fiamma: due animazioni sovrapposte, il ciclo non si ripete a occhio */
.lumino__fiamma {
  transform-origin: 50% 100%;
  animation: fiamma 3.4s ease-in-out infinite, guizzo 1.13s ease-in-out infinite;
}
@keyframes guizzo {
  0%, 100% { opacity: 1; }
  40%      { opacity: 0.90; }
  62%      { opacity: 1; }
  81%      { opacity: 0.95; }
}

/* accensione al caricamento della pagina */
.lumino[data-rivela].visto svg { animation: luminoGalleggia 7.5s ease-in-out infinite 1.1s; }
.lumino[data-rivela].visto .lumino__fiamma {
  animation: accendi 1s var(--curva) both,
             fiamma 3.4s ease-in-out infinite 1s,
             guizzo 1.13s ease-in-out infinite 1s;
}
@keyframes accendi {
  0%   { transform: scaleY(0) scaleX(0.4); opacity: 0; }
  38%  { transform: scaleY(1.28) scaleX(1.16); opacity: 1; }
  56%  { transform: scaleY(0.86) scaleX(0.94); }
  74%  { transform: scaleY(1.08) scaleX(1.03); }
  100% { transform: none; opacity: 1; }
}
.lumino[data-rivela].visto .lumino__alone {
  animation: bagliore 1.3s var(--curva) both,
             alone 5.5s ease-in-out infinite 1.3s,
             sfarfallio 3.1s ease-in-out infinite 1.3s;
}
@keyframes bagliore {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.35); }
  46%  { opacity: 1; transform: translateX(-50%) scale(1.16); }
  100% { opacity: 0.75; transform: translateX(-50%) scale(1); }
}

.lumino__didascalia { margin-top: 30px; }

@media (max-width: 1080px) {
  .lumino svg { width: 200px; }
  .lumino__raggi { width: 380px; height: 380px; }
  .lumino__alone { width: 320px; height: 320px; }
}
@media (max-width: 760px) {
  .lumino svg { width: 170px; }
  .lumino__raggi { width: 300px; height: 300px; }
  .lumino__alone { width: 260px; height: 260px; }
  .lumino__didascalia { margin-top: 22px; }
}


/* ==================================================================
   v6 - le prime ore come linea del tempo, e la fascia del piede
   ================================================================== */

/* --- azzero il vecchio disegno a trattini --- */
.passo { border-top: 0 !important; }
.passo::before, .passo::after { content: none !important; }

.passi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  counter-reset: passo;
}
/* la linea dorata che attraversa tutto */
.passi::before {
  content: '';
  position: absolute;
  top: 13px;
  left: 7px; right: 7px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--oro) 4%, var(--oro) 96%, transparent);
  opacity: 0.55;
}

.passo {
  position: relative;
  padding: 44px 32px 0 0;
  counter-increment: passo;
}
.passo:not(:last-child)::marker { content: none; }

/* il rombo sulla linea */
.passo__segno {
  position: absolute;
  top: 7px; left: 0;
  width: 13px; height: 13px;
  background: var(--pietra);
  border: 1px solid var(--oro);
  transform: rotate(45deg);
  transition: background 0.4s var(--curva), transform 0.5s var(--curva), box-shadow 0.4s var(--curva);
}
.sezione--carta .passo__segno { background: var(--carta); }
.passo__segno::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--oro);
  transform: scale(0);
  transition: transform 0.4s var(--curva);
}
.passo:hover .passo__segno { transform: rotate(45deg) scale(1.25); box-shadow: 0 0 0 6px var(--oro-velo); }
.passo:hover .passo__segno::after { transform: scale(1); }

/* il numero grande, in filigrana */
.passo::first-line { }
.passo__quando {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 10px;
}
.passo h3 {
  font-size: 23px;
  margin-bottom: 9px;
  display: flex;
  align-items: baseline;
  gap: 11px;
}
.passo h3::before {
  content: counter(passo, decimal-leading-zero);
  font-family: var(--testo);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--bordo);
  transition: color 0.4s var(--curva);
}
.passo:hover h3::before { color: var(--oro); }
.passo p { font-size: 15px; color: var(--fumo); margin: 0; }

@media (max-width: 1080px) {
  .passi { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .passi::before { display: none; }
  .passo { padding: 0 28px 0 26px; border-left: 1px solid var(--oro-filo); }
  .passo__segno { top: 4px; left: -7px; }
}
@media (max-width: 640px) {
  .passi { grid-template-columns: 1fr; row-gap: 28px; }
}

/* ---------- divisori dorati ---------- */

.divisore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding-block: 20px;
}
.divisore::before, .divisore::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 176, 113, 0.42) 60%, var(--oro));
}
.divisore::after { background: linear-gradient(90deg, var(--oro), rgba(217, 176, 113, 0.42) 40%, transparent); }
.divisore span {
  width: 6px; height: 6px;
  background: var(--oro);
  transform: rotate(45deg);
  flex: none;
}
.divisore span:nth-child(2) { width: 9px; height: 9px; background: var(--oro-chiaro); }
.divisore span:first-child, .divisore span:last-child { opacity: 0.55; }

/* sul chiaro */
.sezione .divisore::before { background: linear-gradient(90deg, transparent, rgba(167, 126, 68, 0.35) 60%, var(--oro)); }
.sezione .divisore::after  { background: linear-gradient(90deg, var(--oro), rgba(167, 126, 68, 0.35) 40%, transparent); }

/* ---------- il piede rifatto ---------- */

.piede__griglia { border-top: 0; padding-top: 0; }
.piede__coda { border-top: 0; padding-block: 4px 30px; }

.occhiello--chiaro { color: var(--oro-chiaro); }
.occhiello--chiaro::before { background: var(--oro-chiaro); }
.occhiello--chiaro::after { background: linear-gradient(90deg, var(--oro-chiaro), transparent); }

.piede__reperibile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  flex-wrap: wrap;
  padding: 30px 34px;
  border: 1px solid rgba(217, 176, 113, 0.28);
  border-radius: var(--raggio-g);
  background:
    radial-gradient(90% 160% at 88% 0%, rgba(167, 126, 68, 0.16), transparent 62%),
    rgba(255, 255, 255, 0.022);
  position: relative;
  overflow: hidden;
}
.piede__reperibile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--oro), transparent);
}
.piede__reperibile .occhiello { margin-bottom: 12px; }
.piede__reperibile .occhiello::after { max-width: 60px; }
.piede__reperibile .pulsazione { margin-right: 2px; }

.piede__numero {
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(32px, 4.2vw, 46px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: #F1F4F3;
  font-variant-numeric: tabular-nums;
  position: relative;
  transition: color 0.34s var(--curva);
}
.piede__numero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--oro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.42s var(--curva);
}
.piede__numero:hover { color: var(--oro-chiaro); }
.piede__numero:hover::after { transform: scaleX(1); }

.piede__reperibile__nota { margin: 14px 0 0; font-size: 14px; color: #8FA09B; max-width: 42ch; }
.piede__reperibile__azioni { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 760px) {
  .piede__reperibile { padding: 24px 22px; gap: 22px; }
  .divisore { padding-block: 22px; }
  .piede__reperibile__azioni { width: 100%; }
  .piede__reperibile__azioni .bottone { flex: 1; min-width: 140px; }
}

/* nella fascia del piede il rombo lascia il posto alla fiammella pulsante */
.piede__reperibile .occhiello::before { display: none; }
.piede__reperibile .occhiello { gap: 10px; }

/* ==================================================================
   v7 - palette: meno bianco, piu oro e piu celeste. E la notte.
   ================================================================== */

:root {
  color-scheme: light;

  /* fondo e superfici: velate di celeste, non bianche */
  --pietra:        #E4E9E8;
  --pietra-scura:  #D5DEDB;
  --carta:         #F2F8F6;
  --carta-2:       #E9F1EE;
  --figura-a:      #E7F1EE;
  --figura-b:      #D2E2DD;

  /* bordi con dentro il celeste */
  --bordo:         #C2D3CE;
  --bordo-scuro:   rgba(217, 176, 113, 0.16);

  /* testo */
  --inchiostro:    #14201C;
  --fumo:          #566862;

  /* celeste */
  --verde:         var(--verde);
  --verde-cupo:    var(--verde-cupo);
  --verde-fondo:   #2F6A59;
  --verde-velo:    #DCEDE8;
  --verde-filo:    rgba(21, 73, 89, 0.34);

  /* oro */
  --oro:           #A77E44;
  --oro-chiaro:    #D9B071;
  --oro-velo:      rgba(167, 126, 68, 0.13);
  --oro-filo:      rgba(167, 126, 68, 0.34);

  /* pannelli scuri */
  --scuro:         #14201C;
  --scuro-2:       #1C2B26;
  --su-scuro:      #DDE8E4;
  --su-scuro-fumo: #8CA39C;

  --rosso:         #B3453C;
  --rosso-velo:    #F7E7E5;

  --velo-testata:  rgba(228, 233, 232, 0.90);
}

:root {
  color-scheme: dark;

  --pietra:        #0E1614;
  --pietra-scura:  #16211D;
  --carta:         #16211D;
  --carta-2:       #1B2A25;
  --figura-a:      #1E2E28;
  --figura-b:      #16231F;

  --bordo:         rgba(217, 176, 113, 0.22);
  --bordo-scuro:   rgba(217, 176, 113, 0.16);

  --inchiostro:    #E2EDE9;
  --fumo:          #93AAA3;

  --verde:         var(--verde);
  --verde-cupo:    #7FC6B2;
  --verde-fondo:   #9AD6C4;
  --verde-velo:    rgba(21, 73, 89, 0.13);
  --verde-filo:    rgba(21, 73, 89, 0.34);

  --oro:           #D9B071;
  --oro-chiaro:    #F0D6A2;
  --oro-velo:      rgba(217, 176, 113, 0.13);
  --oro-filo:      rgba(217, 176, 113, 0.32);

  --scuro:         #0B1210;
  --scuro-2:       #16211D;
  --su-scuro:      #DDE8E4;
  --su-scuro-fumo: #8CA39C;

  --rosso:         #E08078;
  --rosso-velo:    rgba(224, 128, 120, 0.12);

  --velo-testata:  rgba(14, 22, 20, 0.90);

  --ombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --ombra-alta: 0 2px 4px rgba(0, 0, 0, 0.4), 0 24px 48px -20px rgba(0, 0, 0, 0.7);
}

/* chi non sceglie, segue il sistema */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --pietra: #0E1614; --pietra-scura: #16211D;
    --carta: #16211D; --carta-2: #1B2A25;
    --figura-a: #1E2E28; --figura-b: #16231F;
    --bordo: rgba(217, 176, 113, 0.22);
    --inchiostro: #E2EDE9; --fumo: #93AAA3;
    --verde-cupo: #7FC6B2; --verde-fondo: #9AD6C4;
    --verde-velo: rgba(21, 73, 89, 0.13);
    --oro: #D9B071; --oro-chiaro: #F0D6A2;
    --oro-velo: rgba(217, 176, 113, 0.13);
    --oro-filo: rgba(217, 176, 113, 0.32);
    --scuro: #0B1210; --scuro-2: #16211D;
    --rosso: #E08078; --rosso-velo: rgba(224, 128, 120, 0.12);
    --velo-testata: rgba(14, 22, 20, 0.90);
    --ombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
    --ombra-alta: 0 2px 4px rgba(0, 0, 0, 0.4), 0 24px 48px -20px rgba(0, 0, 0, 0.7);
  }
}

/* ---------- tavole dei prezzi, rifatte ---------- */

.prosa .tavola-guscio, .griglia-due .tavola-guscio {
  border: 1px solid var(--bordo);
  border-top: 2px solid var(--oro);
  border-radius: var(--raggio);
  background: var(--carta);
  box-shadow: var(--ombra);
}
.prosa .tavola, .griglia-due .tavola { min-width: 0; font-size: 15px; }

.prosa .tavola thead th, .griglia-due .tavola thead th {
  background: linear-gradient(180deg, var(--oro-velo), transparent);
  border-bottom: 1px solid var(--oro-filo);
  color: var(--oro);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  padding: 16px 22px;
}
.prosa .tavola td, .griglia-due .tavola td {
  padding: 16px 22px;
  border-bottom: 1px solid var(--bordo);
}
.prosa .tavola tbody tr:last-child td { border-bottom: 0; }
.prosa .tavola tbody tr:nth-child(even) { background: var(--carta-2); }
.prosa .tavola tbody tr:hover { background: var(--verde-velo); }
.prosa .tavola td:first-child { font-weight: 600; }

/* il prezzo, in oro e in colonna */
.prosa .tavola td.numerico, .griglia-due .tavola td.numerico {
  font-family: var(--display);
  font-size: 19px;
  color: var(--oro);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.prosa .tavola td:not(:first-child):not(.numerico) { color: var(--fumo); }

/* la barretta dorata a sinistra della riga */
.prosa .tavola tbody tr td:first-child::before,
.griglia-due .tavola tbody tr td:first-child::before {
  width: 3px;
  background: linear-gradient(180deg, var(--oro), var(--oro-chiaro));
}

@media (max-width: 640px) {
  .prosa .tavola thead th, .prosa .tavola td { padding: 13px 15px; }
  .prosa .tavola td.numerico { font-size: 17px; }
}

/* ---------- le cifre salgono ---------- */

.cifre { background: var(--oro-filo); }
.cifra { position: relative; overflow: hidden; }
.cifra::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--oro), transparent);
  transition: width 0.7s var(--curva), left 0.7s var(--curva);
}
.cifra:hover::after { width: 70%; left: 15%; }

.cifra__numero {
  display: block;
  overflow: hidden;
  padding-bottom: 4px;
}
.cifra__numero > span {
  display: inline-block;
  transform: translateY(115%);
  opacity: 0;
  transition: transform 0.95s cubic-bezier(0.16, 0.9, 0.28, 1), opacity 0.5s ease-out;
}
.cifra.salita .cifra__numero > span { transform: none; opacity: 1; }

.cifra__voce {
  display: block;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s var(--curva) 0.28s, transform 0.6s var(--curva) 0.28s;
}
.cifra.salita .cifra__voce { opacity: 1; transform: none; }

.cifra:hover .cifra__numero > span { color: var(--oro-chiaro); transition: color 0.3s var(--curva); }

@media (prefers-reduced-motion: reduce) {
  .cifra__numero > span, .cifra__voce { transform: none !important; opacity: 1 !important; }
}

/* ---------- interruttore giorno / notte ---------- */

.cambia-tema {
  position: relative;
  width: 42px; height: 42px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.3s var(--curva), transform 0.3s var(--curva), background 0.3s var(--curva);
}
.cambia-tema:hover { border-color: var(--oro); transform: translateY(-2px); background: var(--oro-velo); }

.cambia-tema__sole, .cambia-tema__luna {
  position: absolute;
  top: 50%; left: 50%;
  transition: transform 0.55s var(--curva), opacity 0.4s var(--curva);
}
/* il sole: un disco con la corona */
.cambia-tema__sole {
  width: 13px; height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: var(--oro);
  box-shadow:
    0 -10px 0 -5px var(--oro), 0 10px 0 -5px var(--oro),
    -10px 0 0 -5px var(--oro), 10px 0 0 -5px var(--oro),
    -7px -7px 0 -5.5px var(--oro), 7px 7px 0 -5.5px var(--oro),
    -7px 7px 0 -5.5px var(--oro), 7px -7px 0 -5.5px var(--oro);
  transform: rotate(0deg) scale(1);
}
/* la luna: un disco morso */
.cambia-tema__luna {
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--oro-chiaro);
  box-shadow: inset -5px 2px 0 0 var(--pietra);
  transform: rotate(-70deg) scale(0);
  opacity: 0;
}
:root .cambia-tema__sole { transform: rotate(90deg) scale(0); opacity: 0; }
:root .cambia-tema__luna { transform: rotate(0deg) scale(1); opacity: 1; }
@media (prefers-color-scheme: dark) {
  :root .cambia-tema__sole { transform: rotate(90deg) scale(0); opacity: 0; }
  :root .cambia-tema__luna { transform: rotate(0deg) scale(1); opacity: 1; }
}

/* di notte le fotografie si abbassano di luce */
:root .foto img { filter: grayscale(0.35) brightness(0.82) contrast(1.04); }
:root .piastrella img { filter: grayscale(0.55) brightness(0.42); }
:root .testata-pagina__sfondo { filter: grayscale(0.45) brightness(0.26); }
:root .eroe__sfondo { filter: grayscale(0.38) brightness(0.34) contrast(1.06); }
@media (prefers-color-scheme: dark) {
  :root .foto img { filter: grayscale(0.35) brightness(0.82) contrast(1.04); }
  :root .piastrella img { filter: grayscale(0.55) brightness(0.42); }
  :root .testata-pagina__sfondo { filter: grayscale(0.45) brightness(0.26); }
}

/* il cambio non deve strappare */
body, .intestazione, .cerca, .tendina, .carta-prodotto, .carta-servizio,
.necrologio, .recensione, .carta-tariffa, .tavola-guscio, .riepilogo,
.cassetto, .chat, .collegata, .cifra {
  transition: background-color 0.35s var(--curva), border-color 0.35s var(--curva), color 0.35s var(--curva);
}

/* ---------- il lumino: scintille che salgono ---------- */

.lumino__scintille {
  position: absolute;
  top: 4%;
  left: 50%;
  width: 120px; height: 300px;
  margin-left: -60px;
  pointer-events: none;
  z-index: 2;
}
.lumino__scintille i {
  position: absolute;
  bottom: 46%;
  left: 50%;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--oro-chiaro);
  box-shadow: 0 0 6px 1px rgba(255, 214, 138, 0.75);
  opacity: 0;
  animation: scintilla 5.4s ease-out infinite;
}
.lumino__scintille i:nth-child(1) { animation-delay: 0s;    --deriva: -26px; }
.lumino__scintille i:nth-child(2) { animation-delay: 0.8s;  --deriva: 18px;  width: 2px; height: 2px; }
.lumino__scintille i:nth-child(3) { animation-delay: 1.7s;  --deriva: -9px;  }
.lumino__scintille i:nth-child(4) { animation-delay: 2.4s;  --deriva: 31px;  width: 2px; height: 2px; }
.lumino__scintille i:nth-child(5) { animation-delay: 3.2s;  --deriva: -34px; }
.lumino__scintille i:nth-child(6) { animation-delay: 4.1s;  --deriva: 7px;   width: 4px; height: 4px; }
.lumino__scintille i:nth-child(7) { animation-delay: 4.8s;  --deriva: -17px; width: 2px; height: 2px; }

@keyframes scintilla {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4); }
  8%   { opacity: 1; transform: translate(calc(var(--deriva) * 0.12), -14px) scale(1); }
  55%  { opacity: 0.9; transform: translate(calc(var(--deriva) * 0.6), -92px) scale(0.85); }
  100% { opacity: 0; transform: translate(var(--deriva), -186px) scale(0.2); }
}

/* un velo di luce che scorre sul bronzo, ogni tanto */
.lumino svg { position: relative; }
.lumino::after {
  content: '';
  position: absolute;
  top: 34%; left: 50%;
  width: 210px; height: 200px;
  margin-left: -105px;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 36%, rgba(255, 240, 205, 0.20) 47%, transparent 58%);
  transform: translateX(-130%);
  animation: velodiluce 9s ease-in-out infinite;
  animation-delay: 2.4s;
}
@keyframes velodiluce {
  0%, 62%, 100% { transform: translateX(-130%); }
  78%           { transform: translateX(130%); }
}

@media (max-width: 760px) {
  .lumino__scintille { width: 90px; height: 220px; margin-left: -45px; }
  .lumino::after { width: 150px; margin-left: -75px; }
}


/* ==================================================================
   v8 - palette definitiva
   principale #154959 - secondario #D2DFFA - terziario #878CC4
   verde #184935 - oro #A77E44
   ================================================================== */

:root {
  color-scheme: light;

  /* --- i colori dati --- */
  --blu:            #14808A;
  --celeste:        #D2DFFA;
  --viola:          #878CC4;
  --verde-bosco:    #184935;
  --oro:            #A77E44;

  /* il principale gira su tutti i token gia in uso */
  --verde:          #148E97;
  --verde-cupo:     #26AEB8;
  --verde-fondo:    #0E5A61;
  --verde-velo:     #E4F6F7;
  --verde-filo:     rgba(38, 174, 184, 0.30);

  /* fondo e superfici, velate di celeste */
  --pietra:         #E4E9F3;
  --pietra-scura:   #D2DFFA;
  --carta:          #F5F8FE;
  --carta-2:        #EAF0FC;
  --figura-a:       #E9F0FD;
  --figura-b:       #D2DFFA;

  --bordo:          #C4D3EC;
  --bordo-scuro:    rgba(210, 223, 250, 0.16);

  --inchiostro:     #10262E;
  --fumo:           #526974;

  --oro-chiaro:     #D9B071;
  --oro-velo:       rgba(167, 126, 68, 0.14);
  --oro-filo:       rgba(167, 126, 68, 0.36);

  --scuro:          #0A2A31;
  --scuro-2:        #10454B;
  --su-scuro:       #DEE8F6;
  --su-scuro-fumo:  #8FA6B4;

  --rosso:          #B3453C;
  --rosso-velo:     #F8E7E5;

  --velo-testata:   rgba(228, 233, 243, 0.90);
}

:root {
  color-scheme: dark;

  --verde:          #26AEB8;
  --verde-cupo:     #7FDCE3;
  --verde-fondo:    #A6E9ED;
  --verde-velo:     rgba(38, 174, 184, 0.10);
  --verde-filo:     rgba(38, 174, 184, 0.30);

  --pietra:         #071820;
  --pietra-scura:   #0D2C36;
  --carta:          #0D2C36;
  --carta-2:        #123B48;
  --figura-a:       #123B48;
  --figura-b:       #0D2C36;

  --bordo:          rgba(210, 223, 250, 0.17);
  --bordo-scuro:    rgba(210, 223, 250, 0.14);

  --inchiostro:     #DEE8F6;
  --fumo:           #8FA6B4;

  --oro:            #D9B071;
  --oro-chiaro:     #F0D6A2;
  --oro-velo:       rgba(217, 176, 113, 0.13);
  --oro-filo:       rgba(217, 176, 113, 0.32);

  --scuro:          #04171B;
  --scuro-2:        #0A2A31;

  --rosso:          #E08078;
  --rosso-velo:     rgba(224, 128, 120, 0.12);

  --velo-testata:   rgba(5, 22, 26, 0.90);

  --ombra: 0 1px 2px rgba(0, 0, 0, 0.34), 0 8px 24px -12px rgba(0, 0, 0, 0.62);
  --ombra-alta: 0 2px 4px rgba(0, 0, 0, 0.44), 0 24px 48px -20px rgba(0, 0, 0, 0.72);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --verde: #26AEB8; --verde-cupo: #7FDCE3; --verde-fondo: #A6E9ED;
    --verde-velo: rgba(210, 223, 250, 0.09); --verde-filo: rgba(210, 223, 250, 0.26);
    --pietra: #071820; --pietra-scura: #0D2C36;
    --carta: #0D2C36; --carta-2: #123B48;
    --figura-a: #123B48; --figura-b: #0D2C36;
    --bordo: rgba(210, 223, 250, 0.17); --bordo-scuro: rgba(210, 223, 250, 0.14);
    --inchiostro: #DEE8F6; --fumo: #8FA6B4;
    --oro: #D9B071; --oro-chiaro: #F0D6A2;
    --oro-velo: rgba(217, 176, 113, 0.13); --oro-filo: rgba(217, 176, 113, 0.32);
    --scuro: #051117; --scuro-2: #0D2C36;
    --rosso: #E08078; --rosso-velo: rgba(224, 128, 120, 0.12);
    --velo-testata: rgba(7, 24, 32, 0.90);
    --ombra: 0 1px 2px rgba(0, 0, 0, 0.34), 0 8px 24px -12px rgba(0, 0, 0, 0.62);
    --ombra-alta: 0 2px 4px rgba(0, 0, 0, 0.44), 0 24px 48px -20px rgba(0, 0, 0, 0.72);
  }
}

/* ==================================================================
   v9 - respiro nei bottoni e nelle schede
   ================================================================== */

.bottone {
  padding: 15px 28px;
  line-height: 1.25;
}
.bottone--piccolo { padding: 12px 20px; font-size: 13.5px; }
.bottone--pieno { padding-inline: 20px; }

/* il bottone oro ha sempre il suo fondo, anche se la sfumatura non parte */
.bottone--oro {
  background-color: var(--oro);
  color: #21160A;
}
.bottone--oro:hover { color: #21160A; }

/* le due azioni del necrologio non si toccano piu */
.necrologio__azioni { gap: 10px; padding-top: 14px; }
.necrologio__azioni .bottone { padding-block: 13px; }
.necrologio__corpo { padding: 24px 26px 26px; gap: 15px; }

/* i tastini del pannello */
.azione { padding: 7px 14px; }
.azioni-riga { gap: 8px; }

/* i filtri a pastiglia */
.filtro { padding: 10px 20px; }

/* le voci della tendina */
.tendina__colonna a { padding: 10px 12px 10px 16px; }
.tendina__colonna a:hover { padding-left: 21px; }

/* le carte del negozio */
.carta-prodotto__corpo { padding: 22px; gap: 7px; }
.carta-prodotto__piede { padding-top: 18px; }

/* le carte servizio */
.carta-servizio { padding: 40px 34px 36px; }

/* le tariffe */
.carta-tariffa { padding: 38px 32px 34px; }

/* le recensioni */
.recensione { padding: 32px 30px; }

/* i campi dei moduli */
.campo input, .campo select, .campo textarea { padding: 14px 16px; }

/* la fascia del piede */
.piede__reperibile { padding: 34px 36px; }

@media (max-width: 760px) {
  .bottone { padding: 14px 22px; }
  .bottone--piccolo { padding: 11px 16px; }
  .carta-servizio { padding: 30px 24px 28px; }
  .carta-tariffa { padding: 30px 24px; }
  .recensione { padding: 26px 22px; }
  .carta-prodotto__corpo { padding: 17px; }
  .necrologio__corpo { padding: 20px 20px 22px; }
}

/* ---------- la sbarra in cima, stile Asya ---------- */

.barra-urgenza {
  position: relative;
  background:
    linear-gradient(180deg, rgba(217,176,113,0.05), transparent 60%),
    var(--scuro);
  border-bottom: 0;
}
.barra-urgenza::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(167, 126, 68, 0.35) 12%,
    var(--oro) 34%,
    var(--oro-chiaro) 50%,
    var(--oro) 66%,
    rgba(167, 126, 68, 0.35) 88%,
    transparent 100%);
}
.barra-urgenza::before {
  content: '';
  position: absolute;
  left: 50%; bottom: -3px;
  width: 7px; height: 7px;
  margin-left: -3.5px;
  background: var(--oro-chiaro);
  transform: rotate(45deg);
  box-shadow: 0 0 8px 1px rgba(217, 176, 113, 0.45);
}
.barra-urgenza .contenitore { min-height: 46px; }
.barra-urgenza__sedi { letter-spacing: 0.06em; font-size: 12.5px; }

/* ---------- avvisi nel pannello ---------- */

.avvisi { display: grid; gap: 12px; }
.avviso-riga {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: start;
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-left: 3px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 18px 20px;
  transition: border-left-color 0.3s var(--curva), background 0.3s var(--curva);
}
.avviso-riga--nuovo { border-left-color: var(--oro); background: var(--oro-velo); }
.avviso-riga__tipo {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--verde-velo);
  color: var(--verde-cupo);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.avviso-riga--nuovo .avviso-riga__tipo { background: rgba(167,126,68,0.18); color: var(--oro); }
.avviso-riga b { display: block; font-size: 15.5px; margin-bottom: 5px; }
.avviso-riga pre {
  margin: 0;
  font-family: var(--testo);
  font-size: 14px;
  color: var(--fumo);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}
.avviso-riga__quando { font-size: 12.5px; color: var(--fumo); white-space: nowrap; text-align: right; }
.avviso-riga__quando .azione { margin-top: 8px; display: block; }
@media (max-width: 640px) {
  .avviso-riga { grid-template-columns: 1fr; }
  .avviso-riga__quando { text-align: left; }
}

/* ---------- la testata segue il tema ---------- */

.intestazione {
  background: var(--velo-testata);
  border-bottom: 1px solid var(--bordo);
}
.intestazione.rimpicciolita {
  box-shadow: 0 1px 0 var(--oro-filo), 0 10px 30px -22px rgba(0, 0, 0, 0.55);
}

/* le voci non vanno a capo */
.voce__testa, .voce__solo { white-space: nowrap; }
.navigazione { gap: 0; }

/* di notte i bottoni chiari restano leggibili */
:root .bottone--contorno { color: var(--inchiostro); border-color: var(--bordo); }
:root .bottone--contorno:hover { background: var(--verde-velo); color: var(--verde-fondo); }
@media (prefers-color-scheme: dark) {
  :root .bottone--contorno { color: var(--inchiostro); border-color: var(--bordo); }
  :root .bottone--contorno:hover { background: var(--verde-velo); color: var(--verde-fondo); }
}

/* il bottone principale di notte deve staccare */
:root .bottone--primario { background: #26AEB8; color: #06282C; }
:root .bottone--primario:hover { background: #3D7FBE; color: #fff; }
@media (prefers-color-scheme: dark) {
  :root .bottone--primario { background: #26AEB8; color: #06282C; }
  :root .bottone--primario:hover { background: #3D7FBE; color: #fff; }
}

/* il velo della ricerca e delle tendine, anche di notte */
.cerca { background: var(--carta); }
.tendina { background: var(--carta); }

@media (max-width: 1180px) {
  .voce__testa, .voce__solo { padding: 10px 8px; font-size: 13px; }
  .voce__testa::after, .voce__solo::after { left: 8px; right: 8px; }
}

/* ---------- un colore solo, scendendo ---------- */

.sezione--carta,
.sezione--velo { background: transparent; }

/* le schede restano staccate dal fondo, con il bordo e un tono appena piu chiaro */
.cifre { background: var(--oro-filo); }
.cifra, .sezione--carta .cifra { background: var(--carta); }
.collegata, .sezione--carta .collegata { background: var(--carta); }
.passo__segno, .sezione--carta .passo__segno { background: var(--pietra); }

/* dove serviva il contrasto del bianco lo do con un filo dorato */
.griglia-servizi { gap: 24px; }
.carta-servizio { background: var(--carta); }
.carta-servizio:hover { background: var(--carta); border-color: var(--oro-filo); }

/* la sezione dei pareri non e piu una fascia colorata */
.sezione--velo .testata-sezione { margin-bottom: 48px; }

/* ---------- allineamenti ---------- */

.prezzo { line-height: 1; display: inline-block; }

.carta-prodotto__piede {
  align-items: center;
  gap: 14px;
}
.carta-prodotto__piede .prezzo { transform: translateY(1px); }
.carta-prodotto__piede .bottone { flex: none; }

.riga-cassetto__destra .prezzo { margin-bottom: 6px; }
.riepilogo__totale { align-items: center; }
.riepilogo__totale .prezzo { transform: translateY(1px); }
.cassetto__totale { align-items: center; }

.carta-tariffa__prezzo { line-height: 1; }
.scheda-prodotto .prezzo { line-height: 1.05; }

/* prezzi in tabella: stessa riga di base del testo accanto */
.prosa .tavola td.numerico { vertical-align: middle; }
.prosa .tavola td { vertical-align: middle; }

/* i tastini in fondo alle schede necrologio, tutti alla stessa altezza */
.necrologio__azioni .bottone { display: flex; align-items: center; justify-content: center; min-height: 44px; }

/* ---------- la sbarra in cima, versione pulita ---------- */

.barra-urgenza {
  background: var(--scuro);
  border-bottom: 1px solid rgba(217, 176, 113, 0.22);
}
.barra-urgenza::before,
.barra-urgenza::after { content: none; }

.barra-urgenza .contenitore {
  min-height: 44px;
  gap: 24px;
}
.barra-urgenza__stato {
  gap: 11px;
  font-size: 13.5px;
  color: #A8BBC4;
  letter-spacing: 0.005em;
}
.barra-urgenza__numero {
  color: #F0F6F8;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-left: 2px;
}
.barra-urgenza__sedi {
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #6E8791;
}
.barra-urgenza .pulsazione { width: 7px; height: 7px; }

@media (max-width: 900px) {
  .barra-urgenza__sedi { display: none; }
  .barra-urgenza .contenitore { justify-content: center; }
}

/* ---------- rifiniture finali ---------- */

/* le tre garanzie dell eroe, in fila */
.eroe__garanzie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.garanzia { max-width: none; }
@media (max-width: 900px) { .eroe__garanzie { grid-template-columns: 1fr; gap: 18px; } }

/* niente righine verticali fra i passi */
.passo, .passi > li {
  border: 0 !important;
  list-style: none;
}
.passi > li::marker { content: ''; }
.passi { padding-bottom: 0; }
.passo { padding-right: 34px; }
@media (max-width: 1080px) {
  .passo { border: 0 !important; padding-left: 24px; position: relative; }
  .passo::before {
    content: '' !important;
    position: absolute;
    left: 0; top: 4px; bottom: 4px;
    width: 1px;
    background: linear-gradient(180deg, var(--oro), transparent);
  }
}

/* lo spazio fra le sezioni, piu corto */
.sezione { padding-block: 74px; }
.sezione--stretta { padding-block: 52px; }
.testata-sezione { margin-bottom: 40px; }
.sezione + .sezione { padding-top: 0; }
.eroe + .sezione { padding-top: 74px; }
.banda + .sezione, .sezione--scura + .sezione { padding-top: 74px; }

/* il prezzo attaccato al simbolo */
.carta-tariffa__prezzo, .prezzo, .cifra__numero { font-feature-settings: 'tnum'; }

@media (max-width: 760px) {
  .sezione { padding-block: 52px; }
  .sezione + .sezione { padding-top: 0; }
}

/* ==================================================================
   v10 - di notte un fondo solo: via le chiazze
   ================================================================== */

:root {
  --pietra:       #0A1D24;
  --pietra-scura: #0F2831;
  --scuro:        #0A1D24;
  --scuro-2:      #0F2831;
  --carta:        #102A34;
  --carta-2:      #143440;
  --figura-a:     #143440;
  --figura-b:     #102A34;
}
@media (prefers-color-scheme: dark) {
  :root {
    --pietra:       #0A1D24;
    --pietra-scura: #0F2831;
    --scuro:        #0A1D24;
    --scuro-2:      #0F2831;
    --carta:        #102A34;
    --carta-2:      #143440;
    --figura-a:     #143440;
    --figura-b:     #102A34;
  }
}

/* il piede non fa piu gradino: e lo stesso fondo, staccato dal filo dorato */
.piede { border-top: 0; }
:root .piede,
:root .barra-urgenza { background: var(--pietra); }
@media (prefers-color-scheme: dark) {
  :root .piede,
  :root .barra-urgenza { background: var(--pietra); }
}

/* di notte gli aloni dorati si abbassano, se no fanno la macchia */
:root .richiamo::before,
:root .testata-pagina::before { opacity: 0.45; }
:root .richiamo {
  background: var(--carta);
  border-color: rgba(217, 176, 113, 0.24);
}
@media (prefers-color-scheme: dark) {
  :root .richiamo::before,
  :root .testata-pagina::before { opacity: 0.45; }
  :root .richiamo {
    background: var(--carta);
    border-color: rgba(217, 176, 113, 0.24);
  }
}

/* le sezioni scure non devono staccare dal fondo */
:root .sezione--scura { background: var(--pietra); }
@media (prefers-color-scheme: dark) {
  :root .sezione--scura { background: var(--pietra); }
}

/* ---------- leggibilita dei testi lunghi ---------- */

.prosa p, .prosa li {
  color: var(--inchiostro);
  opacity: 0.86;
}
.prosa h2, .prosa h3 { color: var(--inchiostro); opacity: 1; }
.prosa li { line-height: 1.6; }
.prosa li b, .prosa li strong, .prosa p b, .prosa p strong { color: var(--inchiostro); opacity: 1; font-weight: 700; }

/* i pallini degli elenchi in oro */
.prosa ul { list-style: none; padding-left: 0; }
.prosa ul li { position: relative; padding-left: 22px; }
.prosa ul li::before {
  content: '';
  position: absolute;
  left: 2px; top: 0.62em;
  width: 6px; height: 6px;
  background: var(--oro);
  transform: rotate(45deg);
}

/* nelle bande scure il testo resta chiaro */
.banda .elenco-segni li { color: var(--su-scuro); }
.sezione--scura .prosa p, .sezione--scura .prosa li { color: var(--su-scuro); opacity: 1; }

/* ---------- senza la sbarra in cima, la testata parte da zero ---------- */

.intestazione { top: 0; }
.cerca { top: 78px; }
@media (max-width: 1000px) { .cerca { top: 66px; } }

/* il numero torna dentro la testata, cosi resta a portata */
.numero-testata {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--oro-filo);
  border-radius: var(--raggio);
  font-size: 14px;
  font-weight: 700;
  color: var(--inchiostro);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: border-color 0.3s var(--curva), background 0.3s var(--curva), color 0.3s var(--curva);
}
.numero-testata:hover { border-color: var(--oro); background: var(--oro-velo); color: var(--oro); }
.numero-testata .pulsazione { width: 7px; height: 7px; }
@media (max-width: 1120px) { .numero-testata span:last-child { display: none; } .numero-testata { padding: 10px 12px; } }
@media (max-width: 1000px) { .numero-testata { display: none; } }

/* ---------- le tendine di scelta, con la freccia nostra ---------- */

select,
.campo select,
.filtri-negozio select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 12px 42px 12px 16px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background-color: var(--carta);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--oro) 50%),
    linear-gradient(135deg, var(--oro) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% + 1px),
    calc(100% - 14px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  font-family: var(--testo);
  font-size: 14.5px;
  color: var(--inchiostro);
  line-height: 1.25;
  cursor: pointer;
  transition: border-color 0.28s var(--curva), box-shadow 0.28s var(--curva), background-color 0.28s var(--curva);
}
select:hover { border-color: var(--oro-filo); }
select:focus {
  outline: none;
  border-color: var(--oro);
  box-shadow: 0 0 0 3px var(--oro-velo);
}
select option {
  background: var(--carta);
  color: var(--inchiostro);
  padding: 10px;
}

/* la riga dei filtri del negozio, allineata */
.filtri-negozio .spinta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fumo);
}
.filtri-negozio select { min-height: 42px; }
.filtro { min-height: 42px; display: inline-flex; align-items: center; }

/* la ricerca dei cognomi nei necrologi */
#cerca-cognome {
  min-height: 42px;
  padding: 12px 16px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--testo);
  font-size: 14.5px;
}
#cerca-cognome:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px var(--oro-velo); }

@media (max-width: 640px) {
  .filtri-negozio .spinta { width: 100%; margin-left: 0; }
  .filtri-negozio select { flex: 1; }
}

/* ==================================================================
   v11 - i due bottoni dell eroe, fatti bene
   ================================================================== */

.eroe__azioni .bottone {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 17px 30px;
  font-size: 15.5px;
  letter-spacing: 0.012em;
  transition:
    transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
    color 0.28s ease,
    border-color 0.34s ease;
}

/* --- quello dorato: la lastra si accende e si solleva --- */

.bottone--oro {
  background-color: var(--oro);
  background-image: linear-gradient(103deg, #B98B4C 0%, var(--oro-chiaro) 44%, #EBCF9C 58%, var(--oro) 100%);
  background-size: 220% 100%;
  background-position: 0% 0;
  color: #1F1509;
  border: 1px solid rgba(255, 240, 205, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 235, 0.45),
    0 6px 18px -10px rgba(0, 0, 0, 0.55);
  transition: background-position 0.72s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.bottone--oro:hover {
  background-position: 100% 0;
  color: #1F1509;
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 242, 0.65),
    0 14px 34px -12px rgba(217, 176, 113, 0.55),
    0 4px 12px -6px rgba(0, 0, 0, 0.45);
}
.bottone--oro:active { transform: translateY(-1px); }

/* la cornetta si alza e squilla appena */
.bottone--oro svg {
  transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bottone--oro:hover svg { transform: rotate(-14deg) scale(1.08); }

/* --- quello chiaro: si riempie da sinistra --- */

.bottone--chiaro {
  border: 1px solid rgba(222, 232, 246, 0.30);
  color: #E6EEF6;
  background: transparent;
}
.bottone--chiaro::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(217, 176, 113, 0.20), rgba(217, 176, 113, 0.07));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.46s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.bottone--chiaro:hover {
  border-color: var(--oro-chiaro);
  color: #FBF1DE;
  transform: translateY(-3px);
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.7);
}
.bottone--chiaro:hover::after { transform: scaleX(1); }
.bottone--chiaro:active { transform: translateY(-1px); }

/* la lastra che scorre resta solo sul dorato */
.bottone--chiaro::before { content: none; }

/* da tastiera si vede lo stesso */
.eroe__azioni .bottone:focus-visible {
  outline: 2px solid var(--oro-chiaro);
  outline-offset: 3px;
}


@media (max-width: 760px) {
  .eroe__azioni .bottone { padding: 15px 22px; font-size: 14.5px; }
}

/* ==================================================================
   v12 - passata di pulizia: meno oro fermo, hover che si sente
   ================================================================== */

/* --- le schede stanno quiete finche non le tocchi --- */

.carta-servizio {
  border: 1px solid var(--bordo);
  border-top: 1px solid var(--bordo);
  box-shadow: none;
  transition:
    border-color 0.32s var(--curva),
    background 0.32s var(--curva),
    box-shadow 0.32s var(--curva),
    transform 0.32s var(--curva);
}
.carta-servizio::after {
  top: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--oro), transparent);
}
.carta-servizio:hover {
  transform: translateY(-3px);
  border-color: var(--oro-filo);
  box-shadow: 0 16px 34px -22px rgba(0, 0, 0, 0.5);
}
.carta-servizio h3 { transition: color 0.3s var(--curva); }
.carta-servizio:hover h3 { color: var(--oro); }
.carta-servizio:hover .medaglione { transform: translateY(-2px); }
.medaglione { border-color: var(--bordo); background: transparent; }
.carta-servizio:hover .medaglione { border-color: var(--oro-filo); background: var(--oro-velo); }

/* --- tariffe: l oro resta solo sulla scelta --- */

.carta-tariffa { border: 1px solid var(--bordo); box-shadow: none; }
.carta-tariffa--scelta { border-color: var(--oro-filo); border-top: 2px solid var(--oro); }
.carta-tariffa { transition: border-color 0.32s var(--curva), transform 0.32s var(--curva), box-shadow 0.32s var(--curva); }
.carta-tariffa:hover {
  transform: translateY(-3px);
  border-color: var(--oro-filo);
  box-shadow: 0 16px 34px -22px rgba(0, 0, 0, 0.5);
}

/* --- tavole e riquadri: un bordo solo --- */

.prosa .tavola-guscio, .griglia-due .tavola-guscio, .tavola-guscio {
  border: 1px solid var(--bordo);
  border-top: 1px solid var(--bordo);
  box-shadow: none;
}
.blocco-fiori { border: 1px solid var(--bordo); border-top: 1px solid var(--bordo); }
.blocco-fiori h2 { color: var(--oro); }

/* --- necrologi: filo sottile, si accende passando --- */

.necrologio { box-shadow: none; }
.necrologio__testata::before { height: 1px; opacity: 0.35; }
.necrologio:hover .necrologio__testata::before { height: 2px; opacity: 1; }
.necrologio:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -22px rgba(0, 0, 0, 0.5); }

/* --- prodotti: piu calmi da fermi --- */

.carta-prodotto { box-shadow: none; }
.carta-prodotto:hover {
  transform: translateY(-3px);
  border-color: var(--oro-filo);
  box-shadow: 0 16px 34px -22px rgba(0, 0, 0, 0.5);
}
.carta-prodotto__figura::after { inset: 14px; }
.carta-prodotto:hover .carta-prodotto__figura::after { opacity: 0.4; inset: 9px; }

/* --- richiami e testate: il filo dorato si fa sottile --- */

.richiamo::after, .testata-pagina::after { height: 1px; opacity: 0.55; }
.richiamo { box-shadow: none; }

/* --- recensioni --- */

.recensione { box-shadow: none; border-left-width: 2px; }
.recensione:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -22px rgba(0, 0, 0, 0.5); }

/* --- pagine collegate --- */

.collegata { border-left-width: 2px; }
.collegata:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -22px rgba(0, 0, 0, 0.5); }

/* --- la lastra che scorre resta solo sul dorato --- */

.bottone--primario::before, .bottone--contorno::before, .bottone--bronzo::before { content: none; }
.bottone--primario:hover, .bottone--contorno:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -18px rgba(0, 0, 0, 0.55);
}

/* --- il cassetto e le finestre --- */

.riepilogo { box-shadow: none; }
.blocco-appuntamento { box-shadow: none; }

/* ==================================================================
   v13 - cornetta in testata, divisori nelle tendine, tema unico
   ================================================================== */

/* la cornetta accanto al numero */
.numero-testata { gap: 9px; }
.numero-testata svg {
  width: 15px; height: 15px;
  flex: none;
  color: var(--oro);
  transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s var(--curva);
}
.numero-testata:hover svg { transform: rotate(-14deg) scale(1.1); color: var(--oro-chiaro); }

/* i titoli delle colonne nelle tendine usano il nostro divisore */
.tendina__titolo {
  display: flex;
  align-items: center;
  gap: 9px;
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 14px;
}
.tendina__titolo::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--oro) 0%, rgba(167, 126, 68, 0.30) 46%, transparent 100%);
}
.tendina__titolo::before {
  content: '';
  width: 6px; height: 6px;
  flex: none;
  background: var(--oro);
  transform: rotate(45deg);
}

/* stessa cosa per i titoli delle colonne nel piede */
.piede h4 {
  display: flex;
  align-items: center;
  gap: 9px;
}
.piede h4::before {
  content: '';
  width: 5px; height: 5px;
  flex: none;
  background: var(--oro-chiaro);
  transform: rotate(45deg);
}
.piede h4::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(217, 176, 113, 0.42), transparent);
}

/* un tema solo: quello scuro di adesso */
.cambia-tema { display: none !important; }

/* ---------- la testata non sborda piu a destra ---------- */

/* la riga della testata (marchio + menu + numero + bottoni) e piu larga della
   griglia dei contenuti: dentro un contenitore da 1240 usciva dal bordo destro
   e faceva comparire la barra di scorrimento orizzontale su tutto il sito */
.intestazione .contenitore { flex-wrap: nowrap; }
.marchio, .azioni-intestazione { flex: none; }
.navigazione { min-width: 0; }

/* sotto i 1440 la riga si stringe invece di uscire dal bordo */
@media (max-width: 1440px) {
  .intestazione .contenitore { gap: 16px; }
  .voce__testa, .voce__solo { padding: 10px 8px; font-size: 13px; }
  .voce__testa::after, .voce__solo::after { left: 8px; right: 8px; }
}

/* sotto i 1340 non ci sta piu il bottone dell appuntamento: resta il numero,
   che su un sito di onoranze conta di piu */
@media (max-width: 1340px) {
  .azioni-intestazione .bottone { display: none; }
}

/* sul telefono il marchio spingeva i tasti fuori dal bordo destro */
@media (max-width: 460px) {
  .marchio__coda { display: none; }
}
@media (max-width: 380px) {
  .marchio__nome { font-size: 22px; letter-spacing: 0.12em; }
  .intestazione .contenitore { gap: 8px; }
}




/* ---------- la fascia dei cookie ---------- */

.fascia-cookie {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: 1100px;
  margin-inline: auto;
  padding: 20px 24px;
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-top: 2px solid var(--oro);
  border-radius: var(--raggio-g);
  box-shadow: var(--ombra-alta);
  animation: cookieSu 0.4s var(--curva);
}
@keyframes cookieSu { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.fascia-cookie__testo { font-size: 14.5px; line-height: 1.6; color: var(--inchiostro); }
.fascia-cookie__testo b { font-weight: 700; }
.fascia-cookie__testo a { color: var(--verde-cupo); text-decoration: underline; }
.fascia-cookie__tasti { display: flex; gap: 10px; flex: none; }
.fascia-cookie__tasti .bottone { padding: 12px 20px; font-size: 14px; }
@media (max-width: 760px) {
  .fascia-cookie { flex-direction: column; align-items: stretch; gap: 16px; padding: 18px; left: 10px; right: 10px; bottom: 10px; }
  .fascia-cookie__tasti { flex-direction: column-reverse; }
  .fascia-cookie__tasti .bottone { width: 100%; justify-content: center; }
}

/* ---------- il marchio e diventato un logo ---------- */

.marchio { display: block; flex: none; line-height: 0; }
.marchio__segno { height: 56px; width: auto; display: block; }
.intestazione.rimpicciolita .marchio__segno { height: 48px; }
.piede .marchio__segno { height: 54px; margin-bottom: 18px; }
@media (max-width: 1000px) { .marchio__segno { height: 40px; } }
@media (max-width: 460px)  { .marchio__segno { height: 34px; } }

/* ---------- la nuvoletta che conferma ---------- */

.nota-fugace {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%) translateY(16px);
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(440px, 90vw);
  padding: 15px 24px 15px 20px;
  background: var(--carta);
  color: var(--inchiostro);
  border: 1px solid var(--bordo);
  border-top: 2px solid var(--oro);
  border-radius: var(--raggio-g);
  box-shadow: var(--ombra-alta);
  font-size: 15px;
  line-height: 1.4;
  opacity: 0;
  transition: opacity 0.26s var(--curva), transform 0.26s var(--curva);
}
.nota-fugace svg {
  width: 20px; height: 20px;
  flex: none;
  color: var(--verde);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nota-fugace span { flex: 1; }


/* ================================================================
   Rifiniture: testata, tendine, carrello, nuvoletta, hover
   ================================================================ */

/* ---------- il recapito nella testata ---------- */

.numero-testata {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 8px 16px 8px 13px;
  border: 1px solid var(--oro-filo);
  border-radius: var(--raggio);
  color: var(--inchiostro);
  background: linear-gradient(180deg, rgba(217,176,113,0.08), transparent);
  transition: border-color 0.28s var(--curva), background 0.28s var(--curva);
}
.numero-testata svg { width: 17px; height: 17px; flex: none; color: var(--oro); }
.numero-testata__testo { display: flex; flex-direction: column; line-height: 1.15; }
.numero-testata__testo b {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.numero-testata__testo i {
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oro);
  white-space: nowrap;
}
.numero-testata:hover { border-color: var(--oro); background: var(--oro-velo); color: var(--inchiostro); }

.whatsapp-testata {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: none;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  color: var(--verde-cupo);
  transition: border-color 0.28s var(--curva), background 0.28s var(--curva), color 0.28s var(--curva);
}
.whatsapp-testata svg { width: 21px; height: 21px; }
.whatsapp-testata:hover { border-color: var(--verde); background: var(--verde-velo); color: var(--verde-fondo); }

@media (max-width: 1120px) {
  .numero-testata { padding: 8px 12px; }
  .numero-testata__testo i { display: none; }
  .numero-testata__testo b { font-size: 17px; }
}
@media (max-width: 900px) { .numero-testata__testo { display: none; } .numero-testata { padding: 12px; } }
@media (max-width: 520px) { .whatsapp-testata { display: none; } }

/* ---------- niente salto quando si apre il carrello ---------- */

html { scrollbar-gutter: stable; }
body.senza-scorrimento { overflow: hidden; }

/* ---------- il selettore della quantita ---------- */

.selettore-quantita {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--bordo);
  border-radius: 100px;
  background: var(--carta-2);
}
.selettore-quantita button {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: transparent;
  font-size: 17px; line-height: 1;
  color: var(--fumo);
  cursor: pointer;
  transition: background 0.2s var(--curva), color 0.2s var(--curva);
}
.selettore-quantita button:hover { background: rgba(255, 255, 255, 0.08); color: var(--inchiostro); }
.selettore-quantita input {
  width: 34px; height: 30px;
  border: 0; background: transparent;
  text-align: center;
  font-family: var(--testo);
  font-size: 15px; font-weight: 600;
  color: var(--inchiostro);
  -moz-appearance: textfield;
}
.selettore-quantita input::-webkit-outer-spin-button,
.selettore-quantita input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- le tendine ---------- */

.tendina__colonna a { padding: 9px 12px; border-radius: 5px; }
.tendina__colonna a::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 2px; height: 0;
  background: var(--oro);
  transform: translateY(-50%);
  transition: height 0.28s var(--curva);
}
.tendina__colonna a:hover { background: rgba(255, 255, 255, 0.05); padding-left: 16px; }
.tendina__colonna a:hover::before { height: 62%; }
.tendina__colonna + .tendina__colonna { border-left: 1px solid var(--bordo); padding-left: 22px; }
@media (max-width: 1000px) { .tendina__colonna + .tendina__colonna { border-left: 0; padding-left: 0; } }

/* ---------- le foto che girano ---------- */

.foto--girevole { position: relative; overflow: hidden; }
.foto--girevole img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: giraFoto 28s infinite; }
.foto--girevole img:nth-child(1) { position: relative; animation-delay: 0s; }
.foto--girevole img:nth-child(2) { animation-delay: 7s; }
.foto--girevole img:nth-child(3) { animation-delay: 14s; }
.foto--girevole img:nth-child(4) { animation-delay: 21s; }
@keyframes giraFoto {
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  25%  { opacity: 1; }
  28%  { opacity: 0; }
  100% { opacity: 0; }
}

/* ---------- gli hover dei bottoni, tutti allo stesso modo ---------- */

.bottone--contorno:hover,
.bottone--chiaro:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.30);
}
.bottone--primario:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(0,0,0,.6); }
.bottone--oro:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(0,0,0,.6); }

/* ---------- la nuvoletta anche sul telefono ---------- */

@media (max-width: 460px) { .nota-fugace { max-width: calc(100vw - 24px); padding: 14px 18px; } }

/* la scheda dell articolo si clicca tutta */
.carta-prodotto { cursor: pointer; }
.carta-prodotto a, .carta-prodotto button { cursor: pointer; }

/* ---------- rate e disponibilita nella scheda articolo ---------- */

.rate {
  margin: 6px 0 18px;
  font-size: 14.5px;
  color: var(--fumo);
}
.rate b { color: var(--inchiostro); font-weight: 700; }
.rate a { color: var(--verde-cupo); text-decoration: underline; text-underline-offset: 2px; }

.scorta {
  margin: 0 0 24px;
  padding: 13px 16px;
  border: 1px solid var(--bordo);
  border-left: 3px solid var(--oro);
  border-radius: var(--raggio);
  background: var(--carta-2);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fumo);
}
.scorta b { color: var(--inchiostro); font-weight: 700; display: block; }

/* ---------- "Nemmeno il telefono." respira come la fiamma ---------- */

.lumino__didascalia b {
  color: var(--oro-chiaro);
  font-weight: 400;
  animation: respiroOro 4.2s ease-in-out infinite;
}
@keyframes respiroOro {
  0%, 100% { opacity: 0.72; text-shadow: 0 0 0 rgba(217, 176, 113, 0); }
  50%      { opacity: 1;    text-shadow: 0 0 16px rgba(217, 176, 113, 0.45); }
}

/* ---------- Cerca e Carrello con la loro scritta ---------- */

.apri-cerca,
.carrello-scorciatoia {
  width: auto;
  min-width: 0;
  padding: 0 15px;
  height: 44px;
  gap: 9px;
}
.etichetta-tasto {
  font-family: var(--testo);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.carrello-scorciatoia__conteggio { position: static; margin-left: 2px; }
@media (max-width: 1240px) { .etichetta-tasto { display: none; } .apri-cerca, .carrello-scorciatoia { width: 44px; padding: 0; } }

/* il divisore nostro al posto della riga dritta sopra alle garanzie */
.eroe__garanzie { border-top: 0; padding-top: 0; }
.divisore--eroe { padding-block: 6px 22px; }

/* ---------- la ricerca, piu pulita ---------- */

.cerca { border-bottom: 1px solid var(--bordo); box-shadow: 0 22px 44px -34px rgba(0, 0, 0, 0.65); }
.cerca .contenitore { padding-block: 20px 18px; }

.cerca__riga {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 6px 5px 18px;
  border: 1px solid var(--bordo);
  border-radius: 100px;
  background: var(--carta-2);
  transition: border-color 0.25s var(--curva), background 0.25s var(--curva);
}
.cerca__riga:focus-within { border-color: var(--verde); background: var(--carta); }
.cerca__lente { width: 18px; height: 18px; color: var(--fumo); flex: none; }
.cerca__riga input {
  flex: 1;
  height: 44px;
  border: 0;
  background: transparent;
  font-family: var(--testo);
  font-size: 16px;
  color: var(--inchiostro);
}
.cerca__riga input::placeholder { color: var(--fumo); font-size: 15px; opacity: 0.9; }
.cerca__chiudi {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: transparent;
  font-size: 22px; line-height: 1;
  color: var(--fumo);
  cursor: pointer;
  transition: background 0.22s var(--curva), color 0.22s var(--curva), transform 0.22s var(--curva);
}
.cerca__chiudi:hover { background: rgba(255,255,255,0.08); color: var(--inchiostro); transform: none; }

.cerca__suggerimenti { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cerca__suggerimenti span {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fumo);
  margin-right: 4px;
}
.cerca__suggerimenti a {
  padding: 7px 15px;
  border: 1px solid var(--bordo);
  border-radius: 100px;
  font-size: 13px;
  color: var(--fumo);
  background: transparent;
  transition: border-color 0.22s var(--curva), background 0.22s var(--curva), color 0.22s var(--curva);
}
.cerca__suggerimenti a:hover { border-color: var(--oro-filo); background: rgba(255,255,255,0.05); color: var(--inchiostro); }
@media (max-width: 640px) {
  .cerca__riga { padding-left: 14px; }
  .cerca__riga input { font-size: 15px; }
  .cerca__suggerimenti span { width: 100%; margin-bottom: 2px; }
}

/* il divisore fra le sezioni della home sta piu in basso */
main .contenitore > .divisore { padding-block: 40px 2px; }

/* le stelle accanto al nome, non piu in cima */
.recensione__firma { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.recensione__firma .stelle { margin: 0; font-size: 12.5px; letter-spacing: 0.08em; color: var(--oro); }

/* ---------- il piede, breve ma completo ---------- */

.piede__corpo {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 48px;
  padding: 34px 0 38px;
}
.piede__marchio img { height: 58px; width: auto; display: block; margin-bottom: 18px; }
.piede__marchio p { font-size: 14.5px; line-height: 1.7; color: var(--su-scuro-fumo); max-width: 40ch; }
.piede__colonna { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.piede__colonna h4 {
  margin-bottom: 4px;
  font-family: var(--testo);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oro);
  display: flex; align-items: center; gap: 9px;
}
.piede__colonna h4::before { content: ''; width: 5px; height: 5px; flex: none; background: var(--oro-chiaro); transform: rotate(45deg); }
.piede__colonna h4::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(217,176,113,0.42), transparent); }
.piede__colonna a {
  font-size: 14.5px;
  color: var(--su-scuro-fumo);
  transition: color 0.24s var(--curva), transform 0.24s var(--curva);
}
.piede__colonna a:hover { color: var(--oro-chiaro); transform: translateX(3px); }
.piede__numero { font-family: var(--display); font-size: 22px; color: var(--su-scuro) !important; font-variant-numeric: tabular-nums; }
.piede__numero:hover { color: var(--oro-chiaro) !important; }
@media (max-width: 900px) { .piede__corpo { grid-template-columns: 1fr 1fr; gap: 34px; } .piede__marchio { grid-column: 1 / -1; } }
@media (max-width: 520px) { .piede__corpo { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- ritocchi finali ---------- */

/* niente zoom sulle foto al passaggio del mouse */
.foto:hover img { transform: none; filter: inherit; }
.piastrella:hover img { transform: none; }

/* gli hover non ribaltano piu il colore del testo */
.bottone--primario:hover { color: #06282C; }
.bottone--oro:hover { color: #23180A; }
.bottone--chiaro:hover { color: #EDF1EF; }
.bottone--contorno:hover { color: inherit; }
.carta-prodotto__nome a:hover { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* il divisore fra le sezioni prende meno spazio */
main .contenitore > .divisore { padding-block: 16px 2px; }

/* il divisore dentro all eroe si vede anche sopra la fotografia */
.divisore--eroe::before { background: linear-gradient(90deg, transparent, rgba(217, 176, 113, 0.55) 55%, var(--oro-chiaro)); }
.divisore--eroe::after  { background: linear-gradient(90deg, var(--oro-chiaro), rgba(217, 176, 113, 0.55) 45%, transparent); }
.divisore--eroe span { background: var(--oro-chiaro); }

/* la fotografia dell eroe sfuma nel colore della pagina, niente taglio netto */
.eroe--foto::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 170px;
  background: linear-gradient(180deg, transparent, var(--scuro));
  pointer-events: none;
  z-index: 1;
}
.eroe--foto .contenitore { position: relative; z-index: 2; }

/* il marchio piccolo sotto al titolo */
.eroe__firma {
  height: 0.66em;
  width: auto;
  display: inline-block;
  vertical-align: -0.07em;
  margin-left: 0.18em;
  opacity: 0.95;
}

/* la cornice dorata sulle fotografie non serve */
.foto::after { display: none; }

/* la griglia a due non deve schiacciare la fotografia */
.griglia-due > * { min-width: 0; }
@media (max-width: 1000px) {
  .griglia-due { grid-template-columns: 1fr !important; gap: 36px !important; }
  .griglia-due .foto--larga { aspect-ratio: 16 / 9; }
}

/* il divisore dentro all eroe respira */
.divisore--eroe { padding-block: 18px 30px; }

/* ---------- gli hover: compare solo un bordo, i colori non si toccano ---------- */

.bottone--primario:hover,
.bottone--oro:hover,
.bottone--bronzo:hover,
.bottone--contorno:hover,
.bottone--chiaro:hover,
.numero-testata:hover,
.whatsapp-testata:hover,
.apri-cerca:hover,
.carrello-scorciatoia:hover {
  transform: none;
  box-shadow: none;
  outline: 1px solid var(--oro-filo);
  outline-offset: 2px;
}
.bottone--primario:hover { background: #26AEB8; color: #06282C; }
.bottone--oro:hover { background-position: 0 0; color: #23180A; }
.bottone--chiaro:hover { background: transparent; color: #EDF1EF; border-color: rgba(255, 255, 255, 0.28); }
.bottone--contorno:hover { background: transparent; color: inherit; border-color: var(--bordo); }
.numero-testata:hover { background: linear-gradient(180deg, rgba(217,176,113,0.08), transparent); border-color: var(--oro-filo); }
.whatsapp-testata:hover { background: transparent; color: var(--verde-cupo); border-color: var(--bordo); }
.apri-cerca:hover, .carrello-scorciatoia:hover { background: transparent; color: inherit; border-color: var(--bordo); }
.selettore-quantita button:hover { background: transparent; color: var(--fumo); outline: 1px solid var(--oro-filo); outline-offset: 1px; }
.tendina__colonna a:hover { background: transparent; padding-left: 12px; }
.tendina__colonna a:hover::before { height: 62%; }
.cerca__suggerimenti a:hover { background: transparent; color: var(--fumo); border-color: var(--oro-filo); }
.piede__colonna a:hover { color: var(--su-scuro-fumo); transform: none; text-decoration: underline; text-underline-offset: 3px; }
.piede__numero:hover { color: var(--su-scuro) !important; }
.carta-prodotto:hover { border-color: var(--oro-filo); box-shadow: none; transform: none; }

/* ---------- le domande frequenti, staccate una dall altra ---------- */

.prosa h3 {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--bordo);
}
.prosa h3:first-of-type { margin-top: 12px; padding-top: 0; border-top: 0; }
.prosa h3 + p { margin-top: 10px; }

/* ---------- il piede su un fondo suo ---------- */

.piede { background: #071B20; border-top: 1px solid rgba(217, 176, 113, 0.14); }
.piede__coda {
  margin-top: 6px;
  padding: 18px 0 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12.5px;
}

/* ---------- il pannello: scheda Tariffe ---------- */

.titolo-blocco { font-family: var(--display); font-size: 21px; margin: 26px 0 14px; }
.pacchetto-admin {
  border: 1px solid var(--bordo);
  border-left: 3px solid var(--oro);
  border-radius: var(--raggio);
  background: var(--carta-2);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.pacchetto-admin__riga { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 12px; }
.pacchetto-admin__riga:nth-child(2) { grid-template-columns: 2fr 1fr; }
.pacchetto-admin label { display: block; font-size: 12.5px; color: var(--fumo); }
.pacchetto-admin input, .pacchetto-admin textarea {
  width: 100%;
  margin-top: 5px;
  padding: 9px 11px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--testo);
  font-size: 14.5px;
}
.pacchetto-admin__spunta { display: flex !important; align-items: center; gap: 8px; align-self: end; padding-bottom: 10px; }
.pacchetto-admin__spunta input { width: auto; margin: 0; }
.pacchetto-admin > .azione { margin-top: 12px; }
#voci-admin input {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--testo);
  font-size: 14px;
}
@media (max-width: 760px) {
  .pacchetto-admin__riga, .pacchetto-admin__riga:nth-child(2) { grid-template-columns: 1fr; }
}

/* ---------- ultimi ritocchi ---------- */

/* l icona sta al centro del testo, non attaccata in alto */
.garanzia { align-items: center; }
.garanzia svg { margin-top: 0; }

/* il bottone principale non cambiava colore per colpa di :root, che vince
   sulla regola semplice: qui la pareggio */
:root .bottone--primario:hover { background: #26AEB8; color: #06282C; }
:root .bottone--primario:hover,
:root .bottone--oro:hover { outline: 1px solid var(--oro-filo); outline-offset: 2px; transform: none; box-shadow: none; }

/* il blocco delle tariffe in home respira */
.griglia-due .titolo-sezione { margin-bottom: 14px; }
.griglia-due .sottotitolo-sezione { margin-bottom: 30px !important; }
.griglia-due [style*="font-size:38px"] { margin-bottom: 10px !important; }
.griglia-due .brindello { margin-bottom: 32px !important; }

/* il bordo al passaggio prende tutto il riquadro, non solo un pezzo dentro */
.piastrella::after { inset: 0; border-radius: inherit; }
.piastrella:hover::after { opacity: 1; inset: 0; }
.carta-servizio:hover, .carta-tariffa:hover, .recensione:hover {
  outline: 1px solid var(--oro-filo);
  outline-offset: 0;
  box-shadow: none;
  transform: none;
}

/* ---------- "noi" riempito con i fiori della B ---------- */

.fiorito {
  background-image: linear-gradient(rgba(178, 238, 244, 0.42), rgba(178, 238, 244, 0.42)), url(/img/fiori.png);
  background-size: cover, cover;
  background-position: center 38%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-right: 0.02em;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .fiorito { color: var(--verde-cupo); -webkit-text-fill-color: currentColor; background: none; }
}

/* la riga dritta sotto alla testata non serve, ci sono i divisori */
.testata-pagina::after { display: none; }
.richiamo::after { display: none; }

/* il riquadro della reperibilita, staccato bene dai divisori */
.piede__reperibile { padding: 30px 34px; }
.piede .divisore { padding-block: 26px; }

/* ---------- i due tasti dell eroe: stessa larghezza ---------- */

.eroe__azioni {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: max-content;
  max-width: 100%;
}
@media (max-width: 560px) {
  .eroe__azioni { grid-auto-flow: row; width: 100%; }
}

/* ---------- la foto delle tariffe alta quanto il testo ---------- */

.griglia-due--tariffe { align-items: stretch; }
.griglia-due--tariffe .foto--girevole { aspect-ratio: auto; min-height: 360px; height: auto; }
.griglia-due--tariffe .foto--girevole img:nth-child(1) { position: absolute; }
@media (max-width: 1000px) {
  .griglia-due--tariffe .foto--girevole { aspect-ratio: 16 / 9; min-height: 0; }
}

/* ---------- le foto non cambiano al passaggio del mouse ---------- */

:root .foto img, :root .foto:hover img { filter: grayscale(0.35) brightness(0.82) contrast(1.04); transform: none; }
:root .piastrella img, :root .piastrella:hover img { filter: grayscale(0.55) brightness(0.42); transform: none; }

/* ---------- la vetrina che cambia da sola ---------- */

.piastrelle, .griglia-prodotti { transition: opacity 0.55s var(--curva); }
.piastrelle.sfuma, .griglia-prodotti.sfuma { opacity: 0; }

/* ---------- hover: solo il bordo, niente colori, fondi o testi che cambiano ---------- */

.bottone::before, .bottone--chiaro::after { content: none; display: none; }
.bottone:hover, .bottone:hover svg { transform: none; }
.bottone:hover { outline: 1px solid var(--oro-filo); outline-offset: 2px; }
:root .bottone--oro, :root .bottone--oro:hover {
  background-position: 0 0;
  color: #1F1509;
  border-color: rgba(255, 240, 205, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.45), 0 6px 18px -10px rgba(0, 0, 0, 0.55);
}
:root .bottone--chiaro, :root .bottone--chiaro:hover { background: transparent; color: #E6EEF6; border-color: rgba(222, 232, 246, 0.30); box-shadow: none; }
:root .bottone--primario, :root .bottone--primario:hover { background: #26AEB8; color: #06282C; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10); }
:root .bottone--contorno, :root .bottone--contorno:hover { background: transparent; color: var(--inchiostro); border-color: var(--bordo); }
:root .bottone--bronzo, :root .bottone--bronzo:hover { background: var(--bronzo); color: #fff; box-shadow: none; }
.cambia-tema:hover { background: transparent; transform: none; border-color: var(--bordo); outline: 1px solid var(--oro-filo); outline-offset: 2px; }
.numero-testata:hover { background: transparent; border-color: var(--oro-filo); outline: 1px solid var(--oro-filo); outline-offset: 2px; }
.barra-urgenza__numero:hover { color: #fff; }

/* ---------- la riga in fondo al piede, in oro ---------- */

.piede__coda {
  margin-top: 30px;
  margin-inline: calc(50% - 50vw);
  padding: 16px max(24px, calc(50vw - 50%)) 16px;
  border-top: 0;
  background: linear-gradient(90deg, #B98B4C, var(--oro-chiaro) 48%, #EBCF9C 60%, var(--oro));
  color: #1F1509;
}
.piede__coda a { color: #1F1509; font-weight: 600; }
.piede__coda a:hover { color: #1F1509; text-decoration: underline; text-underline-offset: 3px; }
.piede { overflow-x: clip; }

/* ---------- modifica dei testi (solo con l accesso admin) ---------- */

.testi-comandi { position: fixed; left: 18px; bottom: 18px; z-index: 90; font-family: var(--testo); }
.testi-avvio {
  padding: 11px 18px;
  border: 1px solid var(--oro-filo);
  border-radius: var(--raggio);
  background: #0D2530;
  color: var(--oro-chiaro);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.6);
}
.testi-avvio:hover { outline: 1px solid var(--oro-filo); outline-offset: 2px; }
.testi-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--oro-filo);
  border-radius: var(--raggio);
  background: #0D2530;
  color: #E6EEF6;
  font-size: 13.5px;
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.6);
  max-width: calc(100vw - 36px);
  flex-wrap: wrap;
}
.testi-barra button {
  padding: 8px 14px;
  border: 1px solid var(--oro-filo);
  border-radius: var(--raggio);
  background: transparent;
  color: var(--oro-chiaro);
  font-weight: 600;
  cursor: pointer;
}
.testi-barra button:hover { outline: 1px solid var(--oro-filo); outline-offset: 2px; }
#testi-salva { background: var(--oro); color: #1F1509; }
.testi-esito { color: var(--oro-chiaro); }
.testo-modificabile { outline: 1px dashed rgba(217, 176, 113, 0.65); outline-offset: 3px; cursor: text; min-height: 1em; }
.testo-modificabile:hover, .testo-modificabile:focus { outline: 2px solid var(--oro-chiaro); background: rgba(217, 176, 113, 0.07); }

/* la ricerca resta attaccata alla testata anche quando si rimpicciolisce */
.cerca { top: var(--altezza-testata, 78px); margin-top: -1px; }
@media (max-width: 1000px) { .cerca { top: var(--altezza-testata, 66px); } }

/* schermata di accesso: scura come il logo, logo al centro */
.accesso {
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(90, 171, 149, 0.22), transparent 65%),
    radial-gradient(70% 60% at 100% 100%, rgba(167, 126, 68, 0.18), transparent 60%),
    #0B1F26;
}
.accesso__carta {
  background: linear-gradient(180deg, #13303A 0%, #0E252D 100%);
  border: 1px solid rgba(90, 171, 149, 0.28);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(217, 176, 113, 0.08);
  color: #E4EAE7;
}
.accesso__carta .marchio { display: flex; justify-content: center; margin-bottom: 22px; }
.accesso__carta .marchio__segno { height: 64px; width: auto; margin: 0 auto; }
.accesso__carta h1 { color: #F1F4F3; }
.accesso__carta > p, .accesso__carta .brindello { color: #9FB2AC; }
.accesso__carta .brindello a { color: var(--oro-chiaro); }
.accesso__carta .campo label { color: #C9D5D1; }
.accesso__carta .campo input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(159, 178, 172, 0.35);
  color: #F1F4F3;
}
.accesso__carta .campo input::placeholder { color: #7F918C; }
.accesso__carta .campo input:focus { border-color: var(--oro-chiaro); background: rgba(255, 255, 255, 0.09); }
.accesso__carta .bottone--contorno { color: #E4EAE7; border-color: rgba(159, 178, 172, 0.45); }
.accesso__carta .bottone--contorno:hover { color: var(--oro-chiaro); border-color: var(--oro-chiaro); background: transparent; }
.accesso__carta .avviso--errore { background: rgba(180, 60, 60, 0.18); }
@media (max-width: 460px) { .accesso__carta .marchio__segno { height: 50px; } }

/* foto sostituibili mentre si modificano i testi */
.foto-modificabile { outline: 2px dashed rgba(217, 176, 113, 0.8); outline-offset: 3px; cursor: pointer; }
.foto-modificabile:hover { outline: 3px solid var(--oro-chiaro); filter: brightness(1.06); }

/* ==================================================================
   ritocchi: velo di luce del lumino, piede della tendina, anteprima
   ================================================================== */

/* il velo di luce sul bronzo: morbido, senza bordi netti e senza rettangolo */
.lumino::after {
  top: 26%;
  width: 300px; height: 260px;
  margin-left: -150px;
  background: linear-gradient(108deg,
    transparent 20%,
    rgba(255, 240, 205, 0.05) 38%,
    rgba(255, 246, 222, 0.22) 50%,
    rgba(255, 240, 205, 0.05) 62%,
    transparent 80%);
  filter: blur(7px);
  mix-blend-mode: screen;
  opacity: 0;
  -webkit-mask-image: radial-gradient(70% 62% at 50% 50%, #000 45%, transparent 100%);
  mask-image: radial-gradient(70% 62% at 50% 50%, #000 45%, transparent 100%);
  animation: velodiluce 11s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 2.4s;
}
@keyframes velodiluce {
  0%, 58%  { transform: translateX(-115%); opacity: 0; }
  64%      { opacity: 0.55; }
  76%      { opacity: 0.75; }
  88%      { opacity: 0; }
  90%, 100% { transform: translateX(115%); opacity: 0; }
}

/* "Vai al negozio": fermo di suo, si accende quando ci passi sopra */
.tendina__piede {
  position: relative;
  overflow: hidden;
  background: transparent;
  transition: background 0.35s var(--curva), color 0.35s var(--curva);
}
.tendina__piede::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--oro-velo), transparent);
  opacity: 0;
  transition: opacity 0.35s var(--curva);
}
.tendina__piede b, .tendina__piede span { position: relative; z-index: 1; }
.tendina__piede b { transition: transform 0.35s var(--curva), color 0.35s var(--curva); display: inline-block; }
.tendina__piede:hover { background: transparent; color: var(--oro); }
.tendina__piede:hover::before { opacity: 1; }
.tendina__piede:hover b { transform: translateX(5px); color: var(--oro); }

@media (prefers-reduced-motion: reduce) {
  .lumino::after { animation: none; opacity: 0; }
  .tendina__piede:hover b { transform: none; }
}

/* meno vuoto fra il titolo della pagina e quello che viene dopo */
.testata-pagina { padding-block: 60px 42px; }
.testata-pagina h1 { margin-bottom: 10px; }
.briciole { margin-bottom: 14px; }
.testata-pagina + .sezione,
.testata-pagina + main.sezione { padding-top: 50px; }
@media (max-width: 760px) {
  .testata-pagina { padding-block: 42px 30px; }
  .testata-pagina + .sezione,
  .testata-pagina + main.sezione { padding-top: 36px; }
}

/* niente lampo diagonale che attraversa i bottoni al passaggio del mouse */
.bottone::before { display: none; }

/* la testata resta della stessa misura in ogni pagina e anche scorrendo */
.intestazione .contenitore,
.intestazione.rimpicciolita .contenitore { min-height: 78px; }
.marchio__segno,
.intestazione.rimpicciolita .marchio__segno { height: 56px; }
@media (max-width: 1000px) {
  .intestazione .contenitore,
  .intestazione.rimpicciolita .contenitore { min-height: 66px; }
  .marchio__segno,
  .intestazione.rimpicciolita .marchio__segno { height: 40px; }
}
@media (max-width: 460px) {
  .marchio__segno,
  .intestazione.rimpicciolita .marchio__segno { height: 34px; }
}

/* "Vai al negozio": oro gia di suo, non bianco */
.tendina__piede { color: var(--oro-chiaro); }
.tendina__piede b { color: var(--oro-chiaro); }
.tendina__piede:hover b { color: var(--oro-chiaro); }

/* nel piede: logo centrato sopra il testo */
.piede__marchio { text-align: center; }
.piede__marchio img { margin-left: auto; margin-right: auto; }
.piede__marchio p { margin-left: auto; margin-right: auto; }

/* ricerca dentro il catalogo */
.cerca-catalogo {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 22px;
}
.cerca-catalogo__lente {
  position: absolute;
  left: 16px;
  width: 19px; height: 19px;
  color: var(--fumo);
  pointer-events: none;
}
.cerca-catalogo input {
  width: 100%;
  padding: 14px 44px 14px 46px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--carta);
  color: inherit;
  font: inherit;
  font-size: 15px;
}
.cerca-catalogo input:focus { outline: none; border-color: var(--oro); }
.cerca-catalogo input::-webkit-search-cancel-button { display: none; }
.cerca-catalogo__pulisci {
  position: absolute;
  right: 12px;
  width: 28px; height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fumo);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.cerca-catalogo__pulisci:hover { color: var(--oro); }

/* il nostro divisore prima del piede, al posto della riga piatta */
.divisore--piede { display: block; padding: 0; background: var(--scuro); }
.divisore--piede .contenitore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding-block: 26px;
}
.divisore--piede .contenitore::before,
.divisore--piede .contenitore::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 176, 113, 0.42) 60%, var(--oro));
}
.divisore--piede .contenitore::after {
  background: linear-gradient(90deg, var(--oro), rgba(217, 176, 113, 0.42) 40%, transparent);
}
.divisore--piede span {
  width: 6px; height: 6px;
  background: var(--oro);
  transform: rotate(45deg);
  flex: none;
}
.divisore--piede span:nth-child(2) { width: 9px; height: 9px; background: var(--oro-chiaro); }
.divisore--piede span:first-child,
.divisore--piede span:last-child { opacity: 0.55; }

/* il piede parte subito dopo il divisore, senza la riga e senza il vuoto */
.piede { padding-block: 0 0; border-top: 0; }
.piede__griglia { border-top: 0; padding-top: 34px; padding-bottom: 30px; }
.piede__corpo { padding-top: 34px; }
.piede__marchio img { margin-bottom: 12px; }
.piede__coda { margin-top: 0; padding: 14px 0 20px; }

/* banner: ancora meno vuoto fra la foto e il testo che segue */
.testata-pagina { padding-block: 46px 30px; }
.testata-pagina h1 { margin-bottom: 8px; }
.testata-pagina p { margin-bottom: 0; }
.briciole { margin-bottom: 12px; }
.testata-pagina + .sezione,
.testata-pagina + main.sezione { padding-top: 34px; }
@media (max-width: 760px) {
  .testata-pagina { padding-block: 34px 24px; }
  .testata-pagina + .sezione,
  .testata-pagina + main.sezione { padding-top: 26px; }
}

/* la foto del prodotto riempie sempre il suo riquadro, senza dipendere dal flex */
.scheda-prodotto__figura { position: relative; }
.scheda-prodotto__figura img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scheda-prodotto__figura svg { position: relative; z-index: 1; }

/* apertura: meno distacco fra la testata e l inizio del testo */
.eroe--foto { min-height: 74vh; }
.eroe--foto .eroe__griglia { padding-block: 58px 64px; }
@media (max-width: 1000px) {
  .eroe--foto .eroe__griglia { padding-block: 44px 52px; }
}
@media (max-width: 760px) {
  .eroe--foto { min-height: auto; }
  .eroe--foto .eroe__griglia { padding-block: 34px 42px; }
}

/* lumino: tutto piu lento e calmo */
.lumino__alone { animation-duration: 11s; }
.lumino[data-rivela].visto .lumino__alone {
  animation: bagliore 2.2s var(--curva) both,
             alone 11s ease-in-out infinite 2.2s,
             sfarfallio 7.4s ease-in-out infinite 2.2s;
}
.lumino__raggi { animation-duration: 150s; }
.lumino__fiamma { animation-duration: 7s; }
.lumino[data-rivela].visto .lumino__fiamma {
  animation: fiamma 7s ease-in-out infinite, guizzo 2.9s ease-in-out infinite;
}
.lumino svg,
.lumino[data-rivela].visto svg { animation: luminoGalleggia 16s ease-in-out infinite 1.6s; }
.lumino__scintille i { animation-duration: 11s; }
.lumino::after { animation-duration: 20s; }

/* sezione Tariffe in home: foto e testo della stessa altezza, il tasto resta dentro */
.griglia-due--tariffe { align-items: stretch; }
.griglia-due--tariffe .foto {
  aspect-ratio: auto;
  height: 100%;
  min-height: 100%;
  align-self: stretch;
}
.griglia-due--tariffe > div:last-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.griglia-due--tariffe > div:last-child > *:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .griglia-due--tariffe { align-items: start; }
  .griglia-due--tariffe .foto { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
}

/* ricambio di categorie e articoli in home: a scalare, non tutto insieme */
.piastrelle.sfuma, .griglia-prodotti.sfuma { opacity: 1; }
.piastrelle > *,
#vetrina.griglia-prodotti > * {
  transition: opacity 0.5s var(--curva), transform 0.5s var(--curva);
  will-change: opacity, transform;
}
.piastrelle.esce > *,
#vetrina.esce > * { opacity: 0; transform: translateY(-8px); }
.piastrelle.entra > *,
#vetrina.entra > * { opacity: 0; transform: translateY(10px); }
.piastrelle > *:nth-child(1), #vetrina > *:nth-child(1) { transition-delay: 0s; }
.piastrelle > *:nth-child(2), #vetrina > *:nth-child(2) { transition-delay: 0.07s; }
.piastrelle > *:nth-child(3), #vetrina > *:nth-child(3) { transition-delay: 0.14s; }
.piastrelle > *:nth-child(4), #vetrina > *:nth-child(4) { transition-delay: 0.21s; }
@media (prefers-reduced-motion: reduce) {
  .piastrelle > *, #vetrina > * { transition: none; transform: none; }
}

/* ==================================================================
   trama floreale del logo: dietro l apertura e dietro il piede
   ================================================================== */

.eroe--foto::before,
.piede::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url(/img/fiori-berna.png);
  background-size: 420px auto;
  background-repeat: repeat;
  opacity: 0.16;
  mix-blend-mode: luminosity;
  pointer-events: none;
  z-index: 0;
}

/* sull apertura la trama sta sopra la foto ma sotto il testo */
.eroe--foto { isolation: isolate; }
.eroe--foto::before {
  background-image:
    linear-gradient(180deg, rgba(7, 27, 32, 0.86), rgba(7, 27, 32, 0.72) 45%, rgba(7, 27, 32, 0.9)),
    url(/img/fiori-berna.png);
  background-size: auto, 420px auto;
  background-repeat: no-repeat, repeat;
  opacity: 0.3;
  mix-blend-mode: normal;
}

/* il piede: stessi colori del logo, con i fiori dietro */
.piede {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, #0A2027 0%, #071B20 100%);
}
.piede::before {
  background-image:
    linear-gradient(180deg, rgba(10, 32, 39, 0.88), rgba(7, 27, 32, 0.94)),
    url(/img/fiori-berna.png);
  background-size: auto, 360px auto;
  background-repeat: no-repeat, repeat;
  opacity: 1;
  mix-blend-mode: normal;
}
.piede > *, .piede__coda { position: relative; z-index: 1; }
.piede h4, .piede__colonna h4 { color: #7FD4C4; }
.piede__colonna h4::before { background: #7FD4C4; }
.piede__colonna h4::after { background: linear-gradient(90deg, rgba(127, 212, 196, 0.45), transparent); }
.piede__colonna a:hover { color: #7FD4C4; }

/* il divisore prima del piede si accorda al nuovo fondo */
.divisore--piede { background: #0A2027; }

/* parco auto: le schede dei mezzi */
.griglia-mezzi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
  margin: 34px 0 44px;
}
.mezzo {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  overflow: hidden;
  background: var(--carta);
  transition: border-color 0.3s var(--curva), transform 0.3s var(--curva);
}
.mezzo:hover { border-color: var(--oro); transform: translateY(-3px); }
.mezzo__figura {
  aspect-ratio: 2 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(168deg, var(--figura-a) 0%, var(--figura-b) 100%);
  border-bottom: 1px solid var(--bordo);
}
.mezzo__figura svg { width: 74%; height: auto; }
.mezzo__corpo { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.mezzo__tipo {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oro);
}
.mezzo__nome { font-family: var(--display); font-size: 25px; font-weight: 400; line-height: 1.1; }
.mezzo__dett { font-size: 14.5px; line-height: 1.65; color: var(--fumo); flex: 1; }
.mezzo__nota {
  font-size: 12.5px;
  color: var(--fumo);
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid var(--bordo);
}

/* ---------- scelta del colore sulla scheda prodotto ---------- */
.scelta-colore { margin: 4px 0 22px; }
.scelta-colore__titolo {
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fumo);
  margin-bottom: 10px;
}
.scelta-colore__scotto, .scelta-colore__scelto {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14.5px;
  color: var(--inchiostro);
  margin-left: 10px;
  font-weight: 600;
}
.scelta-colore__righe { display: flex; flex-wrap: wrap; gap: 10px; }
.quadratino {
  width: 42px; height: 42px;
  padding: 3px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: transparent;
  cursor: pointer;
  transition: border-color 0.25s var(--curva), transform 0.25s var(--curva);
}
.quadratino:hover { border-color: var(--oro); transform: translateY(-2px); }
.quadratino.scelto { border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro); }
.quadratino__tinta {
  display: block;
  width: 100%; height: 100%;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

/* colore nella riga del carrello */
.riga-carrello__colore { font-size: 14px; color: var(--fumo); margin-top: 2px; }

/* ---------- colori nel pannello ---------- */
.colore-riga {
  display: grid;
  grid-template-columns: 48px 1fr 64px auto auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.colore-riga input[type="color"] {
  width: 48px; height: 40px;
  padding: 2px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: transparent;
  cursor: pointer;
}
.colore-riga__foto {
  width: 64px; height: 40px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--fumo);
  text-align: center;
}
.colore-riga__foto img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 620px) {
  .colore-riga { grid-template-columns: 48px 1fr; grid-auto-flow: row; }
  .colore-riga__foto { grid-column: 1 / -1; width: 100%; }
}

/* colore di base nel pannello: usa la fotografia principale dell articolo */
.colore-riga--base .colore-riga__foto { position: relative; border-color: var(--oro); }
.colore-riga__segno {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(167, 126, 68, 0.9);
  color: #fff;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 1px 0;
}

/* foto degli articoli nel negozio: senza fondo, l oggetto sta sul chiaro */
.carta-prodotto__figura,
.scheda-prodotto__figura,
.riga-carrello__figura,
.mini-figura {
  background: #FFFFFF;
}
.carta-prodotto__figura img,
.scheda-prodotto__figura img,
.riga-carrello__figura img,
.mini-figura img {
  object-fit: contain;
  padding: 6%;
}
.scheda-prodotto__figura img { padding: 5%; }

/* piede piu compatto e spaziature in ordine */
.piede__corpo {
  padding-top: 30px;
  gap: 30px;
}
.piede__griglia { padding-top: 26px; padding-bottom: 22px; }
.piede__marchio img { height: 46px; margin-bottom: 10px; }
.piede__marchio p { font-size: 13.5px; line-height: 1.6; max-width: 42ch; }
.piede__colonna { gap: 8px; }
.piede__colonna h4 { margin-bottom: 2px; font-size: 11px; }
.piede__colonna a { font-size: 13.5px; }
.piede__coda {
  margin-top: 24px;
  padding-top: 11px;
  padding-bottom: 11px;
  font-size: 12px;
}
.divisore--piede .contenitore { padding-block: 20px; }

@media (max-width: 900px) {
  .piede__corpo { padding-top: 24px; gap: 24px; }
  .piede__marchio img { height: 40px; }
  .divisore--piede .contenitore { padding-block: 16px; }
}
@media (max-width: 520px) {
  .piede__coda { flex-direction: column; gap: 6px; text-align: center; }
}

/* ---------- correzioni al piede e al negozio ---------- */

/* la fascia in fondo torna allineata al contenuto, non incollata ai bordi */
.piede__coda {
  padding-left: max(24px, calc(50vw - 50%));
  padding-right: max(24px, calc(50vw - 50%));
  padding-top: 12px;
  padding-bottom: 12px;
  align-items: center;
}

/* colonne del piede: piu leggibili sopra la trama floreale */
.piede__corpo { position: relative; }
.piede__colonna h4 {
  color: #8FE0CE;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  margin-bottom: 6px;
}
.piede__colonna a {
  color: #C9D8D4;
  font-size: 13.5px;
  line-height: 1.5;
  padding-block: 1px;
}
.piede__colonna a:hover { color: #8FE0CE; }
.piede__numero {
  font-family: var(--display);
  font-size: 20px !important;
  color: #F1F4F3 !important;
  letter-spacing: 0.01em;
}
.piede__numero:hover { color: #8FE0CE !important; }
.piede__marchio p { color: #A9BAB5; }

/* le foto degli articoli tornano sul fondo scuro di prima */
.carta-prodotto__figura,
.scheda-prodotto__figura,
.riga-carrello__figura,
.mini-figura {
  background: linear-gradient(168deg, var(--figura-a) 0%, var(--figura-b) 100%);
}

/* il quadratino del colore di base mostra la fotografia dell articolo */
.quadratino__tinta--foto { background-size: cover; background-position: center; }

/* ---------- ultime correzioni ---------- */

/* banner delle pagine: la trama del logo al posto delle fotografie */
.testata-pagina--foto .testata-pagina__sfondo {
  background-size: 300px auto;
  background-repeat: repeat;
  background-position: center;
  opacity: 1;
  filter: none;
}
.testata-pagina--foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 27, 32, 0.9), rgba(7, 27, 32, 0.82) 50%, rgba(7, 27, 32, 0.93));
  z-index: 1;
  pointer-events: none;
}
.testata-pagina--foto .contenitore { position: relative; z-index: 2; }

/* la barretta a fianco delle voci di menu non deve ruotare: restava una riga storta */
.tendina__colonna a:hover::before { transform: translateY(-50%); }

/* quadratini del colore: piu aria attorno */
.scelta-colore { margin: 18px 0 24px; }
.scelta-colore__righe { gap: 12px; }
.quadratino { width: 44px; height: 44px; }

/* la riga delle rate, piu curata */
.rate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 2px 0 20px;
  padding: 9px 15px;
  border: 1px solid var(--bordo);
  border-radius: 99px;
  font-size: 13.5px;
  color: var(--fumo);
  background: var(--carta-2, transparent);
}
.rate b { color: var(--oro); font-weight: 600; }
.rate a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rate a:hover { color: var(--oro); }

/* nota per singolo articolo nel carrello */
.riga-carrello__nota { display: block; grid-column: 1 / -1; margin-top: 12px; }
.riga-carrello__nota span { display: block; font-size: 12px; color: var(--fumo); margin-bottom: 5px; }
.riga-carrello__nota i { font-style: normal; opacity: 0.7; }
.riga-carrello__nota input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  font: inherit;
  font-size: 14px;
  background: transparent;
  color: inherit;
}
.riga-carrello__nota input:focus { outline: none; border-color: var(--oro); }

/* ---------- banner in stile logo: la B come filigrana, non tappezzeria ---------- */
.testata-pagina--foto .testata-pagina__sfondo {
  inset: 0;
  background-color: #0B1F26;
  background-size: auto 200%;
  background-repeat: no-repeat;
  background-position: right -6% center;
  filter: none;
  opacity: 0.22;
  transform: none;
  animation: none;
}
.testata-pagina--foto { background: #0B1F26; }
.testata-pagina--foto::after {
  background: linear-gradient(90deg, #0B1F26 0%, rgba(11, 31, 38, 0.86) 45%, rgba(11, 31, 38, 0.55) 100%);
}
@media (max-width: 760px) {
  .testata-pagina--foto .testata-pagina__sfondo { background-size: auto 140%; background-position: right -30% center; opacity: 0.16; }
}

/* ---------- fluidita: via gli effetti che fanno faticare lo scorrimento ---------- */
.intestazione { backdrop-filter: none; -webkit-backdrop-filter: none; }
.eroe--foto::before, .piede::before { mix-blend-mode: normal; }
.piastrelle > *, #vetrina.griglia-prodotti > * { will-change: auto; }
.testata-pagina__sfondo { will-change: auto; }
.eroe__sfondo { animation: none; }

/* ---------- tendina: si adatta al contenuto invece di essere sempre enorme ---------- */
.tendina__colonna a { padding-top: 6px; padding-bottom: 6px; }
.tendina__colonna a span { font-size: 12px; }
.tendina__interno { align-items: start; }
.tendina { max-height: min(72vh, 560px); overflow-y: auto; overscroll-behavior: contain; }
/* la colonna piu lunga si divide in due, cosi il riquadro resta basso */
.tendina__colonna:nth-child(4) { column-count: 2; column-gap: 24px; }
.tendina__colonna:nth-child(4) .tendina__titolo { column-span: all; }
.tendina__colonna:nth-child(4) a { break-inside: avoid; }
@media (max-width: 1100px) { .tendina__colonna:nth-child(4) { column-count: 1; } }

/* banner: fiori grandi in stile logo, non una tappezzeria e non la lettera */
.testata-pagina--foto .testata-pagina__sfondo {
  background-size: auto 340%;
  background-repeat: no-repeat;
  background-position: right 4% center;
  opacity: 0.4;
  filter: saturate(1.05);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 42%, #000 78%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 42%, #000 78%);
}
.testata-pagina--foto::after {
  background: linear-gradient(90deg, #0B1F26 0%, rgba(11, 31, 38, 0.9) 40%, rgba(11, 31, 38, 0.5) 100%);
}
@media (max-width: 760px) {
  .testata-pagina--foto .testata-pagina__sfondo {
    background-size: auto 200%;
    background-position: right -20% center;
    opacity: 0.28;
  }
  .testata-pagina--foto::after {
    background: linear-gradient(180deg, rgba(11, 31, 38, 0.92), rgba(11, 31, 38, 0.86));
  }
}

/* banner: i fiori coprono tutta la larghezza, non una striscia a destra */
.testata-pagina--foto .testata-pagina__sfondo {
  background-size: auto 100%;
  background-repeat: repeat-x;
  background-position: center top;
  opacity: 0.34;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.6) 35%, #000 70%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.6) 35%, #000 70%);
}
.testata-pagina--foto::after {
  background: linear-gradient(90deg, rgba(11, 31, 38, 0.97) 0%, rgba(11, 31, 38, 0.86) 45%, rgba(11, 31, 38, 0.62) 100%);
}
@media (max-width: 760px) {
  .testata-pagina--foto .testata-pagina__sfondo {
    background-size: auto 100%;
    background-position: center top;
    opacity: 0.24;
  }
}

/* home, blocco tariffe: prezzo compatto */
.prezzo-da {
  font-family: var(--display);
  font-size: 38px;
  line-height: 1.1;
  color: var(--oro);
  margin: 4px 0 18px;
}
.griglia-due--tariffe .sottotitolo-sezione { margin-bottom: 14px !important; }

/* home, tariffe: il prezzo sta vicino al testo, staccato dal pulsante */
.griglia-due--tariffe .sottotitolo-sezione { margin-bottom: 6px !important; }
.prezzo-da { margin: 0 0 26px; }
.griglia-due--tariffe > div:last-child { justify-content: flex-start; padding-top: 6px; }

/* ---------- divisori: stessa aria sopra e sotto, ovunque ---------- */
.divisore { padding-block: 0; margin-block: 34px; }
/* la sezione che segue un divisore non ripete il suo spazio in cima */
.contenitore:has(> .divisore) + .sezione,
.contenitore:has(> .divisore) + main.sezione { padding-top: 0; }
/* e quella che lo precede non lascia un vuoto in fondo */
.sezione:has(+ .contenitore > .divisore) { padding-bottom: 0; }
/* il divisore prima del piede: stesso ritmo */
.divisore--piede .contenitore { padding-block: 0; margin-block: 34px 0; }
.sezione:has(+ .divisore--piede) { padding-bottom: 0; }
.divisore--piede + .piede .piede__corpo { padding-top: 34px; }
@media (max-width: 760px) {
  .divisore { margin-block: 24px; }
  .divisore--piede .contenitore { margin-block: 24px 0; }
  .divisore--piede + .piede .piede__corpo { padding-top: 24px; }
}

/* ---------- piede: blocco del marchio centrato in verticale ---------- */
.piede__marchio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  text-align: center;
}
.piede__marchio img { margin-bottom: 12px; }
@media (max-width: 900px) {
  .piede__marchio { justify-content: flex-start; }
}

/* fascia in fondo: oro uniforme, senza il chiaro al centro */
.piede__coda { background: linear-gradient(90deg, #B98B4C, #C99A5A 50%, #B98B4C); }

/* banner -> testo: vale anche quando la sezione sta dentro <main> */
.testata-pagina + main > .sezione:first-child,
.testata-pagina + main.sezione,
.testata-pagina + .sezione { padding-top: 32px; }
@media (max-width: 760px) {
  .testata-pagina + main > .sezione:first-child,
  .testata-pagina + main.sezione,
  .testata-pagina + .sezione { padding-top: 24px; }
}

/* piede in grassetto */
.piede__marchio p { font-weight: 600; color: #C9D8D4; }
.piede__colonna a { font-weight: 600; }
.piede__coda, .piede__coda a { font-weight: 600; }

/* il pulsante "Modifica sito" sta sopra tutto, anche sopra la fascia dei cookie */
.testi-comandi { z-index: 1000; }
.testi-avvio {
  padding: 13px 20px;
  font-size: 15px;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(217, 176, 113, 0.35);
}

/* numero nel piede: via la riga dorata sotto */
.piede__numero::after { display: none; }

/* ==================================================================
   divisori: 34px sopra e 34px sotto, sempre, qualunque cosa ci sia intorno
   ================================================================== */
html body .divisore,
html body main .contenitore > .divisore,
html body .piede .divisore {
  padding-block: 0;
  margin-block: 34px;
}
html body .divisore--piede { margin-block: 0; }
html body .divisore--piede .contenitore { padding-block: 0; margin-block: 34px 0; }
html body .divisore--piede + .piede .piede__corpo { padding-top: 34px; }

/* le sezioni accanto a un divisore non aggiungono il proprio spazio */
html body .sezione:has(+ .contenitore > .divisore),
html body main:has(+ .divisore--piede) > .sezione:last-child,
html body .sezione:has(+ .divisore--piede) { padding-bottom: 0; }
html body .contenitore:has(> .divisore) + .sezione,
html body .contenitore:has(> .divisore) + main > .sezione:first-child { padding-top: 0; }

@media (max-width: 760px) {
  html body .divisore,
  html body main .contenitore > .divisore,
  html body .piede .divisore { margin-block: 24px; }
  html body .divisore--piede .contenitore { margin-block: 24px 0; }
  html body .divisore--piede + .piede .piede__corpo { padding-top: 24px; }
}

/* pannello: i tasti delle righe stanno su una riga sola, allineati */
.tavola td:has(> .azioni-riga) { width: 1%; white-space: nowrap; }
.azioni-riga { flex-wrap: nowrap; gap: 8px; }
.azione { white-space: nowrap; padding: 7px 13px; }
@media (max-width: 900px) {
  .tavola td:has(> .azioni-riga) { white-space: normal; }
  .azioni-riga { flex-wrap: wrap; }
}

/* divisore prima del piede: lo spazio sotto sta dentro il divisore stesso,
   cosi non finisce a ridosso del cambio di sfondo del piede */
html body .divisore--piede { background: var(--scuro); }
html body .divisore--piede .contenitore { margin-block: 0; padding-block: 34px; }
html body .divisore--piede + .piede .piede__corpo { padding-top: 0; }
@media (max-width: 760px) {
  html body .divisore--piede .contenitore { padding-block: 24px; }
}

/* stati degli ordini in maiuscolo anche nella tendina aperta */
.tavola select, .tavola select option { text-transform: uppercase; font-size: 12px; letter-spacing: 0.04em; }

/* piede: le colonne partono piu in basso, col loro respiro sopra */
html body .divisore--piede + .piede .piede__corpo { padding-top: 40px; }
@media (max-width: 760px) {
  html body .divisore--piede + .piede .piede__corpo { padding-top: 28px; }
}

/* barra laterale del pannello: il nostro divisore al posto della riga piatta */
.admin-lato__coda { border-top: 0; padding-top: 0; }
html body .divisore--lato { margin-top: auto; margin-bottom: 18px; padding-inline: 10px; }
.divisore--lato::before, .divisore--lato::after { opacity: 0.8; }
@media (max-width: 1000px) {
  html body .divisore--lato { display: none; }
}

/* barra laterale: i collegamenti "Vedi il sito" e "Da telefono" si accendono al passaggio */
.admin-lato__coda .brindello a {
  color: #8FA09B;
  transition: color 0.25s var(--curva);
  text-underline-offset: 3px;
}
.admin-lato__coda .brindello a:hover { color: var(--oro-chiaro); text-decoration: underline; }

/* logo nella barra laterale: proporzioni giuste, niente stiramento */
.admin-lato .marchio { display: block; width: 100%; }
.admin-lato .marchio__segno {
  display: block;
  width: 100%;
  max-width: 190px;
  height: auto;
  aspect-ratio: 1294 / 280;
  object-fit: contain;
  margin: 0 auto;
}
@media (max-width: 1000px) {
  .admin-lato .marchio { width: auto; }
  .admin-lato .marchio__segno { width: auto; height: 36px; max-width: none; }
}

/* riepilogo: schede tutte uguali, bordo e altezza compresi */
.griglia-numeri { align-items: stretch; }
.numero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 118px;
  border-color: var(--bordo) !important;
}
.numero__etichetta { min-height: 2.6em; display: flex; align-items: flex-end; margin-bottom: 10px; }
.numero__valore { font-size: 36px; }
.numero--rilievo .numero__valore, .numero--bronzo .numero__valore { color: inherit; }
.numero--bronzo .numero__valore { color: var(--oro-chiaro); }

/* ==================================================================
   barra laterale del pannello, rifatta
   ================================================================== */
.admin-impianto { grid-template-columns: 264px 1fr; }
.admin-lato {
  padding: 26px 18px 22px;
  gap: 2px;
  background: linear-gradient(180deg, #0C2530 0%, #081C22 100%);
  border-right: 1px solid rgba(127, 212, 196, 0.12);
}
.admin-lato .marchio { margin-bottom: 22px; padding: 0 6px 20px; position: relative; }
.admin-lato .marchio::after {
  content: '';
  position: absolute; left: 6px; right: 6px; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 176, 113, 0.5) 50%, transparent);
}

/* le voci: compatte, con l indicatore laterale invece del blocco pieno */
.voce-lato {
  position: relative;
  padding: 9px 12px 9px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #A9BAB5;
  transition: color 0.2s var(--curva), background 0.2s var(--curva);
}
.voce-lato::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 3px; height: 0;
  border-radius: 2px;
  background: var(--oro-chiaro);
  transform: translateY(-50%);
  transition: height 0.22s var(--curva);
}
.voce-lato:hover { background: rgba(255, 255, 255, 0.045); color: #F1F4F3; }
.voce-lato.attiva {
  background: rgba(127, 212, 196, 0.1);
  color: #F1F4F3;
  font-weight: 600;
}
.voce-lato.attiva::before { height: 60%; }
.pallino {
  min-width: 18px; height: 18px;
  font-size: 10.5px;
  background: var(--oro);
  color: #1F1509;
}
.voce-lato.attiva .pallino { background: var(--oro-chiaro); color: #1F1509; }

/* il fondo: divisore, utente, esci, collegamenti */
html body .divisore--lato { margin-top: auto; margin-bottom: 14px; padding-inline: 6px; }
.admin-lato__coda { padding: 0 6px; }
.admin-lato__coda .brindello { font-size: 12.5px; }
.admin-lato__coda .brindello b { color: #F1F4F3; font-weight: 600; }
.admin-lato__coda #esci {
  margin-top: 10px;
  padding: 9px 14px;
  border: 1px solid rgba(217, 176, 113, 0.35);
  background: transparent;
  color: var(--oro-chiaro);
  font-weight: 600;
  border-radius: 6px;
}
.admin-lato__coda #esci:hover { border-color: var(--oro-chiaro); background: rgba(217, 176, 113, 0.08); outline: 0; }
.admin-lato__coda .brindello:last-child { margin-top: 12px; }

@media (max-width: 1000px) {
  .admin-lato { gap: 6px; padding: 14px 16px; border-right: 0; border-bottom: 1px solid rgba(127, 212, 196, 0.12); }
  .admin-lato .marchio { margin-bottom: 0; padding: 0; }
  .admin-lato .marchio::after { display: none; }
  .voce-lato { padding: 8px 12px; }
  .voce-lato::before { display: none; }
  .admin-lato__coda { padding: 0; }
  .admin-lato__coda #esci { margin-top: 0; }
}

/* ---------- ultime rifiniture ---------- */

/* contatti senza il modulo: una colonna sola, centrata */
.griglia-due--una { grid-template-columns: minmax(0, 720px); justify-content: center; }

/* "Vai al negozio": il titolo non scivola a destra al passaggio */
.tendina__piede:hover b { transform: none; }
.tendina__piede b { transition: color 0.35s var(--curva); }

/* la freccetta delle voci: piu piccola, morbida, si volta con dolcezza */
.voce__punta {
  width: 6px; height: 6px;
  border-width: 1.3px;
  margin-left: 7px;
  transform: rotate(45deg) translateY(-1px);
  transform-origin: 60% 60%;
  opacity: 0.75;
  transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1), color 0.3s var(--curva), opacity 0.3s var(--curva);
}
.voce:hover .voce__punta,
.voce.aperta .voce__punta {
  transform: rotate(-135deg) translateY(-3px);
  color: var(--oro-chiaro);
  opacity: 1;
}

/* testata: voci di menu centrate fra il logo e i tasti a destra */
.intestazione .contenitore { justify-content: space-between; }
.navigazione { margin-left: auto; margin-right: auto; justify-content: center; }
.azioni-intestazione { margin-left: 0; }

/* schede dei servizi: icona, titolo e testo centrati */
.carta-servizio { text-align: center; }
.carta-servizio .medaglione,
.carta-servizio .carta-servizio__icona { margin-left: auto; margin-right: auto; }
.carta-servizio p { margin-left: auto; margin-right: auto; max-width: 36ch; }

/* foto degli articoli: riempiono il riquadro mantenendo le proporzioni */
.carta-prodotto__figura img,
.riga-carrello__figura img,
.mini-figura img {
  object-fit: cover;
  object-position: center;
  padding: 0;
}
.scheda-prodotto__figura img { object-fit: contain; padding: 4%; }

/* scheda articolo: il titolo non si sottolinea ne cambia colore, basta l effetto della scheda */
.carta-prodotto__nome a,
.carta-prodotto__nome a:hover,
.carta-prodotto:hover .carta-prodotto__nome a {
  text-decoration: none;
  color: inherit;
  background: none;
  box-shadow: none;
}
.carta-prodotto__nome a::after { display: none; }

/* scheda articolo: niente effetti dentro la foto, ne sul titolo. Resta solo l hover della scheda */
.carta-prodotto__figura::after { display: none; }
.carta-prodotto:hover .carta-prodotto__figura img { transform: none; }
.carta-prodotto__figura img { transition: none; }
.carta-prodotto__nome a:hover,
.carta-prodotto:hover .carta-prodotto__nome a { text-decoration: none; }

/* tendina "Info utili": niente colonne spezzate, riquadro largo quanto serve e voci compatte */
.tendina__colonna:nth-child(4) { column-count: 1; }
.tendina { width: min(1180px, calc(100vw - 32px)); max-height: none; overflow: visible; }
.tendina__interno { grid-template-columns: 1.1fr 1fr 0.9fr 1.15fr; gap: 0 26px; }
.tendina__colonna a { padding: 5px 10px 5px 14px; }
.tendina__colonna a b { font-size: 14px; line-height: 1.25; white-space: nowrap; }
.tendina__colonna a span { font-size: 11.5px; line-height: 1.3; white-space: nowrap; }
.tendina__titolo { margin-bottom: 10px; }
@media (max-width: 1240px) {
  .tendina__colonna a b, .tendina__colonna a span { white-space: normal; }
}

/* piede: stesso passo fra le righe in tutte le colonne */
.piede__colonna { gap: 0; }
.piede__colonna a { display: block; line-height: 1.5; padding: 5px 0; margin: 0; }
.piede__numero { font-size: 19px !important; line-height: 1.2; padding: 3px 0 4px; margin: 0; }
.piede__colonna h4 { margin-bottom: 8px; }

/* piede: stesso spazio sopra e sotto le colonne */
html body .divisore--piede + .piede .piede__corpo { padding-top: 40px; padding-bottom: 40px; }
html body .piede__coda { margin-top: 0; }
@media (max-width: 760px) {
  html body .divisore--piede + .piede .piede__corpo { padding-top: 28px; padding-bottom: 28px; }
}

/* spazi uniformi (34px) anche quando la sezione sta dentro <main>:
   banner -> contenuto, contenuto -> divisore, divisore -> piede */
html body .testata-pagina + main > .sezione:first-child,
html body .testata-pagina + main.sezione,
html body .testata-pagina + .sezione { padding-top: 34px; }
html body main:has(+ .divisore--piede) > .sezione:last-child,
html body main.sezione:has(+ .divisore--piede),
html body .sezione:has(+ .divisore--piede) { padding-bottom: 0; }
html body main:has(+ .divisore--piede) > .sezione:last-child > .contenitore > :last-child,
html body .sezione:has(+ .divisore--piede) > .contenitore > :last-child { margin-bottom: 0; }
html body .divisore--piede .contenitore { padding-block: 34px; }
@media (max-width: 760px) {
  html body .testata-pagina + main > .sezione:first-child,
  html body .testata-pagina + main.sezione,
  html body .testata-pagina + .sezione { padding-top: 24px; }
  html body .divisore--piede .contenitore { padding-block: 24px; }
}

/* banner delle pagine: stessa resa del piede (fiori grandi, velo scuro uniforme) */
html body .testata-pagina--foto .testata-pagina__sfondo {
  background-image:
    linear-gradient(180deg, rgba(10, 32, 39, 0.88), rgba(7, 27, 32, 0.94)),
    url(/img/fiori-berna.png);
  background-size: auto, 360px auto;
  background-repeat: no-repeat, repeat;
  background-position: center, center top;
  opacity: 1;
  filter: none;
  -webkit-mask-image: none;
  mask-image: none;
}
html body .testata-pagina--foto { background: linear-gradient(180deg, #0A2027 0%, #071B20 100%); }
html body .testata-pagina--foto::after { background: none; }
@media (max-width: 760px) {
  html body .testata-pagina--foto .testata-pagina__sfondo { background-size: auto, 300px auto; }
}

/* banner: lo stile del piede deve vincere anche sull attributo style della pagina */
html body .testata-pagina--foto .testata-pagina__sfondo {
  background-image:
    linear-gradient(180deg, rgba(10, 32, 39, 0.88), rgba(7, 27, 32, 0.94)),
    url(/img/fiori-berna.png) !important;
  background-size: auto, 360px auto !important;
  background-repeat: no-repeat, repeat !important;
  background-position: center, center top !important;
}

/* ---------- calendario in stile sito ---------- */
.calendario__scelta { display: block; font-size: 13px; color: var(--oro-chiaro); margin-bottom: 6px; min-height: 1.2em; text-transform: capitalize; }
.calendario__campo { cursor: pointer; }
.calendario {
  margin-top: 8px;
  padding: 14px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-g);
  background: var(--carta);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.6);
  max-width: 340px;
}
.calendario__testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.calendario__mese { font-family: var(--display); font-size: 18px; }
.calendario__mese b { font-weight: 400; color: var(--oro); }
.calendario__freccia {
  width: 32px; height: 32px;
  border: 1px solid var(--bordo);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 20px; line-height: 1;
  cursor: pointer;
}
.calendario__freccia:hover:not(:disabled) { border-color: var(--oro); color: var(--oro); }
.calendario__freccia:disabled { opacity: 0.3; cursor: default; }
.calendario__griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendario__giorno-nome { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fumo); text-align: center; padding: 4px 0 6px; }
.calendario__giorno {
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.2s var(--curva), background 0.2s var(--curva), color 0.2s var(--curva);
}
.calendario__giorno:hover:not(:disabled) { border-color: var(--oro); color: var(--oro); }
.calendario__giorno.oggi { border-color: var(--bordo); }
.calendario__giorno.scelto { background: var(--oro); border-color: var(--oro); color: #1F1509; font-weight: 600; }
.calendario__giorno:disabled { opacity: 0.28; cursor: default; }
.calendario__piede { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bordo); }
.calendario__oggi { border: 0; background: transparent; color: var(--oro); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.calendario__oggi:hover { text-decoration: underline; text-underline-offset: 3px; }
.calendario__nota { font-size: 11.5px; color: var(--fumo); }

/* piede piu contenuto: logo e testo del marchio piu piccoli */
.piede__marchio img { height: 38px; margin-bottom: 8px; }
.piede__marchio p { font-size: 12.5px; line-height: 1.55; max-width: 38ch; }
html body .divisore--piede + .piede .piede__corpo { padding-top: 32px; padding-bottom: 32px; }

/* voci della tendina: ferme al passaggio, senza scivolare e senza righe sotto */
html body .tendina__colonna a:hover { padding-left: 14px; background: transparent; }
html body .tendina__colonna a,
html body .tendina__colonna a:hover,
html body .tendina__colonna a b,
html body .tendina__colonna a span { text-decoration: none; border-bottom: 0; box-shadow: none; }
html body .tendina__colonna a::after { display: none; }

/* banner: titolo piu contenuto e fiori piu piccoli nella trama */
html body .testata-pagina h1 { font-size: clamp(28px, 3.4vw, 40px); max-width: 24ch; }
html body .testata-pagina p { font-size: 16px; }
html body .testata-pagina--foto .testata-pagina__sfondo { background-size: auto, 240px auto !important; }

/* parco auto: schede con le fotografie vere */
.griglia-mezzi--foto { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.mezzo--foto .mezzo__figura { aspect-ratio: 16 / 10; background: #fff; }
.mezzo--foto .mezzo__figura img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.mezzo__viste { font-size: 13px; color: var(--oro); text-decoration: underline; text-underline-offset: 3px; margin-top: 6px; }
.mezzo__viste:hover { color: var(--oro-chiaro); }

/* titoli nelle pagine di testo: riga sotto in oro, sfumata come il nostro divisore */
.prosa h2 {
  position: relative;
  border-bottom: 0;
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.prosa h2::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--oro) 0%, rgba(217, 176, 113, 0.45) 45%, transparent 100%);
}
.prosa h2::before {
  content: '';
  position: absolute; left: 0; bottom: -3px;
  width: 7px; height: 7px;
  background: var(--oro);
  transform: rotate(45deg);
}
.prosa h2 + h3 { margin-top: 18px; }

/* banner: briciole, titolo e testo piu vicini, titolo con interlinea stretta */
html body .testata-pagina h1 { line-height: 1.08; margin-bottom: 10px; }
html body .briciole { margin-bottom: 10px; }
html body .testata-pagina p { line-height: 1.55; max-width: 62ch; }
html body .testata-pagina { padding-block: 40px 30px; }

/* ---------- editor: cancellazione dei blocchi ---------- */
.blocco-modificabile { position: relative; outline: 1px dashed rgba(217, 176, 113, 0.35); outline-offset: 6px; }
.blocco-modificabile:hover { outline-color: rgba(217, 176, 113, 0.8); }
.testi-cestino {
  position: absolute; top: -12px; right: -12px;
  width: 26px; height: 26px;
  border: 1px solid var(--oro-filo);
  border-radius: 50%;
  background: #0D2530;
  color: var(--oro-chiaro);
  font-size: 13px; line-height: 1;
  cursor: pointer;
  z-index: 95;
  opacity: 0.55;
  transition: opacity 0.2s var(--curva), transform 0.2s var(--curva);
}
.blocco-modificabile:hover > .testi-cestino { opacity: 1; }
.testi-cestino:hover { transform: scale(1.12); background: var(--rosso, #8B2F2F); color: #fff; }

/* tabelle di prezzi: la prima colonna centrata in verticale rispetto al testo */
.tavola td, .tavola th { vertical-align: middle; }

/* ---------- petali che cadono nei riquadri di richiamo ---------- */
.richiamo { position: relative; overflow: hidden; }
.richiamo > * { position: relative; z-index: 1; }
.petali { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.petalo {
  position: absolute;
  top: -40px;
  width: 22px; height: 22px;
  background-image: url(/img/fiori-berna.png);
  background-size: 260px auto;
  border-radius: 50% 50% 50% 0;
  opacity: 0;
  filter: saturate(1.1);
  animation: petaloCade var(--durata, 9s) linear var(--attesa, 0s) 1 forwards;
  will-change: transform, opacity;
}
@keyframes petaloCade {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(var(--scala, 1)); opacity: 0; }
  8%   { opacity: 0.55; }
  50%  { transform: translate3d(var(--deriva, 30px), 55%, 0) rotate(200deg) scale(var(--scala, 1)); }
  92%  { opacity: 0.45; }
  100% { transform: translate3d(calc(var(--deriva, 30px) * 1.6), 120%, 0) rotate(380deg) scale(var(--scala, 1)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .petali { display: none; } }

/* petali piu evidenti */
.petalo { width: 28px; height: 28px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }
@keyframes petaloCade {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(var(--scala, 1)); opacity: 0; }
  6%   { opacity: 0.85; }
  50%  { transform: translate3d(var(--deriva, 30px), 55%, 0) rotate(200deg) scale(var(--scala, 1)); opacity: 0.8; }
  94%  { opacity: 0.7; }
  100% { transform: translate3d(calc(var(--deriva, 30px) * 1.6), 120%, 0) rotate(380deg) scale(var(--scala, 1)); opacity: 0; }
}

/* riga rassicurante sotto i pulsanti dei riquadri */
.richiamo { flex-wrap: wrap; }
.richiamo__nota {
  flex-basis: 100%;
  width: 100%;
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--fumo);
  line-height: 1.55;
}
.richiamo__nota b { color: var(--oro-chiaro); font-weight: 600; }
.richiamo--scuro .richiamo__nota, .sezione--scura .richiamo__nota { color: #9FB2AC; }

/* i numeri in home: tre riquadri, non piu quattro */
.cifre { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .cifre { grid-template-columns: 1fr; } }

/* ---------- la barretta dorata dell avviso "Disponibile" diventa una fiamma ---------- */
.scorta {
  position: relative;
  border-left: 3px solid transparent;
  overflow: visible;
}
.scorta::before {
  /* la colonna di luce lungo il bordo: oro che respira */
  content: '';
  position: absolute;
  left: -3px; top: 0; bottom: 0;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #F3D9A0, var(--oro-chiaro) 35%, var(--oro) 70%, #8C6A3A);
  box-shadow: 0 0 10px rgba(217, 176, 113, 0.55), 0 0 22px rgba(217, 176, 113, 0.25);
  animation: scortaBrace 3.2s ease-in-out infinite;
}
.scorta::after {
  /* la fiammella in cima, forma a goccia che guizza */
  content: '';
  position: absolute;
  left: -9px; top: -11px;
  width: 15px; height: 20px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(60% 55% at 50% 72%, #FFF4D6 0%, #F3D083 32%, var(--oro) 62%, rgba(167, 126, 68, 0) 100%);
  filter: drop-shadow(0 0 6px rgba(243, 208, 131, 0.7));
  transform-origin: 50% 100%;
  animation: scortaFiamma 1.9s ease-in-out infinite, scortaGuizzo 0.7s ease-in-out infinite;
}
@keyframes scortaBrace {
  0%, 100% { opacity: 0.85; box-shadow: 0 0 8px rgba(217, 176, 113, 0.45), 0 0 18px rgba(217, 176, 113, 0.2); }
  50%      { opacity: 1;    box-shadow: 0 0 14px rgba(243, 208, 131, 0.75), 0 0 28px rgba(217, 176, 113, 0.35); }
}
@keyframes scortaFiamma {
  0%, 100% { transform: scaleY(1) scaleX(1) rotate(0deg); }
  30%      { transform: scaleY(1.14) scaleX(0.92) rotate(-3deg); }
  65%      { transform: scaleY(0.94) scaleX(1.06) rotate(3deg); }
}
@keyframes scortaGuizzo {
  0%, 100% { opacity: 0.95; }
  50%      { opacity: 0.8; }
}
@media (prefers-reduced-motion: reduce) {
  .scorta::before, .scorta::after { animation: none; }
}

/* la fiammella davanti alle rate */
.rate__fuoco {
  position: relative;
  display: inline-block;
  width: 12px; height: 16px;
  margin-right: 2px;
  vertical-align: -2px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(60% 55% at 50% 72%, #FFF4D6 0%, #F3D083 32%, var(--oro) 62%, rgba(167, 126, 68, 0) 100%);
  filter: drop-shadow(0 0 5px rgba(243, 208, 131, 0.7));
  transform-origin: 50% 100%;
  animation: scortaFiamma 1.9s ease-in-out infinite, scortaGuizzo 0.7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .rate__fuoco { animation: none; } }

/* le "x" di chiusura: si colorano, non girano */
.cerca__chiudi:hover, .cassetto__chiudi:hover, .finestra__chiudi:hover, .cerca-catalogo__pulisci:hover {
  transform: none;
  color: var(--oro);
}

/* cassetto: contatore ordinato, tasto Togli allineato */
.contatore--cassetto {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-top: 8px;
  border: 1px solid var(--bordo);
  border-radius: 99px;
  overflow: hidden;
}
.contatore--cassetto button {
  width: 30px; height: 28px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 16px; line-height: 1;
  cursor: pointer;
}
.contatore--cassetto button:hover { color: var(--oro); background: rgba(217, 176, 113, 0.08); }
.contatore--cassetto > span { min-width: 28px; text-align: center; font-weight: 600; font-size: 14px; }
.riga-cassetto__destra { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.riga-cassetto .togli { font-size: 13px; color: var(--fumo); text-decoration: underline; text-underline-offset: 3px; }
.riga-cassetto .togli:hover { color: var(--oro); }

/* banner: niente riga chiara in fondo */
html body .testata-pagina::after,
html body .testata-pagina--foto::after { display: none; content: none; }
html body .testata-pagina, html body .testata-pagina--foto { border-bottom: 0; box-shadow: none; }
html body .testata-pagina--foto .testata-pagina__sfondo {
  inset: 0 0 -2px 0;
  background-image:
    linear-gradient(180deg, rgba(10, 32, 39, 0.88) 0%, rgba(7, 27, 32, 0.92) 70%, #071B20 100%),
    url(/img/fiori-berna.png) !important;
}

/* carrello: la nota sul pagamento centrata sotto "Invia l ordine" */
#nota-pagamento { text-align: center; margin-top: 14px; max-width: 46ch; margin-left: auto; margin-right: auto; line-height: 1.6; }
#invia { display: block; width: 100%; }

/* piede: logo piu grande */
html body .piede__marchio img { height: 56px; margin-bottom: 12px; }
@media (max-width: 760px) { html body .piede__marchio img { height: 46px; } }

/* carrello: niente riga piatta sopra il modulo, c e il divisore */
.carrello-impianto .riga-carrello:last-child { border-bottom: 0; }
#modulo-ordine { border-top: 0; padding-top: 0; }

/* pannello: stati in maiuscolo */
.pastiglia { text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; }

/* ---------- ultimi ritocchi ---------- */

/* tasti piccoli: testo centrato in verticale */
.bottone--piccolo { display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding: 10px 18px; }

/* riquadri: la riga rassicurante accanto ai pulsanti, allineata al centro */
.richiamo__azioni { align-items: center; flex-wrap: wrap; }
.richiamo__nota { flex-basis: auto; width: auto; margin: 0 0 0 16px; max-width: 30ch; font-size: 13px; align-self: center; }
.richiamo__nota b { display: none; }
@media (max-width: 760px) { .richiamo__nota { margin: 8px 0 0; max-width: none; } }

/* il pulsante con il numero: oro, senza fondo */
.richiamo .bottone--chiaro, .richiamo .bottone--contorno {
  background: transparent;
  color: var(--oro-chiaro);
  border: 1px solid rgba(217, 176, 113, 0.55);
  font-variant-numeric: tabular-nums;
}
.richiamo .bottone--chiaro:hover, .richiamo .bottone--contorno:hover { border-color: var(--oro-chiaro); color: var(--oro-chiaro); background: rgba(217, 176, 113, 0.08); }

/* divisore prima del piede: 34px sotto l ultima sezione, sempre */
html body main > .sezione:last-child,
html body main > .sezione:last-of-type { padding-bottom: 34px !important; }
html body .divisore--piede .contenitore { padding-top: 0 !important; padding-bottom: 34px !important; }
@media (max-width: 760px) {
  html body main > .sezione:last-child, html body main > .sezione:last-of-type { padding-bottom: 24px !important; }
  html body .divisore--piede .contenitore { padding-bottom: 24px !important; }
}

/* editor: la "x" per cancellare, dentro l angolo del blocco, con etichetta */
.blocco-modificabile { outline-offset: 4px; }
.testi-cestino {
  top: 8px; right: 8px;
  width: auto; height: 26px;
  padding: 0 10px 0 8px;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(13, 37, 48, 0.92);
  border: 1px solid rgba(217, 176, 113, 0.6);
  color: var(--oro-chiaro);
  opacity: 0;
  backdrop-filter: blur(2px);
}
.testi-cestino::after { content: ' Cancella'; }
.blocco-modificabile:hover > .testi-cestino { opacity: 1; }
.testi-cestino:hover { transform: none; background: #8B2F2F; border-color: #8B2F2F; color: #fff; }

/* la riga rassicurante resta accanto al pulsante, sulla stessa riga, centrata in altezza */
.richiamo__azioni { flex-wrap: nowrap; align-items: center; }
.richiamo__nota { flex: 0 1 26ch; margin: 0 0 0 16px; align-self: center; line-height: 1.45; }
@media (max-width: 760px) {
  .richiamo__azioni { flex-wrap: wrap; }
  .richiamo__nota { flex-basis: 100%; margin: 8px 0 0; }
}

/* i raggi del lumino: non girano, si irradiano da dentro verso fuori, a ondate */
.lumino__raggi,
.lumino[data-rivela].visto .lumino__raggi {
  animation: raggiIrradiano 5.5s ease-out infinite;
  transform-origin: 50% 50%;
}
@keyframes raggiIrradiano {
  0%   { transform: translateX(-50%) scale(0.55); opacity: 0; }
  12%  { opacity: 0.9; }
  70%  { opacity: 0.35; }
  100% { transform: translateX(-50%) scale(1.25); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .lumino__raggi { animation: none; } }

/* foto degli articoli: intere, non zoomate ne stirate */
html body .carta-prodotto__figura img,
html body .riga-carrello__figura img,
html body .mini-figura img { object-fit: contain; object-position: center; padding: 0; background: #fff; }
html body .scheda-prodotto__figura { aspect-ratio: 4 / 3; }
html body .scheda-prodotto__figura img { object-fit: contain; padding: 0; background: #fff; }

/* cofani: prezzo "nel pacchetto" */
.prezzo--nota { font-size: 15px !important; color: var(--fumo) !important; font-family: var(--testo); letter-spacing: 0.02em; }
.scorta--pacchetto { margin-bottom: 22px; }
.scorta--pacchetto a { color: var(--oro); text-decoration: underline; text-underline-offset: 3px; }

/* parco auto: la scheda senza foto (EQS) */
.mezzo__figura--vuota {
  background: linear-gradient(168deg, var(--figura-a) 0%, var(--figura-b) 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 26px; color: var(--oro-chiaro);
}
.mezzo--elettrica .mezzo__tipo { color: #7FD4C4; }

/* testata di sezione: niente vuoto se resta solo l occhiello */
.testata-sezione { margin-bottom: 26px; }
.testata-sezione > :last-child { margin-bottom: 0; }
.testata-sezione .occhiello:last-child { margin-bottom: 0; }

/* pulsanti a contorno: in oro, come quelli dei riquadri */
html body .bottone--contorno {
  background: transparent;
  color: var(--oro-chiaro);
  border: 1px solid rgba(217, 176, 113, 0.55);
}
html body .bottone--contorno:hover {
  color: var(--oro-chiaro);
  border-color: var(--oro-chiaro);
  background: rgba(217, 176, 113, 0.08);
}

/* banner: meno vuoto sopra le briciole, piu respiro sotto il testo */
html body .testata-pagina { padding-block: 26px 40px; }
@media (max-width: 760px) {
  html body .testata-pagina { padding-block: 20px 30px; }
}

/* banner: stesso spazio sopra e sotto */
html body .testata-pagina { padding-block: 34px 34px; }
@media (max-width: 760px) {
  html body .testata-pagina { padding-block: 24px 24px; }
}

/* nei riquadri: i due pulsanti hanno la stessa altezza e lo stesso testo */
.richiamo__azioni .bottone {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px;
  padding: 0 22px;
  font-size: 15px;
  line-height: 1;
  box-sizing: border-box;
}

/* riquadri: i due pulsanti identici in altezza, corpo e peso */
html body .richiamo__azioni .bottone,
html body .richiamo__azioni .bottone--oro,
html body .richiamo__azioni .bottone--chiaro,
html body .richiamo__azioni .bottone--contorno {
  height: 52px; min-height: 52px;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 600;
  line-height: 52px;
  border-width: 1px;
  box-sizing: border-box;
  transform: none;
}

/* banner: 34px sopra le briciole e 34px sotto il testo, senza altri margini in mezzo */
html body .testata-pagina, html body .testata-pagina--foto { padding: 34px 0 34px !important; min-height: 0 !important; display: block !important; }
html body .testata-pagina .contenitore { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0; margin-bottom: 0; }
html body .testata-pagina .briciole { margin-top: 0 !important; padding-top: 0 !important; }
html body .testata-pagina h1 { margin-top: 0 !important; }
html body .testata-pagina p:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; }
@media (max-width: 760px) {
  html body .testata-pagina, html body .testata-pagina--foto { padding: 24px 0 24px !important; }
}

/* ogni riga di separazione grigia diventa oro sfumato */
html body hr,
html body .prosa hr,
html body .separatore,
html body .tabella-specifiche th, html body .tabella-specifiche td,
html body .orari-riga,
html body .riepilogo__riga,
html body .riga-carrello,
html body .tavola th, html body .tavola td,
html body .cassetto__totale,
html body .calendario__piede {
  border-color: rgba(217, 176, 113, 0.28) !important;
}
html body hr, html body .prosa hr {
  border: 0; height: 1px; margin: 34px 0;
  background: linear-gradient(90deg, transparent, rgba(217, 176, 113, 0.6) 30%, rgba(217, 176, 113, 0.6) 70%, transparent);
}

/* "Negozio online" nella tendina: testo centrato in altezza nella sua fascia */
html body .tendina__piede { align-items: center; padding: 12px 28px; line-height: 1.2; }
html body .tendina__piede b { line-height: 1; }
html body .tendina__piede span { line-height: 1.2; }

/* in modifica: il riquadro tratteggiato delle voci di elenco abbraccia anche il rombo, cosi non sembra doppio */
.prosa ul li.testo-modificabile { outline-offset: 2px; }
.prosa ul li.testo-modificabile::before { display: none; }
.prosa ul li.testo-modificabile { list-style: none; }

/* "La più richiesta": centrata, con l accento, con la fiammella */
html body .carta-tariffa--scelta::before {
  content: 'Il più richiesto';
  left: 50%;
  transform: translateX(-50%);
  top: -13px;
  padding: 6px 16px 6px 30px;
  white-space: nowrap;
  border-radius: 99px;
  background: linear-gradient(90deg, #B98B4C, var(--oro-chiaro) 55%, #B98B4C);
  color: #1F1509;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.6);
}
html body .carta-tariffa--scelta::after {
  /* la fiammella a sinistra della scritta */
  content: '';
  position: absolute;
  top: -12px;
  left: calc(50% - var(--largo-etichetta, 66px));
  width: 11px; height: 15px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(60% 55% at 50% 72%, #FFF4D6 0%, #F3D083 32%, var(--oro) 62%, rgba(167, 126, 68, 0) 100%);
  filter: drop-shadow(0 0 5px rgba(243, 208, 131, 0.8));
  transform-origin: 50% 100%;
  animation: scortaFiamma 1.9s ease-in-out infinite, scortaGuizzo 0.7s ease-in-out infinite;
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) { html body .carta-tariffa--scelta::after { animation: none; } }

/* finestra delle foto dei mezzi */
.finestra--viste { z-index: 400; }
.finestra--viste .finestra__carta { max-width: 920px; width: 100%; padding: 22px 24px 26px; }
.viste__grande { aspect-ratio: 16 / 10; background: #fff; border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; margin-top: 8px; }
.viste__grande img { width: 100%; height: 100%; object-fit: contain; display: block; }
.viste__mini { display: flex; gap: 10px; margin-top: 12px; }
.viste__mini-tasto { width: 96px; height: 62px; padding: 0; border: 1px solid var(--bordo); border-radius: var(--raggio); background: #fff; overflow: hidden; cursor: pointer; }
.viste__mini-tasto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.viste__mini-tasto.scelta, .viste__mini-tasto:hover { border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro); }
.viste__testo { margin-top: 14px; font-size: 14.5px; color: var(--fumo); line-height: 1.6; }

/* pacchetti in modifica: le voci vuote non mostrano il rombo */
.elenco-segni li.testo-modificabile:empty::before,
.elenco-segni li.testo-modificabile:has(> br:only-child)::before { display: none; }

/* "La più richiesta": la fiamma nasce dal bordo alto della pastiglia */
html body .carta-tariffa--scelta::before {
  content: 'Il più richiesto';
  white-space: pre;
  padding: 6px 18px;
  letter-spacing: 0.12em;
  overflow: visible;
}
html body .carta-tariffa--scelta::after {
  left: 50%;
  top: -26px;
  width: 16px; height: 22px;
  margin-left: -8px;
  border-radius: 50% 50% 50% 50% / 64% 64% 36% 36%;
  background: radial-gradient(60% 55% at 50% 74%, #FFF7DF 0%, #F3D083 30%, var(--oro) 60%, rgba(167, 126, 68, 0) 100%);
  filter: drop-shadow(0 0 7px rgba(243, 208, 131, 0.85));
  animation: fiammaPastiglia 1.7s ease-in-out infinite, scortaGuizzo 0.6s ease-in-out infinite;
}
@keyframes fiammaPastiglia {
  0%, 100% { transform: translateY(0) scaleY(1) scaleX(1) rotate(0deg); }
  35%      { transform: translateY(-2px) scaleY(1.18) scaleX(0.9) rotate(-4deg); }
  70%      { transform: translateY(-1px) scaleY(0.95) scaleX(1.08) rotate(4deg); }
}

/* piede: colonne piu piccole */
html body .piede__colonna h4 { font-size: 10px; letter-spacing: 0.16em; margin-bottom: 6px; }
html body .piede__colonna a { font-size: 12.5px; padding: 3px 0; }
html body .piede__numero { font-size: 17px !important; }
html body .piede__marchio p { font-size: 12px; }
html body .piede__marchio img { height: 48px; }

/* divisore prima del piede: 34px anche quando l ultimo blocco non e una sezione */
html body main > *:last-child { padding-bottom: 34px !important; }
html body main.sezione { padding-bottom: 34px !important; }
@media (max-width: 760px) {
  html body main > *:last-child, html body main.sezione { padding-bottom: 24px !important; }
}

/* avviso "Disponibile": il fuoco corre lungo tutto il bordo sinistro */
html body .scorta::before {
  width: 4px;
  background: linear-gradient(180deg, #FFF4D6 0%, #F3D083 18%, var(--oro-chiaro) 45%, var(--oro) 75%, #B98B4C 100%);
  background-size: 100% 200%;
  box-shadow: 0 0 10px rgba(243, 208, 131, 0.7), 0 0 26px rgba(217, 176, 113, 0.35);
  animation: scortaLingua 2.4s ease-in-out infinite;
}
html body .scorta::after {
  /* la lingua di fuoco: piu alta, appoggiata sul bordo, ondeggia lungo tutta l altezza */
  left: -10px; top: -8px; bottom: -4px;
  width: 16px; height: auto;
  border-radius: 50% 50% 30% 30% / 80% 80% 20% 20%;
  background: linear-gradient(180deg, rgba(255, 244, 214, 0.95) 0%, rgba(243, 208, 131, 0.85) 25%, rgba(217, 176, 113, 0.55) 60%, rgba(167, 126, 68, 0) 100%);
  filter: blur(1.5px) drop-shadow(0 0 6px rgba(243, 208, 131, 0.7));
  transform-origin: 50% 100%;
  animation: scortaFiamma 1.9s ease-in-out infinite, scortaGuizzo 0.7s ease-in-out infinite;
}
@keyframes scortaLingua {
  0%, 100% { background-position: 0 0; opacity: 0.9; }
  50%      { background-position: 0 100%; opacity: 1; }
}

/* scelta del colore: etichetta e nome allineati con lo spazio giusto */
.scelta-colore__titolo { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.scelta-colore__scelto { margin-left: 0; }

/* scheda prodotto: la pagina finisce a 34px dal divisore, e il divisore sta a 34px dal piede */
html body main > *:last-child { padding-bottom: 34px !important; }
html body .scheda-prodotto { margin-bottom: 0; }
html body .scheda-prodotto > div > p:last-child { margin-bottom: 0; }
html body .divisore--piede .contenitore { padding-top: 0 !important; padding-bottom: 34px !important; margin: 0 !important; }
html body .divisore--piede { margin: 0 !important; padding: 0 !important; }

/* numero in testata: le due righe centrate, con un piccolo stacco fra numero e "reperibili" */
html body .numero-testata > span { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.1; }
html body .numero-testata b { display: block; line-height: 1; }
html body .numero-testata i { display: block; margin-top: 4px; line-height: 1; }

/* la cornetta in testata squilla ogni tanto (e piu forte al passaggio) */
html body .numero-testata svg { transform-origin: 50% 60%; animation: cornettaSquilla 4.5s ease-in-out infinite; }
html body .numero-testata:hover svg { animation: cornettaSquilla 0.9s ease-in-out infinite; }
@keyframes cornettaSquilla {
  0%, 60%, 100% { transform: rotate(0); }
  64% { transform: rotate(-14deg); }
  68% { transform: rotate(12deg); }
  72% { transform: rotate(-10deg); }
  76% { transform: rotate(8deg); }
  80% { transform: rotate(-5deg); }
  84% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) { html body .numero-testata svg { animation: none; } }

/* freccetta delle voci: si capovolge sul posto, senza spostarsi */
html body .voce__punta {
  transform-origin: 50% 50%;
  transform: rotate(45deg);
  margin-top: -3px;
  transition: transform 0.28s ease, color 0.25s ease, opacity 0.25s ease;
}
html body .voce:hover .voce__punta,
html body .voce.aperta .voce__punta { transform: rotate(-135deg); margin-top: -3px; }

/* avviso "Disponibile": molto meno fuoco, solo una brace che respira sul bordo */
html body .scorta::before {
  width: 3px;
  box-shadow: 0 0 6px rgba(243, 208, 131, 0.45), 0 0 12px rgba(217, 176, 113, 0.18);
}
html body .scorta::after {
  left: -7px; top: 0; bottom: 0;
  width: 9px;
  background: linear-gradient(180deg, rgba(255, 244, 214, 0.55) 0%, rgba(243, 208, 131, 0.35) 40%, rgba(217, 176, 113, 0.15) 75%, rgba(167, 126, 68, 0) 100%);
  filter: blur(3px);
  animation: scortaGuizzo 2.2s ease-in-out infinite;
}

/* "La più richiesta": il fuoco avvolge la pastiglia tutt intorno, niente fiammella in cima */
html body .carta-tariffa--scelta::before {
  box-shadow:
    0 0 0 1px rgba(255, 236, 200, 0.5),
    0 0 10px rgba(243, 208, 131, 0.75),
    0 0 24px rgba(217, 176, 113, 0.45),
    0 0 44px rgba(217, 176, 113, 0.22);
  animation: pastigliaArde 2.6s ease-in-out infinite;
}
html body .carta-tariffa--scelta::after { display: none; }
@keyframes pastigliaArde {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 236, 200, 0.5), 0 0 8px rgba(243, 208, 131, 0.6), 0 0 20px rgba(217, 176, 113, 0.35), 0 0 36px rgba(217, 176, 113, 0.15); }
  50%      { box-shadow: 0 0 0 1px rgba(255, 244, 214, 0.8), 0 0 14px rgba(243, 208, 131, 0.9), 0 0 30px rgba(217, 176, 113, 0.55), 0 0 56px rgba(217, 176, 113, 0.3); }
}

/* pacchetti: la descrizione sotto il nome, leggibile */
.carta-tariffa > .brindello { font-size: 14px; line-height: 1.6; color: #9FB2AC; margin: 6px 0 14px; max-width: 40ch; }

/* cornetta: squillo piu contenuto */
@keyframes cornettaSquilla {
  0%, 60%, 100% { transform: rotate(0); }
  64% { transform: rotate(-6deg); }
  68% { transform: rotate(5deg); }
  72% { transform: rotate(-4deg); }
  76% { transform: rotate(3deg); }
  80% { transform: rotate(-2deg); }
  84% { transform: rotate(0); }
}

/* "La più richiesta": bagliore piu discreto */
@keyframes pastigliaArde {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 236, 200, 0.35), 0 0 5px rgba(243, 208, 131, 0.4), 0 0 12px rgba(217, 176, 113, 0.18); }
  50%      { box-shadow: 0 0 0 1px rgba(255, 244, 214, 0.55), 0 0 8px rgba(243, 208, 131, 0.55), 0 0 18px rgba(217, 176, 113, 0.28); }
}
html body .carta-tariffa--scelta::before { animation-duration: 3.2s; }

/* freccetta: centrata rispetto al testo, sia chiusa che aperta */
html body .voce__testa { display: inline-flex; align-items: center; }
html body .voce__punta {
  margin-top: 0;
  position: relative;
  top: -2px;                       /* chiusa (punta in giu): il rombo ruotato pende in basso, si compensa */
  transform: rotate(45deg);
}
html body .voce:hover .voce__punta,
html body .voce.aperta .voce__punta {
  top: 2px;                        /* aperta (punta in su): pende in alto, si compensa al contrario */
  transform: rotate(-135deg);
  margin-top: 0;
}

/* banner: meno aria sopra le briciole */
html body .testata-pagina, html body .testata-pagina--foto { padding-top: 20px !important; }
html body .testata-pagina .briciole { line-height: 1.2; }
@media (max-width: 760px) {
  html body .testata-pagina, html body .testata-pagina--foto { padding-top: 14px !important; }
}

/* le x di chiusura (cassetto, ricerca, finestre, cancella): tutte uguali, la nostra */
.cassetto__chiudi, .cerca__chiudi, .finestra__chiudi, .cerca-catalogo__pulisci, .viste .finestra__chiudi {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(217, 176, 113, 0.45);
  border-radius: 50%;
  background: transparent;
  color: var(--oro-chiaro);
  font-size: 20px; line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.cassetto__chiudi:hover, .cerca__chiudi:hover, .finestra__chiudi:hover, .cerca-catalogo__pulisci:hover {
  border-color: var(--oro-chiaro); background: rgba(217, 176, 113, 0.1); color: var(--oro-chiaro); transform: none;
}

/* finestra foto dei mezzi: miniature e descrizione centrate */
.viste__mini { justify-content: center; }
.viste__testo { text-align: center; max-width: 60ch; margin-left: auto; margin-right: auto; }

/* finestra foto: titolo allineato al bordo, stessa aria sopra e sotto */
.finestra--viste .finestra__testata { padding: 0; margin: 0 0 14px; border-bottom: 0; }
.finestra--viste .finestra__testata h2 { margin: 0; font-size: 24px; line-height: 1.2; }
.finestra--viste .finestra__carta { padding: 18px 22px 22px; }
.viste__grande { margin-top: 0; }

/* riquadri: i due pulsanti hanno esattamente la stessa scatola */
html body .richiamo__azioni .bottone,
html body .richiamo__azioni a.bottone,
html body .richiamo__azioni .bottone--oro,
html body .richiamo__azioni .bottone--chiaro,
html body .richiamo__azioni .bottone--contorno {
  height: 50px !important; min-height: 0 !important; max-height: 50px !important;
  padding: 0 22px !important;
  line-height: 48px !important;
  font-size: 15px !important;
  border-width: 1px !important; border-style: solid !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  transform: none !important;
  vertical-align: middle;
}
html body .richiamo__azioni .bottone--oro { border-color: rgba(217, 176, 113, 0.9) !important; }

/* divisore prima del piede: torna centrato (un margine azzerato lo spingeva a sinistra) */
html body .divisore--piede .contenitore { margin: 0 auto !important; }

/* divisori: piu aria, 48px sopra e 48px sotto (34 su telefono) */
html body .divisore,
html body main .contenitore > .divisore,
html body .piede .divisore { margin-block: 48px; }
html body .divisore--piede .contenitore { padding-bottom: 48px !important; }
html body main > *:last-child, html body main.sezione,
html body main > .sezione:last-child, html body main > .sezione:last-of-type { padding-bottom: 48px !important; }
html body .divisore--piede + .piede .piede__corpo { padding-top: 48px; }
@media (max-width: 760px) {
  html body .divisore, html body main .contenitore > .divisore, html body .piede .divisore { margin-block: 34px; }
  html body .divisore--piede .contenitore { padding-bottom: 34px !important; }
  html body main > *:last-child, html body main.sezione,
  html body main > .sezione:last-child, html body main > .sezione:last-of-type { padding-bottom: 34px !important; }
  html body .divisore--piede + .piede .piede__corpo { padding-top: 34px; }
}

/* divisori: ancora piu aria, 64px (44 su telefono) */
html body .divisore, html body main .contenitore > .divisore, html body .piede .divisore { margin-block: 64px; }
html body .divisore--piede .contenitore { padding-bottom: 64px !important; }
html body main > *:last-child, html body main.sezione,
html body main > .sezione:last-child, html body main > .sezione:last-of-type { padding-bottom: 64px !important; }
html body .divisore--piede + .piede .piede__corpo { padding-top: 64px; }
@media (max-width: 760px) {
  html body .divisore, html body main .contenitore > .divisore, html body .piede .divisore { margin-block: 44px; }
  html body .divisore--piede .contenitore { padding-bottom: 44px !important; }
  html body main > *:last-child, html body main.sezione,
  html body main > .sezione:last-child, html body main > .sezione:last-of-type { padding-bottom: 44px !important; }
  html body .divisore--piede + .piede .piede__corpo { padding-top: 44px; }
}

/* attorno a ogni divisore conta solo il suo margine (64px): chi sta prima e dopo non aggiunge il proprio */
html body *:has(+ .contenitore > .divisore) { padding-bottom: 0 !important; margin-bottom: 0 !important; }
html body .eroe--foto:has(+ .contenitore > .divisore) .eroe__griglia { padding-bottom: 0 !important; }
html body .contenitore:has(> .divisore) + * { padding-top: 0 !important; margin-top: 0 !important; }
html body .contenitore:has(> .divisore) + main > *:first-child { padding-top: 0 !important; }
html body .contenitore:has(> .divisore) + .eroe--foto .eroe__griglia { padding-top: 0 !important; }

/* righe verticali (fra le colonne dei numeri, delle tendine, delle griglie): oro */
html body .cifre { background: rgba(217, 176, 113, 0.35); }
html body .tendina__colonna + .tendina__colonna { border-left-color: rgba(217, 176, 113, 0.35); }
html body .piede__colonna + .piede__colonna,
html body .griglia-due > div + div,
html body .riga-cassetto,
html body .cassetto__testa,
html body .cassetto__piede { border-color: rgba(217, 176, 113, 0.28); }


/* pannello: righe del parco auto */
.mezzo-riga { display: grid; grid-template-columns: 120px 1fr auto; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid rgba(217, 176, 113, 0.28); }
.mezzo-riga__foto { width: 120px; height: 76px; border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--fumo); background: #fff; }
.mezzo-riga__foto img { width: 100%; height: 100%; object-fit: cover; }
.mezzo-riga__campi { display: grid; gap: 8px; }
.mezzo-riga__campi input, .mezzo-riga__campi textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--bordo); border-radius: var(--raggio); font: inherit; font-size: 14px; background: transparent; color: inherit; }
.mezzo-riga__azioni { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 760px) { .mezzo-riga { grid-template-columns: 1fr; } .mezzo-riga__azioni { flex-direction: row; flex-wrap: wrap; } }

/* piede: la colonna "Il sito" centrata in altezza rispetto a "Contatti" */
html body .piede__colonna { justify-content: center; align-self: center; }

/* la linea dei passi con i rombi: nel verde-acqua del logo invece dell oro */
html body .passi::before {
  background: linear-gradient(90deg, transparent, rgba(127, 212, 196, 0.7) 10%, rgba(127, 212, 196, 0.7) 90%, transparent) !important;
}
html body .passo__segno {
  border-color: #7FD4C4 !important;
  background: var(--scuro, #0B1F26) !important;
  box-shadow: 0 0 0 4px rgba(127, 212, 196, 0.12) !important;
  color: #7FD4C4 !important;
}
html body .passo__segno::before, html body .passo__segno::after { background: #7FD4C4 !important; border-color: #7FD4C4 !important; }

/* mentre scrivi: una voce di elenco svuotata non mostra piu il rombo */
.testo-modificabile:empty::before,
.testo-modificabile:has(> br:only-child)::before,
li.testo-modificabile:empty::marker { display: none; content: none; }

/* scritta svuotata in modifica: niente rombo, niente punto elenco */
html body .testo-vuoto::before, html body .testo-vuoto::after { display: none !important; content: none !important; }
html body li.testo-vuoto { list-style: none !important; }
html body li.testo-vuoto::marker { content: '' !important; }

/* voce di elenco vuota (in modifica o gia salvata cosi): niente rombo, in ogni caso */
html body li.testo-modificabile:empty::before,
html body li.testo-modificabile:has(> br:only-child)::before,
html body li.testo-modificabile:not(:has(*)):empty::before,
html body .prosa ul li:empty::before,
html body .prosa ul li:has(> br:only-child)::before,
html body .elenco-segni li:empty::before,
html body .elenco-segni li:has(> br:only-child)::before { display: none !important; content: none !important; }
html body .prosa ul li:empty, html body .prosa ul li:has(> br:only-child),
html body .elenco-segni li:empty, html body .elenco-segni li:has(> br:only-child) { list-style: none !important; }

/* in modifica le tendine restano aperte e cliccabili */
body.in-modifica .voce.aperta .tendina, body.in-modifica .voce:hover .tendina { opacity: 1; visibility: visible; pointer-events: auto; }
body.in-modifica .tendina__colonna a b.testo-modificabile { display: block; }

/* elemento vuoto: sparisce del tutto dal flusso (niente rombo, niente riga) */
html body .testo-vuoto:not(.testo-modificabile) { display: none !important; }
html body .testo-vuoto.testo-modificabile { min-height: 1.4em; }
html body .testo-vuoto.testo-modificabile::before, html body .testo-vuoto.testo-modificabile::marker { display: none !important; content: none !important; }

/* home, blocco tariffe: la foto sta intera nel riquadro, senza tagli strani */
.foto--tariffe img { position: static; opacity: 1; animation: none; object-fit: cover; object-position: center; }
.griglia-due--tariffe .foto--tariffe { min-height: 0; }

/* editor: tabelle, togliere o aggiungere una riga */
.in-modifica .tavola tbody td:last-child { position: relative; padding-right: 44px; }
.testi-cestino-riga {
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  width: 24px; height: 24px; padding: 0;
  border: 1px solid rgba(217, 176, 113, 0.6); border-radius: 50%;
  background: rgba(13, 37, 48, 0.92); color: var(--oro-chiaro);
  font-size: 11px; line-height: 1; cursor: pointer; z-index: 95; opacity: 0.45;
  transition: opacity 0.2s var(--curva), background 0.2s var(--curva);
}
.tavola tbody tr:hover .testi-cestino-riga { opacity: 1; }
.testi-cestino-riga:hover { background: #8B2F2F; border-color: #8B2F2F; color: #fff; }
.testi-aggiungi-riga {
  display: block; width: 100%; padding: 10px 18px;
  border: 0; border-top: 1px dashed rgba(217, 176, 113, 0.5);
  background: transparent; color: var(--oro-chiaro);
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer;
}
.testi-aggiungi-riga:hover { background: rgba(217, 176, 113, 0.08); }

/* listino: la riga delle rate sotto i tre pacchetti */
.tariffe-rate { margin: 22px 0 0; text-align: center; font-size: 14.5px; color: var(--su-scuro-fumo, #A9BAB5); }
.tariffe-rate b { color: var(--oro-chiaro); font-weight: 600; }
.tariffe-rate a { color: var(--oro-chiaro); text-decoration: underline; text-underline-offset: 3px; }

/* richiamo in fondo alle pagine: il numero nello stesso riquadro della testata, visibile anche su telefono */
html body .richiamo__azioni .numero-testata--richiamo { display: inline-flex; align-items: center; padding: 10px 16px; }
html body .richiamo__azioni .numero-testata--richiamo .numero-testata__testo { display: flex; }
html body .richiamo__azioni .numero-testata--richiamo .numero-testata__testo i { display: block; }
html body .richiamo__azioni .numero-testata--richiamo .numero-testata__testo b { font-size: 19px; }

/* testata: niente riga chiara sotto quando si scorre */
html body .intestazione, html body .intestazione.rimpicciolita { border-bottom: 0; box-shadow: none; }
/* testata piena: sotto non traspare niente mentre si scorre */
html body .intestazione { background: #071820; }

/* tutte le x del sito come quella del carrello, hover pulito: solo bordo e colore, niente sfondo ne rotazione */
html body .cassetto__chiudi, html body .cerca__chiudi, html body .finestra__chiudi, html body .cerca-catalogo__pulisci,
html body .viste .finestra__chiudi, html body .chat__chiudi, html body .chiudi-finestra, html body .testi-cestino-riga {
  width: 34px; height: 34px; padding: 0; margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(217, 176, 113, 0.45);
  border-radius: 50%;
  background: transparent;
  color: var(--oro-chiaro);
  font-size: 20px; line-height: 1; font-weight: 400;
  cursor: pointer; opacity: 1;
  transition: border-color 0.18s ease, color 0.18s ease;
  transform: none;
}
html body .testi-cestino-riga { width: 26px; height: 26px; font-size: 12px; margin: 0; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); opacity: 0.55; }
html body .cassetto__chiudi:hover, html body .cerca__chiudi:hover, html body .finestra__chiudi:hover, html body .cerca-catalogo__pulisci:hover,
html body .viste .finestra__chiudi:hover, html body .chat__chiudi:hover, html body .chiudi-finestra:hover {
  border-color: var(--oro-chiaro); color: #fff; background: transparent; transform: none; box-shadow: none;
}
html body .testi-cestino-riga:hover { opacity: 1; border-color: #8B2F2F; color: #fff; background: #8B2F2F; transform: translateY(-50%); }
html body .cassetto__chiudi:focus-visible, html body .cerca__chiudi:focus-visible, html body .finestra__chiudi:focus-visible,
html body .chat__chiudi:focus-visible, html body .chiudi-finestra:focus-visible { outline: 2px solid var(--oro-chiaro); outline-offset: 2px; }

/* editor: x per togliere una colonna intera, sull intestazione */
.in-modifica .tavola thead th { position: relative; padding-right: 40px; }
html body .testi-cestino-colonna {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 22px; height: 22px; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(217, 176, 113, 0.45); border-radius: 50%;
  background: transparent; color: var(--oro-chiaro);
  font-size: 11px; line-height: 1; cursor: pointer; opacity: 0.55;
  transition: opacity 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.in-modifica .tavola thead th:hover .testi-cestino-colonna { opacity: 1; }
html body .testi-cestino-colonna:hover { opacity: 1; border-color: #8B2F2F; background: #8B2F2F; color: #fff; transform: translateY(-50%); }

/* parco auto: tre per fila, foto grandi che riempiono il riquadro */
html body .griglia-mezzi--foto { grid-template-columns: repeat(3, 1fr); gap: 24px; }
html body .mezzo--foto .mezzo__figura { height: 260px; overflow: hidden; background: #fff; }
html body .mezzo--foto .mezzo__figura img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
@media (max-width: 1000px) { html body .griglia-mezzi--foto { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { html body .griglia-mezzi--foto { grid-template-columns: 1fr; } html body .mezzo--foto .mezzo__figura { height: 220px; } }
.sede-mappa { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(217, 176, 113, 0.5); }
.sede-mappa:hover { color: var(--oro-chiaro); border-bottom-color: var(--oro-chiaro); }

/* home: i servizi a foto, come una vetrina */
.servizi-foto { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.servizio-foto {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--raggio-g, 14px); border: 1px solid rgba(217, 176, 113, 0.28);
  background: #0D2C36; text-decoration: none; isolation: isolate;
}
.servizio-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--curva); }
.servizio-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 24, 32, 0.25), rgba(7, 24, 32, 0.72)); transition: background 0.3s ease; }
.servizio-foto span {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px;
  font-family: var(--display); font-size: 20px; letter-spacing: 0.04em; text-transform: uppercase; color: #F1F4F3;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.servizio-foto:hover img { transform: scale(1.06); }
.servizio-foto:hover { border-color: var(--oro-chiaro); }
.servizio-foto:hover::after { background: linear-gradient(180deg, rgba(7, 24, 32, 0.15), rgba(7, 24, 32, 0.6)); }
@media (max-width: 1100px) { .servizi-foto { grid-template-columns: repeat(3, 1fr); } .servizio-foto span { font-size: 18px; } }
@media (max-width: 640px) { .servizi-foto { grid-template-columns: repeat(2, 1fr); gap: 12px; } .servizio-foto span { font-size: 15px; } }
#tariffe-home .griglia-tariffe { margin-top: 28px; }

/* voci dei pacchetti: icona e finestra di spiegazione */
.carta-tariffa .elenco-segni li.voce-spiegata { cursor: pointer; align-items: center; gap: 10px; }
.carta-tariffa .elenco-segni li.voce-spiegata::before { display: none; }
.voce-spiegata__icona { flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(217, 176, 113, 0.45); color: var(--oro-chiaro); transition: background 0.18s ease, color 0.18s ease; }
.voce-spiegata__icona svg { width: 14px; height: 14px; }
.voce-spiegata:hover .voce-spiegata__icona { background: var(--oro-chiaro); color: #1F1509; }
.voce-spiegata:hover { color: var(--oro-chiaro); }
.finestra--voce .finestra__carta { max-width: 640px; }
.finestra--voce .voce__foto { width: 100%; height: 260px; object-fit: cover; border-radius: var(--raggio); display: block; margin-bottom: 16px; background: #fff; }
.finestra--voce p { font-size: 16px; line-height: 1.65; color: var(--su-scuro, #DCE3E0); }

/* divisore prima del piede: stessa aria sopra e sotto; piede con la stessa aria sopra e sotto */
html body main:has(+ .divisore--piede) > *:last-child { padding-bottom: 0 !important; margin-bottom: 0 !important; }
html body .divisore--piede .contenitore { margin-block: 0 !important; padding-block: 56px !important; }
html body .divisore--piede + .piede .piede__corpo { padding-top: 34px !important; padding-bottom: 34px !important; }
html body .piede__coda { margin-top: 0; }
@media (max-width: 760px) {
  html body .divisore--piede .contenitore { padding-block: 38px !important; }
  html body .divisore--piede + .piede .piede__corpo { padding-top: 26px !important; padding-bottom: 26px !important; }
}
/* carrello: niente sfocatura dietro e niente ombra sul cassetto (insieme lasciavano il pannello nero) */
html body .velo-carrello { backdrop-filter: none; -webkit-backdrop-filter: none; }
html body .cassetto.aperto { box-shadow: none; }

/* negozio: le foto riempiono il riquadro */
html body .carta-prodotto__figura img { object-fit: cover; padding: 0; }
/* ricerca: i petali cadono anche qui */
html body .cerca { overflow: hidden; }
html body .cerca .contenitore { position: relative; z-index: 1; }
html body .cerca .petali { z-index: 0; }
/* i petali si vedono anche con le animazioni di sistema spente */
@media (prefers-reduced-motion: reduce) { html body .petali { display: block; } }
/* divisori dentro le pagine: chi sta prima e dopo non aggiunge la sua aria (vale anche per le sezioni con !important) */
html body section:has(+ .contenitore > .divisore), html body div:has(+ .contenitore > .divisore) { padding-bottom: 0 !important; margin-bottom: 0 !important; }
html body .contenitore:has(> .divisore) + section, html body .contenitore:has(> .divisore) + div { padding-top: 0 !important; margin-top: 0 !important; }
html body section:has(+ .contenitore > .divisore) > .contenitore > :last-child:not(.eroe__griglia) { margin-bottom: 0 !important; }
html body .eroe:has(+ .contenitore > .divisore), html body .eroe:has(+ .contenitore > .divisore) .eroe__griglia { padding-bottom: 0 !important; }
html body .eroe:has(+ .contenitore > .divisore) .eroe__griglia > * { margin-bottom: 0 !important; }
html body .eroe:has(+ .contenitore > .divisore) .eroe__griglia { margin-bottom: -18px !important; }
html body .eroe--foto .eroe__griglia { padding-bottom: 0 !important; margin-bottom: -18px !important; }

/* galleria di foto dentro le pagine (bassorilievi delle lapidi) */
.galleria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 18px 0 26px; }
.galleria__foto { margin: 0; border: 1px solid rgba(217, 176, 113, 0.28); border-radius: var(--raggio-g, 14px); overflow: hidden; background: #0D2C36; }
.galleria__foto img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; cursor: zoom-in; transition: transform 0.5s var(--curva); }
.galleria__foto:hover img { transform: scale(1.04); }
.galleria__foto figcaption { padding: 10px 14px; font-size: 14px; color: var(--su-scuro-fumo, #A9BAB5); text-align: center; }
@media (max-width: 760px) { .galleria { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
html body .finestra--voce .voce__foto { height: auto; max-height: 70vh; object-fit: contain; }
html body .finestra--voce p:empty { display: none; }
/* eroe: meno vuoto fra la testata e "Roma" */
html body .eroe--foto .eroe__griglia { padding-top: 28px !important; }
@media (max-width: 760px) { html body .eroe--foto .eroe__griglia { padding-top: 18px !important; } }
/* eroe: le tre garanzie con i titoli allineati in alto, icona a fianco del titolo */
html body .eroe__garanzie { align-items: flex-start; }
html body .garanzia { align-items: flex-start; }
html body .garanzia > svg, html body .garanzia > .icona { margin-top: 1px; }
/* finestra delle voci: centrata nello schermo, testo centrato */
html body .finestra--voce { align-items: center; }
html body .finestra--voce p { text-align: center; }
html body .finestra--voce .finestra__testata { justify-content: center; position: relative; }
html body .finestra--voce .finestra__testata .finestra__chiudi { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; }
html body .finestra--voce .finestra__testata h2 { text-align: center; }

/* ricerca: fiori dietro come nei banner, meno alta */
html body .cerca { background: linear-gradient(180deg, #0A2027 0%, #071B20 100%); }
html body .cerca::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(180deg, rgba(10, 32, 39, 0.88), rgba(7, 27, 32, 0.94)), url(/img/fiori-berna.png);
  background-size: auto, 360px auto; background-repeat: no-repeat, repeat; background-position: center, center top;
}
html body .cerca .contenitore { padding-block: 14px 12px; }
html body .cerca__suggerimenti { margin-top: 10px; }
/* negozio: foto intere, tutte della stessa misura, su bianco */
html body .carta-prodotto__figura { aspect-ratio: 4 / 3; background: #fff; }
html body .carta-prodotto__figura img { object-fit: contain; object-position: center; padding: 6px; background: #fff; }
html body .voce__cambia { text-align: center; margin: 14px 0 0; }
/* home: vetrina a 5 per fila */
html body #vetrina.griglia-prodotti { grid-template-columns: repeat(5, 1fr); gap: 18px; }
@media (max-width: 1100px) { html body #vetrina.griglia-prodotti { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { html body #vetrina.griglia-prodotti { grid-template-columns: repeat(2, 1fr); } }
/* ricerca: senza vuoto in fondo quando non ci sono risultati */
html body .cerca__esiti { padding-bottom: 0; }
html body .cerca__esiti:not(:empty) { padding-bottom: 18px; }
html body .cerca .contenitore { padding-block: 12px 12px; }
/* ricerca: si chiude sfumando, non a scatto */
html body .cerca.si-chiude { animation: cercaSu 0.22s ease forwards; pointer-events: none; }
@keyframes cercaSu { to { opacity: 0; transform: translateY(-10px); } }
/* lumino: via il velo di luce che passava di traverso (restava un alone bianco) */
html body .lumino::after { display: none; content: none; animation: none; }
/* tendina Servizi: tre colonne centrate, senza il vuoto a destra */
@media (min-width: 1001px) {
  html body .tendina:not(.tendina--stretta) .tendina__interno { grid-template-columns: repeat(3, minmax(0, 280px)); justify-content: center; max-width: 960px; }
}
/* eroe: le tre garanzie centrate, icona sopra il titolo */
html body .eroe__garanzie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
html body .garanzia { flex-direction: column; align-items: center; text-align: center; max-width: none; gap: 8px; }
html body .garanzia > svg, html body .garanzia > .icona { margin-top: 0; }
@media (max-width: 640px) { html body .eroe__garanzie { grid-template-columns: 1fr; } }
/* richiami: i due tasti affiancati alti uguali */
html body .richiamo__azioni > a { height: 52px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; padding-top: 0; padding-bottom: 0; }
/* pagine senza banner (prodotto, negozio, carrello...): meno vuoto sopra; e prima del piede stessa aria sopra e sotto il divisore */
html body .cerca + main.sezione, html body header.intestazione + main.sezione { padding-top: 26px !important; }
html body main.sezione:has(+ .divisore--piede) { padding-bottom: 0 !important; }
html body main.sezione:has(+ .divisore--piede) > .contenitore > :last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; }
/* appuntamento: solo il modulo, a tutta larghezza */
html body .blocco-appuntamento { grid-template-columns: 1fr; max-width: 860px; margin-inline: auto; }
/* eroe: lo sfondo respira, uno zoom lentissimo avanti e indietro */
html body .eroe--foto { overflow: hidden; }
html body .eroe__sfondo { animation: eroeRespira 28s ease-in-out infinite alternate; transform-origin: 60% 40%; will-change: transform; }
@keyframes eroeRespira { from { transform: scale(1); } to { transform: scale(1.08) translate(-1.2%, 0.8%); } }
/* via il divisore prima del piede: resta solo l aria */
html body .divisore--piede { display: none; }
html body main:has(+ .divisore--piede) > *:last-child, html body main.sezione:has(+ .divisore--piede) { padding-bottom: 56px !important; }
/* contatti: il riquadro a tutta larghezza, petali dentro, niente vuoto sotto */
html body .griglia-due--una { grid-template-columns: minmax(0, 1fr); }
html body .richiamo { overflow: hidden; position: relative; }
html body .richiamo > * { position: relative; z-index: 1; }
html body .richiamo .petali { z-index: 0; }
/* riga in fondo al piede: da bordo a bordo dello schermo */
html body .piede__coda { width: 100vw; margin-left: calc(50% - 50vw); padding-left: 24px; padding-right: 24px; box-sizing: border-box; display: flex; justify-content: space-between; }
/* ricerca: sopra la pagina, non la spinge giu */
html body .cerca { position: fixed; top: 78px; left: 0; right: 0; z-index: 85; overflow: hidden; }
@media (max-width: 1000px) { html body .cerca { top: 66px; } }
/* niente striscia scura a destra col carrello aperto */
html { scrollbar-gutter: auto; }
/* pagine senza banner: aria sotto una volta sola (56px), non due */
html body main.sezione:has(+ .divisore--piede) > .contenitore { padding-bottom: 0 !important; margin-bottom: 0 !important; }

/* tendine del menu: larghe quanto serve, sotto la loro voce, colonne compatte */
@media (min-width: 1001px) {
  html body .voce .tendina, html body .voce .tendina--stretta {
    left: 0; right: auto; width: max-content; max-width: min(960px, calc(100vw - 40px));
    transform: translateX(0) translateY(-10px);
  }
  html body .voce:hover .tendina, html body .voce:focus-within .tendina, html body .voce.aperta .tendina { transform: translateX(0) translateY(0); }
  html body .tendina .tendina__interno, html body .tendina--stretta .tendina__interno, html body .tendina:not(.tendina--stretta) .tendina__interno {
    display: flex; gap: 0; padding: 18px 8px 16px; max-width: none; margin: 0; justify-content: flex-start;
  }
  html body .tendina__colonna { padding: 0 22px; min-width: 200px; }
  html body .tendina__colonna + .tendina__colonna { border-left: 1px solid rgba(217, 176, 113, 0.22); }
  html body .tendina__colonna a { padding: 7px 0; }
  html body .tendina__titolo { margin-bottom: 8px; white-space: nowrap; }
  html body .tendina__titolo::after { display: none; }
  html body .tendina__piede { padding: 12px 30px; }
  /* le ultime voci non escono dallo schermo a destra */
  html body .voce:nth-last-child(-n+3) .tendina { left: auto; right: 0; }
}
@media (min-width: 1001px) { html body .navigazione .voce { position: relative; } }
/* pacchetti: titolo centrato */
html body .carta-tariffa > h3 { text-align: center; }
/* testata: la cornetta sta ferma */
html body .numero-testata svg, html body .numero-testata:hover svg { transform: none !important; animation: none !important; transition: none; }
/* tendine: piu ordinate - colonne uguali, filo oro sotto i titoli, angoli morbidi, sempre dentro lo schermo */
@media (min-width: 1001px) {
  html body .voce .tendina { border-radius: 10px; border: 1px solid rgba(217, 176, 113, 0.35); border-top: 2px solid var(--oro); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7); background: #0B222B; }
  html body .tendina .tendina__interno { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; padding: 22px 10px 20px; }
  html body .tendina__colonna { padding: 0 26px; min-width: 230px; }
  html body .tendina__colonna + .tendina__colonna { border-left: 1px solid rgba(217, 176, 113, 0.18); }
  html body .tendina__titolo { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(217, 176, 113, 0.3); white-space: nowrap; }
  html body .tendina__titolo::after { display: none; }
  html body .tendina__colonna a { padding: 8px 0; border-radius: 6px; }
  html body .tendina__colonna a:hover { background: rgba(217, 176, 113, 0.06); padding-left: 8px; }
  html body .tendina__colonna a b { font-size: 15px; }
  html body .tendina__colonna a span { font-size: 12.5px; }
  html body .tendina__piede { border-top: 1px solid rgba(217, 176, 113, 0.22); padding: 14px 36px; }
  /* Servizi: la tendina e larga, la si tiene dentro lo schermo allineandola a sinistra della voce; le altre a destra */
  html body .navigazione .voce:first-child .tendina { left: 0; right: auto; }
  html body .navigazione .voce:not(:first-child) .tendina { left: auto; right: 0; }
}
/* parco auto: "Vedi tutte le foto" centrato */
html body .mezzo__viste { display: block; text-align: center; align-self: center; margin-left: auto; margin-right: auto; }
/* tendine: centrate sotto la loro voce */
@media (min-width: 1001px) {
  html body .navigazione .voce .tendina, html body .navigazione .voce:first-child .tendina, html body .navigazione .voce:not(:first-child) .tendina { left: 50%; right: auto; transform: translateX(-50%) translateY(-10px); }
  html body .voce:hover .tendina, html body .voce:focus-within .tendina, html body .voce.aperta .tendina { transform: translateX(-50%) translateY(0); }
}
/* tendine: sotto il titolo la riga oro che sfuma, come negli occhielli */
@media (min-width: 1001px) {
  html body .tendina__titolo { border-bottom: 0; padding-bottom: 0; position: relative; margin-bottom: 14px; }
  html body .tendina__titolo::after { content: ''; display: block; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px; flex: none; background: linear-gradient(90deg, rgba(217, 176, 113, 0.9), rgba(217, 176, 113, 0.35) 60%, transparent); }
}
/* ricerca: "cercano spesso" centrato */
html body .cerca__suggerimenti { justify-content: center; }
/* eroe: ordine Intervento, Sede, Preventivo */
html body .eroe__garanzie .garanzia:nth-child(1) { order: 1; }
html body .eroe__garanzie .garanzia:nth-child(3) { order: 2; }
html body .eroe__garanzie .garanzia:nth-child(2) { order: 3; }
/* tendine: partono sotto la testata, non attaccate alla voce (con un ponte invisibile per non perderle col mouse) */
@media (min-width: 1001px) {
  html body .navigazione .voce .tendina { top: calc(100% + 24px); }
  html body .navigazione .voce .tendina::before { content: ''; position: absolute; left: 0; right: 0; top: -26px; height: 26px; }
}
/* richiamo: lo strato dei petali resta sotto e non occupa spazio (era lui il vuoto a sinistra) */
html body .richiamo > .petali { position: absolute; inset: 0; z-index: 0; }
/* richiamo contatti: cornetta grande a sinistra */
html body .richiamo__icona { flex: none; width: 92px; height: 92px; border-radius: 50%; border: 1px solid rgba(217, 176, 113, 0.45); display: inline-flex; align-items: center; justify-content: center; color: var(--oro-chiaro); margin-right: 28px; }
html body .richiamo__icona svg { width: 40px; height: 40px; }
@media (max-width: 760px) { html body .richiamo__icona { display: none; } }
/* richiamo contatti: petali dentro al riquadro, cornetta piena e vicina al testo */
html body .richiamo { overflow: hidden !important; }
html body .richiamo__icona { width: 84px; height: 84px; margin-right: 22px; margin-left: 6px; background: rgba(217, 176, 113, 0.10); border-color: rgba(217, 176, 113, 0.7); box-shadow: 0 0 0 6px rgba(217, 176, 113, 0.06); }
html body .richiamo__icona svg { width: 36px; height: 36px; stroke-width: 1.8; }
/* ricerca: "cercano spesso" un po piu staccato dal campo */
html body .cerca__suggerimenti { margin-top: 22px; }
html body .cerca .contenitore { padding-block: 14px 20px; }
/* piede: piu largo e piu arioso */
html body .piede > .contenitore { max-width: 1400px; }
html body .divisore--piede + .piede .piede__corpo, html body .piede__corpo { padding-top: 56px !important; padding-bottom: 56px !important; gap: 64px; grid-template-columns: 1.4fr 1fr 1fr; }
html body .piede__marchio img { height: 64px; margin-bottom: 18px; }
html body .piede__marchio p { font-size: 15px; line-height: 1.75; max-width: 46ch; }
html body .piede__colonna { gap: 12px; }
html body .piede__colonna h4 { font-size: 12px; margin-bottom: 8px; }
html body .piede__colonna a { font-size: 15.5px; }
html body .piede__numero { font-size: 26px !important; padding: 4px 0 6px; }
html body .piede__coda { padding-top: 16px; padding-bottom: 16px; font-size: 14px; }
@media (max-width: 900px) { html body .piede__corpo { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 520px) { html body .piede__corpo { grid-template-columns: 1fr; gap: 28px; padding-top: 34px !important; padding-bottom: 34px !important; } }
/* piede: come prima ma con le tre colonne raccolte verso il centro (logo piu a destra, contatti al centro, "il sito" piu a sinistra) */
html body .piede > .contenitore { max-width: 1180px; }
html body .divisore--piede + .piede .piede__corpo, html body .piede__corpo { max-width: 1040px; margin-inline: auto; grid-template-columns: 1.2fr 1fr 0.9fr; gap: 48px; padding-top: 34px !important; padding-bottom: 34px !important; justify-items: start; }
html body .piede__marchio { justify-self: end; }
html body .piede__colonna:nth-child(2) { justify-self: center; }
html body .piede__colonna:nth-child(3) { justify-self: start; }
html body .piede__marchio img { height: 52px; margin-bottom: 12px; }
html body .piede__marchio p { font-size: 13.5px; line-height: 1.6; max-width: 42ch; }
html body .piede__colonna { gap: 8px; }
html body .piede__colonna h4 { font-size: 11px; margin-bottom: 2px; }
html body .piede__colonna a { font-size: 13.5px; }
html body .piede__numero { font-size: 19px !important; padding: 3px 0 4px; }
html body .piede__coda { padding-top: 12px; padding-bottom: 12px; font-size: 13px; }
@media (max-width: 900px) { html body .piede__corpo { grid-template-columns: 1fr 1fr; gap: 30px; } html body .piede__marchio, html body .piede__colonna:nth-child(2), html body .piede__colonna:nth-child(3) { justify-self: start; } }
@media (max-width: 520px) { html body .piede__corpo { grid-template-columns: 1fr; gap: 26px; } }
/* vetrina in home: cambio pulito, una dissolvenza sola, senza salti e senza scaletta */
html body #vetrina.griglia-prodotti > * { transition: opacity 0.45s ease !important; transform: none !important; transition-delay: 0s !important; will-change: opacity; }
html body #vetrina.esce > *, html body #vetrina.entra > * { opacity: 0; transform: none !important; }
/* pacchetti: la nota "anche a rate" subito sotto il prezzo, in oro */
html body .carta-tariffa__nota { color: var(--oro-chiaro); font-size: 13.5px; font-weight: 600; margin: -6px 0 16px; }
html body .carta-tariffa__nota:empty { display: none; }
/* piede: il blocco del logo parte piu a sinistra */
html body .piede__corpo { max-width: 1180px; grid-template-columns: 1.3fr 1fr 0.9fr; gap: 56px; }
html body .piede__marchio { justify-self: start; }
/* pacchetti: "anche a rate" un po piu giu, a meta strada fra prezzo ed elenco */
html body .carta-tariffa__nota { margin: 6px 0 18px; }
/* pacchetti: titolo piu grande */
html body .carta-tariffa > h3 { font-size: 34px; margin-bottom: 12px; }
/* via la riga Klarna sotto i pacchetti (ora sta dentro ogni box) */
html body .tariffe-rate { display: none; }
/* eroe: icona in linea col titolo, tutto centrato */
html body .garanzia.icona-nel-titolo { display: block; text-align: center; }
html body .garanzia.icona-nel-titolo b { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 4px; }
html body .garanzia.icona-nel-titolo b svg { width: 20px; height: 20px; margin: 0; flex: none; }
/* piede: logo tutto a sinistra, contatti al centro, "il sito" tutto a destra */
html body .piede > .contenitore { max-width: 1400px; }
html body .piede__corpo { max-width: none; grid-template-columns: 1fr auto 1fr; gap: 40px; }
html body .piede__marchio { justify-self: start; }
html body .piede__colonna:nth-child(2) { justify-self: center; }
html body .piede__colonna:nth-child(3) { justify-self: end; }
/* richiamo contatti: cornetta piu grande, spostata verso il testo */
html body .richiamo__icona { width: 120px; height: 120px; margin-left: 70px; margin-right: 40px; }
html body .richiamo__icona svg { width: 52px; height: 52px; }
@media (max-width: 1100px) { html body .richiamo__icona { margin-left: 10px; width: 96px; height: 96px; } }
/* piede: tre blocchi distribuiti su tutta la larghezza (sinistra / centro / destra) */
html body .piede__corpo { display: flex !important; justify-content: space-between; align-items: flex-start; gap: 40px; max-width: none; width: 100%; }
html body .piede__marchio { flex: 0 1 380px; align-items: center; text-align: center; }
html body .piede__colonna { flex: 0 0 auto; }
@media (max-width: 900px) { html body .piede__corpo { flex-wrap: wrap; justify-content: flex-start; } }
/* richiamo contatti: la cornetta squilla ogni tanto */
html body .richiamo__icona svg { transform-origin: 50% 60%; animation: cornettaGrande 4.5s ease-in-out infinite; }
@keyframes cornettaGrande {
  0%, 70%, 100% { transform: rotate(0); }
  72% { transform: rotate(-14deg); } 75% { transform: rotate(12deg); } 78% { transform: rotate(-10deg); } 81% { transform: rotate(8deg); } 84% { transform: rotate(-4deg); } 87% { transform: rotate(0); }
}

/* eroe: icona a sinistra del testo, centrata in verticale, testo allineato a sinistra */
html body .garanzia, html body .garanzia.icona-nel-titolo { display: flex; flex-direction: row; align-items: center; text-align: left; gap: 12px; max-width: none; }
html body .garanzia > svg, html body .garanzia > .icona { width: 26px; height: 26px; margin: 0; flex: none; }
html body .garanzia b { display: block; margin-bottom: 3px; }
html body .garanzia.icona-nel-titolo b { display: block; justify-content: flex-start; }
/* eroe: tasto Chiama sobrio, bordo e testo in oro su fondo trasparente */
html body .eroe__azioni .bottone--oro, html body .eroe__azioni .bottone--oro:hover {
  background: transparent; color: var(--oro-chiaro); border: 1px solid rgba(217, 176, 113, 0.7);
  border-radius: 999px; padding: 14px 30px; font-weight: 600; letter-spacing: 0.02em; box-shadow: none;
}
html body .eroe__azioni .bottone--oro svg { width: 18px; height: 18px; }
html body .eroe__azioni .bottone--oro:hover { border-color: var(--oro-chiaro); background: rgba(217, 176, 113, 0.08); outline: none; }

/* admin: finestra articolo su due colonne, piu pulita */
html body #finestra-articolo .finestra__carta { max-width: 960px; display: flex; flex-direction: column; max-height: calc(100vh - 40px); }
html body #finestra-articolo .finestra__corpo { overflow: auto; padding: 24px 28px; }
html body #finestra-articolo .finestra__testata { padding: 18px 28px; }
html body #finestra-articolo .finestra__testata h2 { font-size: 22px; }
html body #finestra-articolo .finestra__piede { padding: 14px 28px; }
html body .modulo-articolo { gap: 14px; }
html body .modulo-articolo__griglia { display: grid; grid-template-columns: 1fr 250px; gap: 28px; align-items: start; }
html body .modulo-articolo__campi { display: grid; gap: 14px; }
html body .modulo-articolo__lato { display: grid; gap: 14px; padding-left: 28px; border-left: 1px solid var(--bordo); }
html body .modulo-articolo .terna { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
html body .modulo-articolo .campo { gap: 5px; }
html body .modulo-articolo .campo label { font-size: 11.5px; letter-spacing: .05em; }
html body .modulo-articolo .campo input, html body .modulo-articolo .campo select, html body .modulo-articolo .campo textarea { padding: 10px 12px; font-size: 14.5px; }
html body .modulo-articolo textarea { min-height: 84px; resize: vertical; }
html body .modulo-articolo .anteprima-immagine { aspect-ratio: 1 / 1; margin-bottom: 8px; }
html body .modulo-articolo input[type="file"] { font-size: 12.5px; padding: 6px 0; border: 0; background: transparent; }
html body .modulo-articolo__interruttori { display: grid; gap: 10px; padding-top: 6px; border-top: 1px solid var(--bordo); }
html body .modulo-articolo .interruttore { font-size: 14px; }
@media (max-width: 760px) {
  html body .modulo-articolo__griglia { grid-template-columns: 1fr; }
  html body .modulo-articolo__lato { padding-left: 0; border-left: 0; padding-top: 16px; border-top: 1px solid var(--bordo); }
  html body .modulo-articolo .terna { grid-template-columns: 1fr; }
}
/* admin: pastiglia "in evidenza" staccata dal nome */
html body .tavola .pastiglia { margin-left: 12px; vertical-align: middle; }

/* cassetto carrello: apertura e chiusura piu morbide */
html body .velo-carrello { background: rgba(6, 14, 16, 0.55); backdrop-filter: blur(4px); transition: opacity 0.38s cubic-bezier(.22,.61,.36,1), visibility 0.38s; }
html body .cassetto { transform: translateX(100%); opacity: 0; transition: transform 0.46s cubic-bezier(.22,.61,.36,1), opacity 0.32s ease; box-shadow: none; }
html body .cassetto.aperto { transform: none; opacity: 1; box-shadow: -30px 0 70px -40px rgba(0, 0, 0, 0.7); }
html body .cassetto:not(.aperto) { transition: transform 0.36s cubic-bezier(.55,0,.75,.35), opacity 0.26s ease 0.08s; }
/* cassetto carrello: foto piu grande, testo agganciato ai bordi della foto, prezzo sotto il contatore */
html body .riga-cassetto { display: grid; grid-template-columns: 76px 1fr auto; gap: 16px; align-items: stretch; padding: 16px 0; }
html body .riga-cassetto__figura { width: 76px; height: 76px; }
html body .riga-cassetto > span:nth-child(2) { display: flex; flex-direction: column; justify-content: space-between; padding: 2px 0; }
html body .riga-cassetto__meta { margin-top: 0; }
html body .riga-cassetto__destra { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 6px; padding: 2px 0; }
html body .riga-cassetto__destra .prezzo { margin: 0; font-size: 19px; }

/* pacchetti: prezzo e riga Klarna alla stessa altezza in tutte le carte, centrati */
html body .carta-tariffa { display: flex; flex-direction: column; }
html body .carta-tariffa > .brindello { flex: 0 0 auto; min-height: 3.2em; text-align: center; }
html body .carta-tariffa__prezzo, html body .carta-tariffa__nota { text-align: center; }
html body .carta-tariffa > .bottone { margin-top: auto; }

/* le prime ore: un bagliore celeste corre sulla linea da sinistra a destra e riparte */
html body .passi::after {
  content: ''; position: absolute; top: 12px; left: 7px; width: 160px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(143, 211, 217, 0.9) 60%, #E9FBFC);
  filter: blur(0.4px); opacity: 0; pointer-events: none;
  animation: bagliorePassi 5.5s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes bagliorePassi {
  0% { left: 7px; opacity: 0; }
  8% { opacity: 1; }
  70% { opacity: 1; }
  80% { left: calc(100% - 167px); opacity: 0; }
  100% { left: calc(100% - 167px); opacity: 0; }
}
@media (max-width: 900px) { html body .passi::after { display: none; } }

/* cassetto: niente blur sul velo (faceva scattare apertura e chiusura) */
html body .velo-carrello { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(6, 14, 16, 0.62); }
html body .cassetto { will-change: transform, opacity; }
/* petali: i primi partono gia dentro al riquadro, non solo dall alto */
html body .petalo { top: -40px; }

/* petali: sagome vere (petalo, fiorellino, foglia) nei colori del logo */
html body .petalo { background-image: none; border-radius: 0; box-shadow: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); width: 22px; height: 28px; background-size: contain; background-repeat: no-repeat; background-position: center; }
html body .petalo--a { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2032%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23BFEFF2%22%2F%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%235FB5BD%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231F6F78%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M12%201C19%208%2023%2015%2021%2023c-1.5%205-5%208-9%208s-7.5-3-9-8C1%2015%205%208%2012%201z%22%20fill%3D%22url(%23g)%22%2F%3E%3Cpath%20d%3D%22M12%204c1%208%201%2016%200%2026%22%20stroke%3D%22%23E9FBFC%22%20stroke-opacity%3D%22.45%22%20stroke-width%3D%22.8%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }
html body .petalo--b { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22c%22%20cx%3D%22.5%22%20cy%3D%22.5%22%20r%3D%22.5%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23F0D9A6%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23C99C5E%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22p%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23BFEFF2%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234FA9B2%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22url(%23p)%22%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%226.5%22%20rx%3D%224.2%22%20ry%3D%226%22%2F%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%2225.5%22%20rx%3D%224.2%22%20ry%3D%226%22%2F%3E%3Cellipse%20cx%3D%226.5%22%20cy%3D%2216%22%20rx%3D%226%22%20ry%3D%224.2%22%2F%3E%3Cellipse%20cx%3D%2225.5%22%20cy%3D%2216%22%20rx%3D%226%22%20ry%3D%224.2%22%2F%3E%3Cellipse%20cx%3D%229.3%22%20cy%3D%229.3%22%20rx%3D%224.2%22%20ry%3D%226%22%20transform%3D%22rotate(-45%209.3%209.3)%22%2F%3E%3Cellipse%20cx%3D%2222.7%22%20cy%3D%2222.7%22%20rx%3D%224.2%22%20ry%3D%226%22%20transform%3D%22rotate(-45%2022.7%2022.7)%22%2F%3E%3Cellipse%20cx%3D%2222.7%22%20cy%3D%229.3%22%20rx%3D%224.2%22%20ry%3D%226%22%20transform%3D%22rotate(45%2022.7%209.3)%22%2F%3E%3Cellipse%20cx%3D%229.3%22%20cy%3D%2222.7%22%20rx%3D%224.2%22%20ry%3D%226%22%20transform%3D%22rotate(45%209.3%2022.7)%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%224%22%20fill%3D%22url(%23c)%22%2F%3E%3C%2Fsvg%3E"); width: 24px; height: 24px; }
html body .petalo--c { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2020%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22f%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%220%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%238FD3D9%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232A8A93%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M1%2010C8%201%2020%200%2031%203%2026%2014%2014%2020%201%2010z%22%20fill%3D%22url(%23f)%22%2F%3E%3Cpath%20d%3D%22M3%2010C10%208%2018%206%2028%204%22%20stroke%3D%22%23E9FBFC%22%20stroke-opacity%3D%22.5%22%20stroke-width%3D%22.8%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E"); width: 26px; height: 17px; }
@keyframes petaloCade {
  0%   { transform: translate3d(0, 0, 0) rotate(var(--giro, 0deg)) scale(var(--scala, 1)); opacity: 0; }
  6%   { opacity: 0.9; }
  25%  { transform: translate3d(calc(var(--deriva, 30px) * .5), 28%, 0) rotate(calc(var(--giro, 0deg) + 70deg)) scale(var(--scala, 1)); }
  50%  { transform: translate3d(var(--deriva, 30px), 55%, 0) rotate(calc(var(--giro, 0deg) + 160deg)) scale(var(--scala, 1)); opacity: 0.85; }
  75%  { transform: translate3d(calc(var(--deriva, 30px) * .7), 85%, 0) rotate(calc(var(--giro, 0deg) + 260deg)) scale(var(--scala, 1)); }
  94%  { opacity: 0.7; }
  100% { transform: translate3d(calc(var(--deriva, 30px) * 1.3), 120%, 0) rotate(calc(var(--giro, 0deg) + 380deg)) scale(var(--scala, 1)); opacity: 0; }
}
/* galleria bassorilievi: hover su tutto il box, didascalia in grassetto */
html body .galleria__foto { cursor: zoom-in; transition: transform 0.35s var(--curva), border-color 0.35s var(--curva), box-shadow 0.35s var(--curva); }
html body .galleria__foto:hover { transform: translateY(-4px); border-color: var(--oro); box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.7); }
html body .galleria__foto figcaption { font-weight: 700; color: #E4EAE7; transition: color 0.35s var(--curva); }
html body .galleria__foto:hover figcaption { color: var(--oro-chiaro); }
/* piede: logo tutto a sinistra, contatti al centro esatto, "il sito" tutto a destra */
html body .piede > .contenitore { max-width: 1640px; }
html body .piede__corpo { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 40px; }
html body .piede__marchio { justify-self: start; flex: none; max-width: 380px; }
html body .piede__colonna:nth-child(2) { justify-self: center; }
html body .piede__colonna:nth-child(3) { justify-self: end; }
@media (max-width: 900px) { html body .piede__corpo { grid-template-columns: 1fr; } html body .piede__colonna:nth-child(2), html body .piede__colonna:nth-child(3) { justify-self: start; } }

/* petali: la caduta e in base all altezza del riquadro (le percentuali di translate erano relative al petalo) */
@keyframes petaloCade {
  0%   { transform: translate3d(0, 0, 0) rotate(var(--giro, 0deg)) scale(var(--scala, 1)); opacity: 0; }
  6%   { opacity: 0.9; }
  25%  { transform: translate3d(calc(var(--deriva, 30px) * .5), calc(var(--h, 300px) * .3), 0) rotate(calc(var(--giro, 0deg) + 70deg)) scale(var(--scala, 1)); }
  50%  { transform: translate3d(var(--deriva, 30px), calc(var(--h, 300px) * .55), 0) rotate(calc(var(--giro, 0deg) + 160deg)) scale(var(--scala, 1)); opacity: 0.85; }
  75%  { transform: translate3d(calc(var(--deriva, 30px) * .7), calc(var(--h, 300px) * .82), 0) rotate(calc(var(--giro, 0deg) + 260deg)) scale(var(--scala, 1)); }
  94%  { opacity: 0.7; }
  100% { transform: translate3d(calc(var(--deriva, 30px) * 1.3), calc(var(--h, 300px) + 60px), 0) rotate(calc(var(--giro, 0deg) + 380deg)) scale(var(--scala, 1)); opacity: 0; }
}

html body .carta-tariffa > .brindello { min-height: 4.6em; }

/* le prime ore: bagliore su transform (fluido) e piu veloce */
html body .passi::after {
  left: 7px; right: 7px; width: auto; height: 3px; top: 12px;
  background: linear-gradient(90deg, transparent calc(100% - 170px), rgba(143, 211, 217, 0.85) calc(100% - 40px), #E9FBFC);
  filter: none; opacity: 1; will-change: transform;
  animation: bagliorePassi2 3.2s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes bagliorePassi2 {
  0% { transform: translateX(-100%); opacity: 0; }
  8% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}

/* le prime ore: bagliore come sfondo che scorre dentro la linea, senza sporgere */
html body .passi::after {
  left: 7px; right: 7px; width: auto; height: 3px; top: 12px; transform: none; will-change: background-position;
  background: linear-gradient(90deg, transparent, rgba(143, 211, 217, 0.85) 75%, #E9FBFC) no-repeat -170px 0 / 170px 100%;
  opacity: 1; animation: bagliorePassi3 3s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes bagliorePassi3 {
  0% { background-position: -170px 0; }
  100% { background-position: calc(100% + 170px) 0; }
}

/* titoli di prosa: rombo e riga oro a fianco del titolo, non sotto */
html body .prosa h2 { display: flex; align-items: center; gap: 14px; padding-bottom: 0; margin-bottom: 16px; }
html body .prosa h2::before { position: static; flex: none; width: 7px; height: 7px; margin-left: 4px; }
html body .prosa h2::after { position: static; flex: 1 1 auto; height: 1px; min-width: 40px; }

/* le prime ore: bagliore molto piu lento (12 s), rombi e numeri si accendono al suo passaggio */
html body .passi::after { animation-duration: 12s; animation-timing-function: linear; }
html body .passo__segno { animation: lampoRombo 12s linear infinite; }
html body .passo h3::before { animation: lampoNumero 12s linear infinite; }
html body .passo:nth-child(1) .passo__segno, html body .passo:nth-child(1) h3::before { animation-delay: 0s; }
html body .passo:nth-child(2) .passo__segno, html body .passo:nth-child(2) h3::before { animation-delay: 2.4s; }
html body .passo:nth-child(3) .passo__segno, html body .passo:nth-child(3) h3::before { animation-delay: 4.8s; }
html body .passo:nth-child(4) .passo__segno, html body .passo:nth-child(4) h3::before { animation-delay: 7.2s; }
@keyframes lampoRombo {
  0%, 6%, 100% { background: var(--pietra); border-color: var(--oro); box-shadow: none; }
  9% { background: #E9FBFC; border-color: #E9FBFC; box-shadow: 0 0 0 5px rgba(143, 211, 217, 0.25), 0 0 16px rgba(143, 211, 217, 0.9); }
  20% { background: var(--pietra); border-color: var(--oro); box-shadow: none; }
}
@keyframes lampoNumero {
  0%, 6%, 100% { color: inherit; text-shadow: none; }
  9% { color: #E9FBFC; text-shadow: 0 0 12px rgba(143, 211, 217, 0.9); }
  20% { color: inherit; text-shadow: none; }
}

/* rombi: il lampo passa da filter/transform (i colori sono bloccati da !important) */
@keyframes lampoRombo {
  0%, 6%, 100% { transform: rotate(45deg) scale(1); filter: brightness(1) drop-shadow(0 0 0 rgba(143, 211, 217, 0)); }
  9% { transform: rotate(45deg) scale(1.45); filter: brightness(2.4) drop-shadow(0 0 10px rgba(143, 211, 217, 1)); }
  20% { transform: rotate(45deg) scale(1); filter: brightness(1) drop-shadow(0 0 0 rgba(143, 211, 217, 0)); }
}

/* piede: blocco del logo tutto a sinistra */
html body .piede__marchio { align-items: flex-start; text-align: left; }
html body .piede__marchio img, html body .piede__marchio a { margin-left: 0; align-self: flex-start; }

/* le prime ore: ancora piu lento (24 s), numeri in oro al passaggio */
html body .passi::after, html body .passo__segno, html body .passo h3::before { animation-duration: 24s; }
html body .passo:nth-child(1) .passo__segno, html body .passo:nth-child(1) h3::before { animation-delay: 0.2s; }
html body .passo:nth-child(2) .passo__segno, html body .passo:nth-child(2) h3::before { animation-delay: 5s; }
html body .passo:nth-child(3) .passo__segno, html body .passo:nth-child(3) h3::before { animation-delay: 9.8s; }
html body .passo:nth-child(4) .passo__segno, html body .passo:nth-child(4) h3::before { animation-delay: 14.6s; }
@keyframes lampoNumero {
  0%, 6%, 100% { color: var(--bordo); text-shadow: none; }
  9% { color: var(--oro); text-shadow: 0 0 10px rgba(217, 176, 113, 0.7); }
  20% { color: var(--bordo); text-shadow: none; }
}

html body .prosa h2::before { order: 1; margin-left: 2px; }
html body .prosa h2::after { order: 2; }

/* eroe: la foto resta visibile fino in fondo (il velo non si chiude a nero sotto le garanzie) */
html body .eroe__velo {
  background:
    linear-gradient(180deg, rgba(22,33,29,0.86) 0%, rgba(22,33,29,0.58) 40%, rgba(22,33,29,0.62) 82%, rgba(22,33,29,0.78) 100%),
    radial-gradient(70% 60% at 74% 30%, rgba(167,126,68,0.22), transparent 62%);
}
html body .eroe--foto .eroe__griglia { padding-bottom: 64px; }

/* titoli di prosa: via il rombo, resta la riga a destra del titolo, centrata in altezza */
html body .prosa h2::before { content: none; display: none; }
html body .prosa h2::after { align-self: center; margin-left: 4px; }

/* piede: colonna "il sito" con testi centrati */
html body .piede__colonna:nth-child(3) { text-align: center; display: flex; flex-direction: column; align-items: center; }
html body .piede__colonna:nth-child(3) .occhiello { justify-content: center; }
html body .piede__colonna:nth-child(3) .occhiello::after { display: none; }

/* cornette che squillano ogni 5 s: tasto Chiamaci subito e numero in testata/richiami */
html body .eroe__azioni .bottone--oro svg, html body .numero-testata > svg {
  transform-origin: 50% 60%; animation: cornettaSquilla 5s ease-in-out infinite; will-change: transform;
}
html body .numero-testata--richiamo > svg { animation-delay: 1.2s; }
@keyframes cornettaSquilla {
  0%, 76%, 100% { transform: rotate(0); }
  79% { transform: rotate(-16deg); } 82% { transform: rotate(14deg); } 85% { transform: rotate(-12deg); }
  88% { transform: rotate(9deg); } 91% { transform: rotate(-5deg); } 94% { transform: rotate(0); }
}

/* petali: gigli color logo e petali di giglio */
html body .petalo--d { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23E9FBFC%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%238FD3D9%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232F8F98%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M20%2020C17%2012%2017%205%2020%201c3%204%203%2011%200%2019z%22%20fill%3D%22url(%23g)%22%20transform%3D%22rotate(0%2020%2020)%22%2F%3E%3Cpath%20d%3D%22M20%2020C17%2012%2017%205%2020%201c3%204%203%2011%200%2019z%22%20fill%3D%22url(%23g)%22%20transform%3D%22rotate(60%2020%2020)%22%2F%3E%3Cpath%20d%3D%22M20%2020C17%2012%2017%205%2020%201c3%204%203%2011%200%2019z%22%20fill%3D%22url(%23g)%22%20transform%3D%22rotate(120%2020%2020)%22%2F%3E%3Cpath%20d%3D%22M20%2020C17%2012%2017%205%2020%201c3%204%203%2011%200%2019z%22%20fill%3D%22url(%23g)%22%20transform%3D%22rotate(180%2020%2020)%22%2F%3E%3Cpath%20d%3D%22M20%2020C17%2012%2017%205%2020%201c3%204%203%2011%200%2019z%22%20fill%3D%22url(%23g)%22%20transform%3D%22rotate(240%2020%2020)%22%2F%3E%3Cpath%20d%3D%22M20%2020C17%2012%2017%205%2020%201c3%204%203%2011%200%2019z%22%20fill%3D%22url(%23g)%22%20transform%3D%22rotate(300%2020%2020)%22%2F%3E%3Cg%20stroke%3D%22%23D9B071%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M20%2020l4-6M20%2020l-4-6M20%2020l1-7M20%2020l-1-7M20%2020l6-2M20%2020l-6-2%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23F0D9A6%22%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2214%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2214%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2213%22%20r%3D%221.1%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2213%22%20r%3D%221.1%22%2F%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%2218%22%20r%3D%221.1%22%2F%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2218%22%20r%3D%221.1%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%222%22%20fill%3D%22%23C99C5E%22%2F%3E%3C%2Fsvg%3E"); width: 30px; height: 30px; }
html body .petalo--e { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018%2040%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22p%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23E9FBFC%22%2F%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%238FD3D9%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232F8F98%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M9%201c6%208%208%2018%206%2028-1%205-4%209-6%2010-2-1-5-5-6-10C1%2019%203%209%209%201z%22%20fill%3D%22url(%23p)%22%2F%3E%3Cpath%20d%3D%22M9%204c1%2010%201%2022%200%2033%22%20stroke%3D%22%23FFFFFF%22%20stroke-opacity%3D%22.5%22%20stroke-width%3D%22.8%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E"); width: 16px; height: 34px; }

/* cerca: il tasto in testata non diventa oro pieno da aperto; il campo e piu corto */
html body .apri-cerca[aria-expanded="true"] { background: transparent; border-color: var(--oro); color: var(--oro); }
html body .cerca__riga { max-width: 620px; margin-left: auto; margin-right: auto; }
html body .cerca__esiti { max-width: 620px; margin-left: auto; margin-right: auto; }

/* cassetto: contatore in alto, sulla riga del nome; prezzo in basso sulla riga "al pezzo" */
html body .riga-cassetto { align-items: stretch; }
html body .riga-cassetto > span:nth-child(2), html body .riga-cassetto__destra { padding: 0; }
html body .riga-cassetto__destra { justify-content: space-between; }
html body .riga-cassetto__destra .contatore--cassetto { margin-top: -2px; }
html body .riga-cassetto__destra .prezzo { line-height: 1; margin-bottom: 2px; }

html body .cassetto__spedizione { text-align: center; }

/* titoli di prosa: rombo prima del titolo (come negli occhielli), riga a destra */
html body .prosa h2::before { content: ''; display: block; order: 0; position: static; width: 7px; height: 7px; margin: 0 4px 0 0; background: var(--oro); transform: rotate(45deg); flex: none; align-self: center; }

/* cornetta in testata: squilla ogni 5 s (scavalca il blocco precedente e reduced-motion) */
html body .numero-testata svg, html body .numero-testata:hover svg { animation: cornettaSquilla 5s ease-in-out infinite !important; transform-origin: 50% 60%; }
html body .eroe__azioni .bottone--oro svg { animation: cornettaSquilla 5s ease-in-out infinite !important; }
@media (prefers-reduced-motion: reduce) { html body .numero-testata svg, html body .eroe__azioni .bottone--oro svg { animation: cornettaSquilla 5s ease-in-out infinite !important; } }

/* cerca: campo e risultati piu larghi */
html body .cerca__riga, html body .cerca__esiti { max-width: 900px; }

/* eroe: la foto arriva fino al divisore (il margine sopra passa dentro all eroe) */
html body .eroe--foto + .contenitore > .divisore { margin-top: 0; }
html body .eroe--foto .eroe__griglia { padding-bottom: 96px; }

/* pacchetti: petali e gigli anche nelle tre carte */
html body .carta-tariffa { position: relative; }
html body .carta-tariffa > .petali { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
html body .carta-tariffa > :not(.petali) { position: relative; z-index: 1; }

/* recensioni: voto Google in testa, carte solo-stelle piu leggere */
html body .google-voto { display: flex; align-items: center; gap: 28px; padding: 26px 30px; margin-bottom: 40px; border: 1px solid var(--bordo); border-radius: var(--raggio-g, 14px); background: var(--carta); }
html body .google-voto__numero { font-family: var(--display); font-size: 64px; line-height: 1; color: var(--oro-chiaro); }
html body .google-voto__stelle .stelle { font-size: 22px; letter-spacing: 2px; color: var(--oro); }
html body .google-voto__testo { color: var(--fumo); margin-top: 4px; }
html body .google-voto > .bottone { margin-left: auto; }
html body .recensione--solo-stelle .recensione__testo { color: var(--fumo); font-size: 16px; font-style: italic; }
html body .recensione--solo-stelle .recensione__testo::before { content: none; }
@media (max-width: 760px) { html body .google-voto { flex-wrap: wrap; } html body .google-voto > .bottone { margin-left: 0; } }

/* tendine: un pochino piu in basso */
@media (min-width: 1001px) {
  html body .navigazione .voce .tendina { top: calc(100% + 32px); }
  html body .navigazione .voce .tendina::before { top: -34px; height: 34px; }
}
/* carrello aperto: niente sfocatura dietro */
html body .velo-carrello, html body .velo-carrello.aperto { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html body:has(.cassetto.aperto) header, html body:has(.cassetto.aperto) main, html body:has(.cassetto.aperto) footer, html body:has(.cassetto.aperto) .sito { filter: none !important; }
/* ricerca: barra di scorrimento sottile e discreta */
html body .cerca__esiti { scrollbar-width: thin; scrollbar-color: rgba(217, 176, 113, 0.55) transparent; padding-right: 6px; }
html body .cerca__esiti::-webkit-scrollbar { width: 6px; }
html body .cerca__esiti::-webkit-scrollbar-track { background: transparent; }
html body .cerca__esiti::-webkit-scrollbar-thumb { background: rgba(217, 176, 113, 0.5); border-radius: 6px; }
html body .cerca__esiti::-webkit-scrollbar-thumb:hover { background: rgba(217, 176, 113, 0.85); }
html body .cerca__esiti::-webkit-scrollbar-button { display: none; height: 0; }

html body .prosa h2::after { align-self: auto; margin-top: 0.62em; }

html body .prosa h2::after { align-self: center; margin-top: 0.12em; }

/* petali: sempre sotto al testo, in ogni riquadro */
html body .petali { z-index: 0 !important; }
html body .richiamo > :not(.petali), html body .carta-tariffa > :not(.petali), html body .cerca > :not(.petali) { position: relative; z-index: 2 !important; }
html body .richiamo { align-items: center; }
html body .richiamo__azioni { align-self: center; }

/* piede: colonna contatti con testi centrati */
html body .piede__colonna:nth-child(2) { text-align: center; display: flex; flex-direction: column; align-items: center; }
html body .piede__colonna:nth-child(2) .occhiello { justify-content: center; }
html body .piede__colonna:nth-child(2) .occhiello::after { display: none; }

/* piede: la riga degli occhielli torna, azzurra come il testo */
html body .piede__colonna:nth-child(2) .occhiello::after, html body .piede__colonna:nth-child(3) .occhiello::after { display: block; background: currentColor; opacity: 0.6; max-width: 60px; }

html body .piede__corpo { max-width: none; margin: 0; width: 100%; }

html body .divisore--piede + .piede .piede__corpo, html body .piede .piede__corpo { max-width: none; margin-inline: 0; width: 100%; grid-template-columns: 1fr auto 1fr; justify-items: stretch; gap: 40px; }

/* piede: occhielli con rombo, testo e riga a destra (come i titoli di prosa), azzurri */
html body .piede__colonna:nth-child(2) .occhiello, html body .piede__colonna:nth-child(3) .occhiello { display: flex; align-items: center; gap: 10px; align-self: stretch; justify-content: flex-start; }
html body .piede__colonna:nth-child(2) .occhiello::after, html body .piede__colonna:nth-child(3) .occhiello::after { display: block; content: ''; flex: 1 1 auto; height: 1px; max-width: none; min-width: 40px; margin: 0; background: linear-gradient(90deg, currentColor, transparent); opacity: 0.7; }

html body .richiamo, html body main .richiamo { padding: 48px 52px !important; }

/* elenchi in prosa: niente rombo davanti alle voci */
html body .prosa ul li::before, html body .prosa ul li::marker { content: none; display: none; }
html body .prosa ul li { padding-left: 0; list-style: none; }

/* banda (Cosa ci serve da voi): via la carta ruvida, sfondo come i richiami */
html body .banda { background: linear-gradient(135deg, #0E2A33, #0A1C22 60%, #0B1F26); min-height: 0; border-top: 1px solid rgba(167,126,68,0.22); border-bottom: 1px solid rgba(167,126,68,0.22); }
html body .banda__sfondo { display: none; }
html body .banda__velo { background: radial-gradient(70% 60% at 80% 30%, rgba(167,126,68,0.12), transparent 62%); }
html body .banda .contenitore { padding-block: 64px; }
html body .banda > .petali { z-index: 0; }
html body .banda > :not(.petali) { position: relative; z-index: 2; }
/* domande frequenti: fra una domanda e l altra il nostro divisore (riga oro con rombo al centro) */
html body .prosa h3 { border-top: 0; padding-top: 0; margin-top: 44px; position: relative; }
html body .prosa h3:not(:first-of-type)::before {
  content: ''; display: block; height: 9px; margin-bottom: 30px;
  background:
    linear-gradient(90deg, transparent, rgba(217,176,113,0.55) 30%, rgba(217,176,113,0.55) calc(50% - 14px), transparent calc(50% - 14px), transparent calc(50% + 14px), rgba(217,176,113,0.55) calc(50% + 14px), rgba(217,176,113,0.55) 70%, transparent) center / 100% 1px no-repeat;
  position: relative;
}
html body .prosa h3:not(:first-of-type)::after {
  content: ''; position: absolute; left: 50%; top: 0; width: 7px; height: 7px; background: var(--oro-chiaro); transform: translate(-50%, 1px) rotate(45deg);
}
/* piede: dopo "Contatti" e "Il sito" la riga azzurra a destra */
html body .piede__colonna h4 { display: flex; align-items: center; gap: 10px; align-self: stretch; }
html body .piede__colonna h4::after { content: ''; flex: 1 1 auto; min-width: 40px; height: 1px; background: linear-gradient(90deg, currentColor, transparent); opacity: 0.7; }

/* richiamo: testo e tasto centrati in altezza, padding uguale sopra e sotto */
html body .richiamo, html body main .richiamo, html body .richiamo[style] { padding-top: 48px !important; padding-bottom: 48px !important; min-height: 0; align-items: center !important; }
html body .richiamo > div:not(.petali) { align-self: center; }
/* piede: logo centrato sopra al testo, testo allineato a sinistra */
html body .piede__marchio { align-items: center; text-align: left; }
html body .piede__marchio img, html body .piede__marchio a { align-self: center; margin-left: 0; }
html body .piede__marchio p { align-self: stretch; text-align: left; }

/* pacchetti: prezzo subito sotto la descrizione (niente riga vuota forzata) */
html body .carta-tariffa > .brindello { min-height: 0; margin-bottom: 14px; }
html body .carta-tariffa__prezzo { margin-top: 0; }

/* finestre: il sito dietro non si sposta (la barra di scorrimento tiene il suo spazio), apertura e chiusura morbide */
html { scrollbar-gutter: stable; }
html body .finestra { display: flex; opacity: 0; visibility: hidden; pointer-events: none; backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(6, 14, 16, 0.62); transition: opacity 0.26s ease, visibility 0.26s; }
html body .finestra.aperta { opacity: 1; visibility: visible; pointer-events: auto; }
html body .finestra .finestra__carta { transform: translateY(10px) scale(0.985); transition: transform 0.3s cubic-bezier(.22,.61,.36,1); }
html body .finestra.aperta .finestra__carta { transform: none; }
/* la X: hover pulito, niente rotazioni */
html body .finestra__chiudi, html body .chiudi-finestra, html body .cassetto__chiudi, html body .cerca__chiudi { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
html body .finestra__chiudi:hover, html body .chiudi-finestra:hover, html body .cassetto__chiudi:hover, html body .cerca__chiudi:hover { transform: translateY(-50%) !important; color: var(--oro-chiaro); background: rgba(217, 176, 113, 0.10); border-color: rgba(217, 176, 113, 0.6); }
html body .cassetto__chiudi:hover, html body .cerca__chiudi:hover, html body .chiudi-finestra:hover { transform: none !important; }

/* finestra delle voci: la scheda si stringe attorno alla foto, titolo a sinistra e X a destra */
html body .finestra--voce .finestra__carta { width: auto; max-width: min(920px, 92vw); min-width: min(420px, 92vw); }
html body .finestra--voce .voce__foto { width: auto; max-width: 100%; height: auto; max-height: 62vh; object-fit: contain; margin: 0 auto 16px; background: transparent; }
html body .finestra--voce .finestra__testata { justify-content: space-between; }
html body .finestra--voce .finestra__testata h2 { text-align: left; padding-right: 48px; }
html body .finestra--voce p { text-align: left; }

html body .finestra--voce .finestra__carta { width: fit-content; }
html body .finestra--voce p { max-width: 58ch; }

/* le prime ore: il bagliore lo muove passi.js; i passi si accendono al passaggio e restano accesi 5 s */
html body .passi.passi--vivo::after { animation: none; background-position: var(--bagliore, -170px) 0; }
html body .passi.passi--vivo .passo__segno, html body .passi.passi--vivo .passo h3::before { animation: none; transition: filter 0.25s ease, transform 0.25s ease, color 0.25s ease, text-shadow 0.25s ease; }
html body .passo.acceso .passo__segno { transform: rotate(45deg) scale(1.35); filter: brightness(2.2) drop-shadow(0 0 10px rgba(143, 211, 217, 1)); }
html body .passo.acceso h3::before { color: var(--oro) !important; text-shadow: 0 0 10px rgba(217, 176, 113, 0.7); }
html body .passo.acceso .passo__quando { color: var(--oro-chiaro); }
/* lumino: la fiamma non si sposta di lato, guizza solo in altezza */
html body .lumino__fiamma, html body .lumino[data-rivela].visto .lumino__fiamma { animation: fiammaFerma 3.4s ease-in-out infinite, guizzoFermo 1.13s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes fiammaFerma { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.06); } }
@keyframes guizzoFermo { 0%, 100% { transform: scale(1, 1); opacity: 1; } 35% { transform: scale(0.985, 1.03); opacity: 0.94; } 70% { transform: scale(1.01, 0.98); opacity: 1; } }

/* tasto Chiamaci subito: fondo oro pieno, testo scuro, sempre a pillola */
html body .eroe__azioni .bottone--oro, html body .eroe__azioni .bottone--oro:hover {
  background: linear-gradient(100deg, var(--oro), var(--oro-chiaro) 55%, var(--oro)); color: #23180A; border-color: rgba(255, 240, 205, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.45), 0 8px 22px -12px rgba(0, 0, 0, 0.6);
}
html body .eroe__azioni .bottone--oro:hover { filter: brightness(1.06); }

/* recensioni in home: girano come la vetrina, con una dissolvenza */
html body #recensioni-home > * { transition: opacity 0.45s ease !important; transform: none !important; transition-delay: 0s !important; }
html body #recensioni-home.esce > *, html body #recensioni-home.entra > * { opacity: 0; }

/* fiamma vera: strati che guizzano con ritmi diversi, sempre sull asse */
html body .lumino__fiamma, html body .lumino[data-rivela].visto .lumino__fiamma { animation: none; }
html body .lumino__fiamma > * { transform-origin: 120px 112px; transform-box: view-box; }
html body .lumino__fiamma .fiamma-fuori { animation: fiammaVera 2.7s ease-in-out infinite; }
html body .lumino__fiamma .fiamma-mezzo { animation: fiammaVera 1.9s ease-in-out infinite 0.35s; }
html body .lumino__fiamma .fiamma-cuore { animation: cuoreVero 1.1s ease-in-out infinite; }
html body .lumino__fiamma .fiamma-alone { animation: aloneVero 3.4s ease-in-out infinite; }
@keyframes fiammaVera {
  0%, 100% { transform: scale(1, 1); }
  18% { transform: scale(0.97, 1.05); }
  37% { transform: scale(1.02, 0.96); }
  54% { transform: scale(0.985, 1.08); }
  71% { transform: scale(1.015, 0.985); }
  86% { transform: scale(0.99, 1.03); }
}
@keyframes cuoreVero {
  0%, 100% { transform: scale(1, 1); opacity: 1; }
  30% { transform: scale(0.94, 1.1); opacity: 0.92; }
  60% { transform: scale(1.05, 0.92); opacity: 1; }
  80% { transform: scale(0.97, 1.05); opacity: 0.96; }
}
@keyframes aloneVero {
  0%, 100% { transform: scale(1); opacity: 1; }
  40% { transform: scale(1.08); opacity: 0.85; }
  65% { transform: scale(0.96); opacity: 1; }
}

@media (max-width: 1000px) {
  /* menu da telefono: Servizi/Prodotti/Info utili grandi come Prezziario e Contatti */
  html body .voce__testa, html body .voce__solo { font-size: 17px; font-weight: 600; padding: 16px 12px; color: var(--inchiostro); }
  /* il campo cerca non fa zoomare la pagina (iOS ingrandisce sotto i 16px) */
  html body .cerca__riga input { font-size: 18px; }
}
html body .apri-cerca, html body .cerca__riga input { touch-action: manipulation; }

/* telefono: logo in testata piu grande, cosi "Onoranze funebri" si legge */
@media (max-width: 1000px) { html body .intestazione .marchio img, html body .intestazione img[src*="logo-berna"] { height: 46px; width: auto; } }

/* telefono: dietro al lumino niente raggi e riflessi (restano fiamma, alone morbido e scintille) */
@media (max-width: 1000px) { html body .lumino__raggi { display: none; } }

/* pacchetti: ogni carta alta quanto il suo contenuto, niente buchi in mezzo */
html body .griglia-tariffe { align-items: start; }

/* contatore del cassetto: numero centrato per bene fra - e + */
html body .contatore--cassetto { display: inline-flex; align-items: center; justify-content: center; }
html body .contatore--cassetto > span { display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding: 0; transform: translateY(-0.5px); }
html body .contatore--cassetto button { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }

/* pastiglia rate: pallino, testo e "come funziona" ben distanziati e centrati */
html body .rate { display: inline-flex; align-items: center; gap: 8px; line-height: 1.2; }
html body .rate__sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; flex: none; }
html body .rate__come { text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
/* tabella del prodotto: i nostri divisori (riga oro sfumata col rombetto) fra le voci */
html body .tabella-specifiche th, html body .tabella-specifiche td { border-bottom: 0 !important; position: relative; }
html body .tabella-specifiche tr:not(:last-child) th { background: linear-gradient(90deg, rgba(217,176,113,0.55), rgba(217,176,113,0.45)) bottom left / 100% 1px no-repeat; }
html body .tabella-specifiche tr:not(:last-child) td { background: linear-gradient(90deg, rgba(217,176,113,0.45), transparent 85%) bottom left / 100% 1px no-repeat; }
html body .tabella-specifiche tr:not(:last-child) th::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 6px; height: 6px; background: var(--oro-chiaro); transform: rotate(45deg); }

/* prodotto: rate a destra del prezzo, disponibilita piccola sotto al tasto */
html body .scheda-prodotto .prezzo { display: inline-flex; align-items: baseline; margin-right: 14px; }
html body .scheda-prodotto .rate { display: inline-flex; vertical-align: middle; margin: 0 0 14px; }
html body .scorta--piccola { margin-top: 14px; padding: 8px 12px; font-size: 12.5px; opacity: 0.85; }
html body .scorta--piccola::after { display: none; }

/* tendine: misura fissa (niente salti fra un menu e l altro), piu grandi, divisori oro fra le colonne, apertura morbida */
@media (min-width: 1001px) {
  html body .navigazione .voce .tendina, html body .navigazione .voce:first-child .tendina, html body .navigazione .voce:not(:first-child) .tendina { width: 820px; max-width: min(820px, 94vw); }
  html body .navigazione .voce .tendina.tendina--stretta { width: 560px; max-width: min(560px, 94vw); }
  html body .tendina__interno { padding: 36px 42px; gap: 0; display: flex; }
  html body .tendina__colonna { flex: 1 1 0; padding: 0 32px; }
  html body .tendina__colonna:first-child { padding-left: 0; }
  html body .tendina__colonna:last-child { padding-right: 0; }
  html body .tendina__colonna + .tendina__colonna { border-left: 1px solid; border-image: linear-gradient(180deg, transparent, rgba(217, 176, 113, 0.55) 30%, rgba(217, 176, 113, 0.55) 70%, transparent) 1; }
  html body .tendina__colonna a b { font-size: 16.5px; }
  html body .tendina__titolo { font-size: 11.5px; margin-bottom: 16px; }
  html body .navigazione .voce .tendina { transition: opacity 0.3s ease, transform 0.38s cubic-bezier(.22,.61,.36,1), visibility 0.3s; transform: translateX(-50%) translateY(-14px); }
  html body .voce:hover .tendina, html body .voce:focus-within .tendina, html body .voce.aperta .tendina { transform: translateX(-50%) translateY(0); }
}

/* eroe: il blocco Intervento allineato in alto come Sede e Preventivo */
html body .eroe__garanzie { align-items: start; }
html body .eroe__garanzie .garanzia:nth-child(1) { margin-top: 5px; }

/* voci dei pacchetti: si capisce che si cliccano (tratteggio, mano, hover oro) */
html body .carta-tariffa .elenco-segni li { cursor: pointer; text-decoration: underline dotted rgba(217, 176, 113, 0.5); text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color 0.2s ease, text-decoration-color 0.2s ease; border-radius: 8px; }
html body .carta-tariffa .elenco-segni li:hover { color: var(--oro-chiaro); text-decoration-color: var(--oro-chiaro); }
html body .carta-tariffa .elenco-segni li:hover svg, html body .carta-tariffa .elenco-segni li:hover .icona-voce { color: var(--oro-chiaro); }

/* divisore dopo l eroe: stesso stacco sopra e sotto */
html body .eroe--foto + .contenitore > .divisore { margin-top: 44px; margin-bottom: 44px; }

/* fiamma: niente filtri SVG sugli strati animati (laggavano), solo trasformazioni composte */
html body .lumino__fiamma > * { will-change: transform; }
html body .lumino svg { will-change: auto; }

html body .eroe__garanzie .garanzia:nth-child(1) { margin-top: 10px; }

html body .eroe__garanzie .garanzia:nth-child(1) { margin-top: 0; }

/* whatsapp in testata: logo ufficiale, bianco */
html body .whatsapp-testata { color: #fff; }
html body .whatsapp-testata svg { width: 20px; height: 20px; }
html body .whatsapp-testata:hover { color: #fff; border-color: rgba(255,255,255,0.55); }

/* pallino del carrello: numero centrato nel cerchio */
html body .carrello-scorciatoia__conteggio { display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding: 0; font-feature-settings: 'tnum'; }
/* la tendina non resta aperta col focus del clic (solo hover e tastiera vera) */
html body .navigazione .voce:focus-within:not(:hover) .tendina { opacity: 0; visibility: hidden; pointer-events: none; }

/* ...ma con la tastiera (Tab) la tendina resta usabile: il clic ormai toglie il focus da solo */
html body .navigazione .voce.voce:focus-within .tendina { opacity: 1; visibility: visible; pointer-events: auto; }

/* niente divisore doppio: se la domanda viene subito dopo un titolo, la riga non serve */
html body .prosa h2 + h3::before, html body .prosa h2 + h3::after { content: none; display: none; }
html body .prosa h2 + h3 { margin-top: 18px; }

/* niente divisore nemmeno se fra titolo e domanda c e qualcosa in mezzo */
html body .prosa h2 + * + h3::before, html body .prosa h2 + * + h3::after { content: none; display: none; }
/* home: cosa non facciamo pagare, sotto i pacchetti */
html body .non-paghi { max-width: 760px; margin: 36px auto 0; text-align: center; }
html body .non-paghi h3 { font-family: var(--display); font-weight: 400; font-size: 24px; color: #E4EAE7; margin-bottom: 10px; }
html body .non-paghi p { color: var(--fumo, #8FA09B); font-size: 15.5px; line-height: 1.6; }

html body .prosa h3.senza-divisore::before, html body .prosa h3.senza-divisore::after { content: none; display: none; }
html body .prosa h3.senza-divisore { margin-top: 18px; }

html body .eroe__garanzie .garanzia:nth-child(1) { margin-top: 12px; }

/* tasto Chiamaci subito: acquamarina pieno come gli altri tasti principali */
html body .eroe__azioni .bottone--oro, html body .eroe__azioni .bottone--oro:hover {
  background: #26AEB8; color: #06282C; border-color: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 8px 22px -12px rgba(0, 0, 0, 0.6); filter: none;
}
html body .eroe__azioni .bottone--oro:hover { filter: brightness(1.08); }

/* icone delle garanzie: segno bianco dentro un cerchietto col bordo oro */
html body .garanzia > svg, html body .garanzia > .icona { width: 36px; height: 36px; padding: 7px; border: 1px solid var(--oro); border-radius: 50%; color: #fff; flex: none; box-sizing: border-box; }
html body .garanzia .icona__tratto { stroke: #fff; }
html body .garanzia .icona__massa { fill: transparent; }

/* didascalia del lumino: la seconda riga color logo, come il "noi" */
html body .lumino__didascalia b { color: #8FD3D9; }

/* menu in testata: voci piu grandi */
@media (min-width: 1001px) {
  html body .navigazione .voce__testa, html body .navigazione .voce__solo { font-size: 17px; }
  html body .navigazione { gap: 30px; }
}

/* hover dei tasti: niente contorno, solo un filo piu acceso e piu grande */
html body .bottone { transition: filter 0.18s ease, transform 0.18s ease, background 0.18s ease, border-color 0.18s ease; }
html body .bottone:hover, html body :root .bottone:hover, html body .bottone--oro:hover, html body .bottone--primario:hover, html body .bottone--contorno:hover, html body .bottone--chiaro:hover, html body .bottone--bronzo:hover, html body .eroe__azioni .bottone--oro:hover {
  outline: none !important; filter: brightness(1.1); transform: scale(1.025) !important;
}
html body .bottone:active { transform: scale(0.99) !important; filter: brightness(0.98); }
html body .cambia-tema:hover { outline: none; }

/* testata: WhatsApp, Carrello e Cerca alti quanto il riquadro del numero */
@media (min-width: 1001px) {
  html body .whatsapp-testata, html body .carrello-scorciatoia, html body .apri-cerca { align-self: stretch; height: auto; min-height: 0; box-sizing: border-box; display: inline-flex; align-items: center; }
}

/* icone garanzie: tratti nitidi (non pixelati) */
html body .garanzia > svg, html body .garanzia > .icona { shape-rendering: geometricPrecision; }
html body .garanzia .icona__tratto { stroke-width: 1.7; vector-effect: non-scaling-stroke; }
/* Chiamaci subito: acquamarina del logo */
html body .eroe__azioni .bottone--oro, html body .eroe__azioni .bottone--oro:hover {
  background: linear-gradient(100deg, #5FC7CF, #8FD3D9 60%, #6FCBD3); color: #06282C; border-color: rgba(233, 251, 252, 0.35);
}

/* tabelle prezzi: intestazioni piu grandi, col rombo davanti, colonna prezzo allineata a destra */
html body .tavola thead th { font-size: 13.5px; letter-spacing: 0.1em; color: var(--oro-chiaro); }
html body .tavola thead th::before { content: '◆ '; font-size: 9px; margin-right: 6px; color: var(--oro); vertical-align: 1px; }
html body .tavola thead th:last-child, html body .tavola td.numerico, html body .tavola th.numerico { text-align: right; }

/* parco auto: meno vuoto fra la testata e le foto */
html body .testata-pagina--foto + main .sezione:first-child, html body main#principale.sezione { padding-top: 34px; }

/* parco auto: le foto partono subito sotto la testata */
html body .sezione--stretta { padding-top: 28px !important; }

/* tendine: piu aria, colonne staccate dal bordo, divisori visibili */
@media (min-width: 1001px) {
  html body .tendina__interno { padding: 38px 48px; }
  html body .tendina__colonna { padding: 0 36px; border: 0; position: relative; }
  html body .tendina__colonna:first-child { padding-left: 6px; }
  html body .tendina__colonna:last-child { padding-right: 6px; }
  html body .tendina__colonna + .tendina__colonna::before { content: ''; position: absolute; left: 0; top: 8%; bottom: 8%; width: 1px; background: linear-gradient(180deg, transparent, rgba(217, 176, 113, 0.5) 30%, rgba(217, 176, 113, 0.5) 70%, transparent); }
  html body .tendina__colonna a { padding: 7px 0; }
}
/* parco auto: box in stile logo (acquamarina) */
html body .mezzo { border: 1px solid rgba(143, 211, 217, 0.30); border-radius: var(--raggio-g, 14px); overflow: hidden; transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; }
html body .mezzo:hover { border-color: rgba(143, 211, 217, 0.75); transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.7); }
html body .mezzo__tipo { color: #8FD3D9; letter-spacing: 0.12em; }
html body .mezzo__corpo { border-top: 2px solid rgba(143, 211, 217, 0.45); }
html body .mezzo__viste a, html body .mezzo__dett a { color: #8FD3D9; }

/* garanzie: icone come i tasti della testata (riquadro arrotondato, segno bianco) */
html body .garanzia > svg, html body .garanzia > .icona { border-radius: 12px; border: 1px solid rgba(159, 178, 172, 0.35); color: #fff; background: rgba(255, 255, 255, 0.03); }
/* whatsapp in testata: icona + scritta */
html body .whatsapp-testata { gap: 8px; display: inline-flex; align-items: center; }
html body .whatsapp-testata .etichetta-tasto { display: inline; font-size: 14px; font-weight: 600; }

html body .whatsapp-testata { width: auto; min-width: 0; padding: 0 16px; }

/* prodotto: IVA sotto il prezzo; stessi stacchi sopra e sotto per titolo, disponibilita e note */
html body .iva-nota { display: block; font-size: 12.5px; color: var(--fumo, #8FA09B); margin: 6px 0 0; }
html body .scheda-prodotto .prezzo { margin-right: 14px; margin-bottom: 0; }
html body .scheda-prodotto .rate { margin: 0; }
html body .scheda-prodotto h1 { margin-top: 14px; margin-bottom: 14px; }
html body .scheda-prodotto .iva-nota + .rate, html body .scheda-prodotto .rate + p { margin-top: 16px; }
html body .scorta--piccola { margin-top: 16px; margin-bottom: 0; }
html body .scorta--piccola + .brindello, html body .scheda-prodotto .brindello[style] { margin-top: 16px !important; }

/* fiammella delle rate: dritta, simmetrica, guizza solo in altezza */
html body .rate__fuoco {
  width: 10px; height: 14px; margin-right: 4px; vertical-align: -2px;
  border-radius: 50% 50% 46% 46% / 68% 68% 32% 32%;
  background: radial-gradient(70% 60% at 50% 70%, #FFF4D6 0%, #F3D083 40%, var(--oro) 75%, rgba(167, 126, 68, 0) 100%);
  transform: none; animation: fiammellaDritta 1.6s ease-in-out infinite;
}
@keyframes fiammellaDritta {
  0%, 100% { transform: scale(1, 1); opacity: 1; }
  35% { transform: scale(0.96, 1.08); opacity: 0.92; }
  70% { transform: scale(1.02, 0.96); opacity: 1; }
}

/* prodotto: IVA inclusa in riga dopo la pastiglia; stacchi uniformi in tutta la scheda */
html body .scheda-prodotto .iva-nota { display: inline-flex; align-items: center; margin: 0 0 0 12px; vertical-align: middle; }
html body .scheda-prodotto .prezzo, html body .scheda-prodotto .rate { vertical-align: middle; }
html body .scheda-prodotto .iva-nota + p, html body .scheda-prodotto .rate + p:not(.iva-nota) { margin-top: 16px; }
html body .scheda-prodotto .tabella-specifiche { margin: 20px 0; }
html body .scheda-prodotto .tabella-specifiche + div[style], html body .scheda-prodotto .scelta-colore { margin-top: 20px; }
html body .scheda-prodotto .occhiello { margin-bottom: 14px; }

/* cerca del negozio: a pillola come il cerca del sito, coi petali dentro */
html body .cerca-catalogo {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px;
  max-width: 900px; margin: 0 auto; padding: 16px 24px;
  border: 1px solid rgba(143, 211, 217, 0.55); border-radius: 999px;
  background: rgba(6, 20, 24, 0.55); box-shadow: 0 0 0 1px rgba(143, 211, 217, 0.10), 0 10px 30px -18px rgba(0, 0, 0, 0.8);
}
html body .cerca-catalogo:focus-within { border-color: #8FD3D9; }
html body .cerca-catalogo__lente { color: var(--oro); width: 20px; height: 20px; flex: none; position: relative; z-index: 2; }
html body .cerca-catalogo input { flex: 1; border: 0; background: transparent; font-size: 17px; color: var(--inchiostro, #E4EAE7); position: relative; z-index: 2; outline: none; }
html body .cerca-catalogo__pulisci { position: relative; z-index: 2; }
html body .cerca-catalogo > .petali { position: absolute; inset: 0; z-index: 0; }

/* testata: logo a sinistra, menu centrato con passi uguali, tasti a destra */
@media (min-width: 1001px) {
  html body .intestazione .contenitore { display: flex; align-items: center; gap: 18px; max-width: 1640px; }
  html body .navigazione { margin-left: auto; margin-right: auto; gap: 34px; flex: none; }
  html body .voce__testa, html body .voce__solo { padding-left: 0; padding-right: 0; }
}

/* cerca del negozio: piu compatto */
html body .cerca-catalogo { max-width: 560px; margin: 0 0 18px; padding: 10px 18px; }
html body .cerca-catalogo input { font-size: 15px; }
html body .cerca-catalogo__lente { width: 17px; height: 17px; }

html body .cerca-catalogo input { font-size: 17px; }
html body .cerca-catalogo input::placeholder { font-size: 17px; }

/* cerca del negozio: piu lungo, icona piu grande, tutto ben proporzionato */
html body .cerca-catalogo { max-width: 720px; padding: 12px 20px; gap: 12px; }
html body .cerca-catalogo__lente { width: 20px; height: 20px; }
html body .cerca-catalogo input { font-size: 17px; line-height: 1.3; }
html body .cerca-catalogo__pulisci { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; }

/* cerca del negozio: piu sottile e piu lungo */
html body .cerca-catalogo { max-width: 900px; padding: 7px 18px; }
html body .cerca-catalogo__pulisci { width: 26px; height: 26px; }

/* negozio: sotto i filtri il filo oro sfumato, con gli stessi stacchi sopra e sotto */
html body .filtri-negozio { border-bottom: 0 !important; padding-bottom: 22px; margin-bottom: 22px; position: relative; }
html body .filtri-negozio::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(217, 176, 113, 0.6) 30%, rgba(217, 176, 113, 0.6) 70%, transparent); }
html body .cerca-catalogo { margin-bottom: 22px; }

/* cerca del negozio: a tutta larghezza, come la riga dei filtri */
html body .cerca-catalogo { max-width: none; }

/* tendine: hover morbido - niente barretta ne spostamento, solo velo e testo oro */
html body .tendina__colonna a, html body .tendina__colonna a:hover { border-left: 0 !important; transform: none !important; }
html body .tendina__colonna a { border-radius: 10px; padding: 7px 10px !important; margin-left: -10px; transition: background-color 0.18s ease, color 0.18s ease; }
html body .tendina__colonna a:hover { background: rgba(217, 176, 113, 0.08); padding: 7px 10px !important; }
html body .tendina__colonna a:hover b { color: var(--oro-chiaro); }

/* Chiamaci subito: torna oro pieno; icone delle garanzie in oro */
html body .eroe__azioni .bottone--oro, html body .eroe__azioni .bottone--oro:hover {
  background: linear-gradient(100deg, var(--oro), var(--oro-chiaro) 55%, var(--oro)); color: #23180A; border-color: rgba(255, 240, 205, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.45), 0 8px 22px -12px rgba(0, 0, 0, 0.6);
}
html body .garanzia > svg, html body .garanzia > .icona { color: var(--oro-chiaro); }
html body .garanzia .icona__tratto { stroke: var(--oro-chiaro); }
/* fascia-invito: il tasto largo stile "Vai al negozio" */
html body .fascia-invito {
  display: flex; align-items: baseline; gap: 14px; justify-content: center;
  max-width: 640px; margin: 0 auto; padding: 18px 28px;
  background: var(--carta, #0D2430); border: 1px solid rgba(217, 176, 113, 0.35); border-radius: var(--raggio-g, 14px);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
html body .fascia-invito b { font-size: 17px; color: #F1F4F3; white-space: nowrap; }
html body .fascia-invito span { font-size: 14px; color: var(--fumo, #8FA09B); }
html body .fascia-invito:hover { border-color: var(--oro); transform: translateY(-2px); }
/* recensioni: solo voto e stelle grandi */
html body .google-voto__stelle .stelle { font-size: 34px; letter-spacing: 4px; }
/* tabelle: intestazione allineata al testo delle celle, rombo fuori dal filo */
html body .tavola thead th { position: relative; }
html body .tavola thead th::before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); margin: 0; }
html body .tavola thead th { padding-left: 18px; }
/* "a preventivo" piu fine */
html body .tavola td:last-child { font-size: 15px; }

html body .tavola td.numerico { font-size: 15px; letter-spacing: 0; }

/* tendine e titoli di pagina: icone oro coerenti per argomento */
html body .tendina__colonna a { display: flex; align-items: flex-start; gap: 10px; }
html body .tendina__colonna a::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; background: center / contain no-repeat; opacity: 0.9; }
html body .tendina__colonna a[href="/organizzazione-del-funerale"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23D9B071%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%203h8l3%206-2%2012H7L5%209z%22%2F%3E%3Cpath%20d%3D%22M5%209h14%22%2F%3E%3C%2Fsvg%3E"); }
html body .tendina__colonna a[href="/preparazione-della-salma"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23D9B071%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%203h8l3%206-2%2012H7L5%209z%22%2F%3E%3Cpath%20d%3D%22M5%209h14%22%2F%3E%3C%2Fsvg%3E"); }
html body .tendina__colonna a[href="/cofani-funebri"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23D9B071%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%203h8l3%206-2%2012H7L5%209z%22%2F%3E%3Cpath%20d%3D%22M5%209h14%22%2F%3E%3C%2Fsvg%3E"); }
html body .tendina__colonna a[href="/cerimonie-di-rappresentanza"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23D9B071%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%203h8l3%206-2%2012H7L5%209z%22%2F%3E%3Cpath%20d%3D%22M5%209h14%22%2F%3E%3C%2Fsvg%3E"); }
html body .tendina__colonna a[href="/servizi-completi"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23D9B071%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%203h8l3%206-2%2012H7L5%209z%22%2F%3E%3Cpath%20d%3D%22M5%209h14%22%2F%3E%3C%2Fsvg%3E"); }
html body .tendina__colonna a[href="/servizi"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23D9B071%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%203h8l3%206-2%2012H7L5%209z%22%2F%3E%3Cpath%20d%3D%22M5%209h14%22%2F%3E%3C%2Fsvg%3E"); }
html body .tendina__colonna a[href="/camere-ardenti"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23D9B071%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2011%2012%204l8%207%22%2F%3E%3Cpath%20d%3D%22M6%2010v10h12V10%22%2F%3E%3Cpath%20d%3D%22M10%2020v-5h4v5%22%2F%3E%3C%2Fsvg%3E"); }
html body .tendina__colonna a[href="/decesso-in-casa"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23D9B071%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2011%2012%204l8%207%22%2F%3E%3Cpath%20d%3D%22M6%2010v10h12V10%22%2F%3E%3Cpath%20d%3D%22M10%2020v-5h4v5%22%2F%3E%3C%2Fsvg%3E"); }
html body .tendina__colonna a[href="/decesso-in-ospedale"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23D9B071%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2011%2012%204l8%207%22%2F%3E%3Cpath%20d%3D%22M6%2010v10h12V10%22%2F%3E%3Cpath%20d%3D%22M10%2020v-5h4v5%22%2F%3E%3C%2Fsvg%3E"); }
html body .tendina__colonna a[href="/trasporti-funebri"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23D9B071%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2016v-3l2-5h10l4%205h2v3h-2%22%2F%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%2217%22%20r%3D%221.8%22%2F%3E%3Ccircle%20cx%3D%2216.5%22%20cy%3D%2217%22%20r%3D%221.8%22%2F%3E%3Cpath%20d%3D%22M9.3%2017h5.4%22%2F%3E%3C%2Fsvg%3E"); }
html body .tendina__colonna a[href="/parco-auto"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23D9B071%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2016v-3l2-5h10l4%205h2v3h-2%22%2F%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%2217%22%20r%3D%221.8%22%2F%3E%3Ccircle%20cx%3D%2216.5%22%20cy%3D%2217%22%20r%3D%221.8%22%2F%3E%3Cpath%20d%3D%22M9.3%2017h5.4%22%2F%3E%3C%2Fsvg%3E"); }
html body .tendina__colonna a[href="/cremazione-pet"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23D9B071%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203c3%204%206%207%206%2011a6%206%200%200%201-12%200c0-4%203-7%206-11z%22%2F%3E%3Cpath%20d%3D%22M12%2012c1.2%201.6%202%202.8%202%204a2%202%200%200%201-4%200c0-1.2.8-2.4%202-4z%22%2F%3E%3C%2Fsvg%3E"); }
html body .tendina__colonna a[href="/cremazione"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23D9B071%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203c3%204%206%207%206%2011a6%206%200%200%201-12%200c0-4%203-7%206-11z%22%2F%3E%3Cpath%20d%3D%22M12%2012c1.2%201.6%202%202.8%202%204a2%202%200%200%201-4%200c0-1.2.8-2.4%202-4z%22%2F%3E%3C%2Fsvg%3E"); }
html body .tendina__colonna a[href="/dispersione-ceneri-in-mare"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23D9B071%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203c3%204%206%207%206%2011a6%206%200%200%201-12%200c0-4%203-7%206-11z%22%2F%3E%3Cpath%20d%3D%22M12%2012c1.2%201.6%202%202.8%202%204a2%202%200%200%201-4%200c0-1.2.8-2.4%202-4z%22%2F%3E%3C%2Fsvg%3E"); }
html body .tendina__colonna a[href="/urne-cinerarie"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23D9B071%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203c3%204%206%207%206%2011a6%206%200%200%201-12%200c0-4%203-7%206-11z%22%2F%3E%3Cpath%20d%3D%22M12%2012c1.2%201.6%202%202.8%202%204a2%202%200%200%201-4%200c0-1.2.8-2.4%202-4z%22%2F%3E%3C%2Fsvg%3E"); }
html body .tendina__colonna a[href="/sepoltura"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23D9B071%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2021V9a5%205%200%200%201%2010%200v12%22%2F%3E%3Cpath%20d%3D%22M4%2021h16%22%2F%3E%3Cpath%20d%3D%22M12%209v6M10%2011h4%22%2F%3E%3C%2Fsvg%3E"); }
html body .tendina__colonna a[href="/inumazione"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23D9B071%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2021V9a5%205%200%200%201%2010%200v12%22%2F%3E%3Cpath%20d%3D%22M4%2021h16%22%2F%3E%3Cpath%20d%3D%22M12%209v6M10%2011h4%22%2F%3E%3C%2Fsvg%3E"); }
html body .tendina__colonna a[href="/acquisto-loculi"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23D9B071%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2021V9a5%205%200%200%201%2010%200v12%22%2F%3E%3Cpath%20d%3D%22M4%2021h16%22%2F%3E%3Cpath%20d%3D%22M12%209v6M10%2011h4%22%2F%3E%3C%2Fsvg%3E"); }
html body .tendina__colonna a[href="/rinnovo-loculi"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23D9B071%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2021V9a5%205%200%200%201%2010%200v12%22%2F%3E%3Cpath%20d%3D%22M4%2021h16%22%2F%3E%3Cpath%20d%3D%22M12%209v6M10%2011h4%22%2F%3E%3C%2Fsvg%3E"); }
html body .tendina__colonna a[href="/lapidi-cimiteriali"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23D9B071%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2021V9a5%205%200%200%201%2010%200v12%22%2F%3E%3Cpath%20d%3D%22M4%2021h16%22%2F%3E%3Cpath%20d%3D%22M12%209v6M10%2011h4%22%2F%3E%3C%2Fsvg%3E"); }
html body .tendina__colonna a[href="/info-cimiteri"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23D9B071%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2021V9a5%205%200%200%201%2010%200v12%22%2F%3E%3Cpath%20d%3D%22M4%2021h16%22%2F%3E%3Cpath%20d%3D%22M12%209v6M10%2011h4%22%2F%3E%3C%2Fsvg%3E"); }
html body .tendina__colonna a[href="/addobbi-floreali"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23D9B071%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.4%22%2F%3E%3Cpath%20d%3D%22M12%203.5v3M12%2013.5v7M6.8%207l2.2%201.6M17.2%207%2015%208.6M6.8%2013l2.2-1.6M17.2%2013%2015%2011.4%22%2F%3E%3C%2Fsvg%3E"); }
html body .tendina__colonna a[href="/foto-ricordi"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23D9B071%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.4%22%2F%3E%3Cpath%20d%3D%22M12%203.5v3M12%2013.5v7M6.8%207l2.2%201.6M17.2%207%2015%208.6M6.8%2013l2.2-1.6M17.2%2013%2015%2011.4%22%2F%3E%3C%2Fsvg%3E"); }
html body .tendina__colonna a[href="/articoli-funerari"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23D9B071%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.4%22%2F%3E%3Cpath%20d%3D%22M12%203.5v3M12%2013.5v7M6.8%207l2.2%201.6M17.2%207%2015%208.6M6.8%2013l2.2-1.6M17.2%2013%2015%2011.4%22%2F%3E%3C%2Fsvg%3E"); }
html body .tendina__colonna a[href="/manifesti-funebri"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23D9B071%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205a3%203%200%200%201%203-3h13v18H7a3%203%200%200%200-3%203z%22%2F%3E%3Cpath%20d%3D%22M20%2016H7a3%203%200%200%200-3%203%22%2F%3E%3Cpath%20d%3D%22M9%207h7M9%2011h5%22%2F%3E%3C%2Fsvg%3E"); }
html body .tendina__colonna a[href="/cosa-fare"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23D9B071%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205a3%203%200%200%201%203-3h13v18H7a3%203%200%200%200-3%203z%22%2F%3E%3Cpath%20d%3D%22M20%2016H7a3%203%200%200%200-3%203%22%2F%3E%3Cpath%20d%3D%22M9%207h7M9%2011h5%22%2F%3E%3C%2Fsvg%3E"); }
html body .tendina__colonna a[href="/domande-frequenti"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23D9B071%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205a3%203%200%200%201%203-3h13v18H7a3%203%200%200%200-3%203z%22%2F%3E%3Cpath%20d%3D%22M20%2016H7a3%203%200%200%200-3%203%22%2F%3E%3Cpath%20d%3D%22M9%207h7M9%2011h5%22%2F%3E%3C%2Fsvg%3E"); }
html body .tendina__colonna a[href="/in-caso-di-lutto"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23D9B071%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205a3%203%200%200%201%203-3h13v18H7a3%203%200%200%200-3%203z%22%2F%3E%3Cpath%20d%3D%22M20%2016H7a3%203%200%200%200-3%203%22%2F%3E%3Cpath%20d%3D%22M9%207h7M9%2011h5%22%2F%3E%3C%2Fsvg%3E"); }
html body .tendina__colonna a[href="/negozio"]::before { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23D9B071%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.4%22%2F%3E%3Cpath%20d%3D%22M12%203.5v3M12%2013.5v7M6.8%207l2.2%201.6M17.2%207%2015%208.6M6.8%2013l2.2-1.6M17.2%2013%2015%2011.4%22%2F%3E%3C%2Fsvg%3E"); }
html body .testata-pagina h1 .icona-titolo { display: inline-block; width: 30px; height: 30px; margin-right: 12px; vertical-align: -3px; background: center / contain no-repeat; }

/* voci dei pacchetti: in hover l icona resta com e (si accende solo il testo) */
html body .carta-tariffa .elenco-segni li:hover svg, html body .carta-tariffa .elenco-segni li:hover .icona-voce { color: inherit !important; }
html body .carta-tariffa .elenco-segni li:hover svg * { fill: none; }

/* voci pacchetti: hover discreto sull icona (niente cerchio oro pieno) */
html body .carta-tariffa .elenco-segni li:hover .voce-spiegata__icona { background: rgba(217, 176, 113, 0.15) !important; color: var(--oro-chiaro) !important; }
/* cosa non facciamo pagare: stesso respiro sopra e sotto */
html body .non-paghi { margin-top: 52px; margin-bottom: 26px; }

/* garanzie: icone nude, senza cerchietto ne fondo */
html body .garanzia > svg, html body .garanzia > .icona { border: 0; background: transparent; padding: 0; width: 26px; height: 26px; border-radius: 0; }

/* tendine: titolo sopra e descrizione sotto (l icona resta a sinistra), colonne centrate */
html body .tendina__colonna a { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; align-items: start; }
html body .tendina__colonna a::before { grid-column: 1; grid-row: 1 / span 2; margin-top: 0; align-self: center; }
html body .tendina__colonna a b, html body .tendina__colonna a span { grid-column: 2; white-space: normal; }
html body .tendina__colonna a span { margin-top: 2px; }
html body .tendina .tendina__interno, html body .tendina--stretta .tendina__interno { display: flex; justify-content: center; }
html body .tendina__colonna { flex: 0 1 auto; }

/* hover unico in tutto il sito: il tasto cresce appena, senza cambiare colore */
html body .numero-testata, html body .whatsapp-testata, html body .carrello-scorciatoia, html body .apri-cerca,
html body .bottone, html body .fascia-invito, html body .tendina__piede {
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, color 0.22s ease;
}
html body .numero-testata:hover, html body .whatsapp-testata:hover, html body .carrello-scorciatoia:hover, html body .apri-cerca:hover,
html body .bottone:hover {
  transform: scale(1.045) !important;
}
/* i tasti a tutta larghezza non crescono (sborderebbero dal riquadro): si accendono e basta */
html body .fascia-invito:hover, html body .tendina__piede:hover { transform: none !important; border-color: var(--oro); background: radial-gradient(120% 220% at 50% 0%, rgba(217, 176, 113, 0.2), transparent 60%), var(--carta); }
html body .numero-testata:hover { outline: 0; border-color: var(--oro-filo); background: linear-gradient(180deg, rgba(217,176,113,0.08), transparent); color: inherit; }
html body .whatsapp-testata:hover { border-color: var(--bordo); background: transparent; color: #fff; }
html body .carrello-scorciatoia:hover, html body .apri-cerca:hover { border-color: var(--bordo); background: transparent; color: inherit; }
html body .tendina__piede:hover b { transform: none; }

/* Chiamaci subito: niente oro pieno - pillola scura bordata d oro con la fiamma che le respira intorno */
html body .eroe__azioni .bottone--oro, html body .eroe__azioni .bottone--oro:hover,
html body .bottone--oro[href^="tel:"], html body .bottone--oro[href^="tel:"]:hover {
  background: linear-gradient(180deg, #22312B 0%, #131D19 100%);
  color: var(--oro-chiaro);
  border: 1px solid rgba(217, 176, 113, 0.6);
  border-radius: 999px;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.12);
}
html body .eroe__azioni .bottone--oro::before, html body .bottone--oro[href^="tel:"]::before {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 999px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(65% 95% at 50% 55%, rgba(255, 190, 90, 0.60), rgba(243, 208, 131, 0.28) 55%, transparent 80%);
  filter: blur(8px);
  animation: fiammaAttorno 2.6s ease-in-out infinite;
}
@keyframes fiammaAttorno {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  22% { opacity: 1; transform: scale(1.06) translateY(-1px); }
  55% { opacity: 0.6; transform: scale(0.97); }
  78% { opacity: 0.95; transform: scale(1.03) translateY(1px); }
}
@media (prefers-reduced-motion: reduce) {
  html body .eroe__azioni .bottone--oro::before, html body .bottone--oro[href^="tel:"]::before { animation: fiammaAttorno 2.6s ease-in-out infinite; }
}

/* Vai al negozio e Tutte le recensioni: invito in serif oro col rombo, velo caldo e sbrilluccichio */
html body .tendina__piede, html body .fascia-invito {
  position: relative;
  overflow: hidden;
  justify-content: center;
  border: 1px solid rgba(217, 176, 113, 0.45);
  background: radial-gradient(120% 220% at 50% 0%, rgba(217, 176, 113, 0.13), transparent 60%), var(--carta);
}
html body .tendina__piede b, html body .fascia-invito b {
  font-family: var(--display);
  font-weight: 400;
  font-size: 19px;
  color: var(--oro-chiaro);
  white-space: nowrap;
}
html body .tendina__piede b::before, html body .fascia-invito b::before {
  content: '\25C6';
  font-size: 9px;
  color: var(--oro);
  margin-right: 10px;
  vertical-align: 3px;
}
html body .fascia-invito::before { content: none; }

/* prezzi in stile "noi": fioriti come la parola del titolo */
html body .carta-tariffa__prezzo, html body .scheda-prodotto .prezzo {
  background-image: linear-gradient(rgba(178, 238, 244, 0.42), rgba(178, 238, 244, 0.42)), url(/img/fiori.png);
  background-size: cover, cover;
  background-position: center 38%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Aggiungi al carrello (e i primari) in stile logo: acquamarina sfumata, senza contorno */
html body .bottone--primario, html body .bottone--primario:hover {
  background: linear-gradient(180deg, #7FDCE3 0%, #2AB3BD 45%, #148E97 100%);
  color: #06282D;
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 20px -12px rgba(0, 0, 0, 0.6);
}

/* scheda prodotto: prezzo, rate e IVA inclusa centrati sulla stessa riga */
html body .scheda-prodotto .iva-nota { display: inline-flex; align-items: center; vertical-align: middle; margin: 0 0 14px 12px; }
html body .rate__fuoco {
  width: 10px; height: 10px;
  align-self: center;
  vertical-align: middle;
  margin: 0 4px 0 0;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF4D6 0%, #F3D083 45%, var(--oro) 100%);
  filter: none;
  animation: pallinoPulsa 1.8s ease-out infinite;
}
@keyframes pallinoPulsa {
  0% { box-shadow: 0 0 0 0 rgba(243, 208, 131, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(243, 208, 131, 0); }
  100% { box-shadow: 0 0 0 0 rgba(243, 208, 131, 0); }
}
@media (prefers-reduced-motion: reduce) { html body .rate__fuoco { animation: pallinoPulsa 1.8s ease-out infinite; } }

/* specifiche: divisori sottili e discreti, senza rombo */
html body .tabella-specifiche tr:not(:last-child) th::after { display: none; }
html body .tabella-specifiche tr:not(:last-child) th { background: linear-gradient(90deg, rgba(217, 176, 113, 0.26), rgba(217, 176, 113, 0.16)) bottom left / 100% 1px no-repeat; }
html body .tabella-specifiche tr:not(:last-child) td { background: linear-gradient(90deg, rgba(217, 176, 113, 0.16), transparent) bottom left / 100% 1px no-repeat; }

/* disponibilita: testo bianco, non grigio */
html body .scorta--piccola, html body .scorta--piccola b { color: #FFFFFF; opacity: 1; }

/* iniziali sempre maiuscole su etichette e dettagli (es. "fiori" -> "Fiori") */
html body .carta-prodotto__dettaglio::first-letter,
html body .carta-prodotto__categoria::first-letter,
html body .tabella-specifiche td::first-letter,
html body .cella-articolo .brindello::first-letter,
html body .scheda-prodotto p::first-letter { text-transform: uppercase; }

/* la didascalia del lumino, piu grande e nello stesso font del "noi" */
html body .lumino__didascalia { font-size: 23px; font-family: var(--display); font-style: italic; }

/* tendine: hover pulito, si accende solo il testo, niente riquadro */
html body .tendina__colonna a:hover { background: transparent; }
html body .tendina__colonna a b { transition: color 0.15s ease; }

/* scroll piu fluido: niente sfocatura viva sulla testata, la foto del eroe su un layer suo */
html body .intestazione { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #05161A; z-index: 300; }
html body .eroe__sfondo { will-change: transform; }
html body .eroe__azioni .bottone--oro::before, html body .bottone--oro[href^="tel:"]::before { will-change: transform, opacity; }

/* hover della testata: niente contorno oro, cresce e basta */
html body .numero-testata:hover, html body .whatsapp-testata:hover, html body .carrello-scorciatoia:hover, html body .apri-cerca:hover {
  outline: 0 !important;
  box-shadow: none !important;
}

/* la foto della carta prodotto porta alla sua pagina */
html body a.carta-prodotto__figura { display: block; cursor: pointer; }

/* sotto al Chiedi il preventivo */
html body .carta-tariffa__gratis { display: block; margin: 18px 0 -12px; text-align: center; font-size: 13px; color: var(--fumo); }

/* Vai al negozio e Tutte le recensioni: partono da sinistra, riempiono il box, col divisore dentro */
html body .fascia-invito { max-width: none; width: 100%; justify-content: flex-start; }
html body .fascia-invito::after {
  content: '';
  flex: 1;
  height: 1px;
  margin-left: 20px;
  align-self: center;
  background: linear-gradient(90deg, var(--oro-filo), rgba(217, 176, 113, 0.1) 70%, transparent);
}

/* guide: le voci numerate 1. 2. 3. in stile "noi", senza grassetto */
html body .prosa ul { list-style: none; padding-left: 0; counter-reset: voce-guida; }
html body .prosa ul > li { counter-increment: voce-guida; position: relative; padding-left: 38px; }
html body .prosa ul > li::marker { content: ''; }
html body .prosa ul > li::before {
  content: counter(voce-guida) '.';
  display: block !important;
  position: absolute;
  left: 0;
  top: -2px;
  width: 26px; height: auto;
  text-align: center;
  font-family: var(--display);
  font-size: 21px;
  line-height: 1.3;
  background-image: linear-gradient(rgba(178, 238, 244, 0.42), rgba(178, 238, 244, 0.42)), url(/img/fiori.png);
  background-size: cover, cover;
  background-position: center 38%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  transform: none;
}
html body .prosa li b { font-weight: 400; }

/* "Cosa ci serve da voi": stesso stile numerato del resto del sito, non l elenco del browser */
html body .elenco-numerato { list-style: none; padding-left: 0; margin: 0; counter-reset: voce-doc; display: grid; gap: 12px; }
html body .elenco-numerato > li { counter-increment: voce-doc; position: relative; padding-left: 38px; line-height: 1.5; }
html body .elenco-numerato > li::marker { content: ''; }
html body .elenco-numerato > li::before {
  content: counter(voce-doc) '.';
  display: block !important;
  position: absolute;
  left: 0;
  top: -2px;
  width: 26px; height: auto;
  text-align: center;
  font-family: var(--display);
  font-size: 21px;
  line-height: 1.3;
  background-image: linear-gradient(rgba(178, 238, 244, 0.42), rgba(178, 238, 244, 0.42)), url(/img/fiori.png);
  background-size: cover, cover;
  background-position: center 38%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  transform: none;
}

/* pannello: intestazioni delle tabelle allineate sopra al testo, colonne centrali centrate */
html body #tavola-articoli thead th, html body #tavola-ordini thead th { padding-left: 0; }
html body #tavola-articoli thead th:first-child { padding-left: 62px; }
html body #tavola-articoli thead th::before, html body #tavola-ordini thead th::before { display: none; }

/* pannello, parco auto: i tasti a destra centrati rispetto ai campi */
html body .mezzo-riga { align-items: center; }
html body .mezzo-riga__azioni { align-self: center; justify-content: center; }

/* la lente del cerca del sito in oro, come quella del negozio */
html body .cerca__lente { color: var(--oro); stroke: var(--oro); }

/* negozio: cinque carte per fila sugli schermi larghi */
@media (min-width: 1400px) {
  html body .griglia-prodotti { grid-template-columns: repeat(5, 1fr); }
}

/* colori direttamente sulla carta: quadratini che cambiano la foto */
html body .carta-prodotto__colori { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
html body .colore-carta {
  width: 20px; height: 20px;
  padding: 0;
  border: 1px solid var(--bordo);
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
html body .colore-carta:hover { transform: scale(1.15); }
html body .colore-carta.scelto { border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro); }

/* telefono: le fasce "Vai al negozio" / "Tutte le recensioni" impilate e centrate */
@media (max-width: 760px) {
  html body .fascia-invito { flex-direction: column; align-items: center !important; justify-content: center; text-align: center; gap: 4px; padding: 16px 18px; }
  html body .fascia-invito::after { display: none; }
}

/* telefono: i rombi della timeline si accendono a turno */
@keyframes rombiTurno {
  0%, 25%, 100% { box-shadow: 0 0 0 0 rgba(127, 212, 196, 0); }
  10% { box-shadow: 0 0 0 5px rgba(127, 212, 196, 0.18), 0 0 14px rgba(127, 212, 196, 0.6); }
}

/* il richiamo in fondo pagina tiene il suo respiro sotto (la regola generale glielo toglieva) */
html body main.sezione:has(+ .divisore--piede) > .contenitore > .richiamo:last-child { padding-bottom: 24px !important; }

/* il numero scritto nel testo: fiorito come il "noi", cliccabile */
html body .tel-noi, html body .tel-noi b {
  background-image: linear-gradient(rgba(178, 238, 244, 0.42), rgba(178, 238, 244, 0.42)), url(/img/fiori.png);
  background-size: cover, cover;
  background-position: center 38%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-decoration: underline;
  text-decoration-color: rgba(127, 212, 196, 0.6);
  text-underline-offset: 3px;
}

/* il numero dentro le guide (Giorno zero, Chiamate noi): staccato bene */
html body .prosa-numero { margin: 16px 0 26px; }

/* telefono: file pari, niente elemento orfano - 4 articoli in home e 8 tessere servizi */
@media (max-width: 760px) {
  html body #vetrina > :nth-child(n+5) { display: none; }
  html body .servizi-foto > :nth-child(n+9) { display: none; }
}

/* richiami: piu compatti, testo e tasto centrati in verticale, tasti piu grandi */
html body .richiamo, html body main .richiamo, html body .richiamo[style] { display: flex; align-items: center; justify-content: space-between; gap: 26px; padding: 24px 34px !important; min-height: 0 !important; height: auto !important; max-height: none !important; overflow: visible !important; }
html body .richiamo > div { margin: 0; }
html body .richiamo h2 { font-size: 26px; margin: 0 0 6px; }
html body .richiamo p { margin: 0; }
html body .richiamo__azioni { display: flex; align-items: center; gap: 16px; flex: none; margin: 0; }
html body .richiamo__azioni p, html body .richiamo__azioni .brindello { max-width: 220px; margin: 0; }
html body .richiamo__azioni > a:not(.numero-testata), html body .richiamo__azioni > button {
  padding: 15px 30px;
  font-size: 16.5px;
}
html body .richiamo__azioni .numero-testata--richiamo { padding: 13px 22px; }
html body .richiamo__azioni .numero-testata--richiamo .numero-testata__testo b { font-size: 22px; }

/* cerca: lo scorrimento dei risultati non trascina la pagina dietro */
html body .cerca, html body .cerca__esiti, html body #cerca-esiti { overscroll-behavior: contain; }

/* un solo stile di cerca in tutto il sito: pillola compatta come quella del sito */
html body .cerca-catalogo {
  max-width: none;
  padding: 5px 6px 5px 18px;
  gap: 12px;
  border: 1px solid var(--bordo);
  border-radius: 100px;
  background: var(--carta-2);
  overflow: hidden;
  margin-bottom: 22px;
}
html body .cerca-catalogo:focus-within { border-color: var(--verde); background: var(--carta); }
html body .cerca-catalogo__lente { width: 18px; height: 18px; color: var(--oro); }
html body .cerca-catalogo input { height: 44px; font-size: 16px; }
html body .cerca-catalogo input::placeholder { font-size: 15px; }
html body .cerca-catalogo .petali { display: none; }

/* tendine: i titoli delle colonne centrati, con la linea sotto che sfuma da tutte e due le parti */
html body .tendina__titolo { justify-content: center; text-align: center; }
html body .tendina__titolo::after {
  background: linear-gradient(90deg, transparent, rgba(217, 176, 113, 0.7) 30%, rgba(217, 176, 113, 0.7) 70%, transparent) !important;
}

/* tendine: descrizione attaccata al titolo */
html body .tendina__colonna a b { line-height: 1.15; }
html body .tendina__colonna a span { margin-top: 0; line-height: 1.3; }

/* tendine: le icone ferme al passaggio, centrate sulle due righe */
html body .tendina__colonna a::before, html body .tendina__colonna a:hover::before {
  position: static !important;
  top: auto !important;
  left: auto !important;
  margin-top: 0 !important;
  width: 18px !important;
  height: 18px !important;
  align-self: center;
  transform: none !important;
  opacity: 0.9 !important;
  transition: none !important;
  animation: none !important;
}

/* parco auto: hover leggero, senza spostamenti ne ombre che laggano */
html body .mezzo { transition: border-color 0.25s ease; }
html body .mezzo:hover { border-color: rgba(143, 211, 217, 0.9); transform: none !important; box-shadow: none !important; }

/* telefono: niente banda bianca sotto (fondo dietro la pagina scuro, niente scorrimento orizzontale) */
html { background: var(--pietra); }
html, body { overflow-x: clip; }
@media (max-width: 700px) {
  html body .azioni-intestazione { gap: 5px; }
  html body .apri-cerca, html body .carrello-scorciatoia { width: 40px; min-width: 0; padding: 0; }
  html body .numero-testata { padding: 10px; }
  html body .whatsapp-testata { width: 40px; min-width: 0; padding: 0; justify-content: center; }
  html body .whatsapp-testata .etichetta-tasto { display: none; }
  html body .marchio__segno { width: 132px; height: auto; }
}

/* telefono: piede su una colonna, tutto centrato e in linea */
@media (max-width: 760px) {
  html body .piede .piede__corpo { display: grid !important; grid-template-columns: 1fr !important; gap: 30px !important; text-align: center; justify-items: center; }
  html body .piede .piede__marchio { grid-column: auto; text-align: center; }
  html body .piede .piede__marchio img { margin-inline: auto; }
  html body .piede .piede__marchio p { margin-inline: auto; }
  html body .piede .piede__colonna { align-items: center !important; align-self: auto !important; justify-self: center !important; width: auto; min-width: 220px; margin-inline: auto; }
  html body .piede .piede__colonna h4 { justify-content: center; text-align: center; }
  html body .piede .piede__colonna h4::after { flex: none; width: 40px; }
}

/* sopra al titolo del eroe: via "Roma", al suo posto il negozio cliccabile vestito da occhiello */
html body .eroe__griglia .occhiello { display: none; }
html body .eroe__negozio { margin: 0 0 18px; }
html body .occhiello__negozio {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronzo);
  text-decoration: none;
}
html body .occhiello__negozio::before { content: '\25C6'; font-size: 9px; color: var(--bronzo); flex: none; }
html body .occhiello__negozio::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--bronzo), transparent); }
html body .occhiello__negozio:hover { color: var(--oro-chiaro); }

/* telefono: nel carrello in testata niente numerino, non ci sta */
@media (max-width: 700px) {
  html body .carrello-scorciatoia__conteggio { display: none !important; }
}

/* tariffe: "Cosa non facciamo pagare" meno staccato dalle carte, spazi pari sopra e sotto */
html body .tariffe-rate ~ .prosa { margin-top: -34px; margin-bottom: 34px; }

/* pacchetti: le tre carte tutte della stessa misura */
html body .griglia-tariffe { align-items: stretch; }
html body .griglia-tariffe > * { height: auto; margin-top: 0; margin-bottom: 0; }

/* foto che manca o non si carica: icona oro al posto dell immagine rotta */
html body .figura--vuota-oro { display: inline-flex !important; align-items: center; justify-content: center; background: var(--carta-2); }
html body .figura--vuota-oro::before {
  content: '';
  width: 55%; height: 55%;
  max-width: 46px; max-height: 46px;
  background: center / contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M9 3h6'/><path d='M8 5h8c1.2 3.2 1.2 6.8 0 9.8a4.3 4.3 0 0 1-8 0C6.8 11.8 6.8 8.2 8 5z'/><path d='M9 20h6'/></svg>");
}

/* finestra delle voci: piu foto in griglia */
html body .voce__fotos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
html body .voce__fotos img { width: 100%; height: 140px; object-fit: cover; border-radius: 6px; display: block; }

/* pannello, foto pacchetti: i tre titoli di sezione */
html body .pacchetto-titolo { font-family: var(--display); font-weight: 400; font-size: 24px; margin: 30px 0 8px; }
html body .pacchetto-titolo:first-child { margin-top: 0; }

/* Chiedi il preventivo: tutti e tre in stile logo, con la scritta in serif come il "noi" */
html body .carta-tariffa .bottone--contorno, html body .carta-tariffa .bottone--contorno:hover,
html body .carta-tariffa .bottone--primario, html body .carta-tariffa .bottone--primario:hover {
  background: linear-gradient(180deg, #EBC98F 0%, #D9B071 45%, #B98B4C 100%);
  color: #1F1509;
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 20px -12px rgba(0, 0, 0, 0.6);
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 17.5px;
  letter-spacing: 0.01em;
}

/* la scritta dei Chiedi il preventivo: nera, nel font del "noi" */
html body .carta-tariffa .bottone .scritta-noi {
  background: none;
  color: #1F1509;
  -webkit-text-fill-color: #1F1509;
}

/* Modifica sito: nel piede accanto a "Pannello admin", vestito come i link vicini */
html body .piede__coda .testi-avvio {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
}
html body .piede__coda .testi-avvio:hover { text-decoration: underline; text-underline-offset: 3px; outline: 0; }
html body .piede__coda .testi-avvio:focus, html body .piede__coda .testi-avvio:active { outline: 0; box-shadow: none; }

/* tendine: un icona diversa per ogni voce */
html body .tendina__colonna a[href="/negozio"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8h12l1.2 12H4.8z'/><path d='M9 8V6a3 3 0 0 1 6 0v2'/></svg>"); }
html body .tendina__colonna a[href="/organizzazione-del-funerale"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3h12v18H6z'/><path d='M9 8h6M9 12h6M9 16h4'/></svg>"); }
html body .tendina__colonna a[href="/preparazione-della-salma"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20C7 16.5 4 13.5 4 10a4 4 0 0 1 7-2.6l1 1.2 1-1.2A4 4 0 0 1 20 10c0 3.5-3 6.5-8 10z'/></svg>"); }
html body .tendina__colonna a[href="/cerimonie-di-rappresentanza"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l2.7 5.5 6 .9-4.3 4.2 1 6L12 16.8 6.6 19.6l1-6L3.3 9.4l6-.9z'/></svg>"); }
html body .tendina__colonna a[href="/inumazione"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21v-8'/><path d='M12 13C12 9 9 7 5 7c0 4 3 6 7 6z'/><path d='M12 13c0-4 3-6 7-6 0 4-3 6-7 6z'/></svg>"); }
html body .tendina__colonna a[href="/dispersione-ceneri-in-mare"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8c3 2 6 2 9 0s6-2 9 0'/><path d='M3 13c3 2 6 2 9 0s6-2 9 0'/><path d='M3 18c3 2 6 2 9 0s6-2 9 0'/></svg>"); }
html body .tendina__colonna a[href="/urne-cinerarie"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M9 3h6'/><path d='M8 5h8c1.2 3.2 1.2 6.8 0 9.8a4.3 4.3 0 0 1-8 0C6.8 11.8 6.8 8.2 8 5z'/><path d='M9 20h6'/></svg>"); }
html body .tendina__colonna a[href="/rinnovo-loculi"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8'/><path d='M12 8v4l3 2'/></svg>"); }
html body .tendina__colonna a[href="/acquisto-loculi"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 20v-9a4.5 4.5 0 0 1 9 0v9'/><path d='M12 20v-9a4.5 4.5 0 0 1 9 0v9'/><path d='M2 20h20'/></svg>"); }
html body .tendina__colonna a[href="/info-cimiteri"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 11v5'/><path d='M12 7.5v.01'/></svg>"); }
html body .tendina__colonna a[href="/foto-ricordi"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5h18v14H3z'/><circle cx='9' cy='10' r='1.6'/><path d='M3 16l5-4 4 3 3-2 6 4'/></svg>"); }
html body .tendina__colonna a[href="/domande-frequenti"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M9.6 9.3a2.4 2.4 0 1 1 3.4 2.2c-.7.3-1 .8-1 1.6'/><path d='M12 16.4v.01'/></svg>"); }
html body .tendina__colonna a[href^="https://www.google.com/maps"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21c-4-4.5-7-7.6-7-11a7 7 0 0 1 14 0c0 3.4-3 6.5-7 11z'/><circle cx='12' cy='10' r='2.4'/></svg>"); }
html body .tendina__colonna a[href="/recensioni"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l2.7 5.5 6 .9-4.3 4.2 1 6L12 16.8 6.6 19.6l1-6L3.3 9.4l6-.9z'/></svg>"); }
html body .tendina__colonna a[href="/decesso-in-ospedale"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 20V8h14v12'/><path d='M9 8V5h6v3'/><path d='M12 11v5M9.5 13.5h5'/><path d='M3 20h18'/></svg>"); }

/* al tocco (telefono): niente hover che resta appiccicato dopo il tap */
@media (hover: none) {
  html body .tendina__colonna a:hover b, html body .tendina__colonna a b { color: inherit; }
  html body .voce__testa:hover { color: inherit; }
  html body .piede__colonna a:hover { color: var(--su-scuro-fumo); }
}

/* la scritta fiorita del lumino: colore pieno garantito sui telefoni */
@media (max-width: 760px) {
  html body .lumino__didascalia b {
    background: none !important;
    background-image: none !important;
    color: #7FD4C4 !important;
    -webkit-text-fill-color: #7FD4C4 !important;
    animation: none !important;
    opacity: 1 !important;
  }
}

/* pannello, parco auto: le foto del mezzo in fila, ognuna con la sua x */
html body .mezzo-riga__foto--tante { width: 120px; height: auto; min-height: 76px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; padding: 3px; background: transparent; border: 1px dashed var(--bordo); }
html body .foto-mezzo { position: relative; width: 53px; height: 36px; border-radius: 4px; overflow: hidden; background: #fff; }
html body .foto-mezzo img { width: 100%; height: 100%; object-fit: cover; display: block; }
html body .foto-mezzo__togli {
  position: absolute; top: 0; right: 0;
  width: 16px; height: 16px;
  border: 0; border-radius: 0 0 0 5px;
  background: rgba(0, 0, 0, 0.65); color: #fff;
  font-size: 11px; line-height: 1; padding: 0; cursor: pointer;
}

/* telefono e tablet: i passi in colonna su una linea verticale precisa, senza lucina */
@media (max-width: 1080px) {
  html body .passi { grid-template-columns: 1fr; position: relative; row-gap: 26px; }
  html body .passi::before { display: none !important; }
  html body .passi::after { display: none !important; }
  html body .passo::before { animation: none !important; }
  html body .passo { position: relative; }
  html body .passo::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 6px !important; right: auto !important;
    top: 24px !important; bottom: -22px !important;
    width: 1px !important; height: auto !important;
    background: linear-gradient(180deg, rgba(127, 212, 196, 0.55), rgba(127, 212, 196, 0.12)) !important;
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
    animation: none !important;
  }
  html body .passo:last-child::after { display: none !important; }
  html body .passo__segno { animation: rombiTurno 8s ease-in-out infinite !important; }
  html body .passo:nth-child(1) .passo__segno { animation-delay: 0s !important; }
  html body .passo:nth-child(2) .passo__segno { animation-delay: 2s !important; }
  html body .passo:nth-child(3) .passo__segno { animation-delay: 4s !important; }
  html body .passo:nth-child(4) .passo__segno { animation-delay: 6s !important; }
  html body .passo, html body .passo + .passo, html body .passo:nth-child(even) { border-left: 0 !important; padding-left: 34px !important; padding-right: 0; }
  html body .passo__segno { left: 0 !important; top: 2px !important; box-shadow: none !important; }
}

/* telefono: la scritta del lumino non deve finire sotto il bordo della sezione */
@media (max-width: 760px) {
  html body .lumino { padding-bottom: 30px; }
  html body .lumino__didascalia { font-size: 20px; margin-top: 18px; }
}

/* telefono: la scritta fiorita del lumino non regge su tutti i browser, colore pieno */
@media (max-width: 760px) {
  html body .lumino__didascalia b {
    background: none !important;
    color: var(--verde-cupo);
    -webkit-text-fill-color: var(--verde-cupo);
  }
}

/* "Modifica sito" in testata, dopo il Cerca, vestito come gli altri tasti */
html body .azioni-intestazione .testi-avvio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 15px;
  background: transparent;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: none;
  font-size: 13.5px;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  transition: transform 0.22s ease;
}
html body .azioni-intestazione .testi-avvio:hover { transform: scale(1.045); outline: 0; box-shadow: none; }
html body #tavola-articoli th:nth-child(n+2):not(:last-child),
html body #tavola-articoli td:nth-child(n+2):not(:last-child),
html body #tavola-ordini th:nth-child(3),
html body #tavola-ordini th:nth-child(4), html body #tavola-ordini td:nth-child(4),
html body #tavola-ordini th:nth-child(5), html body #tavola-ordini td:nth-child(5) {
  text-align: center;
}

/* "Nemmeno il nostro telefono": fiorito come il "noi" del titolo */
html body .lumino__didascalia b {
  background-image: linear-gradient(rgba(178, 238, 244, 0.42), rgba(178, 238, 244, 0.42)), url(/img/fiori.png);
  background-size: cover, cover;
  background-position: center 38%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}


/* ================== ritocchi 2026-09-01 ================== */

/* i link dentro la prosa (numero di telefono ecc.) in oro */
html body .prosa a { color: var(--oro-chiaro); }
html body .prosa a:hover { color: var(--oro); }

/* la scritta del negozio nell'eroe: sottolineata */
html body .occhiello__negozio { text-decoration: underline; text-underline-offset: 4px; }

/* box richiamo: icona grande oro prima del testo */
html body .richiamo__icona { flex: none; width: 60px; height: 60px; color: var(--oro-chiaro); }
html body .richiamo__icona svg { width: 100%; height: 100%; display: block; }
html body .richiamo__icona + div { margin-right: auto; }
@media (max-width: 760px) { html body .richiamo__icona { width: 44px; height: 44px; } }

/* piede: logo e testo del marchio centrati */
html body .piede__marchio { align-items: center; text-align: center; }
html body .piede__marchio img, html body .piede__marchio a { align-self: center; margin-inline: auto; }
html body .piede__marchio p { align-self: center; text-align: center; margin-inline: auto; }

/* carrello aperto: la testata con Servizi ecc. resta visibile */
html body .velo-carrello { z-index: 59; }

/* Chiedi il preventivo: la scritta in bianco */
html body .carta-tariffa .bottone .scritta-noi { color: #fff; -webkit-text-fill-color: #fff; }

/* Vai alla cassa: bianco, nel font del "noi" */
html body .cassetto__piede .bottone--oro,
html body .cassetto__piede .bottone--oro:hover {
  color: #fff;
  font-family: var(--display);
  font-style: normal;
  font-weight: 400;
  font-size: 17.5px;
}


html body .intestazione { background-color: #0F3038; background-image: linear-gradient(180deg, rgba(17, 50, 58, 0.94), rgba(12, 39, 46, 0.96)), url(/img/fiori-berna.png); }

html body .cassetto { z-index: 310; }


/* ---- testata: giro del 2026-09-01, seconda passata ---- */

/* col carrello aperto il blocco scroll sta sull'html: il body con
   overflow hidden diventava scroll container e la testata sticky
   restava in cima al documento invece che allo schermo */
html:has(body.senza-scorrimento) { overflow: hidden; }
html body.senza-scorrimento { overflow: visible; }

/* voci del menu: serif del sito, piu' presenza, oro all'hover */
html body .voce__testa, html body .voce__solo {
  font-family: var(--display);
  font-size: 18.5px;
  font-weight: 400;
  letter-spacing: 0.035em;
  color: #EAF2EF;
  padding-inline: 16px;
}
html body .voce__testa:hover, html body .voce__solo:hover,
html body .voce.aperta .voce__testa { color: var(--oro-chiaro); }
html body .voce__punta { color: var(--oro-chiaro); }

/* WhatsApp, Carrello e Cerca in oro come il numero */
html body .whatsapp-testata, html body .carrello-scorciatoia, html body .apri-cerca {
  border-color: rgba(217, 176, 113, 0.5);
  color: var(--oro-chiaro);
  background: rgba(217, 176, 113, 0.07);
}
html body .whatsapp-testata:hover, html body .carrello-scorciatoia:hover, html body .apri-cerca:hover {
  border-color: var(--oro-chiaro);
  color: #F6E3BC;
  background: rgba(217, 176, 113, 0.13);
}

html body .voce__testa, html body .voce__solo { font-size: 17px; padding-inline: 10px; }
html body .intestazione .contenitore { gap: 18px; }

html body .voce__testa, html body .voce__solo { padding-inline: 8px; }
html body .intestazione .contenitore { gap: 14px; }

html body .whatsapp-testata, html body .carrello-scorciatoia, html body .apri-cerca { color: #fff; }
html body .whatsapp-testata:hover, html body .carrello-scorciatoia:hover, html body .apri-cerca:hover { color: #fff; }

html body .navigazione > * + * { background: linear-gradient(180deg, transparent 32%, rgba(217, 176, 113, 0.38) 32%, rgba(217, 176, 113, 0.38) 68%, transparent 68%) left center / 1px 100% no-repeat; }


/* ---- terza passata 2026-09-01 ---- */

/* eroe: fotografia ferma, niente zoom che lagga scorrendo */
html body .eroe__sfondo { animation: none !important; transform: none !important; will-change: auto; }

/* Chiedi il preventivo: fondo fiorito come il "noi" del titolo, scritta oro */
html body .carta-tariffa .bottone--contorno, html body .carta-tariffa .bottone--contorno:hover,
html body .carta-tariffa .bottone--primario, html body .carta-tariffa .bottone--primario:hover {
  background: linear-gradient(rgba(178, 238, 244, 0.42), rgba(178, 238, 244, 0.42)), url(/img/fiori.png) center 38% / cover;
  color: #A77E44;
  border: 1px solid rgba(167, 126, 68, 0.4);
}
html body .carta-tariffa .bottone .scritta-noi { color: #A77E44; -webkit-text-fill-color: #A77E44; }

/* targhetta "Il piu' richiesto": fondo fiorito e font del "noi" */
html body .carta-tariffa--scelta::before {
  background: linear-gradient(rgba(178, 238, 244, 0.42), rgba(178, 238, 244, 0.42)), url(/img/fiori.png) center 38% / cover;
  color: #113338;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.1em;
  border: 1px solid rgba(167, 126, 68, 0.5);
}

html body .carta-tariffa .bottone--contorno, html body .carta-tariffa .bottone--contorno:hover, html body .carta-tariffa .bottone--primario, html body .carta-tariffa .bottone--primario:hover { background: linear-gradient(rgba(219, 242, 245, 0.78), rgba(219, 242, 245, 0.78)), url(/img/fiori.png) center / 340px; }
html body .carta-tariffa .bottone .scritta-noi { color: #8F6832; -webkit-text-fill-color: #8F6832; }
html body .carta-tariffa--scelta::before { background: linear-gradient(rgba(219, 242, 245, 0.8), rgba(219, 242, 245, 0.8)), url(/img/fiori.png) center / 300px; }

html body .navigazione > * + * { background: linear-gradient(180deg, transparent 26%, rgba(217, 176, 113, 0.72) 26%, rgba(217, 176, 113, 0.72) 74%, transparent 74%) left center / 2px 100% no-repeat; padding-left: 19px; margin-left: 3px; }

html body .tendina__titolo::before { display: none; }


html body .carta-tariffa .bottone--contorno, html body .carta-tariffa .bottone--contorno:hover, html body .carta-tariffa .bottone--primario, html body .carta-tariffa .bottone--primario:hover { background-image: linear-gradient(rgba(178, 238, 244, 0.42), rgba(178, 238, 244, 0.42)), url(/img/fiori.png); background-size: cover, cover; background-position: center 38%; font-weight: 700; }
html body .carta-tariffa .bottone .scritta-noi { font-weight: 700; }
html body .carta-tariffa--scelta::before { background-image: linear-gradient(rgba(178, 238, 244, 0.42), rgba(178, 238, 244, 0.42)), url(/img/fiori.png); background-size: cover, cover; background-position: center 38%; font-weight: 700; }

html body .navigazione > * { padding-inline: 8px 4px; }
html body .navigazione > * + * { padding-left: 24px; margin-left: 0; }
html body .finestra { z-index: 290; padding-top: calc(var(--altezza-testata, 78px) + 18px); }
html body .servizi-indice { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; margin: 28px 0 0; }
html body .servizi-indice a { color: #CFDCD8; font-size: 14.5px; line-height: 1.5; white-space: nowrap; }
html body .servizi-indice a:hover { color: var(--oro-chiaro); }
html body .servizi-indice a + a::before { content: "\00B7"; color: var(--oro); margin-inline: 11px; }

html body .navigazione > * { padding-right: 0; }
html body .voce__testa, html body .voce__solo { padding-right: 0; }

html body .carta-tariffa .bottone--contorno, html body .carta-tariffa .bottone--contorno:hover, html body .carta-tariffa .bottone--primario, html body .carta-tariffa .bottone--primario:hover { background: linear-gradient(180deg, #EBC98F 0%, #D9B071 45%, #B98B4C 100%); color: #1F1509; }
html body .carta-tariffa .bottone .scritta-noi { color: #1F1509; -webkit-text-fill-color: #1F1509; }
html body .carta-tariffa--scelta::before { background: linear-gradient(180deg, #EBC98F 0%, #D9B071 45%, #B98B4C 100%); color: #1F1509; }
html body .cassetto__piede .bottone--oro, html body .cassetto__piede .bottone--oro:hover { color: #1F1509; }

html body .carta-tariffa > h3 { background-image: linear-gradient(rgba(233, 197, 142, 0.72), rgba(185, 139, 76, 0.72)), url(/img/fiori.png); background-size: cover, cover; background-position: center 38%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
html body .sede-mappa { text-decoration: none; border-bottom: 0; }
html body .whatsapp-testata, html body .whatsapp-testata:hover, html body .carrello-scorciatoia, html body .carrello-scorciatoia:hover, html body .apri-cerca, html body .apri-cerca:hover { background: transparent; }
html body .azioni-intestazione .numero-testata, html body .azioni-intestazione .numero-testata:hover { background: transparent; }

html body .carta-tariffa--scelta::before, html body .carta-tariffa--scelta::after { display: none; content: none; }
@media (max-width: 760px) {
  html body .intestazione .contenitore { gap: 10px; min-height: 60px; }
}

html body .carta-tariffa .bottone .scritta-noi, html body .cassetto__piede .bottone--oro .scritta-noi-nera { background-image: linear-gradient(rgba(24, 20, 12, 0.82), rgba(24, 20, 12, 0.82)), url(/img/fiori.png); background-size: cover, cover; background-position: center 38%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; font-weight: 700; }

html body .passo, html body .passo:nth-child(even) { border-left: 0; }

@media (max-width: 760px) {
  html body .servizi-indice { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 16px; justify-items: start; }
  html body .servizi-indice a { white-space: normal; text-align: left; }
  html body .servizi-indice a + a::before { content: none; margin: 0; }
  html body .azioni-intestazione .apri-menu, html body .azioni-intestazione .numero-testata, html body .azioni-intestazione .whatsapp-testata, html body .azioni-intestazione .carrello-scorciatoia, html body .azioni-intestazione .apri-cerca { width: 44px; height: 44px; min-width: 44px; padding: 0; display: flex; align-items: center; justify-content: center; }
  html body .azioni-intestazione .numero-testata { color: #fff; }
  html body .azioni-intestazione .numero-testata svg { width: 19px; height: 19px; }
}

@media (hover: none) {
  html body .whatsapp-testata:hover, html body .carrello-scorciatoia:hover, html body .apri-cerca:hover, html body .apri-menu:hover, html body .azioni-intestazione .numero-testata:hover { border-color: rgba(217, 176, 113, 0.5); color: #fff; background: transparent; transform: none; box-shadow: none; }
}

html body .carta-tariffa .bottone .scritta-noi, html body .cassetto__piede .bottone--oro .scritta-noi-nera { background: none; background-image: none; -webkit-background-clip: border-box; background-clip: border-box; color: #1F1509; -webkit-text-fill-color: #1F1509; }


/* ---- quarta passata 2026-09-01: mobile ---- */

/* menu mobile: freccette accanto al testo e sbarra oro anche su Servizi */
@media (max-width: 1000px) {
  html body .voce__testa { justify-content: flex-start; gap: 10px; }
  html body .voce__punta { margin-left: 2px; }
  html body .navigazione > * { background: linear-gradient(180deg, transparent 26%, rgba(217, 176, 113, 0.72) 26%, rgba(217, 176, 113, 0.72) 74%, transparent 74%) left center / 2px 100% no-repeat; padding-left: 24px; }
}

/* tap sul menu: niente hover che resta appiccicato */
@media (hover: none) {
  html body .voce__testa:hover, html body .voce__solo:hover { color: #EAF2EF; }
  html body .voce.aperta .voce__testa { color: var(--oro-chiaro); }
}

/* elenco pagine in home da telefono: colonne centrate e icone oro come il prezziario */
@media (max-width: 760px) {
  html body .servizi-indice { justify-items: center; }
  html body .servizi-indice a { display: inline-flex; align-items: center; gap: 7px; text-align: left; }
  html body .servizi-indice a::before { content: ''; width: 15px; height: 15px; flex: none; background: center / contain no-repeat; }
  html body .servizi-indice a[href="/preparazione-della-salma"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M8 3h8l3 6-2 12H7L5 9z'/><path d='M5 9h14'/></svg>"); }
  html body .servizi-indice a[href="/trasporti-funebri"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 16v-3l2-5h10l4 5h2v3h-2'/><circle cx='7.5' cy='17' r='1.8'/><circle cx='16.5' cy='17' r='1.8'/><path d='M9.3 17h5.4'/></svg>"); }
  html body .servizi-indice a[href="/cerimonie-di-rappresentanza"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l2.7 5.5 6 .9-4.3 4.2 1 6L12 16.8 6.6 19.6l1-6L3.3 9.4l6-.9z'/></svg>"); }
  html body .servizi-indice a[href="/inumazione"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21v-8'/><path d='M12 13C12 9 9 7 5 7c0 4 3 6 7 6z'/><path d='M12 13c0-4 3-6 7-6 0 4-3 6-7 6z'/></svg>"); }
  html body .servizi-indice a[href="/dispersione-ceneri-in-mare"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8c3 2 6 2 9 0s6-2 9 0'/><path d='M3 13c3 2 6 2 9 0s6-2 9 0'/><path d='M3 18c3 2 6 2 9 0s6-2 9 0'/></svg>"); }
  html body .servizi-indice a[href="/rinnovo-loculi"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8'/><path d='M12 8v4l3 2'/></svg>"); }
  html body .servizi-indice a[href="/info-cimiteri"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 11v5'/><path d='M12 7.5v.01'/></svg>"); }
  html body .servizi-indice a[href="/negozio"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8h12l1.2 12H4.8z'/><path d='M9 8V6a3 3 0 0 1 6 0v2'/></svg>"); }
  html body .servizi-indice a[href="/foto-ricordi"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5h18v14H3z'/><circle cx='9' cy='10' r='1.6'/><path d='M3 16l5-4 4 3 3-2 6 4'/></svg>"); }
  html body .servizi-indice a[href="/manifesti-funebri"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3h12v18H6z'/><path d='M9 8h6M9 12h6M9 16h4'/></svg>"); }
  html body .servizi-indice a[href="/cosa-fare"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5a3 3 0 0 1 3-3h13v18H7a3 3 0 0 0-3 3z'/><path d='M20 16H7a3 3 0 0 0-3 3'/><path d='M9 7h7M9 11h5'/></svg>"); }
  html body .servizi-indice a[href="/decesso-in-casa"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 11 12 4l8 7'/><path d='M6 10v10h12V10'/><path d='M10 20v-5h4v5'/></svg>"); }
  html body .servizi-indice a[href="/decesso-in-ospedale"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 20V8h14v12'/><path d='M9 8V5h6v3'/><path d='M12 11v5M9.5 13.5h5'/><path d='M3 20h18'/></svg>"); }
  html body .servizi-indice a[href="/domande-frequenti"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M9.6 9.3a2.4 2.4 0 1 1 3.4 2.2c-.7.3-1 .8-1 1.6'/><path d='M12 16.4v.01'/></svg>"); }
  html body .servizi-indice a[href="/recensioni"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l2.7 5.5 6 .9-4.3 4.2 1 6L12 16.8 6.6 19.6l1-6L3.3 9.4l6-.9z'/></svg>"); }
}

html body .specifica-icona { display: inline-block; width: 16px; height: 16px; margin-right: 9px; vertical-align: -3px; background: center / contain no-repeat; }
html body .specifica-icona--materiale { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l9 5-9 5-9-5z'/><path d='M3 13l9 5 9-5'/></svg>"); }
html body .specifica-icona--dimensioni { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 17L17 3l4 4L7 21z'/><path d='M8 12l2 2M11 9l2 2M14 6l2 2'/></svg>"); }
html body .specifica-icona--capacita { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 3h6'/><path d='M8 5h8c1.2 3.2 1.2 6.8 0 9.8a4.3 4.3 0 0 1-8 0C6.8 11.8 6.8 8.2 8 5z'/><path d='M9 20h6'/></svg>"); }
html body .specifica-icona--disponibilita { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M8.5 12.5l2.5 2.5 4.5-5'/></svg>"); }
html body .scheda-prodotto .bottone--primario, html body .scheda-prodotto .bottone--primario:hover {
  background: linear-gradient(135deg, #B98B4C 0%, #EBC98F 52%, #D9B071 100%);
  color: #1F1509;
  border: 1px solid transparent;
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 20px -12px rgba(0, 0, 0, 0.6);
}

html body .scheda-prodotto { align-items: center; }

html body .filtro:hover { border-color: var(--oro-chiaro); color: var(--oro-chiaro); background: rgba(217, 176, 113, 0.08); }
html body .filtro.attivo, html body .filtro.attivo:hover { background: linear-gradient(180deg, #EBC98F 0%, #D9B071 45%, #B98B4C 100%); color: #1F1509; border-color: transparent; }

html body .cerca__chiudi { margin-right: 12px; }
html body .cerca-catalogo input::placeholder { color: #8FA6B4; opacity: 0.9; }
html body .lumino__didascalia { font-style: normal; }

html body .scritta-fiorita { font-family: var(--display); font-style: italic; font-weight: 700; background-image: linear-gradient(rgba(178, 238, 244, 0.42), rgba(178, 238, 244, 0.42)), url(/img/fiori.png); background-size: cover, cover; background-position: center 38%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* ---------- recensioni in stile Google ---------- */
.rg-cappello { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: #fff; border-radius: 14px; padding: 22px 28px; box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.5); margin-bottom: 18px; }
.rg-titolo { display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 700; color: #202124; margin: 0 0 6px; font-family: var(--testo); }
.rg-logo b { font-weight: 700; font-size: 24px; }
.rg-voto { display: flex; align-items: center; gap: 10px; margin: 0; }
.rg-voto > b { font-size: 22px; color: #202124; }
.rg-stelle { color: #FBBC05; font-size: 19px; letter-spacing: 2px; }
.rg-stella--vuota { color: #DADCE0; }
.rg-lascia { background: #1A73E8; color: #fff; font-weight: 700; font-size: 15px; padding: 12px 22px; border-radius: 999px; white-space: nowrap; }
.rg-lascia:hover { background: #1765CC; color: #fff; }
.rg-fila-guscio { position: relative; }
.rg-fila { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
.rg-fila::-webkit-scrollbar { display: none; }
.rg-carta { flex: 0 0 272px; scroll-snap-align: start; background: #fff; border-radius: 14px; padding: 18px 20px; box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.rg-testa { display: flex; align-items: center; gap: 11px; }
.rg-ritratto { position: relative; flex: none; width: 44px; height: 44px; }
.rg-faccia { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 19px; font-family: var(--testo); }
.rg-g { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; padding: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.rg-chi { display: flex; flex-direction: column; line-height: 1.25; }
.rg-chi b { color: #202124; font-size: 15.5px; font-weight: 700; display: flex; align-items: center; gap: 5px; font-family: var(--testo); }
.rg-chi i { font-style: normal; color: #70757A; font-size: 13px; }
.rg-spunta { width: 15px; height: 15px; flex: none; }
.rg-carta .rg-stelle { font-size: 17px; }
.rg-testo { color: #3C4043; font-size: 14.5px; line-height: 1.55; margin: 0; font-family: var(--testo); }
.rg-testo--corto { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rg-ancora { background: none; border: 0; padding: 0; color: #1A73E8; font-size: 14px; font-weight: 600; cursor: pointer; }
.rg-ancora:hover { text-decoration: underline; }
.rg-freccia { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #3C4043; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; }
.rg-freccia--sx { left: -12px; }
.rg-freccia--dx { right: -12px; }
.rg-freccia:hover { background: #202124; }
@media (max-width: 760px) {
  .rg-cappello { padding: 18px 20px; }
  .rg-lascia { width: 100%; text-align: center; }
  .rg-carta { flex-basis: 82%; }
  .rg-freccia { display: none; }
}

html body .whatsapp-testata, html body .carrello-scorciatoia, html body .apri-cerca, html body .whatsapp-testata:hover, html body .carrello-scorciatoia:hover, html body .apri-cerca:hover { border-color: rgba(255, 255, 255, 0.75); }
@media (max-width: 1000px) {
  html body .azioni-intestazione .numero-testata, html body .azioni-intestazione .numero-testata svg { color: #fff; }
}

@media (max-width: 1000px) {
  html body .apri-menu, html body .azioni-intestazione .numero-testata { border: 1px solid rgba(255, 255, 255, 0.75); }
}

html body .scritta-fiorita { background: none; background-image: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; -webkit-text-fill-color: #fff; }

html body .eroe__azioni .bottone--oro, html body .eroe__azioni .bottone--oro:hover { background: linear-gradient(180deg, #EBC98F 0%, #D9B071 45%, #B98B4C 100%); color: #fff; border: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 20px -12px rgba(0, 0, 0, 0.6); }

html body .lumino svg, html body .lumino[data-rivela].visto svg { animation: none !important; }
html body .lumino__didascalia, html body .lumino__didascalia b { animation: none !important; }
html body .carta-tariffa > h3 { background: none; background-image: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--oro-chiaro); -webkit-text-fill-color: var(--oro-chiaro); font-weight: 700; }

html body .carta-tariffa { padding-top: 18px; }
@media (min-width: 1001px) {
  html body .whatsapp-testata, html body .carrello-scorciatoia, html body .apri-cerca { border-color: rgba(217, 176, 113, 0.32); }
  html body .whatsapp-testata:hover, html body .carrello-scorciatoia:hover, html body .apri-cerca:hover { border-color: var(--oro-chiaro); }
}

html body .servizi-indice a { display: inline-flex; align-items: center; gap: 7px; }
html body .servizi-indice a::before { content: ''; width: 15px; height: 15px; flex: none; background: center / contain no-repeat; }
html body .servizi-indice a[href="/preparazione-della-salma"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M8 3h8l3 6-2 12H7L5 9z'/><path d='M5 9h14'/></svg>"); }
html body .servizi-indice a[href="/trasporti-funebri"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 16v-3l2-5h10l4 5h2v3h-2'/><circle cx='7.5' cy='17' r='1.8'/><circle cx='16.5' cy='17' r='1.8'/><path d='M9.3 17h5.4'/></svg>"); }
html body .servizi-indice a[href="/cerimonie-di-rappresentanza"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l2.7 5.5 6 .9-4.3 4.2 1 6L12 16.8 6.6 19.6l1-6L3.3 9.4l6-.9z'/></svg>"); }
html body .servizi-indice a[href="/inumazione"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21v-8'/><path d='M12 13C12 9 9 7 5 7c0 4 3 6 7 6z'/><path d='M12 13c0-4 3-6 7-6 0 4-3 6-7 6z'/></svg>"); }
html body .servizi-indice a[href="/dispersione-ceneri-in-mare"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8c3 2 6 2 9 0s6-2 9 0'/><path d='M3 13c3 2 6 2 9 0s6-2 9 0'/><path d='M3 18c3 2 6 2 9 0s6-2 9 0'/></svg>"); }
html body .servizi-indice a[href="/rinnovo-loculi"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8'/><path d='M12 8v4l3 2'/></svg>"); }
html body .servizi-indice a[href="/info-cimiteri"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 11v5'/><path d='M12 7.5v.01'/></svg>"); }
html body .servizi-indice a[href="/negozio"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8h12l1.2 12H4.8z'/><path d='M9 8V6a3 3 0 0 1 6 0v2'/></svg>"); }
html body .servizi-indice a[href="/foto-ricordi"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5h18v14H3z'/><circle cx='9' cy='10' r='1.6'/><path d='M3 16l5-4 4 3 3-2 6 4'/></svg>"); }
html body .servizi-indice a[href="/manifesti-funebri"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3h12v18H6z'/><path d='M9 8h6M9 12h6M9 16h4'/></svg>"); }
html body .servizi-indice a[href="/cosa-fare"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5a3 3 0 0 1 3-3h13v18H7a3 3 0 0 0-3 3z'/><path d='M20 16H7a3 3 0 0 0-3 3'/><path d='M9 7h7M9 11h5'/></svg>"); }
html body .servizi-indice a[href="/decesso-in-casa"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 11 12 4l8 7'/><path d='M6 10v10h12V10'/><path d='M10 20v-5h4v5'/></svg>"); }
html body .servizi-indice a[href="/decesso-in-ospedale"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 20V8h14v12'/><path d='M9 8V5h6v3'/><path d='M12 11v5M9.5 13.5h5'/><path d='M3 20h18'/></svg>"); }
html body .servizi-indice a[href="/domande-frequenti"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M9.6 9.3a2.4 2.4 0 1 1 3.4 2.2c-.7.3-1 .8-1 1.6'/><path d='M12 16.4v.01'/></svg>"); }
html body .servizi-indice a[href="/recensioni"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l2.7 5.5 6 .9-4.3 4.2 1 6L12 16.8 6.6 19.6l1-6L3.3 9.4l6-.9z'/></svg>"); }

html body .rg-cappello, html body .rg-carta { background: var(--carta); border: 1px solid var(--bordo); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.5); }
html body .rg-titolo, html body .rg-voto > b, html body .rg-chi b { color: var(--inchiostro); }
html body .rg-testo { color: var(--inchiostro); opacity: 0.85; }
html body .rg-chi i { color: var(--fumo); }
html body .rg-stella--vuota { color: rgba(255, 255, 255, 0.25); }

html body .rg-chi i, html body .rg-g { display: none; }

html body .eroe__azioni .bottone--oro, html body .eroe__azioni .bottone--oro:hover { color: #1F1509; }
html body .scritta-fiorita { color: #1F1509; -webkit-text-fill-color: #1F1509; }

html body .whatsapp-testata:hover, html body .carrello-scorciatoia:hover, html body .apri-cerca:hover { border-color: rgba(217, 176, 113, 0.32); color: #fff; background: transparent; transform: scale(1.06); }
@media (max-width: 1000px) {
  html body .whatsapp-testata:hover, html body .carrello-scorciatoia:hover, html body .apri-cerca:hover { border-color: rgba(255, 255, 255, 0.75); transform: none; }
}


/* divisori del menu come pseudo-elemento: l'hover non li cancella piu */
html body .navigazione > * + * { background: none; position: relative; }
html body .navigazione > * + *::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 46%;
  background: rgba(217, 176, 113, 0.72);
}
@media (max-width: 1000px) {
  html body .navigazione > * { background: none; position: relative; }
  html body .navigazione > *::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 46%;
    background: rgba(217, 176, 113, 0.72);
  }
}

/* box richiamo: stesso spazio a sinistra dell'icona e tra icona e testo */
html body .richiamo { column-gap: 28px; padding-left: 28px; }

html body .richiamo__icona { display: none; }

/* testata piu scura, si legge sempre */
html body .intestazione { background-color: #0A222A; background-image: linear-gradient(180deg, rgba(9, 29, 36, 0.97), rgba(6, 21, 27, 0.97)), url(/img/fiori-berna.png); }

/* bottone eroe: testo dritto */
html body .scritta-fiorita { font-style: normal; }

/* widget recensioni: bottone blu che cresce, frecce colore sito fuori dalle carte, stacchi uguali */
html body .rg-lascia { transition: transform 0.2s ease; }
html body .rg-lascia:hover { transform: scale(1.06); }
html body .rg-fila-guscio { margin-inline: 54px; }
html body .rg-freccia { background: var(--carta); color: var(--oro-chiaro); border: 1px solid var(--bordo); }
html body .rg-freccia:hover { background: var(--carta); color: var(--oro); }
html body .rg-freccia--sx { left: -54px; }
html body .rg-freccia--dx { right: -54px; }
html body .google-voto + .recensioni-google { margin-top: -22px; }

/* icona dei box richiamo: torna, stesso stacco a sinistra e verso il testo */
html body .richiamo__icona { display: flex; }

/* numeri di telefono dentro i testi: oro */
html body main p a[href^="tel:"]:not(.bottone):not(.numero-testata), html body main li a[href^="tel:"]:not(.bottone):not(.numero-testata) { color: var(--oro-chiaro); }
html body main p a[href^="tel:"]:not(.bottone):not(.numero-testata):hover, html body main li a[href^="tel:"]:not(.bottone):not(.numero-testata):hover { color: var(--oro); }

/* anche gli elenchi ol numerati in stile noi */
html body .prosa ol { list-style: none; padding-left: 0; counter-reset: voce-guida; }
html body .prosa ol > li { counter-increment: voce-guida; position: relative; padding-left: 38px; }
html body .prosa ol > li::marker { content: ''; }
html body .prosa ol > li::before { content: counter(voce-guida) '.'; display: block !important; position: absolute; left: 0; top: -2px; width: 26px; text-align: center; font-family: var(--display); font-size: 21px; line-height: 1.3; background-image: linear-gradient(rgba(178, 238, 244, 0.42), rgba(178, 238, 244, 0.42)), url(/img/fiori.png); background-size: cover, cover; background-position: center 38%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* tavole prezzi: titolo centrato sopra, niente rombi, righe ordinate */
html body .tavola-titolo { text-align: center; font-family: var(--display); font-size: 22px; color: var(--oro-chiaro); margin: 26px 0 10px; }
html body .tavola thead { display: none; }
html body .tavola th::before, html body .tavola td::before, html body .tavola th::after, html body .tavola td::after { content: none !important; }
html body .tavola td { padding: 13px 16px; }
html body .tavola tbody tr:first-child td { border-top: 1px solid var(--bordo); }

/* elenco pagine: pallini a dividere e icone piu vicine al testo */
html body .servizi-indice { gap: 8px 14px; }
html body .servizi-indice a { gap: 5px; }
html body .servizi-indice a + a::before { margin-inline: 0; }
html body .servizi-indice a:not(:last-child)::after { content: '\00B7'; color: var(--oro); margin-left: 14px; font-weight: 700; }
@media (max-width: 760px) { html body .servizi-indice a::after { content: none !important; } }

/* niente sbarra sotto il rombo del negozio */
html body .occhiello__negozio::before { text-decoration: none; display: inline-block; }

/* piede piu compatto */
html body .piede__corpo { padding-top: 26px; padding-bottom: 16px; gap: 28px; }
html body .piede__marchio img { height: 42px; margin-bottom: 8px; }
html body .piede__marchio p { font-size: 12.5px; }
html body .piede__colonna h4 { font-size: 13px; margin-bottom: 4px; }
html body .piede__colonna a { font-size: 13px; }
html body .piede__numero { font-size: 19px; }

/* ---------- crea il tuo preventivo ---------- */
html body .preventivo-guscio { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 34px; align-items: start; }
@media (max-width: 1000px) { html body .preventivo-guscio { grid-template-columns: 1fr; } }
html body .pre-titolo { font-size: 24px; margin: 30px 0 14px; }
html body .pre-pacchetti { display: grid; gap: 10px; }
html body .pre-scelta { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 12px; background: var(--carta); border: 1px solid var(--bordo); border-radius: 10px; padding: 13px 16px; cursor: pointer; }
html body .pre-scelta.attiva { border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro-filo); }
html body .pre-scelta b { font-size: 16px; }
html body .pre-scelta span { grid-column: 2 / 4; font-size: 13px; color: var(--fumo); }
html body .pre-scelta i { font-style: normal; color: var(--oro-chiaro); font-family: var(--display); font-size: 17px; }
html body .pre-scelta input { accent-color: #C99C5E; }
html body .pre-riga { display: flex; align-items: center; gap: 14px; padding: 11px 4px; border-bottom: 1px solid var(--bordo); }
html body .pre-riga__testo { flex: 1; min-width: 0; }
html body .pre-riga__testo b { display: block; font-size: 15px; }
html body .pre-riga__testo span { font-size: 12.5px; color: var(--fumo); }
html body .pre-riga__prezzo { color: var(--oro-chiaro); font-family: var(--display); white-space: nowrap; }
html body .pre-riga.attiva .pre-riga__testo b { color: var(--oro-chiaro); }
html body .pre-categoria { margin: 18px 0 4px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oro); font-weight: 700; }
html body .pre-conta { display: inline-flex; align-items: center; gap: 8px; }
html body .pre-conta button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--bordo); background: transparent; color: var(--inchiostro); font-size: 16px; cursor: pointer; }
html body .pre-conta button:hover { border-color: var(--oro); color: var(--oro-chiaro); }
html body .pre-conta > span { min-width: 18px; text-align: center; font-weight: 700; }
html body .pre-parco { display: grid; gap: 8px; }
html body .pre-scelta--riga { grid-template-columns: auto auto 1fr; }
html body .pre-scelta--riga span { grid-column: auto; }
html body .pre-riepilogo { position: sticky; top: calc(var(--altezza-testata, 78px) + 16px); background: var(--carta); border: 1px solid var(--bordo); border-radius: 12px; padding: 22px 22px 24px; display: grid; gap: 12px; }
html body .pre-riepilogo h2 { font-size: 22px; }
html body .pre-voce-riepilogo { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; border-bottom: 1px dashed var(--bordo); padding-bottom: 6px; }
html body .pre-voce-riepilogo b { color: var(--oro-chiaro); font-weight: 600; white-space: nowrap; }
html body .pre-totale { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; }
html body .pre-totale b { font-family: var(--display); font-size: 28px; color: var(--oro-chiaro); }
html body .pre-nota { font-size: 12.5px; color: var(--fumo); margin: 0; }
html body .pre-vuoto { font-size: 13.5px; color: var(--fumo); }
html body .pre-esito { font-size: 13.5px; color: var(--oro-chiaro); min-height: 18px; }
html body #pre-modulo { display: grid; gap: 8px; }
html body #pre-modulo input { background: transparent; border: 1px solid var(--bordo); border-radius: 8px; padding: 11px 12px; color: var(--inchiostro); font-size: 14.5px; }
html body #pre-modulo input:focus { outline: none; border-color: var(--oro); }
html body .crea-preventivo { display: block; text-align: center; margin-top: 10px; font-size: 14px; color: var(--oro-chiaro); text-decoration: underline; text-underline-offset: 4px; }
html body .crea-preventivo:hover { color: var(--oro); }
html body .tendina__colonna a[href="/funerale-prepagato"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10h18v9H3z'/><path d='M7 10V7a5 5 0 0 1 10 0v3'/><path d='M12 13.5v2.5'/></svg>"); }

/* ---------- bandierina della lingua ---------- */
html body .cambia-lingua { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(217, 176, 113, 0.32); border-radius: 4px; font-size: 19px; line-height: 1; cursor: pointer; }
html body .cambia-lingua:hover { border-color: var(--oro-chiaro); transform: scale(1.06); }
@media (max-width: 1000px) { html body .cambia-lingua { border-color: rgba(255, 255, 255, 0.75); width: 44px; height: 44px; } }

html body .pre-foto { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; flex: none; background: #fff; }
@media (max-width: 760px) {
  html body .pre-scelta { grid-template-columns: auto 1fr; align-items: start; }
  html body .pre-scelta b { grid-column: 2; }
  html body .pre-scelta span { grid-column: 2; }
  html body .pre-scelta i { grid-column: 2; justify-self: start; }
  html body .pre-scelta input { margin-top: 3px; }
}

html body .navigazione { gap: 8px; }
html body .voce__solo[aria-current]::after { transform: scaleX(0) !important; opacity: 0 !important; }
html body .voce__solo[aria-current]:hover::after { transform: scaleX(1) !important; opacity: 1 !important; }
html body .tendina__colonna a span { display: none; }

@media (max-width: 520px) {
  html body .intestazione .contenitore { gap: 6px; min-height: 56px; }
  html body .intestazione .marchio img { height: 34px; }
  html body .azioni-intestazione { gap: 5px; }
  html body .azioni-intestazione .apri-menu, html body .azioni-intestazione .numero-testata, html body .azioni-intestazione .whatsapp-testata, html body .azioni-intestazione .carrello-scorciatoia, html body .azioni-intestazione .apri-cerca, html body .cambia-lingua { width: 38px; height: 38px; min-width: 38px; }
  html body .cambia-lingua { font-size: 15px; }
}

html body .richiamo { padding-left: 32px; padding-right: 32px; }

html body .richiamo__icona { margin: 0; }

html body .numero-testata, html body .numero-testata--richiamo, html body .numero-testata:hover, html body .numero-testata--richiamo:hover { background-image: none; }

/* menu: stesso spazio prima e dopo ogni divisore, hover solo sul testo */
html body .navigazione { gap: 0; }
html body .navigazione > * { padding-inline: 12px; }
html body .navigazione > * + * { padding-left: 12px; margin-left: 0; }

/* niente cornice attorno alle icone dei titoli */
html body .icona-titolo { border: 0 !important; outline: 0 !important; box-shadow: none !important; }

/* via i nastri Consigliata/Esaurito dalle carte */
html body .carta-prodotto__nastro { display: none; }

/* la riga "gratis" dentro al bottone, dritta */
html body .carta-tariffa .bottone { display: flex; flex-direction: column; align-items: center; gap: 2px; }
html body .bottone-sotto { font-family: var(--testo); font-style: normal; font-weight: 600; font-size: 11.5px; letter-spacing: 0.02em; opacity: 0.85; }

/* indice della home: un solo pallino per divisione, icone anche alle voci nuove */
html body .servizi-indice a + a::before { content: ''; margin-inline: 0; }
html body .servizi-indice a[href="/funerale-prepagato"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10h18v9H3z'/><path d='M7 10V7a5 5 0 0 1 10 0v3'/></svg>"); }
html body .servizi-indice a[href="/preventivo"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B071' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3h12v18H6z'/><path d='M9 8h6M9 12h4M9 16h3'/></svg>"); }

/* carosello recensioni largo quanto il box sopra */
html body .rg-fila-guscio { margin-inline: 0; }
html body .rg-freccia--sx { left: -16px; }
html body .rg-freccia--dx { right: -16px; }

/* selettore lingua con le bandiere */
html body .lingua { position: relative; display: inline-flex; }
html body .cambia-lingua { padding: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
html body .cambia-lingua svg, html body .lingua__voce svg { width: 24px; height: 16px; border-radius: 2px; display: block; }
html body .lingua__tendina { position: absolute; top: calc(100% + 8px); right: 0; background: var(--carta); border: 1px solid var(--bordo); border-radius: 10px; padding: 8px; z-index: 400; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.6); }
html body .lingua__voce { display: flex; align-items: center; gap: 9px; background: none; border: 0; color: var(--inchiostro); font-size: 14px; padding: 7px 10px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
html body .lingua__voce:hover { background: rgba(217, 176, 113, 0.1); color: var(--oro-chiaro); }

html body .passi::after { animation-duration: 7s; }
html body .passo__segno, html body .passo h3::before { animation-duration: 7s; }
html body .passo:nth-child(1) .passo__segno, html body .passo:nth-child(1) h3::before { animation-delay: 0.05s; }
html body .passo:nth-child(2) .passo__segno, html body .passo:nth-child(2) h3::before { animation-delay: 1.5s; }
html body .passo:nth-child(3) .passo__segno, html body .passo:nth-child(3) h3::before { animation-delay: 2.9s; }
html body .passo:nth-child(4) .passo__segno, html body .passo:nth-child(4) h3::before { animation-delay: 4.3s; }

html body .testata-sezione { position: relative; }
html body .collegamento-titolo { position: absolute; right: 0; bottom: 6px; color: var(--bronzo); font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
html body .collegamento-titolo:hover { color: var(--bronzo-chiaro); }
@media (max-width: 760px) { html body .collegamento-titolo { position: static; display: inline-block; margin-top: 6px; } }

/* pacchetti: il sottotitolo non supera le tre righe */
html body .carta-tariffa .brindello { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Chiamaci subito: scritta nera */
html body .eroe__azioni .bottone--oro .scritta-fiorita { color: #1F1509; -webkit-text-fill-color: #1F1509; background: none; background-image: none; -webkit-background-clip: border-box; background-clip: border-box; }

/* garanzie sotto l eroe: titolo centrato sopra, icona e testo sotto */
html body .eroe__garanzie .garanzia { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; text-align: left; }
html body .eroe__garanzie .garanzia > b { flex: 0 0 100%; display: block; text-align: center; margin: 0; }
html body .eroe__garanzie .garanzia > span { flex: 1 1 0; min-width: 0; }

/* menu in alto: voci piu fitte, stesso spazio (18px) fra testo e divisore da entrambi i lati, freccina centrata */
html body .navigazione > * { padding-inline: 8px; }
html body .navigazione > * + * { padding-left: 8px; margin-left: 0; }
html body .navigazione .voce__testa, html body .navigazione .voce__solo { padding-inline: 10px; gap: 6px; }
html body .navigazione .voce__testa::after, html body .navigazione .voce__solo::after { left: 10px; right: 10px; }
html body .navigazione .voce__punta { transform: translateY(3px) rotate(45deg); }
html body .navigazione > .voce__solo { padding-inline: 18px; }

/* testata su schermo largo: il menu riempie lo spazio fra logo e telefono, voci piu grandi, passi uguali, divisore a meta fra una voce e l altra */
@media (min-width: 1001px) {
  html body .navigazione { flex: 1 1 auto; max-width: 980px; margin-inline: auto; gap: 0; justify-content: stretch; }
  html body .navigazione > * { flex: 1 1 0; display: flex; justify-content: center; padding-inline: 0; margin-left: 0; }
  html body .navigazione > .voce__solo { padding-inline: 0; }
  html body .navigazione .voce__testa, html body .navigazione .voce__solo { font-size: 19px; padding-inline: 14px; }
  html body .navigazione .voce__testa::after, html body .navigazione .voce__solo::after { left: 14px; right: 14px; }
}

/* testata: il box della bandiera alto come Cerca e gli altri tasti */
@media (min-width: 1001px) { html body .cambia-lingua { width: 46px; height: 44px; } }

/* Cerca: aperto o col mouse sopra resta come gli altri tasti, niente oro */
html body .apri-cerca[aria-expanded="true"], html body .apri-cerca:hover, html body .apri-cerca:focus-visible { background: transparent; border-color: rgba(217, 176, 113, 0.32); color: inherit; }

/* preventivo: prezzo tutto a destra, pallino e prezzo centrati rispetto a titolo + descrizione */
@media (min-width: 761px) {
  html body .pre-scelta:not(.pre-scelta--riga) { grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; }
  html body .pre-scelta:not(.pre-scelta--riga) input { grid-row: 1 / 3; align-self: center; }
  html body .pre-scelta:not(.pre-scelta--riga) b { grid-column: 2; grid-row: 1; }
  html body .pre-scelta:not(.pre-scelta--riga) span { grid-column: 2; grid-row: 2; }
  html body .pre-scelta:not(.pre-scelta--riga) i { grid-column: 3; grid-row: 1 / 3; align-self: center; justify-self: end; white-space: nowrap; }
}

/* preventivo: i numeri dei passi nello stile "noi" */
html body .pre-titolo .fiorito { font-weight: 400; }

/* preventivo: nome e telefono prima del tasto Chiamaci */
html body .pre-dati { display: grid; gap: 10px; margin: 16px 0 12px; }
html body .pre-campo { display: grid; gap: 5px; font-size: 12.5px; color: var(--fumo); }
html body .pre-campo input { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1px solid var(--bordo); border-radius: 8px; background: var(--carta); color: var(--inchiostro); font: inherit; font-size: 15px; }
html body .pre-campo input:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro-filo); }
html body .pre-esito { margin: 10px 0 0; font-size: 13.5px; color: var(--oro-chiaro); text-align: center; }
html body .pre-esito--male { color: #E08A8A; }

/* menu su schermo largo: testo centrato nella sua cella, riga hover larga quanto il testo */
@media (min-width: 1001px) {
  html body .navigazione > * { display: flex; justify-content: center; align-items: center; }
  html body .navigazione .voce__testa, html body .navigazione .voce__solo { flex: 0 0 auto; width: auto; justify-content: center; text-align: center; }
}

/* listino delle singole voci: tutto centrato */
html body table.tavola:has(#voci-listino) th, html body table.tavola:has(#voci-listino) td { text-align: center; }

/* preventivo: le categorie del negozio come gli occhielli (rombo + riga), foto piu grandi */
html body .pre-categoria.occhiello { margin: 22px 0 8px; font-size: 11.5px; }
html body .pre-foto { width: 72px; height: 72px; border-radius: 10px; }

/* garanzie sotto l eroe: il titolo riempie la larghezza del testo sotto, con due righe oro ai lati */
html body .eroe__garanzie .garanzia > b { display: flex; align-items: center; gap: 10px; font-size: 16px; letter-spacing: 0.02em; white-space: nowrap; }
html body .eroe__garanzie .garanzia > b::before, html body .eroe__garanzie .garanzia > b::after { content: ''; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(217, 176, 113, 0.55)); }
html body .eroe__garanzie .garanzia > b::after { background: linear-gradient(90deg, rgba(217, 176, 113, 0.55), transparent); }

/* Negozio online in alto a sinistra: il rombo e' un quadratino ruotato, non un carattere, cosi la sottolineatura non ci passa sotto */
html body .occhiello__negozio::before { content: ''; width: 7px; height: 7px; background: var(--bronzo); transform: rotate(45deg); display: block; text-decoration: none; }

/* tendine: sotto ogni voce una riga che spiega cos e */
html body .tendina__colonna a span { display: block; font-size: 12.5px; color: var(--fumo); margin-top: 2px; line-height: 1.35; }

/* menu in alto: voci larghe quanto il testo, stesso spazio fra ogni scritta e il suo divisore */
@media (min-width: 1001px) {
  html body .navigazione { justify-content: center; }
  html body .navigazione > * { flex: 0 0 auto; padding-inline: 20px; }
}

/* pagina prodotto: finche la scheda non e disegnata il piede non fa vedere la sua riga */
html body:has(#scheda[aria-busy="true"]) .divisore--piede { visibility: hidden; }

/* preventivo: foto a schermo grande */
html body .pre-foto { cursor: zoom-in; }
html body .pre-lucernario { position: fixed; inset: 0; z-index: 9999; background: rgba(6, 14, 16, 0.92); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
html body .pre-lucernario img { max-width: min(92vw, 1100px); max-height: 90vh; border-radius: 12px; background: #fff; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8); }

/* preventivo: voce inclusa nel pacchetto scelto */
html body .pre-riga--inclusa { border-color: rgba(217, 176, 113, 0.45); }
html body .pre-riga--inclusa .pre-riga__prezzo { color: var(--oro-chiaro); font-style: italic; }

/* pannello: prezziari modificabili */
html body .prezzario-blocco { margin: 0 0 26px; padding: 16px; border: 1px solid var(--bordo); border-radius: 10px; }
html body .prezzario-blocco__testa { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; font-size: 17px; }
html body .prezzario-griglia { display: grid; gap: 6px; align-items: center; margin-bottom: 10px; }
html body .prezzario-griglia .campo { width: 100%; box-sizing: border-box; padding: 8px 10px; font: inherit; font-size: 14px; border: 1px solid var(--bordo); border-radius: 6px; background: var(--carta); color: var(--inchiostro); }
html body .prezzario-griglia .campo--testa { font-weight: 700; color: var(--oro); text-transform: uppercase; font-size: 12px; letter-spacing: 0.08em; }

/* preventivo: riga senza foto, il riquadro dice dove metterla */
html body .pre-foto--vuota { display: flex; align-items: center; justify-content: center; text-align: center; font-size: 10px; line-height: 1.2; color: var(--fumo); background: var(--carta); border: 1px dashed var(--bordo); cursor: default; padding: 4px; box-sizing: border-box; }

/* pannello: foto nelle righe dei prezziari */
html body .prezzario-foto { width: 48px; height: 48px; padding: 0; border: 1px dashed var(--bordo); border-radius: 6px; background: var(--carta); color: var(--oro); font-size: 20px; cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center; }
html body .prezzario-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* pannello: icona davanti a ogni voce del menu laterale */
html body .voce-lato { display: flex; align-items: center; gap: 10px; }
html body .voce-lato__icona { width: 17px; height: 17px; flex: none; opacity: 0.75; }
html body .voce-lato.attiva .voce-lato__icona { opacity: 1; color: var(--oro); }
html body .voce-lato .pallino { margin-left: auto; }

/* tendine: piu compatte, quattro colonne per Servizi */
@media (min-width: 1001px) {
  html body .tendina__interno { padding: 26px 32px; gap: 0 26px; }
  html body .tendina__colonna a { padding-top: 7px; padding-bottom: 7px; }
  html body .tendina__colonna a b { font-size: 14.5px; }
  html body .tendina__colonna a span { font-size: 11.5px; line-height: 1.3; margin-top: 1px; }
  html body .tendina__titolo { margin-bottom: 8px; }
}

/* cassetto del carrello: "Togli" al posto del prezzo, titolo e conteggio sulla stessa linea */
html body .riga-cassetto__togli { background: none; border: 0; padding: 0; color: var(--oro-chiaro); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
html body .riga-cassetto__togli:hover { color: var(--oro); }
html body .cassetto__testa { align-items: baseline; }

/* ricerca: il pannello finisce poco sotto il testo, e il testo sta al centro */
html body .cerca { height: auto !important; min-height: 0 !important; max-height: calc(100vh - 78px); bottom: auto !important; padding-bottom: 18px; }
html body .cerca__esiti { min-height: 0 !important; max-height: calc(100vh - 200px); padding-bottom: 6px; }
html body .cerca__niente { text-align: center; }

/* pannello, riepilogo: tre carte che riempiono la riga, tutto centrato, icona sopra */
html body .griglia-numeri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
html body .griglia-numeri .numero { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 150px; }
html body .numero__icona { width: 26px; height: 26px; color: var(--oro); margin-bottom: 10px; }
html body .numero__etichetta { text-align: center; }
@media (max-width: 760px) { html body .griglia-numeri { grid-template-columns: 1fr; } }

/* pannello, menu laterale: testo da sinistra, icone oro come nel sito */
html body .voce-lato { justify-content: flex-start; text-align: left; }
html body .voce-lato__icona { color: var(--oro); opacity: 0.9; }
html body .voce-lato.attiva .voce-lato__icona { color: var(--oro-chiaro); opacity: 1; }

/* ricerca: niente spazio vuoto sotto il messaggio */
html body .cerca { padding-bottom: 6px !important; }
html body .cerca > .contenitore { padding-bottom: 0 !important; margin-bottom: 0 !important; }
html body .cerca__esiti { padding-bottom: 0 !important; margin-bottom: 0 !important; }
html body .cerca__niente { margin: 14px 0 0 !important; padding: 0 0 6px !important; }
html body .cerca__suggerimenti[style*="none"] { display: none !important; }

/* telefono: le tendine tornano a una colonna sola e senza le descrizioni, solo i titoli */
@media (max-width: 1000px) {
  html body .tendina__interno { display: block !important; padding: 4px 10px 12px !important; }
  html body .tendina__colonna { width: auto !important; max-width: none !important; margin: 0 0 8px !important; }
  html body .tendina__colonna a span { display: none !important; }
  html body .tendina__colonna a b { white-space: normal; }
}

/* tendina Servizi su desktop: quattro colonne, piu larga, colonne che si stringono senza uscire dal riquadro */
@media (min-width: 1001px) {
  html body .navigazione .voce:first-child .tendina { width: 1080px; max-width: min(1080px, 94vw); }
  html body .tendina__colonna { flex: 1 1 0; min-width: 0; padding: 0 22px; }
  html body .tendina__colonna a b { white-space: normal; }
}

/* telefono, le prime ore: via la riga oro verticale; ogni rombo resta acceso 15 secondi, uno dopo l altro */
@media (max-width: 1080px) {
  html body .passo::before { display: none !important; content: none !important; }
  html body .passo__segno { animation: lampoRomboLento 60s linear infinite !important; }
  html body .passo h3::before { animation: lampoNumeroLento 60s linear infinite !important; }
  html body .passo:nth-child(1) .passo__segno, html body .passo:nth-child(1) h3::before { animation-delay: 0s !important; }
  html body .passo:nth-child(2) .passo__segno, html body .passo:nth-child(2) h3::before { animation-delay: 15s !important; }
  html body .passo:nth-child(3) .passo__segno, html body .passo:nth-child(3) h3::before { animation-delay: 30s !important; }
  html body .passo:nth-child(4) .passo__segno, html body .passo:nth-child(4) h3::before { animation-delay: 45s !important; }
}
@keyframes lampoRomboLento {
  0%, 24% { transform: rotate(45deg) scale(1.35); filter: brightness(2.2) drop-shadow(0 0 10px rgba(143, 211, 217, 1)); }
  25%, 100% { transform: rotate(45deg) scale(1); filter: brightness(1) drop-shadow(0 0 0 rgba(143, 211, 217, 0)); }
}
@keyframes lampoNumeroLento {
  0%, 24% { color: var(--oro); text-shadow: 0 0 10px rgba(217, 176, 113, 0.7); }
  25%, 100% { color: var(--bordo); text-shadow: none; }
}

/* telefono, le prime ore: il bagliore scorre in verticale lungo i rombi, 15 secondi per passo */
@media (max-width: 1080px) {
  html body .passi::after {
    content: '' !important; display: block !important; position: absolute; left: 5px; top: 0; bottom: 0; right: auto;
    width: 3px; height: auto; border-radius: 3px; transform: none; opacity: 1; filter: none; pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(143, 211, 217, 0.85) 75%, #E9FBFC) no-repeat 0 -170px / 100% 170px;
    animation: bagliorePassiVerticale 60s linear infinite !important;
  }
}
@keyframes bagliorePassiVerticale {
  0% { background-position: 0 -170px; }
  100% { background-position: 0 calc(100% + 170px); }
}

/* testata sopra i 1000px: il menu si stringe per non finire sopra il telefono, ma con gradualita
   e non a scatti. Le misure seguono la larghezza della finestra in vw, che - a differenza delle
   media query - non cambia quando la pagina ha la barra di scorrimento: cosi la testata e identica
   in tutte le pagine, lunghe o corte, e sopra i 1500px resta sempre quella larga. */
@media (min-width: 1001px) {
  html body .navigazione > * { padding-inline: clamp(8px, calc(2.4vw - 16px), 20px); }
  html body .navigazione .voce__testa, html body .navigazione .voce__solo {
    font-size: clamp(16px, calc(1.5vw - 3px), 19px);
    padding-inline: clamp(8px, calc(1.2vw - 4px), 14px);
    gap: 6px;
  }
  html body .navigazione .voce__testa::after, html body .navigazione .voce__solo::after {
    left: clamp(8px, calc(1.2vw - 4px), 14px);
    right: clamp(8px, calc(1.2vw - 4px), 14px);
  }
}

/* tasto Chiamaci subito dei pacchetti: scritta grande, nota subito sotto, tutto centrato nel box */
html body .carta-tariffa .bottone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 13px 22px; line-height: 1.15; }
html body .carta-tariffa .bottone .scritta-noi { font-size: 22px; line-height: 1.1; font-weight: 700; }
html body .carta-tariffa .bottone .bottone-sotto { font-size: 12.5px; line-height: 1.1; opacity: 0.9; }

/* telefono: la bandiera della lingua non si vede, resta solo da pc */
@media (max-width: 1000px) { html body .lingua { display: none !important; } }

/* telefono, garanzie sotto l eroe: stesso respiro fra titolo e testo e fra un blocco e l altro */
@media (max-width: 1000px) {
  html body .eroe__garanzie { gap: 12px; }
  html body .eroe__garanzie .garanzia { gap: 10px 12px; }
  html body .eroe__garanzie .garanzia > b { margin: 0; }
  html body .eroe__garanzie .garanzia > span { margin: 0; }
}

/* telefono: "Nemmeno il nostro telefono" nello stile fiorito del "noi", come a pc */
@media (max-width: 760px) {
  html body .lumino__didascalia b {
    background-image: linear-gradient(rgba(178, 238, 244, 0.42), rgba(178, 238, 244, 0.42)), url(/img/fiori.png) !important;
    background-size: cover, cover !important;
    background-position: center 38% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
  }
}

/* telefono, preventivo: ogni riga su due piani, foto e testo sopra, prezzo e contatore sotto */
@media (max-width: 760px) {
  html body .pre-riga { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 6px 12px; align-items: center; padding: 12px 0; }
  html body .pre-riga .pre-foto { grid-row: 1 / 3; grid-column: 1; width: 56px; height: 56px; font-size: 9px; }
  html body .pre-riga__testo { grid-column: 2 / 4; grid-row: 1; }
  html body .pre-riga__prezzo { grid-column: 2; grid-row: 2; justify-self: start; text-align: left; font-size: 17px; }
  html body .pre-riga .pre-conta { grid-column: 3; grid-row: 2; justify-self: end; }
  html body .pre-riga:not(:has(.pre-foto)) { grid-template-columns: minmax(0, 1fr) auto; }
  html body .pre-riga:not(:has(.pre-foto)) .pre-riga__testo { grid-column: 1 / 3; }
  html body .pre-riga:not(:has(.pre-foto)) .pre-riga__prezzo { grid-column: 1; }
  html body .pre-riga:not(:has(.pre-foto)) .pre-conta { grid-column: 2; }
  html body .pre-riga__testo b { font-size: 15.5px; }
  html body .pre-riga__testo span { font-size: 12.5px; }
  html body .pre-titolo { font-size: 21px; }
}

/* voci dei pacchetti: tutta la riga risponde al mouse e al tocco, non solo la parte col testo */
html body .carta-tariffa .elenco-segni li { display: flex !important; width: 100% !important; align-self: stretch; box-sizing: border-box; }
html body .carta-tariffa .elenco-segni li > * { pointer-events: auto; }

/* telefono: "Vai al negozio" subito sotto il titolo Articoli funerari, nel colore dell occhiello Negozio */
@media (max-width: 760px) {
  html body .collegamento-titolo { position: static !important; display: block !important; width: fit-content; margin: 8px 0 4px !important; color: var(--bronzo) !important; font-size: 15px; }
  html body .testata-sezione .titolo-sezione + .collegamento-titolo { order: 2; }
}
html body .collegamento-titolo { color: var(--bronzo); }
html body .collegamento-titolo:hover { color: var(--bronzo-chiaro); }

/* telefono, pacchetti: stesso spazio sopra "Cosa non facciamo pagare" e sotto, fino al divisore */
@media (max-width: 760px) {
  html body .non-paghi { margin-top: 64px !important; }
}

/* telefono, le prime ore: quando passi.js e vivo comanda lui (bagliore verticale e rombi), niente animazioni CSS */
@media (max-width: 1080px) {
  html body .passi.passi--vivo::after { animation: none !important; background-position: 0 var(--bagliore-y, -170px) !important; }
  html body .passi.passi--vivo .passo__segno, html body .passi.passi--vivo .passo h3::before { animation: none !important; transition: filter 0.25s ease, transform 0.25s ease, color 0.25s ease, text-shadow 0.25s ease; }
  html body .passi.passi--vivo .passo.acceso .passo__segno { transform: rotate(45deg) scale(1.35) !important; filter: brightness(2.2) drop-shadow(0 0 10px rgba(143, 211, 217, 1)) !important; }
  html body .passi.passi--vivo .passo.acceso h3::before { color: var(--oro) !important; text-shadow: 0 0 10px rgba(217, 176, 113, 0.7) !important; }
  html body .passi.passi--vivo .passo:not(.acceso) .passo__segno { transform: rotate(45deg) scale(1) !important; filter: none !important; }
  html body .passi.passi--vivo .passo:not(.acceso) h3::before { color: var(--bordo) !important; text-shadow: none !important; }
}

/* telefono: il menu aperto e un pannello fisso sotto la testata, scorre da solo in su e in giu, la pagina sotto resta ferma */
@media (max-width: 1000px) {
  html body .navigazione.aperta { position: fixed !important; top: var(--altezza-testata, 66px) !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: auto !important; max-height: none !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; z-index: 90; }
  html:has(.navigazione.aperta), html:has(.navigazione.aperta) body { overflow: hidden !important; }
  html body .navigazione.aperta .voce::before { top: 0; bottom: 0; height: auto; }
}

/* telefono, piede: il testo "Impresa funebre di famiglia" centrato */
@media (max-width: 760px) {
  html body .piede__marchio { align-items: center !important; text-align: center !important; }
  html body .piede__marchio img, html body .piede__marchio a, html body .piede__marchio p { margin-left: auto !important; margin-right: auto !important; align-self: center !important; text-align: center !important; }
}

/* touch: il tasto del menu (e gli altri tasti della testata) non restano "in hover" dopo il tocco */
@media (hover: none) {
  html body .apri-menu:hover, html body .apri-menu:focus, html body .apri-menu[aria-expanded="true"],
  html body .apri-cerca:hover, html body .carrello-scorciatoia:hover, html body .whatsapp-testata:hover, html body .numero-testata:hover {
    border-color: rgba(255, 255, 255, 0.75) !important; color: inherit !important; background: transparent !important; transform: none !important; box-shadow: none !important;
  }
}

/* telefono, piede: il blocco del logo largo quanto la colonna, cosi sta al centro */
@media (max-width: 760px) {
  html body .piede__marchio { width: 100% !important; max-width: none !important; }
}

/* telefono, cerca nel catalogo: lente a sinistra come la X a destra, testo subito dopo la lente */
@media (max-width: 760px) {
  html body .cerca-catalogo { position: relative; }
  html body .cerca-catalogo__lente { position: absolute !important; left: 14px !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; pointer-events: none; }
  html body .cerca-catalogo input { padding-left: 24px !important; padding-right: 44px !important; text-indent: 0 !important; }
  html body .cerca-catalogo__pulisci { position: absolute !important; right: 12px !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; }
}

/* Klarna in evidenza: sotto il tasto dell eroe e nel prezziario, marchio rosa come quello vero */
html body .klarna-marchio, html body .tariffe-rate::before { display: inline-block; background: #FFB3C7; color: #0E0E0E; font-weight: 800; font-size: 12.5px; letter-spacing: 0.01em; padding: 4px 9px; border-radius: 6px; line-height: 1; font-style: normal; }
html body .eroe__klarna { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; font-size: 14.5px; color: #A9B7B2; }
html body .eroe__klarna b { color: #E4EAE7; font-weight: 600; }
html body .tariffe-rate { display: inline-flex !important; align-items: center; gap: 10px; margin: 0 0 26px; padding: 8px 14px 8px 8px; border: 1px solid rgba(255, 179, 199, 0.38); border-radius: 999px; font-size: 14.5px; color: #C9D3CF; }
html body .tariffe-rate::before { content: 'Klarna.'; }
html body .tariffe-rate ~ .prosa { margin-top: 0; }
@media (max-width: 760px) { html body .eroe__klarna { justify-content: center; text-align: left; } html body .tariffe-rate { display: flex !important; } }

/* pillola Klarna del prezziario: testo compatto, marchio staccato di 10px */
html body .tariffe-rate { gap: 0; }
html body .tariffe-rate::before { margin-right: 10px; }

/* Chiamaci subito nei pacchetti: il carattere serif non ha il grassetto vero, lo si ispessisce col tratto */
html body .carta-tariffa .bottone .scritta-noi { -webkit-text-stroke: 0.6px currentColor; }

/* preventivo: meno vuoto fra l intro e "1. Parti da un pacchetto" */
html body main#principale.sezione:has(.preventivo-guscio) { padding-top: 8px !important; }
html body .preventivo-colonna > .pre-titolo:first-child { margin-top: 0 !important; }

/* preventivo: le voci incluse nel pacchetto in celeste (il verde-acqua del sito), non in oro */
html body .pre-riga--inclusa { border-color: rgba(127, 212, 196, 0.45); }
html body .pre-riga--inclusa .pre-riga__prezzo { color: #7FD4C4; }
/* la voce inclusa nel pacchetto e' celeste, non oro: la classe attiva ha la stessa specificita', qui vince perche' viene dopo */
html body .pre-riga.pre-riga--inclusa .pre-riga__testo b { color: #7FD4C4; }
html body .pre-voce-riepilogo b { color: inherit; }
html body .pre-voce-riepilogo:has(b):not(:has(span)) { color: inherit; }
html body .pre-voce-riepilogo--inclusa b { color: #7FD4C4; }

/* prezziario: la pillola Klarna sotto i pacchetti non serve, resta solo quella in alto nell eroe */
html body .tariffe-rate { display: none !important; }
html body .sezione:has(+ #principale .preventivo-guscio) { padding-bottom: 14px !important; }
html body #principale.sezione:has(.preventivo-guscio) .contenitore { padding-top: 0 !important; }

/* "Vai al negozio": anche la sottolineatura nello stesso oro dell occhiello */
html body .collegamento-titolo { text-decoration-color: currentColor; }

/* telefono, scheda articolo: i divisori fra Materiale, Dimensioni, Capacita si vedono */
@media (max-width: 760px) {
  html body .tabella-specifiche tr:not(:last-child) th, html body .tabella-specifiche tr:not(:last-child) td { background: none !important; border-bottom: 1px solid rgba(217, 176, 113, 0.5) !important; }
}

/* scheda articolo: "Aggiungi al carrello" dritto, non in corsivo */
html body #metti, html body .scheda-prodotto .bottone--primario { font-style: normal !important; }

/* recensioni Google: la B di Berna in alto a destra del riquadro */
html body .rg-cappello { position: relative; }
html body .rg-berna { width: 44px; height: 44px; border-radius: 10px; background: #fff; object-fit: cover; flex: none; margin-left: 14px; box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.7); }
@media (max-width: 760px) {
  html body .rg-berna { position: absolute; top: 0; right: 0; margin: 0; width: 40px; height: 40px; }
  html body .rg-cappello__sinistra { padding-right: 54px; }
}

/* recensioni: niente aggancio a scatti, cosi lo scorrimento lento non viene riportato indietro */
html body .rg-fila { scroll-snap-type: none !important; }

/* pillola Klarna dell eroe: centrata sul testo */
html body .eroe__klarna .klarna-marchio { transform: translateY(-2px); }

/* recensioni: la B di Berna solo da telefono, da pc il riquadro resta com era */
@media (min-width: 761px) { html body .rg-berna { display: none !important; } }

/* recensioni: la fila non scorre piu da sola col browser, si muove la pista dentro (fluida, frazionaria) */
html body .rg-fila { overflow: hidden !important; scroll-snap-type: none !important; touch-action: pan-y; cursor: grab; }
html body .rg-fila:active { cursor: grabbing; }
html body .rg-pista { display: flex; gap: 16px; width: max-content; will-change: transform; }
html body .rg-pista > .rg-carta { flex: 0 0 auto; }

/* pillola Klarna dell eroe: ancora un filo piu in alto, centrata sul testo */
html body .eroe__klarna .klarna-marchio { transform: translateY(-3px); }

/* tendine da pc: piu aria fra il filo oro in alto e i titoli delle colonne */
@media (min-width: 1001px) { html body .tendina__interno { padding-top: 36px; } }

/* Klarna nell eroe: la riga sta al centro del tasto Chiamaci subito, non spostata in basso */
html body .eroe__azioni { align-items: center; }
html body .eroe__klarna { margin: 0 0 0 18px !important; align-self: center; }
html body .eroe__klarna .klarna-marchio { transform: translateY(-1px); }
@media (max-width: 760px) { html body .eroe__klarna { margin: 14px 0 0 !important; } }

/* pc, eroe: il lumino tutto a destra, col bordo alla stessa distanza che ha "Da questo momento" da sinistra */
@media (min-width: 1001px) {
  html body .eroe__griglia .lumino { justify-self: end !important; margin-left: 0 !important; margin-right: 0 !important; width: max-content; max-width: 100%; }
}

/* vetrina in home: quando gli articoli cambiano, il vecchio giro svanisce sopra il nuovo (niente vuoto) */
html body .vetrina-vecchia { position: absolute !important; inset: 0; margin: 0 !important; pointer-events: none; opacity: 1; transition: opacity 0.55s ease; z-index: 2; }
html body .vetrina-vecchia--via { opacity: 0; }
html body .griglia-prodotti.esce, html body .piastrelle.esce { opacity: 1 !important; }

/* pagine dei servizi (Inumazione ecc.): nella prosa niente grassetto dentro paragrafi ed elenchi */
html body .prosa p b, html body .prosa p strong, html body .prosa li b, html body .prosa li strong { font-weight: 400; color: inherit; }

/* recensioni: le carte sulla pista tengono la larghezza fissa di sempre (le frecce non le deformano piu) */
html body .rg-pista > .rg-carta { flex: 0 0 272px !important; width: 272px; box-sizing: border-box; }
@media (max-width: 760px) { html body .rg-pista > .rg-carta { flex: 0 0 min(272px, 78vw) !important; width: min(272px, 78vw); } }

/* pc, eroe: le due colonne si aprono fino ai bordi, cosi il lumino arriva al bordo destro */
@media (min-width: 1001px) { html body .eroe__griglia { justify-content: space-between; } }

/* tendine da pc: un po piu di spazio fra il titolo della colonna e la prima voce */
@media (min-width: 1001px) { html body .tendina__titolo { margin-bottom: 14px; } }
@media (min-width: 1001px) { html body .tendina__colonna a span { margin-top: 4px !important; } }

/* testata: il tasto della bandiera alto come Cerca e gli altri, stesso raggio e bordo */
@media (min-width: 1001px) {
  html body .lingua { display: flex; align-self: stretch; }
  html body .cambia-lingua { height: auto !important; align-self: stretch; min-height: 0; width: 52px; border-radius: var(--raggio); }
}

/* carrello vuoto: niente pallino con lo zero */
html body .carrello-scorciatoia__conteggio:not(.visibile) { display: none !important; }

/* negozio, nessun risultato: stesso spazio sopra e sotto il messaggio */
html body #niente { padding: 34px 0 0 !important; }

/* tendine da pc: titolo e descrizione della voce attaccati, senza vuoto in mezzo */
@media (min-width: 1001px) {
  html body .tendina__colonna a { row-gap: 0 !important; gap: 0 12px !important; }
  html body .tendina__colonna a b { margin: 0 !important; line-height: 1.15 !important; }
  html body .tendina__colonna a span { margin-top: 1px !important; line-height: 1.25 !important; }
}