/* =====================================================
   MODA SPORT FOLGARIA - main.css
   1. Variabili e reset
   2. Header, lingua, menu
   3. Hero / slideshow
   4. Sezioni home
   5. Pagine interne (layout base) e gallery
   6. Footer
   7. Animazioni
   8. Responsive
   9. Admin
   (10-21 pagine e componenti, vedi i titoli delle sezioni)
   22. Pagine legali (Privacy, Cookie)
   23. Avviso privacy
===================================================== */

/* =====================================
   1. VARIABILI E RESET
===================================== */
/* Font Inter ospitato sul sito (assets/fonts, licenza SIL OFL): nessuna richiesta a Google.
   File variabili (peso 100-900 e dimensione ottica), solo caratteri latini ed europei. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-opsz-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-opsz-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-opsz-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-opsz-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --color-text: #1c1c1c;
  --color-dark: #1b1b1b;
  --color-black: #222;
  --color-accent: #36538C;
  --color-accent-light: #5280D9;
  --color-red: #990d17;
  --color-red-dark: #6D070E;
  --color-beige: #F3F6F9;
  --color-panel: #E5ECF3;
  --color-border: #e4e0d8;
  --color-grey-dark: #555;
  --color-grey: #777;
  --color-grey-mid: #666;
  --color-grey-light: #999;
  --color-grey-lighter: #E2E2E2;
  --color-charcoal: #333;
  --color-white: #ffffff;
  --header-h: 80px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: "Inter", Helvetica, Arial, sans-serif; color: var(--color-text); overflow-x: hidden; background-color: var(--color-white); }
body.menu-open { overflow: hidden; }
a { text-decoration: none; color: inherit; }
img { width: 100%; display: block; }
h1, h2 { color: var(--color-accent); }
button { font-family: inherit; }

.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 30px;
}

/* =====================================
   2. HEADER
===================================== */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  z-index: 2000;
  background: #fff;
  transition: height 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}

header.scrolled {
  height: 65px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.08);
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo img {
  height: 45px;
  width: auto;
  transition: height 0.3s ease;
}
header.scrolled .logo img { height: 40px; }

.header-actions {
  position: relative;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 25px;
}

/* SELETTORE LINGUA */
.lang-switch { position: relative; }

.lang-current {
  display: flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--color-text);
  padding: 8px 2px;
  transition: color 0.3s ease;
}

.lang-caret { transition: transform 0.3s ease; }
.lang-switch.open .lang-caret { transform: rotate(180deg); }
body.menu-open .lang-current { color: var(--color-white); }

.lang-menu {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  min-width: 120px;
  list-style: none;
  background: var(--color-white);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
.lang-switch.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.lang-menu a {
  display: block;
  padding: 13px 18px;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--color-text);
  transition: background 0.2s ease, color 0.2s ease;
}
.lang-menu a:hover { background: var(--color-beige); }
.lang-menu a.active { color: var(--color-accent); font-weight: 700; }

/* HAMBURGER */
.menu-toggle {
  position: relative;
  width: 35px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 3000;
}

.menu-toggle span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-black);
  transition: transform 0.4s ease, top 0.4s ease, opacity 0.3s ease, background 0.3s ease;
}
.menu-toggle span:nth-child(1) { top: 9px; }
.menu-toggle span:nth-child(2) { top: 19px; width: 80%; }
.menu-toggle span:nth-child(3) { top: 29px; width: 90%; }
body.menu-open .menu-toggle span { background: white; }

.menu-toggle.active span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; transform: translateX(20px); }
.menu-toggle.active span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* MENU FULLSCREEN */
.fullscreen-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  background: var(--color-dark);
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.7s cubic-bezier(.77, 0, .18, 1), visibility 0s linear 0.7s;
}
.fullscreen-menu.active {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.7s cubic-bezier(.77, 0, .18, 1), visibility 0s;
}

.menu-close {
  position: absolute;
  top: 32px;
  right: 7%;
  width: 45px;
  height: 45px;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 5;
  opacity: 0;
  transform: translateY(-15px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.fullscreen-menu.active .menu-close { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }

.menu-close span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-white);
  transition: background 0.3s ease;
}
.menu-close span:nth-child(1) { transform: rotate(45deg); }
.menu-close span:nth-child(2) { transform: rotate(-45deg); }
.menu-close:hover span { background: red; }

.menu-background-text {
  position: absolute;
  font-size: 15vw;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.03);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.fullscreen-menu ul { list-style: none; text-align: center; position: relative; z-index: 2; }
.fullscreen-menu li { overflow: hidden; margin: 5px 0; }

.fullscreen-menu a {
  display: inline-block;
  font-size: clamp(30px, min(5.5vw, 7vh), 76px);
  line-height: 1.15;
  font-weight: 700;
  color: white;
  letter-spacing: -2px;
  transform: translateY(120%);
  translate: 0 0;
  transition:
    transform 0.7s cubic-bezier(.77, 0, .18, 1) var(--d, 0s),
    translate 0.3s ease,
    color 0.3s ease;
}
.fullscreen-menu a[aria-current="page"] { color: var(--color-accent-light); }

.fullscreen-menu.active li:nth-child(1) a { transform: translateY(0); --d: 0.15s; }
.fullscreen-menu.active li:nth-child(2) a { transform: translateY(0); --d: 0.22s; }
.fullscreen-menu.active li:nth-child(3) a { transform: translateY(0); --d: 0.29s; }
.fullscreen-menu.active li:nth-child(4) a { transform: translateY(0); --d: 0.36s; }
.fullscreen-menu.active li:nth-child(5) a { transform: translateY(0); --d: 0.43s; }
.fullscreen-menu.active li:nth-child(6) a { transform: translateY(0); --d: 0.50s; }
.fullscreen-menu.active li:nth-child(7) a { transform: translateY(0); --d: 0.57s; }
.fullscreen-menu.active li:nth-child(8) a { transform: translateY(0); --d: 0.64s; }
.fullscreen-menu.active li:nth-child(9) a { transform: translateY(0); --d: 0.71s; }

/* Voce verso un sito esterno (Playtomic): stesso stile delle altre voci, piu piccola */
.fullscreen-menu li.menu-esterno { margin-top: clamp(6px, 1.4vh, 14px); }
.fullscreen-menu .menu-esterno a {
  font-size: clamp(20px, min(2.8vw, 3.6vh), 38px);
  letter-spacing: -.5px;
}
.fullscreen-menu .menu-esterno a::after {
  content: "\2197";
  margin-left: .3em;
  font-weight: 400;
  font-size: .8em;
  vertical-align: .08em;
}

.fullscreen-menu a:hover { color: var(--color-accent-light); translate: 0 -3px; }

/* =====================================
   3. HERO / SLIDESHOW
===================================== */
.hero {
  margin-top: var(--header-h);
  width: 100%;
  height: min(56.25vw, calc(90vh - var(--header-h)));
  height: min(56.25vw, calc(90svh - var(--header-h)));
  position: relative;
  overflow: hidden;
  background: var(--color-panel);
}

.slides { position: relative; height: 100%; }

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}
.slide.active { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; }

.hero--vuoto { display: flex; align-items: center; justify-content: center; height: 260px; }
.hero-vuoto-msg { color: var(--color-grey-dark); font-size: 15px; padding: 20px; text-align: center; }

.slider-dots {
  position: absolute;
  bottom: 40px;
  left: max(30px, calc((100% - 1280px) / 2 + 30px));
  display: flex;
  gap: 12px;
  z-index: 5;
}

.dot {
  width: 35px;
  height: 14px;
  border: none;
  padding: 6px 0;
  background: rgba(255, 255, 255, 0.4);
  background-clip: content-box;
  cursor: pointer;
  transition: background-color 0.3s;
}
.dot.active { background-color: white; }
.dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* INVITO A SCORRERE */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 34px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transform: translateX(-50%);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  transition: opacity 0.4s ease;
}

.scroll-hint-track {
  position: relative;
  width: 2px;
  height: 56px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 2px;
}

.scroll-hint-track::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 45%;
  background: var(--color-white);
  border-radius: 2px;
  animation: scroll-hint 2s cubic-bezier(.77, 0, .18, 1) infinite;
}

.scroll-hint:hover .scroll-hint-track::after { animation-duration: 1.2s; }
.scroll-hint:focus-visible { outline: 2px solid var(--color-white); outline-offset: 6px; }
body.scrolled .scroll-hint { opacity: 0; pointer-events: none; }

@keyframes scroll-hint {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(225%); }
  100% { transform: translateY(225%); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint-track::after { animation: none; transform: translateY(60%); }
  .slide { transition: none; }
}

/* =====================================
   4. SEZIONI HOME
===================================== */

/* INTRO */
.intro {
  text-align: center;
  padding-top: 100px;
  padding-bottom: 120px;
}

.intro .intro-etichetta {
  display: inline-block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-accent);
}

.intro h1 {
  font-size: clamp(52px, 5vw, 72px);
  max-width: 900px;
  letter-spacing: -1px;
  font-weight: 900;
  line-height: 1.0;
  margin: 20px auto;
}

.intro p {
  max-width: 600px;
  margin: 0 auto;
  color: var(--color-grey-dark);
  line-height: 1.7;
  font-size: 1.05em;
}

/* CARD STAGIONI */
.seasons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.season-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.07);
  overflow: hidden;
  border-radius: 10px;
  color: var(--color-text);
}

.season-image { height: 280px; overflow: hidden; }

.season-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.season-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: left;
  width: 100%;
  padding: 40px 35px;
}

.season-content h2 {
  font-size: clamp(26px, 3vw, 32px);
  letter-spacing: -1px;
  margin-bottom: 14px;
  color: var(--color-red);
}

.season-content .season-text { line-height: 1.6; font-size: 14px; color: #555; padding-bottom: 20px; }

.season-content .cta-primary,
.season-content .cta-secondary {
  align-self: flex-start;
  margin-top: auto;
}

/* PULSANTI */
.cta-primary,
.cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  cursor: pointer;
  padding: 19px 30px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  line-height: 1.6;
  white-space: normal;
  border-radius: 30px;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.cta-primary .cta-arrow,
.cta-secondary .cta-arrow {
  flex-shrink: 0;
  display: inline-flex;
  transition: transform 0.35s ease;
}

.cta-primary:hover .cta-arrow,
.cta-secondary:hover .cta-arrow { transform: translateX(5px); }

.cta-primary {
  background: var(--color-red);
  color: var(--color-white);
  border: 1px solid var(--color-red);
}
.cta-primary:hover {
  background: var(--color-red-dark);
  border-color: var(--color-red-dark);
  transform: scale(1.01);
}

.cta-secondary {
  background: var(--color-black);
  color: var(--color-white);
  border: 1px solid var(--color-black);
}
.cta-secondary:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: scale(1.04);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.1);
}

/* PREVENTIVO */
.cta-preventivo {
  margin: 0 auto;
  background-color: var(--color-panel);
  display: flex;
  border-radius: 10px;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  padding: 70px;
}

.cta-preventivo-text { flex: 1 1 55%; }

.cta-preventivo-image {
  flex: 0 0 40%;
  align-self: stretch;
  min-height: 380px;
  border-radius: 6px;
  overflow: hidden;
}
.cta-preventivo-image img { width: 100%; height: 100%; object-fit: cover; }

.cta-preventivo-text .cta-preventivo-etichetta {
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-grey-dark);
}

.cta-preventivo-text h2 {
  font-size: clamp(42px, 4vw, 48px);
  letter-spacing: -2px;
  color: var(--color-dark);
  margin: 18px 0 20px;
}

.cta-preventivo-text p {
  max-width: 720px;
  color: var(--color-grey-dark);
  line-height: 1.8;
  margin-bottom: 25px;
}

.cta-preventivo-text .cta-preventivo-punti {
  color: var(--color-charcoal);
  font-size: 14px;
  margin-bottom: 35px;
}

/* PERCHE' SCEGLIERE */
.why { padding-top: 100px; padding-bottom: 100px; }

.why-header { max-width: 720px; margin: 0 auto 60px; text-align: center; }

.sezione-etichetta {
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--color-accent);
}

.why-header h2 {
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -2px;
  margin: 18px 0;
}
.why-header p { color: var(--color-grey-dark); line-height: 1.8; }

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 50px;
}

.why-item h3 {
  font-size: 18px;
  margin-bottom: 12px;
  padding-top: 20px;
  border-top: 2px solid var(--color-text);
}
.why-item p { font-size: 14px; color: var(--color-grey-mid); line-height: 1.7; }

/* RECENSIONI */
.reviews {
  background: var(--color-accent);
  color: white;
  padding-top: 100px;
  padding-bottom: 100px;
  text-align: center;
}

