/* Miraviso — homepage. Carica le fondamenta e aggiunge cio' che vive solo qui:
   l'hero con il dimostratore (taglio e colore), le due schede, i passi.

   Veste dell'08/09/2026: il dimostratore apre la pagina e fa tutte e due le
   cose, con il taglio per primo; i riquadri sono piu' larghi e piu' quieti. */

@import url("base.css");

/* ------------------------------------------------------------------ hero */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-sfondo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%; opacity: .22;
}
.hero-velo {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--ink) 18%, rgba(24,19,16,.92) 50%, rgba(24,19,16,.7) 100%);
}
.hero-griglia {
  position: relative; padding-block: 88px 96px;
  display: grid; grid-template-columns: minmax(320px, .92fr) minmax(380px, 1.08fr);
  grid-template-areas: "titolo demo" "resto demo";
  column-gap: 72px; align-items: center; align-content: center;
}
.hero-titolo { grid-area: titolo; align-self: end; }
.hero-resto { grid-area: resto; align-self: start; }
.dimostratore { grid-area: demo; }
.hero h1 {
  font-size: clamp(2.5rem, 4.4vw, 3.9rem); line-height: 1.05;
  letter-spacing: -.03em; margin-top: 18px; font-weight: 600;
}
.hero h1 em { font-style: normal; color: var(--brass2); }
.hero .sub { color: var(--text2); font-size: 1.15rem; max-width: 46ch; margin-top: 24px; text-wrap: pretty; }
.hero .azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.rassicura {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px;
  color: var(--muted); font-size: 14.5px; list-style: none;
}
/* Il puntino sta attaccato alla voce che lo precede: messo su quella dopo,
   andando a capo finiva a inizio riga da solo. */
.rassicura li:not(:last-child)::after { content: " ·"; color: rgba(233, 214, 190, .3); }

/* ----------------------------------------------------------- dimostratore */
/* Un riquadro, due schede: l'anteprima del taglio (prima/dopo con la maniglia)
   e il colore live (le pastiglie). Le schede sono <button role="tab">: senza
   JavaScript resta visibile la prima, e la seconda non promette niente. */
.dimostratore {
  border: 1px solid rgba(233, 214, 190, .14);
  background: var(--panel); border-radius: var(--raggio); padding: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .38);
}
.dimostratore-testa {
  display: flex; align-items: center; gap: 6px; padding: 2px 2px 12px;
}
.dimostratore-testa [role="tab"] {
  font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--muted);
  background: transparent; border: 1px solid transparent; border-radius: var(--raggio-piccolo);
  padding: 9px 14px; cursor: pointer; line-height: 1.2;
  transition: color .15s ease, background .15s ease;
}
.dimostratore-testa [role="tab"]:hover { color: var(--text); }
.dimostratore-testa [role="tab"][aria-selected="true"] {
  color: var(--text); background: var(--panel2); border-color: rgba(233, 214, 190, .16);
}
.dimostratore-dove { margin-left: auto; font-size: 13px; color: var(--muted2); padding-right: 6px; }
.dimostratore-pannello[hidden] { display: none; }

.vetro {
  position: relative; border-radius: 12px; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--ink-scuro);
}
.vetro img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .45s ease; }
.provino-nome {
  position: absolute; left: 14px; bottom: 14px;
  background: rgba(18, 14, 11, .74); backdrop-filter: blur(6px);
  border: 1px solid rgba(233, 214, 190, .16); border-radius: var(--raggio-piccolo);
  padding: 8px 14px; font-size: 13.5px; font-weight: 600; color: var(--text);
}
.tavolozza { display: flex; gap: 10px; padding: 14px 4px 2px; flex-wrap: wrap; }
.tavolozza button {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 2px solid rgba(233, 214, 190, .22);
  transition: transform .18s ease, border-color .18s ease;
}
.tavolozza button:hover { transform: translateY(-2px); }
.tavolozza button[aria-pressed="true"] { border-color: var(--text); box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--text); }
.didascalia { font-size: 13.5px; color: var(--muted2); margin: 12px 4px 0; line-height: 1.5; }

/* --------------------------------------------------------- confronto foto */
.confronto {
  position: relative; border-radius: 12px; overflow: hidden;
  aspect-ratio: 4 / 3; background: #e8dfd0; touch-action: none;
}
.confronto .lato { position: absolute; inset: 0; }
.confronto .lato img { width: 100%; height: 100%; object-fit: cover; display: block; }
.confronto .segno {
  position: absolute; font-size: 12px; font-weight: 600; letter-spacing: .06em;
  color: #6f6153; background: var(--carta2); padding: 6px 10px; border-radius: 8px;
}
.confronto .segno.dopo { top: 14px; right: 14px; }
.confronto .segno.prima { bottom: 14px; left: 14px; }
.confronto .riga {
  position: absolute; top: 0; bottom: 0; width: 2px; background: var(--carta2);
  box-shadow: 0 0 14px rgba(0, 0, 0, .35); pointer-events: none;
}
.confronto input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent;
}
.confronto input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--text); border: 3px solid var(--brass); cursor: ew-resize;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
.confronto input[type="range"]::-moz-range-thumb {
  width: 40px; height: 40px; border-radius: 50%; background: var(--text);
  border: 3px solid var(--brass); cursor: ew-resize;
}

