/* Wed&Com — componenti riusabili. */

/* ---------- pulsanti ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--f-text); font-weight:600; font-size:var(--t-sm);
  padding:.95em 1.7em; border-radius:var(--r-pill);
  text-decoration:none; white-space:nowrap;
  transition:transform .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn svg{ width:1em; height:1em; flex:0 0 auto; }

.btn--dark{ background:var(--ink); color:var(--paper); box-shadow:var(--shadow-md); }
.btn--dark:hover{ background:#2c2519; }

.btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--line-deep); }
.btn--ghost:hover{ border-color:var(--ink); }

.btn--link{ padding:0; border-radius:0; font-weight:600; border-bottom:1px solid var(--bronze); }
.btn--link:hover{ color:var(--bronze-deep); transform:none; }

/* ---------- intestazione ---------- */
.site-header{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:100;
  background:rgba(237,230,216,.85); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.site-header .bar{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding-block:26px; }
#headerCta{ display:none; }
@media(min-width:580px){ #headerCta{ display:inline-flex; } }
.brand{ display:flex; align-items:baseline; gap:10px; text-decoration:none; }
.brand .mark{ font-family:var(--f-display); font-weight:700; font-size:1.3rem; letter-spacing:.02em; color:var(--ink); }
.brand .tag{ font-family:var(--f-text); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); display:none; }
@media(min-width:720px){ .brand .tag{ display:inline; } }

.nav-links{ display:none; align-items:center; gap:var(--s4); }
.nav-links a{ font-size:var(--t-sm); font-weight:600; letter-spacing:.02em; text-decoration:none; color:var(--ink-soft); }
.nav-links a:hover,.nav-links a.is-active{ color:var(--ink); }
.mobile-nav a.is-active{ color:var(--bronze-deep); }
@media(min-width:960px){ .nav-links{ display:flex; } }

.nav-toggle{ display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; border:1px solid var(--line-deep); border-radius:var(--r-sm); }
@media(min-width:960px){ .nav-toggle{ display:none; } }
.nav-toggle span{ display:block; width:18px; height:2px; background:var(--ink); position:relative; }
.nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink); }
.nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; }

.mobile-nav{ display:none; flex-direction:column; gap:2px; padding:4px var(--gut) 18px; border-top:1px solid var(--line); }
.mobile-nav.is-open{ display:flex; }
.mobile-nav a{ padding:12px 4px; font-size:var(--t-md); font-weight:600; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }
@media(min-width:960px){ .mobile-nav{ display:none !important; } }

/* ---------- testata di pagina interna ---------- */
.page-head{ padding:var(--s6) 0 var(--s5); }
.page-head h1{ font-size:var(--t-3xl); margin-top:.4em; max-width:18ch; }
.page-head .lead{ margin-top:var(--s3); max-width:56ch; }

/* ---------- sezioni / bande ---------- */
.section{ padding-block:var(--s7); }
.section--tight{ padding-block:var(--s6); }
.section--paper{ background:var(--paper); }
.section--ink{ background:var(--ink); color:var(--paper); }
.section--ink .eyebrow{ color:#c7a56a; }
.section--ink .lead{ color:#cfc6b4; }

.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s5); }
.section-head h2{ font-size:var(--t-2xl); margin-top:.3em; }

/* ---------- elenco caratteristiche ---------- */
.feature-list{ display:grid; gap:var(--s4); }
.feature-list--4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:900px){ .feature-list--4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .feature-list--4{ grid-template-columns:1fr; } }

.feature-list--3{ grid-template-columns:repeat(3,1fr); }
@media(max-width:860px){ .feature-list--3{ grid-template-columns:1fr; } }

.split{ display:grid; gap:var(--s6); align-items:center; }
.split--55{ grid-template-columns:1.15fr .85fr; }
@media(max-width:860px){ .split--55{ grid-template-columns:1fr; } }

/* niente icone in cerchi: un numero sommesso e tanto vuoto intorno fanno
   l'elenco, non i bordi */
.feature{ display:flex; flex-direction:column; gap:10px; }
.feature .num{ font-family:var(--f-display); font-size:var(--t-sm); color:var(--ink-faint); font-weight:500; }
.feature h3{ font-family:var(--f-text); font-size:var(--t-base); font-weight:600; letter-spacing:.01em; margin:0; }
.feature p{ color:var(--ink-soft); font-size:var(--t-sm); line-height:1.6; margin:0; max-width:32ch; }

/* ---------- interruttore Siti/Inviti/Save-the-date ---------- */
.switch{ display:inline-flex; gap:var(--s4); border-bottom:1px solid var(--line); }
.switch button{ padding:.3em 0 .9em; font-size:var(--t-sm); font-weight:600; color:var(--ink-faint); border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .2s var(--ease), border-color .2s var(--ease); }
.switch button[aria-selected="true"]{ color:var(--ink); border-color:var(--ink); }
.switch button:disabled{ opacity:.4; cursor:not-allowed; }

