/* V.M. Total Look – foglio di stile unico
   Valori ripresi dai CSS Elementor dell'originale (vedi analisi/ANALISI.md). */

/* ---------- Font locali (sottoinsieme latin, variabili) ---------- */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/assets/fonts/playfair-display.woff2) format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400 900; font-display: swap; src: url(/assets/fonts/playfair-display-italic.woff2) format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/roboto.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url(/assets/fonts/poppins-300.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 300; font-display: swap; src: url(/assets/fonts/poppins-300-italic.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/poppins-400.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/poppins-500.woff2) format("woff2"); }
@font-face { font-family: "Roboto"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/roboto-italic.woff2) format("woff2"); }

/* ---------- Variabili ---------- */
:root {
  --c-green: #24453f;
  --c-brown: #6c4c36;
  --c-text: #666;
  --c-dark: #333;
  --c-white: #fff;
  --c-footer: #222;
  --c-footer-bottom: #111;
  --c-footer-text: #d8d8d8;
  --c-footer-title: #f6f6f6;
  --c-overlay: #111;
  --c-star: #f0ad4e;
  --c-whatsapp: #25d366;

  --f-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --f-sans: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --f-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --container: 1140px;
  --gutter: 16px;
  --section-y: 6em;          /* 96px */
  --space: 20px;             /* spazio tra elementi (widget Elementor) */
  --wave-h: 30px;

  --fs-h1: 80px;
  --fs-section: 46px;
  --fs-headline: 43px;
  --fs-subtitle: 36px;
  --fs-card: 24px;

  --radius-pill: 100px;
  --shadow-card: 0 0 20px rgba(0, 0, 0, .2);
  --t-float: .3s ease-out;
  --t-color: .3s;
}

@media (max-width: 1024px) {
  :root { --container: 1024px; }
}
@media (max-width: 767px) {
  :root {
    --container: 767px;
    --fs-h1: 46px;
    --fs-section: 32px;
    --fs-headline: 24px;
    --fs-subtitle: 24px;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-dark);
  background: var(--c-white);
  overflow-x: hidden;
}
[hidden] { display: none !important; }
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }
.center { text-align: center; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 8px 16px; background: var(--c-green); color: var(--c-white); }
.skip-link:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--c-green); outline-offset: 2px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; }

/* ---------- Sezioni ---------- */
.section { position: relative; padding: var(--section-y) 1em; }
.section > .container { position: relative; z-index: 2; }
.section--photo { overflow: hidden; background-color: var(--c-brown); background-size: cover; background-position: center; }
.section__overlay { position: absolute; inset: 0; background: var(--c-overlay); opacity: .5; }

/* Separatore "wave-brush" */
.shape { position: absolute; left: 0; width: 100%; overflow: hidden; line-height: 0; direction: ltr; z-index: 1; }
.shape--top { top: -1px; }
.shape--bottom { bottom: -1px; transform: rotate(180deg); }
.shape svg { position: relative; left: 50%; width: calc(100% + 1.3px); height: var(--wave-h); max-width: none; transform: translateX(-50%); fill: var(--c-white); }
.shape--mirror svg { transform: translateX(-50%) rotateY(180deg); }

/* Titoli ricorrenti */
.section-title { font-family: var(--f-serif); font-size: var(--fs-section); font-weight: 700; line-height: 1.4; color: var(--c-text); }
.section-title--light { color: var(--c-white); }
.eyebrow { font-family: var(--f-sans); font-size: 24px; font-weight: 300; line-height: 1; color: var(--c-green); text-align: center; }
.eyebrow--serif { font-family: var(--f-serif); font-weight: 600; text-align: start; text-transform: capitalize; }

/* Divisore: linea punteggiata + icona */
.divider { display: flex; align-items: center; justify-content: center; width: 100px; margin: var(--space) auto; padding-block: 3px; color: var(--c-green); }
.divider__line { flex: 1; border-top: 2px dotted currentColor; }
.divider__icon { width: 30px; height: 30px; margin: 0 10px; }

/* Bottone */
.button {
  display: inline-flex; align-items: center; gap: 15px;
  padding: 20px 40px; border-radius: var(--radius-pill);
  background: var(--c-green); color: var(--c-white);
  font-family: var(--f-sans); font-size: 16px; line-height: 1;
  transition: background-color var(--t-color), color var(--t-color), transform var(--t-float);
}
.button:focus-visible { background: var(--c-dark); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--c-white); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; }
.site-header__logo { flex: 0 0 16.926%; padding: 1em; }
.site-header__logo img { width: 100%; }
.site-nav { flex: 0 0 82.74%; padding: 1em; display: flex; justify-content: flex-end; }
.site-nav__list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.site-nav__list a {
  display: block; padding: 30px 20px;
  font-family: var(--f-serif); font-size: 15px; font-weight: 700; line-height: 1; color: var(--c-dark);
  transition: color var(--t-color);
}
.site-nav__list a[aria-current="page"], .site-nav__list a:focus-visible { color: var(--c-green); }
.site-nav__toggle { display: none; }

