/* =========================================================================
   Ritual Estetica e Benessere — Lanciano (CH)

   Tesi: la luce di una cabina a fine mattinata — calda, bassa, ferma, con
   una striscia di sole che si sposta piano sulla parete. Fondo di intonaco
   caldo color gesso, testo marrone scuro, un solo rosso argilla terroso
   (non fucsia) per l'azione. Dietro l'apertura una luce calda che deriva
   lentamente da un lato all'altro.

   Vincoli completi in .design/style-lock.md — chi tocca questo file dopo
   si attiene a quello o riscrive prima il documento spiegando perché.

   Palette (contrasti misurati con agenti/contrasto.py):
     --gesso-50        #f6f1ea   fondo pagina
     --gesso-100       #efe7db   pannelli, header
     --gesso-200       #e4d8c7   bordi sottili, hover pannelli
     --gesso-300       #d3c3ab   bordi visibili, separatori
     --inchiostro-900  #2b2521   testo primario   — 13.45:1 su --gesso-50
     --inchiostro-600  #5c5148   testo secondario —  6.86:1 su --gesso-50
     --argilla         #9a3f38   unico accento     —  5.95:1 su --gesso-50
     --argilla-testo   #f6f1ea   testo sopra bottone pieno --argilla (5.95:1)

   Tipografia: Constantia/Palatino (display) + Corbel/Segoe UI (testo).
   Corpo 16px/1.6. Nessun font remoto: solo pile di sistema.
   ========================================================================= */

:root {
  --gesso-50: #f6f1ea;
  --gesso-100: #efe7db;
  --gesso-200: #e4d8c7;
  --gesso-300: #d3c3ab;

  --inchiostro-900: #2b2521;
  --inchiostro-600: #5c5148;

  --argilla: #9a3f38;
  --argilla-testo: #f6f1ea;

  --spazio-1: 8px;
  --spazio-2: 16px;
  --spazio-3: 24px;
  --spazio-4: 32px;
  --spazio-6: 48px;
  --spazio-8: 64px;
  --spazio-12: 96px;

  --raggio-controllo: 10px;
  --raggio-pannello: 18px;

  --t-xs: 0.8125rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-md: 1.125rem;
  --t-lg: 1.5rem;
  --t-xl: 2rem;
  --t-2xl: clamp(2rem, 5vw, 2.75rem);
  --t-3xl: clamp(2.5rem, 7vw, 4rem);

  --font-display: Constantia, "Palatino Linotype", Georgia, Cambria, ui-serif, serif;
  --font-testo: Corbel, "Segoe UI", Candara, system-ui, sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  color-scheme: light;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--gesso-50);
  color: var(--inchiostro-900);
  font-family: var(--font-testo);
  font-size: var(--t-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

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

.salta {
  position: fixed;
  inset-inline-start: var(--spazio-2);
  inset-block-start: var(--spazio-2);
  z-index: 100;
  padding: var(--spazio-1) var(--spazio-2);
  background: var(--argilla);
  color: var(--argilla-testo);
  font: 600 var(--t-sm)/1 var(--font-testo);
  border-radius: var(--raggio-controllo);
  text-decoration: none;
  transform: translateY(-200%);
  /* durata dichiarata: 160ms — è sotto soglia, nessuna eccezione richiesta */
  transition: transform 160ms var(--ease-out);
}
.salta:focus-visible { transform: translateY(0); }

.contenitore {
  width: min(100% - var(--spazio-4), 1080px);
  margin-inline: auto;
}
.contenitore--stretto { width: min(100% - var(--spazio-4), 720px); }

/* --------------------------------------------------- luce ambientale cabina */
.luce-cabina {
  position: fixed;
  inset: -20% -30%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(closest-side circle at 30% 40%,
    rgba(154, 63, 56, 0.16), rgba(154, 63, 56, 0.06) 55%, transparent 75%);
  filter: blur(20px);
  transform: translateX(-8%);
}
@media (prefers-reduced-motion: no-preference) {
  .luce-cabina {
    animation: deriva-luce 34s var(--ease-in-out) infinite alternate;
  }
  /* durata dichiarata: 34s — luce ambientale continua, non un feedback UI */
  @keyframes deriva-luce {
    from { transform: translateX(-8%); opacity: 0.85; }
    to   { transform: translateX(10%); opacity: 1; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .luce-cabina { display: none; }
}

/* --------------------------------------------------------------- testata */
.testata {
  position: relative;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2) var(--spazio-4);
  align-items: baseline;
  justify-content: space-between;
  width: min(100% - var(--spazio-4), 1080px);
  margin-inline: auto;
  padding-block: var(--spazio-3);
}
.testata__nome {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-md);
  letter-spacing: -0.01em;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.testata__luogo {
  font: 400 var(--t-xs)/1.2 var(--font-testo);
  color: var(--inchiostro-600);
  letter-spacing: 0.02em;
}
.testata__tel {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--spazio-1);
  min-block-size: 44px;
  padding: 0 var(--spazio-3);
  border: 1px solid var(--gesso-300);
  border-radius: var(--raggio-controllo);
  color: var(--inchiostro-900);
  text-decoration: none;
  font: 600 var(--t-sm)/1 var(--font-testo);
  font-variant-numeric: tabular-nums;
  /* durata dichiarata: 160ms — feedback di pressione, sotto soglia */
  transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .testata__tel:hover { border-color: var(--argilla); background: var(--gesso-100); }
}
.testata__tel:active { transform: scale(0.96); }

/* ---------------------------------------------------------- comuni testo */
.etichetta {
  font: 600 var(--t-xs)/1 var(--font-testo);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--argilla);
  margin-block-end: var(--spazio-3);
}
.titolo-sezione {
  font-size: var(--t-2xl);
  max-inline-size: 22ch;
  margin-block-end: var(--spazio-3);
}
.sottotitolo-sezione {
  color: var(--inchiostro-600);
  max-inline-size: 62ch;
  margin-block-end: var(--spazio-6);
  font-size: var(--t-base);
}

