/* Pagine interne (chi sono, come lavoro, domande frequenti, contatti) — 03/10/2026, 21:30.
   Sui componenti della HOME, chiara di base (lo scuro col pulsante della testata): hero, studio + collage, metodo coi passi,
   panorama, info, fisarmonica, piede. Qui solo le varianti delle pagine interne; il resto è style.css.
   Regole: colori SOLO coi token semantici di style.css; decori mai sopra un testo (≥ 12 px); movimento solo quello della home. */

/* =====================================================================
   APERTURA — la hero della home con una foto sola (render o lavoro vero), più bassa, testo centrato
   ===================================================================== */
.hero--pg { height: 76vh; height: 76svh; min-height: 560px; max-height: 720px; }
.hero--pg .hero__content { bottom: 104px; }
.hero--pg .hero__title { font-size: clamp(31px, 8.6vw, 36px); }
.hero--pg .hero__sub { max-width: 34ch; }
/* occhiello centrato, coi filetti ai due lati */
.hero__eyebrow { justify-content: center; margin-bottom: 14px; text-shadow: 0 1px 10px rgb(0 0 0 / 45%); }
.hero__eyebrow::after { content: ""; flex: none; width: max(24px, calc(var(--u) * 24)); height: 1px; background: currentColor; }

/* decori della hero: al telefono in basso, metà dentro e metà fuori dal bordo della foto */
.dp-hero-dx { right: -24px; bottom: -34px; width: 104px; z-index: 7; }
.dp-hero-sx { left: -14px; bottom: -28px; width: 46px; z-index: 7; }
.dp-hero-palma { left: -26px; bottom: -30px; width: 84px; z-index: 7; }

/* =====================================================================
   GALLERIA dei lavori realizzati (il collage che era nella home), su velo
   ===================================================================== */
.galleria { position: relative; padding: 52px 0 56px; background: var(--velo); }
.galleria::before, .galleria::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }
.galleria::before { top: 0; }
.galleria::after { bottom: 0; }
.galleria__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.galleria .tile { aspect-ratio: 3 / 4; }
.galleria__nota { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 14px;
  font-size: 14px; font-weight: 600; color: var(--text-soft); }
.galleria__nota .i { width: 16px; height: 16px; }

/* =====================================================================
   METODO rovesciato (testo a sinistra, cornice a destra) e testo corrente dentro .metodo__text
   ===================================================================== */
.pg-testo { margin-top: 16px; }
.pg-testo p + p { margin-top: .7em; }
.dp-frame-sx { left: calc(-48px - var(--gut)); bottom: -36px; width: 150px; }
.dp-frame-dx { right: calc(-30px - var(--gut)); bottom: -40px; width: 112px; }
.dp-frame-dx.dp-piante { right: -12px; bottom: -44px; width: 50px; }

/* =====================================================================
   COLLAGE A 4 TESSERE (il metodo · il progetto): telefono 1 alta a destra + 3 a sinistra
   ===================================================================== */
.c4 { position: relative; z-index: 2; margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 116px) auto; gap: 8px; }
.c4-a { grid-column: 1; grid-row: 1; }
.c4-b { grid-column: 1; grid-row: 2; }
.c4-c { grid-column: 1; grid-row: 3; }
.c4-d { grid-column: 2; grid-row: 1 / span 3; }
.c4-d img { object-position: 50% 60%; }
.c4__nota { grid-column: 1 / -1; justify-self: end; display: flex; align-items: center; gap: 8px; margin-top: 6px;
  font-size: 14px; font-weight: 600; color: var(--text-soft); }
.c4__nota .i { width: 16px; height: 16px; }
.studio__seal.c4__seal { left: calc(50% - 28px); top: 262px; width: 56px; height: 56px; }

/* =====================================================================
   INFO a 4 voci (2 righe)
   ===================================================================== */

/* =====================================================================
   FISARMONICA: occhiello e titolo nella colonna di sinistra; pianta a tratto al posto del monogramma
   ===================================================================== */
.faq__testa { position: relative; }
.faq__testa .eyebrow { margin-bottom: 10px; }
.faq--pianta .faq__pianta { left: auto; right: 0; top: 4px; bottom: auto; width: 80px; }

/* =====================================================================
   PANORAMA con più testo: al telefono più alto e col velo che sale
   ===================================================================== */
.panorama--testo { height: 580px; }
.panorama--testo .panorama__win::after {
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--bg) 22%, transparent) 22%,
    color-mix(in srgb, var(--bg) 74%, transparent) 46%, color-mix(in srgb, var(--bg) 92%, transparent) 100%); }
.panorama__line + .panorama__line { margin-top: 6px; }
.studio__body p + p { margin-top: .7em; }
/* velo più deciso dietro al testo anche nei panorami a una riga sopra render chiari o carichi */
.panorama--velo .panorama__win::after {
  background: linear-gradient(180deg, transparent 0%, transparent 28%, color-mix(in srgb, var(--bg) 62%, transparent) 54%, color-mix(in srgb, var(--bg) 92%, transparent) 100%); }