.reviews > .sezione-etichetta { color: #fff; }

.reviews h2 {
  color: var(--color-white);
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -2px;
  margin: 18px auto 15px;
  max-width: 720px;
}

.reviews > p {
  max-width: 720px;
  margin: 0 auto 50px;
  color: var(--color-grey-lighter);
  line-height: 1.8;
}

.reviews-scores {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin-bottom: 50px;
  font-size: 14px;
  color: var(--color-grey-lighter);
}
.reviews-scores strong { font-size: 22px; color: var(--color-white); margin-right: 6px; }

.reviews-slider { position: relative; text-align: left; }

.reviews-track {
  --gap: 24px;
  --per-view: 3;
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.reviews-track::-webkit-scrollbar { display: none; }
.reviews-track:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.review-card {
  flex: 0 0 calc((100% - var(--gap) * (var(--per-view) - 1)) / var(--per-view));
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 36px 32px 30px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}

.review-card blockquote {
  position: relative;
  flex: 1;
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-white);
  padding-top: 34px;
}
.review-card blockquote::before {
  content: "\201C";
  position: absolute;
  top: -14px;
  left: -4px;
  font-size: 72px;
  line-height: 1;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
}

.review-testo p + p { margin-top: 12px; }
/* Recensioni lunghe: chiuse a 8 righe, "Leggi tutto" le apre (initRecensioni in main.js) */
.review-testo.is-chiusa {
  max-height: calc(1.65em * 8);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 65%, transparent);
          mask-image: linear-gradient(#000 65%, transparent);
}
.review-altro {
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-white);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.review-altro[hidden] { display: none; }
.review-altro:focus-visible { outline: 2px solid var(--color-white); outline-offset: 3px; }

.review-card cite {
  display: block;
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-grey-lighter);
}

.reviews-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}
.reviews-nav[hidden] { display: none; }

.reviews-nav button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  color: var(--color-white);
  font-size: 18px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.reviews-nav button:hover:not(:disabled) { background: var(--color-white); color: var(--color-accent); }
.reviews-nav button:disabled { opacity: 0.3; cursor: default; }
.reviews-nav button:focus-visible { outline: 2px solid var(--color-white); outline-offset: 3px; }

/* MARCHI */
.brands { padding-top: 100px; padding-bottom: 100px; text-align: center; }

.brands h2 {
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -2px;
  margin: 18px auto 50px;
  max-width: 720px;
}

.brands-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  filter: grayscale(1);
  transition: filter 0.3s;
}
.brand-logo img { max-width: 100%; }
.brand-logo:hover { filter: grayscale(0); }

/* SEDI */
.locations { padding-top: 100px; padding-bottom: 60px; }

.locations-header { max-width: 720px; margin: 0 auto 60px; text-align: center; }

.locations-header h2 {
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -2px;
  margin: 18px 0;
}
.locations-header p { color: var(--color-grey-dark); line-height: 1.8; }

.location-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 60px;
}

.location-card { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; color: var(--color-text); }
.location-card .loc-image { height: 320px; overflow: hidden; }
.location-card .loc-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }

.location-card .loc-body {
  background: var(--color-beige);
  padding: 40px;
  border-radius: 0 0 10px 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.location-card h3 { font-size: 29px; letter-spacing: -1px; margin-bottom: 6px; }

.location-card .loc-address {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-accent);
  margin-bottom: 18px;
}

.location-card .loc-desc { color: var(--color-grey-dark); line-height: 1.7; margin-bottom: 20px; }
.location-card .cta-secondary { align-self: flex-start; margin-top: auto; }

.comparison-table { width: 100%; border-collapse: collapse; font-size: 14px; }

.comparison-table th,
.comparison-table td {
  text-align: left;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-border);
}

.comparison-table th {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  color: var(--color-grey);
  font-weight: normal;
}

.comparison-table td:last-child,
.comparison-table th:last-child {
  color: var(--color-accent);
  font-weight: 600;
}

/* HOVER CARD */
.season-card,
.location-card {
  position: relative;
  transition: box-shadow 0.45s ease, transform 0.45s cubic-bezier(.22, .61, .36, 1);
}

.season-card::after,
.location-card::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 4px;
  background: var(--color-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(.77, 0, .18, 1);
}
.location-card::after { background: var(--color-accent); }

a.season-card:hover,
a.location-card:hover,
a.season-card:focus-visible,
a.location-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 25px 50px rgba(27, 27, 27, 0.14);
}

a.season-card:hover::after,
a.location-card:hover::after,
a.season-card:focus-visible::after,
a.location-card:focus-visible::after { transform: scaleX(1); }

a.season-card:hover img,
a.location-card:hover .loc-image img,
a.season-card:focus-visible img,
a.location-card:focus-visible .loc-image img { transform: scale(1.07); }

a.season-card:hover .cta-secondary,
a.location-card:hover .cta-secondary,
a.season-card:focus-visible .cta-secondary,
a.location-card:focus-visible .cta-secondary {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

a.season-card:hover .cta-arrow,
a.location-card:hover .cta-arrow,
a.season-card:focus-visible .cta-arrow,
a.location-card:focus-visible .cta-arrow { transform: translateX(6px); }

.season-card:focus-visible,
.location-card:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .season-card, .location-card, .season-card img, .location-card img, .season-card::after, .location-card::after { transition: none; }
  .season-card:hover, .location-card:hover { transform: none; }
  .season-card:hover img, .location-card:hover img { transform: none; }
}

/* =====================================
   5. PAGINE INTERNE (layout base) E GALLERY
===================================== */
.page-intro {
  padding-top: calc(var(--header-h) + 100px);
  padding-bottom: 60px;
}
.hero ~ .page-intro { padding-top: 90px; }

.page-intro h1 {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.05;
  max-width: 900px;
  margin-bottom: 24px;
}

.page-intro-testo {
  max-width: 680px;
  font-size: 1.1em;
  line-height: 1.7;
  color: var(--color-grey-dark);
}

.page-sezione {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 80px;
}
.page-sezione--invertita .page-sezione-img { order: -1; }

.page-sezione h2 {
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 18px;
}

.page-sezione-testo { line-height: 1.8; color: var(--color-grey-dark); max-width: 60ch; }

.page-sezione-img { border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; }
.page-sezione-img img { height: 100%; object-fit: cover; }

.page-404 { min-height: 60vh; }
.page-404 .cta-secondary { margin-top: 30px; }

/* GALLERY */
.gallery-section { padding-top: 40px; padding-bottom: 100px; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.gallery-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-beige);
}
.gallery-item img { aspect-ratio: 4 / 3; object-fit: cover; }

.gallery-caption {
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-grey-dark);
}
.gallery-caption:empty { display: none; }

/* =====================================
   6. FOOTER
===================================== */
footer {
  background: linear-gradient(318deg, rgba(35, 59, 107, 1) 0%, rgba(35, 36, 37, 1) 100%);
  color: white;
  text-align: center;
  padding: 40px 40px 0;
  font-size: 13px;
}

.footer-inner {
  max-width: 1270px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  text-align: left;
  padding-bottom: 50px;
}

.footer-brand {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 10px 0 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 10px;
}

.footer-inner h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-beige);
  margin-bottom: 18px;
}

.footer-inner p,
.footer-inner a {
  display: block;
  font-size: 14px;
  color: var(--color-grey-lighter);
  line-height: 1.9;
}
.footer-inner a:hover { color: var(--color-white); }

.footer-inner h4 a {
  display: inline;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.footer-brand-logo { display: inline-block; flex-shrink: 0; }
.footer-inner .footer-brand-testo {
  font-size: 2em;
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.2;
}

.footer-inner .footer-brand p {
  flex: 1;
  max-width: 720px;
  line-height: 1.7;
}

.footer-social {
  display: flex;
  gap: 12px;
  margin-left: auto;
  flex-shrink: 0;
}

.footer-inner .footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-white);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.footer-inner .footer-social a:hover {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-dark);
}
.footer-social svg { width: 18px; height: 18px; }

.footer-col-group + .footer-col-group { margin-top: 28px; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 30px;
  padding-top: 30px;
  padding-bottom: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  color: var(--color-white);
}

.footer-credits {
  color: var(--color-grey-lighter);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s ease;
}
.footer-credits:hover { color: var(--color-white); }

/* =====================================
   7. ANIMAZIONI AL PRIMO SCROLL
===================================== */
.reveal:nth-child(2)  { --i: 1; }
.reveal:nth-child(3)  { --i: 2; }
.reveal:nth-child(4)  { --i: 3; }
.reveal:nth-child(5)  { --i: 4; }
.reveal:nth-child(6)  { --i: 5; }
.reveal:nth-child(7)  { --i: 6; }
.reveal:nth-child(8)  { --i: 7; }
.reveal:nth-child(9)  { --i: 8; }
.reveal:nth-child(10) { --i: 9; }
.reveal:nth-child(11) { --i: 10; }
.reveal:nth-child(n+12) { --i: 11; }

.brands-grid { --step: 0.04s; }

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; }
  .reveal.in {
    animation: reveal-up 0.9s cubic-bezier(.22, .61, .36, 1) calc(var(--i, 0) * var(--step, 0.1s)) both;
  }

  .reveal-clip img { clip-path: inset(0 100% 0 0); }
  .reveal-clip.in img {
    animation:
      reveal-clip 1.2s cubic-bezier(.77, 0, .18, 1) 0.15s both,
      reveal-zoom 1.6s cubic-bezier(.22, .61, .36, 1) 0.15s both;
  }

  .why-item h3 { position: relative; border-top-color: transparent; }
  .why-item h3::before {
    content: "";
    position: absolute;
    top: -2px; left: 0;
    width: 100%; height: 2px;
    background: var(--color-text);
    transform: scaleX(0);
    transform-origin: left;
  }
  .why-item.in h3::before {
    animation: reveal-line 1s cubic-bezier(.77, 0, .18, 1) calc(var(--i, 0) * var(--step, 0.1s) + 0.2s) both;
  }
}

