/* ==================================================================
   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: 'La piu richiesta';
  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; }

@media (prefers-reduced-motion: reduce) {
  [data-rivela] { opacity: 1 !important; transform: none !important; }
}

/* ---------- 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; }