/* ============================================================
   OSR — stili del tema. Base: ui kit del design system, più le
   classi per sezione ricavate dagli stili inline dell'export
   (Sito OSR.dc.html). Un breakpoint principale a 900px.
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body {
  font-family: var(--font-sans);
  background: var(--surface);
  color: var(--fg-2);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}
img { max-width: 100%; }
[hidden] { display: none !important; } /* l'attributo hidden deve vincere su display:flex/grid delle classi */
.osr-page { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.osr-icon { display: inline-block; vertical-align: middle; flex: none; }
/* Utility responsive: osr-hide-m sparisce sotto 900px, osr-only-m appare
   solo lì (display:revert → block per le section, inline per gli span). */
.osr-only-m { display: none; }
a.osr-btn, .osr-card-link, a.osr-mono, .osr-nav-link { text-decoration: none; }

/* ---------- Bottoni ---------- */
.osr-btn {
  display: inline-flex; align-items: center; gap: 10px;
  border-radius: var(--r-pill); border: 1px solid transparent;
  font-family: var(--font-sans); font-weight: 500; letter-spacing: var(--label-tracking);
  cursor: pointer; box-shadow: var(--shadow-btn); white-space: nowrap;
  height: 58px; padding: 0 34px; font-size: 18px;
  transition: transform var(--dur-fast) var(--ease-soft), background var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft);
}
.osr-btn--primary { background: var(--osr-teal); color: var(--osr-mint); border-color: var(--osr-mint); }
.osr-btn--primary:hover { background: var(--teal-700); }
.osr-btn--secondary { background: var(--osr-mint); color: var(--osr-teal); border-color: var(--osr-teal); }
.osr-btn--secondary:hover { background: #c6f1ec; }
.osr-btn--onmint { background: var(--osr-mint); color: var(--osr-teal); }
.osr-btn--onmint:hover { background: #c6f1ec; }
.osr-btn--rosa { background: var(--osr-rosa-chiaro); color: var(--osr-rosa-scuro); border-color: var(--osr-rosa); }
.osr-btn--rosa:hover { background: #f6d9e2; }
.osr-btn--ghost { background: transparent; color: var(--osr-mint); border-color: var(--osr-mint); box-shadow: none; }
.osr-btn--ghost:hover { background: rgba(215,248,244,0.12); }
.osr-btn:active { transform: scale(.98); box-shadow: 1px 2px 2px rgba(0,0,0,.2); }

/* ---------- Header ---------- */
.osr-header {
  position: sticky; top: 0; z-index: 60;
  background: transparent;
  transition: background .3s var(--ease-soft), box-shadow .3s var(--ease-soft);
}
.osr-header.is-solid {
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(1.3) blur(12px);
  -webkit-backdrop-filter: saturate(1.3) blur(12px);
  box-shadow: 0 8px 30px -22px rgba(31,65,69,.4);
}
.osr-header__bar {
  display: flex; align-items: center; gap: 24px;
  padding-top: 16px; padding-bottom: 14px;
  transition: padding .3s var(--ease-soft);
}
.osr-header__side { flex: 1; display: flex; align-items: center; min-width: 0; }
.osr-header__side--end { justify-content: flex-end; gap: 12px; }
.osr-header__logo { display: flex; align-items: center; flex: none; }
.osr-header__logo img { height: 58px; width: auto; display: block; transition: height .3s var(--ease-soft); }

/* Navbar compatta durante la navigazione (scroll > 40px) */
.osr-header.is-compact .osr-header__bar { padding-top: 8px; padding-bottom: 8px; }
.osr-header.is-compact .osr-header__logo img { height: 42px; }
.osr-header.is-compact .osr-nav-cta { height: 42px; padding: 0 20px; font-size: 15px; }
.osr-header.is-compact .osr-header__burger { width: 44px; height: 44px; }
.osr-nav-cta, .osr-header__burger { transition: height .3s var(--ease-soft), width .3s var(--ease-soft), padding .3s var(--ease-soft), font-size .3s var(--ease-soft), transform var(--dur-fast) var(--ease-soft), background var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft); }
.osr-header__nav { display: flex; align-items: center; gap: 22px; flex: none; }
.osr-header__sep { color: var(--hairline); }
.osr-nav-link {
  font-size: var(--label-size); font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking); color: var(--ink); white-space: nowrap;
  cursor: pointer; transition: color var(--dur) var(--ease-soft);
}
.osr-nav-link:hover, .osr-nav-link.on { color: var(--osr-teal); }
.osr-nav-cta { height: 48px; padding: 0 26px; font-size: 16px; }
.osr-header__burger {
  display: none; border: none; background: rgba(255,255,255,0.75);
  backdrop-filter: blur(8px); border-radius: 999px; width: 52px; height: 52px;
  align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-soft);
  flex-direction: column; gap: 5px;
}
.osr-header__burger span { width: 22px; height: 2px; background: var(--osr-teal); display: block; border-radius: 2px; }
/* Pannello menu mobile: overlay assoluto sotto la barra (non spinge il
   contenuto né allarga lo sfondo dell'header) con fade+slide all'apertura,
   pilotato da .is-open (il JS toglie hidden, poi aggiunge la classe). */
.osr-header__mobile { padding-bottom: 16px; position: absolute; top: 100%; left: 0; right: 0; }
.osr-header__mobile-panel {
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(255,255,255,0.96); backdrop-filter: blur(12px);
  border: 1px solid var(--hairline); border-radius: var(--r-card);
  padding: 14px; box-shadow: var(--shadow-card);
  transition: opacity var(--dur) var(--ease-soft), transform var(--dur) var(--ease-soft);
}
.osr-header__mobile:not(.is-open) .osr-header__mobile-panel {
  opacity: 0; transform: translateY(-10px) scale(.98);
}
@media (prefers-reduced-motion: reduce) {
  .osr-header__mobile-panel { transition: none; }
}
.osr-header__mobile-panel .osr-nav-link { padding: 12px 14px; border-radius: 12px; }
.osr-header__mobile-cta { margin-top: 8px; justify-content: center; }

/* ---------- Hero home ---------- */
.osr-hero { padding: 14px 0 34px; }
.osr-hero-panel {
  position: relative; display: grid; grid-template-columns: 1fr 320px; gap: 32px;
  border-radius: var(--r-panel); overflow: hidden;
  padding: 56px 52px; min-height: clamp(420px, 58vh, 560px); align-items: center;
}
.osr-hero-panel__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.osr-hero-panel__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(25,65,66,0.94) 0%, rgba(25,65,66,0.78) 40%, rgba(25,65,66,0.34) 66%, rgba(25,65,66,0.06) 100%);
}
.osr-hero-panel__copy { position: relative; z-index: 2; }
.osr-hero-title { color: var(--osr-white); margin: 0 0 14px; font-size: clamp(30px, 3.2vw, 48px); }
.osr-hero-lead { color: var(--osr-mint); margin: 0 0 12px; max-width: 520px; font-size: 20px; }
.osr-hero-body { margin: 0 0 26px; max-width: 500px; font-size: 16px; color: rgba(255,255,255,0.82); }
.osr-hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }

