/* =============================================================================
   ANTONELLA CENTRO ESTETICO — stile
   -----------------------------------------------------------------------------
   Concept: «Un momento, solo per te». Un percorso continuo: accoglienza →
   conoscenza → scoperta dei trattamenti → fiducia → contatto.

   Atmosfera
   · un solo fondo avorio per tutta la pagina, con grandi pozze di luce cipria
     e sabbia, statiche e appena percettibili, che attraversano le sezioni
     (stanno sull'elemento radice, non ripartono a ogni blocco)
   · nessuna banda chiara/scura: le sezioni si distinguono per titoli,
     allineamenti e spazi; anche contatti e piede restano nella stessa luce
   · cacao per testo e pulsanti; il terracotta vive solo nel logo, intatto

   Mestiere (non cambia)
   · un peso per il display: Cormorant Garamond 500; il corsivo ha un solo
     significato, le parole delle clienti. Manrope 400/600 per testo e menu
   · due raggi soltanto: 1,25 rem per le foto, pillola per i comandi
   · nessuna ombra diffusa: le superfici si staccano per fondo o per filo

   Movimento (solo dove serve)
   · curva unica cubic-bezier(.23, 1, .32, 1); 0,5 s per comparse e aperture,
     0,2 s per i riscontri al passaggio
   · compaiono piano solo le immagini, con 12 px di spostamento verticale;
     gli elenchi si aprono con fluidità; il testo è subito lì
   · senza JavaScript o con il movimento ridotto tutto è visibile e usabile
   ============================================================================= */

/* ---- caratteri ------------------------------------------------------------- */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-500-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-400-600.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
/* ripieghi con le metriche dei caratteri veri (misurate dai file): mentre i font
   arrivano, le righe occupano già lo stesso spazio e la pagina non salta */
@font-face {
  font-family: "Cormorant ripiego";
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("Noto Serif");
  size-adjust: 97.58%;
  ascent-override: 94.69%;
  descent-override: 29.41%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope ripiego";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Roboto");
  size-adjust: 98.97%;
  ascent-override: 107.71%;
  descent-override: 30.31%;
  line-gap-override: 0%;
}

/* ---- gettoni --------------------------------------------------------------- */

:root {
  --avorio: #f6f2eb;
  --sabbia: #e6dacb;
  --cipria: #efd8d0;
  --cacao: #4a342a;          /* testo e pulsanti: 9,2–10,4:1 sui fondi */
  --cacao-scuro: #36251e;
  --cacao-2: #6b584d;        /* testo secondario: 5,3–6:1 */
  --segno: #7e695e;          /* icone e frecce: 4,1–4,6:1 */
  --filo: rgba(74, 52, 42, 0.14);
  --filo-forte: rgba(74, 52, 42, 0.36);
  --velo: #f6f2eb;           /* testata quando si scorre: piena, niente ombre di ciò che passa sotto */

  --serif: "Cormorant Garamond", "Cormorant ripiego", Georgia, "Times New Roman", serif;
  --sans: "Manrope", "Manrope ripiego", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --raggio: 1.25rem;
  --pillola: 999px;

  --curva: cubic-bezier(0.23, 1, 0.32, 1);
  --durata: 0.5s;
  --durata-breve: 0.2s;

  --max: 80rem;
  --margine: clamp(1.25rem, 4.5vw, 3rem);
  --colonna-gap: clamp(1rem, 2.2vw, 1.5rem);
  --spazio-sezione: clamp(4.5rem, 3rem + 5vw, 9rem);
  /* ogni sezione ne tiene poco più di metà sopra e sotto: fra due sezioni lo
     stacco resta uno solo, perché il fondo continuo non ha bisogno di doppie pause */
  --passo: calc(var(--spazio-sezione) * 0.58);
  --testata: 3.75rem;
  --sconfina: 0rem;          /* quanto la foto d'apertura scende nella sezione dopo */
}

@media (min-width: 64rem) {
  :root { --testata: 5rem; --sconfina: 12rem; }
}

/* scala progressiva per gli schermi grandi: tutto è in rem, quindi l'intera
   impaginazione cresce in proporzione (2K, 4K) */
@media (min-width: 105rem) { html { font-size: 106.25%; } }
@media (min-width: 120rem) { html { font-size: 112.5%; } }
@media (min-width: 160rem) { html { font-size: 137.5%; } }
@media (min-width: 200rem) { html { font-size: 162.5%; } }
@media (min-width: 240rem) { html { font-size: 187.5%; } }