@media (max-width: 1024px) {
  .site-header__logo { flex-basis: 30%; }
  .site-nav { flex-basis: 70%; }
  .site-nav__toggle {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-left: auto; border-radius: 3px;
    font-size: 22px; color: var(--c-dark); transition: color var(--t-color);
  }
  .site-nav__toggle .icon--close, .site-nav__toggle[aria-expanded="true"] .icon--open { display: none; }
  .site-nav__toggle[aria-expanded="true"] .icon--close { display: block; }
  .site-nav__list {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; background: var(--c-dark);
  }
  .site-nav__list.is-open { display: flex; }
  .site-nav__list a { padding: 20px; font-size: 16px; color: var(--c-white); }
  .site-nav__list a[aria-current="page"] { color: var(--c-white); }
}
@media (max-width: 767px) {
  .site-header__logo { flex-basis: 70%; text-align: center; }
  .site-header__logo img { width: 54%; margin-inline: auto; }
  .site-nav { flex-basis: 30%; }
}

/* ---------- Hero con slideshow ---------- */
.hero { background-color: transparent; }
.hero .section__overlay { opacity: .25; z-index: 0; }
.slideshow { position: absolute; inset: 0; overflow: hidden; }
.slideshow__slide { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; }
.slideshow__slide:first-child { opacity: 1; }
.hero__content { width: 60%; padding: var(--gutter); }
.hero__title {
  margin-bottom: var(--space);
  font-family: var(--f-serif); font-size: var(--fs-h1); font-weight: 700; line-height: 1; color: var(--c-white);
  text-shadow: 0 0 10px rgba(0, 0, 0, .99);
}
.hero__headline { padding-top: 8px; margin-bottom: calc(16px + var(--space)); }
.hero__text {
  margin-bottom: 108px;
  font-family: var(--f-serif); font-size: 25px; font-style: italic; line-height: 1.5; color: var(--c-white);
  text-transform: capitalize; text-shadow: 0 0 10px #000;
}
@media (max-width: 1024px) { .hero__content { width: 80%; } }
@media (max-width: 767px) {
  .hero__content { width: 100%; text-align: center; }
  .hero__text { font-size: 16px; }
}

/* Titolo rotante (animated headline: rotate) */
.headline { font-family: var(--f-serif); font-size: var(--fs-headline); font-weight: 600; line-height: 1.2; color: var(--c-dark); }
.headline__wrapper { position: relative; display: inline-block; text-align: start; vertical-align: top; }
.headline__text { position: absolute; inset-block-start: 0; inset-inline-start: 0; display: inline-block; white-space: nowrap; font-style: italic; color: var(--headline-color, var(--c-white)); opacity: 0; }
.headline__text.is-active { position: relative; opacity: 1; }
.headline--drop-in .headline__wrapper { perspective: 300px; }

