/* TEMA BEAUTY — SOLO MOBILE
   =========================================================
   Tutto il file vive dentro un unico @media (max-width: 1080px):
   sopra quella soglia questo foglio non produce NESSUNA regola, quindi
   il desktop resta identico a prima. Caricato dopo beauty.css, così
   vince sulle regole del tema a parità di specificità.

   Nessun'altra riga fuori dal blocco: niente @import, niente :root,
   niente regole globali.
   ========================================================= */

@media (max-width: 1080px) {

  /* ---------------------------------------------------------
     2 — CORPO DEL TESTO
     Un solo corpo per tutti i testi lunghi delle sezioni narrative,
     così su telefono la lettura è uniforme.
     --------------------------------------------------------- */
  .chi .chi__bio p,
  .tri .tri__corpo,
  .tri .tri__approccio p,
  .tri .tri__nota,
  .trt .trt__testo p,
  .ovl-servizi .ovl-servizi__testo {
    font-size: 1.05rem;
    line-height: 1.65;
  }

  /* Il testo sbordava di 29px oltre il bordo destro. La causa non era
     la larghezza della bio ma la griglia che la contiene: dodici
     colonne 1fr con 22px di gap: su 350px i soli gap ne occupano 242,
     restano 108px per dodici tracce, che non scendono sotto il loro
     contenuto minimo e fanno sforare la riga.
     Su telefono quelle colonne non servono — la bio sta comunque su
     tutta la riga — quindi la griglia diventa a una colonna sola. */
  .chi .chi__corpo {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .chi .chi__bio {
    max-width: 100%;
    font-size: 1.05rem;   /* base per gli em: allineata al corpo mobile */
  }

  /* ---------------------------------------------------------
     3 — TITOLI: mai oltre tre righe su 390px.
     I corpi sono calcolati sul titolo più lungo di ogni sezione
     ("Analisi della cute e trattamenti naturali personalizzati" e
     "Rituale Capelli Crespi & Ricci Luxury" sono i due casi peggiori).
     --------------------------------------------------------- */
  .tri .tri__titolo { font-size: clamp(1.5rem, 6.4vw, 1.9rem); line-height: 1.16; }
  .trt .trt__titolo { font-size: clamp(1.45rem, 6vw, 1.8rem); line-height: 1.16; }
  .cfr .cfr__titolo { font-size: clamp(1.7rem, 7.4vw, 2.2rem); }
  /* sotto la testata dei lavori è un sottotitolo: resta piccolo */
  .lvr + .cfr .cfr__titolo { font-size: clamp(1.1rem, 4.6vw, 1.35rem); }
  .chi .chi__citazione p { font-size: clamp(1.5rem, 6.6vw, 2rem); }

  /* ---------------------------------------------------------
     4 — SPAZIATURE: circa un terzo in meno.
     Solo padding/margini verticali: nessuna regola tocca la
     disposizione orizzontale o la struttura.
     --------------------------------------------------------- */
  .frase { padding-block: 64px; }
  .chi { padding-top: 34px; }
  .cfr { padding-block: 56px; }
  .fascia { padding-block: 22px; }
  .sezione { padding-block: 48px; }
  .ovl-servizi { padding-top: 38px; padding-bottom: 20px; }
  .chi .chi__bio p + p { margin-top: 1.1em; }
  .trt .trt__testo p + p { margin-top: 1.1em; }

  /* ---------------------------------------------------------
     TRATTAMENTI — su telefono niente sticky: nanoplastia e ricci sono
     due blocchi semplici uno sotto l'altro, ognuno con la sua foto e
     sotto il suo testo.
     Il markup è quello del desktop (tutti i testi in una colonna, tutte
     le foto nell'altra): qui i contenitori delle due colonne si
     sciolgono con display:contents e testi e foto diventano figli
     diretti del palco, riordinati a coppie con order. Nessuna modifica
     a markup o JS: avviaTrattamenti() continua a scambiare le sue
     classi, ma qui non hanno più effetto visivo.
     --------------------------------------------------------- */
  .trt .trt__palco {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .trt .trt__lato,
  .trt .trt__testi,
  .trt .trt__pannelli { display: contents; }

  /* ciò che serviva solo alla colonna fissa */
  .trt .trt__grana,
  .trt .trt__cucitura,
  .trt .trt__progresso { display: none; }

  /* coppie foto → testo, nell'ordine delle voci */
  .trt .trt__pannello:nth-child(1) { order: 1; }
  .trt .trt__testo:nth-child(1)    { order: 2; }
  .trt .trt__pannello:nth-child(2) { order: 3; }
  .trt .trt__testo:nth-child(2)    { order: 4; }
  .trt .trt__pannello:nth-child(3) { order: 5; }
  .trt .trt__testo:nth-child(3)    { order: 6; }
  .trt .trt__pannello:nth-child(4) { order: 7; }
  .trt .trt__testo:nth-child(4)    { order: 8; }

  /* foto nel flusso, in un riquadro verticale come gli scatti */
  .trt .trt__pannello {
    position: relative;
    top: auto;
    height: auto;
    aspect-ratio: 4 / 5;
  }

  /* testi tutti visibili e nel flusso, sul fondo caldo della colonna */
  .trt .trt__testo {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: none;
    padding: 28px clamp(1.1rem, 5vw, 2rem) 44px;
    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));
  }

  /* angoli oro sempre disegnati: senza lo sticky non c'è un "arrivo"
     della foto da seguire (stessa specificità della regola che li
     ritira, caricata dopo) */
  .trt.is-pronta .trt__pannelli .trt__pannello .trt__angolo::before,
  .trt.is-pronta .trt__pannelli .trt__pannello .trt__angolo::after { transform: none; }
  .trt.is-pronta .trt__pannelli .trt__pannello .trt__angolo i {
    opacity: 1;
    transform: rotate(45deg);
  }
  .tri .tri__corpo { margin-top: 26px; }

  /* ---------------------------------------------------------
     TRICOLOGIA
     La foto è orizzontale (3:2) ma su telefono copriva tutto il blocco
     di testo, alto più di 800px: con cover restava una striscia di
     capelli e basta. Qui diventa una fascia in cima, in proporzione, e
     l'inquadratura va a destra dove ci sono mano, microcamera e laptop.
     Il testo parte subito sotto, appoggiato sul fondo sfumato della
     foto. Struttura e ordine degli elementi restano quelli di sempre:
     cambiano solo misure, spazi e l'area della foto.
     --------------------------------------------------------- */
  .tri .tri__foto {
    inset: 0 0 auto 0;
    height: 75vw;                        /* fascia 4:3 */
    background-position: 82% 45%;
    filter: saturate(.8) brightness(.9) contrast(1.04);
  }
  /* il velo copre solo la fascia: sfuma nel fondo in basso, così il
     testo che ci si appoggia resta leggibile */
  .tri .tri__velo {
    inset: 0 0 auto 0;
    height: 75vw;
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--c-bg) 35%, transparent) 0%,
      transparent 20%,
      transparent 52%,
      color-mix(in srgb, var(--c-bg) 85%, transparent) 86%,
      var(--c-bg) 100%);
  }
  .tri .tri__testo {
    padding-top: calc(75vw - 40px);
    padding-bottom: 30px;
  }
  .tri .tri__occhiello { margin-bottom: 14px; }
  .tri .tri__corpo { margin-top: 16px; }
  .tri .tri__citazione { margin-top: 22px; }

  /* griglia delle problematiche: stesse 2 colonne, stesse linee, solo
     riquadri più compatti. Le spaziature laterali si toccano solo sul
     lato interno, per non annullare l'allineamento a filo dei bordi. */
  .tri .tri__voce {
    padding-top: 14px;
    padding-bottom: 16px;
  }
  .tri .tri__voce:nth-child(odd)  { padding-right: 12px; }
  .tri .tri__voce:nth-child(even) { padding-left: 12px; }
  .tri .tri__rombo { width: 7px; height: 7px; }
  .tri .tri__num { margin-top: 10px; font-size: 1.1rem; }
  .tri .tri__nome { margin-top: 5px; font-size: 15px; line-height: 1.4; }

  .tri .tri__approccio {
    margin-top: 26px;
    padding: 18px 18px 20px;
    gap: 12px;
  }
  .tri .tri__sigillo { width: 34px; height: 34px; }
  .tri .tri__sigillo i { width: 10px; height: 10px; }
  .tri .tri__nota { margin-top: 16px; margin-bottom: 36px; }

  /* ---------------------------------------------------------
     PRIMA E DOPO — su telefono la composizione simmetrica del desktop
     (video, foto, video affiancati) non regge: le celle si stringono e
     le etichette, che sul desktop sono fuori flusso per allinearsi ai
     bordi della foto, finiscono sopra l'elemento successivo.
     Qui tutto torna in colonna singola, centrato sull'asse, e ogni
     etichetta riprende il suo posto nel flusso sotto il proprio video.
     --------------------------------------------------------- */
  /* basta uno stacco breve dal titolo; sotto la testata dei lavori
     ancora meno, perché "Prima e dopo" ne è il sottotitolo */
  .cfr { padding-top: clamp(1.5rem, 5vh, 2.5rem); }
  .lvr + .cfr { padding-top: clamp(.8rem, 2vh, 1.2rem); }

  .cfr .cfr__riga {
    /* Due colonne: il confronto le occupa entrambe, i due video se ne
       prendono una ciascuna e stanno affiancati. Rimpiccioliti e
       sfalsati in verticale, così la coppia compone invece di
       impilarsi — la simmetria resta, l'asse è quello della foto. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
    align-items: start;
    column-gap: clamp(.8rem, 3vw, 1.2rem);
    row-gap: clamp(1.6rem, 5vh, 2.4rem);
    /* sul desktop c'è uno spazio riservato all'etichetta fuori flusso:
       qui le etichette tornano nel flusso, quindi non serve */
    padding-bottom: 0;
  }
  /* il confronto prima/dopo, a piena larghezza e per primo */
  .cfr .cfr__centro {
    order: 1;
    grid-column: 1 / -1;
    justify-self: center;
    align-self: auto;
    margin: 0;
    width: 100%;
  }
  /* i due video affiancati, uno per colonna */
  .cfr .cfr__clip--sx,
  .cfr .cfr__clip--dx {
    justify-self: center;
    align-self: start;
    margin: 0;
    width: 100%;
    max-width: 150px;
  }
  .cfr .cfr__clip--sx { order: 2; grid-column: 1; }
  .cfr .cfr__clip--dx { order: 3; grid-column: 2; }
  /* i due video partono alla stessa altezza: nessuno sfalsamento, la
     coppia è simmetrica (il margine è già azzerato dalla regola sopra) */
  /* i video restano dritti: nessuna rotazione */

  /* Le etichette tornano nel flusso: sul desktop sono in posizione
     assoluta per tenere il fondo dei video a filo con la foto, ma qui
     quell'ancoraggio non serve e le faceva accavallare. */
  .cfr .cfr__sotto--centro,
  .cfr .cfr__clip--sx .cfr__sotto,   /* stesso stacco delle altre: etichette dei video alla pari */
  .cfr .cfr__clip--dx .cfr__sotto {
    position: static;
    margin-top: clamp(.7rem, 2vh, 1rem);
  }
  /* ---------------------------------------------------------
     1 — "CONTINUA A LEGGERE"
     Il blocco viene chiuso a un'altezza che lascia vedere i primi due
     paragrafi; il resto NON è rimosso dal DOM — solo ritagliato con
     max-height e overflow, così resta leggibile ai motori di ricerca.
     Le classi le mette js/intro.js (in coda, senza toccare il resto).
     --------------------------------------------------------- */
  .js-troncato {
    position: relative;
    overflow: hidden;
    max-height: var(--js-chiuso, 15em);
    transition: max-height .45s cubic-bezier(.22, .61, .36, 1);
  }
  /* aperto: l'altezza vera la scrive il JS, così la transizione ha una
     destinazione precisa invece di un "auto" che non si può animare */
  .js-troncato.is-aperto {
    max-height: var(--js-aperto, 400em);
  }
  /* la sfumatura dice che il testo continua; sparisce da aperto */
  .js-troncato::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5.5em;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--c-bg));
    transition: opacity .3s ease;
  }
  .js-troncato.is-aperto::after { opacity: 0; }
  /* la metà sinistra dei trattamenti ha il suo fondo: la sfumatura
     deve sfumare verso QUEL colore, non verso il nero della pagina */
  .trt .js-troncato::after {
    background: linear-gradient(to bottom, transparent,
      color-mix(in srgb, var(--c-fg) 3%, var(--c-bg)));
  }

  .js-continua {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    white-space: nowrap;   /* su una riga sola, non spezzato in tre */
    margin-top: 1.1rem;
    padding: .7rem 0;
    min-height: 44px;            /* area toccabile */
    background: none;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--c-accent) 55%, transparent);
    font-family: var(--font-ui);
    font-size: .74rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c-accent);
    cursor: pointer;
  }
  .js-continua:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 4px;
  }
  /* freccia: ruota quando la sezione è aperta */
  .js-continua::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .3s ease;
  }
  .js-continua[aria-expanded="true"]::after {
    transform: translateY(1px) rotate(-135deg);
  }

  /* apertura immediata per chi ha chiesto meno animazioni */
  @media (prefers-reduced-motion: reduce) {
    .js-troncato,
    .js-troncato::after,
    .js-continua::after { transition: none; }
  }

  /* ---------------------------------------------------------
     TABLET IN VERTICALE (fino a 1080px, stessa soglia del resto)
     Da quando questo blocco copre anche i tablet, fra 700 e 1080px c'è
     molto più spazio che su un telefono. Tre soli correttivi, che su
     un telefono non cambiano nulla perché i limiti sono più larghi
     dello schermo:
     1. righe di testo entro 70 caratteri: 29–30em sui corpi (misurati:
        ~0.43em a carattere), 30em sulla fascia rivendita;
     2. nessuna immagine ingrandita oltre la sua risoluzione nativa;
     3. i blocchi a piena larghezza hanno un tetto e restano centrati.
     --------------------------------------------------------- */
  .chi .chi__bio p,
  .tri .tri__approccio p,
  .tri .tri__nota { max-width: 30em; }
  .trt .trt__testo p { max-width: 29em; }
  .fascia .fascia__testo p { max-width: 30em; }
  /* il bottone su telefono è a tutta riga: su tablet si ferma a una
     misura da bottone (sotto i 416px non cambia nulla) */
  .fascia .fascia__azione { max-width: 26rem; }

  /* trattamenti: foto e testo in una colonna centrata. A 680px la
     cornice 4:5 resta sotto la risoluzione nativa di entrambe le foto
     (nanoplastia 768×1376, ricci 1024×1536). */
  .trt .trt__palco {
    max-width: 680px;
    margin-inline: auto;
    /* il palco desktop ha align-items:start: in colonna i testi, ora più
       stretti delle foto per via del limite di riga, non riempirebbero
       la larghezza e il loro fondo resterebbe più corto della foto */
    align-items: stretch;
  }

  /* servizi: la fascia foto non supera la larghezza nativa degli scatti */
  .ovl-servizi .ovl {
    max-width: 880px;
    margin-inline: auto;
  }

  /* prima/dopo: la riga non supera la larghezza nativa del confronto
     (--cfr-max, dal contenuto), così la foto non si ingrandisce e i due
     video restano allineati sotto di lei */
  .cfr .cfr__riga {
    max-width: var(--cfr-max, 640px);
    margin-inline: auto;
  }
}