/* ── Futura PT (ParaType) ── */
@font-face {
  font-family: 'Futura PT';
  src: url('/assets/fonts/futura-pt-book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Futura PT';
  src: url('/assets/fonts/futura-pt-book-oblique.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Futura PT';
  src: url('/assets/fonts/futura-pt-heavy.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Futura PT';
  src: url('/assets/fonts/futura-pt-heavy.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Futura PT';
  src: url('/assets/fonts/futura-pt-heavy.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Futura PT';
  src: url('/assets/fonts/futura-pt-heavy-oblique.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Futura PT';
  src: url('/assets/fonts/futura-pt-heavy-oblique.otf') format('opentype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Futura PT';
  src: url('/assets/fonts/futura-pt-heavy-oblique.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  /* Niente “strappo” bianco quando si scrolla oltre i bordi (rubber band / overscroll) */
  overscroll-behavior: none;
  overscroll-behavior-y: none;
  background-color: var(--teal-dark);
}
body {
  font-family: var(--font-futura);
  color: var(--text-body, #1a1a1a);
  font-synthesis: none;
  overflow-x: hidden;
  overscroll-behavior: none;
  overscroll-behavior-y: none;
  /* Stesso tono dell’header: dietro alle sezioni, in overscroll non compare il bianco */
  background-color: var(--teal-dark);
  min-height: 100%;
}
a { text-decoration: none; }
button, input, textarea, select {
  font-family: inherit;
  font-synthesis: none;
}

/* ── CSS Variables ── */
:root {
  --font-futura: 'Futura PT', 'Helvetica Neue', Arial, sans-serif;
  --font-primary: var(--font-futura);
  --teal:        #007b8a;
  --teal-dark:   #005f6b;
  --teal-medium: #00838f;
  --navy:        #1b3a72;
  --white:       #ffffff;
  --gray-border: #dde4e9;
  --text-muted:  #555;
  --text-body:   #1a1a1a;
  --text-on-dark:#ffffff;
  --access-accent: #7ee0ea;
}

/* ══════════════════════════════════════
   HEADER
══════════════════════════════════════ */
.header {
  background: transparent;
  padding: 14px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.headerLogo {
  display: flex;
  align-items: center;
  gap: 7px;
}
.headerLogo img {
  width: 200px;
  height: auto;
  max-height: 66px;
}
.langSwitcher {
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}
.langSep {
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.langLink {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 1;
  transition: color 0.15s ease;
}
.langLink:hover {
  color: rgba(255, 255, 255, 0.9);
}
.langLink.isActive {
  color: #fff;
}

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
.hero {
  position: relative;
  min-height: min(78vh, 720px);
  display: flex;
  align-items: center;
  padding: 72px 80px;
  overflow: hidden;
  background-color: var(--teal-dark);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.heroOverlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 55, 65, 0.78) 0%, rgba(0, 90, 100, 0.52) 100%);
  pointer-events: none;
}
.heroContent {
  position: relative;
  z-index: 2;
  max-width: 640px;
}
.heroTitle {
  font-size: clamp(28px, 4.2vw, 58px);
  font-weight: 900;
  font-style: italic;
  color: var(--white);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  margin-bottom: 18px;
}
.heroDesc {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.92);
  max-width: 520px;
  margin-bottom: 28px;
}
.heroCtaBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-decoration: none;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.heroCtaBtn:hover {
  background: var(--white);
  color: var(--teal-dark);
  border-color: var(--white);
}

/* ══════════════════════════════════════
   INTRO + PILLARS
══════════════════════════════════════ */
.introSection {
  background: var(--white);
  padding: 72px 80px;
  text-align: center;
}
.introInner {
  max-width: 1100px;
  margin: 0 auto;
}
.introTitle {
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 16px;
}
.introTitleAccent { color: var(--teal); }
.introDesc {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.75;
  max-width: 720px;
  margin: 0 auto 48px;
}
.introDesc a.introNetworkLink,
.introDesc a.introNetworkLink:link,
.introDesc a.introNetworkLink:visited,
.introDesc a.introNetworkLink:active {
  color: var(--navy);
  font-weight: 700;
  font-synthesis: weight;
  text-decoration: none;
  border-bottom: 2px solid var(--navy);
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.introDesc a.introNetworkLink strong {
  font-weight: 700;
  color: inherit;
}
.introDesc a.introNetworkLink:hover,
.introDesc a.introNetworkLink:focus-visible {
  color: var(--teal);
  border-bottom-color: var(--teal);
}
.pillarGrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px 28px;
  text-align: left;
}
.pillarItem {
  border-top: 2px solid var(--teal);
  padding-top: 16px;
}
.pillarTitle {
  font-size: 16px;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 8px;
}
.pillarDesc {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
}

/* ══════════════════════════════════════
   ACCESS (come accedere + piscine + test)
══════════════════════════════════════ */
.accessSection {
  position: relative;
  background-color: var(--teal-dark);
  background-image: url('/assets/images/background.jpeg');
  background-size: cover;
  background-position: center;
  color: var(--white);
  overflow: hidden;
}
.accessSection::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 70, 82, 0.88) 0%, rgba(0, 55, 65, 0.92) 100%);
  pointer-events: none;
}
.accessInner {
  position: relative;
  z-index: 1;
  padding: 72px 80px 80px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.accessTitle {
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 14px;
}
.accessTitleAccent { color: var(--access-accent); }
.accessDesc {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  max-width: 680px;
  margin: 0 auto 42px;
}
.accessSteps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 52px;
  text-align: center;
}
.accessStep {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.accessStepIcon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 12px;
}
.accessStepIcon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.accessStepTitle {
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 8px;
}
.accessStepDesc {
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}
.accessDates {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.accessPiscine {
  text-align: center;
  margin: 0 auto 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.accessPiscine .piscineHeader {
  margin-bottom: 18px;
  justify-content: center;
}
.accessPiscine .piscineCards {
  justify-content: center;
}
.accessPiscineNote {
  margin-top: 0;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.8);
  max-width: 720px;
  text-align: center;
}

/* ══════════════════════════════════════
   PISCINE SECTION
══════════════════════════════════════ */
.piscineSection {
  position: relative;
  background: transparent;
  padding: 36px 80px 44px;
}
.piscineSection::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 80, 92, 0.35) 100%);
  pointer-events: none;
}
.piscineSection > * {
  position: relative;
  z-index: 1;
}
.piscineHeader {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}
.piscineCalendarImg {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-top: 0;
  filter: brightness(0) invert(1);
}
.piscineLabel {
  font-size: 16px;
  font-weight: 800;
  font-style: italic;
  color: var(--white);
  line-height: 1.35;
}
.piscineCards {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.piscineCard {
  background: var(--white);
  border-radius: 10px;
  padding: 14px 20px;
  min-width: 148px;
  text-decoration: none;
  transition: transform 0.18s, box-shadow 0.18s;
  cursor: pointer;
}
.piscineCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.piscineDate {
  font-size: 17px;
  font-weight: 800;
  color: var(--teal-medium);
  letter-spacing: 0.3px;
}
.piscineCity {
  font-size: 10.5px;
  font-weight: 700;
  color: #444;
  letter-spacing: 0.5px;
  margin-top: 4px;
  text-transform: uppercase;
}
.piscineInfo {
  margin-top: 28px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  padding: 14px 18px;
  max-width: 680px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.piscineInfoIllu {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.infoText {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.65;
}
.infoText + .infoText { margin-top: 6px; }

/* ══════════════════════════════════════
   CAMPUS SECTION (sfondo come 42spain.es — map_section_background)
══════════════════════════════════════ */
.campusSection {
  position: relative;
  background: var(--white);
  padding: 0;
  text-align: center;
  overflow: hidden;
}
.campusSection::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://partner-campuses.42.fr/strapi/uploads/map_section_background_1831b354ba.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.22;
  pointer-events: none;
}
.campusSectionInner {
  position: relative;
  z-index: 1;
  padding: 64px 80px 72px;
}
.campusTitle {
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 18px;
}
.campusTitleAccent { color: var(--teal); }
.campusDesc {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.75;
  max-width: 720px;
  margin: 0 auto 52px;
}
.mapWrap {
  display: block;
  width: 100%;
  max-width: min(100%, 520px);
  margin: 0 auto;
}
@media (min-width: 640px) {
  .mapWrap {
    width: 94%;
    max-width: 560px;
  }
}
@media (min-width: 768px) {
  .mapWrap {
    width: 85%;
    max-width: 600px;
  }
}
@media (min-width: 1024px) {
  .mapWrap {
    width: 80%;
    max-width: 680px;
  }
}
@media (min-width: 1280px) {
  .mapWrap {
    width: 75%;
    max-width: 760px;
  }
}
@media (min-width: 1536px) {
  .mapWrap {
    width: 60%;
    max-width: 920px;
  }
}
/* Admin: mappa a tutta larghezza del contenitore */
.mapWrap.mapWrapFull {
  display: block;
  max-width: none;
}
.italyMapFrame {
  width: 100%;
  line-height: 0; /* niente gap sotto l’SVG */
}
.italySvg {
  width: 100%;
  height: auto;
  display: block;
}

/* Pin mappa — stile 42 France (rsm-marker) */
.italySvg .map-pin-group {
  cursor: pointer;
  outline: none;
}
.italySvg .map-pin-ring {
  fill: #9accd8;
  fill-opacity: 0;
  stroke: #04809f;
  stroke-width: 0.5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, fill-opacity 0.5s ease;
}
.italySvg .map-pin-dot {
  fill: #04809f;
  stroke: none;
  transition: transform 0.2s ease, fill 0.2s ease;
  animation: map-pin-pulse 2.5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes map-pin-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.82;
  }
}
.italySvg .map-pin-label-wrap {
  pointer-events: auto;
}
.italySvg .map-pin-label-bg {
  fill: #ffffff;
  cursor: pointer;
  pointer-events: all;
  transition: fill 0.35s ease;
}
.italySvg .map-pin-text {
  fill: #000000;
  font-style: italic;
  pointer-events: none;
  transition: fill 0.35s ease;
}
.italySvg .map-pin-group:hover .map-pin-ring,
.italySvg .map-pin-group:focus-visible .map-pin-ring,
.italySvg .map-pin-group--active .map-pin-ring {
  opacity: 1;
  fill-opacity: 0.4;
}
.italySvg .map-pin-group:hover .map-pin-label-bg,
.italySvg .map-pin-group:focus-visible .map-pin-label-bg,
.italySvg .map-pin-group--active .map-pin-label-bg {
  fill: url(#italyMapPinHoverGrad);
}
.italySvg .map-pin-group:hover .map-pin-text,
.italySvg .map-pin-group:focus-visible .map-pin-text,
.italySvg .map-pin-group--active .map-pin-text {
  fill: #ffffff;
}
.italySvg .map-pin-group:hover .map-pin-dot,
.italySvg .map-pin-group:focus-visible .map-pin-dot,
.italySvg .map-pin-group--active .map-pin-dot {
  transform: scale(1.25);
}
.italySvg .map-pin-group--admin-selected .map-pin-dot {
  animation: none;
}

/* Modal campus — bottoni con hover come le card pin sulla mappa */
.campusModalBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 4rem;
  border-radius: 0.75rem;
  border: 2px solid #d9d9d9;
  background: #fff;
  color: #000;
  font-family: var(--font-primary), sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition:
    background 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease,
    font-style 0.15s ease;
}
.campusModalBtn:hover,
.campusModalBtn:focus-visible {
  border-color: transparent;
  background: linear-gradient(90deg, #04809f 0%, #00babc 100%);
  color: #fff;
  font-style: italic;
  outline: none;
}

/* Modal campus — strip prossime piscine */
.campusModalPiscine {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 74px;
  padding: 12px 16px;
  border-radius: 1rem;
  background: #fbf9f9;
}
.campusModalPiscine--stacked {
  align-items: center;
  gap: 12px;
}
.campusModalPiscineHead {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.campusModalPiscineIcon {
  flex-shrink: 0;
  width: 36px;
  height: auto;
  display: block;
}
.campusModalPiscineLabel {
  flex-shrink: 0;
  margin: 0 0 0 14px;
  font-family: var(--font-primary), sans-serif;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.28;
  color: #04809f;
}
.campusModalPiscineDates--row {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 4px;
}
.campusModalPiscineDates--stacked {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.campusModalPiscineRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  gap: 8px;
}
.campusModalPiscineRow--2 .campusModalPiscineDate {
  flex: 1;
  max-width: 48%;
  text-align: center;
}
.campusModalPiscineRow--3 .campusModalPiscineDate {
  flex: 1;
  max-width: 32%;
  text-align: center;
}
.campusModalPiscineRow--4 .campusModalPiscineDate,
.campusModalPiscineRow--5 .campusModalPiscineDate {
  flex: 1;
  min-width: 0;
  text-align: center;
}
.campusModalPiscineEmpty {
  padding-left: 4px;
  font-family: var(--font-primary), sans-serif;
  font-size: 15px;
  color: #04809f;
}
.campusModalPiscineDate {
  flex-shrink: 0;
  color: #000;
  transition: color 0.2s ease;
}
.campusModalPiscineDate--divider {
  border-right: 2px solid #d9d9d9;
  padding-right: 12px;
  margin-right: 8px;
}
.campusModalPiscineDate:hover {
  color: #04809f;
}
.campusModalPiscineDay {
  margin: 0;
  font-family: var(--font-primary), sans-serif;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.15;
}
.campusModalPiscineMonth {
  margin: 2px 0 0;
  font-family: var(--font-primary), sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .campusModalPiscine:not(.campusModalPiscine--stacked) {
    flex-wrap: nowrap;
    gap: 8px;
  }
  .campusModalPiscine:not(.campusModalPiscine--stacked) .campusModalPiscineDates--row {
    justify-content: flex-start;
    flex-wrap: nowrap;
  }
  .campusModalPiscine--stacked .campusModalPiscineHead {
    min-width: 108px;
  }
  .campusModalPiscine--n5 .campusModalPiscineRow--3 {
    padding-left: 0;
  }
}

.campusModalClose {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.campusModalClose:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #111827;
}
.campusModalClose:focus-visible {
  outline: 2px solid #04809f;
  outline-offset: 2px;
}
.campusModalClose svg {
  width: 18px;
  height: 18px;
  display: block;
}

.galleryLightbox {
  margin: 0;
  max-width: min(92vw, 900px);
  width: 100%;
}

.campusModalMapFab {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.campusModalMapFab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
}
.campusModalMapFab:focus-visible {
  outline: 2px solid #04809f;
  outline-offset: 2px;
}
.campusModalMapFab svg {
  width: 28px;
  height: 28px;
  display: block;
}

.campusCards {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 42px;
}
.campusCard {
  border: 2px solid var(--gray-border);
  border-radius: 12px;
  padding: 22px 28px;
  text-align: left;
  min-width: 180px;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.campusCard:hover {
  border-color: var(--teal);
  box-shadow: 0 4px 18px rgba(0, 123, 138, 0.12);
}
button.campusCard {
  font: inherit;
  text-align: left;
  background: var(--white);
  color: inherit;
}
button.campusCard:hover {
  border-color: var(--teal);
  box-shadow: 0 4px 18px rgba(0, 123, 138, 0.12);
}
.campusCardName {
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
}
.campusCardAddr {
  font-size: 12.5px;
  color: #777;
  margin-top: 5px;
}

.doveSiamoGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
}
.doveSiamoCard {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 3px solid #0a0a0a;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  background: #0b2c33;
  aspect-ratio: 4 / 3;
  box-shadow: 0 8px 28px rgba(0, 40, 50, 0.12);
  transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease, filter 0.25s ease;
}
.doveSiamoCard:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0, 40, 50, 0.18);
}
.doveSiamoCard--nearby {
  z-index: 1;
  border-color: #5ef0ff;
  box-shadow:
    0 0 6px #5ef0ff,
    0 0 14px rgba(0, 229, 255, 0.85),
    0 0 28px rgba(0, 180, 220, 0.55),
    0 0 48px rgba(0, 123, 138, 0.35),
    0 10px 28px rgba(0, 40, 50, 0.2);
  animation: doveSiamoNeonPulse 2.4s ease-in-out infinite;
}
.doveSiamoCard--nearby:hover {
  box-shadow:
    0 0 8px #7af5ff,
    0 0 18px rgba(0, 229, 255, 0.95),
    0 0 36px rgba(0, 180, 220, 0.65),
    0 0 56px rgba(0, 123, 138, 0.4),
    0 14px 34px rgba(0, 40, 50, 0.22);
}
@keyframes doveSiamoNeonPulse {
  0%,
  100% {
    box-shadow:
      0 0 6px #5ef0ff,
      0 0 14px rgba(0, 229, 255, 0.85),
      0 0 28px rgba(0, 180, 220, 0.55),
      0 0 48px rgba(0, 123, 138, 0.35),
      0 10px 28px rgba(0, 40, 50, 0.2);
  }
  50% {
    box-shadow:
      0 0 10px #9af8ff,
      0 0 22px rgba(94, 240, 255, 0.95),
      0 0 40px rgba(0, 200, 230, 0.7),
      0 0 64px rgba(0, 123, 138, 0.45),
      0 10px 28px rgba(0, 40, 50, 0.2);
  }
}
@media (prefers-reduced-motion: reduce) {
  .doveSiamoCard--nearby {
    animation: none;
  }
}
.doveSiamoImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.doveSiamoCard:hover .doveSiamoImg {
  transform: scale(1.04);
}
.doveSiamoPlaceholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(145deg, #0f4c57, #007b8a);
}
.doveSiamoOverlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 18px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: linear-gradient(transparent, rgba(0, 30, 36, 0.82));
  color: #fff;
  text-align: left;
}
.doveSiamoName {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.doveSiamoAddr {
  font-size: 12.5px;
  opacity: 0.88;
}

/* ══════════════════════════════════════
   JOURNEY SECTION
══════════════════════════════════════ */
.journeySection {
  padding: 64px 80px 72px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background-color: var(--navy);
}
/* Sfondo fotografico + overlay (come sezione “journey” su 42spain.es) */
.journeySection::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(160deg, rgba(15, 35, 72, 0.92) 0%, rgba(27, 58, 114, 0.88) 45%, rgba(12, 28, 58, 0.94) 100%),
    url('https://partner-campuses.42.fr/strapi/uploads/my_journey_background_f3dd111405.jpg');
  background-size: auto, cover;
  background-position: center, center 20%;
  pointer-events: none;
}
.journeySection::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.journeyTitle {
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 800;
  color: var(--white);
  margin-bottom: 52px;
  position: relative;
  z-index: 2;
}
.journeySteps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.journeyStep { text-align: left; }
.journeyIcon {
  width: 72px;
  height: 72px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.06);
}
.journeyIcon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.journeyStepTitle {
  font-size: 17px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
}
.journeyStepDesc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.65;
}

/* ══════════════════════════════════════
   LEGAL PAGES
══════════════════════════════════════ */
.legalPage {
  background: var(--white, #fff);
  min-height: 50vh;
  padding: 48px 24px 80px;
}
.legalPageInner {
  max-width: 720px;
  margin: 0 auto;
}
.legalPageBack {
  margin-bottom: 24px;
}
.legalPageBack a,
.legalPageBack .visualEdit {
  color: var(--teal, #007b8a);
  font-weight: 700;
  text-decoration: none;
}
.legalPageBack a:hover {
  text-decoration: underline;
}
.legalPageTitle {
  font-size: 1.75rem;
  margin-bottom: 16px;
  color: var(--navy, #1b3a72);
  line-height: 1.25;
}
.legalPageBody {
  line-height: 1.7;
  color: var(--text-muted, #444);
  white-space: pre-wrap;
  font-size: 1rem;
}
.legalPreviewStack {
  display: grid;
  gap: 20px;
  margin-top: 28px;
}
.legalPreviewHint {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #64748b);
  margin: 0;
}
.legalPreviewCard {
  border: 1px solid var(--gray-border, #dde4e9);
  border-radius: 16px;
  padding: 28px 24px 36px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.legalPreviewCardLabel {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--teal, #007b8a);
  margin: 0 0 12px;
}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.footer {
  background: #080808;
  padding: 40px 80px 28px;
  text-align: center;
}
.footerBrand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}
.footerTagline {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 28px;
}
/* Foto studenti come in fondo a 42spain.es */
.footerPhotos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 900px;
  margin: 0 auto 28px;
  border-radius: 0;
  overflow: hidden;
}
.footerPhotos img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
.footerCampusLockup {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}
.footerHr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 18px;
}
.footerCopy {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.4);
}
.footerCopy + .footerCopy {
  margin-top: 6px;
}
.footerLinks {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.footerLinks a {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.18s;
}
.footerLinks a:hover { color: var(--white); }

/* ══════════════════════════════════════
   COOKIE BANNER
══════════════════════════════════════ */
.cookieOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 900;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 0 0;
}
.cookieBanner {
  background: #fff;
  width: 100%;
  max-width: 100%;
  padding: 24px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.12);
  border-top: 3px solid var(--teal);
}
.cookieBannerText { flex: 1; min-width: 260px; }
.cookieBannerTitle {
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 6px;
}
.cookieBannerDesc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 600px;
}
.cookiePolicyLink {
  color: var(--teal);
  font-weight: 700;
  text-decoration: underline;
}
.cookiePolicyLink:hover {
  color: var(--teal-dark);
}
.cookieFab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 880;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal, #007b8a);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, background 0.15s ease;
}
.cookieFab:hover {
  background: var(--teal-dark, #005f6b);
  transform: scale(1.05);
}
.cookieFab:focus-visible {
  outline: 2px solid var(--navy, #1b3a72);
  outline-offset: 3px;
}
.cookieFabIcon {
  display: flex;
  line-height: 0;
}

.cookieBannerActions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
}
.cookieBtnAccept {
  background: var(--teal);
  color: var(--white);
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.cookieBtnAccept:hover { background: var(--teal-dark); }
.cookieBtnNecessary {
  background: transparent;
  color: var(--teal);
  border: 1.5px solid var(--teal);
  border-radius: 6px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.cookieBtnNecessary:hover { background: rgba(0, 123, 138, 0.06); }
.cookieBtnManage {
  background: transparent;
  color: var(--text-muted);
  border: none;
  padding: 9px 6px;
  font-size: 12.5px;
  cursor: pointer;
  text-decoration: underline;
  white-space: nowrap;
}

/* Cookie Preferences Modal */
.cookieModalBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cookieModal {
  background: var(--white);
  border-radius: 14px;
  padding: 32px;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.cookieModalTitle {
  font-size: 20px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 8px;
}
.cookieModalDesc {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 24px;
}
.cookieCategory {
  border: 1.5px solid var(--gray-border);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
.cookieCategoryHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.cookieCategoryName {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}
.cookieCategoryDesc {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Toggle switch */
.toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggleSlider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.2s;
}
.toggleSlider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
}
.toggle input:checked + .toggleSlider { background: var(--teal); }
.toggle input:checked + .toggleSlider::before { transform: translateX(20px); }
.toggle input:disabled + .toggleSlider { background: #a0c8cc; cursor: not-allowed; }

.cookieModalFooter {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 900px) {
  .header { padding: 14px 24px; }
  .headerLogo img {
    width: 160px;
    max-height: 54px;
  }
  .hero { padding: 44px 24px; min-height: 60vh; }
  .introSection { padding: 48px 24px; }
  .pillarGrid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .accessInner { padding: 48px 24px 56px; }
  .accessSteps { grid-template-columns: 1fr; gap: 24px; }
  .piscineSection { padding: 28px 24px 36px; }
  .campusSectionInner { padding: 44px 24px 52px; }
  .journeySection { padding: 44px 24px 52px; }
  .footer { padding: 32px 24px 22px; }
  .journeySteps { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  .pillarGrid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .footerPhotos { grid-template-columns: 1fr; }
  .footerPhotos img { height: 200px; }
  .cookieBanner { padding: 20px 24px; }
}

/* ══════════════════════════════════════
   VISUAL TRANSLATIONS EDITOR (admin)
══════════════════════════════════════ */
.visualPreviewFrame {
  max-width: 1200px;
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  background: var(--teal-dark);
}
.visualPreviewRoot {
  pointer-events: auto;
}
.visualPreviewRoot a {
  pointer-events: none;
}
.visualEdit {
  outline: none;
  cursor: text;
  border-radius: 3px;
  transition: box-shadow 0.15s, background 0.15s;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.visualEdit:hover {
  background: rgba(255, 200, 60, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 60, 0.55);
}
.visualEdit:focus {
  background: rgba(255, 220, 100, 0.28);
  box-shadow: inset 0 0 0 2px rgba(255, 196, 0, 0.95);
}
.visualEditBlock {
  display: inline;
  white-space: pre-wrap;
}
.visualEditPlain {
  display: block;
  margin-top: 4px;
  padding: 8px 10px;
  background: #fff;
  color: #123;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  min-height: 36px;
}
.visualEditPlain:hover,
.visualEditPlain:focus {
  background: #fff8e1;
}
.visualModalStrip {
  background: #0f172a;
  color: #e2e8f0;
  padding: 28px 32px 40px;
  text-align: left;
}
.visualModalStripTitle {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 16px;
}
.visualModalStripGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.visualModalStripGrid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
}

/* ══════════════════════════════════════
   CAMPUS MODAL (ex Tailwind / Radix)
══════════════════════════════════════ */
.campusModalRoot {
  position: fixed;
  inset: 0;
  z-index: 950;
}
.campusModalOverlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.campusModalCenter {
  pointer-events: none;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.campusModalDialog {
  pointer-events: auto;
  position: relative;
  z-index: 10;
  margin: 0;
  display: flex;
  max-height: min(90vh, 920px);
  width: 100%;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0.75rem;
  background: #fff;
  color: #5a5a5a;
  outline: none;
}
@media (min-width: 640px) {
  .campusModalDialog { max-width: 425px; }
}
@media (min-width: 768px) {
  .campusModalDialog { min-width: 630px; max-width: 630px; }
}
.campusModalBody {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  overflow-y: auto;
  padding: 1.5rem;
}
.campusModalBody.hasMapFab { padding-bottom: 5rem; }
.campusModalTitle {
  width: 100%;
  text-align: center;
  font-weight: 800;
  font-size: 1.5rem;
  color: #000;
}
.campusModalSrOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.campusModalImgWrap {
  position: relative;
  height: 225px;
  width: 100%;
  overflow: hidden;
  border-radius: 0.375rem;
}
.campusModalImgWrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.campusModalImgPlaceholder {
  display: flex;
  height: 225px;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  background: #f1f5f9;
  font-size: 0.875rem;
  color: #64748b;
}
.campusModalDesc {
  width: 100%;
  font-size: 1rem;
  text-align: center;
  color: #000;
}
.campusModalDesc br { display: block; }
@media (min-width: 1280px) {
  .campusModalDesc { text-align: left; }
}
.campusModalActions {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .campusModalActions { gap: 6rem; }
}
.campusModalSocialTitle {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  font-weight: 800;
  color: #1e3a8a;
}
.campusModalSocials {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.campusModalSocials a {
  display: inline-flex;
  height: 30px;
  width: 30px;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}
.campusModalSocials a:hover { transform: scale(1.5); }
.campusModalSocials img { display: block; width: 30px; height: 30px; }

.hidden { display: none !important; }