/* ---------- Intro + card servizi ---------- */
.intro > .container { padding: 10px; }
.intro__title { padding: 0 128px; font-family: var(--f-serif); font-size: var(--fs-subtitle); font-weight: 700; font-style: italic; line-height: 1.4; color: var(--c-text); text-align: center; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; padding: 15px; margin-top: 60px; }
.card { display: flex; flex-direction: column; gap: var(--space); padding: 2em 2em 3em; background: var(--c-green); box-shadow: var(--shadow-card); }
.card__img { width: calc(100% + 4em); max-width: none; margin: -2em -2em 0; aspect-ratio: 4 / 3; object-fit: cover; }
.card__title { font-family: var(--f-serif); font-size: var(--fs-card); font-weight: 700; line-height: 1.4; color: var(--c-white); }
.intro__cta { margin-top: 71px; margin-bottom: 40px; }
@media (max-width: 1024px) {
  .intro__title { padding: 16px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .cards { grid-template-columns: 1fr; }
  .card__title { text-align: center; }
}

/* ---------- Fascia foto (massaggio hot stone) ---------- */
.band--hot-stone { min-height: 326px; }
.band--hot-stone::before { content: ""; position: absolute; inset: 0; background: var(--c-brown); opacity: .5; mix-blend-mode: multiply; }
.band--hot-stone { background-image: url(/assets/img/massaggio-hot-stone-960.webp); background-position: 0 0; }
@media (min-width: 961px) { .band--hot-stone { background-image: url(/assets/img/massaggio-hot-stone-1920.webp); } }
@media (min-width: 1025px) { .band--hot-stone { background-position: 0 -315px; } }

/* ---------- Chi siamo (estratto) ---------- */
.about__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.about__media { padding: 16px; }
.about__media img { margin-bottom: var(--space); }
.about__media img { margin-inline: auto; }
.about__body { display: flex; flex-direction: column; gap: 10px; padding: 1em; }
.about__body .eyebrow { font-size: 24px; }
.about__body .divider { margin: 0; }
.about__lead { font-family: var(--f-serif); font-size: 18px; font-weight: 300; font-style: italic; line-height: 1.4; color: var(--c-text); }
.about__quote { padding-left: 40px; border-left: 1px solid var(--c-brown); font-family: var(--f-sans); font-size: 18px; font-weight: 300; font-style: italic; line-height: 1.5; color: var(--c-text); text-transform: capitalize; margin-block: 19px 18px; padding-right: 40px; }
@media (max-width: 1024px) {
  .about__media img { margin-inline: auto 0; }
}
@media (max-width: 767px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__media img { margin-inline: auto; }
  .about__body { padding-top: 96px; text-align: center; }
  .about__body .eyebrow--serif { text-align: center; }
  .about__body .divider { margin-inline: auto; }
  .about__quote { text-align: start; }
}

/* ---------- Recensioni ---------- */
.testimonials { background-image: url(/assets/img/capelli-forbici-parrucchiere-960.webp); }
@media (min-width: 961px) { .testimonials { background-image: url(/assets/img/capelli-forbici-parrucchiere-1920.webp); } }
.testimonials > .container { padding: 1em; }
.stars { display: flex; justify-content: center; align-items: center; height: 24px; margin-top: 60px; font-size: 16px; color: var(--c-star); }

.carousel { position: relative; margin-top: var(--space); }
.carousel__viewport { width: 95%; margin-inline: auto; padding-bottom: 40px; overflow: hidden; }
.carousel__track { display: flex; }
.carousel__slide { flex: 0 0 100%; min-width: 0; padding: 20px; }
.testimonial { text-align: center; color: var(--c-white); }
.testimonial__text { font-family: var(--f-serif); font-size: 20px; font-style: italic; line-height: 1.5; }
.testimonial__name { margin-top: 25px; font-family: var(--f-serif); font-size: 17px; font-weight: 300; line-height: 1.5; }
/* Su telefono le recensioni sono molto lunghe: testo più compatto */
@media (max-width: 767px) { .testimonial__text { font-size: 17px; } }
.carousel__arrow {
  position: absolute; top: calc((100% - 40px) / 2); transform: translateY(-50%); z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; font-size: 20px; color: rgba(237, 237, 237, .9);
}
.carousel__arrow--prev { left: 0; }
.carousel__arrow--next { right: 0; }
/* Prima che il JS parta, mostra solo la prima recensione */
.carousel:not(.is-ready) .carousel__slide:not(:first-child) { display: none; }

/* ---------- Marchi ---------- */
.brands { padding: 48px var(--gutter); }
.brands__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 32px 64px; max-width: var(--container); margin-inline: auto; }
.brands__list li { display: flex; justify-content: center; }
.brands__list img { width: auto; height: auto; max-width: 100px; max-height: 64px; }
@media (max-width: 767px) {
  .brands { padding-block: 40px; }
  .brands__list { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; gap: 32px 16px; }
  .brands__list img { max-width: 90px; max-height: 56px; }
}

/* ---------- Call to action ---------- */
.cta { padding-block: 4em; background-image: url(/assets/img/consulenza-specchio-trucco-960.webp); }
@media (min-width: 961px) { .cta { background-image: url(/assets/img/consulenza-specchio-trucco-1920.webp); } }
.cta__grid { display: grid; grid-template-columns: 2fr 1fr; align-items: center; }
.cta__grid > * { padding: 16px; }
.cta .section-title { padding-top: calc(16px + 93px); }
.cta__action { text-align: right; }
@media (max-width: 1024px) { .cta__grid { grid-template-columns: 60% 40%; } }
@media (max-width: 767px) {
  .cta__grid { grid-template-columns: 1fr; text-align: center; }
  .cta__action { text-align: center; }
}