/* ---- base e fondo continuo ------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: only light;
  scroll-padding-top: calc(var(--testata) + 0.75rem);
  /* la luce della pagina: pozze molto ampie, a sinistra e a destra, misurate
     sull'altezza dell'intero documento, quindi scavalcano i confini delle
     sezioni. Colori pieni al centro e trasparenza ai bordi: nessuna riga. */
  background-color: var(--avorio);
  background-image:
    radial-gradient(46% 7% at 4% 9%, rgba(239, 216, 208, 0.75), rgba(239, 216, 208, 0) 100%),
    radial-gradient(52% 10% at 96% 17%, rgba(230, 218, 203, 0.7), rgba(230, 218, 203, 0) 100%),
    radial-gradient(50% 10% at 4% 31%, rgba(239, 216, 208, 0.6), rgba(239, 216, 208, 0) 100%),
    radial-gradient(52% 11% at 97% 46%, rgba(230, 218, 203, 0.65), rgba(230, 218, 203, 0) 100%),
    radial-gradient(50% 10% at 5% 62%, rgba(239, 216, 208, 0.6), rgba(239, 216, 208, 0) 100%),
    radial-gradient(52% 10% at 95% 77%, rgba(230, 218, 203, 0.6), rgba(230, 218, 203, 0) 100%),
    radial-gradient(75% 11% at 35% 95%, rgba(239, 216, 208, 0.75), rgba(239, 216, 208, 0) 100%);
  background-repeat: no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  color: var(--cacao);
  font: 400 1.0625rem/1.65 var(--sans);
  font-kerning: normal;
  -webkit-tap-highlight-color: transparent;
}

img,
svg { display: block; max-width: 100%; }
img { height: auto; }

[hidden] { display: none !important; }

a { color: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 500; }

h1, h2, h3 {
  font-family: var(--serif);
  letter-spacing: -0.015em;
}

h2 {
  font-size: clamp(2.25rem, 1.55rem + 2.8vw, 3.5rem);
  line-height: 1.05;
  margin-bottom: 1.5rem;
}

p { margin: 0 0 1em; }

.riga { display: block; }

::selection { background: var(--cacao); color: var(--avorio); }

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

.contenitore {
  width: min(calc(100% - 2 * var(--margine)), var(--max));
  margin-inline: auto;
}

.sezione { padding-block: var(--passo); }

.etichetta {
  font: 600 0.8125rem/1.3 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cacao-2);
  margin: 0 0 1.1rem;
}

.testo { max-width: 34em; }

.salta {
  position: absolute;
  left: var(--margine);
  top: -10rem;
  z-index: 100;
  padding: 0.75rem 1.1rem;
  background: var(--cacao);
  color: var(--avorio);
  border-radius: var(--pillola);
  font: 600 0.9375rem/1.2 var(--sans);
  text-decoration: none;
}
.salta:focus { top: 0.75rem; }

/* ---- comandi --------------------------------------------------------------- */

.icona { width: 1rem; height: 1rem; flex: none; }
.icona--wa { width: 1.125rem; height: 1.125rem; }

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3.25rem;
  padding: 0.85rem 1.6rem;
  background: var(--cacao);
  color: var(--avorio);
  border: 1px solid var(--cacao);
  border-radius: var(--pillola);
  font: 600 0.9375rem/1.2 var(--sans);
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--durata-breve) var(--curva),
    border-color var(--durata-breve) var(--curva),
    color var(--durata-breve) var(--curva);
}
.bottone:hover { background: var(--cacao-scuro); border-color: var(--cacao-scuro); }

.bottone--piccolo {
  min-height: 2.75rem;
  padding: 0.55rem 1.1rem;
  font-size: 0.875rem;
}

.bottone--filo { background: transparent; border-color: var(--filo-forte); color: var(--cacao); }
.bottone--filo:hover { background: rgba(74, 52, 42, 0.05); border-color: var(--cacao); }

.link-freccia {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: inherit;
  font: 600 0.9375rem/1.2 var(--sans);
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.4em;
  text-decoration-color: var(--filo-forte);
  transition: text-decoration-color var(--durata-breve) var(--curva);
}
.link-freccia:hover { text-decoration-color: currentColor; }
.link-freccia .icona { transition: transform var(--durata-breve) var(--curva); }
.link-freccia:hover .icona { transform: translateX(3px); }
.link-freccia[href^="#"]:hover .icona { transform: translateY(3px); }

.link-semplice {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--filo-forte);
  transition: text-decoration-color var(--durata-breve) var(--curva);
}
.link-semplice:hover { text-decoration-color: currentColor; }

.azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2rem;
}

/* ---- testata --------------------------------------------------------------- */

.testata {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--velo);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--durata-breve) var(--curva),
    border-color var(--durata-breve) var(--curva);
}
/* sempre avorio pieno: anche se lo script arriva un attimo dopo lo scorrimento
   (telefoni lenti), il testo non le passa mai sotto in trasparenza. Il filo
   compare quando si scorre. */
.testata[data-scorsa] { border-bottom-color: var(--filo); }

.testata-riga {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--testata);
}

.marchio {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-right: auto;
  min-width: 0;
  text-decoration: none;
}
.marchio-logo { width: 2.75rem; height: 2.75rem; flex: none; }
.marchio-testo { display: flex; flex-direction: column; min-width: 0; }
.marchio-nome {
  font: 500 1.1875rem/1 var(--serif);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marchio-sotto {
  margin-top: 0.35rem;
  font: 600 0.6875rem/1.2 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cacao-2);
  white-space: nowrap;
}

