/* Eminflex · "Il tuo riposo" — quiz-home + pagine modello
   Palette istituzionale: grigio #54575b, giallo #f7bf00. Font: Montserrat.
   Layout: home con hero-quiz, sezioni editoriali calde, tre pagine modello a colonna. */

:root{
  /* colori — valori light */
  --bg:#f3f2ef;        /* greige chiaro, lega col grigio istituzionale */
  --surface:#ffffff;
  --surface-2:#eceae4;
  --ink:#2f3032;       /* testo */
  --ink-soft:#6c6e72;  /* secondario, vicino all'istituzionale 54575b */
  --grey:#54575b;      /* grigio istituzionale */
  --line:#e2e0da;
  --accent:#f7bf00;    /* giallo istituzionale */
  --accent-deep:#c99a00; /* giallo scurito: per testo/hover, leggibile su chiaro */
  --accent-ink:#2f3032; /* testo sopra il giallo */
  --sel:#fbeeb6;
  --sel-line:#e7cf63;
  --shadow:rgba(47,48,50,.13);
  --font:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --max:1240px;
  font-size:113%;        /* scala tutto il testo verso l'alto */
  color-scheme:light;    /* pagina sempre in chiaro, niente dark mode */
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
/* Tema chiaro unico — dark mode disattivato su richiesta del cliente. */

*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font);
  line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.02em;text-wrap:balance}

.eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey);margin:0 0 16px}

/* ---------- bottoni ---------- */
.btn{appearance:none;display:inline-flex;align-items:center;gap:12px;font-family:var(--font);
  font-weight:700;font-size:.98rem;cursor:pointer;border:none;border-radius:6px;
  padding:16px 26px;background:var(--accent);color:var(--accent-ink);
  transition:background .18s,transform .08s,box-shadow .18s}
.btn:hover{background:#ffcb1f;transform:translateY(-1px);box-shadow:0 10px 24px -12px var(--accent-deep)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid var(--grey);outline-offset:3px}
.btn.dark{background:var(--accent);color:var(--accent-ink)}
.btn.dark:hover{background:#ffcb1f;box-shadow:0 10px 24px -12px var(--accent-deep)}
/* azione secondaria: link in grigio scuro, non un bottone */
.btn.ghost{background:transparent;color:var(--ink);border:none;padding:16px 6px;font-weight:600;
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)}
.btn.ghost:hover{background:transparent;color:var(--ink);box-shadow:none;transform:none;text-decoration-color:var(--grey)}
.tbtn{appearance:none;background:none;border:none;cursor:pointer;color:var(--ink-soft);
  font-family:var(--font);font-size:.9rem;padding:8px 0;text-decoration:underline;
  text-underline-offset:4px;text-decoration-color:var(--line)}
.tbtn:hover{color:var(--ink)}

/* ---------- topbar ---------- */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.topbar .in{max-width:var(--max);margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:16px 5%}
.brand{display:flex;align-items:center;line-height:1}
.brand .logo{height:30px;width:auto;display:block}
@media (max-width:480px){.brand .logo{height:26px}}
.topnav{display:flex;gap:26px;align-items:center;font-size:.86rem}
.topnav a{color:var(--ink-soft)}
.topnav a:hover{color:var(--ink)}
@media (max-width:640px){.topnav a:not(.navbtn){display:none}}
.navbtn{padding:11px 18px;font-size:.82rem;border-radius:6px;background:var(--accent);color:var(--accent-ink);font-weight:700}
.navbtn:hover{background:#ffcb1f}

/* ---------- hero ---------- */
.hero{position:relative;background:
    linear-gradient(100deg, rgba(243,242,239,.97) 0%, rgba(243,242,239,.86) 36%, rgba(243,242,239,.5) 66%, rgba(243,242,239,.2) 100%),
    url('hero-bg.jpg');
  background-size:cover;background-position:center right}
.hero-in{max-width:var(--max);margin:0 auto;padding:clamp(34px,6vh,70px) 5% clamp(40px,7vh,78px);
  display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,54px);align-items:center}
@media (min-width:880px){.hero-in{grid-template-columns:1.02fr .98fr}}
/* mobile: velo quasi pieno sotto il testo per garantire il contrasto */
@media (max-width:879px){
  .hero{background:
    linear-gradient(180deg, rgba(243,242,239,.97), rgba(243,242,239,.92)),
    url('hero-bg.jpg');
    background-size:cover;background-position:center}
}
.hero-copy .big{font-size:clamp(2.4rem,6.5vw,4rem);line-height:1.04;font-weight:800;margin:0 0 20px}
.hero-copy .big em{font-style:normal;color:var(--accent-deep)}
.hero-copy .intro{font-size:1.08rem;color:var(--ink-soft);max-width:30em;margin:0 0 18px;font-weight:400}
.hero-copy .micro{font-size:.82rem;color:var(--ink-soft);font-weight:500;display:flex;flex-wrap:wrap;gap:8px 16px}
.hero-copy .micro span{position:relative;padding-left:16px}
.hero-copy .micro span::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* card del quiz */
.quizcard{background:var(--surface);border:1px solid var(--line);border-radius:20px;
  box-shadow:0 30px 70px -34px var(--shadow);padding:clamp(22px,3.5vw,34px)}
.qhead{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:24px;margin-bottom:22px}
.qlabel{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.dots{display:flex;gap:6px;align-items:center;flex-wrap:wrap;max-width:140px;justify-content:flex-end}
.dots i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--sel-line);
  background:transparent;transition:background .35s,transform .35s}