.dp-pano-dx { right: -10px; bottom: -32px; width: 50px; }
.dp-pano-rovere { right: -28px; bottom: -30px; width: 118px; }

/* =====================================================================
   RECAPITI (contatti): i 4 dati della home, su velo
   ===================================================================== */
.dati { position: relative; padding: 48px 0 30px; background: var(--velo); }
.dati::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
.dati .facts { margin-top: 0; }
.dati .facts strong { font-size: 23px; }
.dati .dato { display: block; min-height: 44px; }
.dati .dato strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
  text-decoration-color: var(--line-strong); transition: text-decoration-color .25s var(--o); }
.dati .dato span { overflow-wrap: anywhere; }

@media (max-width: 374px) {
  .dati .facts strong { font-size: 20px; }
}

/* =====================================================================
   TABLET (≥ 768 px)
   ===================================================================== */
@media (min-width: 768px) {
  .hero--pg { height: 78vh; height: 78svh; min-height: 600px; max-height: 780px; }
  .hero--pg .hero__content { bottom: 112px; }
  .hero--pg .hero__title { font-size: 46px; }
  .dp-hero-dx { right: -20px; bottom: -40px; width: 140px; }
  .dp-hero-sx { left: -10px; bottom: -44px; width: 64px; }
  .dp-hero-palma { left: -30px; bottom: -40px; width: 120px; }

  .galleria__grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }

  .dp-frame-sx { left: calc(-65px - var(--gut)); bottom: -49px; width: 203px; }
  .dp-frame-dx { right: calc(-30px - var(--gut)); bottom: -48px; width: 140px; }
  .dp-frame-dx.dp-piante { right: -14px; bottom: -52px; width: 62px; }

  .c4 { grid-template-rows: repeat(3, 150px) auto; gap: 10px; }
  .studio__seal.c4__seal { left: calc(50% - 32px); top: 326px; width: 64px; height: 64px; }

  .info--4 .info__grid { row-gap: 44px; }
  .info--4 .info__item:nth-child(3)::before { display: none; }
  .info--4 .info__item:nth-child(n+3)::after { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 1px; background: var(--line); }

  .faq--pianta .faq__pianta { width: 120px; }

  .panorama--testo { height: 600px; }
  .dp-pano-dx { right: -8px; width: 62px; }
  .dp-pano-rovere { right: -40px; width: 170px; }

  .dati .facts { max-width: none; }
}

/* =====================================================================
   COMPUTER (≥ 1024 px): stesse misure in u della home
   ===================================================================== */
