/* =====================================================================
   Mirella Benedetti — Psicologa Psicoterapeuta ad Arezzo
   Design system & stylesheet
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  --bg:#FAF7F2;
  --bg-alt:#F3EDE4;
  --surface:#FFFFFF;
  --surface-2:#FBF9F6;
  --line:#E8DFD2;
  --line-strong:#D8CBB8;
  --ink:#1E2A2D;
  --ink-2:#3D4C50;
  --muted:#6E7C80;
  --brand:#2F7E78;
  --brand-strong:#24635E;
  --brand-soft:#DCEFEC;
  --accent:#C4703F;
  --accent-soft:#F7E7DB;
  --gold:#B98D2B;
  --shadow-sm:0 1px 2px rgba(30,42,45,.06), 0 2px 8px rgba(30,42,45,.05);
  --shadow-md:0 4px 12px rgba(30,42,45,.07), 0 16px 40px rgba(30,42,45,.07);
  --shadow-lg:0 10px 24px rgba(30,42,45,.09), 0 32px 70px rgba(30,42,45,.10);
  --ring:0 0 0 3px rgba(47,126,120,.28);
  --radius-xs:8px;
  --radius-sm:14px;
  --radius:22px;
  --radius-lg:34px;
  --header-h:74px;
  --container:1180px;
  --serif:"Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:"Manrope", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --hero-glow-1:rgba(47,126,120,.20);
  --hero-glow-2:rgba(196,112,63,.18);
  --hero-glow-3:rgba(185,141,43,.14);
  color-scheme: light;
}

html[data-theme="dark"]{
  --bg:#0F1618;
  --bg-alt:#131E21;
  --surface:#162226;
  --surface-2:#1A282C;
  --line:#25373C;
  --line-strong:#324A50;
  --ink:#E9F1F0;
  --ink-2:#C9D8D8;
  --muted:#93A6A8;
  --brand:#5FC4BC;
  --brand-strong:#8ADDD6;
  --brand-soft:#123A38;
  --accent:#E08A57;
  --accent-soft:#3A2419;
  --gold:#DFB752;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
  --shadow-md:0 4px 12px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.35);
  --shadow-lg:0 10px 24px rgba(0,0,0,.5), 0 32px 70px rgba(0,0,0,.45);
  --ring:0 0 0 3px rgba(95,196,188,.35);
  --hero-glow-1:rgba(95,196,188,.20);
  --hero-glow-2:rgba(224,138,87,.16);
  --hero-glow-3:rgba(223,183,82,.12);
  color-scheme: dark;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px);}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink-2);
  font-size:1rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background-color .4s var(--ease), color .4s var(--ease);
}
img,svg,video{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
button,input,textarea,select{font:inherit;color:inherit;}
button{background:none;border:none;cursor:pointer;}
ul,ol{list-style:none;}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px;}
::selection{background:var(--brand);color:#fff;}

/* ---------- 3. TYPOGRAPHY ---------- */
h1,h2,h3,h4,h5{font-family:var(--serif);color:var(--ink);font-weight:600;line-height:1.14;letter-spacing:-.01em;}
h1{font-size:clamp(2.6rem,6.2vw,4.6rem);}
h2{font-size:clamp(2rem,4.2vw,3.1rem);}
h3{font-size:clamp(1.35rem,2.2vw,1.75rem);}
h4{font-size:1.18rem;font-family:var(--sans);font-weight:700;letter-spacing:0;line-height:1.35;}
p{margin-bottom:1.15rem;}
p:last-child{margin-bottom:0;}
strong{color:var(--ink);font-weight:700;}
small{font-size:.85rem;}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brand);margin-bottom:1rem;
}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.6;}
.is-center .eyebrow::after{content:"";width:28px;height:1px;background:currentColor;opacity:.6;}
.lead{font-size:clamp(1.06rem,1.5vw,1.2rem);color:var(--ink-2);}
.text-serif{font-family:var(--serif);}
.muted{color:var(--muted);}