/* Card "NEW": base comune, variante vetro (desktop, nel pannello hero)
   e variante scura (mobile, sotto icone e pill) */
.osr-news {
  position: relative; z-index: 2; cursor: pointer;
  display: flex; flex-direction: column; text-align: center;
  border-radius: var(--r-card); padding: 26px 26px 22px;
  border: 1px solid rgba(255,255,255,0.5);
}
.osr-news--glass {
  align-self: center; height: 344px;
  background: rgba(255,255,255,0.28);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 18px 50px rgba(25,65,66,0.28);
}
.osr-news--dark {
  display: none; margin-top: 22px; height: auto;
  background: linear-gradient(150deg, rgba(25,65,66,0.94), rgba(25,65,66,0.8));
  box-shadow: 0 18px 50px -18px rgba(25,65,66,0.4);
}
.osr-news--dark .osr-news-badge { width: 44px; height: 44px; margin-bottom: 10px; }
.osr-news--dark .osr-news-title { -webkit-line-clamp: 2; }
.osr-news-badge {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 12px;
  border: 2px solid var(--osr-white); color: var(--osr-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; letter-spacing: .02em; flex: none;
}
.osr-news__slide { display: none; flex-direction: column; flex: 1; min-height: 0; animation: osrFadeIn .4s var(--ease-soft); }
.osr-news__slide.on { display: flex; }
.osr-news__eyebrow { margin-bottom: 6px; flex: none; color: rgba(255,255,255,0.85); }
.osr-news-title {
  font-size: 27px; font-weight: 700; line-height: 1.08; margin: 10px 0 12px; flex: none;
  color: var(--osr-white);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.osr-news-body { font-size: 15px; line-height: 1.5; margin: 0; flex: 1; overflow: hidden; color: rgba(255,255,255,0.9); }
.osr-dots { display: flex; gap: 8px; justify-content: center; margin-top: auto; padding-top: 18px; flex: none; }
.osr-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--teal-200); border: none; padding: 0; cursor: pointer; transition: background var(--dur) var(--ease-soft); }
.osr-dot.on { background: var(--osr-white); }
@keyframes osrFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Punti di forza ---------- */
.osr-features { display: flex; justify-content: space-between; gap: 16px; padding: 22px 24px 0; }
.osr-feature { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; flex: 1; }
.osr-feature .osr-icon { font-size: 32px; color: var(--osr-teal); }
.osr-feature span { font-size: 16px; font-weight: 500; color: var(--osr-teal); line-height: 1.3; max-width: 160px; }
.osr-feature-pill {
  display: none; margin: 18px auto 0; width: fit-content;
  align-items: center; gap: 10px; padding: 12px 22px;
  border: 1px solid var(--teal-200); border-radius: var(--r-pill);
  color: var(--osr-teal); font-weight: 500; font-size: 15px; background: var(--cyan-haze);
}

/* ---------- Sezioni generiche ---------- */
.osr-section { padding: 78px 0; }
.osr-section-sub { color: var(--slate); margin: 0; }

