/* ==========================================================================
   Hibis Beauty Room — foglio di stile
   Attua clients/hibis/hibis-direzione-creativa.md del company brain.
   Le regole non sono preferenze: se ne cambi una, cambia prima la nota.
   ========================================================================== */

:root {
  /* Palette — hibis-direzione-creativa.md, allineata agli SVG il 2026-08-17.
     Beige e avorio dominano, il paprika accende solo i momenti che devono
     restare, l'espresso dà profondità. Mai colori freddi. */
  --paprika:  #EB6636;   /* accento */
  --beige:    #FFEED8;   /* sfondo primario */
  --espresso: #3A2A22;   /* testo — mai fondo pieno */
  --avorio:   #FBF8F3;   /* sfondo chiaro */
  --clay:     #B34A26;   /* accento profondo */
  --taupe:    #8A6E5D;   /* testo secondario */
  --sabbia:   #DED0BE;   /* neutro */
  --ocra:     #E0A45C;   /* supporto */

  /* Non e' un colore nuovo: e' taupe spinto verso espresso finche' il testo
     piccolo non passa il 4.5:1 di WCAG AA. Il taupe puro su beige sta a
     4.13:1, e i sottotitoli dei tasti sono a 13 px. Misurato il 2026-08-17. */
  --taupe-testo: color-mix(in srgb, var(--taupe) 80%, var(--espresso));  /* 5.10:1 su beige */
  /* Stesso criterio, sull'altro lato: espresso su paprika sta a 4.23:1 e
     regge il testo grande, non quello piccolo. Spinto verso il nero passa
     anche in corpo minuto, restando lo stesso marrone. */
  --espresso-scuro: color-mix(in srgb, var(--espresso) 80%, black);      /* 4.77:1 su paprika */
  /* L'arancione dei tasti con la scritta beige. Il paprika del logo col beige
     sta a 2.85:1; scurito del 10% verso il clay arriva a 3.00:1 — la soglia
     WCAG per il testo grande e per i bordi dei comandi — ed e' `#E56334`,
     che a occhio e' lo stesso arancione. Introdotto il 2026-08-17. */
  --paprika-tasto: color-mix(in srgb, var(--paprika) 90%, var(--clay));

  /* Tipografia — IvyPresto Display e Sofia Pro, nessun terzo font.
     I due font veri arrivano dal kit Adobe Fonts: vedi LEGGIMI.md.
     Le riserve qui sotto tengono la pagina dignitosa finché il kit non c'è. */
  --display: "ivypresto-display", "Cormorant Garamond", "Iowan Old Style",
             "Apple Garamond", Garamond, "Times New Roman", serif;
  --testo:   "sofia-pro", "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  /* Spazio. Il criterio di verifica della direzione creativa è uno solo:
     se una composizione sembra piena è sbagliata, se sembra costosa e serena
     è giusta. La qualità si percepisce nello spazio lasciato vuoto. */
  --aria-s: clamp(1.5rem, 3vw, 2.5rem);
  --aria-m: clamp(3rem, 7vw, 6rem);
  --aria-l: clamp(5rem, 12vw, 10rem);
  --colonna: 34rem;      /* righe corte, come chiede la nota */
  --largo: 68rem;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--avorio);
  color: var(--espresso);
  font-family: var(--testo);
  font-weight: 300;
  font-size: clamp(1.0625rem, .4vw + .95rem, 1.1875rem);
  line-height: 1.55;               /* la nota chiede 1.4–1.6 */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* --- Tipografia ---------------------------------------------------------- */

h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 9vw, 5.5rem); }
h2 { font-size: clamp(2rem, 5.5vw, 3.5rem); }
h3 { font-size: clamp(1.375rem, 2.6vw, 1.875rem); }

p { margin: 0 0 1.15em; max-width: var(--colonna); }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

/* L'occhiello: Sofia Pro, maiuscoletto spaziato — la stessa voce del
   «BEAUTY ROOM» sotto la wordmark. È l'unico maiuscolo della pagina. */
.occhiello {
  font-family: var(--testo);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--taupe);
  margin: 0 0 var(--aria-s);
}

/* Citazioni e manifesto: IvyPresto Italic, corpo grande, centrate, molta
   aria intorno. Sono momenti di silenzio — non si affollano. */
.manifesto {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  line-height: 1.22;
  text-align: center;
  max-width: 22ch;
  margin: 0 auto;
  text-wrap: balance;
}