.testata-cta { display: none; }

.menu-bottone {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  padding: 0 0.25rem 0 0.75rem;
  margin-right: -0.25rem;
  background: none;
  border: 0;
  color: var(--cacao);
  font: 600 0.9375rem/1 var(--sans);
  letter-spacing: 0.02em;
  cursor: pointer;
}
.menu-segno { position: relative; width: 1.25rem; height: 0.625rem; }
.menu-segno::before,
.menu-segno::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--durata-breve) var(--curva);
}
.menu-segno::before { top: 0; }
.menu-segno::after { bottom: 0; }
[aria-expanded="true"] .menu-segno::before { transform: translateY(4.25px) rotate(45deg); }
[aria-expanded="true"] .menu-segno::after { transform: translateY(-4.25px) rotate(-45deg); }

.menu-voci { list-style: none; margin: 0; padding: 0; }

/* pannello su telefono e tablet (con JavaScript) */
html.js .menu {
  position: fixed;
  inset: var(--testata) 0 0 0;
  z-index: 39;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  padding: clamp(1.25rem, 4svh, 2.5rem) var(--margine) calc(2rem + env(safe-area-inset-bottom));
  background: var(--avorio);
  border-top: 1px solid var(--filo);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.5rem);
  transition:
    opacity var(--durata-breve) var(--curva),
    transform var(--durata-breve) var(--curva),
    visibility 0s linear var(--durata-breve);
}
html.js .menu[data-aperto] {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}
html.js .menu-voci a {
  display: block;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--filo);
  font: 500 clamp(2rem, 1.5rem + 3vw, 2.75rem)/1.1 var(--serif);
  letter-spacing: -0.01em;
  text-decoration: none;
}
html.js .menu-voci a[aria-current="true"] { color: var(--cacao-2); }
.menu-piede { display: grid; gap: 1.25rem; }
.menu-contatti { margin: 0; color: var(--cacao-2); font-size: 0.9375rem; line-height: 1.6; }
.menu-contatti a { display: inline-block; padding: 0.25rem 0; }

/* senza JavaScript: le voci restano in vista sotto al marchio */
html:not(.js) .menu-bottone { display: none; }
html:not(.js) .testata-riga { flex-wrap: wrap; padding-block: 0.5rem; }
html:not(.js) .menu { flex-basis: 100%; order: 3; }
html:not(.js) .menu-voci { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
html:not(.js) .menu-voci a { display: inline-block; padding: 0.5rem 0; font: 600 0.9375rem/1.2 var(--sans); }
html:not(.js) .menu-piede { display: none; }

/* ---- apertura: accoglienza ------------------------------------------------- */

.hero { position: relative; padding-top: clamp(1.5rem, 6vw, 2.75rem); }
.hero-testo { padding-inline: var(--margine); }

.hero-titolo {
  /* due righe volute: il corpo si calcola perché «Una cura che si sente.»
     (8 em misurati) stia sempre intera nella colonna */
  font-size: calc((100vw - 2 * var(--margine)) / 8.6);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
}

.hero-sottotitolo {
  max-width: 30em;
  margin: 0;
  color: var(--cacao-2);
  font-size: 1.125rem;
  line-height: 1.6;
}

.hero-foto {
  position: relative;
  margin: 2.5rem var(--margine) 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--raggio);
  background: var(--cipria);
}
/* la foto riempie il riquadro senza imporgli la propria altezza */
.hero-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* recapito: dove siamo e come chiamarci, già nella prima schermata */
.hero-recapito {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1.25rem;
  margin: 1rem var(--margine) 0;
  color: var(--cacao-2);
  font: 600 0.8125rem/1.5 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero-recapito .link-semplice { display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: -0.75rem; }

/* ---- il centro: conoscenza ------------------------------------------------- */

.centro-griglia { display: grid; gap: 3rem; }

.dati { margin: 2.25rem 0 0; border-top: 1px solid var(--filo); }
.dati div {
  display: grid;
  grid-template-columns: minmax(6.5rem, 1fr) 2fr;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--filo);
}
.dati dt {
  padding-top: 0.2rem;
  color: var(--cacao-2);
  font: 600 0.8125rem/1.5 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dati dd { margin: 0; }
.dati .link-semplice { display: inline-block; padding-block: 0.2rem; }

.centro-foto { margin: 0 0 2rem; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--raggio); }
.centro-foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---- citazioni: la voce delle clienti (il corsivo è solo loro) ------------- */

