/* Home */

/* ---------- Testata sopra il campo blu ---------- */
@media (min-width: 1081px) {
  .home .testata nav { margin-left: 40px; gap: 22px; }
  .home .testata nav a { font-size: var(--t-small); }
  .home .testata__destra { margin-left: auto; }
  .home .testata:not(.piena) .testata__destra { color: var(--carta); }
  .home .testata:not(.piena) .testata__destra .btn { background: var(--carta); color: var(--blu); }
}
@media (max-width: 860px) {
  .home .testata:not(.piena):not(.aperta) { color: var(--carta); }
}

/* ---------- Prima schermata: testo a sinistra, la lastra sul blu ---------- */
.hero { display: grid; grid-template-columns: 58fr 42fr; position: relative; }
.hero__testo { padding-inline: var(--m); }
.hero__apertura {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--head-h) + 24px) 0 40px;
}
.hero h1 { font-size: clamp(40px, 4.4vw, 64px); max-width: 19ch; }
.hero__frase { margin-top: 36px; max-width: 40ch; font-size: clamp(17px, 1.25vw, 19px); }
.hero__azioni { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }

.hero__cava { padding: 12vh 0 18vh; }
.hero__cava > h2 { font-size: var(--step-head); max-width: 11ch; }
.hero__cava > p { margin-top: 24px; max-width: 42ch; }
.variante {
  min-height: 74svh; max-width: 460px;
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.variante h3 { font-size: var(--t-h3); }
.variante__dati { font-weight: 600; }
.variante .link { align-self: flex-start; }

.hero__campo { background: var(--blu); color: var(--carta); position: relative; }
.hero__sticky {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.hero__lastra {
  position: relative; margin: 0;
  height: min(92svh, calc(42vw / 0.658 * 0.84));
  aspect-ratio: 674 / 1024;
  transform: translateY(9svh);
  background: var(--blu-2);
}
.hero__lastra img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__lastra img:not(.attiva) { visibility: hidden; }
.hero__didascalia { position: absolute; left: 32px; top: calc(var(--head-h) + 20px); display: flex; flex-direction: column; gap: 2px; max-width: 220px; }
.hero__didascalia strong { font-size: var(--t-h4); letter-spacing: -0.03em; line-height: 1.1; }
.hero__didascalia span { font-size: var(--t-small); opacity: .85; }

@media (max-width: 1080px) and (min-width: 861px) {
  .hero { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .hero { display: block; }
  .hero__campo { position: absolute; inset: 0; background: none; z-index: 2; pointer-events: none; }
  .hero__sticky { height: 54svh; background: var(--blu); pointer-events: auto; align-items: flex-end; }
  .hero__lastra { height: 44svh; transform: translateY(10%); }
  .hero__didascalia { left: var(--m); top: auto; bottom: 18px; max-width: 30vw; }
  .hero__didascalia strong { font-size: 17px; }
  .hero__didascalia span { font-size: 13px; }
  .hero__testo { position: relative; z-index: 1; padding-top: 54svh; }
  .hero__apertura { min-height: auto; padding: 32px 0 48px; }
  .hero h1 { font-size: clamp(28px, 7.6vw, 40px); max-width: none; }
  .hero__frase { margin-top: 20px; font-size: 17px; }
  .hero__azioni .btn { width: 100%; }
  .hero__cava { padding: 40px 0 20svh; }
  .variante { min-height: 46svh; }
}

/* ---------- Dal blocco alla lastra ---------- */
.scena { background: var(--notte); color: var(--carta); }
.scena__palco { position: relative; }
.passo { position: relative; height: 100svh; overflow: hidden; }
.passo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.68); }
.passo__testa { position: absolute; left: var(--m); top: calc(var(--head-h) + 8px); }
.passo__testa h2 { font-size: var(--t-h4); letter-spacing: -0.02em; line-height: 1.2; font-weight: 600; }
.passo__testa h3 { font-size: var(--t-h4); letter-spacing: -0.02em; line-height: 1.2; font-weight: 800; }
.passo__cifra {
  position: absolute; left: var(--m); bottom: 18px; margin: 0;
  font-size: clamp(112px, 17vw, 280px); font-weight: 800; letter-spacing: -0.04em; line-height: .8;
  white-space: nowrap;
}
.passo__cifra small { font-size: .32em; letter-spacing: -0.03em; margin-left: .12em; }
.passo--lungo .passo__cifra { font-size: clamp(76px, 11.5vw, 190px); }
.passo__frase { position: absolute; right: var(--m); bottom: 28px; max-width: 26ch; text-align: right; font-size: 18px; }
.scena--animata .scena__palco { height: 100svh; overflow: hidden; }
.scena--animata .passo { position: absolute; inset: 0; }
.scena--animata .passo:not(:first-child) { clip-path: inset(100% 0 0 0); }
@media (max-width: 860px) {
  .passo__cifra { font-size: 26vw; bottom: 22px; }
  .passo--lungo .passo__cifra { font-size: 17vw; }
  .passo__frase { right: auto; left: var(--m); bottom: calc(26vw + 40px); text-align: left; font-size: 16px; }
  .passo--lungo .passo__frase { bottom: calc(17vw + 40px); }
}

.ponte { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-5); padding: var(--sezione) var(--m); }
.ponte p { grid-column: 2 / span 7; font-size: var(--t-h3); font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; text-wrap: balance; }
.ponte .link { grid-column: 2 / span 7; justify-self: start; }
@media (max-width: 860px) { .ponte p, .ponte .link { grid-column: 1 / -1; } .ponte p { font-size: var(--t-h4); line-height: 1.3; } }

