/* ==========================================================================
   de Magistris – Landing page
   Mobile first. Palette e font ricavati dagli asset forniti.
   ========================================================================== */

/* ---------- Font (locali) ---------- */
@font-face {
  font-family: "Lexend";
  src: url("../assets/fonts/lexend-var.woff2") format("woff2-variations"),
       url("../assets/fonts/lexend-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lexend Exa";
  src: url("../assets/fonts/lexend-exa-300.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Lexend Exa";
  src: url("../assets/fonts/lexend-exa-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* ---------- Token ---------- */
:root {
  /* colori campionati da sfondo, bottoni e favicon */
  --yellow:  #eda60c;
  --orange:  #e27b12;
  --vermil:  #d52f15;
  --red:     #cf1018;
  --crimson: #c5182b;
  --magenta: #a9204c;
  --plum:    #86256c;
  --purple:  #662581;
  --ink:     #662383;   /* testo viola dei bottoni */
  --ink-2:   #4a1b5e;
  --muted:   #8a7896;
  --paper:   #ffffff;
  --paper-2: #fbf7fc;
  --line:    #eadff0;

  --grad-bg: radial-gradient(circle farthest-corner at 0% 100%,
              var(--yellow) 0%, var(--orange) 16%, var(--vermil) 30%,
              var(--red) 40%, var(--crimson) 52%, var(--magenta) 68%,
              var(--plum) 84%, var(--purple) 100%);
  --grad-h:      linear-gradient(90deg, var(--orange) 0%, var(--red) 50%, var(--purple) 100%);
  --grad-border: linear-gradient(90deg, var(--purple) 0%, var(--red) 45%, var(--orange) 80%, var(--yellow) 100%);

  --font: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-wide: "Lexend Exa", "Lexend", system-ui, sans-serif;

  --gutter: 20px;
  --max: 1080px;
  --radius-xl: 28px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- Base ---------- */
body {
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.5;
  color: var(--paper);
  background: var(--purple) var(--grad-bg) no-repeat;
  background-size: 100% 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  background: var(--grad-bg);
  overflow: hidden;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: calc(18px + env(safe-area-inset-top));
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--paper);
  text-decoration: none;
}

.brand__logo {
  display: block;
  width: auto;
  height: 34px;
}

.brand__dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  flex: none;
  background: radial-gradient(circle at 0% 0%, var(--yellow), var(--orange) 30%, var(--red) 58%, var(--purple) 100%);
  box-shadow: 0 0 0 2px rgba(255,255,255,.9);
}
.brand__dot--sm { width: 22px; height: 22px; box-shadow: none; }

.brand__name {
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -.03em;
  line-height: 1;
}
.brand__de { font-weight: 600; margin-right: .04em; }

.hero__text {
  padding-top: 36px;
  padding-bottom: 8px;
  text-align: center;
}

.claim {
  font-family: var(--font-wide);
  font-weight: 300;
  text-transform: uppercase;
  line-height: 1.3;
  letter-spacing: .06em;
  text-wrap: balance;
}
.claim__l1,
.claim__l2 { display: block; }

.claim__l1 { font-size: .8rem; opacity: .95; }
.claim__l2 {
  margin-top: .6em;
  font-weight: 500;
  font-size: clamp(1.35rem, 6.2vw, 2rem);
  line-height: 1.2;
  letter-spacing: .03em;
}

/* Foto scontornata (WebP trasparente): poggia direttamente sul gradiente.
   Mobile: sempre a tutta larghezza. */
.hero__photo { display: block; }
.hero__photo img {
  width: 100%;
  height: auto;
  margin-top: 12px;
}

/* ==========================================================================
   SHEET (sezione bianca con le CTA)
   ========================================================================== */
.sheet {
  position: relative;
  flex: 1;
  margin-top: calc(var(--radius-xl) * -1);
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

.sheet__inner {
  padding-top: 32px;
  padding-bottom: 32px;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-wide);
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: var(--grad-h);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.eyebrow { margin: 0 0 14px; font-size: .78rem; }

.sheet__title {
  margin-top: 8px;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}

.cta {
  margin: 0 auto;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---------- Bottoni ---------- */
.btn {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: .35em;
  width: 100%;
  min-height: 58px;
  padding: 14px 24px;
  border-radius: 999px;
  border: 2px solid transparent;
  font-family: var(--font);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.005em;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, box-shadow .25s ease, background-position .5s ease;
}
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Pieno con gradiente (da LdM_bottone_bisogno2) */
.btn--primary {
  color: var(--paper);
  background-image: linear-gradient(90deg, var(--orange) 0%, var(--red) 25%, var(--magenta) 50%, var(--red) 75%, var(--orange) 100%);
  background-origin: border-box;
  background-size: 200% 100%;
  background-position: 0% 0;
  box-shadow: 0 10px 24px -8px rgba(207, 16, 24, .55);
}

/* Contorno sfumato su bianco (da LdM_bottone_scrivimi / bisogno) */
.btn--outline {
  color: var(--ink);
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    var(--grad-border) border-box;
}
.btn__email { font-weight: 600; }

.btn--block { width: 100%; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
  .btn--primary:hover {
    background-position: 100% 0;
    box-shadow: 0 14px 28px -8px rgba(102, 37, 129, .55);
  }
  .btn--outline:hover {
    box-shadow: 0 10px 24px -10px rgba(102, 37, 129, .45);
  }
}

/* ---------- Footer ---------- */
.footer {
  margin-top: auto;
  padding-top: 20px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: .8rem;
  color: var(--muted);
}

/* ---------- Social ---------- */
.social {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.social__link {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  color: var(--ink);
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    var(--grad-border) border-box;
  border: 2px solid transparent;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, color .2s ease, box-shadow .25s ease;
}
.social__link:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.social__link:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .social__link:hover {
    transform: translateY(-2px);
    color: var(--red);
    box-shadow: 0 10px 20px -10px rgba(102, 37, 129, .45);
  }
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   MODALE / BOTTOM SHEET
   ========================================================================== */
.modal {
  /* mobile: bottom sheet */
  width: 100%;
  max-width: 100%;
  max-height: 92dvh;
  margin: auto 0 0;
  padding: 0 var(--gutter) calc(20px + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 24px 24px 0 0;
  background: var(--paper);
  color: var(--ink);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal::backdrop {
  background: rgba(58, 16, 70, .55);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.modal[open] { animation: sheet-up .32s cubic-bezier(.2, .8, .2, 1) both; }
.modal[open]::backdrop { animation: fade-in .3s ease both; }

@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }

.modal__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 0 14px;
  background: var(--paper);
}

.modal__grip {
  position: absolute;
  top: 8px; left: 50%;
  width: 40px; height: 4px;
  margin-left: -20px;
  border-radius: 4px;
  background: var(--line);
}

.modal__title {
  flex: 1;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.modal__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink);
  transition: background .2s ease;
}
.modal__close:hover { background: var(--line); }
.modal__close:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* ---------- Form ---------- */
.form { display: flex; flex-direction: column; gap: 16px; }
.form__row { display: grid; gap: 16px; }

.field { display: flex; flex-direction: column; gap: 6px; }

.field label {
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink-2);
}
.field .opt {
  margin-left: 4px;
  font-size: .75rem;
  font-weight: 400;
  color: var(--muted);
}

.field input,
.field textarea {
  width: 100%;
  font-size: 1rem; /* >= 16px: niente zoom su iOS */
  padding: 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--paper-2);
  color: var(--ink-2);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field textarea { min-height: 130px; resize: vertical; }
.field ::placeholder { color: #b3a5bd; }

.field input:focus,
.field textarea:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--magenta);
  box-shadow: 0 0 0 4px rgba(169, 32, 76, .12);
}

.field.is-invalid textarea { border-color: var(--red); }

.field__meta {
  display: flex;
  gap: 8px;
  min-height: 1.2em;
  font-size: .78rem;
}
.field__error { color: var(--red); font-weight: 500; }
.field__count { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Select quartiere: picker nativo, aspetto custom */
.select { position: relative; }
.select select {
  width: 100%;
  font-size: 1rem;
  padding: 13px 44px 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--paper-2);
  color: var(--ink-2);
  -webkit-appearance: none;
          appearance: none;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.select select:invalid,
.select select.is-empty { color: #b3a5bd; }
.select select option,
.select select optgroup { color: var(--ink-2); }
.select select:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--magenta);
  box-shadow: 0 0 0 4px rgba(169, 32, 76, .12);
}
.select::after {
  content: "";
  position: absolute;
  right: 18px; top: 50%;
  width: 9px; height: 9px;
  margin-top: -7px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
  pointer-events: none;
}

/* ---------- Select quartiere personalizzata (JS) ----------
   La <select> nativa resta nel DOM (invio dati + fallback senza JS),
   ma viene sostituita da un menu a tendina con lo stile del sito. */
.select.is-enhanced select { display: none; }
.select.is-enhanced::after { content: none; }

.dd__trigger {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 13px 44px 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.dd__value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dd__trigger.is-empty .dd__value { color: #b3a5bd; }
.dd__chev {
  position: absolute;
  right: 16px; top: 50%;
  width: 18px; height: 18px;
  margin-top: -9px;
  color: var(--ink);
  transition: transform .2s ease;
}
.dd__trigger:focus-visible,
.dd.is-open .dd__trigger {
  outline: none;
  background: var(--paper);
  border-color: var(--magenta);
  box-shadow: 0 0 0 4px rgba(169, 32, 76, .12);
}
.dd.is-open .dd__chev { transform: rotate(180deg); }

.dd__panel {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 8px);
  z-index: 5;
  max-height: 264px;
  margin: 0;
  padding: 6px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 40px -14px rgba(74, 27, 94, .35);
  outline: none;
  animation: dd-in .16s ease both;
}
.dd.is-up .dd__panel { top: auto; bottom: calc(100% + 8px); }
@keyframes dd-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.dd__group {
  padding: 12px 12px 4px;
  font-family: var(--font-wide);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: default;
}
.dd__group:first-child { padding-top: 6px; }

.dd__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: .95rem;
  line-height: 1.3;
  color: var(--ink-2);
  cursor: pointer;
}
.dd__opt--none { color: var(--muted); }
.dd__opt.is-active { background: var(--paper-2); }
.dd__opt[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.dd__opt[aria-selected="true"]::after {
  content: "";
  flex: none;
  width: 6px; height: 11px;
  margin-right: 4px;
  border-right: 2px solid var(--magenta);
  border-bottom: 2px solid var(--magenta);
  transform: rotate(45deg) translate(-2px, -2px);
}
@media (hover: hover) and (pointer: fine) {
  .dd__opt:hover { background: var(--paper-2); }
}

/* Stato di invio */
.js-submit { gap: 10px; }
.spinner {
  display: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  animation: spin .7s linear infinite;
}
.is-loading .spinner { display: inline-block; }
.is-loading .js-submit { pointer-events: none; opacity: .85; }
@keyframes spin { to { transform: rotate(360deg); } }

.form__alert {
  padding: 12px 16px;
  border-radius: 14px;
  background: #fdecee;
  color: #8f0d14;
  font-size: .88rem;
  line-height: 1.45;
}
.form__alert a { color: inherit; font-weight: 600; }

/* Conferma */
.thanks {
  padding: 8px 0 8px;
  text-align: center;
  outline: none;
}
.thanks__icon {
  width: 64px; height: 64px;
  margin: 8px auto 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 0% 0%, var(--yellow), var(--orange) 30%, var(--red) 58%, var(--purple) 100%);
  animation: pop .4s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.thanks__title { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; }
.thanks__text { margin: 6px 0 24px; color: var(--muted); }

.modal.is-done .modal__title { visibility: hidden; }

/* ==========================================================================
   TABLET ≥ 700px
   ========================================================================== */
@media (min-width: 700px) {
  :root { --gutter: 32px; }

  .topbar { padding-top: 28px; }
  .brand__logo { height: 42px; }

  .hero__text { padding-top: 48px; }
  .claim__l1 { font-size: clamp(1.15rem, 2.2vw, 1.6rem); }
  .claim__l2 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); }

  .sheet__inner { padding-top: 44px; padding-bottom: 48px; }
  .eyebrow { margin-bottom: 22px; font-size: 1rem; letter-spacing: .24em; }
  .sheet__title { font-size: 2rem; }

  /* Da tablet in su l'altezza della foto è legata a quella dello schermo,
     così logo + claim + foto + CTA stanno nella prima schermata.
     --photo-ratio = altezza/larghezza di foto-wide.webp (2000×723)
     --fold-rest   = spazio occupato dal resto fino alle CTA (+ margine) */
  .hero__photo {
    --photo-ratio: .3615;
    --photo-maxw: 100vw;
    --fold-rest: 465px;
    --photo-min: 170px;
  }
  .hero__photo img {
    width: auto;
    max-width: 100%;
    height: max(var(--photo-min), min(calc(var(--photo-maxw) * var(--photo-ratio)), calc(100vh - var(--fold-rest))));
    height: max(var(--photo-min), min(calc(var(--photo-maxw) * var(--photo-ratio)), calc(100svh - var(--fold-rest))));
    margin-inline: auto;
    object-fit: contain;
    object-position: center bottom;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  }

  .cta { max-width: 760px; flex-direction: row; }
  .cta .btn { flex: 1; }

  .form__row { grid-template-columns: 1fr 1fr; }

  /* modale centrata */
  .modal {
    max-width: 560px;
    margin: auto;
    padding: 0 32px 28px;
    border-radius: 24px;
    box-shadow: 0 30px 80px -20px rgba(40, 0, 50, .5);
  }
  .modal__grip { display: none; }
  .modal__head { padding-top: 26px; }
  .modal[open] { animation-name: pop-in; }
  @keyframes pop-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
}

/* ==========================================================================
   DESKTOP ≥ 1100px
   ========================================================================== */
@media (min-width: 1100px) {
  .hero__photo { --photo-maxw: min(100vw, 1600px); }
  .hero__photo img {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
  }
}

/* ==========================================================================
   SCHERMI BASSI: si compattano spazi e testi così le CTA restano visibili
   ========================================================================== */
@media (min-width: 700px) and (max-height: 860px) {
  .topbar { padding-top: 20px; }
  .brand__logo { height: 36px; }
  .hero__text { padding-top: 22px; }
  .claim__l1 { font-size: clamp(1.05rem, 2.6vh, 1.5rem); }
  .claim__l2 { margin-top: .35em; font-size: clamp(1.6rem, 4.6vh, 2.6rem); }
  .sheet__inner { padding-top: 30px; padding-bottom: 32px; }
  .eyebrow { margin-bottom: 16px; font-size: .9rem; }
  .hero__photo { --fold-rest: 315px; }
}
@media (min-width: 700px) and (max-height: 640px) {
  .topbar { padding-top: 14px; }
  .brand__logo { height: 30px; }
  .hero__text { padding-top: 14px; }
  .sheet__inner { padding-top: 22px; padding-bottom: 24px; }
  .eyebrow { margin-bottom: 12px; font-size: .8rem; }
  .hero__photo { --fold-rest: 265px; --photo-min: 130px; }
}
@media (max-width: 699px) and (max-height: 740px) {
  .topbar { padding-top: calc(8px + env(safe-area-inset-top)); }
  .eyebrow { margin-bottom: 10px; }
  .brand__logo { height: 30px; }
  .hero__text { padding-top: 12px; }
  .claim__l2 { font-size: clamp(1.25rem, 5.6vw, 1.7rem); }
  .sheet__inner { padding-top: 14px; padding-bottom: 24px; }
  .hero__photo img { margin-top: 0; }
  .cta { gap: 10px; }
  .btn { min-height: 52px; padding-block: 12px; }
}

/* ---------- Riduzione movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after, ::backdrop {
    animation: none !important;
    transition: none !important;
  }
}