/* ---------- dispositivi (mockup CSS, nessuna foto) ---------- */
.device{ position:relative; }
.device--laptop{ width:100%; max-width:520px; }
.device--laptop .screen{
  border:10px solid var(--ink); border-bottom-width:14px; border-radius:14px 14px 4px 4px;
  aspect-ratio:16/10.4; overflow:hidden; background:var(--white); box-shadow:var(--shadow-lg);
}
.device--laptop .base{ height:12px; margin:0 -14px; background:linear-gradient(var(--ink),#000); border-radius:0 0 8px 8px; position:relative; }
.device--laptop .base::after{ content:""; position:absolute; left:50%; top:0; translate:-50% 0; width:60px; height:6px; background:#2c2519; border-radius:0 0 6px 6px; }

.device--phone{ width:100%; max-width:210px; margin-inline:auto; }
.device--phone .screen{
  border:9px solid var(--ink); border-radius:34px; aspect-ratio:9/19.3; overflow:hidden; background:var(--white);
  box-shadow:var(--shadow-lg); position:relative;
}
.device--phone .notch{ position:absolute; top:9px; left:50%; translate:-50% 0; width:34%; height:18px; background:var(--ink); border-radius:0 0 12px 12px; z-index:2; }

/* contenuto segnaposto dentro i dispositivi: nessuna foto, solo un richiamo
   quieto al fatto che qui arriva un modello vero */
.screen-fill{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:8%; background:var(--paper); }
.screen-fill .rule{ width:22px; height:1px; background:var(--bronze); }
.screen-fill b{ font-family:var(--f-display); font-weight:500; font-size:.9rem; color:var(--ink-soft); }
.screen-fill span{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }

/* ---------- card modello ---------- */
.model-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
@media(max-width:860px){ .model-grid{ grid-template-columns:1fr; gap:var(--s6); } }
.model-card{ display:flex; flex-direction:column; gap:18px; }
.model-card .frame{ padding:var(--s2) 0; display:flex; align-items:center; justify-content:center; min-height:220px; }
.model-card .meta{ display:flex; flex-direction:column; gap:3px; text-align:center; }
.model-card .cat{ font-family:var(--f-display); font-size:var(--t-base); color:var(--ink); }
.model-card .tags{ font-size:var(--t-xs); letter-spacing:.04em; color:var(--ink-faint); font-style:italic; }
.model-card.is-soon{ opacity:.55; }

/* ---------- modulo di contatto ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3) var(--s3); }
@media(max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:7px; }
.field--full{ grid-column:1/-1; }
.field label{ font-size:var(--t-sm); font-weight:600; color:var(--ink); }
.field .hint{ font-size:var(--t-xs); color:var(--ink-faint); }
.field input,.field select,.field textarea{
  font:inherit; font-size:var(--t-base); color:var(--ink);
  background:var(--paper); border:1px solid var(--line-deep); border-radius:var(--r-sm);
  padding:.85em 1em; width:100%;
}
.field textarea{ resize:vertical; min-height:120px; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:2px solid var(--bronze); outline-offset:1px; border-color:var(--bronze); }
.check-row{ display:flex; align-items:flex-start; gap:10px; }
.check-row input{ margin-top:4px; width:auto; }
.check-row label{ font-size:var(--t-sm); color:var(--ink-soft); font-weight:400; }
.form-note{ font-size:var(--t-sm); color:var(--ink-faint); margin-top:var(--s2); }
.form-msg{ font-size:var(--t-sm); font-weight:600; padding:.9em 1.1em; border-radius:var(--r-sm); margin-bottom:var(--s3); }
.form-msg--ok{ background:#e4ead9; color:#3a5a2c; }
.form-msg--err{ background:#f4dede; color:#7a2c2c; }

/* ---------- testo lungo (pagine legali, chi sono) ---------- */
.prose{ max-width:72ch; }
.prose h2{ font-size:var(--t-xl); margin-top:var(--s5); }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:var(--t-lg); margin-top:var(--s4); }
.prose p{ margin-top:var(--s2); color:var(--ink-soft); line-height:1.75; }
.prose p:first-of-type{ margin-top:0; }
.prose ul{ margin-top:var(--s2); display:flex; flex-direction:column; gap:8px; }
.prose li{ color:var(--ink-soft); line-height:1.7; padding-left:1.3em; position:relative; }
.prose li::before{ content:"—"; position:absolute; left:0; color:var(--bronze); }
.prose strong{ color:var(--ink); font-weight:600; }
.prose a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--bronze); text-underline-offset:3px; }

/* ---------- domande frequenti ---------- */
.faq-item{ border-top:1px solid var(--line); padding:var(--s3) 0; }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-item summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:var(--s3); font-family:var(--f-display); font-size:var(--t-md); color:var(--ink); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:1.4rem; color:var(--bronze); flex:0 0 auto; transition:transform .2s var(--ease); }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ margin-top:var(--s2); color:var(--ink-soft); line-height:1.7; max-width:62ch; }

/* ---------- piè di pagina ---------- */
.site-footer{ background:var(--ink); color:#cfc6b4; padding-block:var(--s6) var(--s4); }
.site-footer .cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--s5); padding-bottom:var(--s5); }
@media(max-width:720px){ .site-footer .cols{ grid-template-columns:1fr; gap:var(--s4); } }
.site-footer h4{ font-size:var(--t-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#c7a56a; margin:0 0 14px; }
.site-footer ul{ display:flex; flex-direction:column; gap:9px; }
.site-footer a{ text-decoration:none; color:#cfc6b4; font-size:var(--t-sm); }
.site-footer a:hover{ color:var(--paper); }
.site-footer p{ font-size:var(--t-sm); line-height:1.65; max-width:34ch; color:#b9ae98; }
.site-footer .brand .mark{ color:var(--paper); }
.site-footer .bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:var(--s4); border-top:1px solid rgba(207,198,180,.18); font-size:var(--t-xs); color:#9c917c; }