/* Centro Look Maker — home (step 5). Colori misurati dal design del kit (confronta-design.py --colori). */

@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-latin-opsz-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --avorio: #FAF7F2;
  --avorio-chiaro: #FCFAF6;
  --cipria-chiara: #F7F1ED;
  --cipria: #F5E4E3;
  --rosa: #F2E3E1;
  --linea: #E7D6D7;
  --bordeaux: #8A0C34;
  --bordeaux-scuro: #7C0A2F;
  --vino: #6E0A2A;
  --inchiostro: #141414;
  --testo: #4A4442;
  --testo-tenue: #7A7270;
  --bianco: #FFFFFF;

  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --margine: max(20px, env(safe-area-inset-left, 0px));
  --margine-dx: max(20px, env(safe-area-inset-right, 0px));
  --larghezza: 1312px;
  --raggio: 4px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --testata-h: 72px;
}
@media (min-width: 768px) {
  :root { --margine: max(40px, env(safe-area-inset-left, 0px)); --margine-dx: max(40px, env(safe-area-inset-right, 0px)); }
}
@media (min-width: 1200px) {
  :root { --margine: 64px; --margine-dx: 64px; --testata-h: 112px; }
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--testata-h) + 12px);
}
html.menu-aperto { overflow: hidden; }
body {
  margin: 0;
  background: var(--avorio);
  color: var(--testo);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a, button { touch-action: manipulation; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { color: var(--inchiostro); font-family: var(--serif); font-weight: 500; line-height: 1.04; letter-spacing: -0.025em; }
em { font-style: italic; color: var(--bordeaux); }
:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 3px; border-radius: 2px; }

.contenitore {
  width: 100%;
  max-width: calc(var(--larghezza) + var(--margine) + var(--margine-dx));
  margin-inline: auto;
  padding-left: var(--margine);
  padding-right: var(--margine-dx);
}
[hidden] { display: none !important; }
.nascosto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salta { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--bordeaux); color: var(--bianco); padding: 10px 16px; border-radius: var(--raggio); text-decoration: none; }
.salta:focus { top: 12px; }

/* ── icone del kit (PNG usate come maschera, colorate dal CSS) ─────────────────────── */
.ico {
  display: inline-block;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  background-color: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
  vertical-align: middle;
}
.ico--medio { width: 42px; height: 42px; color: var(--bordeaux); }
.ico--grande { width: 52px; height: 52px; color: var(--bordeaux); }
.ico--forbici { --m: url("/assets/img/icone/forbici.png"); }
.ico--colore { --m: url("/assets/img/icone/colore.png"); }
.ico--onde-ricci { --m: url("/assets/img/icone/onde-ricci.png"); }
.ico--extension { --m: url("/assets/img/icone/extension.png"); }
.ico--sposa { --m: url("/assets/img/icone/sposa.png"); }
.ico--infoltimento { --m: url("/assets/img/icone/infoltimento.png"); }
.ico--viso { --m: url("/assets/img/icone/viso.png"); }
.ico--laser { --m: url("/assets/img/icone/laser.png"); }
.ico--unghie { --m: url("/assets/img/icone/unghie.png"); }
.ico--parrucca { --m: url("/assets/img/icone/parrucca.png"); }
.ico--turbante { --m: url("/assets/img/icone/turbante.png"); }
.ico--consulenza { --m: url("/assets/img/icone/consulenza.png"); }
.ico--ricerca { --m: url("/assets/img/icone/ricerca.png"); }
.ico--filtri { --m: url("/assets/img/icone/filtri.png"); }
.ico--freccia-destra { --m: url("/assets/img/icone/freccia-destra.png"); }
.ico--freccia-sinistra { --m: url("/assets/img/icone/freccia-sinistra.png"); }
.ico--freccia-diagonale { --m: url("/assets/img/icone/freccia-diagonale.png"); }
.ico--piu { --m: url("/assets/img/icone/piu.png"); }
.ico--meno { --m: url("/assets/img/icone/meno.png"); }
.ico--chiudi { --m: url("/assets/img/icone/chiudi.png"); }
.ico--menu { --m: url("/assets/img/icone/menu.png"); }
.ico--persone { --m: url("/assets/img/icone/persone.png"); }
.ico--stella { --m: url("/assets/img/icone/stella.png"); }
.ico--fiore-estetica { --m: url("/assets/img/icone/fiore-estetica.png"); }
.ico--instagram { --m: url("/assets/img/icone/instagram.png"); }
.ico--facebook { --m: url("/assets/img/icone/facebook.png"); }

/* ── pulsanti e link ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 52px;
  padding: 12px 28px;
  border-radius: var(--raggio);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid var(--bordeaux);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .16s var(--ease-out);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.btn .ico { width: 15px; height: 15px; }
.btn--pieno { background: var(--bordeaux); color: var(--bianco); }
.btn--bordo { background: transparent; color: var(--bordeaux); }
.btn--piccolo { min-height: 44px; padding: 10px 20px; font-size: 16px; }
.btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .btn--pieno:hover { background: var(--bordeaux-scuro); border-color: var(--bordeaux-scuro); }
  .btn--bordo:hover { background: var(--bordeaux); color: var(--bianco); }
}
.link-freccia {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 2px 0 6px;
  color: var(--bordeaux);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  -webkit-user-select: none;
  user-select: none;
}
.link-freccia .ico { width: 13px; height: 13px; transition: transform .2s var(--ease-out); }
.link-freccia:active { opacity: .7; }
@media (hover: hover) and (pointer: fine) {
  .link-freccia:hover .ico { transform: translate(2px, -2px); }
}

.occhiello {
  display: block;
  color: var(--inchiostro);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.occhiello::before { content: ""; display: inline-block; vertical-align: middle; width: 40px; height: 2px; margin: -2px 18px 0 0; background: var(--bordeaux); }
@media (max-width: 560px) { .occhiello { letter-spacing: .2em; font-size: 11.5px; } .occhiello::before { width: 28px; margin-right: 12px; } }
.occhiello--chiaro { color: var(--bianco); }
.occhiello--chiaro::before { background: var(--bianco); }
.titolo-sezione { font-size: clamp(36px, 5vw, 72px); margin-top: 16px; }
.sottotitolo { margin-top: 12px; font-size: clamp(16px, 1.45vw, 20px); color: var(--testo); max-width: 62ch; }

/* onde disegnate, come nel design */
.onde { position: absolute; pointer-events: none; fill: none; stroke-linecap: round; }
.onde path { stroke: var(--linea); stroke-width: 10; }
.onde path:nth-child(2) { stroke: var(--rosa); stroke-width: 14; }
.onde path:nth-child(3) { stroke: var(--cipria); stroke-width: 6; }

/* ── barra in alto ─────────────────────────────────────────────────────────────────── */
.topbar { background: var(--cipria-chiara); border-bottom: 1px solid var(--linea); font-size: 13px; color: var(--inchiostro); }
.topbar__riga { display: flex; align-items: center; justify-content: space-between; min-height: 36px; }
.social { display: flex; gap: 6px; }
.social a { display: grid; place-items: center; width: 36px; height: 36px; color: var(--inchiostro); }
.social .ico { width: 18px; height: 18px; }
.social a:active { opacity: .6; }

/* ── testata ───────────────────────────────────────────────────────────────────────── */
.testata {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--avorio-chiaro);
  border-bottom: 1px solid var(--linea);
  padding-top: env(safe-area-inset-top, 0px);
}
.testata__riga { display: flex; align-items: center; gap: 24px; height: var(--testata-h); }
.logo { display: block; flex: none; margin-right: auto; }
.logo img { width: auto; height: calc(var(--testata-h) - 8px); }
.menu ul { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 46px); }
.menu a:not(.btn) {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  color: var(--inchiostro);
  font-size: 17px;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
}
.menu a:not(.btn)::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 2px;
  height: 1px; background: var(--bordeaux);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .menu a:not(.btn):hover::after { transform: scaleX(1); }
}
.menu__prenota { display: none; }
.testata__prenota { flex: none; }
.testata__menu { display: none; width: 44px; height: 44px; place-items: center; color: var(--inchiostro); border-radius: var(--raggio); }
.testata__menu .ico { width: 26px; height: 26px; }
.testata__menu:active { background: var(--cipria); }

@media (min-width: 1360px) {
  .menu { margin-right: 16px; }
  .testata__prenota { min-height: 58px; padding: 12px 30px; font-size: 18px; }
}
@media (max-width: 1359px) {
  .testata__riga { gap: 10px; }
  .testata__menu { display: grid; }
  .testata__prenota { min-height: 44px; padding: 8px 16px; font-size: 15px; gap: 8px; }
  .testata__prenota .ico { width: 12px; height: 12px; }
  .menu {
    position: fixed;
    inset: var(--menu-top, calc(var(--testata-h) + env(safe-area-inset-top, 0px))) 0 0 0;
    height: calc(100dvh - var(--menu-top, calc(var(--testata-h) + env(safe-area-inset-top, 0px))));
    background: var(--avorio-chiaro);
    padding: 24px var(--margine-dx) calc(32px + env(safe-area-inset-bottom, 0px)) var(--margine);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s var(--ease-out), visibility 0s linear .2s;
  }
  .menu.aperto { visibility: visible; opacity: 1; transform: none; transition: opacity .28s ease, transform .28s var(--ease-out); }
  .menu ul { flex-direction: column; align-items: stretch; gap: 0; }
  .menu li { border-bottom: 1px solid var(--linea); }
  .menu a:not(.btn) { display: block; padding: 16px 0; font-family: var(--serif); font-size: 28px; letter-spacing: -0.01em; }
  .menu a:not(.btn)::after { display: none; }
  .menu a:not(.btn):active { color: var(--bordeaux); }
  .menu__prenota { display: flex; width: 100%; margin-top: 28px; }
}
@media (max-width: 420px) {
  .testata__prenota { padding: 8px 12px; }
}

/* ── hero ──────────────────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; background: var(--avorio-chiaro); }
.hero__foto { position: relative; }
.hero__foto img, .hero__foto video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__firma {
  position: absolute;
  right: clamp(16px, 4vw, 40px);
  bottom: clamp(16px, 4vw, 34px);
  color: var(--bianco);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.9vw, 27px);
  line-height: 1.15;
  text-align: right;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
.hero__testo { position: relative; z-index: 2; }
.hero h1 { font-size: clamp(50px, 7.4vw, 112px); line-height: .98; letter-spacing: -0.035em; margin-top: 22px; font-weight: 500; }
.hero h1 em { font-weight: 450; letter-spacing: -0.03em; }
.hero .hero__sotto { margin-top: 18px; font-size: clamp(17px, 1.75vw, 25px); line-height: 1.4; color: var(--testo); max-width: 35ch; }
.azioni { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 30px; }
.azioni--centro { justify-content: center; }
.hero .azioni .btn { min-width: 0; }
.onde--hero { left: -2%; bottom: 0; width: 66%; height: 46%; z-index: 0; }

@media (min-width: 900px) {
  .hero { min-height: clamp(520px, 40vw, 600px); display: flex; align-items: center; }
  .hero__foto {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 56%;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26%);
    mask-image: linear-gradient(to right, transparent 0, #000 26%);
  }
  .hero__foto { z-index: 1; }
  .hero__foto img, .hero__foto video { object-position: 50% 40%; }
  .hero__testo { padding-top: 56px; padding-bottom: 64px; }
  .hero__testo > * { max-width: 760px; }
  .hero .azioni .btn { min-width: 330px; min-height: 56px; font-size: 18px; }
  .hero .azioni .btn--bordo { min-width: 230px; }
}
@media (max-width: 899px) {
  .hero__foto { height: min(64svh, 118vw); max-height: 560px; }
  .hero__foto img, .hero__foto video { object-position: 50% 18%; }
  .hero__foto::after { content: ""; position: absolute; inset: auto 0 0 0; height: 32%; background: linear-gradient(to top, var(--avorio-chiaro), rgba(252, 250, 246, 0)); }
  .hero__firma { bottom: 34%; }
  .hero__testo { margin-top: -44px; padding-bottom: 40px; }
  .onde--hero { width: 120%; height: 30%; left: -20%; }
  .azioni .btn { flex: 1 1 100%; }
}

/* ── striscia dei servizi ──────────────────────────────────────────────────────────── */
.striscia { background: var(--avorio-chiaro); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.striscia__lista { display: grid; grid-template-columns: repeat(5, 1fr); }
.striscia__lista li { position: relative; display: flex; }
.striscia__lista li + li::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 46px; margin-top: -23px; background: rgba(138, 12, 52, .22); }
.striscia__lista a {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 22px;
  min-height: 96px; padding: 12px 16px;
  color: var(--inchiostro); font-size: 19px; text-decoration: none;
  transition: background-color .2s ease;
  -webkit-user-select: none; user-select: none;
}
.striscia__lista .ico { width: 54px; height: 54px; color: var(--bordeaux); }
.striscia__lista a:active { background: var(--cipria); }
@media (hover: hover) and (pointer: fine) { .striscia__lista a:hover { background: var(--cipria-chiara); } }
@media (max-width: 899px) {
  .striscia__lista { padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); }
  .striscia__lista li + li::before { height: 40px; margin-top: -20px; }
  .striscia__lista a { flex-direction: column; justify-content: flex-start; gap: 8px; min-height: 0; padding: 14px 4px 12px; font-size: 13px; line-height: 1.25; text-align: center; }
  .striscia__lista .ico { width: 32px; height: 32px; }
}