.dots i.on{background:var(--accent);border-color:var(--accent);transform:scale(1.1)}
.screen{animation:rise .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.q-intro .ey{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin:0 0 12px}
.q-intro h2{font-size:clamp(1.6rem,4.2vw,2.15rem);line-height:1.08;margin:0 0 14px;font-weight:800}
.q-intro .lede{font-size:1rem;color:var(--ink-soft);margin:0 0 20px;font-weight:400}
.q-intro .lede b{color:var(--ink);font-weight:600}
.promise{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:8px 14px}
.promise li{position:relative;padding-left:16px;font-size:.84rem;color:var(--ink-soft);font-weight:500}
.promise li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--accent)}

.qnum{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin:0 0 6px}
.qtag{font-size:.74rem;color:var(--ink-soft);font-weight:500;margin:0 0 16px}
.q{font-size:clamp(1.35rem,3.6vw,1.9rem);line-height:1.14;margin:0 0 8px;font-weight:800}
.opts{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.opt{appearance:none;text-align:left;font-family:var(--font);font-size:.98rem;color:var(--ink);
  background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:16px 17px;
  cursor:pointer;line-height:1.4;display:flex;align-items:center;gap:13px;font-weight:500;
  transition:border-color .16s,background .16s,transform .08s}
.opt .mk{flex:none;width:20px;height:20px;border-radius:50%;border:1.6px solid var(--line);transition:.16s}
.opt:hover{border-color:var(--sel-line)}
.opt:active{transform:scale(.993)}
.opt.pick{background:var(--sel);border-color:var(--sel-line)}
.opt.pick .mk{border-color:var(--accent-deep);background:var(--accent);box-shadow:inset 0 0 0 4px var(--sel)}
.opt:focus-visible{outline:2.5px solid var(--accent-deep);outline-offset:2px}
.qbar{height:3px;background:var(--surface-2);border-radius:3px;margin:22px 0 0;overflow:hidden}
.qbar i{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .35s}
.qnav{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px}

/* ---------- ribbon ---------- */
.ribbon{border-block:1px solid var(--line);background:var(--surface-2)}
.ribbon .in{max-width:var(--max);margin:0 auto;padding:22px 5%;display:flex;flex-wrap:wrap;
  gap:8px 40px;justify-content:space-between;font-size:1.1rem;font-weight:600;color:var(--ink)}
.ribbon .in i{color:var(--grey);font-style:normal}

/* ---------- sezione "ti riconosci" ---------- */
.signals{max-width:var(--max);margin:0 auto;padding:clamp(54px,8vh,92px) 5%;
  display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,60px)}
