/* ============================================================
   SimplyMed — foglio di stile del sito
   Palette ricavata soltanto dai due colori del marchio:
   #003060 (blu insegna) e #A8F0D8 (menta)
   ============================================================ */

:root{
  --sf-primario:#003060;
  --sf-accento:#A8F0D8;
  --sf-testo:#16232E;
  --sf-fondo:#FFFFFF;

  /* toni di appoggio ricavati dai due colori del marchio */
  --blu-notte:#002343;
  --blu-medio:#0C4C82;
  --menta-fonda:#0F6250;
  --menta-chiara:#E8FBF4;
  --panna:#F4F9F7;
  --nebbia:#E7EFF6;
  --riga:#C4D5E3;
  --testo-tenue:#485867;

  --misura:1180px;
  --misura-stretta:660px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--sf-fondo);
  color:var(--sf-testo);
  font-family:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  font-size:clamp(1rem,0.96rem + 0.22vw,1.125rem);
  line-height:1.6;
  overflow-x:hidden;
}

img{display:block;max-width:100%;height:auto}

h1,h2,h3{
  font-family:"Montserrat","Source Sans 3",system-ui,sans-serif;
  line-height:1.15;
  color:var(--sf-primario);
  margin:0 0 .6em;
  letter-spacing:-0.01em;
}

h1{font-size:clamp(1.85rem,1.3rem + 2.6vw,3.05rem);font-weight:700}
h2{font-size:clamp(1.45rem,1.15rem + 1.5vw,2.2rem);font-weight:700}
h3{font-size:clamp(1.08rem,1rem + .5vw,1.32rem);font-weight:600}

p{margin:0 0 1.1em;max-width:70ch}
ul,ol{margin:0 0 1.2em;padding-left:1.2em}
li{margin-bottom:.5em}

a{color:var(--blu-medio);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--sf-primario)}

:focus-visible{outline:3px solid var(--menta-fonda);outline-offset:2px}

strong{font-weight:600}

/* ---------- impianto ---------- */

.contenitore{width:min(100% - 2.4rem,var(--misura));margin-inline:auto}
.stretto{width:min(100% - 2.4rem,var(--misura-stretta));margin-inline:auto}