/* ---------- Cosa facciamo ---------- */
.osr-cosa { padding-bottom: 36px; }
.osr-cosa__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.osr-cosa__copy { max-width: 460px; }
.osr-cosa__copy .osr-eyebrow { display: inline-block; margin-bottom: 14px; }
.osr-cosa__title { margin: 0 0 22px; }
.osr-cosa__title em, .osr-chi__title em, .osr-perche__title em { font-style: italic; color: var(--osr-teal); }
.osr-cosa__copy .osr-body { margin: 0 0 20px; font-size: 17px; }
.osr-cosa__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.osr-cosa__visual { position: relative; min-height: 540px; display: flex; align-items: center; justify-content: center; }
.osr-cosa__halo {
  position: absolute; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle at center, var(--cyan-haze) 0%, rgba(255,255,255,0) 70%); z-index: 0;
}
.osr-cosa__photo {
  position: relative; z-index: 1; width: 288px; height: 404px; object-fit: cover;
  border-radius: 24px; box-shadow: var(--shadow-card);
}
.osr-cosa__word { position: absolute; z-index: 2; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.osr-cosa__word--1 { top: 3%;    left: 0;    font-size: 34px; color: var(--osr-teal); transform: rotate(-3deg); }
.osr-cosa__word--2 { top: 8%;    right: 0;   font-size: 24px; color: var(--osr-rosa-scuro); }
.osr-cosa__word--3 { top: 32%;   left: -2%;  font-size: 20px; font-weight: 600; color: var(--osr-petrolio); }
.osr-cosa__word--4 { top: 29%;   right: -2%; font-size: 28px; color: var(--teal-300); }
.osr-cosa__word--5 { top: 56%;   left: 0;    font-size: 22px; font-weight: 600; color: var(--fg-2); }
.osr-cosa__word--6 { top: 59%;   right: 2%;  font-size: 20px; font-weight: 600; color: var(--osr-petrolio); }
.osr-cosa__word--7 { bottom: 6%; left: 4%;   font-size: 30px; color: var(--osr-teal); transform: rotate(2deg); }
.osr-cosa__word--8 { bottom: 2%; right: 0;   font-size: 26px; color: var(--osr-rosa-scuro); }

/* ---------- Chi siamo preview + numeri ---------- */
.osr-chi { background: #fff; }
.osr-chi__inner { padding-top: 78px; padding-bottom: 78px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.osr-chi__inner .osr-eyebrow { margin-bottom: 14px; }
.osr-chi__title { margin: 0 0 22px; max-width: 640px; }
.osr-chi__body { margin: 0 0 32px; max-width: 600px; }
.osr-stats {
  margin-top: 54px; width: 100%; max-width: 780px;
  background: var(--osr-mint); border-radius: var(--r-card);
  padding: 40px 24px; display: flex; flex-wrap: wrap; justify-content: center;
}
.osr-stats__cell { flex: 1; min-width: 150px; padding: 6px 24px; text-align: center; }
.osr-stats__cell + .osr-stats__cell { border-left: 1px solid rgba(53,109,114,0.18); }
.osr-stat { font-size: 54px; font-weight: 600; color: var(--osr-teal); line-height: 1; }
.osr-stats__cell .osr-small { margin-top: 8px; }
.osr-chi__founders { margin: 18px 0 0; font-style: italic; font-weight: 300; font-size: 14px; color: var(--slate); opacity: .6; }

/* ---------- Convenzioni marquee ---------- */
.osr-conv { background: var(--osr-teal); overflow: hidden; padding: 22px 0; margin: 16px 0 0; }
.osr-conv-track { display: flex; gap: 64px; width: max-content; animation: osr-marquee 28s linear infinite; }
.osr-conv-item {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border: 1px solid var(--hairline); background: #fff; border-radius: 14px;
  padding: 16px 26px; min-width: 150px; white-space: nowrap;
  color: var(--slate); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 14px;
}
.osr-conv-item--logo { padding: 10px 26px; }
.osr-conv-item--logo img { height: 40px; width: auto; display: block; }
@keyframes osr-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .osr-conv-track { animation: none; flex-wrap: wrap; width: auto; } }

/* ---------- Perché sceglierci ---------- */
.osr-perche__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.osr-perche__grid .osr-eyebrow { display: inline-block; margin-bottom: 14px; }
.osr-perche__title { margin: 0 0 26px; max-width: 440px; }
.osr-perche__list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 30px; }
.osr-perche__item { display: flex; align-items: flex-start; gap: 14px; }
.osr-perche__item .osr-icon { margin-top: 2px; }
.osr-perche__item span { font-size: 17px; color: var(--ink); font-family: var(--font-sans); line-height: 1.6; }
.osr-perche__collage { display: flex; gap: 18px; align-items: center; justify-content: center; }
.osr-perche__img { border-radius: 28px; object-fit: cover; width: 100%; display: block; }
.osr-perche__img--tall { height: 300px; flex: 1; }
.osr-perche__stack { display: flex; flex-direction: column; gap: 18px; flex: 1; }
.osr-perche__img--mid { height: 180px; }
.osr-perche__img--short { height: 150px; }

/* ---------- Recensioni ---------- */
.osr-rev { background: var(--osr-teal); }
.osr-rev__grid { padding-top: 44px; padding-bottom: 44px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 52px; align-items: center; }
.osr-rev__stage { position: relative; padding-top: 10px; }
.osr-rev__shadow { position: absolute; background: #fff; border-radius: 20px; z-index: 0; }
.osr-rev__shadow--back { left: 26px; right: 26px; top: 40px; bottom: -14px; opacity: .5; box-shadow: 0 16px 40px -30px rgba(31,65,69,.18); }
.osr-rev__shadow--mid  { left: 14px; right: 14px; top: 34px; bottom: -6px;  opacity: .7; box-shadow: 0 16px 40px -30px rgba(31,65,69,.22); z-index: 1; }
.osr-rev__card {
  position: relative; z-index: 3; background: #fff; border-radius: 20px;
  box-shadow: 0 16px 44px -30px rgba(31,65,69,.25);
  padding: 30px 40px 28px; cursor: pointer; margin-top: 10px;
}
.osr-rev__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.osr-rev__head img { height: 28px; width: auto; display: block; }
.osr-rev__nav { display: flex; align-items: center; gap: 12px; }
.osr-rev__counter { font-size: 12px; color: var(--slate); }
.osr-rev__dots { display: flex; align-items: center; gap: 7px; }
.osr-rev-dot {
  position: relative; overflow: hidden;
  height: 7px; width: 7px; border: none; padding: 0; border-radius: 999px;
  background: rgba(53,109,114,0.28); cursor: pointer; transition: all .3s ease;
}
.osr-rev-dot.on { width: 22px; }
.osr-rev-dot__fill {
  position: absolute; inset: 0; width: 0; border-radius: 999px;
  background: var(--osr-teal); pointer-events: none;
}
/* Auto-rotazione attiva: la dot corrente si riempie in 5s (clue del tempo restante) */
.osr-rev__stage.is-auto .osr-rev-dot.on .osr-rev-dot__fill { animation: osrRevProgress 5s linear forwards; }
/* Card congelata dal clic: dot piena e ferma */
.osr-rev__stage.is-frozen .osr-rev-dot.on .osr-rev-dot__fill { width: 100%; animation: none; }
@keyframes osrRevProgress { from { width: 0; } to { width: 100%; } }
.osr-rev__slide { display: none; gap: 36px; align-items: center; flex-wrap: wrap; }
.osr-rev__slide.on { display: flex; }
.osr-rev__quote-col { flex: 1; min-width: 260px; }
.osr-rev__mark { font-weight: 800; font-size: 40px; line-height: .6; color: var(--osr-teal); height: 22px; }
.osr-rev__quote { font-size: 17px; line-height: 1.6; margin: 6px 0 0; }
.osr-rev__meta {
  flex: 0 0 auto; min-width: 190px; display: flex; flex-direction: column; gap: 18px;
  padding-left: 32px; border-left: 1px solid var(--hairline);
}
.osr-rev__person { display: flex; align-items: center; gap: 14px; }
.osr-rev__avatar {
  width: 44px; height: 44px; border-radius: 50%; background: var(--cyan-haze);
  display: flex; align-items: center; justify-content: center; color: var(--osr-teal); flex: none;
}
.osr-rev__name { font-weight: 700; color: var(--ink); font-size: 17px; }
.osr-rev__role { font-size: 13px; color: var(--slate); margin-top: 3px; }
.osr-rev__verified { display: flex; align-items: center; gap: 10px; }
.osr-rev__verified .osr-mono { font-size: 12px; color: var(--slate); }
.osr-rev__verified-badge {
  width: 38px; height: 38px; border-radius: 11px; background: var(--osr-mint);
  display: flex; align-items: center; justify-content: center; color: var(--osr-teal); flex: none;
}
.osr-rev__hint { text-align: center; margin-top: 26px; color: var(--slate); opacity: .7; font-size: 13px; }
.osr-rev__eyebrow { margin-bottom: 14px; color: var(--osr-mint); }
.osr-rev__title { margin: 0 0 14px; font-size: clamp(24px, 2.6vw, 34px); color: var(--osr-white); }
.osr-rev__sub { margin: 0; color: rgba(215,248,244,0.82); }

/* ---------- Il giornale ---------- */
.osr-giornale { background: var(--osr-mint); }
.osr-giornale > .osr-page { padding-top: 74px; padding-bottom: 74px; }
.osr-giornale__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 38px; }
.osr-giornale__heading { max-width: 560px; }
.osr-giornale__heading .osr-eyebrow { display: inline-block; margin-bottom: 14px; }
.osr-giornale__heading .osr-h2 { margin: 0; }
.osr-giornale__controls { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.osr-giornale__pager { display: flex; align-items: center; gap: 12px; }
.osr-giornale__counter { font-size: 13px; color: var(--slate); }
.osr-giornale__nav {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.osr-giornale__nav--prev { border: 1px solid var(--hairline); background: #fff; color: var(--osr-teal); }
.osr-giornale__nav--next { border: 1px solid var(--osr-teal); background: var(--osr-teal); color: var(--osr-mint); }
.osr-giornale__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.osr-chip {
  border: 1px solid var(--hairline); background: #fff; color: var(--fg-2);
  border-radius: 999px; padding: 9px 18px; font-family: var(--font-sans);
  font-size: 14px; font-weight: 500; letter-spacing: .02em; cursor: pointer;
  transition: background var(--dur) var(--ease-soft), color var(--dur) var(--ease-soft), border-color var(--dur) var(--ease-soft);
}
.osr-chip:hover { border-color: var(--osr-teal); color: var(--osr-teal); }
.osr-chip.on { background: var(--osr-teal); color: var(--osr-mint); border-color: var(--osr-teal); }
.osr-giornale__viewport { overflow: hidden; padding: 18px 6px 38px; margin: -18px -6px -38px; }
.osr-giornale__track { display: flex; gap: 24px; transition: transform .6s var(--ease-soft); will-change: transform; }
.osr-giornale__all { margin: 26px 0 0; text-align: right; }
.osr-giornale__more { display: none; margin: 0; }
.osr-giornale__empty { text-align: center; margin-top: 20px; }

/* Card articolo */
.osr-card {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-card); box-shadow: var(--shadow-soft);
  transition: transform var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft);
}
.osr-art-card { flex: 0 0 calc((100% - 48px) / 3); padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.osr-art-card.is-hidden { display: none; }
.osr-art-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.osr-art-card__link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
.osr-art-card__img { width: 100%; height: 176px; object-fit: cover; display: block; }
.osr-art-card__img--ph {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--cyan-haze), var(--blue-pale)); color: var(--teal-300);
}
.osr-art-card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.osr-art-card__meta { display: flex; align-items: center; gap: 12px; }
.osr-art-card__date { font-size: 12px; color: var(--slate); }
.osr-card-title { font-size: 20px; font-weight: 600; color: var(--ink); margin: 0; }
.osr-card-desc { font-size: 16px; line-height: 1.55; color: var(--slate); margin: 0; flex: 1; }
.osr-card-link { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; letter-spacing: .04em; color: var(--osr-teal); }
.osr-art-card:hover .osr-card-link .osr-icon { transform: translateX(4px); }
.osr-card-link .osr-icon { transition: transform var(--dur) var(--ease-soft); }

/* ---------- Hero pagine interne ---------- */
.osr-page-hero-wrap { padding-top: 24px; }
.osr-page-hero { border-radius: var(--r-panel); padding: 70px 56px; }
.osr-page-hero--dark { background: var(--osr-petrolio); color: var(--osr-mint); }
.osr-page-hero--dark .osr-page-hero__eyebrow { color: var(--osr-mint); opacity: .85; }
.osr-page-hero--dark .osr-page-hero__title { color: var(--osr-white); }
.osr-page-hero--dark .osr-page-hero__body { color: rgba(215,248,244,0.82); }
.osr-page-hero--light { background: var(--surface); }
.osr-page-hero--light .osr-page-hero__eyebrow { color: var(--osr-rosa-scuro); }
.osr-page-hero--light .osr-page-hero__title { color: var(--osr-petrolio); }
.osr-page-hero__eyebrow { margin-bottom: 14px; }
.osr-page-hero__title { margin: 0 0 16px; max-width: 640px; }
.osr-page-hero__body { font-size: 19px; line-height: 1.6; margin: 0; max-width: 600px; }

/* ---------- Sezione serenità/fiducia ---------- */
.osr-calm__inner { padding-top: 64px; padding-bottom: 64px; }
.osr-calm__head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.osr-calm__head .osr-eyebrow { display: inline-block; margin-bottom: 12px; }
.osr-calm__head .osr-h2 { margin: 0 0 14px; }
.osr-calm__head .osr-body { margin: 0; }
.osr-calm__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.osr-calm__card { background: var(--cyan-haze); border-radius: var(--r-card); padding: 30px; text-align: center; }
.osr-calm__card .osr-icon { color: var(--osr-teal); }
.osr-calm__card .osr-h3 { margin: 14px 0 6px; font-size: 18px; }
.osr-calm__card .osr-card-desc { margin: 0; }
.osr-calm__card--surface { background: var(--surface); }
.osr-estetica .osr-calm__card .osr-icon { color: var(--osr-rosa-scuro); }
.osr-estetica .osr-calm__head .osr-eyebrow { color: var(--osr-rosa-scuro); }
.osr-estetica .osr-calm__head .osr-h2 { color: var(--osr-petrolio); }

/* ---------- Trattamenti ---------- */
.osr-treatments { padding-bottom: 36px; }
.osr-treatments__head { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; margin-bottom: 8px; }
.osr-treatments__title { margin: 14px 0 0; max-width: 400px; }
.osr-treatments__intro { margin: 0; align-self: end; max-width: 520px; }
.osr-estetica .osr-treatments .osr-eyebrow { color: var(--osr-rosa-scuro); }
.osr-estetica .osr-treatments__title { color: var(--osr-petrolio); }
.osr-treat-group { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--hairline); }
.osr-treat-group:first-of-type { margin-top: 44px; }
.osr-treat-group__label {
  font-size: 14px; letter-spacing: .08em; color: var(--osr-teal);
  text-transform: uppercase; margin-bottom: 22px;
}
.osr-estetica .osr-treat-group__label { color: var(--osr-rosa-scuro); }
.osr-treat-row {
  display: grid; grid-template-columns: 56px 1fr 108px; gap: 22px;
  padding: 24px 0; border-bottom: 1px solid var(--hairline); align-items: center;
}
.osr-treat-row.is-last { border-bottom: none; }
.osr-treat-row--img-left { grid-template-columns: 108px 1fr 56px; gap: 40px; }
.osr-treat-row--img-left .osr-treat-row__num { order: 3; text-align: right; }
.osr-treat-row--img-left .osr-treat-row__body { order: 2; }
.osr-treat-row--img-left .osr-treat-row__img { order: 1; justify-self: start; }
.osr-treat-row__num { font-size: 16px; color: var(--teal-300); }
.osr-estetica .osr-treat-row__num { color: var(--osr-rosa); }
.osr-treat-row__title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.osr-treat-row__title-row .osr-icon { color: var(--osr-teal); }
.osr-estetica .osr-treat-row__title-row .osr-icon { color: var(--osr-rosa-scuro); }
.osr-treat-row__title { margin: 0; font-size: 21px; }
.osr-treat-row__desc { max-width: 640px; }
.osr-treat-row__desc p { margin: 0 0 8px; }
.osr-treat-row__desc p:last-child { margin-bottom: 0; }
.osr-treat-row__img { width: 108px; height: 92px; object-fit: cover; border-radius: 14px; justify-self: end; }
.osr-treat-row__img--ph {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--cyan-haze), var(--blue-pale)); color: var(--teal-300);
}

