/* ============================================================
   MAMÌ BEAUTY SALON — stile landing page (condiviso da tutte le LP)
   Si somma a /style.css (tokens nero/oro/fucsia, testata, fondo...)
   ============================================================ */

.lp-corpo {
  padding: calc(var(--testata-h) + clamp(2.5rem, 7vh, 4.5rem)) 0 clamp(4rem, 9vh, 6rem);
}
.lp-corpo .cont { max-width: 980px; }

.lp-briciole {
  font-size: .66rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--soft);
  margin-bottom: 1.6rem;
}
.lp-briciole a { color: var(--oro); }
.lp-briciole a:hover { text-decoration: underline; text-underline-offset: 3px; }

.lp-etichetta {
  display: inline-flex; align-items: center; gap: 1rem;
  font-size: .68rem; letter-spacing: .44em; text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 1.1rem;
}
.lp-etichetta::before { content: ''; width: 3rem; height: 1px; background: var(--oro); }

.lp-corpo h1 {
  font-family: var(--serif);
  font-weight: 330;
  font-size: clamp(2.2rem, 5.6vw, 4rem);
  line-height: 1.08;
  margin-bottom: 1.2rem;
}
.lp-corpo h1 em { font-style: italic; color: var(--fucsia-viva); }
.lp-intro { font-size: clamp(1.02rem, 1vw + .6rem, 1.18rem); color: var(--soft); max-width: 62ch; margin-bottom: 2.2rem; }
.lp-corpo h2 {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.2;
  margin: 2.8rem 0 1rem;
}
.lp-corpo h2 em { font-style: italic; color: var(--oro-chiaro); }
.lp-corpo p { color: var(--soft); margin-bottom: 1rem; max-width: 68ch; }

/* benefici */
.lp-benefici {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.8rem, 1.6vw, 1.4rem);
  margin: 2.2rem 0;
}
.lp-benefici .voce {
  border: 1px solid var(--hair);
  background: var(--nero-2);
  padding: 1.4rem 1.3rem;
  position: relative;
}
.lp-benefici .voce::before {
  content: '';
  position: absolute; left: 0; top: 0;
  width: 2.2rem; height: 1px;
  background: var(--oro);
}
.lp-benefici h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.1rem;
  margin-bottom: .4rem;
}
.lp-benefici p { font-size: .92rem; margin: 0; }
@media (max-width: 760px) { .lp-benefici { grid-template-columns: 1fr; } }

/* galleria */
.lp-galleria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.7rem, 1.4vw, 1.2rem);
  margin: 2.2rem 0;
}
.lp-galleria figure { overflow: hidden; background: var(--nero-2); }
.lp-galleria img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center top;
  transition: transform .8s var(--ease-out);
}
.lp-galleria figure:hover img { transform: scale(1.05); }
@media (max-width: 600px) {
  .lp-galleria { grid-template-columns: repeat(2, 1fr); }
  .lp-galleria figure:nth-child(3) { display: none; }
}

/* FAQ */
.lp-faq { margin: 2.2rem 0; }
.lp-faq details {
  border-top: 1px solid var(--hair);
  padding: 1rem 0;
}
.lp-faq details:last-child { border-bottom: 1px solid var(--hair); }
.lp-faq summary {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.12rem;
  cursor: pointer;
  list-style: none;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: '+'; color: var(--oro); font-size: 1.3rem; flex: none; transition: rotate .3s; }
.lp-faq details[open] summary::after { rotate: 45deg; }
.lp-faq details p { padding-top: .7rem; margin: 0; }

/* CTA finale */
.lp-cta {
  margin-top: 3rem;
  border: 1px solid var(--hair-oro);
  background: var(--nero-2);
  padding: clamp(1.8rem, 4vw, 3rem);
  text-align: center;
}
.lp-cta .titolo {
  font-family: var(--serif);
  font-weight: 340;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  margin-bottom: .6rem;
}
.lp-cta .titolo em { font-style: italic; color: var(--oro-chiaro); }
.lp-cta p { margin: 0 auto 1.6rem; max-width: 52ch; }
.lp-cta .azioni { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* link correlati */
.lp-correlate { margin-top: 2.6rem; }
.lp-correlate h2 { font-size: 1.2rem; margin-bottom: .8rem; }
.lp-correlate ul {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem 1.6rem;
}
.lp-correlate a { color: var(--avorio); border-bottom: 1px solid var(--hair); display: inline-block; padding-bottom: .15rem; }
.lp-correlate a:hover { color: var(--oro-chiaro); border-color: var(--oro); }
@media (max-width: 600px) { .lp-correlate ul { grid-template-columns: 1fr; } }

/* Telefono flottante (prenotazione solo telefonica) */
.tel-flottante {
  position: fixed;
  right: 1.2rem; bottom: 1.2rem;
  z-index: 3900;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--fucsia);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 20px rgba(232, 52, 143, .35);
  transition: transform .3s var(--ease-out), background .3s;
  animation: squilla 3.2s ease-in-out infinite;
}
.tel-flottante:hover { transform: scale(1.08); background: var(--fucsia-viva); }
.tel-flottante svg { width: 26px; height: 26px; fill: #fff; }
@keyframes squilla { 0%, 88%, 100% { rotate: 0deg; } 90% { rotate: 8deg; } 93% { rotate: -8deg; } 96% { rotate: 5deg; } }

/* footer compatto LP */
.lp-fondo {
  border-top: 1px solid var(--hair-oro);
  padding: 2rem 0;
  text-align: center;
}
.lp-fondo .legalese {
  display: flex; justify-content: center; gap: 1.2rem; flex-wrap: wrap;
  font-size: .74rem; color: var(--soft);
}
.lp-fondo .legalese a { text-decoration: underline; text-underline-offset: 3px; }
.lp-fondo .firma-mv a { color: var(--oro); text-decoration: none; }
.lp-fondo .firma-mv a:hover { text-decoration: underline; }


/* Mamì: angoli morbidi */
.lp-benefici .voce, .lp-cta, .listino-blocco { border-radius: 12px; }
.lp-galleria figure { border-radius: 10px; }