.sotto { color: var(--taupe-testo); }

/* --- Impaginato ---------------------------------------------------------- */

.sezione { padding: var(--aria-l) var(--aria-s); }
.dentro  { max-width: var(--largo); margin: 0 auto; }
.stretto { max-width: var(--colonna); margin: 0 auto; }

.fondo-beige   { background: var(--beige); }
.fondo-paprika { background: var(--paprika); color: var(--espresso); }
.fondo-paprika .sotto,
.fondo-paprika .occhiello { color: var(--espresso); }

/* --- Il tasto ------------------------------------------------------------ */

.tasto {
  display: inline-block;
  font-family: var(--testo);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-decoration: none;
  padding: 1.05em 2.4em;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.tasto-pieno  { background: var(--clay); color: var(--beige); }   /* 4.71:1 */
.tasto-vuoto  { border-color: currentColor; }
@media (hover: hover) {
  .tasto-vuoto:hover { background: var(--espresso); color: var(--avorio); border-color: var(--espresso); }
}
.fondo-paprika .tasto-pieno { background: var(--espresso); color: var(--beige); }

:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 2px; }
.fondo-paprika :focus-visible { outline-color: var(--espresso); }

/* --- Testata ------------------------------------------------------------- */

.testata {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--aria-s);
  padding: 1.1rem var(--aria-s);
  background: color-mix(in srgb, var(--avorio) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--sabbia) 55%, transparent);
}
.testata .marchio { width: clamp(8.5rem, 24vw, 11rem); }   /* ingrandito il 2026-08-17 */
.testata nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); }
.testata nav a { font-size: .9375rem; text-decoration: none; color: var(--taupe); }

/* Il tasto della testata: arancione con la scritta beige, come chiesto da
   Vincenzo il 2026-08-17.

   L'arancione e' `--paprika-tasto`, non `--paprika` puro: il paprika del logo
   col beige sta a 2.85:1, sotto ogni soglia, e un tasto con la scritta beige
   sopra sarebbe stato *meno* leggibile di prima — cioe' l'opposto della
   richiesta, che era «piu' visibile». Scurendolo del 10% verso il clay si
   arriva a 3.00:1 restando lo stesso arancione a occhio: e' la via gia'
   annotata piu' sotto sul tasto della home, usata qui per la prima volta.

   Il resto della visibilita' non viene dal colore ma dal peso: il tasto e'
   piu' grande, il testo piu' pesante e spaziato. */
.testata .tasto { padding: .85em 1.9em; font-size: 1rem; }
.tasto-prenota {
  background: var(--paprika-tasto);
  color: var(--beige);
  border-color: var(--paprika-tasto);
  font-weight: 600;
}
@media (hover: hover) {
  .tasto-prenota:hover { background: var(--clay); border-color: var(--clay); }
}
.tasto-prenota:active { background: var(--clay); border-color: var(--clay); }
@media (max-width: 34rem) {
  .testata nav a.solo-grande { display: none; }
}

/* --- Apertura ------------------------------------------------------------ */

.apertura {
  min-height: min(88svh, 52rem);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: var(--aria-m) var(--aria-s) var(--aria-l);
  background: var(--beige);
}
.apertura .marchio { width: clamp(13rem, 42vw, 24rem); margin-bottom: var(--aria-m); }
.apertura .claim { font-size: clamp(2.5rem, 8vw, 4.75rem); }
.apertura .tasto { margin-top: var(--aria-m); }

/* La data di apertura. Si toglie il giorno dopo l'inaugurazione:
   una pagina che promette un'apertura già avvenuta invecchia male. */
.data-apertura {
  display: inline-flex; align-items: baseline; gap: .55em;
  margin-top: var(--aria-s);
  font-size: .9375rem; color: var(--taupe);
}
.data-apertura strong { font-weight: 500; color: var(--espresso); }

/* --- Il numero che colpisce ---------------------------------------------- */
/* IvyPresto, enorme. I numeri funzionali — durate, prezzi — stanno in
   Sofia Pro tabular, più sotto. I due ruoli non si mescolano mai. */
.numerone {
  font-family: var(--display);
  font-size: clamp(4rem, 14vw, 9rem);
  line-height: .9;
  color: var(--paprika);
}

/* --- Servizi ------------------------------------------------------------- */