/* ---------- Come funziona (steps) ---------- */
.osr-steps { background: var(--cyan-haze); }
.osr-estetica .osr-steps { background: transparent; }
.osr-steps__inner { padding-top: 78px; padding-bottom: 78px; }
.osr-steps__head { text-align: center; max-width: 620px; margin: 0 auto 46px; }
.osr-steps__head .osr-eyebrow { margin-bottom: 12px; }
.osr-steps__head .osr-h2 { margin: 0; }
.osr-estetica .osr-steps__head .osr-eyebrow { color: var(--osr-rosa-scuro); }
.osr-estetica .osr-steps__head .osr-h2 { color: var(--osr-petrolio); }
.osr-steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.osr-steps__card { background: var(--surface); border-radius: var(--r-card); padding: 32px; box-shadow: var(--shadow-soft); }
.osr-steps__num { font-size: 34px; font-weight: 600; color: var(--teal-200); margin-bottom: 14px; }
.osr-estetica .osr-steps__num { color: var(--osr-rosa); }
.osr-steps__card .osr-h3 { margin: 0 0 8px; }
.osr-steps__card .osr-card-desc { margin: 0; }

/* ---------- Banner CTA ---------- */
.osr-cta-banner-wrap { padding-top: 56px; padding-bottom: 64px; }
.osr-cta-banner { border-radius: var(--r-panel); padding: 46px 56px; text-align: center; }
.osr-cta-banner--dark { background: var(--osr-petrolio); color: var(--osr-mint); }
.osr-cta-banner--dark .osr-cta-banner__title { color: var(--osr-white); }
.osr-cta-banner--dark .osr-cta-banner__body { color: rgba(215,248,244,0.8); }
.osr-cta-banner--dark .osr-cta-banner__btn { background: var(--osr-mint); color: var(--osr-teal); }
.osr-cta-banner--rosa { background: var(--osr-rosa-scuro); color: #fff; }
.osr-cta-banner--rosa .osr-cta-banner__title { color: #fff; }
.osr-cta-banner--rosa .osr-cta-banner__body { color: rgba(255,255,255,0.85); }
.osr-cta-banner--rosa .osr-cta-banner__btn { background: #fff; color: var(--osr-rosa-scuro); border-color: #fff; }
.osr-cta-banner__title { margin: 0 0 10px; }
.osr-cta-banner__body { font-size: 18px; margin: 0 0 24px; }

/* ---------- Medicina estetica (banda rosa) ---------- */
.osr-estetica__band { background: var(--osr-rosa-chiaro); }
.osr-estetica__band .osr-page-hero-wrap { padding-top: 24px; padding-bottom: 24px; }

/* ---------- Chi siamo ---------- */
.osr-cs-hero { padding: 56px 0; }
.osr-cs-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.osr-cs-hero .osr-eyebrow { display: inline-block; margin-bottom: 14px; }
.osr-cs-hero__title { margin: 0 0 18px; max-width: 520px; }
.osr-cs-hero__body { margin: 0; max-width: 520px; }
.osr-cs-hero__photo { width: 100%; height: 360px; object-fit: cover; border-radius: 20px; box-shadow: var(--shadow-card); }

.osr-valori__head { text-align: center; max-width: 600px; margin: 0 auto 50px; }
.osr-valori__head .osr-eyebrow { display: inline-block; margin-bottom: 12px; }
.osr-valori__head .osr-h2 { margin: 0; }
.osr-valori__row { display: flex; align-items: flex-start; }
.osr-valori__cell { flex: 1; text-align: center; padding: 0 18px; }
.osr-valori__cell .osr-icon { font-size: 30px; color: var(--osr-teal); }
.osr-valori__cell .osr-h3 { margin: 14px 0 6px; font-size: 18px; }
.osr-valori__cell .osr-card-desc { margin: 0; }
.osr-valori__divider { width: 1px; align-self: stretch; background: var(--hairline); margin-top: 15px; }

.osr-doctor { padding: 64px 0; }
.osr-doctor--alt { background: var(--cyan-haze); }
.osr-doctor__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: center; }
.osr-doctor__grid--photo-right .osr-doctor__visual { order: 2; }
.osr-doctor__grid--photo-right .osr-doctor__copy { order: 1; }
.osr-doctor__grid--photo-right { grid-template-columns: 1.1fr 0.9fr; }
.osr-doctor__visual { position: relative; }
.osr-doctor__photo { width: 100%; height: 440px; object-fit: cover; border-radius: 20px; box-shadow: var(--shadow-card); display: block; }
.osr-doctor__photo--ph {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--cyan-haze), var(--blue-pale)); color: var(--teal-300);
}
.osr-doctor__quote {
  position: absolute; bottom: -26px; right: -30px; max-width: 290px;
  padding: 22px 24px; border-radius: 20px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 18px 50px rgba(25,65,66,0.28);
}
.osr-doctor__quote--left { right: auto; left: -30px; }
.osr-doctor__quote-mark { font-weight: 800; font-size: 34px; line-height: .5; color: var(--osr-teal); height: 18px; }
.osr-doctor__quote p { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: var(--ink); font-style: italic; font-family: var(--font-sans); }
.osr-doctor__copy .osr-eyebrow { display: inline-block; margin-bottom: 12px; }
.osr-doctor__name { margin: 0 0 6px; }
.osr-doctor__specialty { color: var(--osr-teal); font-size: 14px; margin-bottom: 20px; }
.osr-doctor__bio { max-width: 520px; font-size: 17px; }
.osr-doctor__bio p { margin: 0 0 12px; }
.osr-doctor__bio p:last-child { margin-bottom: 0; }
.osr-doctor__more { margin-top: 18px; }

