/* TEMA: BEAUTY — VD Hair Specialist Experience, nero profondo, rosso, oro. */
:root {
  --c-bg:      #0B0B0C;   /* nero profondo */
  --c-surface: #161513;   /* un grado più chiaro, stesso nero */
  --c-fg:      #F5ECE0;   /* bianco caldo */
  --c-accent:  #C7A24E;   /* rosso */

  /* Secondo accento, oro: base.css non lo referenzia (legge solo
     --c-accent), ma firme.css sì — sulle due linee di .frase (§13),
     l'unico dettaglio del sito che oggi lo usa. */
  --c-accent-2: #C7A24E;

  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Karla", system-ui, sans-serif;
  --font-ui:      "Karla", system-ui, sans-serif;
  --display-weight: 500;
  --display-tracking: -0.01em;

  /* Font della sola frase (.frase__testo, css/firme.css §13): script
     d'importazione, non var(--font-display) — i titoli delle altre
     sezioni restano su Fraunces. Fallback var(--font-display) nel
     firme.css se un'altra nicchia usa "frase" senza definire questo
     token. */
  --font-frase: "Tangerine", cursive;

  /* Sfondo condiviso da .frase (css/firme.css §13) e da .ovl-servizi
     (§14): la seta scura del cliente in cover, con sopra uno scrim
     scuro piatto per la leggibilità del testo — i livelli si scrivono
     nell'ordine dal più in alto al più in basso, quindi lo scrim
     precede l'immagine. Lo scrim è un linear-gradient a due fermate
     identiche: è il modo per impilare un colore piatto come "layer"
     separato in un background multiplo, dove background-color può
     comparire solo una volta, come base finale. var(--c-bg) in coda è
     quella base: si vede se l'immagine non carica, o oltre i bordi se
     cover non copre esattamente.
     Percorso "../../assets/…": questo file vive in css/temi/, due
     livelli sotto la radice del progetto — un url() in un foglio di
     stile si risolve relativo AL FOGLIO, non alla pagina, a differenza
     di un src in HTML. */
  --frase-sfondo:
    linear-gradient(color-mix(in srgb, var(--c-bg) 70%, transparent), color-mix(in srgb, var(--c-bg) 70%, transparent)),
    url("../../assets/beauty/fascia-seta.webp") center / cover no-repeat,
    var(--c-bg);

  --radius: 6px;
  --motion: 0.9;

  /* Hero "sfornata": le foto nei binari sono chiare, il testo sopra
     ci finiva sopra illeggibile. Foto più scure e velo più opaco per
     contrasto — le due manopole sono definite con un default neutro
     in css/firme.css, qui si impostano solo i valori per questo tema. */
  --sfornata-luminosita: 0.72;
  --sfornata-velo-forte: 97%;
  --sfornata-velo-debole: 88%;

  /* Il velo (sopra) era statico: pieno dal primo frame, mentre il
     titolo scorre dentro con un ritardo (le righe di .sfornata__titolo
     partono a 1.1s/1.25s in css/firme.css) — l'alone risultava visibile
     prima ancora che il testo comparisse. Qui parte da opacità e scala
     zero come il testo, e cresce nella stessa finestra di tempo: delay
     0.95s (appena prima della prima riga del titolo), durata 1.2s
     (finisce insieme alle righe, che finiscono verso 2.15–2.3s), stessa
     easing del testo per un arrivo che si senta unico. */
  --sfornata-velo-partenza: 0;
  --sfornata-velo-scala: .82;
  --sfornata-velo-transizione:
    opacity calc(1.2s * var(--motion, 1)) ease calc(.95s * var(--motion, 1)),
    transform calc(1.2s * var(--motion, 1)) cubic-bezier(.16, 1, .3, 1) calc(.95s * var(--motion, 1));

  /* --sfornata-testo-ombra: "none" esplicito, non semplicemente omesso.
     Il velo (due manopole sopra) più la foto scurita bastano
     da soli per la leggibilità. Va impostato esplicitamente a "none" e
     non lasciato indefinito: senza, occhiello e titolo (css/firme.css)
     cadrebbero comunque sul default "none" del token, ma il sottotitolo
     (.hero--sfornata .lead / .sfornata__centro p) ha un fallback diverso
     — l'ombra fissa che quelle due regole avevano già prima di questo
     token — quindi senza un valore esplicito qui il sottotitolo si
     ritroverebbe l'unico ancora con un'ombra, e la stessa a bordi netti.
     "none" vince comunque per specificità sulla regola generica
     "h1 { text-shadow: ... }" più in basso in firme.css. */
  --sfornata-testo-ombra: none;
}