@keyframes reveal-up   { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: none; } }
@keyframes reveal-clip { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes reveal-zoom { from { scale: 1.15; } to { scale: 1; } }
@keyframes reveal-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* =====================================
   8. RESPONSIVE
===================================== */
@media (max-width: 1024px) { .reviews-track { --per-view: 2; } }

@media (max-width: 1024px) and (min-width: 769px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) and (min-width: 769px) {
  .seasons { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  :root { --header-h: 70px; }
  .wrap { padding-left: 25px; padding-right: 25px; }
  .why, .brands, .locations { padding-top: 70px; padding-bottom: 70px; }
  .reviews { padding-top: 70px; padding-bottom: 70px; }
  .reviews > .sezione-etichetta, .reviews > h2, .reviews > p { padding-left: 25px; padding-right: 25px; }
  .header-actions { gap: 14px; }
  .lang-current { font-size: 12px; }
  .menu-close { top: 22px; right: 25px; }
  header.scrolled { height: 50px; }
  .logo img, header.scrolled .logo img { height: 30px; }
  .hero { height: min(80vw, calc(100vh - var(--header-h))); height: min(80vw, calc(100svh - var(--header-h))); }
  .scroll-hint { bottom: 20px; gap: 8px; font-size: 10px; }
  .scroll-hint-track { height: 36px; }
  .slider-dots { bottom: 24px; left: 25px; }
  .fullscreen-menu a { font-size: clamp(26px, 5.8vh, 44px); letter-spacing: -1px; }
  .seasons { grid-template-columns: 1fr; }
  .season-image { height: 260px; }
  .intro { padding-top: 80px; padding-bottom: 40px; }
  .intro h1 { font-size: clamp(38px, 10vw, 52px); }
  .cta-preventivo { flex-direction: column; align-items: flex-start; margin: 60px 0; padding: 50px 8%; gap: 35px; }
  .cta-preventivo-image { flex: none; width: 100%; min-height: 0; height: 240px; align-self: auto; }
  .why-grid { grid-template-columns: 1fr 1fr; gap: 35px; }
  .brands-grid { grid-template-columns: repeat(3, 1fr); }
  .location-cards { grid-template-columns: 1fr; }
  .location-card .loc-body { padding: 30px 25px; }
  .comparison-table { display: block; overflow-x: auto; }
  .page-sezione { grid-template-columns: 1fr; gap: 30px; padding-bottom: 60px; }
  .page-sezione--invertita .page-sezione-img { order: 0; }
  .footer-inner { grid-template-columns: 1fr; gap: 30px; }
  footer { padding-left: 0; padding-right: 0; }
  .footer-brand { flex-direction: column; align-items: flex-start; gap: 20px; padding-bottom: 30px; }
  .footer-social { margin-left: 0; }
}

@media (max-width: 640px) {
  .reviews-track { --per-view: 1.12; --gap: 16px; }
  .review-card { padding: 30px 24px 24px; }
}

@media (max-width: 480px) {
  .why-grid { grid-template-columns: 1fr; }
}

/* =====================================================
   9. ADMIN
===================================================== */
:root {
  --admin-bar-h: 48px;
  --admin-bg:    #1a1a2e;
  --admin-accent:#e94560;
  --admin-text:  #eee;
  --overlay-bg:  rgba(0,0,0,.45);
}

.admin-bar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--admin-bar-h);
  background: var(--admin-bg); color: var(--admin-text);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 20px; z-index: 9999; font-size: .85rem;
}
.admin-bar-info { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.admin-bar-info span { opacity: .6; font-size: .78rem; }
.admin-bar-azioni { display: flex; align-items: center; gap: 10px; }
.admin-bar-hint { opacity: .6; font-size: .78rem; margin-right: 6px; }
.admin-bar .btn-admin { background: #2c2c4a; display: inline-block; }
.admin-bar .btn-admin:hover { background: #3a3a5e; }
.admin-bar .btn-admin.danger { background: var(--admin-accent); }

body.is-admin { padding-top: var(--admin-bar-h); }
body.is-admin header { top: var(--admin-bar-h); }
body.is-admin .fullscreen-menu { top: var(--admin-bar-h); height: calc(100vh - var(--admin-bar-h)); }

.btn-admin {
  background: var(--admin-bg); color: #fff; border: none;
  padding: 7px 16px; border-radius: 4px; font-size: .82rem; cursor: pointer;
  font-family: inherit; line-height: 1.4;
}
.btn-admin:disabled { opacity: .6; cursor: wait; }
.btn-admin.success { background: #27ae60; }
.btn-admin.danger  { background: var(--admin-accent); }

#toast {
  position: fixed; bottom: 24px; right: 24px;
  background: #222; color: #fff; padding: 10px 20px;
  border-radius: 6px; font-size: .85rem;
  opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 99999;
}
#toast.show { opacity: 1; }
#toast.ok  { border-left: 4px solid #27ae60; }
#toast.err { border-left: 4px solid var(--admin-accent); }

#upload-loading {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 99999; color: #fff; gap: 16px;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
#upload-loading.show { opacity: 1; pointer-events: all; }
#upload-loading .ul-spinner {
  width: 48px; height: 48px;
  border: 4px solid rgba(255,255,255,.3); border-top-color: #fff;
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Campi testo editabili --- */
.is-admin [data-campo] {
  outline: 1px dashed rgba(233, 69, 96, .55);
  outline-offset: 4px;
  cursor: text;
  min-width: 3em;
  transition: outline-color .2s, background-color .2s;
}
.is-admin [data-campo]:hover { outline-color: var(--admin-accent); }
.is-admin [data-campo]:focus { outline: 2px solid var(--admin-accent); background-color: rgba(233, 69, 96, .04); }
.is-admin [data-campo].cms-campo-modificato { outline: 2px solid #f39c12; }
.is-admin [data-campo]:empty::before { content: attr(data-placeholder); color: #aaa; font-style: italic; font-weight: 400; }

/* Barra salva/annulla del blocco, visibile solo con modifiche in sospeso */
.cms-blocco { position: relative; }
.cms-bar {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 60;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 14px;
  background: var(--admin-bg);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  white-space: nowrap;
  text-align: left;
}
.cms-dirty > .cms-bar { display: flex; }
.cms-bar .cms-bar-stato {
  font: 600 12px/1 "Inter", sans-serif;
  letter-spacing: 0;
  text-transform: none;
  color: #f5c26b;
  margin-right: 4px;
}
.cms-bar .cms-btn {
  border: none; border-radius: 4px; cursor: pointer;
  padding: 7px 14px;
  font: 600 12px/1.2 "Inter", sans-serif;
  letter-spacing: 0; text-transform: none;
  background: #3a3a5e; color: #fff;
}
.cms-bar .cms-salva { background: #27ae60; }
.cms-bar .cms-btn:disabled { opacity: .6; cursor: wait; }

/* --- Immagini sostituibili --- */
.cms-img-host { position: relative; }
.cms-img-host img { transition: filter .25s; }
.cms-img-host:hover img { filter: brightness(.7); }
.cms-img-btn {
  white-space: nowrap;
  position: absolute; top: 50%; left: 50%; z-index: 20;
  transform: translate(-50%, -50%);
  padding: 10px 18px;
  border: 1px solid rgba(255,255,255,.8); border-radius: 30px;
  background: rgba(26, 26, 46, .85); color: #fff;
  font: 600 13px/1.2 "Inter", sans-serif;
  cursor: pointer;
  opacity: 0; transition: opacity .2s;
}
.cms-img-host:hover .cms-img-btn,
.cms-img-btn:focus-visible { opacity: 1; }
@media (hover: none) { .cms-img-btn { opacity: 1; } }
/* Foto facoltativa: Cambia sopra, Rimuovi sotto */
.cms-img-host:has(.cms-img-btn--rimuovi) .cms-img-btn:not(.cms-img-btn--rimuovi) { transform: translate(-50%, -120%); }
.cms-img-btn--rimuovi { transform: translate(-50%, 20%); background: rgba(150, 18, 28, .9); }

/* In admin le card sono <div>: niente effetti hover da link */
.is-admin .season-card,
.is-admin .location-card { cursor: default; }

/* --- Gestione slide --- */
.slide-manager {
  background: #eef0f6;
  border-bottom: 1px solid #d9dce8;
  padding: 18px 0 22px;
  font-size: 13px;
}
.sm-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 14px; }
.sm-head span { color: var(--color-grey-dark); }
.slide-thumbs { display: flex; flex-wrap: wrap; gap: 12px; }
.slide-thumb {
  position: relative;
  width: 168px; aspect-ratio: 16 / 9;
  border-radius: 6px; overflow: hidden;
  background: #ccd;
  cursor: grab;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.slide-thumb img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.slide-thumb-n {
  position: absolute; left: 6px; bottom: 6px;
  background: rgba(0,0,0,.6); color: #fff;
  font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 10px;
}
.slide-thumb-placeholder {
  width: 168px; aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 2px dashed #9aa0b8; border-radius: 6px;
  background: transparent; color: #556; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.slide-thumb-placeholder span { font-size: 22px; line-height: 1; }
.slide-thumb-placeholder:hover { border-color: var(--admin-accent); color: var(--admin-accent); }

.del-slide,
.del-gallery-img {
  position: absolute; top: 6px; right: 6px; z-index: 5;
  width: 28px; height: 28px; border-radius: 50%;
  border: none; background: var(--admin-accent); color: #fff;
  font-size: 18px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

.cms-trascinato { opacity: .35; }

/* --- Gallery in admin --- */
.gallery-admin-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 20px; font-size: 13px; color: var(--color-grey-dark); }
.is-admin .gallery-item img { cursor: grab; }
.is-admin .gallery-caption { display: block; min-height: 44px; outline: 1px dashed rgba(233,69,96,.55); outline-offset: -6px; cursor: text; }
.is-admin .gallery-caption:focus { outline: 2px solid var(--admin-accent); }
.is-admin .gallery-caption:empty::before { content: attr(data-placeholder); color: #aaa; font-style: italic; }
.save-gallery-caption { margin: 0 16px 14px; }

@media (max-width: 768px) {
  .admin-bar-hint, .admin-bar-info span { display: none; }
  .admin-bar { padding: 0 12px; }
}

/* --- Sessione scaduta (avviso fisso sotto la admin bar) --- */
#cms-sessione {
  position: fixed; left: 50%; top: calc(var(--admin-bar-h) + 12px); z-index: 99998;
  transform: translate(-50%, -12px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  width: max-content; max-width: calc(100% - 24px);
  padding: 12px 18px;
  background: #fff4e0; color: #5a3a00;
  border: 1px solid #f0c36d; border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  font-size: 14px; line-height: 1.4;
  opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
}
#cms-sessione.show { opacity: 1; pointer-events: all; transform: translate(-50%, 0); }
#cms-sessione a {
  font-weight: 700; color: #fff; background: var(--admin-bg);
  padding: 6px 12px; border-radius: 4px;
}

/* --- Pulsante "Modifica pagina" per chi e loggato e guarda il sito --- */
.admin-fab {
  position: fixed; left: 20px; bottom: 20px; z-index: 1900;
  padding: 11px 18px;
  background: var(--admin-bg); color: #fff;
  border-radius: 30px;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  transition: background .2s;
}
.admin-fab:hover { background: #2c2c4a; }
.admin-fab:focus-visible { outline: 3px solid var(--admin-accent); outline-offset: 3px; }

/* =====================================================
   10. LOGIN
===================================================== */
.pagina-login {
  min-height: 100vh;
  background: var(--color-panel);
}

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.login-box {
  width: 100%;
  max-width: 400px;
  padding: 44px 40px 36px;
  background: var(--color-white);
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(27, 41, 70, .1);
}

.login-logo { display: inline-block; margin-bottom: 34px; }
.login-logo img { height: 40px; width: auto; }

.login-box h1 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 8px;
}

.login-intro { color: var(--color-grey-dark); font-size: 15px; line-height: 1.6; margin-bottom: 26px; }

.login-msg {
  margin-bottom: 22px;
  padding: 12px 14px;
  border-left: 3px solid var(--color-accent);
  background: var(--color-beige);
  font-size: 14px; line-height: 1.5;
  color: var(--color-charcoal);
}
.login-msg--errore { border-left-color: var(--color-red); background: #fbeff0; color: var(--color-red-dark); }

.login-form label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-charcoal);
}

.login-form input[type="text"],
.login-form input[type="password"] {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  margin-bottom: 20px;
  border: 1px solid #cfd6df;
  border-radius: 6px;
  background: #fff;
  font: 16px/1 "Inter", Helvetica, Arial, sans-serif;  /* 16px: niente zoom automatico su iPhone */
  color: var(--color-text);
  transition: border-color .2s, box-shadow .2s;
}
.login-form input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(54, 83, 140, .18);
}

.login-pw { position: relative; }
.login-pw input { padding-right: 92px; }
.login-mostra {
  position: absolute; right: 6px; top: 6px;
  height: 36px; padding: 0 12px;
  border: none; border-radius: 4px;
  background: transparent; color: var(--color-accent);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.login-mostra:hover { background: var(--color-beige); }
.login-mostra:focus-visible { outline: 2px solid var(--color-accent); }

.login-invia {
  width: 100%;
  height: 50px;
  margin-top: 6px;
  border: none;
  border-radius: 30px;
  background: var(--color-red);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s;
}
.login-invia:hover { background: var(--color-red-dark); }
.login-invia:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.login-invia:disabled { opacity: .7; cursor: wait; }

.login-link {
  display: inline-block;
  margin-top: 24px;
  font-size: 14px;
  color: var(--color-grey-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.login-link:hover { color: var(--color-accent); }

@media (max-width: 480px) {
  .login-box { padding: 34px 24px 28px; }
}

/* =====================================================
   11. PAGINE HUB (Inverno, Estate, Negozio)
===================================================== */

/* BRICIOLE */
.breadcrumb {
  padding-top: calc(var(--header-h) + 44px);
  font-size: 13px;
  color: var(--color-grey);
}
.hero ~ .breadcrumb { padding-top: 34px; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--color-grey-light); }
.breadcrumb a { text-decoration: underline; text-underline-offset: 3px; transition: color .2s; }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb [aria-current="page"] { color: var(--color-text); font-weight: 600; }

/* INTRO */
.hub-intro {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 30px 80px;
  align-items: end;
  padding-top: 26px;
  padding-bottom: 90px;
}
.hub-intro h1 {
  font-size: clamp(44px, 5.6vw, 78px);
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1;
}
.hub-sottotitolo {
  margin-top: 22px;
  max-width: 28ch;
  font-size: clamp(20px, 2vw, 25px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.3px;
}
.hub-intro-testo {
  font-size: 1.05em;
  line-height: 1.8;
  color: var(--color-grey-dark);
}

/* CTA BOX (preventivo) */
.cta-box-sezione { padding-bottom: 110px; }

.cta-box {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 50px 60px;
  align-items: center;
  padding: 64px;
  border-radius: 10px;
  color: var(--color-white);
  background: linear-gradient(318deg, rgba(35, 59, 107, 1) 0%, rgba(35, 36, 37, 1) 100%);
  box-shadow: 0 30px 60px rgba(27, 41, 70, .18);
}

.cta-box-icona {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .22);
}
.cta-box-icona .icona { width: 30px; height: 30px; }

.cta-box h2 {
  margin: 24px 0 16px;
  color: var(--color-white);
  font-size: clamp(32px, 3.6vw, 46px);
  letter-spacing: -1.5px;
  line-height: 1.05;
}
.cta-box-main > p:not(.cta-box-nota) { max-width: 52ch; line-height: 1.75; color: rgba(255, 255, 255, .8); }

.cta-grande { margin-top: 32px; padding: 22px 34px; font-size: 12px; }
.cta-box-nota { margin-top: 16px; font-size: 13px; color: rgba(255, 255, 255, .6); }

.cta-box-vantaggi {
  padding: 36px 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
}
.cta-box-vantaggi-titolo { margin-bottom: 20px; font-size: 15px; font-weight: 700; }
.cta-box-vantaggi ul { list-style: none; display: grid; gap: 16px; }
.cta-box-vantaggi li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; }
.cta-box-vantaggi li .icona { flex: 0 0 22px; height: 22px; color: #7fd1a0; }

/* INTESTAZIONE DI SEZIONE (centrata) */
.sezione-header { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.sezione-header h2 { font-size: clamp(32px, 4vw, 48px); letter-spacing: -2px; line-height: 1.1; margin-bottom: 18px; }
.sezione-header p { color: var(--color-grey-dark); line-height: 1.8; }

/* GRIGLIA SERVIZI: 3 per riga su desktop, stesso peso per tutte le card */
.servizi { padding-bottom: 110px; }
.servizi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.servizio-card .season-image { height: auto; aspect-ratio: 4 / 3; }
.season-content h3 {
  font-size: clamp(22px, 2.2vw, 26px);
  letter-spacing: -.5px;
  line-height: 1.15;
  margin-bottom: 12px;
  color: var(--color-red);
}

/* HAI BISOGNO DI UN CONSIGLIO? */
.consiglio { padding-bottom: 110px; }
.sedi-contatto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.sede-card {
  display: flex;
  flex-direction: column;
  padding: 44px 40px;
  border-radius: 10px;
  background: var(--color-beige);
}
.sede-icona {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-accent);
}
.sede-icona .icona { width: 24px; height: 24px; }
.sede-card h3 { font-size: 29px; letter-spacing: -1px; margin-bottom: 6px; }
.sede-indirizzo {
  margin-bottom: 26px;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-accent);
}
.sede-servizi-titolo {
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-grey);
}
.sede-servizi { list-style: none; margin-bottom: 32px; color: var(--color-charcoal); line-height: 1.6; }
.sede-servizi li { position: relative; padding: 5px 0 5px 22px; }
.sede-servizi li::before {
  content: "";
  position: absolute; left: 0; top: 13px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}
.sede-servizi.lista-edit { padding-left: 22px; line-height: 2.1; }
.sede-card .cta-secondary { align-self: flex-start; margin-top: auto; }

/* RESPONSIVE PAGINE HUB */
@media (max-width: 1024px) {
  .servizi-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-box { grid-template-columns: 1fr; padding: 54px 48px; }
}

@media (max-width: 768px) {
  .breadcrumb { padding-top: calc(var(--header-h) + 28px); }
  .hero ~ .breadcrumb { padding-top: 24px; }
  .hub-intro { grid-template-columns: 1fr; padding-bottom: 60px; }
  .hub-intro h1 { letter-spacing: -1px; }
  .cta-box-sezione, .servizi, .consiglio { padding-bottom: 70px; }
  .cta-box { padding: 40px 24px; gap: 32px; }
  .cta-box-vantaggi { padding: 26px 22px; }
  .cta-grande { width: 100%; justify-content: space-between; }
  .sezione-header { margin-bottom: 40px; }
  .sedi-contatto { grid-template-columns: 1fr; }
  .sede-card { padding: 34px 26px; }
}

@media (max-width: 640px) {
  .servizi-grid { grid-template-columns: 1fr; }
}


/* =====================================================
   12. PAGINE SERVIZIO (Deposito Sci)
===================================================== */

/* Ancore: il contenuto non finisce sotto l'header fisso */
main [id] { scroll-margin-top: calc(var(--header-h) + 24px); }
body.is-admin main [id] { scroll-margin-top: calc(var(--header-h) + var(--admin-bar-h) + 24px); }

.vantaggi, .confronto, .listino, .dove, .faq, .banner-sezione { padding-bottom: 110px; }

/* ELENCO CON SPUNTA (campo t_lista) */
.lista-titolo { margin: 28px 0 14px; font-weight: 700; color: var(--color-text); line-height: 1.5; }
.lista-check { list-style: none; display: grid; gap: 10px; color: var(--color-charcoal); line-height: 1.55; }
.lista-check li { position: relative; padding-left: 32px; }
.lista-check li::before {
  content: "";
  position: absolute; left: 0; top: 1px;
  width: 21px; height: 21px;
  background: var(--color-accent);
  -webkit-mask: var(--spunta) center / contain no-repeat;
          mask: var(--spunta) center / contain no-repeat;
}
.lista-check {
  --spunta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12.5 2.7 2.7L16 9.8'/%3E%3C/svg%3E");
}
.lista-check--due { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.lista-check.lista-edit { display: block; padding-left: 32px; line-height: 2; }

.page-sezione-testo + .page-sezione-testo,
.lista-check + .page-sezione-testo { margin-top: 24px; }

.nota-evidenza {
  margin-top: 24px;
  padding: 14px 18px;
  border-left: 3px solid var(--color-red);
  background: var(--color-beige);
  border-radius: 0 6px 6px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-charcoal);
}

/* PERCHE' SCEGLIERE: 4 vantaggi con icona */
.vantaggi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.vantaggio {
  padding: 36px 30px;
  border-radius: 10px;
  background: var(--color-beige);
}
.vantaggio-icona {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-accent);
}
.vantaggio-icona .icona { width: 26px; height: 26px; }
.vantaggio h3 { font-size: 19px; letter-spacing: -.3px; line-height: 1.25; margin-bottom: 12px; }
.vantaggio p { font-size: 14px; line-height: 1.7; color: var(--color-grey-dark); }

/* CONFRONTO: due colonne con righe allineate (subgrid), box sovrapposti su smartphone */
.confronto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 30px;
}
.confronto-box {
  display: grid;
  grid-row: span 9;              /* testa + 7 voci + pulsante */
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: 44px 40px;
  border-radius: 10px;
  background: var(--color-beige);
}
.confronto-testa { padding-bottom: 26px; }
.confronto-badge {
  display: inline-block;
  margin-bottom: 18px;
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: var(--color-white);
  color: var(--color-accent);
}
body:not(.is-admin) .confronto-badge:empty { display: none; }
.confronto-box h3 {
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 12px;
  color: var(--color-accent);
}
.confronto-testa p { line-height: 1.7; color: var(--color-grey-dark); }

.confronto-voci {
  list-style: none;
  display: grid;
  grid-row: span 7;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  margin-bottom: 34px;
}
.confronto-voci li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 15px 0;
  border-top: 1px solid rgba(0, 0, 0, .09);
  font-size: 15px;
  line-height: 1.5;
}
.confronto-voci li:last-child { border-bottom: 1px solid rgba(0, 0, 0, .09); }
.confronto-voci .icona { flex: 0 0 21px; height: 21px; color: var(--color-accent); }
.confronto-box > a { align-self: end; justify-self: start; }

/* Box 2: la soluzione "comfort", in blu */
.confronto-box--2 {
  color: var(--color-white);
  background: var(--color-accent);
  box-shadow: 0 30px 60px rgba(27, 41, 70, .18);
}
.confronto-box--2 h3 { color: var(--color-white); }
.confronto-box--2 .confronto-testa p { color: rgba(255, 255, 255, .78); }
.confronto-box--2 .confronto-badge { background: rgba(255, 255, 255, .12); color: var(--color-white); }
.confronto-box--2 .confronto-voci li { border-color: rgba(255, 255, 255, .14); }
.confronto-box--2 .confronto-voci .icona { color: #7fd1a0; }

/* Browser senza subgrid: ogni box resta una colonna normale */
@supports not (grid-template-rows: subgrid) {
  .confronto-box { display: flex; flex-direction: column; grid-row: auto; }
  .confronto-voci { display: block; }
  .confronto-box > a { margin-top: auto; align-self: flex-start; }
}

/* RIQUADRO INFORMATIVO (es. snowboard) */
.box-info {
  display: flex; gap: 16px;
  margin-top: 30px;
  padding: 22px 24px;
  border-radius: 10px;
  border: 1px solid var(--color-panel);
  background: var(--color-white);
  box-shadow: 0 5px 30px rgba(0, 0, 0, .06);
}
.box-info-icona { flex: 0 0 26px; color: var(--color-accent); }
.box-info-icona .icona { width: 26px; height: 26px; }
.box-info-titolo { font-weight: 700; margin-bottom: 6px; }
.box-info p:not(.box-info-titolo) { font-size: 14px; line-height: 1.65; color: var(--color-grey-dark); }

/* SEZIONE TESTO + IMMAGINE con l'immagine alta quanto il testo */
.page-sezione--img-alta { align-items: stretch; }
.page-sezione--img-alta .page-sezione-img { position: relative; aspect-ratio: auto; min-height: 360px; }
.page-sezione--img-alta .page-sezione-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* LISTINO: documento PDF/JPG che si apre in una nuova finestra */
.listino .sezione-header { margin-bottom: 36px; }
.listino-file {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 20px 28px;
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 36px;
  border-radius: 10px;
  background: var(--color-beige);
}
.listino-file-icona {
  flex: 0 0 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-accent);
}
.listino-file-icona .icona { width: 28px; height: 28px; }
.listino-file-testo { flex: 1 1 220px; }
.listino-file-titolo { font-size: 20px; font-weight: 700; letter-spacing: -.3px; margin-bottom: 4px; }
.listino-file-meta { font-size: 13px; color: var(--color-grey); }
.listino-file .cta-primary { flex-shrink: 0; }

/* Admin: pulsanti dei documenti */
.cms-file-bar { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 18px; border-top: 1px dashed #c4d0de; }
.cms-file-btn {
  padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;
  font: 600 13px/1.3 "Inter", sans-serif;
  background: var(--admin-bg); color: #fff;
}
.cms-file-btn:hover { background: #2c2c4a; }
.cms-file-rimuovi { background: var(--admin-accent); }
.cms-file-rimuovi:hover { background: #c7364f; }
.cms-file-hint { font-size: 12px; color: var(--color-grey); }

/* DOVE TROVARCI */
.dove {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px 70px;
  align-items: center;
}
.dove .sede-icona { background: var(--color-beige); }
.dove h2 { font-size: clamp(32px, 4vw, 48px); letter-spacing: -2px; line-height: 1.1; margin-bottom: 18px; }
.dove-nome { font-size: 22px; font-weight: 700; letter-spacing: -.3px; margin-bottom: 4px; }
.dove-testo .sede-indirizzo { margin-bottom: 20px; }
.dove-testo .cta-secondary { margin-top: 30px; }
.dove-servizi { padding: 44px 40px; border-radius: 10px; background: var(--color-beige); }
.dove-servizi .lista-check { gap: 14px; }

/* PRENOTA: varianti del cta-box */
.cta-box-vantaggi--info li .icona { color: #9fbbef; }
.cta-box-orari {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 14px; line-height: 1.65;
  color: rgba(255, 255, 255, .75);
}
.cta-box-nota a { color: var(--color-white); text-decoration: underline; text-underline-offset: 3px; }

/* BANNER NOLEGGIO */
.banner-noleggio {
  display: flex; align-items: center; justify-content: space-between;
  gap: 30px 60px;
  padding: 50px 56px;
  border-radius: 10px;
  background: var(--color-panel);
}
.banner-noleggio h2 { font-size: clamp(26px, 2.8vw, 34px); letter-spacing: -1px; line-height: 1.15; margin-bottom: 12px; }
.banner-noleggio p { max-width: 62ch; line-height: 1.7; color: var(--color-grey-dark); }
.banner-noleggio .cta-primary { flex-shrink: 0; }

/* GRIGLIA A DUE CARD */
.servizi-grid--due { grid-template-columns: repeat(2, 1fr); }
.servizi-grid--due .servizio-card .season-image { aspect-ratio: 16 / 9; }

/* FAQ */
.faq-lista { max-width: 900px; margin: 0 auto; border-top: 1px solid var(--color-grey-lighter); }
.faq-voce { border-bottom: 1px solid var(--color-grey-lighter); }
.faq-domanda {
  position: relative;
  display: block;
  padding: 24px 50px 24px 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text);
  list-style: none;
  cursor: pointer;
  transition: color .2s;
}
.faq-domanda::-webkit-details-marker { display: none; }
summary.faq-domanda:hover { color: var(--color-accent); }
summary.faq-domanda:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }
summary.faq-domanda::before,
summary.faq-domanda::after {
  content: "";
  position: absolute; right: 8px; top: 50%;
  width: 16px; height: 2px;
  background: currentColor;
  transition: transform .3s ease;
}
summary.faq-domanda::after { transform: rotate(90deg); }
details[open] > summary.faq-domanda::after { transform: rotate(0deg); }
.faq-risposta { padding: 0 50px 26px 0; line-height: 1.8; color: var(--color-grey-dark); }
.faq-risposta a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }

/* RESPONSIVE PAGINE SERVIZIO */
@media (max-width: 1024px) {
  .vantaggi-grid { grid-template-columns: repeat(2, 1fr); }
  .dove { grid-template-columns: 1fr; }
  .banner-noleggio { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 900px) {
  /* Due box sovrapposti */
  .confronto-grid { display: flex; flex-direction: column; gap: 24px; }
  .confronto-box { display: flex; flex-direction: column; }
  .confronto-voci { display: block; }
  .confronto-box > a { align-self: flex-start; }
}

@media (max-width: 768px) {
  .vantaggi, .confronto, .listino, .dove, .faq, .banner-sezione { padding-bottom: 70px; }
  .confronto-box { padding: 34px 24px; }
  .confronto-box > a { width: 100%; justify-content: space-between; }
  .page-sezione--img-alta .page-sezione-img { min-height: 0; aspect-ratio: 4 / 3; }
  .listino-file { padding: 28px 24px; }
  .listino-file .cta-primary { width: 100%; justify-content: space-between; }
  .dove-servizi { padding: 34px 26px; }
  .banner-noleggio { padding: 40px 24px; }
  .banner-noleggio .cta-primary { width: 100%; justify-content: space-between; }
  .servizi-grid--due { grid-template-columns: 1fr; }
  .faq-domanda { font-size: 16px; padding-right: 40px; }
  .faq-risposta { padding-right: 0; }
}

@media (max-width: 560px) {
  .vantaggi-grid { grid-template-columns: 1fr; }
  .lista-check--due { grid-template-columns: 1fr; }
}


/* =====================================================
   13. COMPONENTI CONDIVISI (Preventivo, poi le altre pagine servizio)
===================================================== */

/* INTRO con punti di forza e pulsante (Preventivo) */
.intro-punti {
  display: flex; flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 26px;
  font-weight: 600;
  color: var(--color-text);
}
.intro-punti.lista-edit { display: block; }
.hub-intro-testo .cta-grande { margin-top: 30px; }

/* VANTAGGI su tre colonne (6 voci = due righe ordinate) */
.vantaggi-grid--tre { grid-template-columns: repeat(3, 1fr); }

/* MODULO ESTERNO (Wintersteiger) */
.modulo { padding-bottom: 110px; }
.modulo .sezione-header { margin-bottom: 40px; }
.modulo-frame {
  padding: 24px;
  border: 1px solid var(--color-panel);
  border-radius: 10px;
  background: var(--color-white);
  box-shadow: 0 20px 50px rgba(27, 41, 70, .07);
}
.modulo-frame iframe { display: block; width: 100%; min-height: 600px; border: 0; }
.modulo-admin {
  display: flex; align-items: center; gap: 22px;
  min-height: 260px;
  padding: 40px;
  border: 2px dashed #c4d0de;
  border-radius: 8px;
  background: var(--color-beige);
  color: var(--color-grey-dark);
  line-height: 1.7;
}
.modulo-admin .icona { flex: 0 0 44px; height: 44px; color: var(--color-accent); }
.modulo-aiuto {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 26px;
  text-align: center;
  color: var(--color-grey-dark);
}
.modulo-aiuto .icona { flex: 0 0 20px; height: 20px; color: var(--color-accent); }
.modulo-aiuto a { font-weight: 700; color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }

/* COME FUNZIONA: timeline verticale con passi numerati */
.passi { padding-bottom: 110px; }
.passi-lista { list-style: none; max-width: 820px; margin: 0 auto; }
.passo {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0 32px;
  padding-bottom: 44px;
}
.passo:last-child { padding-bottom: 0; }
/* linea che unisce i numeri */
.passo:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 27px; top: 64px; bottom: 8px;
  width: 2px;
  background: var(--color-panel);
}
.passo-numero {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 22px;
  font-weight: 800;
}
.passo-corpo { padding-top: 12px; }
.passo-titolo {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
  font-size: clamp(20px, 2vw, 24px);
  letter-spacing: -.4px;
  line-height: 1.25;
  color: var(--color-text);
}
.passo-icona { flex: 0 0 26px; height: 26px; color: var(--color-red); }
.passo-icona .icona { width: 26px; height: 26px; }
.passo-testo { max-width: 62ch; line-height: 1.75; color: var(--color-grey-dark); }

.passi-nota {
  display: flex; align-items: flex-start; gap: 14px;
  max-width: 820px;
  margin: 44px auto 0;
  padding: 20px 24px;
  border-radius: 10px;
  background: var(--color-beige);
  line-height: 1.65;
}
.passi-nota-icona { flex: 0 0 24px; color: var(--color-accent); }
.passi-nota-icona .icona { width: 24px; height: 24px; }

/* INFORMAZIONI UTILI: titolo a sinistra, voci a destra */
.info-utili {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 40px 80px;
  align-items: start;
  padding-bottom: 110px;
}
.info-utili-testa { position: sticky; top: calc(var(--header-h) + 30px); }
.info-utili-testa h2 { font-size: clamp(32px, 4vw, 48px); letter-spacing: -2px; line-height: 1.1; margin-bottom: 18px; }
.info-utili-testa p { line-height: 1.8; color: var(--color-grey-dark); }
.info-voci { list-style: none; border-top: 1px solid var(--color-grey-lighter); }
.info-voci li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 18px;
  padding: 26px 0;
  border-bottom: 1px solid var(--color-grey-lighter);
}
.info-voci .icona { width: 26px; height: 26px; color: var(--color-accent); }
.info-voci h3 { font-size: 18px; letter-spacing: -.2px; line-height: 1.35; margin-bottom: 6px; }
.info-voci p { line-height: 1.7; color: var(--color-grey-dark); }

/* FRASE DI RASSICURAZIONE prima del box assistenza */
.fianco .sezione-header { margin-bottom: 50px; }

/* CTA BOX: recapiti e rimando a un'altra pagina */
.cta-box-contatti { list-style: none; display: grid; gap: 12px; margin-top: 28px; }
.cta-box-contatti li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.cta-box-contatti .icona { flex: 0 0 22px; height: 22px; color: #9fbbef; }
.cta-box-contatti a { color: var(--color-white); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.cta-box-contatti a:hover { color: #9fbbef; }
.cta-box-rimando p { line-height: 1.7; color: rgba(255, 255, 255, .85); margin: 18px 0 26px; }
.cta-box-rimando-icona { color: #9fbbef; }
.cta-box-rimando-icona .icona { width: 30px; height: 30px; }

/* RESPONSIVE COMPONENTI CONDIVISI */
@media (max-width: 1024px) {
  .vantaggi-grid--tre { grid-template-columns: repeat(2, 1fr); }
  .info-utili { grid-template-columns: 1fr; }
  .info-utili-testa { position: static; }
}

@media (max-width: 768px) {
  .modulo, .passi, .info-utili { padding-bottom: 70px; }
  .modulo-frame { padding: 0; border: 0; box-shadow: none; border-radius: 0; }
  .modulo-admin { flex-direction: column; text-align: center; padding: 30px 22px; }
  .hub-intro-testo .cta-grande { width: 100%; justify-content: space-between; }
  .passo { grid-template-columns: 44px 1fr; gap: 0 18px; padding-bottom: 34px; }
  .passo:not(:last-child)::before { left: 21px; top: 52px; }
  .passo-numero { width: 44px; height: 44px; font-size: 18px; }
  .passo-corpo { padding-top: 7px; }
  .passo-titolo { align-items: flex-start; }
  .passo-icona { display: none; }
}

@media (max-width: 560px) {
  .vantaggi-grid--tre { grid-template-columns: 1fr; }
  .intro-punti { flex-direction: column; }
}


/* =====================================================
   14. NOLEGGIO SCI (componenti riutilizzabili nelle altre pagine)
===================================================== */

/* Intro seguita da un CTA compatto: meno spazio sotto */
.hub-intro--stretta { padding-bottom: 50px; }

/* CTA COMPATTO orizzontale, subito sotto l'H1 */
.cta-compatto-sezione { padding-bottom: 110px; }
.cta-compatto {
  display: flex; align-items: center;
  gap: 24px 36px;
  padding: 30px 36px;
  border-radius: 10px;
  color: var(--color-white);
  background: linear-gradient(318deg, rgba(35, 59, 107, 1) 0%, rgba(35, 36, 37, 1) 100%);
}
.cta-compatto-icona {
  flex: 0 0 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-red);
}
.cta-compatto-icona .icona { width: 28px; height: 28px; }
.cta-compatto-testo { flex: 1 1 auto; }
.cta-compatto-titolo { font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; letter-spacing: -.6px; line-height: 1.15; margin-bottom: 6px; }
.cta-compatto-testo p:not(.cta-compatto-titolo):not(.cta-compatto-nota) { color: rgba(255, 255, 255, .85); line-height: 1.6; }
.cta-compatto-nota { margin-top: 8px; font-size: 13px; color: rgba(255, 255, 255, .6); }
.cta-compatto .cta-primary { flex-shrink: 0; }

/* VANTAGGI BREVI: solo icona e una frase */
.vantaggio--breve { display: flex; align-items: flex-start; gap: 18px; padding: 28px 26px; }
.vantaggio--breve .vantaggio-icona { flex: 0 0 52px; margin-bottom: 0; }
.vantaggio--breve p { font-size: 15px; font-weight: 600; color: var(--color-text); line-height: 1.55; padding-top: 4px; }

/* Pulsante sotto il testo di una page-sezione */
.page-sezione-cta { margin-top: 30px; }

/* DUE BOX AFFIANCATI (preventivo + listino) */
.costo { padding-bottom: 110px; }
.doppio-box { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.doppio-box--uno { grid-template-columns: minmax(0, 640px); justify-content: center; }
.doppio-box-voce {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 44px 40px;
  border-radius: 10px;
  background: var(--color-panel);
}
.doppio-box-voce--chiaro { background: var(--color-beige); }
.doppio-box-voce .vantaggio-icona { margin-bottom: 22px; }
.doppio-box-voce h3 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.6px; line-height: 1.2; margin-bottom: 12px; color: var(--color-accent); }
.doppio-box-voce > p { line-height: 1.75; color: var(--color-grey-dark); margin-bottom: 30px; }
.doppio-box-voce > a { margin-top: auto; }

/* CONVENZIONE: card informativa con tre elementi distinti */
.convenzione { padding-bottom: 110px; }
.convenzione-card { border: 1px solid var(--color-panel); border-radius: 10px; overflow: hidden; }
.convenzione-testa {
  display: flex; align-items: flex-start; gap: 24px;
  padding: 40px;
  background: var(--color-beige);
}
.convenzione-testa .vantaggio-icona { flex: 0 0 52px; margin-bottom: 0; }
.convenzione-testa h2 { font-size: clamp(28px, 3vw, 38px); letter-spacing: -1px; line-height: 1.1; margin-bottom: 10px; }
.convenzione-testa p { max-width: 70ch; line-height: 1.75; color: var(--color-grey-dark); }
.convenzione-voci { display: grid; grid-template-columns: 1.3fr 1fr 1fr; }
.convenzione-voce { padding: 34px 40px; }
.convenzione-voce + .convenzione-voce { border-left: 1px solid var(--color-panel); }
.convenzione-etichetta {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
  font-size: 14px; font-weight: 700;
  color: var(--color-red);
}
.convenzione-etichetta .icona { width: 20px; height: 20px; }
.convenzione-valore { font-size: 17px; font-weight: 600; line-height: 1.5; color: var(--color-text); }
.convenzione-voce .lista-check { margin-top: 16px; }

/* DOVE RITIRARE: introduzione, card sedi e scelta rapida */
.ritiro .sezione-header { margin-bottom: 20px; }
.sedi-ritiro { padding-top: 20px; padding-bottom: 110px; }
.sede-descrizione { margin: 0 0 22px; line-height: 1.7; color: var(--color-grey-dark); }
.sede-card h3 + .sede-descrizione { margin-top: 8px; }
.sede-indirizzo + .sede-descrizione { margin-top: -10px; }
.sede-lista { margin-bottom: 32px; }
.sede-pulsanti { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: auto; }
.sede-card .sede-pulsanti .cta-secondary { margin-top: 0; }
.link-mappa {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600;
  color: var(--color-accent);
  text-decoration: underline; text-underline-offset: 4px;
}
.link-mappa .icona { width: 18px; height: 18px; }
.link-mappa:hover { color: var(--color-red); }

.scelta-sede {
  margin-top: 30px;
  padding: 36px 40px;
  border-radius: 10px;
  border: 1px solid var(--color-panel);
}
.scelta-sede h3 { font-size: 22px; letter-spacing: -.4px; margin-bottom: 14px; color: var(--color-accent); }
.scelta-sede-riga {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 8px 30px;
  padding: 16px 0;
  border-top: 1px solid var(--color-grey-lighter);
  line-height: 1.65;
  color: var(--color-grey-dark);
}
.scelta-sede-nome { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--color-text); }
.scelta-sede-nome .icona { flex: 0 0 20px; height: 20px; color: var(--color-red); }

/* RESPONSIVE NOLEGGIO SCI */
@media (max-width: 1024px) {
  .cta-compatto { flex-wrap: wrap; }
  .cta-compatto-testo { flex-basis: calc(100% - 100px); }
  .convenzione-voci { grid-template-columns: 1fr; }
  .convenzione-voce + .convenzione-voce { border-left: 0; border-top: 1px solid var(--color-panel); }
}

@media (max-width: 768px) {
  .hub-intro--stretta { padding-bottom: 40px; }
  .cta-compatto-sezione, .costo, .convenzione, .sedi-ritiro { padding-bottom: 70px; }
  .cta-compatto { padding: 28px 24px; }
  .cta-compatto-icona { flex-basis: 48px; height: 48px; }
  .cta-compatto .cta-primary, .doppio-box-voce > a { width: 100%; justify-content: space-between; }
  .doppio-box { grid-template-columns: 1fr; }
  .doppio-box-voce { padding: 34px 26px; }
  .convenzione-testa { flex-direction: column; padding: 30px 24px; }
  .convenzione-voce { padding: 26px 24px; }
  .scelta-sede { padding: 28px 24px; }
  .scelta-sede-riga { grid-template-columns: 1fr; }
}


/* =====================================================
   15. CONTATTI E LE NOSTRE SEDI
===================================================== */

/* Testo solo per lettori di schermo */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ELENCO SERVIZI CON ICONA, collegati alle pagine */
.servizi-icone { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.servizio-voce {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  font-size: 15px; line-height: 1.35;
  color: var(--color-charcoal);
}
.servizio-voce .icona { flex: 0 0 22px; height: 22px; color: var(--color-accent); }
a.servizio-voce:hover span { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }

/* MAPPA caricata al clic */
.mappa { position: relative; margin: 28px 0 8px; }
.mappa-segnaposto {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  aspect-ratio: 16 / 9;
  padding: 24px;
  border-radius: 10px;
  text-align: center;
  background:
    linear-gradient(rgba(229, 236, 243, .88), rgba(229, 236, 243, .88)),
    repeating-linear-gradient(35deg, transparent 0 22px, rgba(54, 83, 140, .08) 22px 24px),
    repeating-linear-gradient(-55deg, transparent 0 40px, rgba(54, 83, 140, .08) 40px 43px),
    var(--color-panel);
}
.mappa-icona {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-red); color: var(--color-white);
}
.mappa-icona .icona { width: 24px; height: 24px; }
.mappa-indirizzo { font-weight: 700; color: var(--color-text); }
.mappa-nota { max-width: 40ch; font-size: 12px; line-height: 1.5; color: var(--color-grey); }
.mappa iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; }
.mappa-esterna { margin-top: 12px; }
.mappa button.cta-secondary { font-family: inherit; }

/* CONTATTI: due schede sede affiancate */
.contatti-sedi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  padding-bottom: 110px;
}
.contatto-sede { border-radius: 10px; overflow: hidden; background: var(--color-beige); }
.contatto-sede--rental { border-top: 5px solid #2e8b57; }
.contatto-sede--shop   { border-top: 5px solid var(--color-accent); }
.contatto-sede-img { aspect-ratio: 16 / 9; overflow: hidden; }
.contatto-sede-img img { height: 100%; object-fit: cover; }
.contatto-sede-corpo { padding: 38px 40px 44px; }
.contatto-sede h2 { font-size: clamp(30px, 3vw, 38px); letter-spacing: -1.2px; line-height: 1.1; margin-bottom: 8px; }
.contatto-sede .sede-indirizzo,
.sede-recapiti .sede-indirizzo { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; }
.sede-indirizzo .icona { flex: 0 0 18px; height: 18px; }
.contatto-sede-titolo { font-size: 19px; font-weight: 700; letter-spacing: -.3px; line-height: 1.35; margin-bottom: 8px; }
.contatto-sede-testo { line-height: 1.7; color: var(--color-grey-dark); margin-bottom: 30px; }

/* Pulsanti di contatto: tessere grandi, facili da toccare */
.contatto-azioni { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.contatto-azioni-largo { grid-column: 1 / -1; }
.contatto-azioni a {
  display: flex; align-items: center; gap: 14px;
  min-height: 64px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--color-white);
  border: 1px solid var(--color-panel);
  font-weight: 700; font-size: 15px; line-height: 1.3;
  color: var(--color-text);
  transition: border-color .2s, box-shadow .2s;
  overflow-wrap: anywhere;
}
.contatto-azioni a:hover { border-color: var(--color-accent); box-shadow: 0 8px 22px rgba(27, 41, 70, .08); }
.contatto-azioni .icona { flex: 0 0 24px; height: 24px; color: var(--color-red); }
.contatto-azioni small { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 500; color: var(--color-grey); }
.contatto-sede .mappa { margin-bottom: 34px; }

/* ORARI e TI ASPETTIAMO */
.banner-icona-testo { display: flex; align-items: flex-start; gap: 20px; }
.banner-icona {
  flex: 0 0 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-white); color: var(--color-accent);
}
.banner-icona .icona { width: 26px; height: 26px; }
.banner-pulsanti { display: flex; flex-wrap: wrap; gap: 14px; flex-shrink: 0; }
.aspettiamo { text-align: center; }
.aspettiamo h2 { font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -1.5px; line-height: 1.1; margin-bottom: 28px; }
.aspettiamo .banner-pulsanti { justify-content: center; }

/* LE NOSTRE SEDI: due colonne speculari */
.sedi-schede { padding-bottom: 110px; }
.sedi-schede-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: stretch; }
.sede-colonna { display: flex; flex-direction: column; gap: 24px; }
.sede-scheda {
  position: relative;
  display: flex; flex-direction: column;
  flex: 1 1 auto;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-white);
  box-shadow: 0 5px 30px rgba(0, 0, 0, .07);
  transition: box-shadow .3s, transform .3s;
}
.sede-scheda-img { aspect-ratio: 16 / 9; overflow: hidden; }
.sede-scheda-img img { height: 100%; object-fit: cover; transition: transform .6s ease; }
.sede-scheda-corpo { display: flex; flex-direction: column; flex: 1 1 auto; padding: 34px 38px 40px; }
.sede-scheda h3 { font-size: clamp(26px, 2.6vw, 32px); letter-spacing: -1px; line-height: 1.12; margin-bottom: 12px; color: var(--color-accent); }
.sede-scheda .sede-indirizzo { margin-bottom: 14px; }
.sede-scheda-testo { line-height: 1.7; color: var(--color-grey-dark); margin-bottom: 28px; }
.sede-scheda .servizi-icone { margin-bottom: 26px; }
.sede-ideale { margin-bottom: 32px; }
.sede-scheda-cta { align-self: flex-start; margin-top: auto; }

