/* ═══════════════════════════════════════════════
   PAGINE-INFO.css — stili propri di: Contatti, Esempi, Chi sono, 404 e pagine legali
   (prima erano blocchi <style> dentro le pagine; regole uguali tra pagine scritte una volta sola)
   ═══════════════════════════════════════════════ */

/* ── contatti.html ── */
/* intestazione bassa: chi arriva da un "Parliamone" vede WhatsApp e il primo campo nella prima schermata */
.page-header--compact { padding-top: calc(var(--nav-h) + 2.5rem); padding-bottom: 0; max-width: 1080px; box-sizing: content-box; }
.page-header--compact .ph-title { font-size: clamp(2.4rem, 4.5vw, 3.6rem); }
.page-header--compact .ph-sub { margin-top: 1rem; }
.contact-section { position: relative; z-index: 10; padding: 2.5rem clamp(1.25rem,5vw,4rem) 7rem; }
.contact-section-inner { max-width: 1080px; margin: 0 auto; }
.contact-intro { display: grid; justify-items: start; }
.contact-intro .contact-note { font-size: var(--fs-body-sm); margin: 1.4rem 0 0; max-width: 46ch; }
@media (max-width: 768px) {
  .page-header--compact { padding-top: calc(var(--nav-h) + 1.5rem); }
  .page-header--compact .ph-sub { font-size: var(--fs-body-sm); line-height: 1.6; }
  .contact-section { padding-top: 1.5rem; }
  .contact-layout { gap: 0; }
  .contact-intro { display: contents; }
  .contact-me { order: 0; }
  .contact-intro .contact-wa { order: 0; margin-bottom: 0; }
  .contact-form-wrap { order: 1; margin: 2rem 0 2rem; }
  .contact-intro .contact-email { order: 2; }
  .contact-intro .contact-note { order: 2; margin-top: .6rem; }
}
.contact-me { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.6rem; }
.contact-me img { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line); flex-shrink: 0; }
.contact-intro .contact-me p { margin: 0; font-size: var(--fs-body-sm); line-height: 1.5; opacity: 1; }
.contact-me strong { display: block; color: var(--text); font-weight: 600; }
.contact-intro .contact-wa { margin-bottom: .6rem; }
.tipo-group { border: 0; padding: 0; min-width: 0; }
.tipo-group legend { display: block; padding: 0; font-size: var(--fs-body-sm); font-weight: 600; color: var(--text); margin-bottom: .7rem; }
.tipo-options { display: flex; flex-wrap: wrap; gap: .6rem; }
.tipo-group .tipo-opt { position: relative; display: inline-block; cursor: pointer; margin: 0; font-size: inherit; font-weight: 400; letter-spacing: normal; text-transform: none; }
.tipo-group .tipo-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; border: 0; }
.tipo-opt span { display: inline-flex; align-items: center; min-height: 44px; padding: .55rem 1.1rem; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; font-size: var(--fs-body-sm); color: var(--t2); transition: border-color .2s, background .2s, color .2s; }
.tipo-opt:hover span { border-color: rgba(255,255,255,.55); color: var(--text); }
.tipo-opt input:checked + span { border-color: var(--accent); background: rgba(var(--accent-rgb),.14); color: var(--text); }
.tipo-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.tipo-hint { font-size: var(--fs-body-sm); color: var(--t2); margin-top: .7rem; }
.contact-steps { list-style: none; counter-reset: step; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 5rem; padding-top: 3rem; border-top: 1px solid rgba(255,255,255,.06); }
@media (max-width: 768px) {
  .contact-steps { grid-template-columns: 1fr; gap: 1.5rem; }
}
.contact-steps li { counter-increment: step; font-size: var(--fs-body-sm); color: var(--t2); line-height: 1.6; }
.contact-steps li::before { content: counter(step); display: block; font-family: var(--fd); font-size: 1.6rem; color: var(--accent); margin-bottom: .4rem; }
.contact-steps strong { display: block; color: var(--text); font-weight: 600; margin-bottom: .2rem; }
.form-success { display: none; text-align: center; padding: 3rem; border: 1px solid rgba(var(--accent-rgb),.25); background: rgba(var(--accent-rgb),.04); }
.form-success h2 { font-family: var(--fd); font-size: 1.6rem; margin-bottom: .75rem; }
.form-success p { font-size: var(--fs-body-sm); color: var(--t2); }
.form-success:focus { outline: none; }
.form-success:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.field-opt { font-weight: 400; color: var(--t2); }
.form-privacy { font-size: var(--fs-meta); color: var(--t2); line-height: 1.6; margin: -.4rem 0 1.4rem; }
.form-privacy a { color: var(--text); text-decoration: underline; text-underline-offset: .2em; }
.form-error { margin-top: 1.2rem; padding: .8rem 1rem; border-left: 2px solid #ff6b8a; background: rgba(255,107,138,.08); color: #ffc2cf; font-size: var(--fs-body-sm); line-height: 1.6; }
.contact-faq { margin-top: 5rem; padding-top: 3rem; border-top: 1px solid rgba(255,255,255,.06); }
.contact-faq-title { font-family: var(--fd); font-size: clamp(1.6rem,2.6vw,2.2rem); font-weight: 700; margin-bottom: 2rem; }

/* ── progetti.html ── */
.ex-intro { max-width: 640px; margin-bottom: 1rem; }
.ex { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; padding: 4rem 0; border-top: 1px solid var(--line); }
.ex:first-of-type { margin-top: 3rem; }
.ex .au-h2 { margin-bottom: .6rem; }
.ex-tag { font-size: var(--fs-meta); color: var(--accent); margin-bottom: 2rem; }
.ex-flow { list-style: none; counter-reset: ex; margin: 0 0 1.4rem; padding: 0; max-width: 62ch; }
.ex-flow li { position: relative; padding: 0 0 1.1rem 2.75rem; font-size: var(--fs-body); color: var(--t2); line-height: 1.65; }
.ex-flow li::before { counter-increment: ex; content: counter(ex); position: absolute; left: 0; top: .05em; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(var(--accent-rgb),.5); color: var(--accent); font-size: var(--fs-label); font-weight: 500; font-variant-numeric: tabular-nums; }
.ex-flow li::after { content: ''; position: absolute; left: calc(.875rem - .5px); top: 2.05rem; bottom: .25rem; width: 1px; background: var(--line-hi); }
.ex-flow li:last-child { padding-bottom: 0; }
.ex-flow li:last-child::after { display: none; }
.ex-me, .ex-you { font-size: var(--fs-body-sm); color: var(--t2); line-height: 1.7; max-width: 62ch; margin-top: .9rem; }
.ex-me strong, .ex-you strong { color: var(--text); font-weight: 500; }
.ex-me a, .ex-tools a { color: var(--accent); text-underline-offset: .2em; }
.ex-msg { margin: 0; }
.ex-msg-card { background: var(--surface-2); border-radius: 16px; padding: 1.15rem 1.25rem 1.25rem; font-size: var(--fs-meta); color: var(--t2); line-height: 1.55; }
.ex-msg-card p + p { margin-top: .55rem; }
.ex-msg-card strong { color: var(--text); font-weight: 500; }
.ex-msg-app { font-size: var(--fs-tag); letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
.ex-msg-title { color: var(--text); font-size: var(--fs-body-sm); font-weight: 500; }
.ex-msg-buttons { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .3rem; }
.ex-msg-buttons span { padding: .45rem .8rem; border-radius: 10px; background: rgba(255,255,255,.08); color: var(--text); }
.ex-msg-reply { width: fit-content; margin-left: auto; padding: .4rem .85rem; border-radius: 12px 12px 4px 12px; background: rgba(var(--accent-rgb),.16); color: var(--text); }
.ex-msg figcaption { margin-top: .8rem; font-size: var(--fs-meta); color: var(--t3); line-height: 1.5; }
.ex-msg figcaption strong { color: var(--text); font-weight: 500; }
.ex-tools { margin-top: 0; padding-top: 4rem; border-top: 1px solid var(--line); }
@media (max-width: 860px) {
  .ex { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: 3rem 0; }
  .ex-msg { max-width: 420px; }
}

/* Storie di esempio: attività inventate, su una fascia di colore diverso da quella delle automazioni vere */
.ex-msg figcaption { text-wrap: pretty; }
.stories { background: linear-gradient(180deg, #221a46 0%, #1c1740 100%); border-top: 1px solid rgba(167,139,250,.35); }
.stories-divider {
  width: fit-content; margin-bottom: 2rem; padding: .55rem 1rem; border-radius: 10px;
  background: rgba(167,139,250,.14); color: var(--text);
  font-size: var(--fs-body-sm); font-weight: 600; line-height: 1.5;
}
.stories-intro { max-width: 680px; margin-bottom: 1.4rem; }
.stories-index { font-size: var(--fs-body-sm); color: var(--t2); line-height: 2; max-width: 760px; }
.stories-index strong { color: var(--text); font-weight: 500; margin-right: .3rem; }
.stories-index a, .stories-ask a { color: var(--purple-soft); text-underline-offset: .25em; display: inline-block; padding: .35rem 0; }
.stories-ask { margin-top: .6rem; font-size: var(--fs-body-sm); color: var(--t2); }
.stories-end { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(167,139,250,.25); font-size: var(--fs-body); }
.story { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); grid-template-areas: "tag body" "title body"; grid-template-rows: auto 1fr; column-gap: clamp(1.5rem, 4vw, 4rem); padding: 3rem 0; border-top: 1px solid rgba(167,139,250,.22); scroll-margin-top: calc(var(--nav-h) + 1rem); }
.story:first-of-type { margin-top: 2.5rem; }
.story-tag {
  grid-area: tag; width: fit-content; margin-bottom: .9rem; padding: .3rem .8rem; border-radius: 999px;
  background: var(--purple-soft); color: var(--navy);
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.story-title { grid-area: title; font-family: var(--fd); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; color: var(--text); text-wrap: balance; }
.story-body { grid-area: body; }
.story-before { font-size: var(--fs-body); color: var(--t2); line-height: 1.65; max-width: 62ch; margin-bottom: 1.4rem; }
.story-before strong, .story-change strong { color: var(--text); font-weight: 500; }
.story-change { font-size: var(--fs-body); color: var(--t2); line-height: 1.65; max-width: 62ch; margin-top: 1rem; }
.story-est { margin-top: 1rem; max-width: 62ch; padding-left: 1rem; border-left: 1px solid rgba(167,139,250,.6); font-size: var(--fs-body-sm); color: var(--t2); line-height: 1.6; }
.story-est strong { display: block; color: var(--purple-soft); font-weight: 600; font-size: var(--fs-meta); margin-bottom: .2rem; }
.story-link { margin-top: .9rem; }
.story-link a { display: inline-flex; align-items: center; min-height: 44px; color: var(--purple-soft); text-underline-offset: .25em; }
@media (max-width: 860px) {
  .story { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tag" "title" "body"; padding: 2.5rem 0; }
  .story-title { margin-bottom: 1.2rem; }
}

/* ── about.html ── */
.about-photo-section { position: relative; z-index: 10; background: var(--page-bg); padding: 0 clamp(1.25rem,5vw,4rem) 5rem; }
.about-photo-inner { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1fr 2fr; gap: 4rem; align-items: center; }
@media (max-width: 768px) {
  .about-photo-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-portrait { max-width: 280px; margin: 0 auto; }
}
.about-portrait { position: relative; }
.about-portrait img { width: 100%; aspect-ratio: 3/4; object-fit: cover; filter: grayscale(1); border: 1px solid rgba(var(--accent-rgb),.2); }
.portrait-caption { display: flex; gap: 1rem; justify-content: center; font-size: var(--fs-meta); color: var(--t2); margin-top: .75rem; }
.portrait-caption a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); text-decoration: none; }
.intro-block {  }
.intro-block .intro-big { font-family: var(--fd); font-size: clamp(1.4rem,2.8vw,2.2rem); font-weight: 400; line-height: 1.45; color: var(--text); margin-bottom: 2rem; opacity: 0; }
.skill-tags { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 2.5rem; opacity: 0; }
.skill-tag { font-size: var(--fs-tag); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--t2); border: 1px solid rgba(255,255,255,.1); padding: .32rem .8rem; background: transparent; transition: color .22s, border-color .22s; }
.skill-tag:hover { color: var(--accent); border-color: rgba(var(--accent-rgb),.45); }

/* ── 404.html ── */
.e404-wrap { position: relative; z-index: 10; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--nav-h) clamp(1.25rem,5vw,4rem) 4rem; }
.e404-code { font-family: var(--fd); font-size: clamp(6rem, 22vw, 16rem); font-weight: 700; line-height: .9; letter-spacing: -.04em; color: #fff; margin-bottom: 1.5rem; }
.e404-label { font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; display: flex; align-items: center; gap: .75rem; }
.e404-label::before, .e404-label::after { content: ''; display: block; width: 26px; height: 1px; background: var(--accent); }
.e404-title { font-family: var(--fd); font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 700; line-height: 1.2; margin-bottom: 1.2rem; }
.e404-text { font-size: 1rem; color: var(--t2); line-height: 1.7; max-width: 460px; margin: 0 auto 2.5rem; }
.e404-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.e404-links { margin-top: 3rem; display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
.e404-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-body-sm); font-weight: 500; color: var(--t2); text-decoration: none; transition: color .2s; }
.e404-links a:hover { color: var(--accent); }

/* ── privacy-policy.html ── */
.legal-section { position: relative; z-index: 10; background: var(--page-bg); padding: 4rem clamp(1.25rem,5vw,4rem) 8rem; }
.legal-inner { max-width: 760px; margin: 0 auto; }
.legal-inner h2 { font-family: var(--fd); font-size: 1.3rem; font-weight: 700; margin: 3rem 0 .9rem; color: var(--text); }
.legal-inner h3 { font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 1.8rem 0 .6rem; }
.legal-inner p { font-size: var(--fs-body-sm); line-height: 1.85; color: var(--t2); margin-bottom: 1rem; }
.legal-inner ul { padding-left: 1.5rem; margin-bottom: 1rem; }
.legal-inner ul li { font-size: var(--fs-body-sm); line-height: 1.75; color: var(--t2); margin-bottom: .45rem; }
.legal-inner a { color: var(--accent); text-decoration: none; }
.legal-inner a:hover { text-decoration: underline; }
.legal-last-update { font-size: var(--fs-tag); letter-spacing: .1em; text-transform: uppercase; color: var(--t3); margin-bottom: 2rem; }