/* ---------- 4. LAYOUT ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px;}
.container-narrow{max-width:840px;}
.section{padding:clamp(64px,9vw,120px) 0;position:relative;}
.section--alt{background:var(--bg-alt);}
.section--surface{background:var(--surface);}
.section--tight{padding-block:clamp(48px,6vw,80px);}
.section-head{max-width:730px;margin-bottom:clamp(2.4rem,5vw,3.6rem);}
.section-head.is-center{margin-inline:auto;text-align:center;}
.section-head p{margin-top:1rem;color:var(--muted);font-size:1.05rem;}
.grid{display:grid;gap:clamp(1.1rem,2.2vw,1.75rem);}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr));}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}

/* ---------- 5. BUTTONS ---------- */
.btn{
  --btn-bg:var(--brand); --btn-fg:#fff; --btn-bd:var(--brand);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.92rem 1.7rem;border-radius:999px;
  background:var(--btn-bg);color:var(--btn-fg);border:1.5px solid var(--btn-bd);
  font-size:.93rem;font-weight:700;
  cursor:pointer;position:relative;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  box-shadow:var(--shadow-sm);
}
.btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.btn:active{transform:translateY(-1px);}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--line-strong);box-shadow:none;}
.btn--ghost:hover{--btn-bd:var(--brand);--btn-fg:var(--brand);}
.btn--accent{--btn-bg:var(--accent);--btn-bd:var(--accent);}
.btn--light{--btn-bg:rgba(255,255,255,.16);--btn-fg:#fff;--btn-bd:rgba(255,255,255,.45);}
.btn--light:hover{--btn-bg:#fff;--btn-fg:var(--brand-strong);--btn-bd:#fff;}
.btn--sm{padding:.6rem 1.15rem;font-size:.82rem;}
.btn--block{width:100%;}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.9rem;
  color:var(--brand);transition:gap .3s var(--ease);
}
.link-arrow::after{content:"\2192";transition:transform .3s var(--ease);}
.link-arrow:hover{gap:.75rem;}
.link-arrow:hover::after{transform:translateX(3px);}

/* ---------- 6. HEADER ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:1200;
  background:var(--brand);color:#fff;padding:.8rem 1.2rem;border-radius:0 0 10px 0;font-weight:700;
}
.skip-link:focus{left:0;}

.site-header{
  position:fixed;inset:0 0 auto 0;z-index:900;height:var(--header-h);
  display:flex;align-items:center;
  background:var(--bg); /* fallback per browser senza color-mix */
  background:color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.is-stuck{border-bottom-color:var(--line);box-shadow:0 6px 26px rgba(30,42,45,.06);}
html[data-theme="dark"] .site-header.is-stuck{box-shadow:0 6px 26px rgba(0,0,0,.4);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;width:100%;}

.brand{display:flex;align-items:center;gap:.7rem;flex-shrink:0;min-width:0;}
.brand-mark{
  width:42px;height:42px;flex:0 0 42px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--brand),var(--brand-strong));
  color:#fff;font-family:var(--serif);font-size:1.35rem;line-height:1;
  box-shadow:0 6px 16px rgba(47,126,120,.32);
  transition:transform .5s var(--ease);
}
.brand:hover .brand-mark{transform:rotate(-12deg) scale(1.06);}
.brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0;}
.brand-text strong{font-family:var(--serif);font-size:1.16rem;font-weight:700;color:var(--ink);white-space:nowrap;}
.brand-text span{font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap;}
@media (max-width:600px){
  .container{padding-inline:18px;}
  .brand-text span{display:none;}
  .brand-text strong{font-size:1.02rem;}
  .brand-mark{width:38px;height:38px;flex-basis:38px;font-size:1.2rem;}
}
@media (max-width:380px){
  .brand-text strong{font-size:.94rem;}
  .header-actions{gap:.35rem;}
}

.nav ul{display:flex;align-items:center;gap:.2rem;}
.nav a{
  position:relative;display:block;padding:.55rem .8rem;border-radius:999px;
  font-size:.87rem;font-weight:600;color:var(--ink-2);
  transition:color .3s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:50%;bottom:.3rem;width:0;height:2px;border-radius:2px;
  background:var(--accent);transform:translateX(-50%);transition:width .35s var(--ease);
}
.nav a:hover{color:var(--ink);}
.nav a:hover::after{width:18px;}
.nav a.is-active{color:var(--brand);}
.nav a.is-active::after{width:18px;background:var(--brand);}

.header-actions{display:flex;align-items:center;gap:.55rem;flex-shrink:0;}
.icon-btn{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--line);color:var(--ink-2);background:var(--surface);
  transition:color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.icon-btn:hover{color:var(--brand);border-color:var(--brand);transform:translateY(-2px);}
.theme-toggle .fa-moon{display:none;}
html[data-theme="dark"] .theme-toggle .fa-moon{display:block;}
html[data-theme="dark"] .theme-toggle .fa-sun{display:none;}
.nav-toggle{display:none;}

.progress-track{position:absolute;left:0;right:0;bottom:0;height:2px;}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--accent));}