/* Logo della nav: cerchio bianco pieno che lo stacca dallo sfondo scuro
   della hero. .nav__logo (base.css) è già il link che lo contiene, qui
   si aggiungono solo le proprietà che base.css non tocca (display,
   background, border-radius, padding) — nessun conflitto di cascata.
   :has(img) lo scopa al solo caso con logo a immagine: se in futuro
   questa nicchia tornasse a un logo testuale, non ci si ritroverebbe
   un cerchio bianco intorno al testo. Diametro fissato con width/height
   esplicite (non più derivato da altezza-logo + padding): così si può
   ingrandire il logo riducendo il padding senza che il cerchio si muova. */
.nav__logo:has(img) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(46px, 8vw, 56px);
  height: clamp(46px, 8vw, 56px);
  background: #fff;
  border-radius: 50%;
  padding: 1px;
}
.nav__logo img {
  display: block;
  height: 100%;   /* riempie lo spazio rimasto dentro al cerchio fisso */
  width: auto;
}

/* Aree cliccabili di almeno 44px (verifica a 390px). .btn (base.css) è
   già alto abbastanza SE eredita line-height:1.6 dal body, ma è un
   <button> per il submit del form e per i filtri (.filtro) — elementi
   che base.css non porta esplicitamente a font/line-height ereditati
   (lo fa solo per .campo input/textarea/select) — quindi l'altezza
   reale dipende da metriche di default del browser non garantite.
   Fissarla qui invece di sperare che il line-height erediti. */
.btn, .filtro {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Piè di pagina: una sola riga, centrata */
.footer .footer__riga {
  justify-content: center;
  text-align: center;
}

/* Chi sono — larghezza della citazione. In firme.css il limite è
   max-width: 24ch sul <blockquote>, ma "ch" si risolve sul font del
   blockquote (quello del corpo, piccolo) e non sul corsivo grande del
   <p> interno: ~200px di colonna, e "La bellezza non si improvvisa.
   Si progetta." cadeva in 6 righe da una-due parole. Qui il limite
   passa al <p>, in em del suo stesso font-size, così scala con il
   clamp() e resta valido a ogni larghezza: 13em sta fra la prima frase
   intera (~12.6em misurati) e la prima frase più "Si" (~13.6em), quindi
   da desktop la citazione va su due righe, con "Si progetta." sulla
   seconda. Sotto quella larghezza va a capo da sola.
   Specificità .chi .chi__citazione: questo foglio è caricato prima di
   firme.css. Font, colore, corsivo e interlinea restano quelli di
   firme.css. */
.chi .chi__citazione { max-width: none; }
.chi .chi__citazione p { max-width: 13em; margin-inline: auto; }

/* Chi sono — bio centrata. Invece delle colonne 1–7 della griglia di
   firme.css occupa tutta la riga e si centra con una larghezza massima
   in em del suo font. 58em (≈ 85 caratteri per riga):
   il testo arriva più verso i lati e ogni paragrafo occupa meno righe.
   Allineamento centrato sull'asse, come la citazione e il nome sopra. */
.chi .chi__bio {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 58em;
  margin-inline: auto;
  text-align: center;
  font-size: 15px;   /* stessa dimensione dei <p>: serve solo a dare base agli em */
}
/* base.css limita OGNI <p> a 62ch: è quello — non il contenitore — a
   tenere le righe corte (603px invece degli 870 disponibili) e a far
   andare a capo troppo presto. Qui i paragrafi usano tutta la
   larghezza della bio; margin-inline:auto li mantiene centrati sul suo
   asse, così il blocco resta simmetrico. */
.chi .chi__bio p {
  max-width: 100%;
  margin-inline: auto;
  font-size: 17px;
}

/* Chi sono — corpi un gradino più grandi, per leggibilità. Titolo e
   citazione restano come sono: qui si toccano solo le scritte minori,
   che erano sotto i 10px e si leggevano male. */
/* l'occhiello porta la misura sullo <span> interno, non sul div */
.chi .chi__occhiello span,
.chi .chi__ruolo { font-size: 11px; }
.chi .chi__nome { font-size: 22px; }
.chi .chi__marchio-eti { font-size: 11px; }

/* Tricologia — stessi corpi di "Chi sono", per coerenza fra le due
   sezioni. Titolo e citazione in corsivo restano come sono. */
.tri .tri__corpo,
.tri .tri__nome,
.tri .tri__approccio p,
.tri .tri__nota { font-size: 17px; }
.tri .tri__occhiello { font-size: 11px; }

/* Le due frasi in fondo (approccio e nota) non hanno un max-width in
   ch: occupano tutta la larghezza del loro contenitore. */
.tri .tri__approccio p,
.tri .tri__nota { max-width: none; }

/* ================================================================
   Trattamenti liscianti — impaginazione condivisa dalle DUE voci
   ("Nanoplastia Luxury" e "Rituale Capelli Crespi & Ricci Luxury").
   Le regole valgono per entrambe: stessi corpi, stessi margini, stesso
   unico filetto. L'unica differenza ammessa è il dato "6 mesi", che
   esiste solo dove il contenuto lo fornisce.
   ================================================================ */

/* 1 — POSIZIONE: il blocco non galleggia più a metà colonna, si
   appoggia al fondo. La colonna è alta quanto il palco (100vh), quindi
   allineando in basso il bordo inferiore del testo coincide con quello
   della foto accanto; il vuoto si raccoglie tutto sopra. */
.trt .trt__lato {
  align-items: flex-end;
  padding-bottom: 96px;
}
/* Le voci stanno una sopra l'altra: la prima è in flusso e tiene
   l'altezza, le altre sono assolute ancorate a top:0 (firme.css).
   Con l'ancoraggio in basso vanno agganciate al fondo, altrimenti solo
   la prima scenderebbe e le due sezioni non risulterebbero speculari. */
.trt .trt__testo:not(:first-child) {
  top: auto;
  bottom: 0;
}

/* 2 — CORPO DEL TESTO */
.trt .trt__testo p {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.7;
  max-width: 40ch;
  color: color-mix(in srgb, var(--c-fg) 85%, transparent);
}
.trt .trt__testo p + p { margin-top: 1.6em; }
/* il primo paragrafo si stacca dal filetto, non dai margini di prima */
.trt .trt__testo p:first-of-type { margin-top: 1.6em; }

/* 3 — FILETTI: resta solo quello sotto il titolo, largo quanto la
   colonna di testo, oro pieno, 1px. Gli altri due — la pista del
   progresso e la sua barra — erano i due segmenti di colore diverso in
   fondo, che si leggevano come un errore. */
.trt .trt__trattino {
  width: 100%;
  max-width: 40ch;
  background: var(--c-accent);
}
.trt .trt__progresso { display: none; }

/* 4 — DATO IN EVIDENZA (solo dove il contenuto lo fornisce) */
.trt .trt__dato {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 clamp(1.6rem, 4vh, 2.6rem);
}
.trt .trt__dato-num {
  font-family: var(--font-display);
  font-weight: var(--display-weight, 400);
  font-size: 5rem;
  line-height: .9;
  color: var(--c-accent);
}
.trt .trt__dato-uni {
  margin-left: .15rem;
  font-family: var(--font-display);
  font-style: normal;
  font-size: 1.15rem;
  color: var(--c-accent);
}
.trt .trt__dato-nota {
  flex-basis: 100%;
  margin-top: .75rem;
  font-family: var(--font-ui);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-fg) 42%, transparent);
}