/* ---------- Pagina dottore ---------- */
.osr-doctor-page__nav { padding-top: 24px; }
.osr-doctor-page__hero { padding: 40px 0 56px; }
/* La foto resta ferma nella sua posizione mentre nome e biografia scorrono:
   colonne allineate in alto, colonna visual sticky sotto l'header. */
.osr-doctor-page__grid { align-items: start; }
.osr-doctor-page__visual { position: sticky; top: 90px; }
.osr-doctor-page__content { margin-top: 28px; font-size: 17px; }
/* Ingresso animato: solo transform/opacity (niente CLS); il ritratto — il
   probabile elemento LCP — non anima mai l'opacity. L'animazione termina con
   transform: none, quindi non interferisce con position: sticky. */
@keyframes osrDoctorSettle { from { transform: translateY(14px); } to { transform: none; } }
@keyframes osrDoctorFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.osr-doctor-page__visual { animation: osrDoctorSettle .5s var(--ease-soft) both; }
.osr-doctor-page__copy   { animation: osrDoctorFadeUp .5s var(--ease-soft) .08s both; }
@media (prefers-reduced-motion: reduce) {
  .osr-doctor-page__visual, .osr-doctor-page__copy { animation: none; }
}

.osr-studio-tech { background: var(--cyan-haze); margin-top: 48px; }
.osr-studio-tech__inner { padding-top: 78px; padding-bottom: 78px; }
.osr-studio-tech__head { text-align: center; max-width: 640px; margin: 0 auto 46px; }
.osr-studio-tech__head .osr-eyebrow { display: inline-block; margin-bottom: 12px; }
.osr-studio-tech__head .osr-h2 { margin: 0 0 12px; }
.osr-studio-tech__photo { width: 100%; height: 380px; object-fit: cover; border-radius: 20px; box-shadow: var(--shadow-card); margin-bottom: 40px; }
.osr-studio-tech__cta { background: var(--cyan-haze); }
.osr-studio-tech__cta .osr-cta-banner-wrap { padding-top: 0; }

/* ---------- Contatti ---------- */
.osr-contatti-hero { padding-top: 24px; }
/* Card e foto (3:2, non ritagliata) devono avere all'incirca la stessa
   altezza: card compatta, colonna foto leggermente più larga. */
.osr-contatti-hero__grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 48px; align-items: center; }
.osr-contatti-card {
  background: var(--osr-petrolio); border-radius: var(--r-panel);
  padding: 36px 40px; color: var(--osr-mint);
  display: flex; flex-direction: column; justify-content: center;
  /* Stessa altezza della foto 3:2 nella colonna accanto:
     (0.95/1.05) × (1537/1023) ≈ 1.36 */
  aspect-ratio: 1.36;
}
.osr-contatti-card__eyebrow { color: var(--osr-mint); opacity: .85; margin-bottom: 10px; }
/* Font fissi (niente vw): l'altezza della card è agganciata alla larghezza
   della colonna via aspect-ratio, un font che scala col viewport cambierebbe
   il numero di righe e romperebbe il pareggio con la foto. */