/* ── servizi ───────────────────────────────────────────────────────────────────────── */
.servizi { position: relative; padding: clamp(48px, 5vw, 64px) 0 clamp(48px, 5vw, 72px); overflow: hidden; }
.servizi__griglia {
  display: grid;
  grid-template-columns: 1fr 1fr 1.08fr;
  grid-template-rows: auto auto auto auto;
  grid-template-areas: "a b c" "a b c" "d e c" "d e f";
  gap: 22px 22px;
  margin-top: 26px;
  position: relative; z-index: 1;
}
.scheda {
  display: grid;
  grid-template-columns: 45% 1fr;
  background: var(--avorio-chiaro);
  border: 1px solid var(--linea);
  min-height: 0;
  transition: border-color .2s ease, transform .2s var(--ease-out);
}
.scheda__foto { position: relative; overflow: hidden; background: var(--rosa); }
.scheda__foto img, .scheda__foto video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.scheda__foto--doppia { display: grid; grid-template-columns: 1fr 1fr; }
.scheda--doppia .scheda__foto { min-height: 200px; }
.scheda__foto--doppia img { position: absolute; top: 0; bottom: 0; width: 50%; }
.scheda__foto--doppia img + img { left: 50%; }
.scheda__testo { display: flex; flex-direction: column; align-items: flex-start; padding: 22px 22px 20px 26px; }
.scheda__testa { display: flex; align-items: flex-start; gap: 26px; }
.scheda__num { font-family: var(--serif); font-size: 32px; line-height: 1; color: var(--bordeaux); letter-spacing: -0.01em; }
.scheda h3 { font-size: clamp(21px, 1.7vw, 25px); margin-top: 12px; letter-spacing: -0.02em; }
.scheda p { margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--testo); }
.scheda .link-freccia { margin-top: auto; padding-top: 14px; }
.scheda:nth-child(1) { grid-area: a; } .scheda:nth-child(2) { grid-area: b; } .scheda:nth-child(3) { grid-area: c; }
.scheda:nth-child(4) { grid-area: d; } .scheda:nth-child(5) { grid-area: e; } .scheda:nth-child(6) { grid-area: f; }
.scheda:nth-child(1), .scheda:nth-child(2), .scheda:nth-child(4), .scheda:nth-child(5) { min-height: 256px; }
.scheda--doppia { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
.scheda--doppia .scheda__testo { display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: start; padding: 14px 20px 14px 22px; }
.scheda--doppia .scheda__testa { grid-row: 1 / span 3; padding-top: 4px; }
.scheda--doppia .scheda__num { display: none; }
.scheda--doppia h3 { margin-top: 0; }
.scheda--doppia p { margin-top: 4px; }
.scheda--doppia .link-freccia { grid-column: 2; justify-self: start; padding-top: 8px; }
.scheda--larga { grid-template-columns: 34% 1fr; min-height: 0; }
.scheda--larga .scheda__testo { padding: 14px 18px 12px 22px; }
.scheda--larga .scheda__testo { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-content: center; }
.scheda--larga .scheda__testa { grid-row: 1 / span 3; flex-direction: column; align-items: center; gap: 8px; }
.scheda--larga .scheda__num { font-size: 26px; }
.scheda--larga .ico--grande { width: 44px; height: 44px; }
.scheda--larga h3 { margin-top: 0; }
.scheda--larga p, .scheda--larga .link-freccia { grid-column: 2; justify-self: start; }
.scheda--larga p { margin-top: 4px; font-size: 14px; }
.scheda--larga .link-freccia { padding-top: 6px; }
@media (hover: hover) and (pointer: fine) {
  .scheda:hover { border-color: var(--bordeaux); }
  .scheda:hover .scheda__foto img, .scheda:hover .scheda__foto video { transform: scale(1.05); }
}
.onde--servizi { right: -2%; bottom: 0; width: 34%; height: 150px; }
@media (max-width: 1100px) {
  .servizi__griglia { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-template-areas: none; height: auto; }
  .scheda:nth-child(n) { grid-area: auto; min-height: 220px; }
  .scheda--doppia { grid-template-rows: 200px auto; }
}
@media (max-width: 680px) {
  .servizi__griglia { grid-template-columns: 1fr; gap: 14px; }
  .scheda, .scheda--larga { grid-template-columns: 40% 1fr; }
  .scheda:nth-child(n) { min-height: 196px; }
  .scheda--doppia { grid-template-columns: 1fr; grid-template-rows: 210px auto; }
  .scheda--doppia .scheda__testo { padding: 14px 16px 16px; }
  .scheda--larga .scheda__testo { display: flex; flex-direction: column; align-items: flex-start; }
  .scheda--larga .scheda__testa { flex-direction: row; align-items: flex-start; gap: 16px; }
  .scheda--larga .ico--grande { width: 40px; height: 40px; }
  .scheda--larga h3 { margin-top: 10px; }
  .scheda__testo { padding: 16px 16px 16px 18px; }
  .scheda__testa { gap: 16px; }
  .scheda__num { font-size: 26px; }
  .scheda .ico--grande { width: 40px; height: 40px; }
  .scheda h3 { font-size: 22px; margin-top: 10px; }
  .scheda p { font-size: 15px; }
}

/* ── passo dopo passo ──────────────────────────────────────────────────────────────── */
.percorso { position: relative; overflow: hidden; background: var(--cipria); padding: 30px 0 32px; }
.percorso__riga { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.percorso h2 { flex: none; font-size: clamp(28px, 2.3vw, 33px); letter-spacing: -0.03em; }
.percorso__passi { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-left: clamp(0px, 3vw, 40px); }
.percorso__passi > li:not(.percorso__freccia) { display: flex; align-items: center; gap: 18px; }
.percorso__passi .ico--medio { width: 44px; height: 44px; }
.percorso__passi h3 { font-size: 22px; letter-spacing: -0.015em; white-space: nowrap; }
.percorso__passi .num { color: var(--bordeaux); }
.percorso__passi p { margin-top: 2px; font-size: 15.5px; white-space: nowrap; color: var(--testo); }
.percorso__freccia { color: var(--bordeaux); }
.percorso__freccia .ico { width: 76px; height: 76px; margin: -28px 0; }
.onde--percorso { left: -4%; bottom: -20px; width: 34%; height: 130px; }
.onde--percorso path { stroke: var(--bianco); opacity: .55; }
@media (max-width: 1100px) {
  .percorso__passi { width: 100%; padding-left: 0; }
  .percorso__freccia .ico { width: 44px; height: 44px; margin: -14px 0; }
}
@media (max-width: 760px) {
  .percorso { padding: 40px 0; }
  .percorso__passi { flex-direction: column; align-items: stretch; gap: 14px; }
  .percorso__freccia { display: none; }
  .percorso__passi > li:not(.percorso__freccia) { background: rgba(255, 255, 255, .55); padding: 14px 16px; border-radius: var(--raggio); }
  .percorso__passi .ico--medio { width: 38px; height: 38px; }
  .percorso__passi h3 { font-size: 19px; white-space: normal; }
  .percorso__passi p { white-space: normal; }
}

/* ── sposa ─────────────────────────────────────────────────────────────────────────── */
.sposa { display: grid; grid-template-columns: 47% 1fr; background: var(--cipria); }
.sposa__foto { position: relative; overflow: hidden; min-height: 300px; }
.sposa__foto img, .sposa__foto video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; }
.sposa__testo { position: relative; overflow: hidden; padding: clamp(40px, 4vw, 56px) var(--margine-dx) clamp(40px, 4vw, 56px) clamp(28px, 5.4vw, 78px); }
.sposa__testo > *:not(.onde) { position: relative; z-index: 1; }
.titolo-sezione--sfalsato span { display: inline-block; padding-left: 1.6em; }
.chip { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.chip li { display: flex; align-items: center; gap: 22px; min-width: 176px; padding: 14px 24px; background: var(--avorio-chiaro); border: 1px solid var(--linea); color: var(--inchiostro); font-size: 16px; }
.chip .ico { width: 34px; height: 34px; color: var(--bordeaux); }
.sposa .btn { margin-top: 18px; min-width: 340px; }
.onde--sposa { right: 0; top: 0; width: 36%; height: 100%; }
.onde--sposa path { stroke: var(--bianco); opacity: .6; }
.onde--sposa path:nth-child(1) { stroke: var(--linea); opacity: .8; }
@media (max-width: 899px) {
  .sposa { grid-template-columns: 1fr; }
  .sposa__foto { height: min(56svh, 104vw); max-height: 520px; }
  .sposa__testo { padding: 36px var(--margine-dx) 44px var(--margine); }
  .titolo-sezione--sfalsato span { padding-left: 0; }
  .chip { gap: 8px; flex-wrap: nowrap; }
  .chip li { min-width: 0; flex: 1 1 0; justify-content: center; gap: 8px; padding: 10px 8px; font-size: 14.5px; }
  .chip .ico { width: 22px; height: 22px; }
  .sposa .btn { min-width: 0; width: 100%; }
  .onde--sposa { width: 60%; }
}

/* ── estetica ──────────────────────────────────────────────────────────────────────── */
.estetica { background: var(--avorio); padding: 22px 0; }
.estetica__griglia { display: grid; grid-template-columns: 1fr 1.12fr 1.04fr; align-items: stretch; gap: 0 28px; }
.estetica__testo { padding: 24px 0; align-self: center; }
.estetica .titolo-sezione { font-size: clamp(36px, 4.2vw, 60px); }
.estetica .btn { margin-top: 22px; min-width: 240px; }
.estetica__foto { position: relative; overflow: hidden; min-height: 300px; }
.estetica__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.estetica__foto::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, var(--avorio) 0, rgba(250, 247, 242, 0) 22%); pointer-events: none; }
.estetica__voci { display: flex; flex-direction: column; gap: 10px; align-self: center; }
.estetica__voci a {
  display: flex; align-items: center; gap: 22px;
  padding: 16px 26px 16px 22px;
  background: var(--avorio-chiaro);
  border: 1px solid var(--linea);
  text-decoration: none; color: var(--testo); font-size: 15.5px; line-height: 1.35;
  transition: border-color .2s ease;
  -webkit-user-select: none; user-select: none;
}
.estetica__voci a > span:nth-child(2) { flex: 1; }
.estetica__voci strong { display: block; font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--inchiostro); letter-spacing: -0.015em; line-height: 1.15; }
.estetica__voci .ico--freccia-destra { width: 26px; height: 26px; color: var(--bordeaux); transition: transform .2s var(--ease-out); }
.estetica__voci a:active { background: var(--cipria); }
@media (hover: hover) and (pointer: fine) {
  .estetica__voci a:hover { border-color: var(--bordeaux); }
  .estetica__voci a:hover .ico--freccia-destra { transform: translateX(4px); }
}
@media (max-width: 1100px) {
  .estetica__griglia { grid-template-columns: 1fr 1fr; gap: 20px; }
  .estetica__voci { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .estetica { padding: 40px 0 44px; }
  .estetica__griglia { grid-template-columns: 1fr; }
  .estetica__testo { padding: 0; }
  .estetica .btn { width: 100%; }
  .estetica__foto { min-height: 0; height: min(46svh, 86vw); border-radius: var(--raggio); }
  .estetica__foto::before { display: none; }
  .estetica__voci a { padding: 14px 16px; gap: 14px; }
  .estetica__voci .ico--medio { width: 34px; height: 34px; }
  .estetica__voci strong { font-size: 20px; }
}

/* ── shop ──────────────────────────────────────────────────────────────────────────── */
.shop__fascia { position: relative; overflow: hidden; background: var(--bordeaux-scuro); color: var(--bianco); padding: 30px 0 34px; }
.shop__fascia .contenitore { position: relative; z-index: 1; }
.shop__fascia .titolo-sezione { color: var(--bianco); margin-top: 12px; font-size: clamp(34px, 4.4vw, 62px); }
.shop__fascia em { color: var(--bianco); }
.shop__fascia .sottotitolo { color: var(--bianco); opacity: .92; margin-top: 8px; }
.onde--shop { right: 0; top: 0; width: 34%; height: 100%; }
.onde--shop path { stroke: var(--bianco); opacity: .16; }
.onde--shop path:nth-child(2) { opacity: .1; }

.shop__corpo { display: grid; grid-template-columns: 250px 1fr; gap: 0 30px; padding-top: 30px; padding-bottom: 14px; }
.filtri { padding-right: 26px; border-right: 1px solid var(--linea); }
.filtri h3 { font-size: 30px; letter-spacing: -0.025em; padding-top: 20px; position: relative; white-space: nowrap; }
.filtri h3::before { content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 3px; background: var(--bordeaux); }
.filtri__gruppo { border-bottom: 1px solid var(--linea); }
.filtri__gruppo:first-of-type { margin-top: 18px; border-top: 1px solid var(--linea); }
.filtri__apri { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; font-size: 17px; color: var(--inchiostro); text-align: left; }
.filtri__apri .ico { width: 16px; height: 16px; color: var(--bordeaux); transition: transform .25s var(--ease-out); }
.filtri__apri[aria-expanded="true"] .ico { transform: rotate(45deg); }
.filtri__voci { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 16px; }
.filtri__voci button, .pillola {
  min-height: 40px; padding: 6px 18px;
  border: 1px solid var(--linea); border-radius: 999px;
  background: var(--avorio-chiaro); color: var(--inchiostro); font-size: 15px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  -webkit-user-select: none; user-select: none;
}
.filtri__voci button[aria-pressed="true"], .pillola[aria-pressed="true"] { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--bianco); }
.filtri__voci button:active, .pillola:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .filtri__voci button:hover, .pillola:hover { border-color: var(--bordeaux); }
}
.catalogo { min-width: 0; }
.catalogo__barra { display: flex; align-items: center; gap: 12px; }
.pillole { display: flex; gap: 10px; flex: none; }
.pillola { min-height: 46px; min-width: 104px; padding: 8px 22px; font-size: 16px; }
.cerca { position: relative; flex: 1; min-width: 0; margin-left: 28px; }
.cerca .ico { position: absolute; left: 18px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--bordeaux); pointer-events: none; }
.cerca input {
  width: 100%; height: 46px; padding: 0 18px 0 48px;
  border: 1px solid var(--bordeaux); border-radius: 999px;
  background: var(--avorio-chiaro); color: var(--inchiostro);
  font: 16px var(--sans);
  -webkit-appearance: none; appearance: none;
}
.cerca input::placeholder { color: var(--testo-tenue); }
.btn-filtra {
  display: inline-flex; align-items: center; gap: 14px;
  height: 46px; padding: 0 24px;
  border: 1px solid var(--bordeaux); border-radius: 999px;
  color: var(--inchiostro); font-size: 16px; flex: none;
  -webkit-user-select: none; user-select: none;
}
.btn-filtra .ico { width: 22px; height: 22px; color: var(--bordeaux); }
.btn-filtra:active { background: var(--cipria); }

.carosello { position: relative; margin-top: 22px; }
.carosello__lista {
  display: flex; gap: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; padding: 0 28px;
}
.carosello__lista::-webkit-scrollbar { display: none; }
.parrucca {
  flex: 0 0 calc((100% - 24px) / 2);
  display: grid; grid-template-columns: 50% 1fr;
  background: var(--avorio-chiaro); border: 1px solid var(--linea);
  scroll-snap-align: start;
}
.parrucca[hidden] { display: none; }
.parrucca__foto { overflow: hidden; background: #DCDEE0; }
.parrucca__foto img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .5s var(--ease-out); }
.parrucca__testo { display: flex; flex-direction: column; align-items: flex-start; padding: 22px 20px 18px 24px; }
.parrucca__tipo { font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--testo); }
.parrucca h3 { margin-top: 8px; font-size: clamp(21px, 1.75vw, 25px); white-space: nowrap; }
@media (max-width: 1360px) { .parrucca h3 { white-space: normal; } }
.parrucca, .parrucca__testo { min-width: 0; }
.parrucca__meta { margin-top: 8px; font-size: 16px; color: var(--testo); }
.parrucca__prezzo { margin-top: 8px; font-size: 16px; color: var(--inchiostro); font-weight: 500; }
.parrucca .btn { margin-top: 14px; white-space: nowrap; padding: 10px 18px; font-size: 15px; }
.parrucca .link-freccia { margin-top: 14px; }
@media (hover: hover) and (pointer: fine) { .parrucca:hover .parrucca__foto img { transform: scale(1.04); } }
.carosello__freccia {
  position: absolute; top: 50%; z-index: 2;
  display: grid; place-items: center;
  width: 52px; height: 52px; margin-top: -26px;
  border-radius: 50%; background: var(--bianco); color: var(--inchiostro);
  box-shadow: 0 4px 18px rgba(20, 20, 20, .12);
  transition: opacity .2s ease, transform .16s var(--ease-out);
  -webkit-user-select: none; user-select: none;
}
.carosello__freccia .ico { width: 22px; height: 22px; }
.carosello__freccia--prima { left: -6px; }
.carosello__freccia--dopo { right: -6px; }
.carosello__freccia:disabled { opacity: .45; cursor: default; }
.carosello__freccia:not(:disabled):active { transform: scale(.94); }
.catalogo__vuoto { padding: 40px 28px; text-align: center; border: 1px dashed var(--linea); }
.catalogo__vuoto p { margin-bottom: 14px; color: var(--inchiostro); font-size: 17px; }
.catalogo__piede { position: relative; display: flex; justify-content: flex-end; align-items: center; min-height: 40px; margin-top: 12px; padding-right: 28px; }
.puntini { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; }
.puntini span { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--bordeaux); }
.puntini span.attivo { background: var(--bordeaux); }

.shop__sotto { display: grid; grid-template-columns: 1.18fr 1fr; gap: 24px; padding-top: 14px; padding-bottom: 20px; }
.categorie { display: grid; grid-template-columns: repeat(3, auto); align-items: center; background: var(--cipria-chiara); padding: 14px 18px; border-radius: var(--raggio); }
.categorie li + li { border-left: 1px solid var(--linea); }
.categorie a {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px; min-height: 64px;
  color: var(--inchiostro); font-size: 16px; text-decoration: none;
  -webkit-user-select: none; user-select: none;
}
.categorie .ico--freccia-diagonale { width: 13px; height: 13px; color: var(--bordeaux); }
.categorie a:active { color: var(--bordeaux); }
.consiglio { display: flex; align-items: center; gap: 22px; background: var(--cipria); padding: 18px 24px; border-radius: var(--raggio); }
.consiglio h3 { font-size: 21px; letter-spacing: -0.02em; }
.consiglio p { margin-top: 4px; font-size: 15px; line-height: 1.4; }
.consiglio .btn { flex: none; margin-left: auto; }