/* ---------- Vetrina: il nome del marmo, grande come le cifre della scena ---------- */
.vetrina__quadro { position: relative; height: 100svh; min-height: 620px; overflow: hidden; color: var(--carta); background: var(--notte); }
.vetrina__quadro > img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; filter: brightness(.68); }
.vetrina__nome {
  position: absolute; left: var(--m); bottom: 18px; margin: 0;
  font-size: clamp(120px, 21vw, 340px); line-height: .8; letter-spacing: -0.04em; white-space: nowrap;
}
.vetrina__nome span { display: block; font-size: var(--t-h3); letter-spacing: -0.03em; line-height: 1; margin: 0 0 .2em .1em; }
.vetrina__fatti { position: absolute; right: var(--m); top: calc(var(--head-h) + var(--s-5)); width: min(420px, 34vw); display: grid; grid-template-columns: 112px 1fr; gap: var(--s-5); align-items: start; }
.vetrina__fatti img { width: 112px; aspect-ratio: 674 / 1024; object-fit: cover; }
.vetrina__fatti div { display: flex; flex-direction: column; gap: var(--s-3); }
.vetrina__fatti p:first-child { font-weight: 600; }
.vetrina__fatti .btn { align-self: flex-start; margin-top: var(--s-3); }
@media (max-width: 860px) {
  .vetrina__nome { font-size: 25vw; }
  .vetrina__fatti { left: var(--m); right: var(--m); width: auto; grid-template-columns: 84px 1fr; top: var(--s-7); }
  .vetrina__fatti img { width: 84px; }
}