main { position: relative; z-index: 1; }
section { padding-block: var(--spazio-12); }

/* -------------------------------------------------------------- bottoni */
.bottone {
  display: inline-flex;
  align-items: center;
  gap: var(--spazio-1);
  min-block-size: 44px;
  padding: 0 var(--spazio-3);
  border: 1px solid var(--gesso-300);
  border-radius: var(--raggio-controllo);
  background: transparent;
  color: var(--inchiostro-900);
  font: 600 var(--t-sm)/1 var(--font-testo);
  text-decoration: none;
  /* durata dichiarata: 160ms — feedback di pressione, sotto soglia */
  transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out),
              transform 120ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .bottone:hover { border-color: var(--inchiostro-600); background: var(--gesso-100); }
}
.bottone:active { transform: scale(0.96); }

.bottone--pieno {
  background: var(--argilla);
  border-color: var(--argilla);
  color: var(--argilla-testo); /* 5.95:1 */
}
@media (hover: hover) and (pointer: fine) {
  .bottone--pieno:hover {
    background: color-mix(in oklab, var(--argilla) 88%, black);
    border-color: color-mix(in oklab, var(--argilla) 88%, black);
  }
}

/* ================================================================ APERTURA */
.apertura {
  position: relative;
  min-block-size: 88svh;
  display: grid;
  align-content: center;
  padding-block: var(--spazio-8);
}
.apertura__titolo {
  font-size: var(--t-3xl);
  margin-block-end: var(--spazio-3);
}
.apertura__sotto {
  max-inline-size: 58ch;
  color: var(--inchiostro-600);
  font-size: var(--t-md);
  margin-block-end: var(--spazio-6);
}
.apertura__azioni { display: flex; flex-wrap: wrap; gap: var(--spazio-2); }