.servizi {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  background: color-mix(in srgb, var(--sabbia) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--sabbia) 60%, transparent);
  margin-top: var(--aria-m);
}
.servizio { background: var(--avorio); padding: var(--aria-s); }
.servizio h3 { margin-bottom: .5rem; }
.servizio p  { font-size: .9375rem; color: var(--taupe-testo); margin: 0; }
.servizio.primo { background: var(--beige); }

/* --- Listino ------------------------------------------------------------- */

/* Lo stacco fra la barra e il titolo: `--aria-l` era l'aria di una sezione che
   ne segue un'altra, ma qui sopra non c'e' nessuna sezione — c'e' la testata,
   che ha gia' un suo respiro e un bordo. Sommate facevano un buco. */
.sezione-listino { padding-top: var(--aria-s); padding-bottom: var(--aria-m); }

/* Il titolo della pagina listino: senza il blocco del principio davanti, e' la
   prima cosa che si legge, e non deve rubare la scena ai gruppi. */
.titolo-listino { font-size: clamp(2.25rem, 6vw, 3.25rem); margin: 0 0 .25rem; }
.aggiornato { margin-top: var(--aria-m); font-size: .875rem; }

/* Il tasto in fondo al listino: e' lo STESSO tasto primario della home, non un
   parente. Chi arriva qui dalla pulsantiera ritrova la forma che ha gia' premuto,
   ed e' l'unica cosa da fare a fine pagina — quindi sta largo quanto la colonna. */
.chiusura-listino { margin-top: var(--aria-m); }
.chiusura-listino .tasto-link { text-align: center; }

.gruppo { margin-top: var(--aria-m); }
.gruppo > h2 { margin-bottom: .35rem; }
.gruppo > .occhiello-gruppo {
  color: var(--taupe); font-size: .9375rem; margin: 0 0 var(--aria-s); max-width: var(--colonna);
}

.voci { list-style: none; margin: 0; padding: 0; }
.voce {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .4rem 1.5rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--sabbia) 55%, transparent);
}
.voce:first-child { border-top: 1px solid color-mix(in srgb, var(--sabbia) 55%, transparent); }
.voce .nome { font-weight: 400; }
.voce .nota { grid-column: 1; font-size: .875rem; color: var(--taupe-testo); margin: 0; }
.voce .durata {
  grid-column: 1; font-size: .8125rem; color: var(--taupe-testo);
  font-variant-numeric: tabular-nums;   /* numero funzionale, non da colpire */
}
/* Il prezzo è un numero funzionale: Sofia Pro tabular, incolonnato. */
.voce .prezzo {
  /* `1 / -1`, non `span 3`: le righe della voce oggi sono due — nome e durata —
     perche' le note sono state tolte il 2026-08-17. Con `span 3` il prezzo si
     centrava su una riga fantasma e cadeva sotto il nome. Cosi' si centra su
     quelle che ci sono davvero, e tornera' giusto se un giorno la nota ritorna. */
  grid-column: 2; grid-row: 1 / -1;
  align-self: center;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  white-space: nowrap;
}
.voce .prezzo .da { font-size: .8125rem; color: var(--taupe); margin-right: .3em; }

/* --- Dove e quando ------------------------------------------------------- */

.due { display: grid; gap: var(--aria-m); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.orari { list-style: none; margin: 0; padding: 0; font-variant-numeric: tabular-nums; }
.orari li {
  display: flex; justify-content: space-between; gap: 2rem;
  padding: .55rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--sabbia) 45%, transparent);
}
.orari .chiuso { color: var(--taupe); }

/* --- Piede --------------------------------------------------------------- */

.piede { background: var(--espresso); color: var(--beige); padding: var(--aria-m) var(--aria-s); }
.piede a { color: inherit; }
.piede .marchio { width: 8rem; margin-bottom: var(--aria-s); }
.piede .righe { display: flex; flex-wrap: wrap; gap: var(--aria-m); justify-content: space-between; }
.piede .minuto { font-size: .8125rem; color: color-mix(in srgb, var(--beige) 62%, var(--espresso)); }

/* Il piede corto, dal 2026-08-17: tre righe in colonna e centrate. Niente
   marchio — sta gia' in testa alla pagina — e niente occhielli «Dove»/«Quando»:
   un indirizzo e un orario si riconoscono da soli, e l'etichetta e' una riga in
   piu' da leggere per dire quello che il testo sotto dice meglio. */