/* ---------- Nuovi arrivi: la lastra scende lungo l'elenco ---------- */
.arrivi { background: var(--notte); color: var(--carta); padding: var(--sezione) var(--m); position: relative; }
.arrivi__testa { display: grid; grid-template-columns: 1fr min(22vw, 320px) 1fr; gap: 28px; align-items: center; min-height: 64svh; }
.arrivi__testa h2 { display: contents; }
.arrivi__testa h2 span { font-size: var(--step-head); }
.arrivi__testa h2 span:first-child { text-align: right; }
/* la lastra resta ferma tra le due parole del titolo */
.arrivi__binario { grid-column: 2; grid-row: 1; width: 100%; }
.arrivi__binario img { width: 100%; aspect-ratio: 674 / 1024; height: auto; max-height: 64svh; object-fit: cover; }
.arrivi__sotto { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; margin: 40px 0 20px; color: #C7D0D9; }
.arrivi__sotto p { max-width: 36ch; }
.righe { list-style: none; margin: 0; padding: 0; }
.riga a {
  display: grid; grid-template-columns: 1fr min(22vw, 320px) 1fr; gap: 28px; align-items: center;
  min-height: 84px; padding: 14px 20px; text-decoration: none;
  transition: background .25s var(--ease);
}
.riga:nth-child(even) a { background: #0E2336; }
.riga a:hover { background: var(--blu); }
.riga__nome { font-size: var(--t-h4); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.riga__nota { display: block; font-size: 16px; font-weight: 400; letter-spacing: 0; line-height: 1.5; color: #C7D0D9; margin-top: 4px; }
.riga__dati { grid-column: 3; text-align: right; font-size: 16px; }
.riga__dati .stato { margin-left: 12px; }
.riga--prossima a { background: var(--carta) !important; color: var(--blu); }
.riga--prossima .riga__nota { color: var(--soft); }
.arrivi__fine { margin-top: 48px; text-align: center; }
@media (max-width: 860px) {
  .arrivi { padding: 64px var(--m) 80px; }
  .arrivi__testa { grid-template-columns: 1fr 40vw 1fr; min-height: auto; gap: 12px; }
  .arrivi__testa h2 span { font-size: 8vw; }
  .arrivi__testa h2 span:last-child { text-align: left; }
  .arrivi__binario { width: 40vw; grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .arrivi__binario img { max-height: none; }
  .arrivi__sotto { flex-direction: column; }
  .riga a { grid-template-columns: 1fr; gap: 6px; padding: 16px; }
  .riga__dati { grid-column: 1; text-align: left; }
  .riga__dati .stato { margin-left: 0; display: flex; margin-top: 4px; }
}

/* ---------- Chi siamo: il pannello blu ---------- */
.chi { padding: 20px; }
.chi__pannello { position: relative; min-height: max(110svh, calc(clamp(240px, 30svh, 320px) + 35.2vw * 0.82)); background: var(--blu); color: var(--carta); overflow: hidden; }
.chi__pannello h2 { position: absolute; left: 56px; top: 56px; font-size: var(--step-head); max-width: 12ch; }
.chi__foto {
  position: absolute; left: 56px; top: clamp(240px, 30svh, 320px); width: 44vw; aspect-ratio: 5 / 4; margin: 0;
  clip-path: polygon(14% 0, 100% 0, 100% 86%, 86% 100%, 0 100%, 0 14%);
}
.chi__foto img { width: 100%; height: 100%; object-fit: cover; }
.chi__testi { position: absolute; left: 63%; top: 56px; right: 56px; display: flex; flex-direction: column; gap: 56px; max-width: 360px; }
.chi__testi h3 { font-size: var(--t-h4); letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 10px; }
.chi__testi p { font-size: var(--step-body); line-height: 1.5; letter-spacing: 0; }
.chi__testi .btn { align-self: flex-start; margin-top: -16px; }
@media (max-width: 1080px) { .chi__testi { left: 56%; } .chi__foto { width: 46vw; } }
@media (max-width: 860px) {
  .chi { padding: 10px; }
  .chi__pannello { min-height: auto; padding: 36px 22px 0; display: flex; flex-direction: column; gap: 36px; }
  .chi__pannello h2 { position: static; font-size: 9vw; }
  .chi__testi { position: static; max-width: none; gap: 32px; }
  .chi__testi .btn { margin-top: 0; }
  .chi__foto { position: relative; left: auto; top: auto; width: 86vw; aspect-ratio: 3 / 2; align-self: center; margin-bottom: -14vw; }
}

/* ---------- Chiusura: il marmo torna ---------- */
.chiusura { position: relative; min-height: 90svh; background: var(--pietra); overflow: hidden; display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding-inline: var(--m); }
.chiusura__marmo { grid-column: 1 / span 8; position: relative; margin-left: calc(var(--m) * -1); }
.chiusura__marmo img { position: absolute; left: 0; bottom: -22%; width: 130%; height: 130%; object-fit: cover; }
.chiusura__testo { grid-column: 10 / span 3; align-self: center; display: flex; flex-direction: column; gap: 16px; padding-block: 80px; }
.chiusura__testo h2 { font-size: var(--t-h3); }
.chiusura__tel { font-size: var(--t-h4); font-weight: 800; letter-spacing: -0.03em; text-decoration: none; }
.chiusura__tel:hover { text-decoration: underline; }
.chiusura__orari { font-size: 16px; color: var(--soft); margin-top: -10px; }
.chiusura__testo .btn { align-self: flex-start; }
@media (max-width: 1080px) { .chiusura__marmo { grid-column: 1 / span 7; } .chiusura__testo { grid-column: 8 / span 5; } }
@media (max-width: 860px) {
  .chiusura { display: flex; flex-direction: column; padding: 0; }
  .chiusura__testo { padding: 64px var(--m) 32px; }
  .chiusura__testo h2 { font-size: 28px; }
  .chiusura__testo .btn { width: 100%; }
  .chiusura__marmo { margin: 0; height: 55svh; }
  .chiusura__marmo img { left: 0; width: 130%; }
}
.riga--prossima .stato::before { background: var(--notte); }
@media (max-width: 860px) {
  .hero__sticky { justify-content: flex-end; padding-right: var(--m); }
  .hero__didascalia { max-width: calc(100vw - 44svh * 0.658 - var(--m) * 3); }
  .arrivi__binario { margin: 0 auto 20px; }
  .arrivi__testa { grid-template-columns: 1fr 1fr; }
  .arrivi__testa h2 span { grid-row: 2; }
  .arrivi__testa h2 span:first-child { text-align: right; }
  .arrivi__testa h2 span:last-child { grid-column: 2 !important; }
}

/* sul telefono la didascalia tiene solo il nome, che non va a capo parola per parola */
@media (max-width: 860px) { .hero__didascalia span { display: none; } }

.arrivi__parola2 { grid-column: 3; }
.avviso-demo--scuro { color: #C7D0D9; }