@media (max-width:1020px){
  .nav{
    position:fixed;top:0;right:0;bottom:0;width:min(340px,86vw);
    background:var(--surface);border-left:1px solid var(--line);
    padding:calc(var(--header-h) + 28px) 26px 32px;
    transform:translateX(102%);transition:transform .45s var(--ease);
    box-shadow:var(--shadow-lg);overflow-y:auto;z-index:950;
  }
  .nav.is-open{transform:translateX(0);}
  .nav ul{flex-direction:column;align-items:stretch;gap:0;}
  .nav a{padding:.9rem .4rem;font-size:1.02rem;border-bottom:1px solid var(--line);border-radius:0;}
  .nav a::after{display:none;}
  .nav-toggle{display:grid;}
  .header-cta{display:none;}
  .nav-extra{margin-top:1.6rem;display:grid;gap:.7rem;}
}
@media (min-width:1021px){.nav-extra{display:none;}}
.nav-backdrop{
  position:fixed;inset:0;background:rgba(15,22,24,.5);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;z-index:940;
}
.nav-backdrop.is-open{opacity:1;visibility:visible;}
body.nav-open{overflow:hidden;}

/* ---------- 7. FOOTER ---------- */
.site-footer{
  background:linear-gradient(180deg,var(--bg-alt),var(--bg));
  border-top:1px solid var(--line);padding-top:clamp(48px,6vw,76px);
}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2.4rem;}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.footer-col h5{font-family:var(--sans);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:1.1rem;font-weight:700;}
.footer-col li{margin-bottom:.6rem;}
.footer-col a{font-size:.93rem;color:var(--ink-2);transition:color .25s var(--ease),padding-left .25s var(--ease);}
.footer-col a:hover{color:var(--brand);padding-left:4px;}
.footer-about p{font-size:.93rem;color:var(--muted);max-width:36ch;}
.footer-bottom{
  margin-top:clamp(2.2rem,4vw,3.4rem);padding:1.5rem 0;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;align-items:center;
  font-size:.82rem;color:var(--muted);
}
.footer-bottom a{color:var(--muted);}
.footer-bottom a:hover{color:var(--brand);}
.footer-legal{display:flex;gap:1.2rem;flex-wrap:wrap;}
.socials{display:flex;gap:.6rem;margin-top:1.2rem;}
.socials a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line);color:var(--ink-2);transition:all .3s var(--ease);}
.socials a:hover{background:var(--brand);border-color:var(--brand);color:#fff;transform:translateY(-3px);}

/* ---------- 8. FLOATING ACTIONS ---------- */
.fab-stack{position:fixed;right:20px;bottom:20px;z-index:800;display:flex;flex-direction:column;gap:.7rem;align-items:flex-end;}
.fab{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:1.15rem;box-shadow:var(--shadow-md);
  transition:transform .35s var(--ease);
}
.fab:hover{transform:translateY(-4px) scale(1.05);}
.fab--call{background:linear-gradient(140deg,var(--brand),var(--brand-strong));}
.fab--wa{background:linear-gradient(140deg,#3fbf6b,#1f9d55);}
.fab--top{background:var(--surface);color:var(--ink-2);border:1.5px solid var(--line);opacity:0;visibility:hidden;transform:translateY(10px);}
.fab--top.is-visible{opacity:1;visibility:visible;transform:translateY(0);}
@media (max-width:520px){.fab{width:48px;height:48px;font-size:1rem;} .fab-stack{right:14px;bottom:14px;}}

/* ---------- 9. PRELOADER ---------- */
#preloader{
  position:fixed;inset:0;z-index:2000;display:grid;place-items:center;
  background:var(--bg);transition:opacity .7s var(--ease),visibility .7s;
}
#preloader.is-done{opacity:0;visibility:hidden;}
.preloader-mark{
  width:86px;height:86px;border-radius:50%;display:grid;place-items:center;margin-inline:auto;
  font-family:var(--serif);font-size:2.6rem;color:#fff;
  background:linear-gradient(140deg,var(--brand),var(--brand-strong));
  animation:breathe 2.2s var(--ease) infinite;
}
.preloader-text{margin-top:1.3rem;text-align:center;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);}
@keyframes breathe{0%,100%{transform:scale(1);box-shadow:0 0 0 0 var(--hero-glow-1);}50%{transform:scale(1.07);box-shadow:0 0 0 22px transparent;}}

/* ---------- 10. REVEAL ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease);}
[data-reveal="left"]{transform:translateX(-32px);}
[data-reveal="right"]{transform:translateX(32px);}
[data-reveal="zoom"]{transform:scale(.94);}
[data-reveal].is-visible{opacity:1;transform:translate(0,0) scale(1);}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
  [data-reveal]{opacity:1 !important;transform:none !important;}
}