.osr-contatti-card__title { color: var(--osr-white); margin: 0 0 14px; font-size: 28px; }
.osr-contatti-card__body { color: rgba(215,248,244,0.82); font-size: 17px; line-height: 1.55; margin: 0 0 18px; max-width: 460px; }
.osr-contatti-card__phone {
  display: block; font-size: 36px; font-weight: 600;
  color: var(--osr-white); margin-bottom: 16px;
}
.osr-contatti-card__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.osr-contatti-card__cta .osr-btn { flex: 1; min-width: 170px; justify-content: center; }
.osr-contatti-card__email {
  display: inline-flex; align-items: center; gap: 10px;
  color: rgba(215,248,244,0.85); text-decoration: none; margin-top: 14px; font-size: 16px;
}
/* Sotto i 1200px la foto affiancata diventerebbe troppo bassa rispetto
   al contenuto minimo della card: si impila (card sopra, foto intera sotto). */
@media (max-width: 1199px) {
  .osr-contatti-hero__grid { grid-template-columns: 1fr; }
  .osr-contatti-card { aspect-ratio: auto; }
}
/* Invito a scorrere: sotto la sezione ci sono indirizzo, orari e mappa */
.osr-contatti-scroll {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 22px; color: var(--slate); font-size: 13px;
}
.osr-contatti-scroll .osr-icon { font-size: 16px; transform: rotate(90deg); animation: osrScrollNudge 2s var(--ease-soft) infinite; }
@keyframes osrScrollNudge {
  0%, 100% { transform: rotate(90deg) translateX(0); }
  50%      { transform: rotate(90deg) translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .osr-contatti-scroll .osr-icon { animation: none; transform: rotate(90deg); }
}
/* La foto del team resta a formato nativo (3:2): niente altezza forzata,
   il cover taglierebbe i dottori ai lati. Centrata rispetto alla card. */
.osr-contatti-hero__photo { width: 100%; height: auto; align-self: center; border-radius: var(--r-panel); }
/* Foto team duplicata in fondo pagina, visibile solo su mobile (osr-only-m) */
.osr-contatti-team { padding-bottom: 40px; }
.osr-contatti-team__photo { width: 100%; height: auto; border-radius: var(--r-panel); display: block; }

.osr-contatti-info { padding-bottom: 36px; }
.osr-contatti-info__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; }
.osr-info-card { background: var(--osr-mint); border-radius: var(--r-card); padding: 36px 34px; }
.osr-info-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.osr-info-card__head .osr-h3 { margin: 0; }
.osr-info-card__rows { display: flex; flex-direction: column; gap: 12px; }
.osr-info-card__row {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 12px; border-bottom: 1px solid var(--hairline);
}
.osr-info-card__row.is-last { padding-bottom: 0; border-bottom: none; }
.osr-info-card__row .osr-body { font-size: 16px; }
.osr-info-card__row .osr-mono { font-weight: 500; color: var(--ink); }
.osr-info-card__row .osr-mono.is-muted { color: var(--slate); }
.osr-info-card__address { margin: 0 0 8px; font-size: 17px; color: var(--ink); }
.osr-info-card__note { margin: 0 0 20px; }

.osr-map-wrap { padding-bottom: 40px; }
.osr-map {
  border-radius: var(--r-panel); overflow: hidden; box-shadow: var(--shadow-card);
  background: var(--surface-2); min-height: 380px; position: relative;
}
.osr-map iframe { width: 100%; height: 420px; border: 0; display: block; }
.osr-map__placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 24px;
  background: linear-gradient(140deg, var(--cyan-haze), var(--blue-pale));
}
.osr-map.is-loaded .osr-map__placeholder { display: none; }

/* ---------- Banner consenso ---------- */
.osr-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: 0 20px 20px; display: flex; justify-content: center;
  pointer-events: none;
}
.osr-consent__card {
  pointer-events: auto;
  max-width: 860px; width: 100%;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: var(--r-card);
  box-shadow: 0 18px 50px rgba(25,65,66,0.35);
  padding: 22px 26px;
  animation: osrConsentIn .45s var(--ease-soft);
}
.osr-consent__main { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
@keyframes osrConsentIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.osr-consent__icon {
  width: 52px; height: 52px; border-radius: 16px; flex: none;
  background: var(--osr-mint); color: var(--osr-teal);
  display: flex; align-items: center; justify-content: center;
}
.osr-consent__copy { flex: 1 1 320px; min-width: 0; }
.osr-consent__title { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0 0 6px; font-family: var(--font-sans); }
.osr-consent__body { font-size: 14px; line-height: 1.55; color: var(--fg-2); margin: 0; }
.osr-consent__body a { color: var(--osr-teal); font-weight: 600; text-decoration: none; }
.osr-consent__body a:hover { text-decoration: underline; }
.osr-consent__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.osr-consent__actions .osr-btn { height: 46px; padding: 0 24px; font-size: 15px; }
.osr-consent__customize {
  border: none; background: none; cursor: pointer; padding: 8px 4px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  color: var(--osr-teal); text-decoration: underline; text-underline-offset: 3px;
}
.osr-consent__customize:hover { color: var(--teal-700); }

/* Pannello preferenze granulari */
.osr-consent__prefs { margin-top: 18px; border-top: 1px solid var(--hairline); padding-top: 4px; }
.osr-consent__pref {
  display: flex; align-items: center; gap: 20px;
  padding: 14px 0; border-bottom: 1px solid var(--hairline);
}
.osr-consent__pref-copy { flex: 1; min-width: 0; }
.osr-consent__pref-title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.osr-consent__pref-desc { font-size: 13px; line-height: 1.5; color: var(--slate); margin: 0; }
.osr-consent__prefs-actions { display: flex; justify-content: flex-end; padding-top: 16px; }

/* Interruttore */
.osr-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; flex: none; }
.osr-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.osr-switch__track {
  width: 46px; height: 26px; border-radius: 999px; background: var(--teal-200);
  position: relative; transition: background var(--dur) var(--ease-soft); flex: none;
}
.osr-switch__track::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform var(--dur) var(--ease-soft);
}
.osr-switch input:checked + .osr-switch__track { background: var(--osr-teal); }
.osr-switch input:checked + .osr-switch__track::after { transform: translateX(20px); }
.osr-switch input:focus-visible + .osr-switch__track { outline: 2px solid var(--osr-teal); outline-offset: 2px; }
.osr-switch__label { font-size: 12px; font-weight: 600; color: var(--slate); font-family: var(--font-mono); }
.osr-switch--locked { cursor: not-allowed; }
.osr-switch--locked .osr-switch__track { background: var(--teal-500); opacity: .55; }
.osr-switch__label--state::after { content: 'Off'; }
.osr-switch input:checked ~ .osr-switch__label--state::after { content: 'On'; }