/* Card cliccabile per intero: il pulsante si estende su tutta la card,
   i servizi restano sopra e portano alle proprie pagine */
.sede-scheda--link .sede-scheda-cta::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* niente transform sul pulsante: renderebbe il pulsante il riferimento del link esteso */
.sede-scheda--link .sede-scheda-cta:hover { transform: none; }
.sede-scheda--link .servizio-voce { position: relative; z-index: 2; }
.sede-scheda--link:hover { box-shadow: 0 20px 50px rgba(27, 41, 70, .14); }
.sede-scheda--link:hover .sede-scheda-img img { transform: scale(1.03); }
.sede-scheda--link:has(.servizio-voce:hover) .sede-scheda-img img { transform: none; }

.sede-recapiti { padding: 30px 34px; border-radius: 10px; background: var(--color-beige); }
.sede-recapiti ul { list-style: none; display: grid; gap: 12px; }
.sede-recapiti li { display: flex; align-items: center; gap: 12px; }
.sede-recapiti li .icona { flex: 0 0 20px; height: 20px; color: var(--color-red); }
.sede-recapiti a { font-weight: 600; color: var(--color-text); text-decoration: underline; text-decoration-color: rgba(0, 0, 0, .2); text-underline-offset: 4px; overflow-wrap: anywhere; }
.sede-recapiti a:hover { color: var(--color-accent); text-decoration-color: currentColor; }
.sede-recapiti .mappa { margin-bottom: 0; }

