/* DispensIA – pagina di presentazione. Stesso stile dell'app ("Casa calda"): corallo e crema, Fraunces + DM Sans.
   Tema chiaro/scuro automatico. Nessuno script, nessun servizio esterno: i caratteri sono in /fonts. */
@font-face { font-family: "Fraunces"; src: url("/fonts/Fraunces_700Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/fonts/DMSans_400Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/fonts/DMSans_700Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --bg: #FFF6E8; --card: #FFFFFF; --ink: #2A1B14; --mute: #6B5849; --line: #EBDCC8;
  --main: #D2432A; --on-main: #FFFFFF; --accent-text: #B8341A; --soft: #FBE3D8; --alt: #FBEBD6;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1D1510; --card: #2A1E17; --ink: #FBEBDD; --mute: #C7AE9C; --line: #43332A;
    --main: #FF7A59; --on-main: #2A1B14; --accent-text: #FF7A59; --soft: #33241C; --alt: #241911;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.6 var(--sans); }
img, svg { max-width: 100%; height: auto; }
a { color: var(--accent-text); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 7vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 5vw, 2.1rem); text-align: center; margin-bottom: .8em; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: 68rem; margin: 0 auto; padding: 0 16px; }
.stretto { max-width: 42rem; }
:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; border-radius: 6px; }
.salta { position: absolute; left: 8px; top: -60px; background: var(--main); color: var(--on-main); padding: 10px 14px; border-radius: 10px; z-index: 10; }
.salta:focus { top: 8px; }

.top { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.marchio { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 700 1.35rem var(--serif); }
.marchio img { border-radius: 10px; }

.btn { display: inline-block; background: var(--main); color: var(--on-main); text-decoration: none; font-weight: 700; padding: 14px 24px; border-radius: 999px; min-height: 48px; text-align: center; border: 2px solid var(--main); }
.btn:hover { filter: brightness(1.06); }
.btn-chiaro { background: transparent; color: var(--accent-text); border-color: var(--accent-text); }
.btn-piccolo { padding: 9px 18px; min-height: 44px; }

.hero { padding: 36px 0 48px; }
.hero-in { display: grid; gap: 28px; align-items: center; }
.hero-img { display: flex; justify-content: center; }
.hero-img img { width: 160px; height: 160px; border-radius: 36px; box-shadow: 0 10px 30px rgba(120, 50, 20, .22); }
.occhiello { color: var(--accent-text); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; margin-bottom: .6em; }
.lead { font-size: 1.15rem; color: var(--ink); }
.lead-centro { text-align: center; max-width: 40rem; margin: 0 auto 1.2em; }
.azioni { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.4em 0 .8em; }
.azioni-centro { justify-content: center; }
.nota { color: var(--mute); font-size: .95rem; }
.nota-centro { text-align: center; max-width: 40rem; margin: 2em auto 0; }

.sez { padding: 52px 0; }
.sez-alt { background: var(--alt); border-block: 1px solid var(--line); }
.schede { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.schede li { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; }
.schede h3 { margin-bottom: .3em; color: var(--accent-text); }
.schede p { margin: 0; }

.vai { text-align: center; margin: 1.6em 0 2em; font-weight: 700; }
.chip { display: inline-block; margin: 4px 4px; padding: 10px 20px; border-radius: 999px; background: var(--soft); color: var(--accent-text); text-decoration: none; min-height: 44px; }
.guida { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 22px 16px; margin: 0 auto 28px; max-width: 52rem; scroll-margin-top: 80px; }
.guida > h3 { font-size: 1.5rem; text-align: center; margin-bottom: 1em; }
.passi { list-style: none; padding: 0; margin: 0; display: grid; gap: 26px; }
.step { display: grid; gap: 14px; justify-items: center; text-align: center; }
.num { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; background: var(--main); color: var(--on-main); font-weight: 700; align-items: center; justify-content: center; margin-bottom: 8px; }
.txt h4 { margin-bottom: .3em; }
.txt p { margin: 0; color: var(--ink); max-width: 28rem; }
.fig { width: 190px; }

/* Disegni dei telefoni */
.phone { width: 100%; height: auto; display: block; }
.p-body { fill: #3a2a20; } .p-screen { fill: var(--bg); }
.bar, .row { fill: var(--soft); } .bar2 { fill: var(--alt); }
.card { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
.logo { fill: var(--main); }
.sbtn { fill: var(--main); }
.btn2 { fill: var(--soft); }
.dot { fill: var(--mute); } .ghost { fill: var(--line); }
.wall { fill: var(--soft); } .dim { fill: rgba(0,0,0,.45); } .sheet { fill: var(--card); }
.ic { stroke: var(--ink); fill: none; } .ic-f { fill: var(--ink); }
.hl { fill: none; stroke: var(--main); stroke-width: 3.5; }
.arrow { fill: none; stroke: var(--main); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.t-xs { font: 700 9px var(--sans); fill: var(--ink); }
.t-sm { font: 400 11px var(--sans); fill: var(--ink); }
.t-md { font: 700 15px var(--serif); fill: var(--ink); }
.t-btn { font: 700 11px var(--sans); fill: var(--on-main); }

.info { list-style: none; padding: 0; margin: 0 0 1.5em; display: grid; gap: 12px; }
.info li { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.pie { border-top: 1px solid var(--line); padding: 28px 0 40px; text-align: center; }
.pie p { margin-bottom: .4em; }

@media (min-width: 720px) {
  body { font-size: 1.125rem; }
  .hero { padding: 64px 0 72px; }
  .hero-in { grid-template-columns: 1.4fr 1fr; gap: 48px; }
  .hero-img img { width: 240px; height: 240px; border-radius: 52px; }
  .schede { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .guida { padding: 32px 28px; }
  .passi { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
  .fig { width: 210px; }
}
@media (min-width: 1000px) { .schede { grid-template-columns: repeat(4, 1fr); } .passi { grid-template-columns: repeat(4, 1fr); } .guida { max-width: none; } }