@media (max-width: 640px) {
  .osr-consent { padding: 0 12px 12px; }
  .osr-consent__card { padding: 18px; }
  .osr-consent__main { gap: 14px; }
  .osr-consent__icon { display: none; }
  .osr-consent__actions { width: 100%; flex-wrap: wrap; }
  .osr-consent__actions .osr-btn { flex: 1; justify-content: center; }
  .osr-consent__pref { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---------- Articolo / pagina ---------- */
.osr-article-wrap { padding-top: 24px; }
.osr-article-page { max-width: 840px; padding-bottom: 56px; }
.osr-plain-page { padding-top: 32px; }
.osr-article-back {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--osr-teal); font-size: 14px; margin-bottom: 24px;
}
.osr-article { background: #fff; border-radius: var(--r-panel); overflow: hidden; box-shadow: var(--shadow-card); }
.osr-article__hero { width: 100%; height: 240px; object-fit: cover; display: block; }
.osr-article__body { padding: 36px 44px 44px; }
.osr-article__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.osr-article__date { font-size: 12px; color: var(--slate); }
.osr-article__title { margin: 0 0 22px; font-size: clamp(28px, 3vw, 38px); }
.osr-article__content p { margin: 0 0 16px; }
.osr-article__content h2, .osr-article__content h3 { color: var(--fg-1); margin: 28px 0 10px; }
.osr-article__cta { margin-top: 12px; }

/* ---------- Archivio notizie ---------- */
.osr-archive { padding-top: 40px; padding-bottom: 64px; }
.osr-archive__head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.osr-archive__head .osr-eyebrow { display: inline-block; margin-bottom: 12px; }
.osr-archive__head .osr-h1 { margin: 0 0 12px; }
.osr-archive__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.osr-archive__grid .osr-art-card { flex: none; }
.osr-archive__pagination { text-align: center; margin-top: 40px; }
.osr-archive__pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px; margin: 0 3px;
  border: 1px solid var(--hairline); border-radius: 999px;
  color: var(--fg-2); text-decoration: none; font-family: var(--font-mono); font-size: 14px;
}
.osr-archive__pagination .page-numbers.current { background: var(--osr-teal); color: var(--osr-mint); border-color: var(--osr-teal); }

/* ---------- 404 ---------- */
.osr-syspage { padding: 64px 40px 80px; display: flex; justify-content: center; }
.osr-syspage__card {
  max-width: 560px; text-align: center; background: var(--surface-3);
  border: 1px solid var(--hairline); border-radius: var(--r-panel);
  padding: 56px 48px; box-shadow: var(--shadow-soft);
}
.osr-syspage__badge {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 18px;
  background: var(--osr-mint); color: var(--osr-teal);
  display: flex; align-items: center; justify-content: center;
}
.osr-syspage__code { font-size: 15px; letter-spacing: .2em; color: var(--slate); margin-bottom: 10px; }
.osr-syspage__title { margin: 0 0 14px; font-size: clamp(26px, 3vw, 36px); }
.osr-syspage__body { margin: 0 0 28px; }

/* ---------- Footer ---------- */
.osr-footer-wrap { background: var(--surface); /* override inline per-pagina da osr_footer_backdrop() */ }
.osr-footer {
  background: var(--osr-teal); color: var(--osr-mint);
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  padding: 56px clamp(24px, 4vw, 80px) 28px;
}
.osr-footer-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  padding-bottom: 40px; border-bottom: 1px solid rgba(215,248,244,0.25); flex-wrap: wrap;
}
.osr-footer-cta__title { color: var(--osr-white); margin: 0; font-size: clamp(22px, 2.6vw, 32px); }
.osr-footer-sub { color: rgba(215,248,244,0.85); font-size: 17px; line-height: 1.5; margin: 8px 0 0; max-width: 520px; }
.osr-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 30px; padding: 40px 0 30px; }
.osr-footer-brand img { height: 96px; width: auto; }
.osr-footer-col h4 {
  font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--osr-mint); margin: 0 0 16px;
}
.osr-footer-col__spaced { margin-top: 22px !important; }
.osr-footer-col a, .osr-footer-col span {
  display: flex; align-items: center; gap: 8px;
  color: rgba(215,248,244,0.85); text-decoration: none; font-size: 16px; margin-bottom: 12px;
}
.osr-footer-col a:hover { color: var(--osr-white); }
.osr-footer-base {
  border-top: 1px solid rgba(215,248,244,0.25); padding-top: 22px;
  font-size: 14px; color: rgba(215,248,244,0.65);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.osr-footer-base a { color: rgba(215,248,244,0.75); text-decoration: none; }
.osr-footer-base a:hover { color: var(--osr-white); }
.osr-footer-base__consent {
  border: none; background: none; cursor: pointer; padding: 0;
  font: inherit; color: rgba(215,248,244,0.75);
}
.osr-footer-base__consent:hover { color: var(--osr-white); }
.osr-footer-credit {
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(215,248,244,0.65); font-size: 14px; text-decoration: none;
}
.osr-footer-credit img { height: 18px; width: auto; display: block; opacity: .85; transition: opacity .2s; }
.osr-footer-credit:hover { color: var(--osr-white); }
.osr-footer-credit:hover img { opacity: .6; }

/* ============================================================
   Responsive — breakpoint principale ≤900px + micro-aggiustamenti
   ≤560px, fedele al design mobile (Sito OSR Mobile.dc.html,
   artboard 430×920). Il banner consenso ha il suo blocco a 640px.
   ============================================================ */
@media (max-width: 900px) {
  /* Tipografia fluida mobile (i clamp desktop partono troppo alti) */
  :root {
    --h1-size: clamp(28px, 7.5vw, 38px);
    --h2-size: clamp(23px, 5.8vw, 30px);
  }

  /* Layout base + utility. Solo i lati: molte sezioni fondono .osr-page
     con la propria griglia (.osr-rev__grid, .osr-calm__inner, …) e portano
     lì il padding verticale — lo shorthand `padding: 0 20px` lo azzererebbe
     perché questa regola arriva per ultima nella cascata. */
  .osr-page { padding-left: 20px; padding-right: 20px; }
  .osr-hide-m { display: none; }
  .osr-only-m { display: revert; }

  /* Header e menu */
  .osr-header__nav, .osr-header__cta { display: none; }
  .osr-header__burger { display: flex; }
  .osr-header__logo img { height: 46px; }
  .osr-header { background: rgba(255,255,255,0.85); backdrop-filter: saturate(1.3) blur(12px); -webkit-backdrop-filter: saturate(1.3) blur(12px); }
  body.osr-menu-open { overflow: hidden; }

  /* Hero: pannello a 1 colonna, scrim verticale, CTA affiancati 50/50
     (wrappano da soli sugli schermi più stretti), card NEW in variante
     scura fuori dal pannello */
  .osr-hero-panel { grid-template-columns: 1fr; padding: 34px 24px; gap: 24px; min-height: 0; }
  .osr-hero-panel__scrim { background: linear-gradient(180deg, rgba(25,65,66,0.92), rgba(25,65,66,0.68)); }
  .osr-hero-cta .osr-btn { flex: 1; justify-content: center; }
  .osr-news--glass { display: none; }
  .osr-news--dark { display: flex; }

  /* Punti di forza: 4 su una riga (label brevi via osr-only-m) + pill */
  .osr-features { flex-wrap: nowrap; gap: 8px; padding: 22px 0 0; }
  .osr-feature { flex: 1; min-width: 0; gap: 6px; }
  .osr-feature .osr-icon { font-size: 24px; }
  .osr-feature span { font-size: 11px; max-width: none; }
  .osr-feature-pill { display: inline-flex; gap: 8px; padding: 9px 18px; font-size: 13px; font-weight: 600; }
  .osr-feature-pill .osr-icon { font-size: 16px; }

  /* Cosa facciamo: foto centrata, parole dal posizionamento assoluto
     al flusso statico centrato */
  .osr-cosa__grid { grid-template-columns: 1fr; gap: 30px; }
  .osr-cosa__visual { display: block; min-height: 0; text-align: center; }
  .osr-cosa__halo { display: none; }
  .osr-cosa__photo { width: min(66vw, 230px); height: 330px; margin: 0 auto 18px; }
  .osr-cosa__word { position: static; display: inline-block; transform: none; white-space: normal; margin: 5px 7px; font-size: 18px; }

  /* Sezioni */
  .osr-section { padding: 52px 0; }
  .osr-chi__inner { padding-top: 52px; padding-bottom: 52px; }
  .osr-stats { padding: 28px 12px; }
  .osr-stats__cell { flex: 1 1 100%; padding: 12px; }
  .osr-stats__cell + .osr-stats__cell { border-left: none; border-top: 1px solid rgba(53,109,114,0.18); }
  .osr-stat { font-size: 40px; }

  /* Perché (il collage resta a 2 colonne, come il design) */
  .osr-perche__grid { grid-template-columns: 1fr; gap: 30px; }

  /* Recensioni: titolo e testo PRIMA della card (su mobile l'intro
     introduce la sezione, non la chiude); min-width:0 evita l'overflow
     della colonna citazione a 375px */
  .osr-rev__grid { grid-template-columns: 1fr; gap: 32px; }
  .osr-rev__intro { order: -1; }
  .osr-rev__quote-col { min-width: 0; }
  .osr-rev__meta { padding-left: 0; border-left: none; border-top: 1px solid var(--hairline); padding-top: 18px; min-width: 0; width: 100%; }

  /* Giornale: chips scorrevoli, stack verticale con 3 card + load-more
     (transform inline del carosello desktop neutralizzato) */
  .osr-giornale > .osr-page { padding-top: 52px; padding-bottom: 52px; }
  .osr-giornale__controls { align-items: flex-start; width: 100%; }
  .osr-giornale__chips { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .osr-chip { padding: 9px 12px; white-space: nowrap; flex: none; }
  .osr-giornale__viewport { overflow: visible; }
  .osr-giornale__track { flex-direction: column; gap: 20px; transform: none !important; }
  .osr-art-card { flex: 0 0 auto; width: 100%; }
  .osr-art-card.is-over-limit { display: none; }
  .osr-giornale__pager { display: none; }
  .osr-giornale__more { display: flex; justify-content: center; margin-top: 8px; }
  .osr-giornale__all { text-align: left; }

  /* Hero pagine interne */
  .osr-page-hero { padding: 44px 24px; }

  /* Griglie 3 colonne → 1 */
  .osr-calm__grid, .osr-steps__grid, .osr-archive__grid { grid-template-columns: 1fr; }

  /* Trattamenti: righe a piena colonna; gli order desktop restano,
     così nelle righe --img-left l'immagine sale in cima e il numero
     scende in coda, come nel design */
  .osr-treatments__head { grid-template-columns: 1fr; gap: 18px; }
  .osr-treat-row, .osr-treat-row--img-left { grid-template-columns: 1fr; gap: 12px; }
  .osr-treat-row__img { width: 100%; max-width: none; height: 180px; justify-self: stretch; }
  .osr-treat-row--img-left .osr-treat-row__num { text-align: left; }

  /* Chi siamo */
  .osr-cs-hero { padding: 32px 0 40px; }
  .osr-cs-hero__grid { grid-template-columns: 1fr; gap: 30px; }
  .osr-cs-hero__photo { height: 280px; }
  .osr-valori__row { flex-direction: column; gap: 12px; align-items: center; }
  .osr-valori__cell { width: 100%; padding: 20px 4px; }
  .osr-valori__cell .osr-icon { font-size: 38px; }
  .osr-valori__cell .osr-h3 { font-size: 21px; margin-top: 12px; }
  .osr-valori__cell .osr-card-desc { font-size: 16px; max-width: 400px; margin-left: auto; margin-right: auto; }
  .osr-valori__divider { display: none; }
  /* Dottori: 1 colonna; gli order desktop restano → foto prima nelle
     righe standard, testo prima nelle --photo-right (come il design) */
  .osr-doctor__grid, .osr-doctor__grid--photo-right { grid-template-columns: 1fr; gap: 30px; }
  .osr-doctor__photo { height: 360px; }
  .osr-doctor__quote { position: relative; inset: auto; width: 86%; max-width: none; margin: -56px auto 0; z-index: 3; }
  .osr-doctor__quote--left { left: auto; }
  .osr-doctor-page__visual { position: static; }
  .osr-studio-tech__photo { height: 240px; }

  /* Contatti: CTA impilati a piena larghezza, email centrata, foto team
     spostata in fondo pagina (osr-hide-m / osr-only-m nel template) */
  .osr-contatti-hero__grid, .osr-contatti-info__grid { grid-template-columns: 1fr; gap: 24px; }
  .osr-contatti-card { padding: 40px 24px; }
  .osr-contatti-card__phone { font-size: 30px; }
  .osr-contatti-card__cta .osr-btn { flex: 1 1 100%; min-width: 0; height: 58px; }
  /* overflow-wrap: l'email è un'unica "parola" più larga degli schermi
     stretti e senza andare a capo sfonderebbe la card (grid min-width) */
  .osr-contatti-card__email { align-self: center; justify-content: center; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

  /* Banner CTA */
  .osr-cta-banner { padding: 36px 24px; }
  .osr-cta-banner-wrap { padding-top: 40px; padding-bottom: 48px; }

  /* Articolo */
  .osr-article__body { padding: 26px 22px 32px; }

  /* Footer */
  .osr-footer { padding: 40px 22px 22px; }
  .osr-footer-cta { flex-direction: column; align-items: flex-start; }
  .osr-footer-grid { grid-template-columns: 1fr 1fr; }
  .osr-footer-col a, .osr-footer-col span { overflow-wrap: anywhere; }
  .osr-footer-base { flex-direction: column; }

  /* Target touch: hit-area ampliata senza cambiare la resa visiva */
  .osr-dot { position: relative; }
  .osr-dot::after { content: ''; position: absolute; inset: -10px; }
  .osr-rev-dot { box-sizing: content-box; border: 8px solid transparent; background-clip: padding-box; margin: -8px; }
}

@media (max-width: 560px) {
  .osr-footer-grid { grid-template-columns: 1fr; }
  .osr-btn { height: 52px; padding: 0 24px; font-size: 16px; }
}