/* TABELLA DI CONFRONTO a tre blocchi */
.confronto-sedi { padding-bottom: 110px; }
.tabella-scorri { max-width: 980px; margin: 0 auto; overflow-x: auto; }
.tabella-sedi { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.tabella-sedi th, .tabella-sedi td { padding: 14px 20px; text-align: left; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.tabella-sedi thead th {
  padding-top: 18px; padding-bottom: 18px;
  font-size: 13px; font-weight: 700; letter-spacing: .5px;
  color: var(--color-white);
  background: var(--color-dark);
}
.tabella-sedi thead th:first-child { border-radius: 10px 0 0 0; }
.tabella-sedi thead th:last-child  { border-radius: 0 10px 0 0; }
.tabella-sedi thead .icona { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }
.tabella-sedi td, .tabella-sedi thead th + th { width: 22%; text-align: center; }
.tabella-sedi tbody th { font-weight: 500; }
.tabella-sedi tbody th a { text-decoration: underline; text-decoration-color: rgba(0, 0, 0, .2); text-underline-offset: 4px; }
.tabella-sedi tbody th a:hover { color: var(--color-accent); text-decoration-color: currentColor; }
.tabella-sedi-gruppo th {
  padding-top: 18px;
  font-size: 13px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--color-accent);
}
.tabella-sedi-gruppo .icona { width: 20px; height: 20px; margin-right: 10px; vertical-align: -4px; }
.tabella-sedi--inverno { background: #eef5fc; }
.tabella-sedi--estate  { background: #eef7f0; }
.tabella-sedi--estate .tabella-sedi-gruppo th { color: #2e7a4b; }
.tabella-sedi--negozio { background: #f2f2f2; }
.tabella-sedi--negozio .tabella-sedi-gruppo th { color: var(--color-charcoal); }
.tabella-sedi tbody:last-child tr:last-child > * { border-bottom: 0; }
.confronto-si .icona { width: 24px; height: 24px; color: #2e8b57; vertical-align: middle; }
.confronto-no { font-weight: 700; color: var(--color-grey-light); }

/* RESPONSIVE CONTATTI E SEDI */
@media (max-width: 1024px) {
  .contatti-sedi, .sedi-schede-grid { grid-template-columns: 1fr; }
  .banner-orari { align-items: stretch; }
}

@media (max-width: 768px) {
  .contatti-sedi, .sedi-schede, .confronto-sedi { padding-bottom: 70px; }
  .contatto-sede-corpo, .sede-scheda-corpo { padding: 30px 22px 34px; }
  .sede-recapiti { padding: 24px 22px; }
  .servizi-icone { grid-template-columns: 1fr; }
  .banner-pulsanti { flex-direction: column; width: 100%; }
  .banner-pulsanti a { justify-content: space-between; }
  .banner-icona-testo { flex-direction: column; }
  .tabella-sedi { font-size: 14px; }
  .tabella-sedi th, .tabella-sedi td { padding: 12px 10px; }
  .tabella-sedi td, .tabella-sedi thead th + th { width: 26%; }
  .tabella-sedi thead th { font-size: 12px; letter-spacing: 0; }
  .tabella-sedi thead .icona { display: none; }
}

@media (max-width: 420px) {
  .contatto-azioni { grid-template-columns: 1fr; }
}


/* =====================================================
   16. PAGINE HUB ESTATE E NEGOZIO
===================================================== */

/* Titoletto nella colonna di testo dell'intro */
.hub-intro-lead { font-size: clamp(22px, 2.2vw, 27px); letter-spacing: -.5px; line-height: 1.25; margin-bottom: 14px; color: var(--color-text); }

/* Cinque card: 3 + 2, la seconda riga centrata */
.servizi-grid--cinque { grid-template-columns: repeat(6, 1fr); }
.servizi-grid--cinque > * { grid-column: span 2; }
.servizi-grid--cinque > :nth-child(4) { grid-column: 2 / span 2; }

/* Parole chiave sotto il testo della card */
.card-tag { margin: -4px 0 24px; font-size: 13px; font-weight: 600; letter-spacing: .2px; line-height: 1.5; color: var(--color-accent); }
body:not(.is-admin) .card-tag:empty { display: none; }

/* Banner con il recapito della sede */
.banner-indirizzo { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-weight: 700; color: var(--color-text); }
.banner-indirizzo .icona { flex: 0 0 22px; height: 22px; color: var(--color-red); }

@media (max-width: 1024px) {
  .servizi-grid--cinque { grid-template-columns: repeat(2, 1fr); }
  .servizi-grid--cinque > *, .servizi-grid--cinque > :nth-child(4) { grid-column: auto; }
}
@media (max-width: 640px) {
  .servizi-grid--cinque { grid-template-columns: 1fr; }
}


/* =====================================================
   17. LABORATORIO E RACE CENTER
===================================================== */

/* CHECKLIST DEI SEGNALI: titolo e invito a sinistra, caselle spuntate a destra */
.checklist {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 40px 80px;
  align-items: start;
  padding-bottom: 110px;
}
.checklist-testa { position: sticky; top: calc(var(--header-h) + 30px); }
.checklist-testa h2 { font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -1.5px; line-height: 1.1; margin-bottom: 18px; }
.checklist-testa > div:first-child p { line-height: 1.8; color: var(--color-grey-dark); }
.checklist-cta {
  margin-top: 34px;
  padding: 30px 32px;
  border-radius: 10px;
  color: var(--color-white);
  background: var(--color-accent);
}
.checklist-cta-titolo { font-size: 21px; font-weight: 800; letter-spacing: -.4px; margin-bottom: 8px; }
.checklist-cta p:not(.checklist-cta-titolo) { line-height: 1.65; color: rgba(255, 255, 255, .85); margin-bottom: 24px; }
.checklist-voci { list-style: none; display: grid; gap: 14px; }
.checklist-voci li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 20px;
  padding: 24px 26px;
  border: 1px dashed #c4d0de;
  border-radius: 10px;
  background: var(--color-white);
}
.checklist-casella {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--color-accent);
  border-radius: 7px;
  color: var(--color-red);
}
.checklist-casella .icona { width: 30px; height: 30px; }
.checklist-casella .icona circle { display: none; }   /* solo il segno di spunta, senza cerchio */
.checklist-voci h3 { font-size: 18px; letter-spacing: -.2px; line-height: 1.35; margin-bottom: 6px; }
.checklist-voci p { line-height: 1.65; color: var(--color-grey-dark); }

/* LAVORAZIONI: le tre principali in evidenza, le altre su quattro colonne */
.lavorazioni { padding-bottom: 110px; }
.lavorazioni-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.lavorazione { grid-column: span 3; padding: 30px 26px; border-radius: 10px; background: var(--color-beige); }
.lavorazione--principale { grid-column: span 4; padding: 38px 34px; color: var(--color-white); background: var(--color-accent); }
.lavorazione .vantaggio-icona { margin-bottom: 20px; }
.lavorazione--principale .vantaggio-icona { background: rgba(255, 255, 255, .12); color: var(--color-white); }
.lavorazione h3 { font-size: 18px; letter-spacing: -.3px; line-height: 1.3; margin-bottom: 10px; }
.lavorazione--principale h3 { font-size: 22px; color: var(--color-white); }
.lavorazione p { font-size: 14px; line-height: 1.7; color: var(--color-grey-dark); }
.lavorazione--principale p { font-size: 15px; color: rgba(255, 255, 255, .82); }
/* righe: 3 principali, poi 4, poi le ultime 3 a tutta larghezza */
.lavorazione:nth-child(n+8) { grid-column: span 4; }

/* TECNOLOGIA: tre colonne con la sede in alto */
.tecnologia { padding-bottom: 110px; }
.tecnologia-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.tecnologia-voce { padding: 36px 32px; border-radius: 10px; border: 1px solid var(--color-panel); }
.tecnologia-voce:last-child { background: var(--color-beige); border-color: var(--color-beige); }
.tecnologia-sede {
  display: inline-block;
  margin-bottom: 22px;
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 13px; font-weight: 700;
  background: var(--color-panel); color: var(--color-accent);
}
.tecnologia-voce:last-child .tecnologia-sede { background: var(--color-white); }
.tecnologia-voce .vantaggio-icona { background: var(--color-beige); margin-bottom: 18px; }
.tecnologia-voce h3 { font-size: 20px; letter-spacing: -.4px; line-height: 1.3; margin-bottom: 10px; color: var(--color-accent); }
.tecnologia-voce p { line-height: 1.7; color: var(--color-grey-dark); }

/* BANNER IN EVIDENZA (preparazione rapida) */
.banner-evidenza { background: #fdf3e6; border: 1px solid #f3dcbd; }
.banner-evidenza .banner-icona { color: var(--color-red); }

/* CHIUSURA CENTRATA con testo */
.aspettiamo > p { max-width: 640px; margin: -12px auto 28px; line-height: 1.8; color: var(--color-grey-dark); }

/* EQUIPAGGIAMENTO RACE: quattro pannelli */
.equipaggiamento { padding-bottom: 110px; }
.equip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.equip-voce { padding: 40px 38px; border-radius: 10px; background: var(--color-beige); }
.equip-voce .vantaggio-icona { margin-bottom: 20px; }
.equip-voce h3 { font-size: 24px; letter-spacing: -.6px; line-height: 1.2; margin-bottom: 10px; color: var(--color-accent); }
.equip-voce > p { line-height: 1.7; color: var(--color-grey-dark); margin-bottom: 18px; }
.equip-voce .lista-check { margin-bottom: 18px; }
.equip-nota { font-size: 14px; line-height: 1.65; color: var(--color-grey-dark); padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, .08); }

/* Riga con i marchi */
.marchi-riga { margin-top: 18px; font-weight: 700; color: var(--color-text); }

/* RESPONSIVE */
@media (max-width: 1024px) {
  .checklist { grid-template-columns: 1fr; }
  /* su schermi stretti l'invito a contattare il laboratorio va dopo l'elenco dei segnali */
  .checklist-testa { display: contents; }
  .checklist-voci { order: 1; }
  .checklist-cta { order: 2; margin-top: 0; }
  .lavorazioni-grid { grid-template-columns: repeat(2, 1fr); }
  .lavorazione, .lavorazione--principale, .lavorazione:nth-child(n+8) { grid-column: auto; }
  .lavorazione--principale:first-child { grid-column: 1 / -1; }
  .tecnologia-grid { grid-template-columns: 1fr; }
  .equip-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .checklist, .lavorazioni, .tecnologia, .equipaggiamento { padding-bottom: 70px; }
  .checklist-voci li { padding: 20px 18px; gap: 16px; }
  .checklist-cta { padding: 26px 22px; }
  .checklist-cta .cta-primary { width: 100%; justify-content: space-between; }
  .equip-voce { padding: 30px 22px; }
}

@media (max-width: 560px) {
  .lavorazioni-grid { grid-template-columns: 1fr; }
  .lavorazione--principale:first-child { grid-column: auto; }
}


/* =====================================================
   18. NOLEGGIO STAGIONALE E VENDITA SCI
===================================================== */

/* GRIGLIA DI ICONE con titolo breve */
.icone-sezione { padding-bottom: 110px; }
.icone-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1040px; margin: 0 auto; }
.icone-grid li {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 22px;
  border-radius: 10px;
  background: var(--color-beige);
  font-weight: 700; line-height: 1.35;
  color: var(--color-text);
}
.icone-grid .vantaggio-icona { flex: 0 0 52px; margin-bottom: 0; }
.icone-nota { max-width: 700px; margin: 34px auto 0; text-align: center; line-height: 1.7; color: var(--color-grey-dark); }

/* Banner senza pulsante: il testo usa tutta la larghezza */
.banner-solo p { max-width: 90ch; }

/* SERVIZI ESCLUSIVI: due box protagonisti */
.esclusivi { padding-bottom: 110px; }
.esclusivi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.esclusivo {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 48px 44px;
  border-radius: 10px;
  overflow: hidden;
  color: var(--color-white);
  background: linear-gradient(318deg, rgba(35, 59, 107, 1) 0%, rgba(35, 36, 37, 1) 100%);
}
.esclusivo--rosso { background: linear-gradient(318deg, #7d0f17 0%, #2a1416 100%); }
.esclusivo-etichetta {
  margin-bottom: 26px;
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  background: rgba(255, 255, 255, .14);
}
.esclusivo-icona {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
  border-radius: 50%;
  background: var(--color-white); color: var(--color-accent);
}
.esclusivo--rosso .esclusivo-icona { color: var(--color-red); }
.esclusivo-icona .icona { width: 30px; height: 30px; }
.esclusivo h3 { font-size: clamp(26px, 2.8vw, 34px); letter-spacing: -1px; line-height: 1.1; margin-bottom: 14px; color: var(--color-white); }
.esclusivo p { line-height: 1.75; color: rgba(255, 255, 255, .85); margin-bottom: 30px; }
.esclusivo .cta-secondary { margin-top: auto; background: var(--color-white); color: var(--color-text); }
.esclusivo .cta-secondary:hover { background: var(--color-beige); color: var(--color-text); }

/* DETTAGLIO DI UN SERVIZIO ESCLUSIVO (Memory Fit, Prova all'Acquisto) */
.esclusivo-dettaglio { padding-bottom: 110px; scroll-margin-top: calc(var(--header-h) + 20px); }
.esclusivo-pannello {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 70px;
  padding: 60px;
  border-radius: 10px;
  background: var(--color-beige);
  border-left: 6px solid var(--color-accent);
}
.esclusivo-pannello--rosso { border-left-color: var(--color-red); }
.esclusivo-pannello .esclusivo-etichetta { display: inline-block; color: var(--color-accent); background: var(--color-white); }
.esclusivo-pannello--rosso .esclusivo-etichetta { color: var(--color-red); }
.esclusivo-pannello h2 { font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -1.5px; line-height: 1.1; margin-bottom: 18px; }
.esclusivo-pannello .page-sezione-testo { line-height: 1.8; color: var(--color-grey-dark); }
.esclusivo-pannello h3 { font-size: 20px; letter-spacing: -.3px; margin-bottom: 16px; color: var(--color-text); }
.esclusivo-pannello .lista-check { margin-bottom: 30px; }
.esclusivo-pannello-nota { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(0, 0, 0, .08); }
.esclusivo-pannello-nota h3 { margin-bottom: 8px; }
.esclusivo-pannello-nota p { line-height: 1.75; color: var(--color-grey-dark); }

/* Passi brevi numerati (Prova all'Acquisto) */
.passi-brevi { list-style: none; display: grid; gap: 12px; margin-bottom: 8px; counter-reset: passo; }
.passi-brevi li {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px;
  border-radius: 8px;
  background: var(--color-white);
  font-weight: 600; line-height: 1.4;
}
.passi-brevi li::before {
  counter-increment: passo;
  content: counter(passo);
  flex: 0 0 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-weight: 800;
  color: var(--color-white); background: var(--color-red);
}

@media (max-width: 1024px) {
  .icone-grid { grid-template-columns: repeat(2, 1fr); }
  .esclusivi-grid, .esclusivo-pannello { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .icone-sezione, .esclusivi, .esclusivo-dettaglio { padding-bottom: 70px; }
  .esclusivo { padding: 36px 24px; }
  .esclusivo .cta-secondary { width: 100%; justify-content: space-between; }
  .esclusivo-pannello { padding: 36px 22px; border-left-width: 0; border-top: 6px solid var(--color-accent); }
  .esclusivo-pannello--rosso { border-top-color: var(--color-red); }
}

@media (max-width: 560px) {
  .icone-grid { grid-template-columns: 1fr; }
}

/* Reparti del negozio: testo finale dopo elenco e marchi */
.page-sezione-testo--dopo { margin-top: 20px; }
/* Frase sui marchi: in evidenza ma leggera, con filetto laterale */
.marchi-nota {
  max-width: 60ch;
  margin-top: 22px;
  padding: 4px 0 4px 16px;
  border-left: 3px solid var(--color-red);
  font-size: 15px; font-weight: 500; line-height: 1.65;
  color: var(--color-text);
}


/* =====================================================
   19. PAGINE ESTATE (Tennis e Padel, Noleggio MTB)
===================================================== */

/* Griglia di icone su quattro colonne (elenco breve) */
.icone-grid--quattro { grid-template-columns: repeat(4, 1fr); max-width: none; }

/* Percorso consigliato dentro una page-sezione */
.percorso-consigliato {
  margin-top: 34px;
  padding: 26px 28px;
  border-radius: 10px;
  background: var(--color-beige);
  border-left: 4px solid #2e8b57;
}
.percorso-consigliato h3 { font-size: 20px; letter-spacing: -.3px; margin-bottom: 8px; color: var(--color-text); }
.percorso-consigliato p { line-height: 1.7; color: var(--color-grey-dark); margin-bottom: 18px; }
.percorso-consigliato p:last-child { margin-bottom: 0; }

/* Convenzioni: box sobrio con bordo, non promozionale */
.banner-partner { background: var(--color-white); border: 1px solid var(--color-panel); }
.banner-partner .banner-icona { background: var(--color-beige); }

/* Avviso in admin per un pulsante esterno senza indirizzo */
.link-mancante {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border: 1px dashed var(--color-red);
  border-radius: 8px;
  font-size: 13px; line-height: 1.45;
  color: var(--color-red);
  background: #fff7f7;
}
.link-mancante .icona { flex: 0 0 18px; height: 18px; }

@media (max-width: 1024px) {
  .icone-grid--quattro { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .icone-grid--quattro { grid-template-columns: 1fr; }
}


/* =====================================================
   20. OFFICINA, PASSEGGINI, CHI SIAMO
===================================================== */

/* Riquadro con elenco sotto una coppia di box */
.lista-riquadro {
  margin-top: 30px;
  padding: 34px 40px;
  border-radius: 10px;
  border: 1px solid var(--color-panel);
}
.lista-riquadro h3 { font-size: 22px; letter-spacing: -.4px; margin-bottom: 18px; color: var(--color-accent); }
.doppio-box-voce .lista-check { margin-bottom: 8px; }
.doppio-box-voce .page-sezione-testo { max-width: none; }

@media (max-width: 768px) {
  .lista-riquadro { padding: 28px 22px; }
}
/* Frase di passaggio tra due sezioni: separata da un filetto */
.fianco--stacco { padding-bottom: 60px; }
.fianco--stacco .sezione-header { margin-bottom: 0; padding-bottom: 60px; border-bottom: 1px solid var(--color-grey-lighter); }
/* Titoletto di un elenco dentro i box affiancati */   
.doppio-box-voce > p:has(+ .lista-titolo) { margin-bottom: 18px; }
.doppio-box-voce > .lista-titolo { margin: 0 0 12px; }

/* BOX COMPATTI DI APPROFONDIMENTO (tre affiancati, titolo + 1-2 frasi + pulsante) */
.mini-cta-sezione { padding-bottom: 110px; }  
.mini-cta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 380px)); justify-content: center; gap: 24px; }
.mini-cta {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 32px 30px;
  border-radius: 10px;
  color: var(--color-white);
  background: linear-gradient(318deg, rgba(35, 59, 107, 1) 0%, rgba(35, 36, 37, 1) 100%);
}
.mini-cta-icona {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
}
.mini-cta-icona .icona { width: 24px; height: 24px; }
.mini-cta h3 { font-size: 20px; letter-spacing: -.3px; line-height: 1.3; margin-bottom: 8px; color: var(--color-white); }
.mini-cta p { line-height: 1.6; color: rgba(255, 255, 255, .8); margin-bottom: 24px; }
.mini-cta .cta-primary, .mini-cta .link-mancante { margin-top: auto; }
@media (max-width: 768px) {
  .mini-cta-sezione { padding-bottom: 70px; }
  .mini-cta .cta-primary { width: 100%; justify-content: space-between; }
}

/* CHI SIAMO ---------------------------------------- */

/* Occhiello sopra l'H1 */
.occhiello {
  margin-bottom: 14px;
  font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--color-red);
}

/* TIMELINE DELLA STORIA: linea centrale, tappe alternate */
.storia { padding-bottom: 80px; }
.storia-lista { position: relative; list-style: none; max-width: 1080px; margin: 0 auto; }
.storia-lista::before {
  content: "";
  position: absolute; top: 8px; bottom: 40px; left: 50%;
  width: 2px; margin-left: -1px;
  background: var(--color-panel);
}
.tappa { position: relative; width: 50%; padding: 0 64px 72px 0; text-align: right; }
.tappa:nth-child(even) { margin-left: 50%; padding: 0 0 72px 64px; text-align: left; }
.tappa-punto {
  position: absolute; top: 10px; right: -9px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-white);
  border: 4px solid var(--color-accent);
}
.tappa:nth-child(even) .tappa-punto { right: auto; left: -9px; }
.tappa-anno {
  font-size: clamp(38px, 4.4vw, 56px); font-weight: 800; letter-spacing: -2px; line-height: 1;
  color: var(--color-accent);
  margin-bottom: 10px;
}
.tappa h3 { font-size: clamp(19px, 1.8vw, 22px); letter-spacing: -.3px; line-height: 1.3; margin-bottom: 10px; color: var(--color-text); }
.tappa-testo { line-height: 1.8; color: var(--color-grey-dark); }
.tappa-foto { margin-top: 24px; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; }
.tappa-foto img { width: 100%; height: 100%; object-fit: cover; }
.tappa-foto--vuota { aspect-ratio: 16 / 6; opacity: .7; }
.tappa--ultima { padding-bottom: 0; }
.tappa--ultima .tappa-punto { background: var(--color-red); border-color: var(--color-red); }
.tappa--ultima h3 { font-style: italic; color: var(--color-grey-dark); }

/* FRASE GRANDE: elemento grafico, tanto respiro */
.frase { padding: 70px 0 130px; }
.frase-grande {
  max-width: 17ch;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(38px, 6.4vw, 84px); font-weight: 800; letter-spacing: -.04em; line-height: 1.04;
  color: var(--color-accent);
  text-wrap: balance;
}

/* LE PERSONE */
.persone { padding-bottom: 110px; }
.persone-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.persona { padding: 32px 26px; border-radius: 10px; background: var(--color-beige); text-align: center; }
.persona-foto, .persona-iniziali {
  width: 112px; height: 112px;
  margin: 0 auto 20px;
  border-radius: 50%;
  overflow: hidden;
}
.persona-foto img { width: 100%; height: 100%; object-fit: cover; }
.persona-foto--vuota { opacity: .7; }
.persona-iniziali {
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; font-weight: 800; letter-spacing: -1px;
  color: var(--color-white); background: var(--color-accent);
}
.persona h3 { font-size: 21px; letter-spacing: -.4px; margin-bottom: 8px; color: var(--color-text); }
.persona p { font-size: 15px; line-height: 1.7; color: var(--color-grey-dark); }

/* TESTO CENTRATO (paragrafo lungo senza immagine) */
.testo-centrato { padding-bottom: 40px; }
.testo-centrato > div { max-width: 760px; margin: 0 auto; text-align: center; }
.testo-centrato h2 { font-size: clamp(32px, 4vw, 48px); letter-spacing: -2px; line-height: 1.1; margin-bottom: 22px; }
.testo-centrato h2 + div { font-size: 17px; line-height: 1.85; color: var(--color-grey-dark); }

@media (max-width: 1024px) {
  .persone-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .storia-lista::before { left: 8px; }
  .tappa, .tappa:nth-child(even) { width: auto; margin-left: 0; padding: 0 0 52px 42px; text-align: left; }
  .tappa-punto, .tappa:nth-child(even) .tappa-punto { left: 0; right: auto; }
  .frase { padding: 40px 0 90px; }
  .persone { padding-bottom: 70px; }
}

@media (max-width: 560px) {
  .persone-grid { grid-template-columns: 1fr; }
}


/* =====================================================
   21. NOLEGGIO E-BIKE
===================================================== */

/* CONFRONTO DEI MODELLI: tre schede con la stessa struttura */
.modelli { padding-bottom: 110px; }
.modelli-intro { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.modelli-intro h3 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.6px; margin-bottom: 10px; color: var(--color-text); }
.modelli-intro p { line-height: 1.75; color: var(--color-grey-dark); }
.modelli-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.modello {
  display: flex; flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-white);
  box-shadow: 0 5px 30px rgba(0, 0, 0, .07);
  border-top: 5px solid var(--color-accent);
}
.modello:nth-child(2) { border-top-color: var(--color-red); }
.modello:nth-child(3) { border-top-color: #2e8b57; }
.modello-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-beige); }
.modello-img img { width: 100%; height: 100%; object-fit: cover; }
.modello-corpo { padding: 28px 28px 32px; }
.modello h3 { font-size: 24px; letter-spacing: -.6px; line-height: 1.2; margin-bottom: 14px; color: var(--color-accent); }
.modello-ideale {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--color-beige);
  font-size: 14px; font-weight: 700; line-height: 1.45;
  color: var(--color-text);
}
.modello-ideale .icona { flex: 0 0 20px; height: 20px; color: #2e8b57; }
.modello-testo { font-size: 15px; line-height: 1.75; color: var(--color-grey-dark); }
.modelli-aiuto { margin-top: 30px; }
.modelli-aiuto h3 { font-size: 22px; letter-spacing: -.4px; margin-bottom: 8px; color: var(--color-accent); }

/* GUIDA AI PERCORSI nel CTA box */
.cta-box-testo { max-width: 52ch; line-height: 1.75; color: rgba(255, 255, 255, .8); }
.cta-box-main .cta-box-nota + .cta-grande { margin-top: 22px; }
.guida-alternativa + .guida-alternativa { margin-top: 26px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .15); }
.guida-alternativa p { margin: 0 0 16px !important; }
.cta-chiaro { background: var(--color-white); color: var(--color-text); }
.cta-chiaro:hover { background: var(--color-beige); color: var(--color-text); }