@media (min-width: 1024px) {
  .hero--pg { height: 84vh; height: 84svh; min-height: 600px; max-height: 940px; }
  .hero--pg .hero__content { left: calc(var(--u) * 120); right: calc(var(--u) * 120); bottom: max(96px, calc(var(--u) * 54)); }
  .hero--pg .hero__title { font-size: clamp(46px, calc(var(--u) * 29), 60px); }
  .hero--pg .hero__sub { max-width: calc(var(--u) * 340); }
  .hero__eyebrow { margin-bottom: calc(var(--u) * 9); }
  .hero--pg .hero__nota { top: auto; right: calc(var(--u) * 34); bottom: calc(var(--u) * 22); }
  /* decori della hero: in basso a sinistra, fuori dalla colonna del testo */
  .dp-hero-dx { left: calc(var(--u) * 34); right: auto; bottom: calc(var(--u) * -10); width: calc(var(--u) * 104); }
  .dp-hero-sx { left: calc(var(--u) * 44); right: auto; bottom: calc(var(--u) * -14); width: calc(var(--u) * 50); }
  .dp-hero-palma { left: calc(var(--u) * 26); bottom: calc(var(--u) * -16); width: calc(var(--u) * 96); }

  .galleria { padding: calc(var(--u) * 30) 0 calc(var(--u) * 32); }
  .galleria__in.col-u { padding-inline: calc(var(--u) * 36); }
  .galleria__grid { grid-template-columns: repeat(6, 1fr); gap: calc(var(--u) * 8); align-items: start; }
  /* le tessere della home, da computer, sono assolute nel collage: qui stanno nella griglia */
  .galleria .tile, .c4 .tile { position: relative; }
  .galleria .tile { aspect-ratio: 5 / 8; border-radius: calc(var(--u) * 8); }
  .galleria .tile:nth-child(even) { margin-top: calc(var(--u) * 24); }
  .galleria .tile figcaption { left: calc(var(--u) * 7); bottom: calc(var(--u) * 7); padding: calc(var(--u) * 3) calc(var(--u) * 7); font-size: max(13.5px, calc(var(--u) * 7.6)); }
  .galleria__nota { margin-top: calc(var(--u) * 6); font-size: max(14px, calc(var(--u) * 8)); }

  .metodo--rev { grid-template-columns: 1fr calc(var(--u) * 430); padding: calc(var(--u) * 34) calc(var(--u) * 25) calc(var(--u) * 34) calc(var(--u) * 36); }
  .metodo--rev .metodo__media { order: 2; }
  .metodo--rev .metodo__text { order: 1; }
  .pg-testo { margin-top: calc(var(--u) * 12); max-width: calc(var(--u) * 250); }
  .dp-frame-sx { left: calc(var(--u) * -70); top: auto; bottom: calc(var(--u) * -30); width: calc(var(--u) * 170); }
  .dp-frame-dx { right: calc(var(--u) * -18); bottom: calc(var(--u) * -32); width: calc(var(--u) * 88); }
  .dp-frame-dx.dp-piante { right: calc(var(--u) * -14); bottom: calc(var(--u) * -30); width: calc(var(--u) * 44); }

  .c4 { margin-top: calc(var(--u) * 6); grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, calc(var(--u) * 150)) auto; gap: calc(var(--u) * 8); }
  .c4-a { grid-column: 1 / 3; grid-row: 1; }
  .c4-b { grid-column: 1; grid-row: 2; }
  .c4-c { grid-column: 2; grid-row: 2; }
  .c4-d { grid-column: 3; grid-row: 1 / 3; }
  .c4 .tile { border-radius: calc(var(--u) * 8); }
  .c4 .tile figcaption { left: calc(var(--u) * 7); bottom: calc(var(--u) * 7); padding: calc(var(--u) * 3) calc(var(--u) * 7); font-size: max(13.5px, calc(var(--u) * 7.6)); }
  .c4__nota { margin-top: calc(var(--u) * 6); font-size: max(14px, calc(var(--u) * 8)); }
  .studio__seal.c4__seal { left: calc(66.67% - var(--u) * 32); top: calc(var(--u) * 122); width: calc(var(--u) * 64); height: calc(var(--u) * 64); }

  .info--4 .info__grid { row-gap: calc(var(--u) * 28); }
  .info--4 .info__item:nth-child(n+3)::after { top: calc(var(--u) * -14); }

  .faq__testa .eyebrow { margin-bottom: calc(var(--u) * 6); }
  .faq__in { min-height: calc(var(--u) * 210); }
  .faq__mono { top: calc(var(--u) * 78); width: calc(var(--u) * 150); height: auto; }   /* logo intero a tratto (680×480) */
  .faq--pianta .faq__pianta { left: 0; right: auto; top: calc(var(--u) * 70); width: calc(var(--u) * 130); }
  .faq__testa .faq__piu { margin-top: calc(var(--u) * 10); }

  .panorama--testo { height: calc(var(--u) * 330); }
  .panorama--testo .panorama__win::after {
    background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 82%, transparent) 0%, color-mix(in srgb, var(--bg) 58%, transparent) 38%, transparent 66%),
      linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--bg) 60%, transparent) 100%); }
  .panorama--testo .panorama__text { max-width: calc(var(--u) * 330); }
  .panorama--velo .panorama__win::after {
    background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 72%, transparent) 0%, color-mix(in srgb, var(--bg) 40%, transparent) 36%, transparent 62%),
      linear-gradient(180deg, transparent 36%, color-mix(in srgb, var(--bg) 66%, transparent) 100%); }
  .dp-pano-dx { right: calc(var(--u) * 44); bottom: calc(var(--u) * -26); width: calc(var(--u) * 52); }
  .dp-pano-rovere { right: calc(var(--u) * 26); bottom: calc(var(--u) * -28); width: calc(var(--u) * 150); }

  .dati { padding: calc(var(--u) * 34) 0 calc(var(--u) * 22); }
  .dati__in.col-u { padding-inline: calc(var(--u) * 36); }
  .dati .facts { grid-template-columns: repeat(4, 1fr); column-gap: calc(var(--u) * 30); row-gap: 0; }
  .dati .facts li::after { display: none; }
  .dati .facts li + li::before { content: ""; position: absolute; left: calc(var(--u) * -15); top: calc(var(--u) * 2); bottom: calc(var(--u) * 9); width: 1px; background: var(--line); transform-origin: top; }
  .dati .facts strong { font-size: calc(var(--u) * 17); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .dp-hero-dx { width: calc(var(--u) * 90); }
}

/* movimento: solo quello della home (occhiello della hero come gli altri; i dati come i fatti) */
html.mo .dati .facts:not(.in) li + li::before { transform: scaleY(0); }
@media (hover: hover) {
  .dati .dato:hover strong { text-decoration-color: currentColor; }
}
.dati .dato:focus-visible strong { text-decoration-color: currentColor; }

/* fisarmonica senza logo (faq--pianta): al telefono non serve lo spazio del logo in fondo */
@media (max-width: 1023px) { .faq--pianta .faq__in { padding-bottom: 56px; } }
@media (max-width: 479px) { .panorama--testo .panorama__text { right: var(--gut); } }   /* la pianta del decoro sta sotto, accanto al pulsante: il testo usa tutta la riga (max 3 righe) */