.citazione { margin: 0; }
.citazione blockquote { margin: 0; }
.citazione p {
  margin: 0 0 1rem;
  font: italic 500 1.5rem/1.3 var(--serif);
  letter-spacing: -0.005em;
}
.citazione--grande p,
.citazione--centro p {
  font-size: clamp(1.9rem, 1.35rem + 2.3vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.citazione figcaption { font: 600 0.9375rem/1.3 var(--sans); }
.citazione figcaption span {
  display: block;
  margin-top: 0.2rem;
  color: var(--cacao-2);
  font-size: 0.875rem;
  font-weight: 400;
}
.citazione--centro { padding-left: 1.25rem; border-left: 1px solid var(--filo-forte); }

/* ---- trattamenti: scoperta ------------------------------------------------- */

.trattamenti-testa {
  display: grid;
  gap: 0.5rem;
  margin-bottom: clamp(1.5rem, 4vw, 3.5rem);
}
.trattamenti-intro .testo { color: var(--cacao-2); }

.indice {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.indice a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  font: 600 0.9375rem/1.2 var(--sans);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.4em;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--durata-breve) var(--curva);
}
.indice a:hover { text-decoration-color: currentColor; }
.indice-num { color: var(--segno); font-variant-numeric: tabular-nums; }

.categoria {
  display: grid;
  gap: 1.5rem;
  padding-block: clamp(2.25rem, 6vw, 4.5rem);
  scroll-margin-top: calc(var(--testata) + 0.5rem);
}

.categoria-foto {
  margin: 0;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: var(--raggio);
  background: var(--cipria);
}
.categoria-foto img { width: 100%; height: 100%; object-fit: cover; }
/* la riga «b» ha il dettaglio più intimo: foto più piccola, spostata a destra */
.categoria--b .categoria-foto { width: 62%; margin-left: auto; aspect-ratio: 4 / 5; }

.categoria-num {
  margin: 0 0 0.6rem;
  color: var(--cacao-2);
  font: 600 0.8125rem/1.3 var(--sans);
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
}
.categoria-titolo {
  font-size: clamp(2.1rem, 1.6rem + 2vw, 3rem);
  line-height: 1.04;
  margin: 0 0 0.75rem;
}
.categoria-desc { max-width: 30em; margin: 0 0 1.4rem; color: var(--cacao-2); }

/* elenco completo: un <details> nativo, che si apre anche senza JavaScript */
.elenco-comando {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.55rem 1rem 0.55rem 1.25rem;
  border: 1px solid var(--filo-forte);
  border-radius: var(--pillola);
  font: 600 0.9375rem/1.2 var(--sans);
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition:
    border-color var(--durata-breve) var(--curva),
    background-color var(--durata-breve) var(--curva);
}
.elenco-comando::-webkit-details-marker { display: none; }
.elenco-comando::marker { content: ""; }
.elenco-comando:hover { border-color: var(--cacao); background: rgba(74, 52, 42, 0.04); }
.elenco[open] .se-chiuso,
.elenco:not([open]) .se-aperto { display: none; }
.elenco-comando .segno { position: relative; width: 0.8rem; height: 0.8rem; flex: none; }
.elenco-comando .segno::before,
.elenco-comando .segno::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  margin-top: -0.75px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--durata) var(--curva);
}
.elenco-comando .segno::after { transform: rotate(90deg); }
.elenco[open] .elenco-comando .segno::after { transform: rotate(0deg); }

.elenco-corpo { padding-top: 1.5rem; }
.gruppo + .gruppo { margin-top: 1.75rem; }
.gruppo-titolo {
  margin: 0;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--filo);
  color: var(--cacao-2);
  font: 600 0.8125rem/1.3 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.voci { list-style: none; margin: 0; padding: 0; }
.voci a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.875rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--filo);
  line-height: 1.35;
  text-decoration: none;
  transition: color var(--durata-breve) var(--curva);
}
.voci a:hover { color: var(--cacao-2); }
.icona--voce {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--segno);
  transition:
    transform var(--durata-breve) var(--curva),
    color var(--durata-breve) var(--curva);
}
.voci a:hover .icona--voce { color: var(--cacao); transform: translate(2px, -2px); }
.elenco-richiesta { margin-top: 1rem; }

/* per chi non sa da dove iniziare */
.orientamento {
  display: grid;
  gap: 1rem;
  margin-top: clamp(1.5rem, 4vw, 3rem);
  padding-top: clamp(2rem, 5vw, 3.5rem);
  border-top: 1px solid var(--filo);
}
.orientamento-titolo {
  font-size: clamp(2.1rem, 1.6rem + 2.2vw, 3.25rem);
  line-height: 1.05;
}
.orientamento-testo { max-width: 26em; margin: 0 0 1.25rem; color: var(--cacao-2); font-size: 1.125rem; }

.nota-wa {
  max-width: 40em;
  margin: 1.75rem 0 0;
  color: var(--cacao-2);
  font-size: 0.9375rem;
}

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

.prodotti { padding-block: var(--passo); }
.prodotti-foto {
  margin: 0 var(--margine);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--raggio);
  background: var(--sabbia);
}
.prodotti-foto img { width: 100%; height: 100%; object-fit: cover; }
.prodotti-testo { padding: clamp(2.25rem, 7vw, 3.5rem) var(--margine) 0; }

.regalo {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--filo);
}
.regalo .etichetta { margin-bottom: 0.75rem; }
.regalo-testo {
  max-width: 22em;
  margin: 0 0 0.5rem;
  font: 500 clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem)/1.25 var(--serif);
  letter-spacing: -0.01em;
}