/* ============================================================ COSA SAPPIAMO */
.info-griglia {
  display: grid;
  gap: var(--spazio-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  margin-block-end: var(--spazio-6);
}
.info-carta {
  padding: var(--spazio-3);
  border: 1px solid var(--gesso-300);
  border-radius: var(--raggio-pannello);
  background: var(--gesso-100);
  /* durata dichiarata: 200ms — micro-reazione hover, sotto soglia comunque */
  transition: transform 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .info-carta:hover { transform: translateY(-3px); border-color: var(--gesso-200); }
}
.info-carta__etichetta {
  display: block;
  font: 600 var(--t-xs)/1 var(--font-testo);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inchiostro-600);
  margin-block-end: var(--spazio-1);
}
.info-carta__valore {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-md);
  letter-spacing: -0.01em;
}
.info-carta__valore a { text-decoration: underline; text-decoration-color: var(--gesso-300); }
@media (hover: hover) and (pointer: fine) {
  .info-carta__valore a:hover { text-decoration-color: var(--argilla); }
}

.avviso {
  padding: var(--spazio-3);
  border: 1px dashed var(--gesso-300);
  border-radius: var(--raggio-pannello);
  color: var(--inchiostro-600);
  font-size: var(--t-base);
}
.avviso strong { color: var(--inchiostro-900); }

/* =============================================================== TRATTAMENTI */
.listino {
  display: grid;
  gap: var(--spazio-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.voce-listino {
  padding: var(--spazio-3);
  border: 1px solid var(--gesso-300);
  border-radius: var(--raggio-pannello);
  background: var(--gesso-100);
  /* durata dichiarata: 200ms — micro-reazione hover */
  transition: transform 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .voce-listino:hover { transform: translateY(-3px); }
}
.voce-listino__nome {
  font-family: var(--font-display);
  font-size: var(--t-md);
  margin-block-end: 6px;
}
.voce-listino__nota {
  color: var(--inchiostro-600);
  font-size: var(--t-sm);
}

/* =============================================================== DOVE */
.dettagli {
  display: grid;
  gap: var(--spazio-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  margin-block-end: var(--spazio-6);
}
.dettaglio {
  padding-block: var(--spazio-2);
  border-block-start: 1px solid var(--gesso-300);
}
.dettaglio__etichetta {
  display: block;
  font: 600 var(--t-xs)/1 var(--font-testo);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inchiostro-600);
  margin-block-end: 4px;
}
.dettaglio__valore { font-size: var(--t-base); }

.vie-contatto {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2);
}

/* =================================================================== PIÈ */
.pie {
  position: relative;
  z-index: 1;
  padding-block: var(--spazio-6);
  border-block-start: 1px solid var(--gesso-200);
}
.pie__riga { font: 600 var(--t-sm)/1.6 var(--font-testo); }
.pie__nota { font-size: var(--t-sm); color: var(--inchiostro-600); margin-block-start: var(--spazio-1); }

/* ========================================================= entrate scroll */
[data-anim], [data-anim-lista] > * {
  opacity: 0;
  transform: scale(0.96);
}
.visibile[data-anim],
.visibile > * {
  opacity: 1;
  transform: none;
  /* durata dichiarata: 480ms — entrata narrativa al primo incontro con la
     sezione, non un feedback ripetuto */
  transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out);
}
.visibile > *:nth-child(2) { transition-delay: 50ms; }
.visibile > *:nth-child(3) { transition-delay: 100ms; }
.visibile > *:nth-child(4) { transition-delay: 150ms; }
.visibile > *:nth-child(5) { transition-delay: 200ms; }
.visibile > *:nth-child(6) { transition-delay: 250ms; }

/* ==================================================== movimento ridotto */
@media (prefers-reduced-motion: reduce) {
  .luce-cabina { display: none; }
  [data-anim], [data-anim-lista] > * { opacity: 1; transform: none; }
  .visibile[data-anim], .visibile > * { transition: none; }
}