@media (min-width:820px){.signals{grid-template-columns:1fr 1.25fr;align-items:start}}
.signals h2{font-size:clamp(1.7rem,4.5vw,2.5rem);line-height:1.12;margin:0 0 14px}
.signals .sub{color:var(--ink-soft);font-weight:400}
.siglist{display:flex;flex-direction:column}
.siglist button{display:flex;align-items:center;gap:18px;width:100%;background:transparent;
  color:var(--ink);text-align:left;border:none;border-top:1px solid var(--line);
  padding:22px 2px;cursor:pointer;font-family:var(--font)}
.siglist button:last-child{border-bottom:1px solid var(--line)}
.siglist .n{color:var(--grey);font-size:.74rem;font-weight:700;flex:none}
.siglist .tx{font-size:1.02rem;font-weight:500}
.siglist .ar{margin-left:auto;color:var(--ink-soft);transition:transform .16s}
.siglist button:hover .ar{transform:translateX(4px);color:var(--ink)}

/* ---------- come funziona ---------- */
.journey{background:var(--surface-2);border-block:1px solid var(--line)}
.journey .in{max-width:var(--max);margin:0 auto;padding:clamp(50px,7vh,84px) 5%;text-align:center}
.journey h2{font-size:clamp(1.7rem,4.5vw,2.5rem);line-height:1.12;margin:0 auto 12px;max-width:16em}
.steps{text-align:left;display:grid;grid-template-columns:1fr;gap:24px;max-width:960px;margin:40px auto 34px}
@media (min-width:720px){.steps{grid-template-columns:repeat(3,1fr);gap:40px}}
.steps span{font-size:.68rem;letter-spacing:.14em;font-weight:700;color:var(--grey)}
.steps h3{font-size:1.25rem;margin:14px 0 8px}
.steps p{font-size:.95rem;color:var(--ink-soft);font-weight:400}

/* ---------- banda fotografica (foto in produzione, gradiente in anteprima) ---------- */
.photo{position:relative;min-height:300px;display:flex;align-items:flex-end;
  /* In produzione la foto Unsplash appare sotto il velo; in anteprima resta il gradiente */
  background:
    linear-gradient(110deg, rgba(47,48,50,.80), rgba(84,87,91,.30) 56%, rgba(247,191,0,.22)),
    url('hero-bedroom.jpg');
  background-size:cover;background-position:center}
