/* ============================================================
   SFVDT-Componenti.css — Pulsanti, card, form, blog, FAQ, ecc.
   Unità in rem/em. Raggio dei pulsanti e degli elementi = var(--raggio).
   ============================================================ */

/* ---------- PULSANTI ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5625rem; cursor: pointer;
  font-weight: 700; font-size: 1rem; padding: 0.5rem 1.5rem; border-radius: var(--raggio);
  border: 0.125rem solid transparent; transition: all var(--transizione); text-align: center;
}
.btn--primario { background: var(--c-primario); color: #fff; }
.btn--primario:hover { background: var(--c-primario-scuro); color: #fff; transform: translateY(-0.125rem); }
/* Comportamento COERENTE per categoria:
   PIENI (primario, chiaro, wa): hover -> tinta più scura + sollevamento
   CONTORNO (outline, ghost):    hover -> si riempiono + sollevamento */
.btn--chiaro { background: #fff; color: var(--c-primario-scuro); }
.btn--chiaro:hover { background: var(--c-neutro); color: var(--c-primario-scuro); transform: translateY(-0.125rem); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.75); }
.btn--ghost:hover { background: rgba(255,255,255,0.16); color: #fff; transform: translateY(-0.125rem); }
.btn--outline { background: transparent; color: var(--c-primario); border-color: var(--c-primario); }
.btn--outline:hover { background: var(--c-primario); color: #fff; transform: translateY(-0.125rem); }
.btn--wa { background: #25D366; color: #fff; }
.btn--wa:hover { background: #1faa52; color: #fff; transform: translateY(-0.125rem); }

/* ---------- CARD ---------- */
.card {
  background: #fff; border: var(--bordo-sottile) solid var(--c-bordo); border-radius: var(--raggio);
  padding: 1.625rem; box-shadow: var(--ombra-sm); transition: all var(--transizione); height: 100%;
}
.card:hover { box-shadow: var(--ombra); transform: translateY(-0.25rem); border-color: var(--c-chiaro); }
.card .icona { font-size: 1.9rem; display: block; margin-bottom: 0.625rem; }
.card h3 { color: var(--c-primario-scuro); margin-bottom: 0.5rem; }
.card p { color: #4a5b60; margin: 0; font-size: 0.97rem; }
.card .chip-lista { margin: 0 0 0.9rem; }

/* card-valore */
.valore { text-align: left; }
.valore h3 { display: flex; align-items: center; gap: 0.5rem; }
.valore h3::before { content: ""; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--c-primario); display: inline-block; }

/* ---------- EQUIPE ---------- */
.equipe-card { background:#fff; border:var(--bordo-sottile) solid var(--c-bordo); border-radius:var(--raggio); overflow:hidden; box-shadow:var(--ombra-sm); height:100%; }
.equipe-card .foto { aspect-ratio: 4/3; background: var(--c-neutro); }
.equipe-card .foto img { width:100%; height:100%; object-fit: cover; }
.equipe-card .foto.vuota { display:flex; align-items:center; justify-content:center; font-size:3rem; color:var(--c-primario); background:var(--c-chiaro); }
.equipe-card .corpo { padding: 1.375rem; }
.equipe-card .ruolo { color: var(--c-primario); font-weight: 700; font-size: 0.9rem; }
.equipe-card h3 { margin: 0.25rem 0 0.625rem; }
.equipe-card ul { font-size: 0.92rem; color:#4a5b60; }
.badge-soon { display:inline-block; background:var(--c-chiaro); color:var(--c-primario-scuro); font-size:0.75rem; font-weight:700; padding:0.1875rem 0.625rem; border-radius:var(--raggio); }
.equipe-card .autonomia { display:inline-block; margin-top:0.6rem; font-size:0.82rem; font-weight:600; color:var(--c-primario-scuro); background:var(--c-primario-soft); padding:0.25rem 0.6rem; border-radius:var(--raggio-sm); }
.equipe-azioni { display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:0.9rem; }
.equipe-azioni .btn { font-size:0.88rem; padding:0.45rem 1rem; }
.nota-autonomia { max-width:60rem; margin:0 auto; background:var(--c-neutro); border:var(--bordo-sottile) solid var(--c-bordo); border-left:0.25rem solid var(--c-primario); border-radius:var(--raggio-sm); padding:1.25rem 1.5rem; color:#3a4b50; font-size:0.95rem; }
.nota-autonomia strong { color:var(--c-primario-scuro); }

/* ---------- LISTA SERVIZI / PATOLOGIE ---------- */
.area-blocco { margin-bottom: 1.125rem; }
.area-blocco h3 { color: var(--c-primario-scuro); border-left: 0.25rem solid var(--c-primario); padding-left: 0.75rem; }
.chip-lista { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.625rem; }
.chip-lista li {
  background: #fff; border: var(--bordo-sottile) solid var(--c-bordo); border-radius: var(--raggio);
  padding: 0.5rem 1rem; font-size: 0.92rem; color: var(--c-testo); margin: 0;
}

/* ---------- BLOG ---------- */
.blog-card { background:#fff; border:var(--bordo-sottile) solid var(--c-bordo); border-radius:var(--raggio); overflow:hidden; box-shadow:var(--ombra-sm); transition:all var(--transizione); height:100%; display:flex; flex-direction:column; }
.blog-card:hover { box-shadow:var(--ombra); transform: translateY(-0.25rem); }
.blog-card .copertina { aspect-ratio: 16/10; overflow:hidden; }
.blog-card .copertina img { width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.blog-card:hover .copertina img { transform: scale(1.05); }
.blog-card .corpo { padding: 1.375rem; display:flex; flex-direction:column; flex:1; }
.blog-meta { font-size: 0.8rem; color: var(--c-primario); font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:0.5rem; }
.blog-card h3 { margin-bottom: 0.5rem; }
.blog-card p { color:#4a5b60; font-size:0.95rem; flex:1; }
.blog-card .leggi { margin-top: 0.75rem; font-weight: 700; }

.tag-lista { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.875rem; }
.tag-lista li { margin:0; }
.tag {
  display:inline-block; background:var(--c-primario-soft); color:var(--c-primario-scuro);
  font-size:0.8rem; padding:0.25rem 0.75rem; border-radius:var(--raggio);
}

/* articolo singolo */
.articolo { max-width: 47.5rem; margin: 0 auto; }
.articolo .copertina-grande { border-radius: var(--raggio); overflow:hidden; box-shadow: var(--ombra); margin-bottom: 1.625rem; aspect-ratio:16/9; }
.articolo .copertina-grande img { width:100%; height:100%; object-fit:cover; }
.articolo h2 { margin-top: 1.6em; }
.articolo .info { color:#6b7b80; font-size:0.92rem; margin-bottom: 0.5rem; }
.torna { display:block; width: fit-content; margin-bottom: 1.125rem; font-weight:700; }
.articolo blockquote { margin: 1.6rem 0; padding: 1.1rem 1.4rem; border-left: 0.25rem solid var(--c-primario); background: var(--c-neutro); border-radius: var(--raggio-sm); font-style: italic; }
.articolo blockquote p { margin: 0 0 0.6rem; }
.articolo blockquote p:last-child { margin: 0; }
.citazione-autore { font-style: normal; font-weight: 700; color: var(--c-primario-scuro); }
.galleria { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.75rem; margin-top: 1rem; }
.galleria-foto { display: block; aspect-ratio: 1/1; overflow: hidden; border-radius: var(--raggio-sm); box-shadow: var(--ombra-sm); }
.galleria-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.galleria-foto:hover img { transform: scale(1.06); }
.leggi { font-weight: 700; }

/* ---------- PROFILO PROFESSIONISTA ---------- */
.prof-testata { display: flex; gap: 1.75rem; align-items: flex-start; margin-bottom: 0.5rem; }
.prof-foto {
  width: 13rem; flex: none; border-radius: var(--raggio);
  box-shadow: var(--ombra-sm); object-fit: cover; aspect-ratio: 3/4;
}
.prof-testata > div { flex: 1 1 0; }
.prof-testata > div > p:first-child { margin-top: 0; }
.prof-testata .autonomia { margin-bottom: 1rem; }

.cv-voce {
  border-left: 0.125rem solid var(--c-bordo);
  padding: 0 0 0 1.125rem;
  margin-bottom: 1.375rem;
  position: relative;
}
.cv-voce::before {
  content: ""; position: absolute; left: -0.3125rem; top: 0.4rem;
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--c-primario);
}
.cv-voce h3 { margin: 0 0 0.15rem; font-size: 1.02rem; line-height: 1.35; }
.cv-voce .cv-meta { color: #6b7b80; font-size: 0.88rem; margin: 0 0 0.35rem; }
.cv-voce p:not(.cv-meta) { margin: 0; font-size: 0.95rem; }

/* ---------- PROFESSIONISTI DI UN'AREA (pagina Servizi) ---------- */
.area-professionisti { margin-top: 1.5rem; }
.area-professionisti .etichetta {
  display: block; text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.72rem; font-weight: 700; color: #6b7b80; margin-bottom: 0.6rem;
}
.area-professionisti ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.area-professionisti li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; }
.area-professionisti .prof-link {
  font-weight: 700; color: var(--c-primario-scuro);
  border-bottom: 0.125rem solid var(--c-primario-soft);
}
.area-professionisti .prof-link span { transition: margin-left .2s ease; }
.area-professionisti .prof-link:hover { color: var(--c-primario); border-bottom-color: var(--c-primario); }
.area-professionisti .prof-link:hover span { margin-left: 0.2rem; }
.area-professionisti .ruolo { font-size: 0.86rem; color: #6b7b80; }

/* ---------- PREZZO SU SCHEDA SERVIZIO ---------- */
.card .prezzo {
  margin-top: 0.85rem; display: inline-block;
  font-weight: 700; color: var(--c-primario-scuro);
  background: var(--c-primario-soft); border-radius: var(--raggio);
  padding: 0.3rem 0.75rem; font-size: 0.95rem;
}

/* ---------- PERCORSI NUTRIZIONALI (pagina Servizi) ---------- */
.percorsi { margin-top: 1.75rem; }
.percorsi .etichetta {
  display: block; text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.72rem; font-weight: 700; color: #6b7b80; margin-bottom: 0.7rem;
}

/* ---------- RECENSIONI ---------- */
.recensione { background:#fff; border:var(--bordo-sottile) solid var(--c-bordo); border-radius:var(--raggio); padding:1.5rem; box-shadow:var(--ombra-sm); height:100%; }
.recensione .stelle { color:#F5A623; letter-spacing:0.125em; margin-bottom:0.625rem; }
.recensione .testo { font-style: italic; color:var(--c-testo); }
.recensione .autore { margin-top:0.875rem; font-weight:700; color:var(--c-primario-scuro); }
.recensione .fonte { font-size:0.82rem; color:#6b7b80; font-weight:400; }

/* ---------- FAQ ---------- */
.faq-item { background:#fff; border:var(--bordo-sottile) solid var(--c-bordo); border-radius:var(--raggio-sm); margin-bottom:0.75rem; overflow:hidden; }
.faq-item summary {
  cursor:pointer; padding:1.125rem 1.375rem; font-weight:700; color:var(--c-primario-scuro);
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:0.875rem;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; font-size:1.5rem; color:var(--c-primario); transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .risposta { padding: 0 1.375rem 1.25rem; color:#4a5b60; }

/* ---------- FORM ---------- */
.form { background:#fff; border:var(--bordo-sottile) solid var(--c-bordo); border-radius:var(--raggio); padding:1.875rem; box-shadow:var(--ombra-sm); }
.campo { margin-bottom:1.125rem; }
.campo label { display:block; font-weight:600; margin-bottom:0.375rem; color:var(--c-primario-scuro); font-size:0.95rem; }
.campo input, .campo textarea, .campo select {
  width:100%; padding:0.75rem 0.875rem; border:0.09375rem solid var(--c-bordo); border-radius:var(--raggio-sm);
  font-family:inherit; font-size:1rem; color:var(--c-testo); transition:border var(--transizione); background:#fff;
}
.campo input:focus, .campo textarea:focus, .campo select:focus { outline:none; border-color:var(--c-primario); }
.campo textarea { min-height:8.125rem; resize:vertical; }
.form-esito { padding:0.875rem 1.125rem; border-radius:var(--raggio-sm); margin-bottom:1.125rem; font-weight:600; display:none; }
.form-esito.ok { display:block; background:#e6f7ec; color:#1c7a43; border:var(--bordo-sottile) solid #b6e6c7; }
.form-esito.ko { display:block; background:#fdecec; color:#b33; border:var(--bordo-sottile) solid #f5c2c2; }

/* riquadro contatti */
.riquadro-contatti { background:var(--c-primario-scuro); color:#eaf7fa; border-radius:var(--raggio); padding:1.875rem; }
.riquadro-contatti h3 { color:#fff; }
.riquadro-contatti strong { color:#fff; }
.riquadro-contatti a { color:#fff; font-weight:600; }
.riquadro-contatti .voce { display:flex; gap:0.75rem; margin-bottom:0.875rem; align-items:flex-start; }
.riquadro-contatti .voce .em { font-size:1.2rem; }
.mappa { border:0; width:100%; height:20rem; border-radius:var(--raggio); box-shadow:var(--ombra); }

/* CTA finale */
.cta-finale { background: linear-gradient(120deg, var(--c-primario), var(--c-primario-scuro)); color:#fff; border-radius:var(--raggio); padding:3rem; text-align:center; }
.cta-finale h2 { color:#fff; }
.cta-finale p { max-width:48ch; margin:0 auto 1.375rem; opacity:.95; }
.cta-finale .azioni { display:flex; gap:0.875rem; justify-content:center; flex-wrap:wrap; }

/* WhatsApp flottante */
.wa-flottante {
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:90; width:3.625rem; height:3.625rem; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; box-shadow:0 0.375rem 1.25rem rgba(0,0,0,.25); transition:transform var(--transizione);
}
.wa-flottante:hover { transform:scale(1.08); color:#fff; }

/* ---------- BOX PRENOTAZIONE (sistema esterno) ---------- */
.prenota-box { background: linear-gradient(120deg, var(--c-chiaro), #fff); border: var(--bordo-sottile) solid var(--c-bordo); border-left: 0.375rem solid var(--c-primario); border-radius: var(--raggio); padding: 1.875rem; box-shadow: var(--ombra-sm); }
.prenota-box h2 { margin: 0 0 0.5rem; }
.prenota-box p { color: #3a4b50; margin: 0 0 1.125rem; max-width: 60ch; }
.prenota-info { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0.875rem; }
.prenota-info li { margin: 0; color: #3a4b50; line-height: 1.6; }
.prenota-fascia { font-size: 0.9rem; color: #4a5b60; margin: 0.7rem 0 0; }