/* Working Holiday & Internship. Stessa grafica della Ranch Week (colori,
   caratteri, movimento legato allo scroll) ma componenti suoi: la' il filo
   e' la corda, qui il ferro di cavallo. Tutto sotto .ix. Dove manca
   animation-timeline (Firefox) la pagina resta ferma e completa. */

.ix {
  --sp-s: 16px;
  --sp-m: 28px;
  --sp-l: 48px;
  --sp-xl: 80px;
  --sp-2xl: 140px;
  --arancio: var(--ranch, #b35a24);
  /* colore del programma: arancione l'Internship, blu il Working Holiday */
  --accento: var(--arancio);
  --notte: var(--midnight-blue, #152e44);
  --bordo: var(--gainsboro, #e2e2e2);
  --chiaro: #f5f5f5;
  --grigio: #6c7580;
  --cuoio: #4a2c19;
  --notte-scura: #0b1826;
  --largo: 1180px;
  --margine: max(var(--sp-l), calc((100% - var(--largo)) / 2));
  /* lo stesso margine in vw, per allineare al testo cio' che arriva ai bordi dello schermo */
  --margine-vw: max(var(--sp-l), calc(50vw - var(--largo) / 2));
  overflow-x: clip;
}

.ix *,
.ix *::before,
.ix *::after { box-sizing: border-box; }

.ix img { display: block; max-width: 100%; }
.ix figure { margin: 0; }
.ix-sprite { display: none; }

/* --- tipografia e bottoni --- */
.ix-kicker {
  margin: 0 0 var(--sp-s);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accento);
}

.ix-h2 {
  margin: 0 0 var(--sp-m);
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -1px;
  text-transform: uppercase;
  color: var(--notte);
}

.ix-testo p { margin: 0 0 var(--sp-s); font-size: 18px; line-height: 1.6; }

.ix-btn {
  --btn: var(--arancio);
  display: inline-block;
  padding: 18px 36px;
  border: 2px solid var(--btn);
  background-color: var(--btn);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s, color .25s;
}

.ix-btn:hover { background-color: transparent; color: var(--btn); }

/* Variante blu, per distinguere il secondo programma nell'apertura. */
.ix-btn.notte { --btn: var(--notte); }

.ix-section { position: relative; isolation: isolate; padding: var(--sp-2xl) var(--margine); }
.ix-section.chiaro { background-color: var(--chiaro); }

/* Due colonne: a sinistra il titolo che resta fermo, a destra il contenuto. */
.ix-due {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-xl);
  align-items: start;
}

.ix-due > .ix-ferma { position: sticky; top: 120px; }
.ix-due.ix-centro { align-items: center; }

/* --- apertura: fondo chiaro, testo scuro, foto che scorrono in colonna --- */
.ix-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100svh;
  background-color: var(--chiaro);
}

.ix-hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 140px var(--sp-l) var(--sp-xl) var(--margine);
}

.ix-ferro {
  width: 64px;
  height: 70px;
  margin-bottom: var(--sp-m);
  overflow: visible;
  fill: none;
  stroke: var(--arancio);
  stroke-width: 12;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ix-disegna 1.4s .6s cubic-bezier(.6,0,.2,1) forwards;
}

@keyframes ix-disegna { to { stroke-dashoffset: 0; } }

.ix-title {
  margin: 0 0 var(--sp-m);
  font-size: clamp(40px, 5.4vw, 88px);
  line-height: .95;
  font-weight: 800;
  letter-spacing: -2px;
  text-transform: uppercase;
  color: var(--notte);
}

/* Ogni riga sale da sotto una maschera, una dopo l'altra. */
.ix-title > span { display: block; overflow: hidden; }
.ix-title > span > span { display: block; animation: ix-riga .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--r) * .12s); }
.ix-title em { font-style: normal; color: var(--arancio); }

@keyframes ix-riga { from { transform: translateY(105%); } }

.ix-claim {
  max-width: 26ch;
  margin: 0 0 var(--sp-l);
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.4;
  font-weight: 300;
  color: var(--notte);
}