/* ---- recensioni: fiducia --------------------------------------------------- */

.recensioni-griglia { display: grid; gap: 3rem; }
.valutazione h2 { margin-bottom: 1rem; font-family: var(--sans); }
.valutazione-media { display: flex; align-items: baseline; gap: 0.75rem; margin: 0 0 0.75rem; }
.valutazione-cifra {
  font: 500 clamp(5rem, 3.6rem + 6vw, 8rem)/0.85 var(--serif);
  letter-spacing: -0.03em;
}
.valutazione-su { color: var(--cacao-2); font: 500 1.5rem/1 var(--serif); }
.valutazione-nota { max-width: 20em; margin: 0 0 0.75rem; color: var(--cacao-2); font-size: 0.9375rem; }

.citazioni-altre {
  display: grid;
  gap: 2rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--filo);
}

/* ---- atmosfera (solo con foto vere) ---------------------------------------- */

.atmosfera { padding-block: var(--passo); }
.atmosfera-griglia {
  display: grid;
  gap: var(--colonna-gap);
  width: min(calc(100% - 2 * var(--margine)), var(--max));
  margin-inline: auto;
}
.atmosfera-foto { margin: 0; overflow: hidden; border-radius: var(--raggio); }
.atmosfera-foto img { width: 100%; height: 100%; object-fit: cover; }
.atmosfera-foto--1 { aspect-ratio: 4 / 5; }
.atmosfera-foto--2 { aspect-ratio: 3 / 2; }
.atmosfera-foto--3 { aspect-ratio: 1; }

/* ---- contatti: la conclusione, nella stessa luce --------------------------- */

.contatti-griglia { display: grid; gap: 3rem; }
.contatti .testo { color: var(--cacao-2); font-size: 1.125rem; }
.contatti .azioni { gap: 0.875rem; }

.contatti-dati { margin: 2.5rem 0 0; border-top: 1px solid var(--filo); }
.dato {
  display: grid;
  grid-template-columns: minmax(6.5rem, 1fr) 2fr;
  gap: 1rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--filo);
}
.dato dt {
  padding-top: 0.2rem;
  color: var(--cacao-2);
  font: 600 0.8125rem/1.5 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dato dd { margin: 0; }
.dato address { font: normal 500 1.4rem/1.2 var(--serif); letter-spacing: -0.005em; }
.dato .link-semplice { display: inline-block; padding: 0.15rem 0; }
.orari { margin: 0; }
.orari div { display: flex; justify-content: space-between; gap: 1rem; }
.orari dt { font: inherit; letter-spacing: 0; text-transform: none; color: var(--cacao-2); padding: 0; }
.orari dd { margin: 0; font-variant-numeric: tabular-nums; }

.contatti-foto {
  width: 72%;
  margin: 0 0 0 auto;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--raggio);
  background: var(--sabbia);
}
.contatti-foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---- piede: la stessa atmosfera, fino in fondo ----------------------------- */

.pie { padding-bottom: calc(1.75rem + env(safe-area-inset-bottom)); }
.pie-griglia {
  display: grid;
  gap: 2rem;
  padding-top: clamp(2.25rem, 5vw, 3.25rem);
  border-top: 1px solid var(--filo);
}
.pie-marchio { display: flex; align-items: center; gap: 1.25rem; }
.pie-logo { width: 5.5rem; height: 5.5rem; flex: none; }
.pie-indirizzo { margin: 0; color: var(--cacao-2); font-size: 0.9375rem; line-height: 1.6; }
.pie-indirizzo .link-semplice { display: inline-block; padding: 0.15rem 0; }
.pie-social ul { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0; padding: 0; list-style: none; }
.pie-social a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.pie-fondo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--filo);
  color: var(--cacao-2);
  font-size: 0.875rem;
}
.pie-fondo p { margin: 0; }
.pie-su { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; }

/* ---- pulsante fisso su telefono: discreto --------------------------------- */

.barra { display: none; }

/* ---- 404 ------------------------------------------------------------------- */

.vuota {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: 3rem;
}
.vuota-logo { width: 5rem; height: 5rem; margin-bottom: 2.5rem; }
.vuota h1 { font-size: clamp(2.75rem, 2rem + 4vw, 4.5rem); line-height: 1; margin: 0 0 1.5rem; }
.vuota .testo { color: var(--cacao-2); margin-bottom: 2rem; }

/* Cormorant usa di serie le cifre «all'antica» (0 come una o, 1 come una I):
   dove il serif porta dei numeri servono quelle allineate. Sta qui in fondo
   perché la scorciatoia «font:» delle regole sopra azzererebbe l'impostazione */
h1, h2, h3,
.dato address,
.regalo-testo,
.citazione p,
.marchio-nome,
.valutazione-su,
.valutazione-cifra { font-variant-numeric: lining-nums; }

/* =============================================================================
   TELEFONO (sotto i 40 rem)
   ============================================================================= */