.piede-corto { padding: var(--aria-s) var(--aria-s); text-align: center; }
.piede-corto p { margin: 0 0 .35rem; font-size: .9375rem; line-height: 1.5; }
.piede-corto .minuto { display: block; }
/* I marchi nel piede sono piccoli, e devono restarlo: qui non sono un invito
   — quello e' il tasto Prenota — sono un rimando per chi li cerca. Nel tasto
   della home stanno a 48px perche' li' sono una delle tre cose da fare.
   Il bersaglio resta 44px grazie al padding: il cerchio disegnato e' piccolo,
   l'area che risponde al dito no. */
.piede-corto .reti { display: flex; gap: .75rem; justify-content: center; margin-top: .9rem; }
.piede-corto .reti a {
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  padding: .375rem;  box-sizing: content-box;   /* 32 + 6 + 6 = 44px di bersaglio */
  border-radius: 999px;
  color: var(--paprika);               /* il corpo del marchio, come in home */
  --ritaglio: var(--espresso);         /* il ritaglio segue il fondo scuro del piede */
  transition: color .2s ease;
}
.piede-corto .reti svg { width: 1.25rem; height: 1.25rem; display: block; }
.piede-corto .reti a:active,
.piede-corto .reti a:hover { color: var(--beige); --ritaglio: var(--espresso); }

/* I marchi social: lineari, outline, monopeso, un solo set — mai pieni,
   mai multicolore. La nota lo chiede per le icone e vale anche qui. */
.social { display: flex; gap: 1.1rem; margin-top: var(--aria-s); }
.social a {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;      /* 48px: il minimo WCAG è 44, non è l'obiettivo */
  border: 1px solid color-mix(in srgb, var(--beige) 40%, transparent);
  border-radius: 999px;
  transition: background-color .25s ease, border-color .25s ease;
}

.social svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* --- Utilità ------------------------------------------------------------- */

.solo-lettori-schermo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.salta-al-contenuto {
  position: absolute; left: -9999px;
  background: var(--espresso); color: var(--avorio);
  padding: .8em 1.4em; z-index: 100;
}
.salta-al-contenuto:focus { left: var(--aria-s); top: .6rem; }

/* ==========================================================================
   La pagina bio — hibis.it
   Non è un sito: è una pulsantiera. Sta tutta in uno schermo di telefono e
   non si scorre — chi la apre dalla bio o da un tag NFC ha una cosa da fare,
   e ogni pixel sotto la piega è un pixel che non serve a farla.
   ========================================================================== */

.corpo-hub { background: var(--beige); }

.hub {
  min-height: 100svh;
  max-width: 26rem;
  margin: 0 auto;
  padding: clamp(1.25rem, 4svh, 2.5rem) 1.5rem clamp(1rem, 3svh, 2rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 3.2svh, 2rem);
  text-align: center;
}

/* Le misure sono in `svh` e non in `rem`: su uno schermo basso tutto si
   stringe insieme invece di far comparire una barra di scorrimento. Sotto i
   560 px di altezza — un telefono piccolo in orizzontale — lo scorrimento
   torna, ed è giusto così: meglio scorrere che tagliare un tasto. */
.hub .marchio { width: clamp(6rem, 15svh, 10rem); }

.hub .claim {
  font-family: var(--display);
  font-size: clamp(1.5rem, 4.2svh, 2.25rem);
  line-height: 1.05;
  margin: 0;
}

/* Si toglie da link.json il 31 agosto: una pagina che promette un'apertura
   già avvenuta invecchia in un giorno. */
.hub .avviso {
  display: inline-block;
  margin: 0;
  padding: .4em 1em;
  border: 1px solid var(--clay);   /* paprika su beige sta a 2.85:1, sotto il 3:1 dei bordi */
  border-radius: 999px;
  color: var(--clay);
  font-size: .8125rem;
  letter-spacing: .04em;
}

.tasti {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(.6rem, 1.4svh, .9rem);   /* mai sotto gli 8 px fra due aree toccabili */
}

.tasto-link {
  display: block;
  width: 100%;
  min-height: 3.5rem;                  /* 56 px: il minimo WCAG è 44, non è l'obiettivo */
  padding: clamp(.8rem, 1.8svh, 1.15rem) 1.4rem;
  border: 1px solid var(--espresso);
  border-radius: 1rem;
  background: transparent;
  color: var(--espresso);
  text-decoration: none;
  transition: background-color .22s ease, color .22s ease, transform .12s ease;
}
.tasto-link .testo { display: block; font-weight: 400; font-size: 1.25rem; line-height: 1.2; }
.tasto-link .sotto {
  display: block; margin-top: .15rem;
  font-size: .8125rem; color: var(--taupe-testo);
  transition: color .22s ease;
}