/* Etichetta sotto il titolo di una card (incluso / su richiesta) */
.vantaggio-etichetta {
  display: inline-block;
  margin: -4px 0 10px !important;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px !important; font-weight: 700;
  color: var(--color-accent) !important;
  background: var(--color-white);
}

@media (max-width: 1024px) {
  .modelli-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 768px) {
  .modelli { padding-bottom: 70px; }
  .cta-chiaro { width: 100%; justify-content: space-between; }
}


/* =====================================================
   22. PAGINE LEGALI (Privacy Policy, Cookie Policy)
===================================================== */
.legale-intro { padding-top: 40px; padding-bottom: 50px; }
.legale-intro h1 {
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 900; letter-spacing: -1px; line-height: 1.05;
  max-width: 900px;
}
.legale-data { margin-top: 16px; font-size: 14px; color: var(--color-grey); }

.legale { padding-bottom: 110px; }
.legale--indice {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 70px;
  align-items: start;
}
.legale-indice {
  position: sticky; top: calc(var(--header-h) + 30px);
  padding: 24px 24px 26px;
  border-radius: 10px;
  background: var(--color-beige);
}
.legale-indice-titolo {
  margin-bottom: 14px;
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--color-grey);
}
.legale-indice ol { list-style: none; counter-reset: indice; display: grid; gap: 10px; }
.legale-indice li { counter-increment: indice; display: flex; gap: 10px; font-size: 14px; line-height: 1.45; }
.legale-indice li::before { content: counter(indice) "."; flex: 0 0 auto; color: var(--color-grey-light); font-variant-numeric: tabular-nums; }
.legale-indice a { color: var(--color-grey-dark); transition: color .2s; }
.legale-indice a:hover { color: var(--color-accent); }

