/* Nania Therapy & Performance, osteopatia.html (dal 20/10/2026, stile B): solo le parti di questa pagina.
   Tono chiaro, tipografia, bottoni, intestazione, menu, passi della seduta, studi, contatti, piede ed entrate stanno
   in sito.css, caricato prima. Niente effetti legati allo scorrimento (cornici ferme, parole che si accendono):
   Lorenzo li ha visti come errori. */

/* ---------- apertura: titolo e testo in alto, sotto la foto larga dello studio e tre dati in fila ---------- */
.apertura { padding-top: calc(var(--alto-testa) + 32px); }
.apertura__griglia { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: end; }
.apertura__griglia > .occhiello { grid-column: 1 / -1; }
/* "di osteopatia" ha lo spazio unificatore: si va a capo dopo "studio", mai dopo la preposizione */
/* stessi caratteri del titolo della home (Lorenzo 20/10: "i font non sono tutti uguali come nella homepage") */
.apertura__titolo { grid-column: 1 / span 7; font-weight: 400; font-size: clamp(40px, 3.8vw, 66px); line-height: 1.03; letter-spacing: -.036em; max-width: 12em; }
.apertura__testo { grid-column: 8 / -1; padding-bottom: 4px; }
.apertura__sotto { font-size: 19px; line-height: 1.55; color: var(--muto); max-width: 30em; }
.apertura__testo .azioni { margin-top: 28px; }
.apertura__foto { grid-column: 1 / -1; margin-top: clamp(44px, 4.5vw, 72px); aspect-ratio: 1.9 / 1; overflow: hidden; border-radius: 2px; background-color: var(--fondo-2); }
.apertura__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.apertura__dati { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; margin-top: 28px; }
.apertura__dati li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 20px; border-top: 1px solid var(--riga-forte); }
.apertura__dati b { font-weight: 400; font-size: clamp(24px, 2vw, 30px); line-height: 1.15; letter-spacing: -.02em; }
.apertura__dati span, .apertura__dati a { font-size: 15px; color: var(--muto); }
.apertura__dati a { border-bottom: 1px solid var(--riga-forte); transition: color .3s, border-color .3s; }
.apertura__dati a:hover { color: var(--accento); border-color: var(--accento); }

/* ---------- 01 la seduta: i tre passi usano .passi/.passo di sito.css; il "dopo" sta su una riga sotto ---------- */
.seduta__dopo { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 32px; margin-top: clamp(56px, 6vw, 88px); padding-top: 22px; border-top: 1px solid var(--riga-forte); font-size: 19px; line-height: 1.5; color: var(--muto); }
.seduta__dopo b { font-weight: 400; font-size: clamp(24px, 2vw, 30px); letter-spacing: -.02em; line-height: 1.15; color: var(--testo); }

/* ---------- 02 i trattamenti: le voci a sinistra, la foto delle mani a destra ---------- */
.tratt { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: center; }
.tratt__testo { grid-column: 1 / span 6; }
.tratt__voci { margin-top: 40px; border-top: 1px solid var(--riga-forte); }
.tratt__voci li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px 28px; padding: 22px 0 24px; border-bottom: 1px solid var(--riga); }
.tratt__voci h3 { font-size: clamp(24px, 2vw, 30px); font-weight: 400; letter-spacing: -.02em; line-height: 1.15; }
.tratt__voci p { color: var(--muto); font-size: 17px; line-height: 1.5; }
.tratt__foto { grid-column: 8 / -1; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background-color: var(--fondo-2); }
.tratt__foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 03 l'approccio: la frase grande, poi il testo e la porta verso il pugilato ---------- */
.approccio__frase { font-weight: 400; font-size: clamp(34px, 3.4vw, 56px); line-height: 1.06; letter-spacing: -.032em; max-width: 20em; }
.approccio__piede { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: end; margin-top: clamp(56px, 6vw, 96px); }
.approccio__piede .sez__testo { grid-column: 1 / span 5; margin-top: 0; }
.approccio__porta { grid-column: 7 / -1; }
/* la porta: al passaggio si riempie dal basso del nero di Black Corner, la freccia diventa ambra (come pugilato.html) */
.approccio__porta a { --nero: #0a0a0a; --chiaro: #f3efe9; --chiaro-muto: #a39d94; --ambra: #f2a541; position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 22px 26px; border-top: 1px solid var(--riga-forte); border-bottom: 1px solid var(--riga-forte); font-size: clamp(22px, 1.9vw, 30px); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; transition: color .45s var(--out), border-color .45s var(--out); }
.approccio__porta small { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--muto); transition: color .45s var(--out); }
.approccio__porta a::before { content: ''; position: absolute; inset: -1px 0; z-index: -1; background-color: var(--nero); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease); }
.approccio__porta .freccia { width: 26px; height: auto; aspect-ratio: 20 / 12; transition: transform .5s var(--out), color .45s; }
@media (hover: hover) {
  .approccio__porta a:hover { color: var(--chiaro); border-color: var(--nero); }
  .approccio__porta a:hover small { color: var(--chiaro-muto); }
  .approccio__porta a:hover::before { transform: none; }
  .approccio__porta a:hover .freccia { color: var(--ambra); transform: translateX(8px); }
}
.approccio__porta a:focus-visible { color: var(--chiaro); border-color: var(--nero); }
.approccio__porta a:focus-visible small { color: var(--chiaro-muto); }
.approccio__porta a:focus-visible::before { transform: none; }
.approccio__porta a:focus-visible .freccia { color: var(--ambra); }

/* ---------- tablet ---------- */
@media (max-width: 1023px) {
  .apertura__titolo, .apertura__testo { grid-column: 1 / -1; }
  .apertura__testo { margin-top: 28px; max-width: 640px; }
  .apertura__foto { aspect-ratio: 16 / 10; }
  .tratt__testo { grid-column: 1 / span 7; }
  .tratt__foto { grid-column: 9 / -1; }
  .approccio__piede .sez__testo, .approccio__porta { grid-column: 1 / -1; }
  .approccio__porta { margin-top: 36px; }
}

/* ---------- telefono: le foto vanno sotto il testo ---------- */
@media (max-width: 759px) {
  .apertura__griglia, .approccio__piede, .tratt { display: block; }
  .apertura__titolo { font-size: clamp(34px, 9.4vw, 44px); }
  .apertura__testo { margin-top: 22px; }
  .apertura__sotto { font-size: 17px; }
  .apertura__foto { margin-top: 40px; aspect-ratio: 1 / 1; }
  .apertura__foto img { object-position: 52% 50%; }
  /* i tre dati in righe: valore a sinistra, nota a destra */
  .apertura__dati { display: block; margin-top: 10px; }
  .apertura__dati li { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px; padding: 15px 0 16px; border-top: 0; border-bottom: 1px solid var(--riga); }
  .apertura__dati b { font-size: 21px; }
  .apertura__dati span, .apertura__dati a { font-size: 14.5px; }

  .seduta__dopo { display: block; margin-top: 56px; font-size: 17px; }
  .seduta__dopo b { display: block; margin-bottom: 8px; font-size: 24px; }

  .tratt__voci li { grid-template-columns: 1fr; }
  .tratt__voci p { font-size: 16px; }
  .tratt__foto { margin-top: 44px; }

  .approccio__frase { font-size: clamp(31px, 8.6vw, 40px); line-height: 1.1; }
  .approccio__piede { margin-top: 36px; }
  .approccio__porta { margin-top: 32px; }
  .approccio__porta a { padding: 20px 0 22px; font-size: 21px; }
}