/* Il tasto pieno è uno solo: il paprika accende i momenti che devono
   restare, e due tasti pieni non ne accendono nessuno.

   **Scritta beige su paprika, scelta di Vincenzo del 2026-08-17.** Il fondo
   è il paprika del logo e il testo è il beige del brand: sta a 2.85:1, e
   WCAG ne chiede 3 anche solo per il testo grande. **Manca di 0.15**, cioè
   di un'inezia misurabile ma non trascurabile — su un telefono al sole di
   agosto, che è esattamente dove questa pagina viene aperta.

   Se un giorno lo si vuole a norma senza rinunciare al beige, basta scurire
   il fondo del 10% verso il clay — `#E56334`, che a occhio è lo stesso
   arancione — e si arriva esatti a 3.00:1. La riga è già scritta qui sotto,
   commentata. */
/* Dal 2026-08-17 usa `--paprika-tasto`, lo stesso del tasto in testata: e' il
   paprika scurito del 10% verso il clay, che col beige arriva a 3.00:1 invece
   di 2.85. La riga qui sotto era commentata come «se un giorno lo si vuole a
   norma»: quel giorno e' arrivato con la richiesta di rendere piu' visibile il
   tasto della testata, e tenerne due arancioni diversi sulla stessa pagina
   sarebbe stato peggio dello scarto che si e' sanato. */
.tasto-link.primario {
  background: var(--paprika-tasto);
  border-color: var(--paprika-tasto);
  color: var(--beige);
}
.tasto-link.primario .testo {
  font-size: 1.5rem;          /* 24px: soglia del «testo grande» di WCAG */
  white-space: nowrap;        /* «Prenota» sta in una riga sola: se un giorno il testo
                                 si allunga, meglio accorgersene subito che vederlo
                                 andare a capo su un telefono e non su un altro */
}
.tasto-link.primario .sotto { color: var(--beige); }

@media (hover: hover) {
  .tasto-link:hover { background: var(--espresso); color: var(--beige); }
  .tasto-link:hover .sotto { color: color-mix(in srgb, var(--beige) 80%, var(--espresso)); }
  .tasto-link.primario:hover { background: var(--clay); border-color: var(--clay); color: var(--beige); }
  .tasto-link.primario:hover .sotto { color: var(--beige); }
  .testata nav a:hover { color: var(--espresso); }
}
.tasto-link:active { transform: scale(.985); background: var(--espresso); color: var(--beige); }
.tasto-link.primario:active { background: var(--clay); color: var(--beige); }

/* I marchi social sono **quelli veri** — stessi tracciati dei file in
   `app/static/reti/`, non un ridisegno — ma portati al paprika del brand
   invece che ai colori di Meta. Scelta di Vincenzo del 2026-08-17: le linee
   guida di Instagram ammettono il glifo in un colore solo, ma quel colore
   dovrebbe essere nero o bianco. Detto, e deciso comunque.

   L'anello e' clay e non paprika: il paprika su beige sta a 2.85:1, sotto il
   3:1 che WCAG chiede ai bordi dei comandi. Cosi' il contorno del tasto si
   vede a norma e il marchio dentro resta l'arancione del brand. */
.hub .reti { display: flex; gap: 1.25rem; justify-content: center; }
.hub .reti a {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;           /* 48 px */
  border: 1px solid var(--clay);
  border-radius: 999px;
  color: var(--paprika);               /* il corpo del marchio */
  --ritaglio: var(--beige);            /* il ritaglio dentro: segue il fondo */
  transition: background-color .2s ease, color .2s ease, transform .18s ease;
}
.hub .reti svg { width: 1.5rem; height: 1.5rem; display: block; }
.hub .reti a:active { transform: scale(.92); background: var(--clay); color: var(--beige); --ritaglio: var(--clay); }

@media (hover: hover) {
  .hub .reti a:hover { background: var(--clay); color: var(--beige); --ritaglio: var(--clay); }
}

/* Il tocco deve rispondere. iOS disegna un riquadro grigio sopra i link e
   ritarda il :active di 300 ms: `touch-action` toglie il ritardo, il riquadro
   si spegne, e lo stato premuto lo diamo noi. */
.tasto-link, .tasto, .hub .reti a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}