/* OMAI Photobooth — presentazione. Il piano è buio, le stampe sono le cose chiare. */

:root {
  --bordo: clamp(16px, 4.4vw, 56px);
  --filetto: rgba(243, 239, 231, .16);
  --colonna: 1280px;
}

html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { background: var(--buio); color: var(--carta); overflow-x: hidden; }
a { text-underline-offset: .18em; }

.salta { position: absolute; left: var(--bordo); top: 8px; z-index: 30; padding: .5em 1em; background: var(--carta); color: var(--buio); transform: translateY(-200%); }
.salta:focus { transform: none; }

/* entrata allo scorrimento: finché non è il loro turno, restano nella fessura */
.js [data-esce] { opacity: 0; }

/* ---------- barra ---------- */
.barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 8px var(--bordo); background: rgba(11, 10, 16, .94); border-bottom: 1px solid var(--filetto); }
.marchio { font-family: var(--f-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.marchio span { color: var(--viola-luce); }
.barra-nav { display: flex; align-items: center; gap: clamp(10px, 2.4vw, 28px); }
.barra-link { font-weight: 500; font-size: .95rem; text-decoration: none; white-space: nowrap; padding: .5em 0; }
.barra-link:hover { text-decoration: underline; }
@media (max-width: 420px) {
  .marchio { font-size: 1rem; }
  .marchio span { display: block; font-size: .78rem; line-height: 1; letter-spacing: .02em; }
  .marchio { line-height: 1.1; }
  .barra-link { font-size: .88rem; }
  .barra .btn-piccolo { padding: 0 .85em; font-size: .85rem; }
}

/* ---------- comuni ---------- */
main > section { padding-inline: var(--bordo); }
.testa, .apertura, .modo, .dentro > *, .prezzi > *, .domande > *, .chiusura > * { max-width: var(--colonna); margin-inline: auto; }
.sopra { color: var(--viola-luce); margin-bottom: 1.1rem; }
.testa h2 { font-size: var(--t-display); max-width: 16ch; }
.testa.stretta h2 { max-width: 12ch; }
.testa-nota { margin-top: 1.2rem; color: var(--carta-2); max-width: 34ch; }
.azioni { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-linea { color: var(--carta); border-color: rgba(243, 239, 231, .45); }
.btn-linea:hover { border-color: var(--carta); }

/* ---------- 1. apertura ---------- */
.apertura { display: grid; gap: 40px; padding-top: clamp(36px, 6vw, 84px); }
.apertura h1 { font-size: clamp(2.85rem, 6.3vw, 5.9rem); line-height: .96; letter-spacing: -.035em; text-wrap: wrap; }
.apertura h1 span { display: block; }
.sottotitolo { margin-top: 1.6rem; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.45; max-width: 36ch; color: var(--carta); }
.apertura .azioni { margin-top: 2rem; }
.nota { margin-top: 1.2rem; font-size: .92rem; color: var(--carta-2); max-width: 40ch; }

.uscita { position: relative; align-self: end; width: 100%; max-width: 560px; }
.uscita-stampe { position: relative; aspect-ratio: 1 / .95; overflow: hidden; }
.uscita .stampa { position: absolute; margin: 0; padding: 6px; }
.uscita .st-1 { left: 1%; top: 31%; width: 51%; rotate: -3deg; z-index: 2; }
.uscita .st-2 { left: 27%; top: 3%; width: 47%; rotate: 2.5deg; z-index: 1; }
.uscita .st-3 { right: 1%; top: 55%; width: 47%; rotate: 1.5deg; z-index: 3; }
/* stessa idea di .esce, corsa più lunga: qui la carta esce davvero */
@keyframes esce-lunga { from { opacity: 0; transform: translateY(38%); } to { opacity: 1; transform: none; } }
.uscita .stampa.esce { animation-name: esce-lunga; animation-duration: .95s; animation-delay: calc(var(--i, 0) * 90ms); }
.fessura { position: relative; height: 12px; margin-inline: -8px; background: #000; border-top: 1px solid rgba(243, 239, 231, .5); border-bottom: 1px solid rgba(243, 239, 231, .14); z-index: 4; }

@media (min-width: 900px) {
  .apertura { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(24px, 4vw, 72px); align-items: end; min-height: min(820px, calc(100vh - 61px)); padding-bottom: 0; }
  .apertura-testo { padding-bottom: clamp(40px, 7vh, 96px); }
  .uscita { justify-self: end; }
}

/* ---------- 2. i due modi ---------- */
.modi { padding-top: clamp(88px, 13vw, 190px); }
.modo { display: grid; gap: 36px; }
.modo-booth { margin-top: clamp(48px, 7vw, 96px); padding-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--filetto); }
.modo-ai { margin-top: clamp(64px, 9vw, 130px); padding-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--filetto); }
.modo-tag { color: var(--lampo); margin-bottom: .9rem; }
.modo h3 { font-size: var(--t-h2); }
.modo-attacco { margin-top: 1rem; font-family: var(--f-display); font-weight: 700; font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.01em; max-width: 24ch; }
.modo-attacco + p { margin-top: 1rem; }
.modo-testo > p:not(.etichetta):not(.modo-attacco) { color: var(--carta-2); max-width: 44ch; }
.filo { list-style: none; margin: 1.6rem 0 0; padding: 0; max-width: 30rem; }
.filo li { padding: .7em 0; border-top: 1px solid var(--filetto); font-weight: 500; }
.filo li:last-child { border-bottom: 1px solid var(--filetto); }
.vie { margin: 1.6rem 0 0; display: grid; gap: 0; max-width: 32rem; }
.vie > div { padding: 1.1em 0; border-top: 1px solid var(--filetto); }
.vie > div:last-child { border-bottom: 1px solid var(--filetto); }
.vie dt { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; }
.vie dd { margin: .35em 0 0; color: var(--carta-2); }

.modo-stampe { display: grid; gap: clamp(12px, 2vw, 24px); align-items: start; }
.modo-stampe .stampa { margin: 0; padding: 6px; }
.modo-stampe.due { grid-template-columns: 1fr 1.08fr; }
.modo-stampe.due .stampa:last-child { margin-top: 18%; }
.modo-stampe.tre { grid-template-columns: 1fr 1fr; }
.modo-stampe.tre .stampa:nth-child(2) { margin-top: 22%; }
.modo-stampe.tre .stampa:nth-child(3) { width: 78%; margin-top: -14%; justify-self: end; }
.ruota-s { rotate: -2deg; }
.ruota-d { rotate: 1.5deg; }
.ruota-s2 { rotate: -1deg; }

@media (min-width: 900px) {
  .modo { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .modo-booth .modo-testo { grid-column: 1 / span 5; padding-top: 1.5rem; }
  .modo-booth .modo-stampe { grid-column: 7 / span 6; }
  .modo-ai .modo-stampe { grid-column: 1 / span 6; }
  .modo-ai .modo-testo { grid-column: 8 / span 5; padding-top: 5rem; }
}

/* ---------- 3. come funziona ---------- */
.passi { margin-top: clamp(96px, 14vw, 210px); padding-block: clamp(56px, 8vw, 110px); background: var(--superficie); display: grid; gap: 40px; }
.passi > * { width: 100%; max-width: var(--colonna); margin-inline: auto; }
.passi-lista { list-style: none; padding: 0; }
.passi-lista li { display: grid; grid-template-columns: clamp(64px, 11vw, 150px) minmax(0, 1fr); gap: clamp(12px, 2vw, 32px); align-items: start; padding: clamp(22px, 3vw, 40px) 0; border-top: 1px solid var(--filetto); }
.passi-lista li:last-child { border-bottom: 1px solid var(--filetto); }
.numero { font-family: var(--f-display); font-weight: 800; font-size: clamp(4rem, 9vw, 7.5rem); line-height: .8; letter-spacing: -.04em; color: var(--lampo); }
.passi-lista h3 { font-size: var(--t-h3); }
.passi-lista p { margin-top: .6rem; color: var(--carta-2); max-width: 46ch; }
@media (min-width: 1000px) {
  .passi { grid-template-columns: 1fr minmax(0, 520px) minmax(0, 760px) 1fr; column-gap: 0; }
  .passi > .testa { grid-column: 2; margin: 0; position: sticky; top: 100px; align-self: start; padding-right: 32px; }
  .passi > .passi-lista { grid-column: 3; margin: 0; }
}

/* ---------- 4. cosa c'è dentro ---------- */
.dentro { padding-top: clamp(88px, 12vw, 170px); }
.dentro-grandi { display: grid; gap: 0; margin-top: clamp(40px, 6vw, 80px); border-top: 1px solid var(--filetto); }
.voce-grande { padding: clamp(24px, 3.4vw, 48px) 0; border-bottom: 1px solid var(--filetto); }
.voce-grande h3 { font-size: var(--t-h2); max-width: 15ch; }
.voce-grande p { margin-top: 1rem; color: var(--carta-2); max-width: 42ch; font-size: 1.1rem; }
.dentro-lista { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 0; }
.dentro-lista li { padding: 1.4rem 0; border-bottom: 1px solid var(--filetto); }
.dentro-lista h3 { font-family: var(--f-testo); font-weight: 600; font-size: 1.0625rem; letter-spacing: 0; line-height: 1.3; }
.dentro-lista p { margin-top: .4rem; color: var(--carta-2); font-size: .97rem; }
.sempre { margin-top: clamp(40px, 6vw, 72px); padding-left: clamp(16px, 2.4vw, 32px); border-left: 3px solid var(--lampo); }
.sempre .etichetta { color: var(--lampo); }
.sempre-testo { margin-top: .9rem; font-family: var(--f-display); font-weight: 700; font-size: var(--t-h3); line-height: 1.25; letter-spacing: -.01em; max-width: 38ch; }
@media (min-width: 760px) {
  .dentro-grandi { grid-template-columns: 1fr 1fr; }
  .voce-grande:first-child { padding-right: clamp(24px, 4vw, 64px); border-right: 1px solid var(--filetto); }
  .voce-grande:last-child { padding-left: clamp(24px, 4vw, 64px); }
  .dentro-lista { grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 64px); }
}
@media (min-width: 1100px) {
  .dentro-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; }
  .dentro-lista li { border-bottom: 0; }
}

/* ---------- 5. prezzi ---------- */
.prezzi { padding-top: clamp(96px, 14vw, 200px); }
.prezzi-corpo { margin-top: clamp(36px, 5vw, 64px); }
.prezzi-riserva { max-width: 44rem; display: grid; gap: 1rem; justify-items: start; color: var(--carta-2); }
.prezzi-riserva p:first-child { color: var(--carta); font-size: 1.15rem; }
.prezzi-riserva .btn { margin-top: .6rem; }
.prezzi-griglia { display: grid; gap: clamp(40px, 6vw, 72px); }
.regole { margin: 0; }
.regola { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; align-items: baseline; padding: 1.25rem 0; border-top: 1px solid var(--filetto); }
.regola:last-child { border-bottom: 1px solid var(--filetto); }
.regola dt { font-family: var(--f-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; }
.regola .quanto { grid-column: 2; grid-row: 1; font-family: var(--f-display); font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1; color: var(--lampo); white-space: nowrap; text-align: right; }
.regola .quanto small { display: block; margin-top: .3em; font-family: var(--f-testo); font-weight: 500; font-size: .78rem; letter-spacing: .02em; color: var(--carta-2); }
.regola dd { grid-column: 1 / -1; margin: 0; color: var(--carta-2); max-width: 46ch; }
.pacchetti-titolo { font-size: var(--t-h3); }
.pacchetti-nota { margin-top: .5rem; color: var(--carta-2); font-size: .95rem; max-width: 40ch; }
.pacchetti { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.pacchetto { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4px 16px; padding: 1.1rem 0; border-top: 1px solid var(--filetto); }
.pacchetto:last-child { border-bottom: 1px solid var(--filetto); }
.pacchetto .crediti { font-family: var(--f-display); font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); line-height: .95; letter-spacing: -.03em; }
.pacchetto .crediti span { font-family: var(--f-testo); font-weight: 500; font-size: 1rem; letter-spacing: 0; color: var(--carta-2); margin-left: .35em; }
.pacchetto .prezzo { font-family: var(--f-display); font-weight: 700; font-size: 1.5rem; line-height: 1; text-align: right; white-space: nowrap; }
.pacchetto .a-credito { grid-column: 1; font-size: .9rem; color: var(--lampo); }
.pacchetto .iva { grid-column: 2; font-size: .78rem; color: var(--carta-2); text-align: right; }
.prezzi-azione { margin-top: 1.8rem; }
@media (min-width: 960px) {
  .prezzi-griglia { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(48px, 7vw, 110px); align-items: start; }
}

/* ---------- 6. domande ---------- */
.domande { padding-top: clamp(88px, 12vw, 170px); display: grid; gap: 36px; }
.domande-lista { width: 100%; }
.domande details { border-top: 1px solid var(--filetto); }
.domande details:last-child { border-bottom: 1px solid var(--filetto); }
.domande summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 1.2rem 0; cursor: pointer; list-style: none; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.15rem, 1.8vw, 1.45rem); letter-spacing: -.01em; line-height: 1.2; }
.domande summary::-webkit-details-marker { display: none; }
.domande summary::after { content: ''; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--viola-luce), var(--viola-luce)) center / 100% 2px no-repeat, linear-gradient(var(--viola-luce), var(--viola-luce)) center / 2px 100% no-repeat; transition: transform .18s ease-out; }
.domande details[open] summary::after { transform: rotate(45deg); }
.domande summary:hover { color: var(--lampo); }
.domande details p { padding: 0 0 1.4rem; color: var(--carta-2); max-width: 58ch; animation: esce .42s var(--esce) both; }
.domande details p a { color: var(--viola-luce); }
@media (min-width: 1000px) {
  .domande { grid-template-columns: 1fr minmax(0, 440px) minmax(0, 840px) 1fr; column-gap: 0; }
  .domande > .testa { grid-column: 2; margin: 0; padding-right: 32px; }
  .domande > .domande-lista { grid-column: 3; margin: 0; }
}

/* ---------- 7. chiusura e piede ---------- */
.chiusura { padding-block: clamp(110px, 16vw, 240px) clamp(80px, 10vw, 150px); }
.chiusura h2 { font-size: var(--t-display); max-width: 17ch; }
.chiusura .azioni { margin-top: 2.2rem; }

.piede { display: grid; gap: 18px; padding: 32px var(--bordo) 40px; border-top: 1px solid var(--filetto); color: var(--carta-2); font-size: .92rem; }
.piede-logo { display: inline-block; width: 92px; }
.piede-logo img { filter: brightness(0) invert(1); opacity: .92; height: auto; }
.piede-testo a { color: var(--carta); }
.piede-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.piede-nav a { color: var(--carta); text-decoration: none; padding: .35em 0; }
.piede-nav a:hover { text-decoration: underline; }
@media (min-width: 760px) {
  .piede { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @keyframes esce-lunga { from { opacity: 0; } to { opacity: 1; } }
  .btn, .domande summary::after { transition: none; }
}