/* COLORI ripresi dalle due foto accanto, campionate direttamente:
   la nanoplastia ha media #9e8879 e dominanti sabbia (#e0c4c4, #c48c70),
   i ricci media #5e4936 con bruni caldi (#381c1c, #a88c70). Entrambe
   convergono su un bruno caldo vicino all'oro del tema (#C7A24E), che
   resta quindi il riferimento: qui si scalda soltanto il nero della
   metà sinistra, che era un grigio leggermente bluastro e stonava con
   la foto. Le quantità sono minime — la sezione resta nel nero del
   sito, non diventa marrone. */
/* Due classi sul MEDESIMO elemento: questo foglio è caricato prima di
   firme.css, quindi a parità di specificità vincerebbe quello e lo
   sfondo resterebbe il grigio neutro di partenza. */
.trt .trt__palco .trt__lato {
  background:
    linear-gradient(color-mix(in srgb, var(--c-accent) 3.5%, transparent),
                    color-mix(in srgb, var(--c-accent) 3.5%, transparent)),
    color-mix(in srgb, var(--c-fg) 3%, var(--c-bg));
}
/* il titolo prende un filo del caldo della foto, senza perdere il
   bianco caldo del tema */
.trt .trt__titolo {
  color: color-mix(in srgb, var(--c-accent) 12%, var(--c-fg));
}
/* il corpo resta all'85% richiesto, ma il bianco vira appena al caldo
   invece che al neutro */
.trt .trt__testo p {
  color: color-mix(in srgb, color-mix(in srgb, var(--c-accent) 8%, var(--c-fg)) 85%, transparent);
}

/* 5 — FONDO: solo grana, niente altro. */
.trt .trt__grana {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .04;
  pointer-events: none;
}
/* i testi stanno sopra la grana */
.trt .trt__testi { z-index: 1; }

/* Sotto gli 820px la sezione collassa in verticale: l'ancoraggio in
   basso non si applica (il testo torna in alto, sotto la foto) e i
   corpi scendono per stare nello schermo. */
@media (max-width: 1080px) {
  .trt .trt__lato {
    align-items: flex-start;
    padding-bottom: clamp(28px, 6vw, 44px);
  }
  .trt .trt__testo p { font-size: 1rem; line-height: 1.65; max-width: none; }
  .trt .trt__trattino { max-width: none; }
  .trt .trt__dato { margin-bottom: clamp(.8rem, 2vh, 1.2rem); }
  .trt .trt__dato-num { font-size: 3.2rem; }
}