.dettaglio { width: min(880px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 6px; background: var(--avorio-chiaro); color: var(--testo); }
.dettaglio::backdrop { background: rgba(20, 20, 20, .55); }
.dettaglio__corpo { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.dettaglio__corpo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.dettaglio__testo { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 32px; }
.dettaglio h3 { font-size: 34px; margin-top: 8px; }
.dettaglio .parrucca__meta, .dettaglio .parrucca__prezzo { margin-top: 10px; }
.dettaglio .btn { margin-top: 20px; }
.dettaglio__chiudi { position: absolute; top: 10px; right: 10px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bianco); color: var(--inchiostro); }
.dettaglio__chiudi .ico { width: 18px; height: 18px; }

@media (max-width: 1100px) {
  .shop__corpo { grid-template-columns: 1fr; }
  .filtri { display: none; padding-right: 0; border-right: 0; margin-bottom: 18px; }
  .filtri.aperto { display: block; }
  .filtri h3 { font-size: 28px; }
  .shop__sotto { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .shop__fascia { padding: 34px 0; }
  .catalogo__barra { flex-wrap: wrap; }
  .pillole { order: 3; width: calc(100% + var(--margine) + var(--margine-dx)); margin-left: calc(-1 * var(--margine)); padding: 2px var(--margine-dx) 2px var(--margine); overflow-x: auto; scrollbar-width: none; }
  .pillole::-webkit-scrollbar { display: none; }
  .pillola { min-width: 0; min-height: 42px; padding: 6px 18px; flex: none; }
  .cerca { margin-left: 0; }
  .btn-filtra { padding: 0 18px; }
  .carosello__lista { padding: 0; gap: 14px; scroll-padding: 0; }
  .parrucca { flex-basis: 84%; grid-template-columns: 1fr; }
  .parrucca__testo { padding: 16px 18px 18px; }
  .carosello__freccia { display: none; }
  .catalogo__piede { padding-right: 0; justify-content: space-between; }
  .puntini { position: static; transform: none; }
  .categorie { grid-template-columns: 1fr; padding: 4px 16px; }
  .categorie li + li { border-left: 0; border-top: 1px solid var(--linea); }
  .categorie a { padding: 10px 0; min-height: 60px; }
  .categorie a .ico--freccia-diagonale { margin-left: auto; }
  .consiglio { flex-wrap: wrap; gap: 14px; padding: 18px; }
  .consiglio > div { flex: 1; min-width: 0; }
  .consiglio .btn { width: 100%; }
  .dettaglio__corpo { grid-template-columns: 1fr; }
  .dettaglio__corpo img { aspect-ratio: 4 / 3; }
  .dettaglio__testo { padding: 20px; }
}

/* ── domande ───────────────────────────────────────────────────────────────────────── */
.domande { padding: 26px 0 30px; }
.domande__testa { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.domande h2 { display: flex; align-items: center; gap: 28px; font-size: clamp(30px, 3.2vw, 46px); letter-spacing: -0.03em; }
.domande h2::before { content: ""; width: 56px; height: 2px; background: var(--bordeaux); flex: none; }
.fisarmonica { border: 1px solid var(--linea); border-radius: var(--raggio); background: var(--avorio-chiaro); }
.voce + .voce, .domande__altre .voce { border-top: 1px solid var(--linea); }
.voce h3 { font-family: var(--sans); font-size: inherit; font-weight: 400; letter-spacing: 0; line-height: inherit; }
.voce button {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; min-height: 56px; padding: 12px 40px;
  color: var(--inchiostro); font-size: 18px; text-align: left;
}
.voce button .ico { width: 26px; height: 26px; color: var(--bordeaux); transition: transform .25s var(--ease-out); }
.voce button[aria-expanded="true"] .ico { transform: rotate(45deg); }
.voce button:active { background: var(--cipria-chiara); }
.voce__risposta { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease-out); }
.voce__risposta > div { overflow: hidden; }
.voce__risposta p { padding: 0 40px 18px; font-size: 16.5px; color: var(--testo); max-width: 80ch; }
.voce__risposta a { color: var(--bordeaux); }
.voce.aperta .voce__risposta { grid-template-rows: 1fr; }
@media (max-width: 760px) {
  .domande { padding: 40px 0; }
  .domande__testa { flex-direction: column; align-items: flex-start; gap: 12px; }
  .domande h2 { gap: 16px; font-size: 30px; }
  .domande h2::before { width: 32px; }
  .voce button { padding: 14px 16px; font-size: 17px; }
  .voce__risposta p { padding: 0 16px 16px; font-size: 15.5px; line-height: 1.5; }
}

/* ── invito finale ─────────────────────────────────────────────────────────────────── */
.invito { position: relative; overflow: hidden; background: var(--cipria); padding: 34px 0 40px; text-align: center; }
.invito__testo { position: relative; z-index: 1; }
.invito h2 { font-size: clamp(36px, 4.4vw, 62px); letter-spacing: -0.03em; }
.invito p { margin-top: 6px; font-size: clamp(17px, 1.6vw, 23px); color: var(--testo); }
.invito .azioni { margin-top: 20px; }
.invito .btn { min-width: 280px; }
.invito .btn--bordo { min-width: 200px; background: var(--avorio-chiaro); }
.onde--invito-sx { left: 0; top: 0; width: 30%; height: 100%; -webkit-mask-image: linear-gradient(to right, #000 55%, transparent); mask-image: linear-gradient(to right, #000 55%, transparent); }
.onde--invito-dx { right: 0; bottom: 0; width: 30%; height: 100%; -webkit-mask-image: linear-gradient(to left, #000 55%, transparent); mask-image: linear-gradient(to left, #000 55%, transparent); }
.onde--invito-sx path, .onde--invito-dx path { stroke: var(--bianco); opacity: .55; }
.onde--invito-sx path:first-child, .onde--invito-dx path:first-child { stroke: rgba(138, 12, 52, .1); opacity: 1; }
.onde--invito-sx path:nth-child(2), .onde--invito-dx path:nth-child(2) { opacity: .8; }
@media (max-width: 760px) {
  .invito { padding: 48px 0; }
  .invito .btn, .invito .btn--bordo { min-width: 0; width: 100%; }
  .onde--invito-sx, .onde--invito-dx { width: 60%; opacity: .7; }
}

/* ── piede ─────────────────────────────────────────────────────────────────────────── */
.piede { background: var(--avorio); border-top: 1px solid var(--linea); padding: 26px 0 calc(22px + env(safe-area-inset-bottom, 0px)); font-size: 15.5px; }
.piede__griglia { display: grid; grid-template-columns: auto 1fr 1fr 1.25fr auto; gap: 0; align-items: start; }
.piede__marchio { display: flex; align-items: flex-start; gap: 26px; padding-right: 20px; }
.piede__marchio p { white-space: nowrap; }
.logo--piede img { height: 92px; width: auto; }
.piede__marchio > div { padding-top: 18px; }
.piede__nome { color: var(--inchiostro); font-size: 18px; font-weight: 500; }
.piede__col { padding: 6px 28px 8px; border-left: 1px solid var(--linea); min-height: 150px; }
.piede__col h2 { font-family: var(--sans); font-size: 17px; font-weight: 500; color: var(--inchiostro); letter-spacing: 0; line-height: 1.3; }
.piede__col ul { margin-top: 6px; }
.piede__col li { line-height: 1.6; color: var(--testo); }
.piede__col a { color: var(--testo); text-decoration: none; }
.piede__col a:active { color: var(--bordeaux); }
@media (hover: hover) and (pointer: fine) { .piede a:hover { color: var(--bordeaux); } }
.piede__legale-link { display: flex; gap: 18px; align-self: center; padding-left: 28px; border-left: 1px solid var(--linea); min-height: 150px; align-items: center; }
.piede__legale-link a { color: var(--testo); text-decoration: none; }
.piede__legale-link span { color: var(--bordeaux); }
.piede__fondo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linea); font-size: 13.5px; color: var(--testo-tenue); }
.piede__social, .piede__legali { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.piede__legali a { color: var(--testo); }
.piede__social a, .credit a { color: var(--testo); }
.credit { color: var(--testo-tenue); }
@media (max-width: 1100px) {
  .piede__griglia { grid-template-columns: 1fr 1fr; gap: 24px 0; }
  .piede__marchio { grid-column: 1 / -1; }
  .piede__col, .piede__legale-link { min-height: 0; }
  .piede__col:nth-of-type(odd) { border-left: 0; padding-left: 0; }
  .piede__legale-link { grid-column: 1 / -1; border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) {
  .piede { padding-top: 32px; }
  .piede__marchio { gap: 18px; padding-right: 0; }
  .logo--piede img { height: 84px; }
  .piede__marchio > div { padding-top: 10px; }
  .piede__col { padding: 0 0 0 18px; }
  .piede__col:nth-of-type(odd) { padding-left: 0; }
  .piede__col--contatti { grid-column: 1 / -1; padding-left: 0 !important; border-left: 0 !important; }
  .piede__fondo { flex-direction: column; align-items: flex-start; }
}

.thk-nota-foto { position: relative; z-index: 1; margin-top: 16px; font-size: 13px; color: var(--testo-tenue); }

/* ── pagine di testo (legali) e 404 ────────────────────────────────────────────────── */
.pagina-testo { padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 7vw, 96px); }
.legale { max-width: 780px; }
.legale h1 { font-size: clamp(40px, 5vw, 64px); }
.legale h1 + p { margin-top: 12px; color: var(--testo-tenue); font-size: 14.5px; }
.legale h2 { margin-top: 40px; font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.015em; }
.legale p, .legale li { font-size: 16.5px; line-height: 1.65; }
.legale p { margin-top: 12px; }
.legale ul, .legale ol { margin-top: 12px; padding-left: 1.3em; }
.legale ul { list-style: disc; }
.legale ol { list-style: decimal; }
.legale li + li { margin-top: 6px; }
.legale a { color: var(--bordeaux); }
.legale table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.legale th, .legale td { padding: 10px 12px; border: 1px solid var(--linea); text-align: left; vertical-align: top; }
.legale th { background: var(--cipria-chiara); color: var(--inchiostro); font-weight: 500; }
.pagina-404 { text-align: left; }
.pagina-404 h1 { margin-top: 18px; font-size: clamp(48px, 7vw, 96px); letter-spacing: -0.035em; }

/* meno movimento, non zero */



/* ═══ 5-bis · il sito vivo (curve e durate di Emil Kowalski, cosa si muove da 09 § 0-bis-2 e 16 § 4-bis) ═══ */

/* la prima schermata: entra il testo, l'immagine non parte mai da opacità zero */
@keyframes entra { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes avvicina { from { transform: scale(1.08); } to { transform: none; } }
@keyframes compare { from { opacity: 0; } to { opacity: 1; } }
@keyframes onde-vive { from { transform: translate3d(-1.5%, 0, 0); } to { transform: translate3d(1.5%, -4%, 0); } }
.hero .riga { display: block; }
.hero__testo .occhiello, .hero .riga, .hero__sotto, .hero .azioni { animation: entra .9s var(--ease-out) both; }
.hero__testo .occhiello { animation-delay: .05s; }
.hero .riga:nth-child(1) { animation-delay: .14s; }
.hero .riga:nth-child(2) { animation-delay: .24s; }
.hero__sotto { animation-delay: .38s; }
.hero .azioni { animation-delay: .5s; }
.hero__foto > img, .hero__foto > video { animation: avvicina 1.8s var(--ease-out) both; }
.hero__firma { animation: entra 1s var(--ease-out) .8s both; }
.onde path { transform-box: fill-box; }
.onde--hero, .onde--shop, .onde--sposa, .onde--invito-sx, .onde--invito-dx, .onde--servizi, .onde--percorso { animation: onde-vive 11s var(--ease-in-out) infinite alternate; }
.onde--shop { animation-duration: 13s; }
.onde--invito-dx { animation-direction: alternate-reverse; }

/* le sezioni che arrivano scorrendo (la classe la mette main.js solo a quello che sta sotto lo schermo) */
.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal-media { clip-path: inset(10% 0 10% 0); transition: clip-path 1s var(--ease-out); }
.js .reveal-media > img, .js .reveal-media > video { transform: scale(1.08); transition: transform 1.2s var(--ease-out); }
.js .reveal-media.in { clip-path: inset(0 0 0 0); }
.js .reveal-media.in > img, .js .reveal-media.in > video { transform: none; }

/* l'intestazione che cambia scorrendo: ombra appena si scende, si nasconde scendendo e torna risalendo */
.testata { transition: transform .32s var(--ease-in-out), box-shadow .25s ease; }
.testata.scorre { box-shadow: 0 6px 24px rgba(20, 20, 20, .07); }
.testata.via { transform: translateY(-100%); transition: transform .22s var(--ease-in-out), box-shadow .25s ease; }
.logo img { transition: transform .3s var(--ease-out); transform-origin: left center; }

/* il menu da telefono: le voci arrivano una dopo l'altra, la chiusura è più svelta */
@media (max-width: 1359px) {
  .menu li, .menu__prenota { opacity: 0; transform: translateY(16px); transition: opacity .16s ease, transform .16s var(--ease-out); }
  .menu.aperto li, .menu.aperto .menu__prenota { opacity: 1; transform: none; transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
  .menu.aperto li:nth-child(1) { transition-delay: .04s; } .menu.aperto li:nth-child(2) { transition-delay: .08s; }
  .menu.aperto li:nth-child(3) { transition-delay: .12s; } .menu.aperto li:nth-child(4) { transition-delay: .16s; }
  .menu.aperto li:nth-child(5) { transition-delay: .2s; } .menu.aperto li:nth-child(6) { transition-delay: .24s; }
  .menu.aperto li:nth-child(7) { transition-delay: .28s; } .menu.aperto .menu__prenota { transition-delay: .32s; }
}

/* tocco e mouse: le schede si premono tutte, il link si allarga sull'intera scheda */
.scheda { position: relative; transition: border-color .2s ease, transform .16s var(--ease-out); }
.scheda .link-freccia::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.scheda:active { transform: scale(.985); }
.estetica__voci a, .categorie a, .striscia__lista a { transition: background-color .2s ease, transform .16s var(--ease-out), color .2s ease; }
.estetica__voci a:active, .categorie a:active { transform: scale(.98); }
.striscia__lista .ico { transition: transform .3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .striscia__lista a:hover .ico { transform: translateY(-4px) scale(1.06); }
  .scheda:hover .ico--grande { transform: rotate(-6deg); }
  .percorso__passi li:hover .ico--medio { transform: translateY(-3px); }
  .parrucca:hover, .estetica__voci a:hover, .categorie a:hover { box-shadow: 0 10px 30px rgba(20, 20, 20, .06); }
}
.ico--grande, .percorso__passi .ico--medio { transition: transform .3s var(--ease-out); }
.parrucca { transition: box-shadow .25s ease; }

/* le risposte e i filtri si aprono con una dissolvenza, senza animare l'altezza */
.voce__risposta { transition: none; }
.voce.aperta .voce__risposta p { animation: entra-poco .26s var(--ease-out) both; }
.filtri__voci:not([hidden]) { animation: entra-poco .22s var(--ease-out) both; }
@keyframes entra-poco { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* la scheda della parrucca: si apre dal centro, si chiude più in fretta */
.dettaglio[open] { animation: finestra .26s var(--ease-out); }
.dettaglio[open]::backdrop { animation: compare .26s ease; }
@keyframes finestra { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* meno movimento, non zero: restano le dissolvenze, spariscono gli spostamenti */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__testo .occhiello, .hero .riga, .hero__sotto, .hero .azioni, .hero__firma { animation-name: compare; animation-duration: .6s; }
  .hero__foto > img, .hero__foto > video, .onde { animation: none; }
  .js .reveal { transform: none; transition: opacity .6s ease; }
  .js .reveal-media, .js .reveal-media > img, .js .reveal-media > video { clip-path: none; transform: none; }
  .testata.via { transform: none; }
  .menu li, .menu__prenota { transform: none; }
  .scheda:active, .btn:active, .estetica__voci a:active, .categorie a:active { transform: none; }
  @keyframes finestra { from { opacity: 0; } to { opacity: 1; } }
  @keyframes entra-poco { from { opacity: 0; } to { opacity: 1; } }
}


/* ═══ step 6 · il copy nelle forme del design ═══ */
.ico--telefono { --m: url("/assets/img/icone/telefono.png"); }
.ico--posizione { --m: url("/assets/img/icone/posizione.png"); }
.ico--spedizione { --m: url("/assets/img/icone/spedizione.png"); }
.ico--check { --m: url("/assets/img/icone/check.png"); }
.ico--documento { --m: url("/assets/img/icone/documento.png"); }
.ico--corpo { --m: url("/assets/img/icone/corpo.png"); }
.ico--freccia-giu { --m: url("/assets/img/icone/freccia-giu.png"); }
.ico--prenotazione { --m: url("/assets/img/icone/prenotazione.png"); }
.ico--protezione { --m: url("/assets/img/icone/protezione.png"); }

/* intestazione: il pulsante col testo intero, «Come ordinare» sotto «Parrucche» */
.testata__prenota { white-space: nowrap; }
@media (min-width: 1360px) {
  .menu ul { gap: clamp(18px, 2vw, 30px); }
  .menu a:not(.btn) { font-size: 16.5px; }
  .testata__prenota { min-height: 54px; padding: 12px 24px; font-size: 16.5px; }
  .menu__gruppo { position: relative; display: flex; align-items: center; gap: 4px; }
  .menu__apri { display: grid; place-items: center; width: 24px; height: 32px; color: var(--bordeaux); }
  .menu__apri .ico { width: 11px; height: 11px; transition: transform .2s var(--ease-out); }
  .menu__sotto {
    position: absolute; top: calc(100% + 6px); left: -18px; z-index: 5;
    min-width: 200px; padding: 8px 18px;
    background: var(--avorio-chiaro); border: 1px solid var(--linea); box-shadow: 0 14px 34px rgba(20, 20, 20, .08);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .15s ease, transform .15s var(--ease-out), visibility 0s linear .15s;
  }
  .menu__sotto::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
  .menu__gruppo:focus-within .menu__sotto, .menu__gruppo.aperto .menu__sotto { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s var(--ease-out); }
  .menu__gruppo.aperto .menu__apri .ico { transform: rotate(180deg); }
  .menu__sotto a:not(.btn) { display: block; padding: 8px 0; white-space: nowrap; }
}
@media (min-width: 1360px) and (hover: hover) and (pointer: fine) {
  .menu__gruppo:hover .menu__sotto { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s var(--ease-out); }
}
@media (max-width: 1359px) {
  .menu__apri { display: none; }
  .menu__gruppo { display: block; }
  .menu__sotto { padding: 0 0 12px 22px; }
  .menu__sotto li { border-bottom: 0 !important; }
  .menu__sotto a:not(.btn) { font-size: 22px !important; padding: 6px 0 !important; color: var(--testo); }
}
@media (max-width: 899px) {
  .testata__prenota { display: none; }
}
.menu a[aria-current="page"] { color: var(--bordeaux); }
.menu a[aria-current="page"]::after { transform: scaleX(1); }

/* hero col titolo del copy */
.hero h1 { font-size: clamp(38px, 4.7vw, 68px); line-height: 1.02; letter-spacing: -0.03em; }
@media (min-width: 900px) { .hero__testo > * { max-width: 820px; } .hero .hero__sotto { max-width: 38ch; } }
@media (max-width: 899px) { .hero .riga { display: inline; } .hero h1 { font-size: 36px; } }
.btn .ico--telefono { width: 18px; height: 18px; }

/* striscia: le cinque pagine */
@media (max-width: 899px) { .striscia__lista a { font-size: 12.5px; } }

/* il salone: tre schede in fila, il testo del copy come titolo della scheda */
.servizi__griglia--tre { grid-template-columns: repeat(3, 1fr); grid-template-rows: none; grid-template-areas: none; height: auto; margin-top: 30px; }
.servizi__griglia--tre .scheda:nth-child(n) { grid-area: auto; min-height: 290px; }
.servizi__griglia--tre .scheda--doppia { grid-template-columns: 45% 1fr; grid-template-rows: none; }
.servizi__griglia--tre .scheda--doppia .scheda__testo { display: flex; flex-direction: column; padding: 22px 22px 20px 26px; }
.servizi__griglia--tre .scheda--doppia .scheda__testa { grid-row: auto; padding-top: 0; }
.servizi__griglia--tre .scheda--doppia .scheda__num { display: inline; }
.servizi__griglia--tre .scheda h3 { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.18; margin-top: 16px; }
.sezione-piede { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 30px; }
.sezione-piede .thk-nota-foto { margin-top: 0; max-width: 60ch; }
@media (max-width: 1100px) { .servizi__griglia--tre { grid-template-columns: 1fr; } }
@media (max-width: 680px) {
  .servizi__griglia--tre .scheda:nth-child(n), .servizi__griglia--tre .scheda--doppia { grid-template-columns: 40% 1fr; grid-template-rows: none; min-height: 200px; }
  .servizi__griglia--tre .scheda--doppia .scheda__testo { padding: 16px 16px 16px 18px; }
  .servizi__griglia--tre .scheda h3 { font-size: 19px; margin-top: 10px; }
  .sezione-piede .btn { width: 100%; }
}

/* acconciature: due loop piccoli al posto delle pillole */
.sposa .titolo-sezione em { display: inline; }
.mini-video { display: grid; grid-template-columns: repeat(2, minmax(0, 190px)); gap: 14px; margin-top: 22px; }
.mini-video li { position: relative; overflow: hidden; aspect-ratio: 1; background: var(--rosa); border: 1px solid var(--linea); }
.mini-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sposa__nota { margin-top: 14px; font-size: 16.5px; color: var(--testo); max-width: 52ch; }
.sposa__nota + .sposa__nota { margin-top: 6px; }
.sposa__nota a { color: var(--bordeaux); }
.sposa .link-freccia { margin-top: 18px; }
@media (max-width: 899px) { .mini-video { grid-template-columns: 1fr 1fr; } }

/* parrucche: la fascia bordeaux col testo accanto, poi le foto del negozio */
.shop__fascia { padding: 40px 0 44px; }
.shop__fascia-griglia { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px 56px; align-items: end; }
.shop__fascia .titolo-sezione { margin-top: 0; }
.shop__fascia-testo p { color: var(--bianco); font-size: 17px; line-height: 1.5; opacity: .94; }
.shop__fascia-testo p + p { margin-top: 10px; }
.btn--chiaro { margin-top: 20px; background: var(--bianco); color: var(--bordeaux); border-color: var(--bianco); }
@media (hover: hover) and (pointer: fine) { .btn--chiaro:hover { background: var(--cipria); border-color: var(--cipria); } }
.galleria-parrucche { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; grid-auto-rows: clamp(260px, 26vw, 380px); gap: 16px; margin: 28px 0 8px; }
.galleria-parrucche li { position: relative; overflow: hidden; background: var(--rosa); }
.galleria-parrucche img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .galleria-parrucche li:hover img { transform: scale(1.05); } }
@media (max-width: 899px) {
  .shop__fascia-griglia { grid-template-columns: 1fr; }
  .galleria-parrucche { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px;
    margin-left: calc(-1 * var(--margine)); margin-right: calc(-1 * var(--margine-dx)); padding: 0 var(--margine-dx) 0 var(--margine); scroll-padding-left: var(--margine); }
  .galleria-parrucche::-webkit-scrollbar { display: none; }
  .galleria-parrucche li { flex: 0 0 72%; aspect-ratio: 3 / 4; scroll-snap-align: start; }
}

/* come ordinare: cinque passi nella fascia rosa */
.percorso--cinque { padding: 40px 0 42px; }
.percorso--cinque .percorso__riga { gap: 22px; }
.percorso--cinque .percorso__passi { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; padding-left: 0; counter-reset: none; }
.percorso--cinque .percorso__passi > li { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 18px 20px; background: rgba(255, 255, 255, .55); border-radius: var(--raggio); }
.percorso--cinque .num { font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--bordeaux); }
.percorso--cinque .percorso__passi p { margin: 0; font-size: 16px; line-height: 1.4; color: var(--inchiostro); white-space: normal; }
.percorso--cinque .link-freccia { align-self: flex-start; }
@media (max-width: 1100px) { .percorso--cinque .percorso__passi { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .percorso--cinque .percorso__passi { grid-template-columns: 1fr; gap: 10px; }
  .percorso--cinque .percorso__passi > li { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }
  .percorso--cinque .num { font-size: 22px; }
}

/* estetica: quattro voci, solo il nome */
.estetica__voci strong { font-size: 20px; }
.estetica__voci a { min-height: 66px; padding-top: 12px; padding-bottom: 12px; }

/* recensioni: il voto grande, le stelle e due recensioni */
.recensioni { padding: clamp(48px, 5vw, 72px) 0; background: var(--avorio-chiaro); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.recensioni__griglia { display: grid; grid-template-columns: auto 1fr 1.25fr; gap: 24px 48px; align-items: center; }
.voto { font-family: var(--serif); font-size: clamp(84px, 9vw, 132px); line-height: .9; color: var(--bordeaux); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.stelle { display: flex; gap: 6px; margin-top: 10px; color: var(--bordeaux); }
.stelle .ico { width: 24px; height: 24px; }
.recensioni .titolo-sezione { font-size: clamp(32px, 3.4vw, 50px); margin-top: 0; }
.recensioni .link-freccia { margin-top: 18px; }
.recensioni__lista { display: grid; gap: 14px; }
.recensione { padding: 22px 26px; background: var(--cipria); border-radius: var(--raggio); }
.recensione blockquote { margin: 0; }
.recensione blockquote p { font-family: var(--serif); font-size: clamp(19px, 1.6vw, 22px); line-height: 1.35; color: var(--inchiostro); font-style: italic; }
.recensione__chi { margin-top: 10px; font-size: 14px; letter-spacing: .14em; color: var(--testo); }
.thk-nota-recensioni { grid-column: 1 / -1; font-size: 13px; color: var(--testo-tenue); }
@media (max-width: 1100px) { .recensioni__griglia { grid-template-columns: auto 1fr; } .recensioni__lista { grid-column: 1 / -1; } }
@media (max-width: 560px) {
  .recensioni__griglia { grid-template-columns: 1fr; gap: 18px; }
  .recensioni__voto { display: flex; align-items: flex-end; gap: 16px; }
  .voto { font-size: 84px; }
  .recensione { padding: 18px; }
}

/* domande: il pulsante del copy */
.domande { padding: clamp(40px, 4.5vw, 64px) 0; }

/* dove siamo: la fascia finale, con la mappa al clic */
.dove { padding: clamp(44px, 5vw, 70px) 0; }
.dove h2 { font-size: clamp(34px, 4vw, 58px); }
.dove .invito__testo > p { margin-top: 10px; font-size: clamp(16.5px, 1.4vw, 19px); }
.dove .invito__testo a:not(.btn) { color: var(--bordeaux); }
.mappa { max-width: 880px; margin: 30px auto 0; padding: 22px 26px; background: var(--avorio-chiaro); border: 1px solid var(--linea); border-radius: var(--raggio); text-align: left; }
.mappa p { margin: 0; font-size: 15px; color: var(--testo); }
.mappa p + p { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.mappa.caricata { padding: 0; overflow: hidden; }
.mappa iframe { display: block; width: 100%; height: clamp(300px, 34vw, 420px); border: 0; }

/* piede col copy di extra.md */
.piede__griglia { grid-template-columns: 1.45fr 1fr 1.35fr .8fr; }
.piede__col { min-height: 0; }
.piede__marchio p:not(.piede__nome) { white-space: normal; max-width: 26ch; margin-top: 4px; }
.piede__col--social, .piede__col--contatti { border-left: 1px solid var(--linea); }
@media (max-width: 1100px) {
  .piede__griglia { grid-template-columns: 1fr 1fr; }
  .piede__col--contatti { grid-column: 1 / -1; padding-left: 0 !important; border-left: 0 !important; }
  .piede__col--social { border-left: 1px solid var(--linea); }
}

/* il pulsante WhatsApp fisso sul telefono, lontano dalla barra dell'iPhone */
.wa-fissa { display: none; }
@media (max-width: 899px) {
  .wa-fissa {
    display: flex; align-items: center; justify-content: center;
    position: fixed; z-index: 40;
    left: calc(12px + env(safe-area-inset-left, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    min-height: 52px; padding: 12px 18px; border-radius: var(--raggio);
    background: var(--bordeaux); color: var(--bianco); font-size: 16px; font-weight: 500; text-decoration: none;
    box-shadow: 0 10px 28px rgba(110, 10, 42, .28);
    transform: translateY(calc(100% + 24px)); transition: transform .3s var(--ease-out);
    -webkit-user-select: none; user-select: none;
  }
  .wa-fissa.su { transform: none; }
  .wa-fissa:active { transform: scale(.97); }
  html.menu-aperto .wa-fissa { transform: translateY(calc(100% + 24px)); }
  .piede { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .wa-fissa { transition: opacity .2s ease; } }
.pagina-404 { padding: clamp(56px, 8vw, 120px) 0; }

/* ═══ 6-bis · le pagine interne: gli stessi pezzi della home, sistemati per la pagina ═══ */

/* la testata della pagina: la hero della home, più bassa, con le briciole nell'occhiello */
body:not(.pagina-index) .hero h1 { font-size: clamp(34px, 4vw, 58px); }
.hero nav.occhiello { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; letter-spacing: .18em; }
.hero nav.occhiello::before { margin-right: 10px; }
.hero nav.occhiello a { color: var(--testo); text-decoration: none; }
.hero nav.occhiello a:active { color: var(--bordeaux); }
@media (hover: hover) and (pointer: fine) { .hero nav.occhiello a:hover { color: var(--bordeaux); } }
.hero nav.occhiello [aria-current] { color: var(--bordeaux); }
body:not(.pagina-index) .hero .hero__sotto + .hero__sotto { margin-top: 8px; }
.hero__testo ul:not(.estetica__voci, .galleria-parrucche, .riga-foto, .servizi__griglia, .mini-video, .percorso__passi, .recensioni__lista, .fisarmonica, .servizi__elenco) { display: grid; gap: 8px; margin-top: 16px; }
.hero__testo ul:not(.estetica__voci, .galleria-parrucche, .riga-foto, .servizi__griglia, .mini-video, .percorso__passi, .recensioni__lista, .fisarmonica, .servizi__elenco) li { display: flex; align-items: center; gap: 12px; font-size: 17px; color: var(--inchiostro); }
.hero__testo ul:not(.estetica__voci, .galleria-parrucche, .riga-foto, .servizi__griglia, .mini-video, .percorso__passi, .recensioni__lista, .fisarmonica, .servizi__elenco) .ico { width: 24px; height: 24px; color: var(--bordeaux); }
.hero__testo ul:not(.estetica__voci, .galleria-parrucche, .riga-foto, .servizi__griglia, .mini-video, .percorso__passi, .recensioni__lista, .fisarmonica, .servizi__elenco) a { color: var(--bordeaux); }
@media (min-width: 900px) {
  body:not(.pagina-index) .hero { min-height: clamp(440px, 34vw, 520px); }
  body:not(.pagina-index) .hero__testo { padding-top: 40px; padding-bottom: 52px; }
  body:not(.pagina-index) .hero__testo > * { max-width: 700px; }
  /* domande e contatti: i dati si leggono subito, il video sta in un riquadro accanto */
  .pagina-risposte .hero, .pagina-contatti .hero { min-height: 0; }
  .pagina-risposte .hero__foto, .pagina-contatti .hero__foto { top: 36px; bottom: 36px; right: max(64px, calc((100% - 1312px) / 2)); width: min(30%, 380px); -webkit-mask-image: none; mask-image: none; border-radius: var(--raggio); overflow: hidden; }
  .pagina-risposte .hero__testo > *, .pagina-contatti .hero__testo > * { max-width: 760px; }
}
@media (max-width: 899px) {
  body:not(.pagina-index) .hero__foto { height: min(48svh, 92vw); }
  .pagina-risposte .hero__foto, .pagina-contatti .hero__foto { height: min(38svh, 70vw); }
  body:not(.pagina-index) .hero__testo { margin-top: -34px; }
}

/* le sezioni testo + immagine: la sezione «estetica» della home, con due o tre colonne */
body:not(.pagina-index) .estetica { padding: clamp(48px, 5.5vw, 84px) 0; }
body:not(.pagina-index) .estetica + .estetica { border-top: 1px solid var(--linea); }
.estetica__griglia:not(:has(> .estetica__voci)), .estetica__griglia:not(:has(> .estetica__foto)) { grid-template-columns: 1.1fr .9fr; gap: 32px clamp(32px, 5vw, 80px); }
body:not(.pagina-index) .estetica__testo { align-self: center; }
body:not(.pagina-index) .estetica .titolo-sezione { font-size: clamp(32px, 3.6vw, 52px); margin-top: 0; }
.estetica__testo > p:not(.sottotitolo, .occhiello, .thk-nota-foto, .sposa__nota, .voto, .recensione__chi, .stelle, .hero__sotto), .sposa__testo > p:not(.sottotitolo, .occhiello, .thk-nota-foto, .sposa__nota, .voto, .recensione__chi, .stelle, .hero__sotto), .percorso__riga > p:not(.sottotitolo, .occhiello, .thk-nota-foto, .sposa__nota, .voto, .recensione__chi, .stelle, .hero__sotto) { margin-top: 14px; font-size: 17px; line-height: 1.55; color: var(--testo); max-width: 58ch; }
.estetica__testo p a:not(.btn):not(.link-freccia), .sposa__testo p a:not(.btn):not(.link-freccia), .percorso__riga p a:not(.btn), .estetica__voci span a, .scheda p a { color: var(--bordeaux); }
.estetica__testo > ul:not(.estetica__voci, .galleria-parrucche, .riga-foto, .servizi__griglia, .mini-video, .percorso__passi, .recensioni__lista, .fisarmonica, .servizi__elenco), .sposa__testo > ul:not(.estetica__voci, .galleria-parrucche, .riga-foto, .servizi__griglia, .mini-video, .percorso__passi, .recensioni__lista, .fisarmonica, .servizi__elenco), .scheda__testo > ul:not(.estetica__voci, .galleria-parrucche, .riga-foto, .servizi__griglia, .mini-video, .percorso__passi, .recensioni__lista, .fisarmonica, .servizi__elenco) { display: grid; gap: 8px; margin-top: 14px; }
.estetica__testo > ul:not(.estetica__voci, .galleria-parrucche, .riga-foto, .servizi__griglia, .mini-video, .percorso__passi, .recensioni__lista, .fisarmonica, .servizi__elenco) li, .sposa__testo > ul:not(.estetica__voci, .galleria-parrucche, .riga-foto, .servizi__griglia, .mini-video, .percorso__passi, .recensioni__lista, .fisarmonica, .servizi__elenco) li, .scheda__testo > ul:not(.estetica__voci, .galleria-parrucche, .riga-foto, .servizi__griglia, .mini-video, .percorso__passi, .recensioni__lista, .fisarmonica, .servizi__elenco) li { position: relative; padding-left: 26px; font-size: 16.5px; line-height: 1.5; color: var(--testo); }
.estetica__testo > ul:not(.estetica__voci, .galleria-parrucche, .riga-foto, .servizi__griglia, .mini-video, .percorso__passi, .recensioni__lista, .fisarmonica, .servizi__elenco) li::before, .sposa__testo > ul:not(.estetica__voci, .galleria-parrucche, .riga-foto, .servizi__griglia, .mini-video, .percorso__passi, .recensioni__lista, .fisarmonica, .servizi__elenco) li::before, .scheda__testo > ul:not(.estetica__voci, .galleria-parrucche, .riga-foto, .servizi__griglia, .mini-video, .percorso__passi, .recensioni__lista, .fisarmonica, .servizi__elenco) li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 1.5px; background: var(--bordeaux); }
.estetica__testo .azioni, .sposa__testo .azioni { margin-top: 22px; align-items: center; }
.estetica__testo > .link-freccia, .sposa__testo > .link-freccia { margin-top: 18px; }
body:not(.pagina-index) .estetica__foto { min-height: 420px; border-radius: var(--raggio); }
body:not(.pagina-index) .estetica__foto::before { display: none; }
.estetica__foto video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.estetica__foto:has(.mappa) { min-height: 0; overflow: visible; }
.estetica__foto .mappa { margin: 0; max-width: none; }
.estetica__griglia > .estetica__voci { align-self: center; }
.estetica__voci > li:not(:has(> a)) { display: flex; align-items: center; gap: 18px; padding: 14px 20px; background: var(--avorio-chiaro); border: 1px solid var(--linea); color: var(--inchiostro); font-size: 16.5px; line-height: 1.4; }
.estetica__voci > li:not(:has(> a)) > .ico { width: 34px; height: 34px; color: var(--bordeaux); flex: none; }
.sposa .estetica__voci > li:not(:has(> a)), .percorso .estetica__voci > li:not(:has(> a)) { background: rgba(255, 255, 255, .6); }
.estetica__testo > .estetica__voci, .sposa__testo > .estetica__voci { margin-top: 20px; }
@media (max-width: 1100px) { .estetica__griglia:not(:has(> .estetica__voci)), .estetica__griglia:not(:has(> .estetica__foto)) { grid-template-columns: 1fr; } }
@media (max-width: 680px) { body:not(.pagina-index) .estetica__foto { min-height: 0; height: min(54svh, 100vw); } }

/* le sezioni rosa con l'immagine a sinistra: la sezione «sposa» della home */
body:not(.pagina-index) .sposa .titolo-sezione { font-size: clamp(32px, 3.6vw, 52px); }
.sposa__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body:not(.pagina-index) .sposa__foto { min-height: 460px; }

/* le fasce rosa di solo testo: la fascia «passo dopo passo» */
.percorso__riga > .titolo-sezione { margin-top: 0; }
.percorso .sottotitolo { margin-top: 0; }
.percorso .azioni { margin-top: 6px; align-items: center; }
.percorso__passi:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr) !important; }
.percorso__passi p a { color: var(--bordeaux); }
@media (max-width: 1100px) {
  .percorso__passi:has(> li:nth-child(3):last-child) { grid-template-columns: 1fr !important; }
  .percorso__passi:has(> li:nth-child(3):last-child) > li { flex-direction: row !important; align-items: center !important; }
}

/* gallerie: la galleria delle parrucche della home, con 2, 3 o 4 elementi, foto o loop */
.galleria-parrucche video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .galleria-parrucche li:hover video { transform: scale(1.05); } }
.galleria-parrucche:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
.galleria-parrucche:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
.estetica__foto .galleria-parrucche, .sposa__testo .galleria-parrucche { margin: 0; grid-auto-rows: clamp(220px, 22vw, 340px); }
.estetica__foto:has(.galleria-parrucche) { min-height: 0; overflow: visible; background: none; }

/* le schede: le schede dei servizi della home, anche senza foto */
.servizi__griglia--tre .scheda:not(:has(.scheda__foto)) { display: block; min-height: 0; }
.servizi__griglia--tre .scheda:not(:has(.scheda__foto)) .scheda__testo { padding: 26px 26px 24px; }
.servizi__griglia--tre:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
.scheda h2 { margin-top: 14px; font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.02em; }
.scheda__testo > p:not(.sottotitolo, .occhiello, .thk-nota-foto, .sposa__nota, .voto, .recensione__chi, .stelle, .hero__sotto) { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--testo); }
.scheda__testo .voto { font-size: clamp(56px, 6vw, 88px); }
.scheda__testo video { display: block; width: 100%; aspect-ratio: 16 / 9; margin-top: 14px; background: var(--inchiostro); border-radius: var(--raggio); object-fit: cover; }
.scheda__testo .btn { margin-top: 14px; }
.scheda .occhiello { font-size: 11px; }
@media (max-width: 1100px) { .servizi__griglia--tre:has(> li:nth-child(2):last-child) { grid-template-columns: 1fr; } }
/* il catalogo: 2 schede per riga sul telefono, la foto sopra */
:is(#catalogo, #vetrina) .scheda { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
:is(#catalogo, #vetrina) .scheda__foto { aspect-ratio: 1; }
:is(#catalogo, #vetrina) .servizi__griglia--tre { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { :is(#catalogo, #vetrina) .servizi__griglia--tre { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) {
  :is(#catalogo, #vetrina) .servizi__griglia--tre { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  :is(#catalogo, #vetrina) .scheda:nth-child(n) { grid-template-columns: 1fr; min-height: 0; }
  :is(#catalogo, #vetrina) .scheda__testo { padding: 12px; }
  :is(#catalogo, #vetrina) .scheda h3 { font-size: 18px; margin-top: 6px; }
  :is(#catalogo, #vetrina) .btn { width: 100%; padding: 8px 10px; font-size: 14px; }
}

/* domande frequenti: la striscia della home porta ai gruppi */
.pagina-risposte .striscia__lista a { font-size: 15px; gap: 14px; text-align: left; }
.pagina-risposte .striscia__lista .ico { width: 32px; height: 32px; }
@media (max-width: 899px) {
  .pagina-risposte .striscia__lista { display: grid; grid-template-columns: 1fr; padding: 6px var(--margine-dx) 6px var(--margine); }
  .pagina-risposte .striscia__lista li + li::before { display: none; }
  .pagina-risposte .striscia__lista li + li { border-top: 1px solid var(--linea); }
  .pagina-risposte .striscia__lista a { flex-direction: row; justify-content: flex-start; padding: 12px 4px; font-size: 14.5px; }
}
body:not(.pagina-index) .domande + .domande { border-top: 1px solid var(--linea); }
.domande__testa h2 .ico { width: 40px; height: 40px; margin-right: 6px; }
.domande__testa .mini-video { grid-template-columns: 150px; margin: 0; }
.domande .link-freccia { margin-top: 18px; }
@media (max-width: 760px) { .domande__testa .mini-video { display: none; } }

/* le stelle anche per una fila di icone */
.stelle .ico--grande { width: 52px; height: 52px; }
.stelle:has(.ico--grande) { gap: 14px; margin-top: 22px; }

/* telefono: le schede del salone con la foto sopra, così il testo sta in poche righe */
@media (max-width: 680px) {
  .pagina-index .servizi__griglia--tre .scheda:nth-child(n) { grid-template-columns: 1fr; grid-template-rows: 230px auto; }
  .pagina-index .servizi__griglia--tre .scheda__testa { align-items: center; }
  .servizi__griglia--tre .scheda:not(:has(.scheda__foto)) .scheda__testo { padding: 20px 16px 18px; }
  .legale p, .legale li { font-size: 15px; line-height: 1.55; }
}

/* domande delle pagine interne: il titolo va a capo (con l'icona e la lineetta in riga) */
body:not(.pagina-index) .domande h2 { display: block; }
body:not(.pagina-index) .domande h2::before { display: inline-block; vertical-align: middle; margin: -4px 16px 0 0; }
body:not(.pagina-index) .domande h2 .ico { margin: -6px 10px 0 0; }
@media (max-width: 760px) { body:not(.pagina-index) .domande h2 { font-size: 26px; } }
/* una scheda sola accanto al testo: occupa tutta la sua colonna */
.estetica__griglia > .servizi__griglia--tre { grid-template-columns: 1fr; margin-top: 0; }
.estetica__griglia > .servizi__griglia--tre .voto { font-size: clamp(56px, 5.5vw, 84px); }


/* ═══ alta definizione (Domenico, 18/10): ogni immagine con almeno il doppio dei pixel della misura a schermo ═══ */
/* hero: il riquadro della foto non supera la metà della risoluzione della sorgente */
@media (min-width: 900px) {
  .hero__foto { width: 38%; }
  .hero__foto img { object-position: 50% 35%; }
}
/* sezioni rosa con l'immagine: la foto in un riquadro alto al massimo 450 px, non più a tutta altezza */
@media (min-width: 900px) {
  .sposa__foto { display: flex; align-items: center; min-height: 0 !important; padding: 48px clamp(24px, 3vw, 44px) 48px var(--margine); overflow: visible; }
  .sposa__foto img, .sposa__foto video { position: relative !important; inset: auto !important; width: 100%; height: clamp(300px, 31vw, 450px); border-radius: var(--raggio); }
  .js .reveal-media.sposa__foto { clip-path: none; }
}
/* le immagini accanto al testo: un riquadro di altezza fissa, centrato */
body:not(.pagina-index) .estetica__foto { min-height: 0; height: clamp(300px, 32vw, 460px); align-self: center; }
body:not(.pagina-index) .estetica__foto:has(.galleria-parrucche), body:not(.pagina-index) .estetica__foto:has(.mappa) { height: auto; }
@media (max-width: 680px) { body:not(.pagina-index) .estetica__foto { height: min(56svh, 100vw); } }

/* ═══ il catalogo delle parrucche, stile negozio ═══ */
#filtri-parrucche { display: grid; gap: 12px; margin-top: 26px; }
#filtri-parrucche .azioni { margin-top: 0; gap: 8px; }
#filtri-parrucche .btn--piccolo { min-height: 40px; padding: 6px 16px; font-size: 15px; }
#filtri-parrucche .btn[aria-pressed="true"] { background: var(--bordeaux); color: var(--bianco); }
#cerca-parrucca { width: min(100%, 420px); height: 46px; padding: 0 18px; border: 1px solid var(--bordeaux); border-radius: 999px; background: var(--avorio-chiaro); color: var(--inchiostro); font: 16px var(--sans); -webkit-appearance: none; appearance: none; }
#cerca-parrucca::placeholder { color: var(--testo-tenue); }
#conta-parrucche { margin-top: 18px; font-size: 15px; }
:is(#catalogo, #vetrina) .servizi__griglia--tre { grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 18px; }
:is(#catalogo, #vetrina) .scheda { display: flex; flex-direction: column; min-height: 0 !important; }
:is(#catalogo, #vetrina) .scheda__foto { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; cursor: zoom-in; background: #DCDEE0; }
:is(#catalogo, #vetrina) .scheda__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
:is(#catalogo, #vetrina) .scheda__testo { padding: 14px 16px 16px; flex: 1; }
:is(#catalogo, #vetrina) .scheda h3 { margin-top: 0; font-size: 21px; }
:is(#catalogo, #vetrina) .scheda .sottotitolo { margin-top: 4px; font-size: 15px; }
:is(#catalogo, #vetrina) .scheda .btn { margin-top: 12px; width: 100%; }
:is(#catalogo, #vetrina) .scheda:active { transform: none; }
#mostra-altre { margin-top: 26px; }
#nessuna-parrucca { margin-top: 18px; color: var(--inchiostro); }
@media (max-width: 1100px) { :is(#catalogo, #vetrina) .servizi__griglia--tre { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  :is(#catalogo, #vetrina) .servizi__griglia--tre { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  :is(#catalogo, #vetrina) .scheda__testo { padding: 10px 10px 12px; }
  :is(#catalogo, #vetrina) .scheda h3 { font-size: 17px; }
  :is(#catalogo, #vetrina) .scheda .btn { min-height: 40px; padding: 8px 8px; font-size: 13.5px; }
  #filtri-parrucche .btn--piccolo { padding: 6px 13px; font-size: 14px; }
}
/* la parrucca più grande */
#parrucca-grande { width: min(940px, calc(100% - 24px)); padding: 0; border: 0; border-radius: 6px; background: var(--avorio-chiaro); color: var(--testo); }
#parrucca-grande::backdrop { background: rgba(20, 20, 20, .6); }
#parrucca-grande[open] { animation: finestra .26s var(--ease-out); }
#parrucca-grande > div { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; }
#parrucca-grande img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #DCDEE0; }
#parrucca-grande > div > div { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 32px; }
#parrucca-grande h3 { font-size: 34px; margin-top: 8px; }
#parrucca-grande .sottotitolo { margin-top: 8px; }
#parrucca-grande .btn { margin-top: 20px; }
#chiudi-grande { position: absolute; top: 10px; right: 10px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bianco); color: var(--inchiostro); }
#chiudi-grande .ico { width: 18px; height: 18px; transform: rotate(45deg); }
@media (max-width: 760px) { #parrucca-grande > div { grid-template-columns: 1fr; } #parrucca-grande > div > div { padding: 18px 20px 22px; } #parrucca-grande h3 { font-size: 28px; } }

/* ═══ home · Prima e dopo: una riga che scorre, le foto come sono, mai una sotto l'altra ═══ */
.prima-dopo { margin-top: clamp(40px, 4.5vw, 64px); }
.prima-dopo .titolo-sezione { font-size: clamp(26px, 2.5vw, 38px); }
.prima-dopo .carosello { margin-top: 20px; }
#prima-dopo-lista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 16px; margin: 0; padding: 0; }
.prima-dopo { margin-bottom: clamp(48px, 5vw, 76px); }
#prima-dopo-lista::-webkit-scrollbar { display: none; }
#prima-dopo-lista li { flex: 0 0 auto; height: clamp(320px, 28vw, 420px); aspect-ratio: auto; scroll-snap-align: start; }
#prima-dopo-lista img { position: static; width: auto; height: 100%; object-fit: initial; }
@media (max-width: 899px) {
  #prima-dopo-lista { gap: 12px; margin-left: calc(-1 * var(--margine)); margin-right: calc(-1 * var(--margine-dx)); padding: 0 var(--margine-dx) 0 var(--margine); scroll-padding-left: var(--margine); }
  #prima-dopo-lista li { flex: 0 0 auto; height: 340px; }
}

/* catalogo: i filtri in una riga dal computer, pillole che vanno a capo dal telefono */
#filtri-parrucche { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
#filtri-parrucche .azioni { flex-wrap: wrap; gap: 8px; }
#filtri-parrucche .azioni + .azioni { padding-left: 22px; border-left: 1px solid var(--linea); }
#filtri-parrucche .btn { flex: none; width: auto; min-width: 0; }
#cerca-parrucca { margin-left: auto; width: min(100%, 300px); }
@media (max-width: 1100px) { #cerca-parrucca { margin-left: 0; width: min(100%, 420px); } }
@media (max-width: 899px) {
  #filtri-parrucche { display: grid; gap: 10px; }
  #filtri-parrucche .azioni + .azioni { padding-left: 0; border-left: 0; }
  #cerca-parrucca { width: 100%; }
}
/* hero: il riquadro della foto non supera 540 px (le sorgenti hanno almeno 1086 px di lato) */
@media (min-width: 900px) { .hero__foto { width: min(38%, 540px); } }
/* i due video guida: a 16:9, senza bande vuote */
#video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin-top: 12px; background: var(--rosa); border-radius: var(--raggio); }

/* ═══ righe di foto che scorrono (Prima e dopo, pieghe, estetica): le foto intere, alte uguali, mai una sotto l'altra ═══ */
.riga-foto { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 16px; margin: 0; padding: 0; }
.riga-foto::-webkit-scrollbar { display: none; }
.riga-foto li { position: relative; flex: 0 0 auto; height: clamp(320px, 28vw, 420px); overflow: hidden; scroll-snap-align: start; background: var(--rosa); }
.riga-foto img, .riga-foto video { display: block; width: auto; height: 100%; transition: transform .6s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .riga-foto li:hover img { transform: scale(1.04); } }
.riga-foto--pieghe li { height: clamp(220px, 18.5vw, 270px); }
.riga-foto--estetica li { height: clamp(220px, 18vw, 260px); }
.sposa__testo > .carosello { margin-top: 22px; }
.estetica__griglia > .carosello { grid-column: 1 / -1; margin-top: 6px; }
@media (max-width: 899px) {
  .riga-foto { gap: 12px; margin-left: calc(-1 * var(--margine)); margin-right: calc(-1 * var(--margine-dx)); padding: 0 var(--margine-dx) 0 var(--margine); scroll-padding-left: var(--margine); }
  .riga-foto li { height: 340px; }
  .riga-foto--pieghe li { height: 280px; }
  .riga-foto--estetica li { height: 240px; }
}

/* scheda delle extension: il video piccolo; fino a 1100 px accanto al dettaglio dello stesso lavoro */
.scheda__foto--doppia { display: block; }
.scheda__foto--doppia > img, .scheda__foto--doppia > video { inset: 0 auto 0 0; width: 50%; height: 100%; }
.scheda__foto--doppia > video { left: 50%; }
@media (min-width: 1101px) {
  .scheda__foto--doppia > img { display: none; }
  .scheda__foto--doppia > video { left: 0; width: 100%; }
}
.riga-foto--pieghe li { height: clamp(200px, 16vw, 232px); }
@media (min-width: 900px) { .estetica__griglia > .carosello { margin: 30px 0 22px; } }
@media (max-width: 899px) { .riga-foto--pieghe li { height: 280px; } .estetica__griglia > .carosello { margin-top: 18px; } }

/* un link dentro il testo di una voce (WhatsApp, il salone) resta nella frase, non diventa una riga a sé */
.estetica__voci li > span a, .estetica__voci li > span a:active {
  display: inline; padding: 0; gap: 0; background: none; border: 0; font-size: inherit; line-height: inherit;
  color: var(--bordeaux); text-decoration: underline; text-underline-offset: 3px; transform: none; box-shadow: none;
  -webkit-user-select: auto; user-select: auto;
}

/* telefono, pagine interne: nei passi icona e numero sopra, la frase sotto a tutta larghezza (max 3 righe) */
@media (max-width: 680px) {
  body:not(.pagina-index) .passi > li:not(.percorso__freccia) { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 12px; }
  body:not(.pagina-index) .passi > li > p { grid-column: 1 / -1; margin-top: 0; }
}
/* telefono: le liste con la lineetta un po' più strette a sinistra, e i due video guida con meno margine interno */
@media (max-width: 680px) {
  .estetica__testo > ul:not(.estetica__voci, .galleria-parrucche, .riga-foto, .servizi__griglia, .mini-video, .percorso__passi, .recensioni__lista, .fisarmonica, .servizi__elenco) li, .sposa__testo > ul:not(.estetica__voci, .galleria-parrucche, .riga-foto, .servizi__griglia, .mini-video, .percorso__passi, .recensioni__lista, .fisarmonica, .servizi__elenco) li, .scheda__testo > ul:not(.estetica__voci, .galleria-parrucche, .riga-foto, .servizi__griglia, .mini-video, .percorso__passi, .recensioni__lista, .fisarmonica, .servizi__elenco) li { padding-left: 20px; font-size: 16px; }
  #video .scheda__testo { padding: 18px 14px 16px; }
}
@media (max-width: 400px) {
  .estetica__voci > li:not(:has(> a)) { gap: 14px; padding: 13px 14px; font-size: 16px; }
  .estetica__voci > li:not(:has(> a)) > .ico { width: 30px; height: 30px; }
}
.percorso--cinque .percorso__passi { align-items: stretch; }

/* home · la vetrina delle parrucche: le schede prodotto del catalogo, 4 in fila dal computer e 2 dal telefono */
#vetrina { margin-top: 30px; }
#vetrina .servizi__griglia--tre { grid-template-columns: repeat(4, 1fr); margin-top: 0; }
#vetrina .sezione-piede { margin-top: 26px; }
@media (max-width: 899px) { #vetrina .servizi__griglia--tre { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* ═══ home · Servizi: le schede dei servizi del design (icona del kit, numero, nome, una riga, «Scopri») ═══ */
.servizi__elenco { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 28px; }
.servizio { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr auto; column-gap: 14px; padding: 22px 22px 20px; background: var(--avorio-chiaro); border: 1px solid var(--linea); transition: border-color .2s ease, background-color .2s ease; }
.servizio > .ico--grande { width: 46px; height: 46px; color: var(--bordeaux); }
.servizio > .scheda__num { align-self: center; font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--bordeaux); }
.servizio h3 { grid-column: 1 / -1; margin-top: 16px; font-size: clamp(20px, 1.55vw, 23px); line-height: 1.18; letter-spacing: -0.015em; }
.servizio__due { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* i due punti del copy restano nel testo, non si vedono */
.servizio p { grid-column: 1 / -1; margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--testo); }
.servizio p::first-letter { text-transform: uppercase; }
.servizio .link-freccia { grid-column: 1 / -1; justify-self: start; margin-top: 16px; }
.servizio .link-freccia::after { content: ""; position: absolute; inset: 0; }   /* tutta la scheda porta alla sezione */
@media (hover: hover) and (pointer: fine) { .servizio:hover { border-color: var(--bordeaux); } .servizio:hover > .ico--grande { transform: translateY(-3px); } }
.servizio:active { background: var(--cipria); }
.servizio > .ico--grande { transition: transform .3s var(--ease-out); }
@media (max-width: 1100px) { .servizi__elenco { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 899px) { .servizi__elenco { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
/* telefono: una scheda per riga, icona e numero a sinistra, così ogni frase sta in 3 righe (copy.md, «Servizi») */
@media (max-width: 680px) {
  .servizi__elenco { grid-template-columns: 1fr; gap: 10px; margin-top: 22px; }
  .servizio { grid-template-columns: 44px 1fr; grid-template-rows: auto auto auto; column-gap: 14px; padding: 16px 16px 14px; }
  .servizio > .ico--grande { grid-row: 1; grid-column: 1; width: 38px; height: 38px; }
  .servizio > .scheda__num { grid-row: 2 / span 2; grid-column: 1; align-self: start; margin-top: 8px; font-size: 22px; }
  .servizio h3, .servizio p, .servizio .link-freccia { grid-column: 2; }
  .servizio h3 { grid-row: 1; align-self: center; margin-top: 0; font-size: 20px; }
  .servizio p { margin-top: 6px; }
  .servizio .link-freccia { margin-top: 10px; }
}
/* 11 servizi: l'ultima fila, più corta, sta al centro (4 · 4 · 3 dal computer, 3 · 3 · 3 · 2 fino a 1100 px, 2 per riga fino a 899) */
@media (min-width: 681px) {
  .servizi__elenco { display: flex; flex-wrap: wrap; justify-content: center; }
  .servizio { flex: 0 1 calc((100% - 3 * 18px) / 4); }
}
@media (min-width: 681px) and (max-width: 1100px) { .servizio { flex-basis: calc((100% - 2 * 18px) / 3); } }
@media (min-width: 681px) and (max-width: 899px) { .servizi__elenco { gap: 12px; } .servizio { flex-basis: calc((100% - 12px) / 2); } }

/* ═══ C1 · i paragrafi respirano anche dopo l'entrata allo scroll (la classe «reveal» non toglie più le regole) ═══ */
:is(.estetica__testo, .sposa__testo, .percorso__riga, .scheda__testo) > .titolo-sezione + :is(p, ul) { margin-top: 16px; }
:is(.estetica__testo, .sposa__testo) > .link-freccia + p { margin-top: 18px; }
:is(.estetica__testo, .sposa__testo) > .estetica__voci + p { margin-top: 16px; }
:is(.estetica__testo, .sposa__testo) > p + .link-freccia { margin-top: 14px; }

/* ════════════════════════════════════════════════════════════════════════════════════
   TELEFONO, 19/10/2026 (ANALISI-TELEFONO-2026-10-19.md): più bello anche dal cellulare
   ════════════════════════════════════════════════════════════════════════════════════ */
.ico--pagamento { --m: url("/assets/img/icone/pagamento.png"); }
.recensioni .stelle .ico--stella, .recensione .ico--stella { --m: url("/assets/img/icone/stella-piena.png"); }   /* H8 · le stelle piene */
a[href^="tel:"] { white-space: nowrap; }                                                               /* C7 */
h1, h2, h3 { text-wrap: balance; }                                                                      /* C2 */
.credit, .credit a { color: var(--testo); }                                                             /* C12 */
section.pagina-404 { padding: clamp(56px, 8vw, 120px) 0; }                                              /* N1 */
body.pagina-404 { padding: 0; }
.menu__info, .shop__foto, .servizio__foto, .piede__onda, #apri-filtri { display: none; }

/* C11 · le icone di sezione in un cerchio cipria */
.ico-cerchio { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--cipria); color: var(--bordeaux); flex: none; }
.ico-cerchio > .ico, .ico-cerchio > .ico--grande { width: 28px; height: 28px; }
.estetica__testo > .ico-cerchio, .percorso__riga > .ico-cerchio { margin-bottom: 4px; }
.stelle--cerchi { gap: 12px; }
.domande__testa h2 .ico-cerchio { display: contents; }   /* da computer i gruppi delle domande restano come sono */

/* C8 · bersagli di almeno 44 px, senza cambiare l'aspetto */
.link-freccia { position: relative; }
.link-freccia::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.hero nav.occhiello a { display: inline-block; padding: 13px 0; margin: -13px 0; }
.mappa p a { display: inline-block; padding: 11px 0; }

/* Q8 · la scheda grande: pulsante a tutta larghezza, occhiello bilanciato */
#parrucca-grande .btn { align-self: stretch; justify-content: center; }
#parrucca-grande .occhiello { text-wrap: balance; }

/* H5 · Q2 · le schede prodotto delle parrucche: occhiello coi dettagli, prezzo leggero, pulsante su una riga */
:is(#catalogo, #vetrina) .scheda__dettagli { margin: 0 0 4px; font-size: 11.5px; letter-spacing: .14em; }
:is(#catalogo, #vetrina) .scheda .sottotitolo { color: var(--testo-tenue); font-size: 14px; }
:is(#catalogo, #vetrina) .scheda .btn { min-height: 44px; white-space: nowrap; justify-content: center; }

/* Q9 · «Mostra altre» col conteggio ripetuto */
#conta-parrucche-giu { margin-top: 22px; font-size: 15px; }
#mostra-altre { min-height: 48px; margin-top: 10px; }
#mostra-altre .ico { width: 14px; height: 14px; }

/* Q1 · la ricerca con l'icona del kit */
.filtri__cerca { position: relative; display: block; margin-left: auto; width: min(100%, 300px); }
.filtri__cerca .ico { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--bordeaux); pointer-events: none; }
.filtri__cerca #cerca-parrucca { width: 100%; margin: 0; padding-left: 44px; }
.filtri__pannello { display: contents; }
#filtri-parrucche .azioni + .filtri__pannello > .azioni { padding-left: 22px; border-left: 1px solid var(--linea); }
@media (max-width: 1100px) { .filtri__cerca { margin-left: 0; width: min(100%, 420px); } }

/* Q4 · nessun risultato: lo stato del kit */
#nessuna-parrucca:not([hidden]) { position: relative; display: block; margin-top: 18px; padding: 92px 20px 40px; text-align: center; background: var(--avorio) url("/assets/img/sfondo-avorio-onde.webp") right bottom / 900px auto no-repeat; border: 1px solid var(--linea); }
#nessuna-parrucca::before { content: ""; position: absolute; left: 50%; top: 22px; width: 56px; height: 56px; margin-left: -28px; border-radius: 50%; background: var(--cipria); }
#nessuna-parrucca::after { content: ""; position: absolute; left: 50%; top: 36px; width: 28px; height: 28px; margin-left: -14px; background: var(--bordeaux); -webkit-mask: url("/assets/img/icone/ricerca.png") center / contain no-repeat; mask: url("/assets/img/icone/ricerca.png") center / contain no-repeat; }

/* Q3 · l'indice del reparto parrucche sotto la hero */
.indice-reparto { background: var(--avorio-chiaro); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.indice-reparto__lista { display: grid; grid-template-columns: repeat(3, 1fr); }
.indice-reparto__lista li + li { border-left: 1px solid var(--linea); }
.indice-reparto__lista a { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 84px; padding: 12px 16px; color: var(--inchiostro); font-family: var(--serif); font-size: 21px; text-decoration: none; transition: background-color .2s ease; }
.indice-reparto__lista .ico { width: 40px; height: 40px; color: var(--bordeaux); }
.indice-reparto__lista a:active { background: var(--cipria); }
@media (hover: hover) and (pointer: fine) { .indice-reparto__lista a:hover { background: var(--cipria-chiara); } }

/* Q5 · i due video guida: muti, in loop, senza bande nere, senza cornice */
#video .scheda { border: 0; background: none; }
#video .scheda__testo { padding: 0; }
#video video { aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--raggio); background: var(--rosa); }

/* P3 · extension: la foto del kit accanto al testo */
.percorso__foto img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--raggio); }
@media (min-width: 900px) {
  .percorso__riga:has(> .percorso__foto) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); column-gap: 56px; align-items: center; }
  .percorso__riga:has(> .percorso__foto) > :not(.percorso__foto) { grid-column: 1; }
  .percorso__riga:has(> .percorso__foto) > .percorso__foto { grid-column: 2; grid-row: 1 / span 6; }
}
/* P4 · la hero di /parrucchiere con le tre capigliature del kit: riquadro alto al massimo 470 px (nitida, 2×) */
.pagina-parrucchiere .hero__foto img { object-position: 30% 50%; }
@media (min-width: 900px) { .pagina-parrucchiere .hero { min-height: 440px; } .pagina-parrucchiere .hero__testo { padding-top: 34px; padding-bottom: 40px; } }

/* Q7 · E2 · foto nelle sezioni che erano solo testo */
.estetica__foto--ciglia img, .estetica__foto--infoltimento img { object-position: 50% 40%; }

/* le parrucche toccabili fuori dal catalogo (/come-ordinare) */
.galleria-parrucche .scheda__foto { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }

@media (max-width: 899px) {
  /* C6 · niente barra in alto; in fondo al menu indirizzo, telefono, orari, social e la firma a onda */
  .topbar { display: none; }
  /* C9 · nessuna riga grigia sotto la foto */
  .hero__foto::after { bottom: -1px; height: calc(32% + 1px); }

  /* C2 · due misure di titolo */
  .hero h1 { font-size: 36px; line-height: 1.04; }
  .pagina-index .hero h1 { font-size: 40px; line-height: 1.02; }
  .pagina-index .hero .riga { display: block; }
  main .titolo-sezione.titolo-sezione, .invito h2 { font-size: 30px; line-height: 1.1; }
  main :is(.percorso h2, .percorso .titolo-sezione, .prima-dopo .titolo-sezione, .domande h2).titolo-sezione,
  main .percorso h2, main .domande h2 { font-size: 26px; line-height: 1.14; }

  /* C3 · le onde vere del kit al posto delle SVG stirate */
  .onde--sposa, .onde--invito-sx, .onde--invito-dx, .onde--shop, .onde--percorso, .onde--servizi { display: none; }
  .invito, section.pagina-404 { background-color: var(--avorio); background-image: url("/assets/img/sfondo-avorio-onde.webp"); background-repeat: no-repeat; background-position: right -120px bottom; background-size: 860px auto; border-top: 1px solid var(--linea); }
  .shop__fascia { background: var(--bordeaux) url("/assets/img/sfondo-bordeaux-onde.webp") right -140px bottom / 900px auto no-repeat; }
  .pagina-index :is(#servizi, #acconciature, #estetica, #recensioni) .titolo-sezione::after { content: ""; display: block; width: 96px; height: 24px; margin-top: 12px; background: url("/assets/img/onda-firma.webp") left center / contain no-repeat; }

  /* C11 · i gruppi delle domande: l'icona nel cerchio sopra il titolo, senza lineetta */
  .domande__testa h2 .ico-cerchio { display: grid; margin-bottom: 12px; }
  .domande__testa h2 .ico-cerchio .ico { width: 28px; height: 28px; }
  .pagina-risposte .domande__testa h2::before, .pagina-risposte .domande__testa::before { display: none !important; }

  /* C5 · il pulsante WhatsApp fisso più basso; sparisce quando ce n'è già uno uguale sullo schermo */
  .wa-fissa { min-height: 48px; padding: 10px 16px; font-size: 15.5px; }
  .piede { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

  /* H1 · la prima schermata: foto più bassa, titolo, testo e pulsante subito visibili */
  .pagina-index .hero__foto { height: min(47svh, 440px); }
  .pagina-index .hero__testo { margin-top: -56px; padding-bottom: 32px; }
  .pagina-index .hero .hero__sotto { margin-top: 14px; font-size: 17px; }
  .pagina-index .hero .azioni { margin-top: 20px; gap: 10px; }
  .pagina-index .hero h1 { margin-top: 14px; }
  .hero .thk-nota-foto { margin-top: 14px; font-size: 12.5px; }

  /* H3 · la striscia delle pagine: pillole su una riga che scorre */
  .striscia__lista { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 10px var(--margine-dx) 10px var(--margine); scroll-padding-left: var(--margine); scroll-snap-type: x proximity; }
  .striscia__lista::-webkit-scrollbar { display: none; }
  .striscia__lista li { flex: none; scroll-snap-align: start; }
  .striscia__lista li + li::before { display: none; }
  .striscia__lista a { min-height: 48px; padding: 8px 16px 8px 12px; gap: 10px; font-size: 15px; white-space: nowrap; border: 1px solid var(--linea); border-radius: 999px; background: var(--avorio); flex-direction: row; }
  .striscia__lista .ico { width: 24px; height: 24px; }

  /* H2 · i Servizi in una riga che scorre, schede con la foto */
  .servizi__elenco[data-scorre] { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-left: calc(-1 * var(--margine)); margin-right: calc(-1 * var(--margine-dx)); padding: 0 var(--margine-dx) 4px var(--margine); scroll-padding-left: var(--margine); }
  .servizi__elenco[data-scorre]::-webkit-scrollbar { display: none; }
  .servizi__elenco[data-scorre] .servizio { flex: 0 0 80%; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto 1fr auto; column-gap: 12px; padding: 0 16px 14px; scroll-snap-align: start; overflow: hidden; }
  .servizi__elenco[data-scorre] .servizio__foto { display: block; grid-column: 1 / -1; width: calc(100% + 32px); max-width: none; margin: 0 -16px 14px; aspect-ratio: 4 / 3; object-fit: cover; }
  .servizi__elenco[data-scorre] .servizio > .ico--grande { grid-row: auto; grid-column: 1; width: 34px; height: 34px; }
  .servizi__elenco[data-scorre] .servizio > .scheda__num { grid-row: auto; grid-column: 2; align-self: center; margin-top: 0; font-size: 22px; }
  .servizi__elenco[data-scorre] .servizio h3, .servizi__elenco[data-scorre] .servizio p, .servizi__elenco[data-scorre] .servizio .link-freccia { grid-column: 1 / -1; }
  .servizi__elenco[data-scorre] .servizio h3 { margin-top: 10px; font-size: 20px; }
  .servizi__elenco[data-scorre] .servizio p { margin-top: 6px; font-size: 15px; }
  .servizi__elenco[data-scorre] .servizio .link-freccia { margin-top: 10px; align-self: end; }

  /* C10 · i puntini sotto le righe che scorrono */
  .puntini--riga { position: static; transform: none; display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
  .puntini--riga[hidden] { display: none; }
  .puntini--riga span { width: 7px; height: 7px; }

  /* C10 · righe di foto: schede tutte uguali al 78 % (il video resta stretto, sotto i 240 px) */
  .riga-foto li { flex: 0 0 78%; height: auto !important; aspect-ratio: 4 / 5; }
  .riga-foto--estetica li { aspect-ratio: 1; }
  .riga-foto img { width: 100%; height: 100%; object-fit: cover; }
  .riga-foto li:has(video) { flex: 0 0 auto; aspect-ratio: auto; height: 0; }
  .riga-foto--pieghe li:has(video) { height: auto !important; }
  .riga-foto--pieghe li:has(video) video { height: auto; width: 160px; aspect-ratio: 480 / 848; }

  /* C10 · gallerie corte delle pagine: 2 affiancate, 3 = una grande e due piccole (non scorrono) */
  .galleria-parrucche:has(> li:nth-child(2):last-child), .galleria-parrucche:has(> li:nth-child(3):last-child) { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow: visible; margin-left: 0; margin-right: 0; padding: 0; }
  .galleria-parrucche:has(> li:nth-child(2):last-child) li, .galleria-parrucche:has(> li:nth-child(3):last-child) li { flex: none; width: auto; aspect-ratio: 4 / 5; }
  .galleria-parrucche:has(> li:nth-child(3):last-child) li:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }

  /* H4 · fascia bordeaux: la foto del kit sotto il testo */
  .shop__foto { display: block; width: 100%; height: auto; margin-top: 20px; border-radius: var(--raggio); }

  /* H9 · «Leggi tutte le domande» sotto l'elenco, come link con la freccia */
  .pagina-index #domande .contenitore { display: flex; flex-direction: column; }
  .pagina-index #domande .domande__testa { display: contents; }
  .pagina-index #domande .domande__testa h2 { order: 1; }
  .pagina-index #domande .fisarmonica { order: 2; }
  .pagina-index #domande .domande__testa > .btn { order: 3; align-self: flex-start; margin-top: 18px; min-height: 44px; padding: 6px 0 8px; border: 0; border-bottom: 1px solid var(--bordeaux); border-radius: 0; background: none; color: var(--bordeaux); width: auto; }

  /* H10 · i 5 passi uniti da una linea sottile */
  .percorso--cinque .percorso__passi { position: relative; }
  .percorso--cinque .percorso__passi::before { content: ""; position: absolute; left: 34px; top: 20px; bottom: 20px; width: 1px; background: var(--bordeaux); opacity: .35; }
  .percorso--cinque .percorso__passi > li { position: relative; }

  /* Q6 · le nature morte orizzontali in un riquadro 4:3 */
  body:not(.pagina-index) .sposa__foto { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
  body:not(.pagina-index) .sposa__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .estetica__foto--ciglia { aspect-ratio: 1; height: auto !important; }

  /* Q1 · i filtri: una riga di pillole che scorre, «Filtra» apre gli altri */
  #filtri-parrucche { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
  #filtri-parrucche .filtri__pillole { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: calc(-1 * var(--margine)); padding-left: var(--margine); }
  #filtri-parrucche .filtri__pillole::-webkit-scrollbar { display: none; }
  #filtri-parrucche .btn--piccolo { border-radius: 999px; min-height: 40px; padding: 6px 16px; flex: none; }
  #apri-filtri { display: inline-flex; gap: 8px; }
  #apri-filtri .ico { width: 16px; height: 16px; }
  #apri-filtri[aria-expanded="true"] { background: var(--bordeaux); color: var(--bianco); }
  .filtri__pannello { display: none; grid-column: 1 / -1; padding: 14px; background: var(--avorio-chiaro); border: 1px solid var(--linea); border-radius: var(--raggio); }
  .filtri__pannello.aperto { display: grid; gap: 10px; }
  #filtri-parrucche .azioni + .filtri__pannello > .azioni { padding-left: 0; border-left: 0; }
  .filtri__cerca { grid-column: 1 / -1; width: 100%; margin: 0; }

  /* Q2 · H5 · il pulsante delle schede su una riga, alto 44 */
  :is(#catalogo, #vetrina) .scheda .btn { min-height: 44px; padding: 8px; font-size: 13.5px; }

  /* C4 · il piede: firma a onda, logo al centro, pagine su 2 colonne, contatti toccabili, social a bottoni */
  .piede { padding-top: 22px; text-align: left; }
  .piede__onda { display: block; width: 120px; height: auto; margin: 0 auto 14px; }
  .piede__griglia { display: grid; grid-template-columns: 1fr; gap: 18px; }
  .piede__marchio { flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 0; }
  .piede__marchio > div { padding-top: 0; }
  .logo--piede img { height: 64px; }
  .piede__marchio p:not(.piede__nome) { margin: 2px auto 0; }
  .piede__col, .piede__col--social, .piede__col--contatti { padding: 0 !important; border-left: 0 !important; grid-column: auto !important; }
  .piede__col h2 { font-size: 15px; color: var(--testo-tenue); letter-spacing: .08em; text-transform: uppercase; }
  .piede__col nav ul, nav.piede__col ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  nav.piede__col li a { display: flex; align-items: center; min-height: 44px; }
  .piede__col--contatti li { display: flex; align-items: center; gap: 12px; min-height: 44px; line-height: 1.35; }
  .piede__col--contatti .ico { width: 20px; height: 20px; color: var(--bordeaux); }
  .piede__col--social ul { display: flex; gap: 10px; margin-top: 8px; }
  .piede__col--social a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--linea); border-radius: 999px; }
  .piede__col--social .ico { width: 20px; height: 20px; color: var(--bordeaux); }
  .piede__social-nome:not(.piede__social-nome--sempre) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .piede__fondo { align-items: flex-start; margin-top: 10px; }
  .piede__legali { gap: 0 16px; }
  .piede__legali a { display: inline-flex; align-items: center; min-height: 44px; }
}
.piede__col--contatti .ico, .piede__col--social .ico { display: none; }
@media (max-width: 899px) { .piede__col--contatti .ico, .piede__col--social .ico { display: inline-block; } }

/* C6 · il menu aperto (sotto i 1360 px): in fondo i contatti e la firma a onda */
@media (max-width: 1359px) {
  .menu__info { display: block; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linea); }
  .menu__info ul { display: grid; gap: 4px; }
  .menu__info li { display: flex; align-items: center; gap: 12px; min-height: 40px; font-size: 15px; color: var(--testo); border: 0 !important; }
  .menu__info li .ico { width: 20px; height: 20px; color: var(--bordeaux); }
  .menu__info a { font-size: inherit !important; color: var(--bordeaux) !important; padding: 0 !important; display: inline !important; }
  .menu__social { display: flex; gap: 10px; margin-top: 12px; }
  .menu__social a { display: inline-flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--linea); border-radius: 50%; }
  .menu__social .ico { width: 20px; height: 20px; color: var(--bordeaux); }
  .menu__onda { display: block; width: 110px; height: auto; margin-top: 18px; }
}
@media (max-width: 899px) {
  .servizi__elenco[data-scorre] .servizio > *, .servizi__elenco[data-scorre] .servizio h3, .servizi__elenco[data-scorre] .servizio p, .servizi__elenco[data-scorre] .servizio .link-freccia { grid-row: auto; }
  .indice-reparto__lista { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 10px var(--margine-dx) 10px var(--margine); }
  .indice-reparto__lista::-webkit-scrollbar { display: none; }
  .indice-reparto__lista li { flex: none; }
  .indice-reparto__lista li + li { border-left: 0; }
  .indice-reparto__lista a { min-height: 48px; padding: 8px 16px 8px 12px; gap: 10px; font-family: var(--sans); font-size: 15px; white-space: nowrap; border: 1px solid var(--linea); border-radius: 999px; background: var(--avorio); }
  .indice-reparto__lista .ico { width: 24px; height: 24px; }
}
:is(#catalogo, #vetrina) .scheda__dettagli::before { display: none; }
:is(#catalogo, #vetrina) .scheda__dettagli { display: block; margin: 0 0 6px; padding: 0; font-size: 11px; line-height: 1.45; letter-spacing: .08em; color: var(--testo-tenue); }
@media (max-width: 899px) {
  #prima-dopo-lista li { flex: 0 0 78%; height: auto; aspect-ratio: 4 / 5; }
  #prima-dopo-lista img { position: static; width: 100%; height: 100%; object-fit: cover; }
}

@media (max-width: 899px) {
  .piede__marchio .logo { margin: 0 auto; }
  .pagina-index #domande .domande__testa h2 { display: block; }
  .pagina-index #domande .domande__testa h2::before { display: none; }
}
@media (max-width: 899px) and (max-height: 760px) {
  .pagina-index .hero__foto { height: 42svh; }
  .pagina-index .hero__testo { margin-top: -72px; }
  .pagina-index .hero h1 { margin-top: 10px; font-size: 38px; }
  .pagina-index .hero .hero__sotto { margin-top: 10px; font-size: 16.5px; line-height: 1.38; }
  .pagina-index .hero .azioni { margin-top: 14px; }
  .pagina-index .hero .azioni .btn { min-height: 50px; }
}
.percorso .ico-cerchio, .sposa .ico-cerchio, .invito .ico-cerchio { background: var(--avorio-chiaro); }
@media (max-width: 899px) {
  .percorso--cinque .percorso__passi::before { display: none; }
  .pagina-index .percorso--cinque .percorso__passi::before { display: block; }
}
/* sezioni con titolo, testo e foto (laminazione, uomo e infoltimento): tre colonne in fila dal computer */
@media (min-width: 1101px) {
  .estetica__griglia:has(> .estetica__foto--ciglia), .estetica__griglia:has(> .estetica__foto--infoltimento) { grid-template-columns: 1fr 1fr minmax(0, 380px); align-items: center; column-gap: 40px; }
  .estetica__foto--ciglia, .estetica__foto--infoltimento { height: clamp(300px, 27vw, 380px) !important; }
}
/* F2 · l'indice dei gruppi di domande: righe da 16 px con la freccia che porta più giù */
@media (max-width: 899px) {
  .pagina-risposte .striscia__lista { display: grid; gap: 0; overflow: visible; padding: 4px var(--margine-dx) 4px var(--margine); }
  .pagina-risposte .striscia__lista li + li { border-top: 1px solid var(--linea); }
  .pagina-risposte .striscia__lista a { justify-content: flex-start; min-height: 52px; padding: 8px 0; border: 0; border-radius: 0; background: none; font-size: 16px; white-space: normal; }
  .pagina-risposte .striscia__lista a::after { content: ""; margin-left: auto; width: 18px; height: 18px; flex: none; background: var(--bordeaux); -webkit-mask: url("/assets/img/icone/freccia-destra.png") center / contain no-repeat; mask: url("/assets/img/icone/freccia-destra.png") center / contain no-repeat; }
}
.estetica__foto .foto-vetrina { position: static; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 45%; margin-bottom: 14px; border-radius: var(--raggio); }
/* home · la foto grande delle acconciature: al massimo 540 px di larghezza, così resta nitida (sorgente 1086) */
@media (min-width: 900px) { .pagina-index #acconciature .sposa__foto { justify-content: center; } .pagina-index #acconciature .sposa__foto img { max-width: 540px; margin: 0 auto; } }
/* nitidezza ≥ 2× dopo le foto nuove (19/10) */
@media (min-width: 900px) {
  .pagina-index #estetica .estetica__foto { width: 100%; max-width: 500px; justify-self: end; }
  .pagina-parrucchiere .hero__foto, .pagina-estetica .hero__foto { top: 32px; bottom: 32px; right: max(64px, calc((100% - 1312px) / 2)); width: min(38%, 520px); -webkit-mask-image: none; mask-image: none; border-radius: var(--raggio); overflow: hidden; }
  .pagina-parrucchiere .hero__foto img { object-position: 40% 50%; }
}
#video video { width: min(100%, 440px); margin-inline: auto; aspect-ratio: 5 / 4; }
@media (max-width: 380px) {
  :is(.estetica__testo, .sposa__testo, .percorso__riga) > p:not(.sottotitolo, .occhiello, .thk-nota-foto, .sposa__nota, .voto, .recensione__chi, .stelle, .hero__sotto) { font-size: 16px; }
}
/* le schede dei Servizi restano cliccabili per intero */
.servizio .link-freccia { position: static; }
.servizio .link-freccia::before { display: none; }
.servizio .link-freccia::after { z-index: 1; }
/* le righe che scorrono scorrono solo di lato */
.servizi__elenco[data-scorre], .riga-foto, .galleria-parrucche, .striscia__lista, .indice-reparto__lista, #filtri-parrucche .filtri__pillole { overflow-y: hidden; }
/* nelle righe che scorrono l'entrata è solo di opacità (lo spostamento in giù farebbe scorrere la riga anche in verticale) */
.js :is(.servizi__elenco[data-scorre], .riga-foto, .galleria-parrucche) > .reveal { transform: none; }
/* C4 · il piede più corto: marchio in riga, social accanto ai contatti, contatti senza righe vuote; la barra WhatsApp sparisce sul piede */
@media (max-width: 899px) {
  .piede { padding-top: 16px; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .piede__onda { width: 104px; margin-bottom: 10px; }
  .piede__griglia { grid-template-columns: 1fr auto; gap: 16px 12px; }
  .piede__marchio { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: center; gap: 14px; text-align: left; }
  .piede__marchio .logo { margin: 0; }
  .logo--piede img { height: 56px; }
  .piede__marchio p:not(.piede__nome) { margin: 2px 0 0; max-width: 22ch; font-size: 14.5px; }
  nav.piede__col { grid-column: 1 / -1; }
  .piede__col--contatti { grid-column: 1 / 2 !important; }
  .piede__col--social { grid-column: 2 / 3 !important; }
  .piede__col--contatti ul { display: grid; gap: 8px; margin-top: 8px; }
  .piede__col--contatti li { min-height: 0; align-items: flex-start; font-size: 14.5px; }
  .piede__col--contatti li:has(a[href^="tel:"]) { min-height: 32px; align-items: center; }
  .piede__col--contatti .ico { margin-top: 2px; }
  .piede__col--social ul { flex-direction: column; gap: 8px; }
  .piede__col h2 { font-size: 13px; }
  .piede__fondo { margin-top: 6px; padding-top: 8px; gap: 0 24px; }
  .piede__legali { gap: 0 14px; }
  .piede__legali a, .credit { font-size: 13px; }
  .credit { margin-top: 2px; }
}
@media (max-width: 899px) {
  nav.piede__col ul { grid-template-columns: repeat(2, max-content); column-gap: 28px; }
  nav.piede__col li a { white-space: nowrap; }
}
/* i puntini sotto le righe servono solo dal telefono (dal computer ci sono le frecce) */
@media (min-width: 900px) { .puntini--riga { display: none !important; } }

/* ═══ giro 2 del telefono (19/10): spazi uguali fra titolo e testo, titoli a due misure, piede, conteggio ═══ */
@media (max-width: 899px) {
  /* C2 · H1 delle pagine interne 36 px, tutti gli H2 di sezione 30 px */
  body:not(.pagina-index) .hero h1 { font-size: 36px; }
  body:not(.pagina-index) main :is(.estetica, .sposa) .titolo-sezione.titolo-sezione { font-size: 30px; }

  /* C1 · titolo → testo 16 px, paragrafo → paragrafo 14 px */
  :is(.estetica__testo, .sposa__testo, .percorso__riga, .shop__fascia-testo) > .titolo-sezione + :is(p, ul, div) { margin-top: 16px; }
  .percorso__riga { gap: 0; }
  .percorso__riga > .titolo-sezione + *, .percorso__riga > h2 + * { margin-top: 16px; }
  .percorso__riga > * + * { margin-top: 16px; }
  .percorso__riga > p + p, .percorso__riga > .sottotitolo + .sottotitolo { margin-top: 14px; }
  .percorso__riga > :is(ol, .azioni, .estetica__voci, .percorso__foto, .link-freccia) { margin-top: 20px; }
  .percorso__riga > .titolo-sezione + :is(ol, .estetica__voci) { margin-top: 18px; }
  .shop__fascia-testo > p + p, .sposa__nota + .sposa__nota { margin-top: 14px; }
  .shop__fascia-griglia { row-gap: 16px; }
  /* le sezioni centrate (invito, Dove siamo, Altre domande): 12 px */
  .invito__testo > h2 + p { margin-top: 12px; }
  .invito__testo > p + p { margin-top: 12px; }
}
@media (max-width: 680px) {
  /* il titolo da solo in un blocco e il testo nel blocco dopo (uomo, laminazione, condizioni, da dove cominciare): 16 px */
  .estetica__griglia > .estetica__testo:not(:has(> :not(.titolo-sezione, .ico-cerchio))) + * { margin-top: -16px; }
  .estetica__griglia > .estetica__testo:not(:has(> :not(.titolo-sezione, .ico-cerchio))) + * > :first-child { margin-top: 0; }
}
@media (max-width: 899px) {
  /* C4 · il piede: onda, logo e frase allineati a sinistra come il resto del piede */
  .piede__onda { margin-left: 0; margin-right: auto; }
  .piede__marchio { justify-content: flex-start; }
}
/* Q9 · il conteggio sotto la griglia solo quando c'è «Mostra altre» */
#conta-parrucche-giu:has(+ #mostra-altre[hidden]) { display: none; }
@media (max-width: 899px) {
  .piede .piede__onda { margin-left: var(--margine); }
  .dove .invito__testo > p { margin-top: 12px; }
}
@media (max-width: 899px) {
  .percorso .percorso__riga.percorso__riga { gap: 0; }
  .percorso__riga > .stelle { margin-top: 16px; }
  .percorso__riga > .stelle + p { margin-top: 16px; }
}
@media (max-width: 899px) {
  .percorso .percorso__riga > h2 + .sottotitolo { margin-top: 16px; }
  .percorso .percorso__riga > .sottotitolo + ol { margin-top: 20px; }
  #servizi .titolo-sezione + .servizi__elenco { margin-top: 16px; }
}
@media (max-width: 899px) { body:not(.pagina-index) .hero h1 + .hero__sotto { margin-top: 16px; } }

/* Una parola lunghissima in una domanda o in una risposta va a capo invece di far scorrere la pagina di lato
   (audit del pannello del 21/10/2026, B-P11) */
.voce button, .voce__risposta p { overflow-wrap: anywhere; }

/* Un nome dell'attività lungo (si cambia dal pannello) va a capo nel piede invece di far scorrere la pagina di lato
   (audit del pannello del 21/10/2026, A-P17). Col nome di oggi resta su una riga */
@media (max-width: 760px) { .piede__marchio p.piede__nome { white-space: normal; overflow-wrap: anywhere; } }

/* I filtri del catalogo sul telefono: le pillole vanno a capo invece di scorrere sotto «Filtra», così «Lunghe» non resta
   tagliata; «Filtra» sotto di loro (collaudo del 21/10/2026, punto 6) */
@media (max-width: 899px) {
  #filtri-parrucche { grid-template-columns: minmax(0, 1fr); }
  #filtri-parrucche .filtri__pillole { flex-wrap: wrap; overflow-x: visible; margin-left: 0; padding-left: 0; }
  #apri-filtri { justify-self: start; }
}

/* Tornata 3 Step (22/10/2026) · Parrucche › Per uomo: accanto all'infoltimento le coppie «prima e dopo», con le schede del
   carosello «Prima e dopo» della pagina iniziale (foto intere 3:4, fondo rosa): due per riga, prima e poi dopo, l'uomo sopra
   e la donna sotto; uguale dal telefono. Con una foto sola resta la foto di prima, a tutta colonna */
.estetica__foto--infoltimento:has(> .coppie-foto) { min-height: 0; height: auto !important; overflow: visible; background: none; border-radius: 0; align-self: center; }
.estetica__foto--infoltimento:has(> .coppie-foto)::before { display: none; }
.coppie-foto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.coppie-foto li { position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: var(--rosa); }
.estetica__foto .coppie-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: transform .6s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .coppie-foto li:hover img { transform: scale(1.04); } }
/* dal tablet la colonna della foto va sotto i testi, larga: le due coppie in una riga sola (prima, dopo, prima, dopo) */
@media (min-width: 681px) and (max-width: 1100px) { .estetica__foto--infoltimento > .coppie-foto { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Tornata 3 Step (22/10/2026) · Parrucchiere › Taglio e colore anche per uomo: la riga dei tagli sotto il testo. Dal
   computer tre in fila (con più di tre scorre, con le frecce), dal telefono scorre col dito come le altre righe del sito */
.estetica__griglia > .carosello--uomo { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .riga-foto--uomo li { flex: 0 0 calc((100% - 32px) / 3); height: clamp(260px, 24vw, 360px); }
  .riga-foto--uomo img { width: 100%; height: 100%; object-fit: cover; }
}

/* Tornata 3 Step (22/10/2026) · il catalogo: «Prezzi IVA inclusa.» sotto i testi, solo quando una parrucca ha il prezzo */
.estetica__testo > p.catalogo__nota-prezzi { margin-top: 10px; font-size: 16px; letter-spacing: .01em; color: var(--testo); }

/* Correzioni dell'audit della tornata 3 Step (22/10/2026) */
/* P7 · «Prezzi IVA inclusa.» anche sotto le parrucche in vetrina della pagina iniziale, quando una di loro ha il prezzo */
#vetrina .vetrina__nota-prezzi { margin: 14px 0 0; font-size: 16px; letter-spacing: .01em; color: var(--testo); }
/* P8 · più di quattro foto prima e dopo: dal computer tutte in una riga sotto i testi (le coppie restano vicine), senza
   alzare la parte con grandi vuoti */
@media (min-width: 1101px) {
  .estetica__griglia:has(> .estetica__foto--infoltimento > .coppie-foto > li:nth-child(5)) { grid-template-columns: 1fr 1fr; align-items: start; }
  .estetica__griglia > .estetica__foto--infoltimento:has(> .coppie-foto > li:nth-child(5)) { grid-column: 1 / -1; margin-top: 28px; }
  .estetica__foto--infoltimento > .coppie-foto:has(> li:nth-child(5)) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
/* Il fondo pagina a 320 px non fa scorrere la pagina di lato (audit della tornata 3 Step, fuori dalle parti toccate): le colonne
   scendono sotto la loro larghezza minima e i testi vanno a capo */
@media (max-width: 360px) {
  .piede__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .piede__col, .piede__marchio, .piede__marchio > div { min-width: 0; }
  .piede__marchio p, .piede__col li, .piede__col a { white-space: normal; overflow-wrap: anywhere; }
  /* …e le parrucche in vetrina della pagina iniziale, due per riga, stanno nello schermo */
  #vetrina .servizi__griglia--tre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #vetrina .scheda__testo { min-width: 0; }
  #vetrina .scheda__testo .btn, #vetrina .scheda__dettagli { white-space: normal; overflow-wrap: anywhere; }
}
/* La foto della Laminazione delle ciglia (migliorata il 22/10/2026: due riquadri, uno sopra l'altro, 4:3) fra 900 e 1100 px
   stava in una fascia larga (944 × 328 a 1024 px) che tagliava gli occhi del riquadro di sotto: lì il riquadro prende la forma
   della foto, che si vede intera */
@media (min-width: 900px) and (max-width: 1100px) {
  .estetica__foto--ciglia { aspect-ratio: 4 / 3; height: auto !important; max-width: 640px; }
}

/* 9-bis (22/10/2026): la riga dei dati legali nel piede, dai dati di fatturazione (Legale/note-legali.txt) */
.piede__dati { margin: 0 0 6px; font-size: 13px; color: var(--testo-tenue); }