@media (max-width: 39.99rem) {
  html.js .barra {
    display: block;
    position: fixed;
    right: var(--margine);
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 30;
    opacity: 0;
    transform: translateY(12px);
    visibility: hidden;
    transition:
      opacity var(--durata) var(--curva),
      transform var(--durata) var(--curva),
      visibility 0s linear var(--durata);
  }
  html.js .barra[data-visibile] {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition-delay: 0s;
  }
  .barra-bottone {
    min-height: 3rem;
    padding: 0.7rem 1.2rem;
    /* un filo avorio lo stacca da quello che passa sotto: niente ombre */
    box-shadow: 0 0 0 1px var(--avorio);
  }
}

/* il pulsante principale ha un testo lungo: dove la colonna è stretta
   (telefono, tablet) prende tutta la larghezza e resta su una riga fino ai
   360 px di schermo (sotto, va a capo centrato) */
@media (max-width: 29.99rem), (min-width: 48rem) and (max-width: 63.99rem) {
  .hero .azioni .bottone {
    width: 100%;
    gap: 0.5rem;
    padding-inline: 0.75rem;
    font-size: 0.875rem;
    letter-spacing: 0;
  }
}

@media (max-width: 25.99rem) {
  .marchio-citta { display: none; }
}

@media (max-width: 22rem) {
  .marchio { gap: 0.6rem; }
  .marchio-logo { width: 2.5rem; height: 2.5rem; }
  .marchio-nome { font-size: 1rem; }
  .marchio-sotto { font-size: 0.625rem; }
}

/* =============================================================================
   DA 40 REM: la richiesta sale nella testata
   ============================================================================= */

@media (min-width: 40rem) {
  .testata-cta { display: inline-flex; }
  .menu-cta { display: none; }
}

/* =============================================================================
   TABLET (da 48 rem)
   ============================================================================= */

@media (min-width: 48rem) {
  .marchio-logo { width: 3rem; height: 3rem; }

  .hero {
    display: grid;
    grid-template-columns:
      [pieno-inizio] var(--margine)
      [testo-inizio] minmax(0, 1fr)
      [testo-fine] 2rem
      [foto-inizio] minmax(0, 1fr)
      [pieno-fine];
    align-items: center;
    padding-top: 0;
  }
  .hero-testo { grid-column: testo-inizio / testo-fine; grid-row: 1; padding: 2.5rem 0 6rem; }
  .hero-titolo { font-size: 4.9vw; }
  .hero-foto {
    grid-column: foto-inizio / pieno-fine;
    grid-row: 1;
    margin: 1rem 0;
    border-radius: var(--raggio) 0 0 var(--raggio);
  }
  .hero-recapito {
    grid-column: testo-inizio / testo-fine;
    grid-row: 1;
    align-self: end;
    margin: 0;
    padding: 1.1rem 0 1.75rem;
    border-top: 1px solid var(--filo);
    font-size: 0.75rem;
  }

  .centro-griglia { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; align-items: end; }

  .categoria {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: 1.5rem;
    row-gap: 0;
    align-items: start;
  }
  .categoria--a .categoria-foto { grid-column: 1 / span 4; grid-row: 1; aspect-ratio: 4 / 5; width: auto; margin: 0; }
  .categoria--a .categoria-testo { grid-column: 5 / span 4; grid-row: 1; padding-top: 1.5rem; }
  .categoria--b .categoria-testo { grid-column: 1 / span 5; grid-row: 1; }
  .categoria--b .categoria-foto { grid-column: 6 / span 3; grid-row: 1; width: auto; margin: 0; }

  .orientamento { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: 2rem; }
  .orientamento-testo { margin-bottom: 1rem; }

  .prodotti-testo { width: min(calc(100% - 2 * var(--margine)), 40rem); padding-inline: 0; margin-inline: auto; }

  .citazioni-altre { grid-template-columns: 1fr 1fr; gap: 2.5rem; }

  .contatti-griglia { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: center; }
  .contatti-foto { width: 100%; margin: 0; }
  .contatti-dati { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; border-top: 0; }
  .dato { grid-template-columns: 1fr; gap: 0.25rem; border-top: 1px solid var(--filo); border-bottom: 0; }
  .dato:nth-last-child(-n + 2) { border-bottom: 1px solid var(--filo); }

  .pie-logo { width: 6.5rem; height: 6.5rem; }
}

/* =============================================================================
   DESKTOP (da 64 rem): griglia a 12 colonne, massimo 80 rem
   ============================================================================= */