/* ---------- Footer ---------- */
.site-footer__main { position: relative; padding: var(--section-y) 1em; background: var(--c-footer); color: var(--c-footer-text); }
.site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; }
.site-footer__grid > * { padding: 1em; }
.site-footer__logo { display: block; width: 17%; margin-bottom: 26px; }
.site-footer__logo img { width: 100%; }
.site-footer__about p { font-size: 16px; font-weight: 300; line-height: 1.5; padding-bottom: 30px; }
.site-footer__title { margin-bottom: var(--space); font-family: var(--f-serif); font-size: 24px; font-weight: 700; line-height: 1.4; color: var(--c-footer-title); }
.icon-list a { display: flex; align-items: flex-start; padding-block: 8px; transition: color var(--t-color); }
.icon-list .icon { width: 18px; height: 24px; margin-right: 10px; }
.icon-list span { padding-left: 5px; }
.social { display: flex; justify-content: center; gap: 1px; margin-block: var(--space) 30px; }
.social--footer { justify-content: flex-start; margin: -10px 0 0 -19.5px; }
.social a { display: flex; padding: 19.5px; border-radius: 10%; background: var(--c-footer); font-size: 39px; color: var(--c-footer-text); transition: color var(--t-color), transform var(--t-float); }

.site-footer__map { display: flex; flex-direction: column; gap: var(--space); }
.map-facade { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 300px; padding: 1em; border: 1px solid rgba(255, 255, 255, .12); text-align: center; }
.map-facade__button { display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; border-radius: var(--radius-pill); background: var(--c-green); color: var(--c-white); font-size: 15px; transition: background-color var(--t-color); }
.map-facade__note { font-size: 13px; font-weight: 300; }
.map-facade iframe { width: 100%; height: 300px; border: 0; }
.map-facade.is-loaded { padding: 0; border: 0; }
@media (hover: hover) and (pointer: fine) { .map-facade__button:hover { background: var(--c-dark); } }
/* WhatsApp flottante in basso a destra su tutte le pagine (entra con slideInUp, ritardo 200ms) */
.whatsapp {
  position: fixed; z-index: 40; right: 20px; bottom: 20px;
  display: flex; padding: 12.5px; border-radius: 50%;
  background: var(--c-whatsapp); font-size: 25px; color: var(--c-white);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
  animation: slideInUp 1.25s .2s both;
  transition: transform var(--t-float);
}
/* Torna su: a sinistra di WhatsApp, compare dopo un po' di scroll */
.to-top {
  position: fixed; z-index: 40; right: 80px; bottom: 20px;
  display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%;
  background: var(--c-green); font-size: 20px; color: var(--c-white);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s, visibility .3s, transform .3s, background-color var(--t-color);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 767px) {
  .whatsapp { right: 16px; bottom: 16px; }
  .to-top { right: 76px; bottom: 16px; }
}

.site-footer__bottom { padding: calc(2em + 10px) 1em; background: var(--c-footer-bottom); color: var(--c-footer-text); }
.site-footer__bottom p { font-size: 13px; font-weight: 300; line-height: 1; }
.site-footer__bottom a { display: inline-block; padding-block: 14px; transition: color var(--t-color); }