.ix-actions { display: flex; flex-wrap: wrap; gap: var(--sp-s); }

.ix-hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-s) var(--sp-l);
  margin: var(--sp-xl) 0 0;
  padding: var(--sp-m) 0 0;
  border-top: 1px solid var(--bordo);
  list-style: none;
}

.ix-hero-facts li { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--grigio); }
.ix-hero-facts b { display: block; font-size: 34px; line-height: 1.1; font-weight: 800; letter-spacing: 0; color: var(--notte); }

/* contain: size, cosi' le colonne lunghe non allungano l'apertura. */
.ix-reel {
  position: relative;
  contain: size;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  overflow: hidden;
}

.ix-reel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, var(--chiaro), transparent 18%, transparent 82%, var(--chiaro));
  pointer-events: none;
}

/* Ogni colonna contiene le sue foto due volte: a -50% il giro ricomincia identico. */
.ix-reel-col { margin: 0; padding: 0; list-style: none; animation: ix-scorri 48s linear infinite; }
.ix-reel-col + .ix-reel-col { animation-direction: reverse; }
.ix-reel li { padding-bottom: 12px; }
.ix-reel img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.ix-reel:hover .ix-reel-col { animation-play-state: paused; }

@keyframes ix-scorri { to { transform: translateY(-50%); } }

/* --- intro --- */
.ix-big {
  margin: 0 0 var(--sp-l);
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--notte);
}

/* Evidenziatore: la striscia arancione passa sotto le parole mentre le leggi. */
.ix mark {
  padding: 0 .04em;
  background: linear-gradient(var(--arancio), var(--arancio)) 0 90% / 100% .26em no-repeat;
  color: inherit;
}

/* --- i due programmi sono due capitoli, ognuno col suo colore --- */
.ix-capitolo.wh,
.ix-programma.wh { --accento: var(--notte); }

/* Barra ferma sotto il menu del sito (alto 68-69px), solo dentro il suo capitolo. */
.ix-segnalibro {
  position: sticky;
  top: 68px;
  z-index: 15;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-s);
  margin: 0;
  padding: 12px var(--margine);
  background-color: var(--accento);
  color: #fff;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Il blu del Working Holiday e' lo stesso del menu: piu' scuro, la barra se ne stacca. */
.ix-capitolo.wh .ix-segnalibro { background-color: var(--notte-scura); }
.ix-segnalibro a { color: #fff; opacity: .8; }
.ix-segnalibro a:hover { opacity: 1; }

/* I due programmi: una fascia da bordo a bordo, meta' per colore. Ogni meta' porta al suo capitolo. */
.ix-testata { padding-bottom: var(--sp-l); }
.ix-programmi { display: grid; grid-template-columns: 1fr 1fr; }

.ix-programma {
  display: flex;
  flex-direction: column;
  padding: var(--sp-xl) var(--sp-l);
  background-color: var(--accento);
  color: #fff;
  text-decoration: none;
}

.ix-programma:first-child { padding-left: var(--margine-vw); }
.ix-programma:last-child { padding-right: var(--margine-vw); }
.ix-programma .ix-kicker { color: #fff; opacity: .75; }
.ix-programma h3 { margin: 0 0 var(--sp-s); font-size: clamp(26px, 2.8vw, 40px); line-height: 1.05; font-weight: 800; letter-spacing: -.5px; text-transform: uppercase; color: #fff; }
.ix-programma p { margin: 0; font-size: 17px; line-height: 1.6; opacity: .9; }
.ix-programma dl { flex-grow: 1; align-content: flex-start; }
/* Il "bottone" della card: bianco col testo del colore del programma, si svuota in hover. */
.ix-vai {
  align-self: flex-start;
  margin-top: var(--sp-m);
  padding: 16px 28px;
  border: 2px solid #fff;
  background-color: #fff;
  color: var(--accento);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: background-color .25s, color .25s;
}

.ix-programma:hover .ix-vai { background-color: transparent; color: #fff; }

/* La carta che apre il capitolo, da bordo a bordo: foto, presentazione e candidatura. */
.ix-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* alta quanto lo schermo, meno il menu (68px) e la barra del capitolo (49px) */
  min-height: calc(100svh - 117px);
  overflow: hidden;
  background-color: var(--accento);
  color: #fff;
}

/* la foto riempie la meta' della carta senza deciderne l'altezza */
.ix-card-foto { position: relative; }
.ix-card-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.ix-card-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-xl) var(--margine-vw) var(--sp-xl) var(--sp-xl);
}


.ix-card h2 {
  margin: var(--sp-s) 0;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.5px;
  text-transform: uppercase;
  color: #fff;
}

.ix-card p:not([class]) { margin: 0 0 var(--sp-s); font-size: 17px; line-height: 1.6; opacity: .9; }
/* durata e prezzo, in evidenza: cosi' si capisce subito chi paga */
.ix-card .ix-card-dati { margin: var(--sp-s) 0 0; padding-top: var(--sp-s); border-top: 1px solid rgba(255,255,255,.25); font-size: 18px; font-weight: 700; }

.ix-programma dl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-s) var(--sp-l);
  margin: var(--sp-s) 0 0;
  padding: var(--sp-s) 0;
  border-top: 1px solid rgba(255,255,255,.25);
  border-bottom: 1px solid rgba(255,255,255,.25);
}