@media (min-width: 64rem) {
  .marchio-logo { width: 3.25rem; height: 3.25rem; }
  .marchio-nome { font-size: 1.3125rem; }
  .marchio-sotto { font-size: 0.75rem; }

  /* apertura 45/55: il testo nella colonna, la foto esce fino al bordo e
     scende nella sezione successiva, accanto al titolo del centro */
  .hero {
    --fuori: max(var(--margine), calc((100% - var(--max)) / 2));
    grid-template-columns:
      [pieno-inizio] var(--fuori)
      [testo-inizio] minmax(0, 45fr)
      [testo-fine] clamp(2.5rem, 5vw, 5rem)
      [foto-inizio] minmax(0, 55fr)
      [contenuto-fine] var(--fuori)
      [pieno-fine];
    align-items: stretch;
    min-height: min(calc(100vh - var(--testata)), 58rem);
    min-height: min(calc(100svh - var(--testata)), 58rem);
  }
  .hero-testo { align-self: center; padding: 3rem 0 7rem; }
  .hero-titolo { font-size: clamp(2.75rem, 4.4vw, 4.1rem); margin-bottom: 1.5rem; }
  .hero-sottotitolo { font-size: 1.1875rem; }
  .azioni { margin-top: 2.25rem; }
  .hero-foto {
    align-self: start;
    height: calc(100% + var(--sconfina));
    margin: 0;
    aspect-ratio: auto;
  }

  .centro-griglia {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--colonna-gap);
    row-gap: 0;
    align-items: start;
  }
  .centro-testo { grid-column: 1 / span 6; }
  /* la colonna di destra parte sotto la foto d'apertura che scende fin qui */
  .centro-segno { grid-column: 8 / span 5; margin-top: calc(var(--sconfina) - var(--passo) + 3.5rem); }

  .trattamenti-testa {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--colonna-gap);
    align-items: end;
  }
  .trattamenti-testa > :first-child { grid-column: 1 / span 6; }
  .trattamenti-intro { grid-column: 7 / span 6; }
  .trattamenti-testa h2 { margin-bottom: 0; }

  .categoria {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--colonna-gap);
  }
  .categoria--a .categoria-foto { grid-column: 1 / span 5; }
  /* il testo si appoggia a circa un terzo della foto grande: resta fermo
     quando l'elenco si apre verso il basso */
  .categoria--a .categoria-testo { grid-column: 7 / span 6; padding-top: clamp(1rem, 8.5vw, 9rem); }
  .categoria--b .categoria-testo { grid-column: 1 / span 7; padding-top: 1rem; }
  .categoria--b .categoria-foto { grid-column: 9 / span 3; }

  .elenco-voci { columns: 2; column-gap: var(--colonna-gap); }
  .elenco-voci .gruppo { break-inside: avoid; }
  .elenco-voci[data-gruppi="1"] .gruppo { break-inside: auto; }
  .gruppo-titolo { break-after: avoid; }
  .voci li { break-inside: avoid; }

  .orientamento { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--colonna-gap); }
  .orientamento-titolo { grid-column: 1 / span 6; }
  .orientamento-azione { grid-column: 8 / span 5; }

  .prodotti-griglia {
    --fuori: max(var(--margine), calc((100% - var(--max)) / 2));
    display: grid;
    grid-template-columns:
      [pieno-inizio] var(--fuori)
      [foto-inizio] minmax(0, 55fr)
      [foto-fine] clamp(2.5rem, 5vw, 5rem)
      [testo-inizio] minmax(0, 45fr)
      [testo-fine] var(--fuori)
      [pieno-fine];
    align-items: center;
  }
  .prodotti-foto { grid-column: pieno-inizio / foto-fine; grid-row: 1; margin: 0; border-radius: 0 var(--raggio) var(--raggio) 0; }
  .prodotti-testo { grid-column: testo-inizio / testo-fine; grid-row: 1; width: auto; margin: 0; padding: 0; }

  .recensioni-griglia {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--colonna-gap);
    align-items: start;
  }
  .valutazione { grid-column: 1 / span 4; }
  .citazioni { grid-column: 6 / span 7; }

  .atmosfera-griglia { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .atmosfera-foto--1 { grid-column: 1 / span 5; }
  .atmosfera-foto--2 { grid-column: 6 / span 7; }
  .atmosfera-foto--3 { grid-column: 8 / span 5; margin-top: var(--colonna-gap); }

  .contatti-griglia {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--colonna-gap);
  }
  .contatti-testo { grid-column: 1 / span 7; }
  .contatti-foto { grid-column: 9 / span 4; }

  .pie-griglia {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--colonna-gap);
    align-items: center;
  }
  .pie-marchio { grid-column: 1 / span 7; }
  .pie-social { grid-column: 8 / span 5; justify-self: end; }
  .pie-fondo { grid-column: 1 / -1; }
}

/* le foto della carta restano in vista mentre si legge un elenco aperto */
@media (min-width: 64rem) and (min-height: 44rem) {
  .categoria-foto { position: sticky; top: calc(var(--testata) + 2rem); }
}

/* =============================================================================
   NAVIGAZIONE IN LINEA (da 72 rem)
   ============================================================================= */