.photo .cap{max-width:var(--max);width:100%;margin:0 auto;padding:40px 5%;color:#fff}
.photo .cap .eyebrow{color:var(--accent)}
.photo .cap h2{font-size:clamp(1.7rem,4.5vw,2.6rem);line-height:1.12;max-width:14em;color:#fff}
.photo .cap p{max-width:34em;margin:14px 0 0;color:rgba(255,255,255,.9);font-weight:400}

/* ---------- griglia modelli ---------- */
.models{max-width:var(--max);margin:0 auto;padding:clamp(54px,8vh,92px) 5%}
.models .head{max-width:34em;margin:0 0 clamp(26px,4vh,42px)}
.models .head h2{font-size:clamp(1.8rem,5vw,2.6rem);line-height:1.1;margin:0 0 12px}
.models .head p{color:var(--ink-soft);font-weight:400}
.mgrid{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:720px){.mgrid{grid-template-columns:repeat(3,1fr)}}
.mcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:24px 22px;color:inherit;transition:transform .16s,border-color .16s,box-shadow .16s}
.mcard:hover{transform:translateY(-4px);border-color:var(--sel-line);box-shadow:0 22px 48px -28px var(--shadow)}
.mcard .tag{font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin:0 0 8px}
.mcard h3{font-size:1.7rem;margin:0 0 2px}
.mthumb{width:100%;height:118px;object-fit:contain;margin:10px 0 10px;background:transparent}
.mcard .mt{color:var(--ink-soft);font-size:.92rem;margin:0 0 16px;flex:1;font-weight:400}
.scale-sm{display:flex;gap:5px;margin-bottom:16px}
.scale-sm i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.scale-sm i.on{background:var(--accent)}
.mcard .go{font-weight:700;font-size:.9rem;color:var(--ink);display:inline-flex;align-items:center;gap:7px}
.mcard .go .ar{transition:transform .16s}
.mcard:hover .go .ar{transform:translateX(4px)}

/* ---------- quiz a schermo intero ---------- */
.quizpage{max-width:760px;margin:0 auto;padding:clamp(26px,5vh,54px) 5% 70px;min-height:70vh}
.quiztop{display:flex;justify-content:space-between;align-items:center;margin:14px 0 14px;gap:16px}
.quiztop .c{font-size:.78rem;color:var(--ink-soft);font-weight:600;font-variant-numeric:tabular-nums}
.bigbar{height:3px;background:var(--surface-2);border-radius:3px;margin-bottom:38px;overflow:hidden}
.bigbar i{display:block;height:100%;background:var(--accent);transition:width .35s}

/* ---------- risultato fuso ---------- */
.result{max-width:900px;margin:0 auto;padding:clamp(30px,6vh,64px) 5% 70px}
.rblock{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:clamp(24px,4vw,38px);margin-bottom:20px}
.rblock.story{background:var(--surface-2)}
.story h2{font-size:clamp(1.5rem,4vw,2.1rem);line-height:1.12;margin:0 0 16px}
.story p{font-size:1.08rem;line-height:1.7;color:var(--ink);margin:0;font-weight:400}
.story p b{font-weight:600}
.story .reco{margin:18px 0 6px;font-size:1.14rem;line-height:1.5;color:var(--ink)}
.story .reco b{font-weight:700}
.rmodel .kicker{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin:0 0 10px}
.rmodel .model{font-size:clamp(2.4rem,8vw,3.4rem);line-height:1;margin:0 0 4px;font-weight:800}
.rmodel .type{color:var(--ink-soft);font-size:1rem;margin:0 0 18px;font-weight:500}
.firm{display:flex;align-items:center;gap:12px;margin:0 0 20px;padding:13px 15px;
  background:var(--bg);border:1.5px solid var(--line);border-radius:12px}
.firm .scale{display:flex;gap:6px}
.firm .scale i{width:11px;height:11px;border-radius:50%;background:var(--line)}
.firm .scale i.on{background:var(--accent)}
.firm .lab{font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.rmodel .why{font-size:1.06rem;line-height:1.65;margin:0 0 24px;font-weight:400}
.rmodel .why b{font-weight:600}
.rmodel .qnav{margin:0}

/* gate */
.gate h3{font-size:clamp(1.3rem,3.5vw,1.7rem);margin:0 0 8px}
.gate .sub{color:var(--ink-soft);margin:0 0 22px;font-weight:400}
.gate .sub b{color:var(--ink)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
.field input{font-family:var(--font);font-size:1rem;color:var(--ink);background:var(--bg);
  border:1.5px solid var(--line);border-radius:10px;padding:13px 14px}
.field input:focus{outline:none;border-color:var(--accent-deep)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:460px){.row2{grid-template-columns:1fr}}
.consent{display:flex;align-items:flex-start;gap:10px;margin:6px 0 20px;font-size:.88rem;color:var(--ink-soft);line-height:1.45;font-weight:400}
.consent input{margin-top:3px;width:18px;height:18px;accent-color:var(--accent-deep);flex:none}
.consent a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.err{color:#b4471f;font-size:.86rem;margin:-4px 0 12px;min-height:0;font-weight:500}
.demo{display:inline-block;font-size:.64rem;font-weight:700;letter-spacing:.12em;color:var(--grey);
  border:1px solid var(--sel-line);border-radius:4px;padding:4px 8px;margin-bottom:16px}
.lead-ok{font-size:.95rem;color:var(--ink);background:var(--sel);border:1px solid var(--sel-line);
  border-radius:10px;padding:16px;margin-top:4px;font-weight:500}
.consult{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.consult div{max-width:34em}
.consult h3{font-size:1.3rem;margin:0 0 6px}
.consult p{color:var(--ink-soft);margin:0;font-weight:400}
.proto{font-size:.78rem;color:var(--ink-soft);margin:18px 0 0;font-weight:400}
.disclaimer{font-size:.78rem;color:var(--ink-soft);margin:22px 0 0;font-weight:400;line-height:1.5}

/* ---------- pagine modello ---------- */
.mpage{max-width:760px;margin:0 auto;padding:clamp(28px,5vh,60px) 5%}
.crumb{display:inline-flex;align-items:center;gap:7px;font-size:.88rem;color:var(--ink-soft);margin-bottom:26px}
.crumb:hover{color:var(--ink)}
.mhero .pre{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin:0 0 14px}
.mhero h1{font-size:clamp(2.8rem,11vw,4.6rem);line-height:1;margin:0 0 10px;font-weight:800}
.mhero .type{font-size:1.08rem;color:var(--ink-soft);margin:0 0 18px;font-weight:500}
.mhero-img{display:block;width:100%;max-width:560px;height:auto;margin:4px 0 26px;background:transparent}
.mhero .essence{font-size:clamp(1.2rem,3.2vw,1.5rem);line-height:1.35;margin:0 0 30px;font-weight:600}
.prose h2{font-size:clamp(1.3rem,3.5vw,1.7rem);line-height:1.15;margin:38px 0 12px}
.prose p{font-size:1.06rem;line-height:1.68;color:var(--ink);margin:0 0 15px;max-width:66ch;font-weight:400}
.prose p.soft{color:var(--ink-soft)}
.prose b{font-weight:600}
.spec{margin:38px 0;border-top:1px solid var(--line)}
.spec .row{display:flex;justify-content:space-between;gap:20px;padding:14px 2px;border-bottom:1px solid var(--line)}
.spec .k{color:var(--ink-soft)}
.spec .v{font-weight:600;text-align:right}
.ctaband{margin:44px 0 10px;padding:clamp(24px,4vw,34px);background:var(--surface);
  border:1px solid var(--line);border-radius:18px}
.ctaband h2{font-size:clamp(1.4rem,4vw,1.9rem);line-height:1.12;margin:0 0 10px}
.ctaband p{color:var(--ink-soft);margin:0 0 20px;font-weight:400}
.ctaband .qnav{margin:0}

/* modulo contatti generico (pagine modello) */
.leadform{margin:46px 0 6px;padding-top:40px;border-top:1px solid var(--line)}
.lf-in{display:grid;grid-template-columns:1fr;gap:26px}
@media (min-width:720px){.lf-in{grid-template-columns:1fr 1fr;gap:46px;align-items:start}}
.lf-copy .eyebrow{margin-bottom:12px}
.lf-copy h2{font-size:clamp(1.4rem,4vw,1.9rem);line-height:1.12;margin:0 0 10px}
.lf-copy p{color:var(--ink-soft);font-weight:400;margin:0}
.lf-form{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:clamp(20px,3vw,28px)}
.lf-form .btn{width:100%;justify-content:center;margin-top:4px}
.lf-ok{font-size:.95rem;color:var(--ink);background:var(--sel);border:1px solid var(--sel-line);border-radius:10px;padding:16px;font-weight:500}
.lf-note{font-size:.76rem;color:var(--ink-soft);margin:14px 0 0;font-weight:400}
.cta-reassure{font-size:.82rem;color:var(--ink-soft);margin:10px 0 0;font-weight:500}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);margin-top:10px}
.foot .in{max-width:var(--max);margin:0 auto;padding:32px 5%;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:14px;align-items:center;color:var(--ink-soft);font-size:.88rem}
.foot .tel{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}