.ix-programma dt { margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; opacity: .7; }
.ix-programma dd { margin: 0; font-size: 17px; font-weight: 700; }
/* Bottone bianco: sulla carta arancione quello arancione sparirebbe. */
.ix-card .ix-btn { --btn: #fff; align-self: flex-start; margin-top: var(--sp-m); color: var(--accento); }
.ix-card .ix-btn:hover { color: #fff; }


/* --- le opportunita': una fila di foto che scorre di lato, una voce per foto --- */
.ix-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 27%);
  gap: var(--sp-m);
  /* esce a destra fino al bordo dello schermo, a sinistra resta allineata al testo */
  margin: var(--sp-l) calc(-1 * var(--margine-vw)) 0 0;
  padding: 0 var(--margine-vw) var(--sp-s) 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.ix-strip li { scroll-snap-align: start; }
/* Trascinabile col mouse: durante la presa niente aggancio, che tirerebbe indietro la fila. */
.ix-strip { cursor: grab; }
.ix-strip.trascina { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.ix-strip img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.ix-strip p { margin: 14px 0 0; font-size: 17px; line-height: 1.4; font-weight: 600; color: var(--notte); }

.ix-frecce { display: flex; justify-content: flex-end; gap: 10px; margin-top: var(--sp-m); }

.ix-frecce button {
  width: 52px;
  height: 52px;
  border: 2px solid var(--notte);
  border-radius: 50%;
  background-color: transparent;
  color: var(--notte);
  font-size: 20px;
  cursor: pointer;
  transition: background-color .25s, color .25s;
}

.ix-frecce button:hover { background-color: var(--notte); color: #fff; }

/* --- la vita al ranch: quattro dati su foto ferma --- */
.ix-vita {
  padding: var(--sp-2xl) var(--margine);
  background: linear-gradient(rgba(21,46,68,.88), rgba(21,46,68,.88)), url('../images/_FRI2384.jpg') 50% 50% / cover fixed;
  color: #fff;
}

.ix-vita .ix-h2 { color: #fff; }
.ix-vita .ix-testo { columns: 2; column-gap: var(--sp-xl); margin-top: var(--sp-l); }
.ix-vita .ix-testo p { break-inside: avoid; font-size: 21px; line-height: 1.55; font-weight: 400; }

/* --- citazione --- */
.ix-quote { max-width: 980px; margin: 0 auto; text-align: center; }

.ix-quote blockquote {
  margin: 0 0 var(--sp-l);
  padding: 0;
  border: 0;
  font-size: clamp(30px, 4.6vw, 62px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--notte);
}

.ix-quote p { max-width: 62ch; margin: 0 auto; font-size: 17px; line-height: 1.7; color: var(--grigio); }

/* --- icone a tratto sopra i titoli: si disegnano quando entrano nello schermo --- */
.ix-icona {
  display: block;
  width: 52px;
  height: 52px;
  margin-bottom: var(--sp-s);
  overflow: visible;
  fill: none;
  stroke: var(--accento);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ix-icona path { stroke-dasharray: 1; }
.ix-programma .ix-icona { width: 64px; height: 64px; stroke: #fff; }
.ix-vita .ix-icona,
.ix-scuro .ix-icona { stroke: #fff; }

/* --- liste a spunta: la spunta si disegna quando la riga entra --- */
.ix-check { margin: 0; padding: 0; list-style: none; }

.ix-check li {
  display: flex;
  align-items: center;
  gap: var(--sp-s);
  padding: 14px 0;
  border-bottom: 1px solid var(--bordo);
  font-size: 18px;
  line-height: 1.4;
  color: var(--notte);
}

.ix-check svg {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 50%;
  background-color: var(--accento);
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ix-check.no svg { background-color: var(--bordo); stroke: var(--grigio); }
.ix-titoletto { margin: 0 0 var(--sp-s); font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--notte); }

/* --- foto o video accanto al testo, fermi mentre si scorre --- */
.ix-media { overflow: hidden; aspect-ratio: 4 / 5; }
.ix-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* justify-self: stretch, perche' con aspect-ratio la cella non si allarga da sola;
   due classi, per battere .ix figure { margin: 0 } */
.ix-media.ix-al-bordo { justify-self: stretch; aspect-ratio: 5 / 4; max-height: 80vh; margin-right: calc(-1 * var(--margine-vw)); }

/* --- sezione scura con un video di sfondo e il testo sopra --- */
.ix-scuro { display: flex; align-items: center; min-height: 90vh; background-color: var(--notte); color: #fff; }
.ix-scuro > div { max-width: 600px; }
.ix-sfondo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }

.ix-scuro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(90deg, rgba(21,46,68,.94) 0%, rgba(21,46,68,.8) 45%, rgba(21,46,68,.15) 100%);
}

.ix-scuro .ix-kicker { color: #fff; opacity: .7; }
.ix-scuro .ix-h2,
.ix-scuro .ix-trail li,
.ix-scuro .ix-apri summary { color: #fff; }
.ix-scuro .ix-apri { border-color: rgba(255,255,255,.25); }
.ix-scuro .ix-nota { color: rgba(255,255,255,.75); }
.ix-scuro .ix-trail li::before { background-color: var(--notte); }

/* Dettagli a richiesta: il testo del PDF resta tutto, si apre con un clic. */
.ix-apri { margin-top: var(--sp-m); border-top: 1px solid var(--bordo); border-bottom: 1px solid var(--bordo); }
.ix-apri + .ix-apri { margin-top: 0; border-top: 0; }
.ix-apri[open] { padding-bottom: var(--sp-m); }

.ix-apri summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  list-style: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--notte);
  cursor: pointer;
}

.ix-apri summary::-webkit-details-marker { display: none; }
.ix-apri summary::after { content: "+"; font-size: 30px; font-weight: 300; line-height: 1; color: var(--accento); transition: rotate .25s; }
.ix-apri[open] summary::after { rotate: 45deg; }
.ix-apri summary:hover { color: var(--accento); }

/* --- il sentiero: una linea che cresce scendendo, una tappa per voce --- */
.ix-trail { position: relative; isolation: isolate; margin: 0; padding: 0 0 0 52px; list-style: none; }

.ix-trail::before,
.ix-trail::after {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 11px;
  width: 3px;
  z-index: -1;
  background-color: var(--bordo);
}

.ix-trail::after { background-color: var(--accento); transform-origin: top; }

.ix-trail li {
  position: relative;
  padding: 14px 0;
  font-size: 19px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--notte);
}

.ix-trail li::before {
  content: "";
  position: absolute;
  top: 15px;
  left: -52px;
  width: 25px;
  height: 25px;
  border: 5px solid var(--accento);
  border-radius: 50%;
  background-color: #fff;
}

.ix-nota { margin: var(--sp-l) 0 0; font-size: 15px; line-height: 1.6; color: var(--grigio); }

/* --- per chi e' il Working Holiday: frase chiave in grande, il resto su due colonne --- */
.ix-chi { max-width: 980px; }
.ix-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-l); }

/* --- calcolatore: scegli le settimane, il prezzo cambia. Solo CSS (:has). --- */
.ix-calc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--sp-l);
  margin: var(--sp-xl) 0 0;
  padding: var(--sp-l);
  background-color: var(--notte);
  color: #fff;
}

.ix-calc fieldset { margin: 0; padding: 0; border: 0; }
.ix-calc legend { padding: 0; color: #fff; opacity: .7; }
.ix-scelta { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--sp-s) 0; }
.ix-scelta label { position: relative; margin: 0; cursor: pointer; }
.ix-scelta input { position: absolute; opacity: 0; }

.ix-scelta span {
  display: block;
  padding: 16px 26px;
  border: 2px solid rgba(255,255,255,.35);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  transition: background-color .25s, border-color .25s;
}

.ix-scelta input:checked + span { border-color: var(--arancio); background-color: var(--arancio); }
.ix-scelta input:focus-visible + span { outline: 2px solid #fff; outline-offset: 3px; }

.ix-barre { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ix-barre i { height: 8px; background-color: rgba(255,255,255,.15); transition: background-color .3s; }

.ix-calc:has([value="2"]:checked) .ix-barre i:nth-child(-n+2),
.ix-calc:has([value="3"]:checked) .ix-barre i:nth-child(-n+3),
.ix-calc:has([value="4"]:checked) .ix-barre i { background-color: var(--arancio); }

.ix-prezzo { margin: 0; text-align: right; }
.ix-prezzo > span { display: block; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; opacity: .6; }
.ix-prezzo b { display: none; font-size: clamp(40px, 5vw, 72px); white-space: nowrap; line-height: 1.1; font-weight: 800; letter-spacing: -1px; animation: ix-sale .5s cubic-bezier(.2,.7,.2,1); }

.ix-calc:has([value="2"]:checked) [data-w="2"],
.ix-calc:has([value="3"]:checked) [data-w="3"],
.ix-calc:has([value="4"]:checked) [data-w="4"] { display: block; }

.ix-prezzo small { display: block; font-size: 14px; opacity: .7; }

@keyframes ix-sale { from { opacity: 0; transform: translateY(20px); } }

/* --- inverno o estate: la foto d'inverno copre quella d'estate fino a --pos,
   che si sposta trascinando la linea. --- */
.ix-confronto { --pos: 50%; position: relative; aspect-ratio: 16 / 8; overflow: hidden; color: #fff; }
.ix-confronto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ix-confronto .ix-sopra { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.ix-confronto::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 4px;
  margin-left: -2px;
  background-color: #fff;
  pointer-events: none;
}

.ix-maniglia {
  position: absolute;
  top: 50%;
  left: var(--pos);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  translate: -50% -50%;
  border: 4px solid #fff;
  border-radius: 50%;
  background-color: var(--accento);
  font-size: 22px;
  font-weight: 800;
  pointer-events: none;
}

.ix-confronto input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }

/* Titolo e testo sopra il confronto, centrati. */
.ix-sopra-foto { max-width: 760px; margin: 0 auto var(--sp-l); text-align: center; }
.ix-sopra-foto .ix-testo p { margin-left: auto; margin-right: auto; }

.ix-stagione {
  position: absolute;
  bottom: var(--sp-l);
  max-width: 30ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  text-shadow: 0 2px 16px rgba(0,0,0,.6);
  pointer-events: none;
}

.ix-stagione b { display: block; font-size: clamp(32px, 4vw, 60px); line-height: 1; font-weight: 800; text-transform: uppercase; }
.ix-stagione.inverno { left: var(--sp-l); }
.ix-stagione.estate { right: var(--sp-l); text-align: right; }

/* --- candidatura --- */
/* Indicazioni per programma: sottotitoli semplici e una lista pulita. */
.ix-sottotitolo { margin: var(--sp-l) 0 10px; font-size: 20px; line-height: 1.3; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--notte); }
.ix-domande { margin: var(--sp-s) 0 0; padding: 0 0 0 20px; font-size: 17px; line-height: 1.5; }
.ix-domande li { margin-bottom: 6px; }
.ix-domande li::marker { color: var(--arancio); }

.ix-form {
  position: sticky;
  top: 100px;
  padding: var(--sp-l);
  border: 1px solid var(--bordo);
  background-color: #fff;
  box-shadow: 16px 16px 0 var(--accento);
  /* ombra morbida sotto tutto il blocco: form, riquadro arancione e timbro */
  filter: drop-shadow(0 30px 45px rgba(21,46,68,.28));
}

.ix-form .ix-btn { --btn: var(--accento); margin-top: var(--sp-m); }

/* Timbro che gira nell'angolo del modulo. */
.ix-timbro { position: absolute; top: -64px; right: -56px; width: 128px; height: 128px; animation: ix-ruota 16s linear infinite; }
.ix-timbro circle { fill: var(--arancio); }
.ix-timbro text { fill: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.ix-timbro use { fill: none; stroke: #fff; stroke-width: 12; }

@keyframes ix-ruota { to { rotate: 360deg; } }

/* --- chiusura --- */
.ix-finale {
  padding: var(--sp-2xl) var(--margine);
  overflow: hidden;
  background: linear-gradient(0deg, var(--cuoio) 8%, rgba(74,44,25,.6)), url('../images/image00006-p-1600.jpeg') 50% 50% / cover;
  color: #fff;
  text-align: center;
}

.ix-finale .ix-kicker { color: #fff; opacity: .7; }

.ix-righe-finali {
  margin: 0 0 var(--sp-xl);
  font-size: clamp(34px, 6vw, 92px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -2px;
  text-transform: uppercase;
}

.ix-righe-finali span { display: block; }
.ix-righe-finali span:nth-child(2) { color: transparent; -webkit-text-stroke: 2px #fff; }
.ix-finale p:not([class]) { max-width: 62ch; margin: 0 auto var(--sp-s); font-size: 17px; line-height: 1.7; opacity: .85; }
.ix-finale .ix-actions { justify-content: center; margin-top: var(--sp-l); }
/* sul fondo scuro il bottone blu diventa bianco */
.ix-finale .ix-btn.notte { --btn: #fff; color: var(--notte); }
.ix-finale .ix-btn:hover { color: #fff; border-color: #fff; }

.ix-fissa { display: none; }

/* --- movimento legato allo scroll --- */
@supports (animation-timeline: view()) {
  .ix mark { animation: ix-evidenzia linear both; animation-timeline: view(); animation-range: entry 100% cover 55%; }
  .ix-media { animation: ix-apri linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  .ix-media img { animation: ix-zoom linear both; animation-timeline: view(); }
  .ix-check path { animation: ix-spunta linear both; animation-timeline: view(); animation-range: entry 100% cover 45%; }
  .ix-icona path { animation: ix-spunta linear both; animation-timeline: view(); animation-range: entry 100% cover 40%; }
  .ix-trail::after { animation: ix-cresce linear both; animation-timeline: view(); animation-range: cover 10% cover 70%; }
  .ix-trail li { animation: ix-entra linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  .ix-righe-finali span { animation: ix-da-sinistra linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  .ix-righe-finali span:nth-child(2) { animation-name: ix-da-destra; }
}

@keyframes ix-evidenzia { from { background-size: 0% .26em; } }
@keyframes ix-apri { from { clip-path: inset(10% 16%); } to { clip-path: inset(0); } }
@keyframes ix-zoom { from { scale: 1.2; } to { scale: 1; } }
@keyframes ix-spunta { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ix-cresce { from { transform: scaleY(0); } }
@keyframes ix-entra { from { opacity: 0; transform: translateX(-30px); } }
@keyframes ix-da-sinistra { from { transform: translateX(-25%); opacity: 0; } }
@keyframes ix-da-destra { from { transform: translateX(25%); opacity: 0; } }

.ix-check path { stroke-dasharray: 1; }

@media (prefers-reduced-motion: reduce) {
  .ix *,
  .ix *::before,
  .ix *::after { animation: none; }
  .ix-ferro { stroke-dashoffset: 0; }
}

/* --- schermi stretti --- */
@media screen and (max-width: 991px) {
  .ix { --sp-2xl: 96px; --sp-xl: 56px; --sp-l: 32px; --margine: var(--sp-m); --margine-vw: var(--sp-m); }
  .ix-hero { grid-template-columns: 1fr; }
  .ix-hero-text { padding: 130px var(--margine) var(--sp-l); }
  /* in colonna le foto diventano lo sfondo dell'apertura, dietro un velo blu; testo in bianco */
  .ix-hero { position: relative; isolation: isolate; }
  .ix-reel { position: absolute; inset: 0; z-index: -1; }
  .ix-reel::after { background-image: none; background-color: rgba(21,46,68,.78); }
  .ix-title,
  .ix-claim,
  .ix-hero-facts b { color: #fff; }
  .ix-hero .ix-kicker { color: #fff; opacity: .8; }
  .ix-hero-facts { border-color: rgba(255,255,255,.25); }
  .ix-hero-facts li { color: rgba(255,255,255,.75); }
  /* il bottone blu sparirebbe sul velo blu: diventa bianco */
  .ix-hero .ix-btn.notte { --btn: #fff; color: var(--notte); }
  .ix-hero .ix-btn.notte:hover { color: #fff; }
  .ix-due { grid-template-columns: 1fr; gap: var(--sp-l); }
  .ix-due > .ix-ferma { position: static; }
  .ix-card { grid-template-columns: 1fr; min-height: 0; }
  .ix-card-text { padding: var(--sp-l) var(--margine); }
  .ix-card-foto { height: 300px; }
  .ix-vita { background-attachment: scroll; }
  .ix-calc { grid-template-columns: 1fr; }
  .ix-prezzo { text-align: left; }
  .ix-form { position: relative; top: 0; }
  .ix-timbro { top: -56px; right: -12px; width: 104px; height: 104px; }
}

@media screen and (max-width: 767px) {
  .ix { --sp-2xl: 64px; --sp-xl: 40px; }
  .ix-title { letter-spacing: -1px; }
  .ix-segnalibro { letter-spacing: 1px; }
  .ix-vita .ix-testo { columns: 1; }
  .ix-programmi { grid-template-columns: 1fr; }
  .ix-colonne { grid-template-columns: 1fr; }
  .ix-programmi .ix-programma { padding: var(--sp-xl) var(--margine); }
  .ix-media.ix-al-bordo { margin: 0 calc(-1 * var(--margine)); }
  .ix-media { aspect-ratio: 4 / 3; }
  .ix-scuro::after { background-image: linear-gradient(rgba(21,46,68,.85), rgba(21,46,68,.85)); }
  .ix-strip { grid-auto-columns: 72%; gap: var(--sp-s); }
  .ix-calc { padding: var(--sp-m) var(--sp-s); }
  /* Su telefono il confronto va da bordo a bordo, senza fondo; il titolo resta nei margini. */
  .ix-tutta { padding: var(--sp-2xl) 0 0; background: none; }
  .ix-sopra-foto { padding: 0 var(--margine); }
  .ix-confronto { aspect-ratio: 4 / 5; }
  .ix-stagione { bottom: var(--sp-m); }
  .ix-stagione span { display: none; }
  .ix-stagione.inverno { left: var(--sp-s); }
  .ix-stagione.estate { right: var(--sp-s); }
  .ix-form { padding: var(--sp-m) var(--sp-s); box-shadow: 8px 8px 0 var(--accento); }
  body { padding-bottom: 60px; }
  .ix-fissa {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    background-color: var(--arancio);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    transform: translateY(100%);
    transition: transform .25s;
  }
  .ix-fissa.vista { transform: none; }
  .ix-fissa.wh { background-color: var(--notte); }
  /* i bottoni delle card stanno su una riga */
  .ix-vai,
  .ix-card .ix-btn { padding: 14px 18px; font-size: 12px; letter-spacing: .5px; white-space: nowrap; }
}