/* Contatti (giro 27, passo K). Testata, menu e piè comuni da ../lavori/lavori.css e home.css.
   Riferimento: www.antinori.it/it/experience/wine-shop-antinori-nel-chianti-classico/ misurato a 1920×959 dpr 1 e 393×695 dpr 3
   (lavoro/g27/K/ref-*.json). Solo parametri, scritti a mano. Differenze: design/differenze.md, «Giro 27 — Contatti». */
.pagina-contatti main { background: #fff; color: #000; }
.ck-nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* A. apertura bassa: foto a cover con scala fissa 1,05, stemma e titolo bianco al centro */
.ck-apertura { position: relative; z-index: 1; overflow: hidden; background: #000; height: 24.01vw; }
.ck-apertura__sfondo { position: absolute; inset: 0; z-index: 1; display: flex; background-color: var(--medio, #000); transform: scale(1.05); }
.ck-apertura__sfondo picture { display: contents; }
.ck-apertura__sfondo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* strato nero 0,43 del riferimento a 393, usato anche a 1920 per il contrasto 3:1 del titolo (accessibilità, differenze.md) */
.ck-apertura__sfondo::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .43); }
.ck-apertura__testo { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.ck-apertura__stemma { display: block; width: auto; height: 127px; }
.pagina-contatti .ck-apertura h1 { margin: 25.2px 0 8.4px; font: 400 84px/84px var(--h-serif); letter-spacing: normal; color: #fff; text-align: center; }
/* B. sezione: testo a sinistra allineato a destra, foto a destra 960×785, fondo #f7f7f7 */
.ck-sezione { position: relative; z-index: 1; display: flex; overflow: hidden; background: #f7f7f7; transition: opacity 1s ease-out; }
.ck-sezione__testo { box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-end; width: 50%; padding: 6.743vw 9.4vw 5.844vw 7.7vw; text-align: right; }
.pagina-contatti .ck-sezione h2 { width: 100%; margin: 0 0 7.5%; font: 400 34px/39.1px var(--h-serif); letter-spacing: normal; color: #000; }
.ck-sezione__corpo { width: 100%; margin: 0; font: 400 17px/28.9px var(--h-serif); color: #000; }
.pagina-contatti .ck-oro { color: #7c6c3e; text-decoration: none; }
.pagina-contatti .ck-oro:hover { text-decoration: underline; }
.ck-mappa { display: flex; align-items: center; height: 24px; margin-top: 7.5%; color: #000; text-decoration: none; }
.ck-mappa__segno { flex: none; width: 15px; height: 21px; margin: 0 0 0 4px; fill: none; stroke: currentColor; stroke-width: 1.1; }
.ck-mappa__testo { padding: 2px 0 0 10px; font: 600 11px/12.65px var(--h-sans); letter-spacing: 2px; text-transform: uppercase; }
.ck-sezione__foto { position: relative; display: flex; overflow: hidden; width: 50%; aspect-ratio: 960 / 785; background-color: var(--medio, #f7f7f7); }
.ck-sezione__foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s ease-in-out; }
.ck-sezione__foto:hover img, .ck-sezione__foto.ck-zoom img { transform: scale(1.3); transition: transform 5s ease-in-out; }
.ck-sezione__tendina { display: none; }
/* striscia «Guarda i lavori» sul bordo sinistro della foto: entra col mouse (1920) */
.ck-lavori { position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 6.15vw; background: rgba(232, 227, 222, .7); color: #000; text-decoration: none; transform: translateX(-100%); transition: transform .35s ease-in-out; }
.ck-lavori::before { content: ""; position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0); transition: background-color .8s ease; }
.ck-lavori:hover::before { background-color: rgb(233, 228, 223); }
.ck-sezione__foto:hover .ck-lavori, .ck-lavori:focus-visible { transform: translateX(-1px); transition: transform .7s ease-in-out; }
.ck-lavori__giro { position: absolute; z-index: 1; top: 50%; left: 50%; display: flex; align-items: center; white-space: nowrap; transform: translate(-50%, -50%) rotate(-90deg); }
.ck-lavori__segno { position: relative; width: 24px; height: 24px; margin-right: 5px; }
.ck-lavori__segno::before { content: ""; position: absolute; top: 50%; left: 4px; width: 16px; height: 1px; background: currentColor; transform: rotate(-58deg); }
.ck-lavori__testo { padding-top: 10px; font: 900 11px/12.65px var(--h-sans); letter-spacing: 2.5px; text-transform: uppercase; }
/* C. correlati: titolo al centro e 3 schede */
.ck-correlati { position: relative; z-index: 1; background: #fff; }
.ck-correlati__testata { padding: 100px; }
.pagina-contatti .ck-correlati h2 { margin: 0; font: 400 42px/48.3px var(--h-serif); letter-spacing: normal; color: #000; text-align: center; }
.ck-correlati__elenco { display: flex; margin: 0 0 5.65vw; padding: 0 6vw; list-style: none; }
.ck-scheda { box-sizing: border-box; display: flex; flex-direction: column; width: 33.333%; margin-left: -12px; padding: 0 44.34px; }
.ck-scheda__foto { display: block; position: relative; overflow: hidden; aspect-ratio: 1; background-color: var(--medio, #000); }
.ck-scheda__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ck-scheda__voce { margin: 34px 0 0; font: 400 21px/24.15px var(--h-serif); color: #000; }
.ck-scheda__luogo { margin: 0 0 7.5%; font: 900 10px/15px var(--h-sans); letter-spacing: 1px; text-transform: uppercase; color: #767676; }
.ck-scheda__luogo strong { font-weight: 900; color: #000; }
.ck-scheda__luogo strong::after { content: " |"; color: #767676; }
.pagina-contatti .ck-scheda__titolo { margin: 0 0 7.5%; font: 400 42px/48.3px var(--h-serif); letter-spacing: normal; color: #000; }
.ck-scheda__testo { margin: 0 0 7.5%; font: 400 17px/28.9px var(--h-serif); color: #000; }
.ck-link { position: relative; display: flex; align-items: center; align-self: flex-start; height: 40px; margin: auto 0 7.5%; font: 900 11px/12.65px var(--h-sans); letter-spacing: 2.5px; text-transform: uppercase; color: #000; text-decoration: none; }
.ck-link__segno { position: relative; width: 40px; height: 40px; margin-right: 5px; overflow: hidden; }
.ck-link__segno::before { content: ""; position: absolute; top: 50%; left: 7px; width: 26px; height: 1px; background: currentColor; transform: rotate(-58deg); }
.ck-link__testo { margin-right: 10px; }
.ck-link:hover { color: #6b5a1e; }
/* stati di partenza del movimento (solo con JavaScript) */
.ck-js .ck-sezione { opacity: 0; }
.ck-js .ck-sezione.ck-visto { opacity: 1; }
.ck-anima { transition: transform .56s ease, opacity .56s ease; }
.ck-js .ck-anima { opacity: 0; transform: rotateY(14deg) translateY(-3px); }
.ck-js .ck-anima.ck-visto { opacity: 1; transform: rotateY(0deg) translateY(0px); }
.ck-entra { transition: opacity 1.4s ease; }
.ck-js .ck-entra { opacity: 0; }
.ck-js .ck-entra.ck-visto { opacity: 1; }
@media (min-width: 1024px) {
  .ck-js .ck-sezione__tendina { display: block; position: absolute; top: 0; bottom: 0; left: 20%; width: 80%; z-index: 1; background: #f7f7f7; transition: transform 2.1s ease; }
  .ck-js .ck-visto .ck-sezione__tendina { transform: translateX(100%); }
}
@media (max-width: 1023px) {
  .ck-apertura { height: 417px; }
  .ck-apertura__sfondo { background-color: var(--medio-393, var(--medio, #000)); }
  .pagina-contatti .ck-apertura h1 { margin: 0; font-size: 50px; line-height: 50px; }
  .ck-sezione { flex-direction: column; }
  .ck-sezione__testo { width: 100%; padding: 9.726vw 9.4vw 14.147vw 11.7vw; align-items: flex-start; text-align: left; }
  .pagina-contatti .ck-sezione h2 { font-size: 27px; line-height: 29.7px; }
  .ck-sezione__corpo { line-height: 24.65px; }
  .ck-mappa { margin-top: 12.977vw; }
  .ck-sezione__foto { width: 100%; aspect-ratio: 393 / 306; }
  .ck-lavori { width: 21.5vw; }
  .ck-sezione__foto:hover:not(.ck-zoom) img { transform: none; transition: transform 1.4s ease-in-out; }
  .ck-sezione__foto.ck-zoom .ck-lavori { transform: translateX(-1px); transition: transform .7s ease-in-out; }
  .ck-sezione__foto.ck-zoom .ck-lavori::before { background-color: rgb(233, 228, 223); }
  .ck-sezione__foto.ck-zoom.ck-esce .ck-lavori { transform: translateX(-100%); transition: transform .35s ease-in-out; }
  .ck-sezione__foto.ck-zoom.ck-esce .ck-lavori::before { background-color: rgba(0, 0, 0, 0); }
  .ck-lavori__segno { width: 24px; height: 24px; }
  .ck-lavori__testo { padding-top: 10px; font-size: 9px; line-height: 10.35px; letter-spacing: 2px; }
  .ck-correlati__testata { padding: 50px; }
  .pagina-contatti .ck-correlati h2 { font-size: 28px; line-height: 30.8px; }
  .ck-correlati__elenco { display: block; margin-bottom: 22.2px; padding: 0 25px; }
  .ck-scheda { width: 343px; padding: 0 31.125px; }
  .ck-scheda__voce { margin-top: 20px; font-size: 18px; line-height: 20.7px; }
  .pagina-contatti .ck-scheda__titolo { font-size: 28px; line-height: 30.8px; }
  .ck-scheda__testo { line-height: 24.65px; }
  .ck-link { height: 24px; margin-bottom: calc(7.5% + 60px); font-size: 9px; line-height: 10.35px; letter-spacing: 2px; }
  .ck-link__segno { width: 32px; height: 24px; }
  .ck-link__segno::before { left: 5px; width: 22px; }
  .ck-link__testo { margin-top: 5px; }
}
/* movimento ridotto: solo dissolvenze di 200 ms, niente tendina, rotazione, zoom né striscia che scorre */
@media (prefers-reduced-motion: reduce) {
  .ck-sezione, .ck-entra { transition: opacity 200ms ease; }
  .ck-anima, .ck-js .ck-anima, .ck-js .ck-anima.ck-visto { transform: none; transition: opacity 200ms ease; }
  .ck-js .ck-sezione__tendina { display: none; }
  .ck-sezione__foto img, .ck-sezione__foto:hover img, .ck-sezione__foto.ck-zoom img { transform: none; transition: none; }
  .ck-lavori, .ck-sezione__foto:hover .ck-lavori, .ck-sezione__foto.ck-zoom .ck-lavori { opacity: 0; transform: translateX(-1px); transition: opacity 200ms ease; }
  .ck-sezione__foto:hover .ck-lavori, .ck-lavori:focus-visible { opacity: 1; }
  .ck-lavori::before { transition: none; }
}

/* giro 29, F3 — schede correlate: la scheda non dissolve più come un tutto; dissolvono i suoi elementi (1,4 s ease, come prima),
   il luogo grigio entra per rivelazione da sinistra (1,4 s ease) senza passare per opacità basse: a 600 ms era 4,35:1 (soglia 4,5:1). */
.ck-js .ck-scheda.ck-entra, .ck-js .ck-scheda.ck-entra.ck-visto { opacity: 1; transition: none; }
.ck-js .ck-scheda.ck-entra > * { opacity: 0; transition: opacity 1.4s ease; }
.ck-js .ck-scheda.ck-entra.ck-visto > * { opacity: 1; }
.ck-js .ck-scheda.ck-entra > .ck-scheda__luogo { opacity: 1; clip-path: inset(0 100% 0 0); transition: clip-path 1.4s ease; }
.ck-js .ck-scheda.ck-entra.ck-visto > .ck-scheda__luogo { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  .ck-js .ck-scheda.ck-entra > * { transition: opacity 200ms ease; }
  .ck-js .ck-scheda.ck-entra > .ck-scheda__luogo { transition: none; }
}
/* giro 29, F3 — sezione dei recapiti: la sezione non dissolve più come un tutto (opacity 1s ease-out); dissolvono i suoi elementi con gli stessi
   tempi e il testo grigio della mappa entra per rivelazione da sinistra: a 600 ms era 2,26:1 e 3,97:1 (soglia 4,5:1). */
.ck-js .ck-sezione, .ck-js .ck-sezione.ck-visto { opacity: 1; }
.ck-js .ck-sezione > :not(.ck-sezione__testo), .ck-js .ck-sezione__testo > :not(.ck-anima):not(.ck-mappa) { opacity: 0; transition: opacity 1s ease-out; }
.ck-js .ck-sezione.ck-visto > :not(.ck-sezione__testo), .ck-js .ck-visto .ck-sezione__testo > :not(.ck-anima):not(.ck-mappa) { opacity: 1; }
.ck-js .ck-sezione .ck-mappa { clip-path: inset(0 100% 0 0); transition: clip-path 1s ease-out; }
.ck-js .ck-sezione.ck-visto .ck-mappa { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  .ck-js .ck-sezione > :not(.ck-sezione__testo), .ck-js .ck-sezione__testo > :not(.ck-anima):not(.ck-mappa) { transition: opacity 200ms ease; }
  .ck-js .ck-sezione .ck-mappa { transition: none; }
}
/* giro 29, F1 — schede correlate a 1920: solo la prima rientra di 12 px; fra le schede lo stesso passo del riferimento (colonne 2 e 3 a +12 e +24 px) */
@media (min-width: 1024px) { .ck-scheda + .ck-scheda { margin-left: 0; } }

/* giro 30, R1 — sezione dei recapiti: titolo e testo leggibili dal primo disegno, senza ingresso; foto, tendina e mappa restano animate */
.ck-js .ck-apertura + .ck-sezione .ck-anima, .ck-js .ck-apertura + .ck-sezione .ck-anima.ck-visto { opacity: 1; transform: none; transition: none; }