.sezione{padding-block:clamp(2.6rem,6vw,5.25rem)}
.sezione--panna{background:var(--panna)}
.sezione--nebbia{background:var(--nebbia)}
.sezione--blu{background:var(--sf-primario);color:#FFFFFF}
.sezione--blu h2,.sezione--blu h3{color:#FFFFFF}
.sezione--blu a{color:var(--sf-accento)}

.occhiello{
  font-family:"Montserrat",sans-serif;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--menta-fonda);
  margin:0 0 .9rem;
}
.sezione--blu .occhiello{color:var(--sf-accento)}

.guida{font-size:1.08em;color:var(--testo-tenue)}
.sezione--blu .guida{color:#D8E6F1}

/* ---------- testata ---------- */

.testata{
  position:sticky;
  top:0;
  z-index:50;
  background:#FFFFFF;
  border-bottom:1px solid var(--riga);
}

.testata-interno{
  width:min(100% - 2.4rem,var(--misura));
  margin-inline:auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.5rem 1.5rem;
  padding-block:.65rem;
}

/* il logo è un PNG a fondo trasparente: sta su bianco, senza campiture dietro */
.marchio{
  display:inline-flex;
  align-items:center;
  min-height:48px;
  padding:.25rem 0;
  text-decoration:none;
  background:none;
}
.marchio img{
  height:clamp(38px,9vw,54px);
  width:auto;
  background:none;
}

.accesso{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:.5rem 1.15rem;
  font-family:"Montserrat",sans-serif;font-size:.92rem;font-weight:600;
  color:var(--sf-primario);background:#FFFFFF;
  text-decoration:none;border:2px solid var(--sf-primario);border-radius:3px;
}
.accesso:hover{background:var(--sf-primario);color:#FFFFFF}

nav[data-sf-menu]{font-family:"Montserrat",sans-serif}
nav[data-sf-menu] ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.15rem 1rem;
}
nav[data-sf-menu] li{margin:0}
nav[data-sf-menu] a{
  display:inline-flex;align-items:center;
  min-height:44px;padding:.3rem .55rem;
  font-size:.95rem;font-weight:600;
  color:var(--sf-primario);text-decoration:none;
  border-bottom:3px solid transparent;
}
nav[data-sf-menu] a:hover{border-bottom-color:var(--sf-accento)}
nav[data-sf-menu] a[aria-current],
nav[data-sf-menu] a.attivo{border-bottom-color:var(--menta-fonda)}
nav[data-sf-menu] button{
  min-height:44px;min-width:44px;
  font-family:"Montserrat",sans-serif;font-weight:600;
  color:var(--sf-primario);background:var(--nebbia);
  border:1px solid var(--riga);border-radius:3px;
}

@media (max-width:960px){
  .accesso{order:3}
}

@media (max-width:860px){
  nav[data-sf-menu] ul{flex-direction:column;width:100%;gap:0}
  nav[data-sf-menu] li{border-top:1px solid var(--riga)}
  nav[data-sf-menu] a{width:100%;padding:.7rem .2rem;border-bottom:0}
  .accesso{width:100%}
}

/* ---------- prima schermata ---------- */

.apertura{
  position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:min(86vh,720px);
}
.apertura-foto{position:absolute;inset:0}
.apertura-foto img{width:100%;height:100%;object-fit:cover}
.apertura-fascia{
  position:relative;
  background:var(--sf-primario);
  color:#FFFFFF;
  padding-block:clamp(1.6rem,4vw,2.6rem);
}
.apertura-fascia h1{color:#FFFFFF;max-width:27ch}
.apertura-fascia p{color:#D8E6F1;max-width:58ch;margin-bottom:1.4rem}

/* ---------- pulsanti ---------- */

.bottone,.bottone-vuoto{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:.8rem 1.6rem;
  font-family:"Montserrat",sans-serif;font-size:1rem;font-weight:600;
  text-decoration:none;border-radius:3px;border:2px solid transparent;
}
.bottone{background:var(--sf-accento);color:var(--blu-notte)}
.bottone:hover{background:#8FE4C8;color:var(--blu-notte)}
.bottone-vuoto{border-color:currentColor;color:var(--sf-primario);background:transparent}
.sezione--blu .bottone-vuoto{color:var(--sf-accento)}
.bottone-vuoto:hover{background:rgba(0,48,96,.06)}

.azioni{display:flex;flex-wrap:wrap;gap:.8rem 1rem;align-items:center}
.azioni--staccate{margin-top:2rem}

/* ---------- accostamenti testo/foto ---------- */

.duetto{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center}

@media (min-width:900px){
  .duetto{grid-template-columns:1fr 1fr}
  .duetto--rovescio > *:first-child{order:2}
}

figure{margin:0}
figcaption{
  font-size:.9rem;color:var(--testo-tenue);
  padding-top:.6rem;border-top:1px solid var(--riga);
  margin-top:.6rem;max-width:60ch;
}
.sezione--blu figcaption{color:#D8E6F1;border-top-color:rgba(168,240,216,.4)}

/* ---------- lettura lunga ---------- */

.lettura p{max-width:64ch}
.lettura h2{max-width:30ch}
.lettura > p:first-of-type{font-size:1.12em}

.termini{list-style:none;padding:0;margin:1.6rem 0 0;border-top:1px solid var(--riga)}
.termini li{
  display:grid;gap:.15rem .9rem;
  padding:.95rem 0;margin:0;
  border-bottom:1px solid var(--riga);
}
.termini b{font-family:"Montserrat",sans-serif;font-size:1.02rem;color:var(--sf-primario)}
.termini span{color:var(--testo-tenue)}
.sezione--blu .termini{border-top-color:rgba(168,240,216,.4)}
.sezione--blu .termini li{border-bottom-color:rgba(168,240,216,.4)}
.sezione--blu .termini b{color:var(--sf-accento)}
.sezione--blu .termini span{color:#D8E6F1}

@media (min-width:720px){
  .termini li{grid-template-columns:11rem 1fr;align-items:baseline}
}

/* ---------- elenco moduli ---------- */

.moduli{display:grid;gap:0;margin:1.8rem 0 0}
.modulo{padding:1.4rem 0;border-top:2px solid var(--sf-primario)}
.modulo:last-child{border-bottom:2px solid var(--sf-primario)}
.modulo h3{margin-bottom:.35rem}
.modulo p{margin-bottom:.4rem}

.canone{
  display:inline-block;
  font-family:"Montserrat",sans-serif;
  font-size:.95rem;font-weight:700;
  color:var(--menta-fonda);
}
.attivazione{
  display:block;
  font-family:"Montserrat",sans-serif;
  font-size:.82rem;font-weight:600;
  color:var(--testo-tenue);
  margin-top:.15rem;
}
.sezione--blu .canone,.sezione--blu .attivazione{color:#D8E6F1}
.sezione--blu .modulo{border-top-color:var(--sf-accento)}
.sezione--blu .modulo:last-child{border-bottom-color:var(--sf-accento)}

@media (min-width:860px){
  .moduli{grid-template-columns:1fr 1fr;column-gap:2.6rem}
  .modulo:nth-last-child(2){border-bottom:2px solid var(--sf-primario)}
  .sezione--blu .modulo:nth-last-child(2){border-bottom-color:var(--sf-accento)}
}

/* ---------- galleria e videate ---------- */

[data-sf-galleria]{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
[data-sf-galleria] img{width:100%;height:100%;object-fit:cover}

[data-sf-videata]{margin-block:2rem}
[data-sf-videata] img{
  width:100%;
  border:1px solid var(--riga);
  box-shadow:0 12px 30px rgba(0,48,96,.14);
  background:#FFFFFF;
}

/* ---------- domande ---------- */

[data-sf-fisarmonica] details{border-bottom:1px solid var(--riga);padding:.4rem 0}
[data-sf-fisarmonica] summary{
  font-family:"Montserrat",sans-serif;font-weight:600;
  color:var(--sf-primario);cursor:pointer;
  padding:.7rem 0;min-height:44px;
}
[data-sf-fisarmonica] details p{margin:.2rem 0 1rem}

/* ---------- modulo contatti ---------- */

form[data-sf-modulo]{display:grid;gap:1rem;max-width:34rem}
form[data-sf-modulo] label{
  font-family:"Montserrat",sans-serif;font-weight:600;font-size:.95rem;
  display:block;margin-bottom:.3rem;
}
form[data-sf-modulo] input,
form[data-sf-modulo] textarea{
  width:100%;min-height:48px;padding:.7rem .8rem;
  font-family:inherit;font-size:1rem;color:var(--sf-testo);
  background:#FFFFFF;border:1px solid var(--sf-primario);border-radius:3px;
}
form[data-sf-modulo] textarea{min-height:9rem;resize:vertical}
form[data-sf-modulo] button{
  justify-self:start;min-height:50px;padding:.8rem 1.7rem;
  font-family:"Montserrat",sans-serif;font-weight:600;font-size:1rem;
  color:var(--blu-notte);background:var(--sf-accento);
  border:0;border-radius:3px;cursor:pointer;
}

/* ---------- piede ---------- */

.piede{
  background:var(--blu-notte);color:#D8E6F1;
  padding-block:clamp(2rem,4vw,3rem);font-size:.98rem;
}
.piede-interno{
  width:min(100% - 2.4rem,var(--misura));margin-inline:auto;
  display:grid;gap:1.8rem;
}
.piede h2{font-size:1.1rem;color:#FFFFFF;margin-bottom:.5rem}
.piede p{max-width:52ch;margin-bottom:.7rem}
.piede a{color:var(--sf-accento)}
.piede-nota{
  border-top:1px solid rgba(168,240,216,.28);
  padding-top:1.2rem;font-size:.88rem;color:#B7CBDC;max-width:80ch;
}

@media (min-width:820px){
  .piede-interno{grid-template-columns:1.4fr 1fr}
  .piede-nota{grid-column:1 / -1}
}

/* ---------- ingresso in dissolvenza ---------- */

[data-sf-scorri]{
  opacity:0;transform:translateY(14px);
  transition:opacity .6s ease,transform .6s ease;
}
[data-sf-scorri].sf-visibile,[data-sf-scorri].visibile{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-sf-scorri]{opacity:1;transform:none}
}

@media (max-width:640px){
  .apertura{min-height:76vh}
  .apertura-fascia p{margin-bottom:1.1rem}
  .bottone,.bottone-vuoto{width:100%}
}