@media (min-width: 72rem) {
  .menu-bottone { display: none; }
  html.js .menu,
  .menu {
    position: static;
    inset: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    margin-right: clamp(1.25rem, 2.5vw, 2.5rem);
    background: none;
    border: 0;
    overflow: visible;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }
  html.js .menu-voci,
  .menu-voci { display: flex; gap: clamp(1.25rem, 2.2vw, 2.25rem); }
  html.js .menu-voci a,
  .menu-voci a {
    position: relative;
    display: inline-block;
    padding: 0.5rem 0;
    border: 0;
    font: 600 0.9375rem/1.2 var(--sans);
    letter-spacing: 0.02em;
    text-decoration: none;
  }
  .menu-voci a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.2rem;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--durata-breve) var(--curva);
  }
  .menu-voci a:hover::after,
  .menu-voci a[aria-current="true"]::after { transform: scaleX(1); }
  html.js .menu-voci a[aria-current="true"] { color: inherit; }
  .menu-piede { display: none; }
  html:not(.js) .testata-riga { flex-wrap: nowrap; padding-block: 0; }
  html:not(.js) .menu { flex-basis: auto; order: 0; }
}

/* =============================================================================
   TELEFONO RUOTATO (poca altezza): tutto deve stare, niente foto a striscia
   ============================================================================= */

@media (max-height: 35rem) and (orientation: landscape) {
  :root { --testata: 3.5rem; --sconfina: 0rem; }
  .marchio-logo { width: 2.5rem; height: 2.5rem; }

  .hero {
    display: grid;
    grid-template-columns:
      [pieno-inizio] var(--margine)
      [testo-inizio] minmax(0, 1.3fr)
      [testo-fine] 1.5rem
      [foto-inizio] minmax(0, 0.7fr)
      [pieno-fine];
    align-items: stretch;
    min-height: calc(100vh - var(--testata));
    min-height: calc(100svh - var(--testata));
    padding-top: 0;
  }
  .hero-testo { grid-column: testo-inizio / testo-fine; grid-row: 1; align-self: center; padding: 1rem 0 1.25rem; }
  .hero .etichetta { margin-bottom: 0.6rem; }
  .hero-titolo { font-size: min(4.2vw, 9.5svh); margin-bottom: 0.75rem; }
  .hero-sottotitolo { font-size: 1rem; line-height: 1.5; }
  .azioni { margin-top: 1.1rem; }
  .hero .azioni { gap: 0.5rem 1rem; }
  .hero .azioni .bottone { min-height: 2.75rem; padding: 0.55rem 1.1rem; font-size: 0.875rem; }
  .hero-foto {
    grid-column: foto-inizio / pieno-fine;
    grid-row: 1;
    margin: 0.75rem 0;
    aspect-ratio: auto;
    height: auto;
    border-radius: var(--raggio) 0 0 var(--raggio);
  }
  .hero-recapito { display: none; }

  html.js .menu { padding-top: 1rem; }
  html.js .menu-voci a { font-size: 1.75rem; padding: 0.45rem 0; }
}

/* telefoni stretti ruotati (sotto i 48 rem di larghezza): le foto non possono
   andare a tutta larghezza, sarebbero più alte dello schermo. Si affiancano. */
@media (max-height: 35rem) and (orientation: landscape) and (max-width: 47.99rem) {
  .categoria {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: 1.5rem;
    row-gap: 0;
    align-items: start;
  }
  .categoria--a .categoria-foto { grid-column: 1 / span 3; grid-row: 1; aspect-ratio: 4 / 5; width: auto; margin: 0; }
  .categoria--a .categoria-testo { grid-column: 4 / span 5; grid-row: 1; }
  .categoria--b .categoria-testo { grid-column: 1 / span 5; grid-row: 1; }
  .categoria--b .categoria-foto { grid-column: 6 / span 3; grid-row: 1; width: auto; margin: 0; }

  .contatti-foto { width: 38%; }
}

/* telefoni ruotati fino al tablet: la foto del negozio accanto al testo,
   mai a tutta larghezza (sarebbe più alta dello schermo) */
@media (max-height: 35rem) and (orientation: landscape) and (max-width: 63.99rem) {
  .prodotti-griglia {
    display: grid;
    grid-template-columns: [foto-inizio] minmax(0, 1fr) [foto-fine] 1.5rem [testo-inizio] minmax(0, 1fr) [testo-fine];
    width: min(calc(100% - 2 * var(--margine)), var(--max));
    margin-inline: auto;
    align-items: start;
  }
  .prodotti-foto { grid-column: foto-inizio / foto-fine; margin: 0; position: sticky; top: calc(var(--testata) + 1rem); }
  .prodotti-testo { grid-column: testo-inizio / testo-fine; width: auto; margin: 0; padding: 0; }
}

/* =============================================================================
   MOVIMENTO: solo comparse leggere delle immagini e aperture fluide
   ============================================================================= */

@media (prefers-reduced-motion: no-preference) {
  [data-rivela="attesa"] { opacity: 0; transform: translateY(12px); }
  [data-rivela="visto"] {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--durata) var(--curva) var(--ritardo, 0s),
      transform var(--durata) var(--curva) var(--ritardo, 0s);
  }
  /* la foto d'apertura compare piano: non nasconde il testo, che è già lì */
  .hero-foto { animation: comparsa var(--durata) var(--curva) both; }
}

@keyframes comparsa {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  html { background: #fff; }
  .testata, .barra, .salta { display: none !important; }
  [data-rivela] { opacity: 1 !important; transform: none !important; }
}