.legale-testo { max-width: 760px; font-size: 16px; line-height: 1.8; color: var(--color-grey-dark); }
.legale-testo h2 {
  margin: 56px 0 16px;
  font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -.5px; line-height: 1.2;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.legale-testo h3 { margin: 32px 0 10px; font-size: 19px; line-height: 1.35; color: var(--color-text); }
.legale-testo > :first-child { margin-top: 0; }
.legale-testo p { margin-bottom: 16px; }
.legale-testo ul, .legale-testo ol { margin: 0 0 18px; padding-left: 1.4em; }
.legale-testo li { margin-bottom: 6px; padding-left: 4px; }
.legale-testo li::marker { color: var(--color-accent); }
.legale-testo strong { color: var(--color-text); }
.legale-testo a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.legale-testo a:hover { color: var(--color-red); }

@media (max-width: 1024px) {
  .legale--indice { grid-template-columns: 1fr; gap: 36px; }
  .legale-indice { position: static; }
}
@media (max-width: 768px) {
  .legale-intro { padding-top: 28px; padding-bottom: 34px; }
  .legale { padding-bottom: 80px; }
  .legale-testo { font-size: 15px; }
  .legale-testo h2 { margin-top: 44px; }
}

/* Admin: barra di formattazione del campo documento e Salva sempre a portata */
.cms-doc-barra {
  position: sticky; top: calc(var(--admin-bar-h, 48px) + var(--header-h) + 8px); z-index: 50;
  display: flex; flex-wrap: wrap; gap: 6px;
  max-width: 760px;
  margin-bottom: 26px; padding: 8px;
  border-radius: 8px;
  background: var(--admin-bg, #1a1a2e);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.cms-doc-btn {
  padding: 7px 12px;
  border: 0; border-radius: 5px;
  background: #2c2c4a; color: #fff;
  font: 600 13px/1 "Inter", sans-serif;
  cursor: pointer;
}
.cms-doc-btn:hover { background: #3a3a5e; }
.is-admin .legale-testo[data-campo] { min-height: 300px; outline-offset: 14px; }
.legale-corpo.cms-dirty > .cms-bar {
  position: sticky; bottom: 20px; right: auto;
  width: max-content; margin: 30px 0 0 auto;
}

/* Testo fisso delle pagine legali: sottotitolo e tabelle */
.legale-intro .occhiello { margin-bottom: 12px; }
.legale-lead { margin-top: 18px; max-width: 680px; font-size: 1.1em; line-height: 1.6; color: var(--color-grey-dark); }
.legale-testo .legale-data { margin-top: 48px; }
.legale-tabella { margin: 0 0 22px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.legale-tabella table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14px; line-height: 1.55; }
.legale-tabella th, .legale-tabella td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-grey-lighter); }
.legale-tabella th { background: var(--color-beige); color: var(--color-text); font-weight: 700; }
@media (max-width: 700px) {
  /* Su smartphone ogni riga diventa una scheda, con l'intestazione davanti a ogni valore */
  .legale-tabella table { min-width: 0; }
  .legale-tabella tr:first-child { display: none; }
  .legale-tabella tr { display: block; margin-bottom: 14px; border: 1px solid var(--color-grey-lighter); border-radius: 8px; overflow: hidden; }
  .legale-tabella td { display: block; padding: 10px 14px; }
  .legale-tabella td:first-child { background: var(--color-beige); font-weight: 700; color: var(--color-text); }
  .legale-tabella td:last-child { border-bottom: 0; }
  .legale-tabella td[data-label]:not(:first-child)::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--color-grey);
  }
}
.legale-testo code { padding: 1px 6px; border-radius: 4px; background: var(--color-beige); font-size: .9em; }

/* =====================================================
   23. AVVISO PRIVACY (in fondo alla pagina, finche non viene chiuso)
===================================================== */
.cookie-banner {
  position: fixed; left: 20px; bottom: 20px; z-index: 3000;
  display: flex; align-items: center; gap: 20px;
  max-width: 560px;
  padding: 18px 20px;
  border-radius: 10px;
  background: var(--color-dark); color: rgba(255, 255, 255, .85);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .25);
  font-size: 13.5px; line-height: 1.55;
  opacity: 0; transform: translateY(16px);
  transition: opacity .3s ease, transform .3s ease;
}
.cookie-banner.show { opacity: 1; transform: none; }
.cookie-banner[hidden] { display: none; }
.cookie-banner a { color: var(--color-white); text-decoration: underline; text-underline-offset: 3px; }
.cookie-banner-ok {
  flex: 0 0 auto;
  padding: 10px 18px;
  border: 0; border-radius: 30px;
  background: var(--color-white); color: var(--color-text);
  font-weight: 700; font-size: 13px; cursor: pointer;
  transition: background .2s;
}
.cookie-banner-ok:hover { background: var(--color-beige); }
@media (max-width: 600px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
}