/* ------------------------------------------------------------- le schede */
.due { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 28px; margin-top: 56px; }
.scheda {
  background: var(--carta2); border: 1px solid rgba(36, 28, 22, .1);
  border-radius: var(--raggio); padding: 36px; display: flex; flex-direction: column; gap: 20px;
}
.scheda-testa { display: flex; align-items: baseline; gap: 14px; }
.scheda-testa .n { font-size: 13px; font-weight: 600; color: var(--carta-brass); letter-spacing: .06em; }
.scheda h3 { font-size: 1.6rem; letter-spacing: -.02em; }
.scheda p { color: var(--carta-muted); font-size: 1.02rem; }
.scheda .avanti { font-weight: 600; text-decoration: none; margin-top: auto; }
/* La schermata dell'app dentro la scheda. height:auto esplicito: le schede
   della griglia sono alte uguali, e senza questo l'immagine veniva stirata in
   verticale per riempire la scheda piu' alta — il viso ne usciva allungato. */
.scheda .schermata {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1100 / 773; object-fit: contain;
  border-radius: 12px; border: 1px solid rgba(36, 28, 22, .14);
}
.scheda .didascalia { color: #7a6b5c; margin: 8px 0 0; }
/* Prima e dopo affiancati, fermi: il confronto con la maniglia sta gia'
   nell'hero, e due maniglie sulla stessa pagina sono una di troppo. */
.coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.coppia figure { position: relative; margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid rgba(36, 28, 22, .14); }
.coppia img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coppia figcaption {
  position: absolute; left: 10px; bottom: 10px; font-size: 12px; font-weight: 600;
  letter-spacing: .06em; color: #6f6153; background: var(--carta2); padding: 5px 9px; border-radius: 8px;
}

.numeri {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px; margin-top: 32px; background: var(--carta-line);
  border: 1px solid var(--carta-line); border-radius: var(--raggio); overflow: hidden;
}
.numeri > div { background: var(--carta); padding: 28px 30px; }
.numeri .cifra { font-family: var(--display); font-weight: 600; font-size: 2.2rem; line-height: 1; letter-spacing: -.03em; }
.numeri p { color: var(--carta-muted); margin-top: 10px; font-size: .97rem; }

/* --------------------------------------------------------------- i passi */
.passi { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin-top: 54px; }
.passo { background: var(--panel); border: 1px solid var(--line); border-radius: var(--raggio); padding: 34px; }
.passo .n {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--brass); color: #2a1c0a; font-weight: 700; font-size: 15px;
}
.passo h3 { font-size: 1.2rem; margin: 22px 0 8px; color: var(--brass2); letter-spacing: -.01em; }
.passo p { color: var(--muted); font-size: 1rem; }

.foto-coppia { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; margin-top: 22px; }
.foto-coppia img {
  width: 100%; height: 100%; min-height: 240px; object-fit: cover; display: block;
  border-radius: var(--raggio); border: 1px solid var(--line);
}

/* --------------------------------------------------------------- prezzi */
.postilla { color: var(--muted2); font-size: .93rem; margin-top: 22px; }

/* -------------------------------------------------------------- privacy */
.privacy { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.privacy .sfondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .2; }
.privacy .velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(33,26,21,.82), rgba(24,19,16,.95)); }
.privacy .dentro { position: relative; max-width: 860px; margin: 0 auto; padding: 96px 32px; text-align: center; }
.privacy h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.12; margin-top: 14px; }
.privacy p { color: var(--text2); margin: 18px auto 0; max-width: 62ch; text-wrap: pretty; }
.privacy strong { color: var(--text); }

/* -------------------------------------------------------------- domande */
.domande { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 56px; }
.elenco-domande {
  display: grid; gap: 1px; background: var(--line); border-radius: var(--raggio);
  border: 1px solid var(--line); overflow: hidden; align-content: start;
}
.elenco-domande > div { background: var(--ink); padding: 26px 30px; }
.elenco-domande .q { font-weight: 600; color: var(--text); font-size: 1.05rem; }
.elenco-domande .a { margin-top: 8px; color: var(--muted); font-size: .98rem; }

/* ------------------------------------------------------------ invito finale */
.invito {
  background: var(--panel);
  border: 1px solid rgba(214, 166, 94, .3); border-radius: var(--raggio);
  padding: 64px 56px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; align-items: center;
}
.invito h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1.08; max-width: 22ch; }
.invito .spalla { color: var(--text2); margin-top: 16px; max-width: 44ch; }
.invito .colonna { display: grid; gap: 14px; justify-items: start; }
.invito .nota { color: var(--muted2); font-size: .92rem; }

/* --------------------------------------------------------------- mobile */
@media (max-width: 1000px) {
  .hero-griglia {
    grid-template-columns: 1fr; grid-template-areas: "titolo" "demo" "resto";
    row-gap: 36px; padding-block: 56px 64px;
  }
  .hero h1 { max-width: 16ch; }
  .hero .sub { margin-top: 0; }
  .invito { padding: 44px 32px; }
}
@media (max-width: 700px) {
  .hero-griglia { padding-block: 36px 52px; row-gap: 28px; }
  .rassicura { gap: 6px 18px; font-size: 14px; }
  .rassicura li:not(:last-child)::after { content: none; }
  .hero h1 { font-size: clamp(2.1rem, 8vw, 2.8rem); max-width: none; }
  .hero .azioni { flex-direction: column; align-items: stretch; }
  .hero .azioni .btn { text-align: center; }
  .dimostratore { padding: 10px; }
  .dimostratore-dove { display: none; }
  .dimostratore-testa [role="tab"] { padding: 9px 12px; font-size: 13.5px; }
  .due { grid-template-columns: 1fr; }
  .scheda, .passo { padding: 26px 22px; }
  .numeri > div { padding: 22px; }
  .elenco-domande > div { padding: 22px; }
  .invito { padding: 36px 24px; }
}