@media (max-width: 1024px) {
  .site-footer__grid { grid-template-columns: repeat(3, 33%); }
}
@media (max-width: 767px) {
  .site-footer__main { padding: 0; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__logo { width: 29%; }
  .site-footer__title { font-size: 32px; }
  .site-footer__bottom { padding-bottom: 82px; }
  .site-footer__bottom p { text-align: center; }
}

/* ---------- Sfondi foto passati come variabili (pagine interne) ---------- */
.section--bg { background-image: var(--bg-sm); }
@media (min-width: 961px) { .section--bg { background-image: var(--bg-lg); } }

/* ---------- Intestazione pagine interne ---------- */
.page-hero::before { content: ""; position: absolute; inset: 0; background: var(--c-brown); opacity: .5; mix-blend-mode: multiply; }
@media (min-width: 1025px) { .page-hero { background-position: var(--bg-pos, center); } }
@media (max-width: 1024px) { .page-hero { background-position: 0 0; } }
.page-hero > .container { padding: 16px; }
.page-hero__title {
  margin: 8px 0 16px; font-size: 50px; font-weight: 400; line-height: 1.2; text-align: center; color: var(--c-white);
}
.page-hero__title .headline__wrapper { text-align: center; }

/* ---------- Chi siamo: profilo ---------- */
.profile__grid { display: grid; grid-template-columns: 1fr 2fr; }
.profile__media, .profile__body { padding: 1em; }
.profile__media img { width: 100%; }
.social--light { margin: 35px 0 30px; }
.social--light a { padding: 12px; background: var(--c-white); font-size: 24px; color: var(--c-green); }
.profile__body { display: flex; flex-direction: column; gap: var(--space); }
.profile__eyebrow { font-size: 24px; line-height: 1; color: var(--c-green); }
.profile__title { font-family: var(--f-serif); font-size: var(--fs-section); font-weight: 700; line-height: .9; color: var(--c-text); }
.profile__subtitle { font-family: var(--f-serif); font-size: 18px; font-weight: 500; line-height: 1.4; color: var(--c-text); }
.profile__text { margin-bottom: 49.4px; font-family: var(--f-serif); font-size: 16px; font-weight: 300; font-style: italic; line-height: 1.5; color: #1b1a1a; text-align: center; }
.profile__text p + p { margin-top: 14.4px; }
@media (max-width: 1024px) { .profile__grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .profile__eyebrow, .profile__title, .profile__subtitle { text-align: center; } }

/* ---------- Chi siamo: perché sceglierci ---------- */
.reasons > .container { padding: 1em; }
.reasons__list { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 60px; }
.reason {
  display: flex; flex-direction: column; align-items: center; margin: 15px; padding: 2em 1em;
  border: 1px solid rgba(255, 255, 255, .17); border-radius: 25px; background: rgba(255, 255, 255, .17); text-align: center;
}
.reason__icon { width: 36px; height: 36px; color: var(--c-white); }
.reason__title { margin-top: 23px; font-family: var(--f-serif); font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--c-white); }
.reason__text { margin-top: 16px; font-size: 16px; font-weight: 300; line-height: 1.5; color: var(--c-footer-text); }
@media (max-width: 1024px) { .reasons__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .reasons__list { grid-template-columns: 1fr; } }

/* ---------- Servizi ---------- */
.service { margin-top: var(--space-before, 0); padding-inline: 16px; }
.service__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.service__body { padding: 16px; }
.service__body--right { align-self: start; padding-top: 41px; }
.service__body--right .service-list { margin-top: 0; }
.service__title { font-family: var(--f-serif); font-size: var(--fs-section); font-weight: 700; font-style: italic; line-height: 1.4; color: var(--c-text); }
.service__line { height: 0; margin: 15px 0 0; border: 0; border-top: 1px solid var(--c-footer-text); }
.service__divider { margin-top: 10px; }
.service__line + .service__divider { margin-top: 15px; }
.service__divider .divider { margin: 0; }
.service__intro { margin-top: 10px; font-family: var(--f-system); color: var(--c-dark); }
.service-list { margin-top: 35px; }
.service-item + .service-item { margin-top: 4px; padding-top: 15px; border-top: 1px solid var(--c-footer-text); }
.service-item + .service-item--loose { padding-top: 25px; }
.service-item + .service-item.service-item--no-line { margin-top: 0; padding-top: 0; border-top: 0; }
.service-item__title { font-family: var(--f-serif); font-size: 24px; font-weight: 700; line-height: 1.4; color: var(--c-text); }
.service-item__text { margin-top: 20px; font-family: var(--f-system); font-size: 16px; line-height: 1.5; color: var(--c-dark); }
.service-item:not(:has(.service-item__title)) .service-item__text, .service-item--tight .service-item__text { margin-top: 0; }
.service-item__text p { margin-bottom: 14.4px; }
.service-item__text ul { padding-left: 40px; list-style: disc; }
.service-item__text ol { padding-left: 40px; list-style: decimal; }
.service__media { position: relative; padding: 16px 16px 36px; }
.service__img { width: 100%; height: 700px; object-fit: cover; }
.service__img-small { position: absolute; top: -40px; left: -118px; width: 355px; box-shadow: 0 0 20px rgba(0, 0, 0, .3); }
@media (max-width: 767px) {
  .service__grid { grid-template-columns: 1fr; }
  .service__img { height: auto; }
  .service__img-small { top: -15px; left: -16px; width: 142px; }
}

/* ---------- Vetrina ---------- */
.shop > .container { padding: 16px; }
.shop > .container > .divider { margin: 10px auto 0; }
.shop__category { margin-top: 50px; font-family: var(--f-serif); font-size: 25px; font-weight: 700; line-height: 1; color: var(--c-text); text-align: center; }
.shop > .container > .divider + .shop__category { margin-top: 35px; }
.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 10px; padding: 15px; }
.product {
  position: relative; isolation: isolate; container-type: inline-size; padding: 3em 2em;
  border: 1px solid var(--c-footer-text); box-shadow: var(--shadow-card);
  background: #f6f6f6 var(--card-bg) center / cover;
}
.product::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-footer-text); opacity: .95; mix-blend-mode: screen; }
.product__img { display: block; width: auto; height: auto; max-width: 100%; max-height: min(273px, 100cqi); margin-inline: auto; }
.product__name { margin-top: 4px; font-family: var(--f-serif); font-size: 24px; font-weight: 700; line-height: 1.4; color: var(--c-text); text-align: center; }
.product .divider { margin: 3px auto 0; }
.product__price { margin-top: 11px; font-family: var(--f-sans); font-size: 28px; font-weight: 500; line-height: 1.2; color: var(--c-green); text-align: center; }
.product__features { margin-top: 19px; }
.product .divider + .product__features { margin-top: 3px; }
.product--spaced { padding-bottom: calc(3em + 33px); }
.product__features li { display: flex; align-items: center; justify-content: center; padding-bottom: 10px; }
.product__features li + li { margin-top: 10px; }
.product__features li:not(:last-child) { padding-bottom: 9px; border-bottom: 1px solid #ddd; }
.product__features li:last-child { padding-bottom: 0; }
.product__features .icon { width: 17.5px; height: 14px; margin-right: 15px; color: var(--c-dark); }
.product__features span { padding-left: 5px; font-size: 16px; line-height: 1.5; color: var(--c-text); text-align: center; }
@media (max-width: 1024px) { .products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
  .shop > .container { padding: 0; }
  .products { grid-template-columns: 1fr; }
  .product__name { font-size: 32px; }
}

/* ---------- Blog: elenco articoli ---------- */
.blog-list { padding: 90px 20px; }
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 30px; max-width: 1280px; margin-inline: auto; }
.post-card { overflow: hidden; border: 1px solid #69727d; border-radius: 14px; background: var(--c-white); box-shadow: 0 0 10px rgba(0, 0, 0, .15); }
.post-card__thumb { display: block; margin-bottom: 20px; aspect-ratio: 1 / .55; overflow: hidden; }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card__text { margin-top: 16px; padding: 0 30px; }
.post-card__title { margin-bottom: 13px; font-family: var(--f-serif); font-size: 21px; font-weight: 700; line-height: 1.2; color: #54595f; }
.post-card__more { display: inline-block; padding-block: 11px; margin-bottom: 9px; font-family: var(--f-serif); font-size: 12px; font-weight: 700; line-height: 1.5; color: #54595f; text-transform: uppercase; }
@media (max-width: 1024px) { .posts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
  .blog-list { padding: 70px 20px; }
  .posts { grid-template-columns: 1fr; }
  .post-card__thumb { aspect-ratio: 1 / .5; }
}

/* ---------- Articolo ---------- */
.page-hero--post .page-hero__title { font-size: 34px; }
/* Le intestazioni delle pagine interne hanno un titolo solo (niente rotazione): deve poter
   andare a capo, altrimenti su telefono i titoli lunghi escono dallo schermo.
   Il width inline lo mette il JS per il titolo rotante della home, qui va annullato. */
.page-hero__title .headline__text { position: relative; white-space: normal; }
.page-hero__title .headline__wrapper { display: block; width: auto !important; }
/* Sotto i 360px un titolo senza spazi (es. BLOG/NEWS) non può andare a capo: lo rimpiccioliamo */
@media (max-width: 359px) { .page-hero__title { font-size: 12vw; } }
@media (max-width: 767px) { .page-hero--post .page-hero__title { font-size: 39px; } }
/* Stesso motivo per i titoli degli articoli: "DERMAROLLER" da solo è più largo di uno schermo da 320px */
@media (max-width: 359px) { .page-hero--post .page-hero__title { font-size: 9.5vw; } }
.article { padding: 90px 0; }
.article__inner { max-width: 1000px; margin-inline: auto; }
.article__line { height: 0; margin: 15px 0; border: 0; border-top: 1px solid var(--c-green); }
.article__body { font-family: var(--f-serif); font-size: 17px; font-weight: 300; line-height: 1.5; color: var(--c-text); }
.article__body p { margin-bottom: 14.4px; }
.article__body--center { text-align: center; }
@media (max-width: 1024px) { .article { padding: 50px 0; } .article__inner { padding: 0 50px; } }
@media (max-width: 767px) { .article__inner { padding: 20px; } }

/* ---------- Tour virtuale ---------- */
@media (max-width: 767px) {
  .page-hero--tour { background-position: -143px 0; }
  .page-hero--tour .page-hero__title { font-size: 31px; }
}
.tour__frame { max-width: 900px; margin-inline: auto; padding: 10px; background: var(--c-green); }
.tour__ratio { position: relative; padding-top: 75%; }
.tour__ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tour-cta { padding: 4em 1em 0; }
.tour-cta::before { content: ""; position: absolute; inset: 0; background: var(--c-brown); opacity: .5; mix-blend-mode: multiply; }
@media (min-width: 1025px) { .tour-cta { background-position: 0 -405px; } }
@media (max-width: 1024px) { .tour-cta { background-position: 0 0; } }
@media (max-width: 767px) { .tour-cta { background-position: center; } }
.tour-cta > .container { display: flex; flex-direction: column; justify-content: center; gap: var(--space); min-height: 246px; padding: 16px; }
.tour-cta__eyebrow { font-size: 24px; line-height: 1; color: var(--c-white); text-align: center; }

/* ---------- Contatti ---------- */
.page-hero--contatti { background-position: bottom center !important; }
.contact-map { position: relative; }
.contact-map .shape--top { z-index: 2; pointer-events: none; }
.map-facade--large { position: relative; height: 500px; border: 0; background: #e9e9e9; color: var(--c-dark); }
.map-facade--large .map-facade__note { font-size: 14px; }
.map-facade--large .map-facade__note a { color: var(--c-green); font-weight: 500; }
.map-facade__pin { width: 40px; height: 40px; color: var(--c-green); }
.map-facade--large iframe { height: 500px; filter: saturate(0); }
.contact-boxes { position: relative; padding: 16px; }
.contact-boxes .shape { z-index: 0; }
.contact-boxes__grid { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: -150px; }
@media (min-width: 768px) { .contact-boxes__grid { padding-inline: 16px; } }
.info-box {
  position: relative; isolation: isolate; padding: 3em 1em; text-align: center;
  background: #f6f6f6 var(--box-bg) center / cover; box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}
.info-box::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .9; }
.info-box__icon { display: block; width: 36px; height: 36px; margin-inline: auto; }
.info-box__icon-link { display: block; padding-block: 4px; }
.info-box__title { margin: 23px 0 16px; font-family: var(--f-serif); font-size: 24px; font-weight: 700; line-height: 1.2; }
.info-box__title a { display: inline-block; padding-block: 6px; transition: color var(--t-color); }
.info-box__text a { display: inline-block; padding-block: 11px; transition: color var(--t-color); }
.info-box__text { font-family: var(--f-sans); font-size: 16px; font-weight: 500; line-height: 1.5; }
.info-box--light::before { background: var(--c-white); }
.info-box--light .info-box__icon { color: var(--c-green); }
.info-box--light .info-box__title { color: #111; }
.info-box--light .info-box__text { color: var(--c-text); }
.info-box--light a { color: #54595f; }
.info-box--dark::before { background: #111; }
.info-box--dark, .info-box--dark .info-box__title { color: var(--c-white); }
.info-box--dark .info-box__text { color: var(--c-footer-text); }
.info-box--green::before { background: var(--c-green); }
.info-box--green, .info-box--green .info-box__title { color: var(--c-white); }
.info-box--green .info-box__text { font-weight: 300; color: #f6f6f6; }
.contact-more__grid { display: grid; grid-template-columns: 1fr 1fr; }
.contact-more__info { padding: 16px; }
.contact-more__info .divider { margin: 20px auto 30px; }
.contact-actions { display: flex; flex-direction: column; gap: 12px; }
.button--block { justify-content: center; width: 100%; padding-block: 16px; }
.contact-more__media { position: relative; padding: 16px; }
.contact-more__img { width: 500px; }
.contact-more__img-small { position: absolute; top: 382px; left: 316px; width: 417px; box-shadow: 0 0 20px rgba(0, 0, 0, .3); }
@media (max-width: 1024px) {
  .contact-boxes__grid, .contact-more__grid { grid-template-columns: 1fr; }
  .contact-more__media { padding-top: 6em; }
  .contact-more__img { margin-left: auto; }
  .contact-more__img-small { top: 373px; }
}
@media (max-width: 767px) {
  .contact-more__info { padding: 6em 1em 0; }
  .contact-more__media { padding: 6em 1em 1em; }
  .contact-more__img { width: 100%; }
  .contact-more__img-small { top: 288px; left: 85px; width: 211px; }
}

/* ---------- Privacy Policy ---------- */
.privacy { padding: 100px 0; background: #f9f9f9; font-family: "Poppins", var(--f-sans); font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--c-dark); }
.privacy__title { margin: 8px 0 16px; font-size: 40px; font-weight: 500; line-height: 1.2; }
.privacy p { margin-bottom: 14.4px; }
.privacy strong, .privacy b { font-weight: 400; }
.privacy a { color: #c36; }
.privacy ul { margin-bottom: 14.4px; padding-left: 40px; list-style: circle; }
.privacy ul li + li { margin-top: 6px; }
.privacy__sections { padding-left: 24px; list-style: decimal; }
.privacy__sections > li { margin-top: 28px; }
.privacy__sections > li::marker { font-weight: 500; }
.privacy__sections h2 { margin-bottom: 12px; font-size: 16px; font-weight: 500; line-height: 1.7; }
.privacy__alpha { margin-bottom: 14.4px; padding-left: 24px; list-style: lower-alpha; }
.privacy__alpha ol { margin: 6px 0; padding-left: 28px; list-style: decimal; }
.privacy__updated { margin-top: 32px; }
@media (max-width: 1024px) { .privacy__inner { padding-inline: 16px; } }
@media (max-width: 767px) { .privacy { padding: 48px 16px; } }

/* ---------- 404 ---------- */
.not-found__text { max-width: 600px; margin: 0 auto; font-size: 18px; color: var(--c-text); }
.not-found__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space); margin-top: 40px; }

/* ---------- Hover: solo con mouse ---------- */
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--c-dark); }
  .hover-float:hover { transform: translateY(-8px); }
  .whatsapp:hover { transform: scale(1.08); }
  .to-top:hover { background: var(--c-dark); }
  .site-nav__list a:hover { color: var(--c-green); }
  .site-nav__toggle:hover { color: var(--c-brown); }
  .icon-list a:hover { color: var(--c-white); }
  .info-box--light a:hover { color: var(--c-green); }
  .social a:hover { color: var(--c-green); }
  .social--light a:hover { color: #111; }
  .site-footer__bottom a:hover { color: var(--c-white); }
}
@media (hover: hover) and (pointer: fine) and (max-width: 1024px) {
  .site-nav__list a:hover { color: var(--c-white); }
}

/* ---------- Animazioni ---------- */
/* Entrata allo scroll: nascosti solo se il JS è attivo */
.js [data-animate] { visibility: hidden; }
.js [data-animate].is-animated { visibility: visible; animation-duration: 1.25s; animation-fill-mode: both; }
.js [data-animate="fadeInDown"].is-animated { animation-name: fadeInDown; }
.js [data-animate="fadeIn"].is-animated { animation-name: fadeIn; }
.js [data-animate="zoomIn"].is-animated { animation-name: zoomIn; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: none; } }
@keyframes zoomIn { from { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } }
@keyframes slideInUp { from { transform: translate3d(0, 100%, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } }

/* Slideshow hero: 3 immagini, 5s ciascuna, dissolvenza 0,5s, Ken Burns zoom in (scala 1→1.3 in 20s) */
@media (prefers-reduced-motion: no-preference) {
  .slideshow__slide { animation: hero-slide 15s linear infinite both; }
  .slideshow__slide:nth-child(1) { animation-delay: -.5s; }
  .slideshow__slide:nth-child(2) { animation-delay: 4.5s; }
  .slideshow__slide:nth-child(3) { animation-delay: 9.5s; }
  @keyframes hero-slide {
    0%      { opacity: 0; transform: scale(1); }
    3.333%  { opacity: 1; }
    33.333% { opacity: 1; }
    36.667% { opacity: 0; transform: scale(1.0825); }
    100%    { opacity: 0; transform: scale(1.0825); }
  }

  /* Titolo rotante "slide" (0,6s) */
  .headline--slide .headline__text.is-active { animation: headline-slide-in .6s; }
  .headline--slide .headline__text.is-inactive { animation: headline-slide-out .6s; }
  @keyframes headline-slide-in { 0% { opacity: 0; transform: translateX(-100%); } 60% { opacity: 1; transform: translateX(10%); } 100% { opacity: 1; transform: translateX(0); } }
  @keyframes headline-slide-out { 0% { opacity: 1; transform: translateX(0); } 60% { opacity: 0; transform: translateX(110%); } 100% { opacity: 0; transform: translateX(100%); } }

  /* Titolo rotante "drop-in" (0,8s) */
  .headline--drop-in .headline__text.is-active { animation: headline-drop-in-in .8s; }
  .headline--drop-in .headline__text.is-inactive { animation: headline-drop-in-out .8s; }
  @keyframes headline-drop-in-in { 0% { opacity: 0; transform: translateZ(100px); } 100% { opacity: 1; transform: translateZ(0); } }
  @keyframes headline-drop-in-out { 0% { opacity: 1; transform: translateZ(0); } 100% { opacity: 0; transform: translateZ(-100px); } }

  .carousel__track { transition: transform var(--carousel-speed, 500ms) ease; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-animate] { visibility: visible; }
  .js [data-animate].is-animated, .whatsapp { animation: none; }
  .to-top { transition: none; }
  .hover-float, .button { transition: none; }
  .hover-float:hover { transform: none; }
}