/* ══════════════════════════════════════════════════
   OAZA CLUB — style.css
   Luxury fitness · dark editorial aesthetic
══════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black:   #080808;
  --charcoal:#111111;
  --silver:  #c8c8c8;
  --white:   #f2f0eb;
  --gold:    #f2f0eb;   /* antes dorado — ahora blanco */
  --gold-lt: #ffffff;   /* antes dorado claro — ahora blanco puro */

  --font-display: 'Bebas Neue', sans-serif;
  --font-serif:   'Cormorant Garamond', serif;
  --font-sans:    'Montserrat', sans-serif;

  --nav-h: 110px;

  /* Esquinas redondeadas */
  --radius-sm:   12px;   /* inputs y elementos pequenos */
  --radius:      20px;   /* tarjetas y cajas */
  --radius-lg:   28px;   /* cajas grandes: modal, mapa, foto */
  --radius-pill: 999px;  /* botones */
  --ease:  cubic-bezier(.16,1,.3,1);
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-sans);
}



/* ══════════ NAV ══════════ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  z-index: 100;
  background: rgba(8,8,8,1);
  border-bottom: 1px solid rgba(242,240,235,.15);
}

/* Hamburger */
.nav__menu {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}
.nav__menu span {
  display: block;
  width: 28px; height: 1px;
  background: var(--white);
  transition: transform .4s var(--ease), opacity .3s;
}
.nav__menu:hover span { background: var(--gold); }

/* Logo */
.nav__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.nav__logo-img {
  height: 70px;
  width: auto;
  transition: opacity .3s;
}
.nav__logo:hover .nav__logo-img {
  opacity: .75;
}

/* CTA */
.nav__cta {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  border: 1px solid rgba(242,240,235,.6);
  padding: 10px 22px;
  transition: background .3s, color .3s, border-color .3s;
}
.nav__cta:hover {
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
}


/* ══════════ MOBILE MENU ══════════ */
.mobile-menu {
  position: fixed;
  top: 0; left: 0;
  width: min(420px, 100vw);
  height: 100vh;
  background: var(--charcoal);
  border-right: 1px solid rgba(242,240,235,.2);
  z-index: 200;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 90px 44px 48px;
  overflow-y: auto;            /* si no cabe, el menu hace scroll */
  transform: translateX(-100%);
  transition: transform .6s var(--ease);
}
.mobile-menu.open { transform: translateX(0); }

.mobile-menu__close {
  position: absolute;
  top: 28px; right: 28px;
  background: none; border: none;
  color: var(--silver);
  font-size: 20px;
  transition: color .3s;
}
.mobile-menu__close:hover { color: var(--gold); }

.mobile-menu__list { list-style: none; }
.mobile-menu__list li {
  overflow: hidden;
  margin-bottom: 8px;
}
.mobile-menu__list a {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(22px, 3.2vw, 30px);
  letter-spacing: .05em;
  color: var(--white);
  text-decoration: none;
  line-height: 1.15;
  transition: color .3s, letter-spacing .4s var(--ease);
}
.mobile-menu__list a:hover {
  color: var(--gold);
  letter-spacing: .1em;
}

.mobile-menu__overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s;
}
.mobile-menu__overlay.open {
  opacity: 1;
  pointer-events: all;
}


/* ══════════ HERO ══════════ */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* Full-bleed photo */
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Gradient fade at bottom — merges photo into black background */
.hero__vignette-bottom {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(8,8,8,0)   0%,
    rgba(8,8,8,0)   50%,
    rgba(8,8,8,.55) 80%,
    rgba(8,8,8,1)   100%
  );
  pointer-events: none;
}

/* Scroll indicator */
.hero__scroll {
  position: absolute;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: fadeIn 1s var(--ease) 1s forwards;
  z-index: 2;
}
.hero__scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, rgba(255,255,255,.6), rgba(255,255,255,0));
  animation: scrollLine 2s var(--ease) infinite 1.2s;
}
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
.hero__scroll span {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(200,200,200,.5);
}


/* ══════════ PHRASE SECTION ══════════ */
.phrase {
  background: var(--black);
  text-align: center;
  padding: 100px 40px 110px;
  max-width: 860px;
  margin: 0 auto;
}

.phrase__text {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--white);
  margin-bottom: 28px;
}

.phrase__sub {
  font-family: var(--font-sans);
  font-size: clamp(12px, 1.4vw, 15px);
  font-weight: 300;
  letter-spacing: .06em;
  line-height: 1.8;
  color: var(--silver);
  margin-bottom: 52px;
}

.phrase__btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.phrase__btn {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 34px;
  transition: background .3s, color .3s, border-color .3s;
}

.phrase__btn--outline {
  color: var(--white);
  border: 1px solid rgba(255,255,255,.3);
}
.phrase__btn--outline:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.phrase__btn--fill {
  background: var(--gold);
  color: var(--black);
  border: 1px solid var(--gold);
}
.phrase__btn--fill:hover {
  background: var(--gold-lt);
  border-color: var(--gold-lt);
}


@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  to { opacity: 1; }
}


/* ══════════ SERVICES GRID ══════════ */
.services {
  background: var(--black);
  padding: 0 40px 120px;
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
}

.services__card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}

.services__card:hover .services__img {
  transform: scale(1.05);
}

/* Placeholder coloured boxes — replace src with real images later */
.services__img {
  width: 100%;
  aspect-ratio: 3/4;
  transition: transform .6s var(--ease);
  background-size: cover;
  background-position: center;
}
.services__img--1 { background-color: #1a2a1a; background-image: linear-gradient(135deg,#1a2a1a,#2d4a2d); }
.services__img--2 { background-color: #1a1a2a; background-image: linear-gradient(135deg,#1a1a2a,#2d2d4a); }
.services__img--3 { background-color: #2a1a1a; background-image: linear-gradient(135deg,#2a1a1a,#4a2d2d); }
.services__img--4 { background-color: #2a2a1a; background-image: linear-gradient(135deg,#2a2a1a,#4a4a2d); }
.services__img--5 { background-color: #1a2a2a; background-image: linear-gradient(135deg,#1a2a2a,#2d4a4a); }
.services__img--6 { background-color: #2a1a2a; background-image: linear-gradient(135deg,#2a1a2a,#4a2d4a); }

.services__info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 100%);
}

.services__name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
}

.services__arrow {
  font-size: 18px;
  color: var(--gold);
  transition: transform .3s var(--ease);
}
.services__card:hover .services__arrow {
  transform: translateX(5px);
}


/* ══════════ MAPPA ══════════ */
.mappa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  background: var(--black);
  padding: 0 40px 120px;
  max-width: 1400px;
  margin: 0 auto;
}

.mappa__left {
  display: flex;
  flex-direction: column;
}

.mappa__photo-wrap {
  flex: 1;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
  min-height: 300px;
}

.mappa__photo-placeholder {
  width: 100%;
  height: 100%;
  min-height: 300px;
  background: linear-gradient(135deg, #1a2a1a 0%, #0d1a0d 100%);
  /* Reemplaza con: background-image: url('../imagenes/exterior.jpg'); background-size: cover; */
}

.mappa__info {
  background: #111;
  padding: 32px 36px 36px;
  border-radius: 0 0 var(--radius) var(--radius);
}

.mappa__city {
  font-family: var(--font-serif);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 300;
  color: var(--white);
  margin-bottom: 16px;
  line-height: 1;
}

.mappa__zip {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: .1em;
  color: var(--silver);
  vertical-align: middle;
  margin-left: 8px;
}

.mappa__address {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: .06em;
  color: var(--silver);
  text-decoration: none;
  transition: color .3s;
  margin-bottom: 20px;
}
.mappa__address:hover { color: var(--gold); }

.mappa__address-arrow {
  font-size: 18px;
  color: var(--gold);
  transition: transform .3s var(--ease);
}
.mappa__address:hover .mappa__address-arrow { transform: translateX(5px); }

.mappa__contacts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 20px;
}

.mappa__contact {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .08em;
  color: var(--silver);
  text-decoration: none;
  transition: color .3s;
}
.mappa__contact:hover { color: var(--gold); }

.mappa__right {
  border-radius: var(--radius);
  overflow: hidden;
}

.mappa__iframe {
  width: 100%;
  height: 100%;
  min-height: 520px;
  border: none;
}



@media (max-width: 768px) {
  .nav { padding: 0 24px; }
  .nav__cta { font-size: 9px; padding: 9px 16px; letter-spacing: .12em; }
  .phrase { padding: 72px 24px 80px; }
  .services { padding: 0 24px 80px; }
  .services__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .mappa { grid-template-columns: 1fr; padding: 0 24px 80px; }
  .mappa__iframe { min-height: 350px; }
}

@media (max-width: 480px) {
  .nav__cta { display: none; }
  .services__grid { grid-template-columns: 1fr; }
}

/* ══════════ FOTO ESTERNO ══════════ */
.foto-esterno {
  background: var(--white);
  padding: 0 40px 40px;
}

.foto-esterno__placeholder {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  height: 500px;
  background: linear-gradient(135deg, #1a1a1a 0%, #222 100%);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(242,240,235,.3);
}

.foto-esterno__label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(242,240,235,.5);
}


/* ══════════ FRASI MOTIVAZIONALI ══════════ */
.frasi {
  background: var(--black);
  padding: 40px 40px;
}

.frasi__placeholder {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  height: 280px;
  background: linear-gradient(135deg, #111 0%, #1a1a1a 100%);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(242,240,235,.3);
}

.frasi__label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(242,240,235,.5);
}


/* ══════════ SPACES (Garden / Shop / 4Watt) ══════════ */
.spaces {
  background: var(--white);
  padding: 40px 40px 120px;
  overflow: hidden;
}

.spaces__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
  clear: both;
}

.spaces__card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}

.spaces__card:hover .spaces__img { transform: scale(1.05); }

.spaces__img {
  width: 100%;
  aspect-ratio: 3/4;
  transition: transform .6s var(--ease);
  background-size: cover;
  background-position: center;
}
.spaces__img--1 { background-color: #1a2218; background-image: linear-gradient(135deg,#1a2218,#2a3a28); }
.spaces__img--2 { background-color: #221a18; background-image: linear-gradient(135deg,#221a18,#3a2a28); }
.spaces__img--3 { background-color: #18181a; background-image: linear-gradient(135deg,#18181a,#28283a); }

.spaces__info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 100%);
}

.spaces__name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
}

.spaces__arrow {
  font-size: 18px;
  color: var(--gold);
  transition: transform .3s var(--ease);
}
.spaces__card:hover .spaces__arrow { transform: translateX(5px); }


/* ══════════ FOOTER ══════════ */
.footer {
  background: #0d0d0d;
  border-top: 1px solid rgba(242,240,235,.15);
  padding: 72px 40px 0;
  max-width: 100%;
}

.footer__top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 60px;
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer__logo {
  height: 60px;
  width: auto;
  mix-blend-mode: screen;
  filter: brightness(1.8) contrast(1.2);
}

.footer__tagline {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(200,200,200,.35);
}

.footer__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__col-title {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}

.footer__link {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .04em;
  color: var(--silver);
  text-decoration: none;
  transition: color .3s;
  line-height: 1.6;
}
.footer__link:hover { color: var(--white); }

.footer__social {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer__social-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__social-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--silver);
  transition: color .3s;
}
.footer__social-btn:hover { color: var(--gold); }

.footer__social-btn svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.footer__social-btn span {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .06em;
}

.footer__bottom {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 0;
}

.footer__copy {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: .1em;
  color: rgba(200,200,200,.2);
}

@media (max-width: 768px) {
  .footer__top { grid-template-columns: 1fr; gap: 40px; }
  .footer { padding: 60px 24px 0; }
  .spaces__grid { grid-template-columns: repeat(2, 1fr); }
  .foto-esterno { padding: 0 24px 40px; }
  .frasi { padding: 40px 24px; }
  .spaces { padding: 40px 24px 80px; }
}
/* ══════════ COOKIE BANNER ══════════ */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #111;
  border-top: 1px solid rgba(242,240,235,.2);
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  z-index: 9999;
  flex-wrap: wrap;
}

.cookie-banner__text {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .04em;
  color: var(--silver);
  line-height: 1.6;
}

.cookie-banner__text a {
  color: var(--gold);
  text-decoration: none;
}

.cookie-banner__btns {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.cookie-banner__btn {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 10px 24px;
  border: none;
  cursor: pointer;
  transition: background .3s;
}

.cookie-banner__btn--accept {
  background: var(--gold);
  color: var(--black);
}
.cookie-banner__btn--accept:hover { background: var(--gold-lt); }

.cookie-banner__btn--reject {
  background: transparent;
  color: var(--silver);
  border: 1px solid rgba(255,255,255,.2);
}
.cookie-banner__btn--reject:hover { border-color: var(--silver); }

@media (max-width: 768px) {
  .cookie-banner { padding: 20px 24px; flex-direction: column; align-items: flex-start; }
}

/* ══════════ MOBILE MENU EXTRAS ══════════ */
.mobile-menu__sub a {
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  letter-spacing: .12em !important;
  color: var(--silver) !important;
  padding-left: 20px;
}
.mobile-menu__sub a:hover { color: var(--gold) !important; }

.mobile-menu__divider {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 16px 0;
  list-style: none;
}

.mobile-menu__cta-link {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
}
.mobile-menu__cta-link:hover { letter-spacing: .28em !important; }

/* ══════════ MODAL POPUP ══════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.modal__card {
  background: var(--charcoal);
  border: 1px solid rgba(242, 240, 235, 0.3);
  border-radius: var(--radius);
  width: 100%;
  max-width: 560px;
  padding: 48px 40px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0,0,0,0.8);
}

.modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: var(--silver);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s;
}

.modal__close:hover {
  color: var(--gold);
}

.modal__eyebrow {
  /* Este es el verdadero titulo del modal: va grande */
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 38px);
  letter-spacing: 0.1em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 10px;
}

.modal__title {
  /* La frase explicativa pasa a segundo plano */
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--silver);
  margin-bottom: 26px;
}

.modal__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modal__field label {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 10px;
}

.modal__field input[type="text"],
.modal__field input[type="email"],
.modal__field input[type="tel"] {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding: 10px 0;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--white);
  outline: none;
  transition: border-color 0.3s;
}

.modal__field input:focus {
  border-bottom-color: var(--gold);
}

.modal__checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  margin-top: 8px;
}

.modal__checkbox-label input {
  accent-color: var(--gold);
  margin-top: 2px;
}

.modal__checkbox-label span {
  font-family: var(--font-sans);
  font-size: 11px;
  color: rgba(200, 200, 200, 0.6);
  line-height: 1.5;
}

.modal__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--gold);
  color: var(--black);
  border: none;
  padding: 14px 28px;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.3s;
}

.modal__submit:hover {
  background: var(--gold-lt);
}

.modal__submit svg {
  width: 16px;
  height: 16px;
}

.modal__success {
  text-align: center;
  padding: 20px 0;
}

.modal__success-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin: 0 auto 20px;
}

.modal__success-title {
  font-family: var(--font-serif);
  font-size: 28px;
  color: var(--white);
  margin-bottom: 12px;
}

.modal__success-text {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--silver);
  line-height: 1.6;
}


/* ══════════ INTEGRACIÓN HEADER Y HERO TEXT ══════════ */

/* 1. Estructura del Header (Navegación principal) */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  z-index: 100;
  background: linear-gradient(to bottom, rgba(8,8,8,0.95) 0%, rgba(8,8,8,0) 100%);
}

.header__logo a {
  font-family: var(--font-serif);
  font-size: 24px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
}

/* Ocultar menú en línea en móviles, mostrar en PC */
.header__nav-desktop { display: none; }
@media (min-width: 992px) {
  .header__nav-desktop { display: block; }
}

.nav__list {
  display: flex;
  list-style: none;
  gap: 32px;
}

.nav__list a {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--silver);
  text-decoration: none;
  transition: color .3s;
}

.nav__list a:hover {
  color: var(--gold);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Botón Hamburguesa que abre el menú móvil */
.menu-btn {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  z-index: 201;
}

.menu-btn span {
  display: block;
  width: 28px; height: 1px;
  background: var(--white);
  transition: background .3s;
}

.menu-btn:hover span { background: var(--gold); }

/* 2. Textos de la sección Hero */
.hero {
  display: flex;
  align-items: center;
  /* Capa oscura extra para que el texto resalte sobre cualquier foto */
  box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.5); 
}

.hero__content {
  position: relative;
  z-index: 10;
  padding: 0 40px;
  max-width: 800px;
  margin-top: 40px;
}

.hero__title {
  font-family: var(--font-serif);
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1.05;
  font-weight: 300;
  color: var(--white);
  margin-bottom: 24px;
}

.hero__text {
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--silver);
  margin-bottom: 36px;
  max-width: 600px;
}

.btn--primary {
  display: inline-block;
}

.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 120px 20px 60px 20px;
}

.hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 1;
}

.hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55); /* Capa oscura para dar visibilidad al texto */
  z-index: 2;
}

.hero__content {
  position: relative;
  z-index: 3;
  max-width: 900px;
  text-align: center;
  margin: 0 auto;
  transform: translateY(-90px);
}


.services__carousel {
  position: relative;
}

.services__viewport {
  overflow: hidden;
}

.services__track {
  display: flex;
  transition: transform 0.6s ease;
  will-change: transform;
}

/* Cada tarjeta ocupa 1/3 del viewport visible → se ven 3 a la vez */
.services__track .services__card {
  flex: 0 0 calc(100% / 3);
  box-sizing: border-box;
}

.services__nav--next {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--gold, #f2f0eb);
  background: rgba(0, 0, 0, 0.5);
  color: var(--gold, #f2f0eb);
  font-size: 20px;
  cursor: pointer;
  z-index: 5;
  transition: background 0.3s;
}

.services__nav--next:hover {
  background: var(--gold, #f2f0eb);
  color: #000;
}

/* Responsive: en móvil, muestra 1 tarjeta a la vez */
@media (max-width: 768px) {
  .services__track .services__card {
    flex: 0 0 100%;
  }
}

.services__track {
  display: flex;
  gap: 16px;                 /* <-- espacio entre tarjetas, ajusta a tu gusto */
  transition: transform 0.6s ease;
  will-change: transform;
}

.services__track .services__card {
  flex: 0 0 calc((100% - 2 * 16px) / 3);  /* resta 2 gaps entre 3 tarjetas */
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .services__track .services__card {
    flex: 0 0 100%;
  }
}





/* Estilos para la página Chi Siamo — alineados con la estética general (dark editorial) */
.page-hero {
  padding: calc(var(--nav-h) + 60px) 20px 60px;
  text-align: center;
  background-color: var(--black);
  color: var(--white);
}
.page-hero__subtitle {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver);
  display: block;
  margin-bottom: 14px;
}
.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 68px);
  letter-spacing: 2px;
  font-weight: 400;
  margin-bottom: 18px;
}
.page-hero__highlight {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--gold);
  font-weight: 400;
  font-style: italic;
}

.about-detail {
  padding: 80px 20px;
  max-width: 1100px;
  margin: 0 auto;
  background: var(--black);
}
.about-detail__lead {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  line-height: 1.6;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 70px;
  font-weight: 400;
  color: var(--white);
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-bottom: 70px;
}
.about-card {
  padding: 34px 30px;
  background: var(--charcoal);
  color: var(--white);
  border: 1px solid rgba(242, 240, 235, 0.15);
  transition: border-color 0.3s;
}
.about-card:hover {
  border-color: rgba(242, 240, 235, 0.5);
}
.about-card__icon {
  font-family: var(--font-display);
  font-size: 1.8rem;
  letter-spacing: 1px;
  color: var(--gold);
  margin-bottom: 18px;
}
.about-card__title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 15px;
  color: var(--white);
}
.about-card__text {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--silver);
}

.about-system {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  margin-bottom: 70px;
}
.about-system__box {
  padding: 40px 35px;
  background: var(--charcoal);
  border-left: 2px solid var(--gold);
  color: var(--silver);
  line-height: 1.7;
  font-family: var(--font-sans);
  font-size: 0.95rem;
}
.about-system__title {
  font-family: var(--font-serif);
  color: var(--white);
  margin-bottom: 16px;
  font-size: 1.5rem;
  font-weight: 400;
}

.about-cta {
  text-align: center;
  padding: 60px 20px 20px;
  border-top: 1px solid rgba(242, 240, 235, 0.15);
}
.about-cta h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  margin-bottom: 28px;
  font-size: 2rem;
  color: var(--white);
}

/* ══════════ GRIGLIA 2x2 PER ONLINE COACHING ══════════ */
.about-grid-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 70px;
}

@media (max-width: 768px) {
  .about-grid-2x2 {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}


/* ══════════ TARJETAS CON IMAGEN DE FONDO - CHI SIAMO ══════════ */

.about-grid--cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.about-card--image {
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 350px;
  border-radius: var(--radius);
  overflow: hidden;
  border: none;
  transition: transform 0.4s var(--ease);
  cursor: pointer;
}

.about-card--image:hover {
  transform: scale(1.02);
}

.about-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  /* Arriba y no al centro: si no, las tarjetas con menos texto
     empiezan mas abajo y los numeros 01/02/03 se descuadran */
  align-items: flex-start;
  justify-content: center;
  padding: 40px 30px;
  transition: background 0.5s var(--ease);
}

.about-card--image:hover .about-card__overlay {
  background: rgba(0, 0, 0, 0.75);
}

.about-card__content {
  text-align: center;
  opacity: 1;
  transition: opacity 0.4s var(--ease);
}

.about-card__content--center {
  text-align: center;
}

.about-card__icon {
  font-family: var(--font-display);
  font-size: 2.5rem;
  letter-spacing: 1px;
  color: var(--gold);
  margin-bottom: 12px;
}

.about-card__title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--white);
  margin-bottom: 12px;
}

.about-card__text {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--silver);
  max-width: 90%;
  margin: 0 auto;
}

/* Tarjeta destacada (la que aparece en grande) */
.about-card--featured {
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 300px;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 50px;
  cursor: pointer;
}

.about-card--featured .about-card__overlay {
  background: rgba(0, 0, 0, 0.5);
  transition: background 0.5s var(--ease);
}

.about-card--featured:hover .about-card__overlay {
  background: rgba(0, 0, 0, 0.8);
}

.about-card__featured-text {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--white);
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  transition: transform 0.4s var(--ease);
}

.about-card--featured:hover .about-card__featured-text {
  transform: scale(1.02);
}

/* Responsive */
@media (max-width: 768px) {
  .about-grid--cards {
    grid-template-columns: 1fr;
  }
  
  .about-card--image {
    min-height: 280px;
  }
  
  .about-card--featured {
    min-height: 220px;
  }
}


/* ══════════ CHI SIAMO - TARJETAS CON IMAGEN ══════════ */
.about-grid--cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.about-card--image {
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 300px;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
}

.about-card--image .about-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  transition: background 0.4s ease;
}

.about-card--image:hover .about-card__overlay {
  background: rgba(0, 0, 0, 0.8);
}

.about-card--image .about-card__content {
  text-align: center;
  color: #fff;
}

.about-card--image .about-card__icon {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--gold);
  margin-bottom: 10px;
}

.about-card--image .about-card__title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 400;
  color: #fff;
  margin-bottom: 10px;
}

.about-card--image .about-card__text {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.6;
  color: #ccc;
}

/* Tarjeta destacada */
.about-card--featured {
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 200px;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 50px;
  cursor: pointer;
}

.about-card--featured .about-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  transition: background 0.4s ease;
}

.about-card--featured:hover .about-card__overlay {
  background: rgba(0, 0, 0, 0.8);
}

.about-card__featured-text {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-weight: 300;
  line-height: 1.6;
  color: #fff;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .about-grid--cards {
    grid-template-columns: 1fr;
  }
}

/* ══════════ CHI SIAMO - TARJETAS CON IMAGEN ══════════ */
.about-grid--cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.about-card--image {
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 300px;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
}

.about-card--image .about-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  transition: background 0.4s ease;
}

.about-card--image:hover .about-card__overlay {
  background: rgba(0, 0, 0, 0.8);
}

.about-card--image .about-card__content {
  text-align: center;
  color: #fff;
}

.about-card--image .about-card__icon {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--gold);
  margin-bottom: 10px;
}

.about-card--image .about-card__title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 400;
  color: #fff;
  margin-bottom: 10px;
}

.about-card--image .about-card__text {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.6;
  color: #ccc;
}

/* Tarjeta destacada */
.about-card--featured {
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 200px;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 50px;
  cursor: pointer;
}

.about-card--featured .about-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  transition: background 0.4s ease;
}

.about-card--featured:hover .about-card__overlay {
  background: rgba(0, 0, 0, 0.8);
}

.about-card__featured-text {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-weight: 300;
  line-height: 1.6;
  color: #fff;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .about-grid--cards {
    grid-template-columns: 1fr;
  }
}


/* ══════════ ZONA BIANCA — FRASE ══════════ */
.claim {
  background: var(--white);
  padding: 120px 40px 70px;
  text-align: center;
}

.claim__text {
  font-family: var(--font-serif);
  font-size: clamp(30px, 4.2vw, 56px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--black);
  max-width: 900px;
  margin: 0 auto;
}

/* El placeholder de la foto sigue siendo oscuro sobre el fondo blanco */
.foto-esterno__placeholder {
  border-color: rgba(8,8,8,.15);
}

/* Cuarta tarjeta de la zona de espacios */
.spaces__img--4 { background-color: #22201a; background-image: linear-gradient(135deg,#22201a,#3a362a); }

/* En fondo blanco las tarjetas necesitan algo menos de aire arriba */
.spaces {
  padding: 30px 40px 120px;
}


/* ══════════ OVERLAY DE DESCRIPCION EN LAS TARJETAS ══════════ */
/* Al pasar el cursor la foto se difumina y aparece la frase.    */
.services__card,
.spaces__card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.card-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 26px 84px;
  background: rgba(8,8,8,.62);
  opacity: 0;
  transition: opacity .45s var(--ease);
  pointer-events: none;
}

.card-overlay__text {
  font-family: var(--font-serif);
  font-size: clamp(15px, 1.2vw, 20px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--white);
  text-align: center;
  transform: translateY(14px);
  transition: transform .45s var(--ease);
}

/* La franja con el titulo y la flecha queda siempre por encima */
.services__info,
.spaces__info {
  z-index: 2;
}

.services__img,
.spaces__img {
  transition: transform .6s var(--ease), filter .45s var(--ease);
}

/* Solo en dispositivos con raton */
@media (hover: hover) {
  .services__card:hover .card-overlay,
  .spaces__card:hover .card-overlay { opacity: 1; }

  .services__card:hover .card-overlay__text,
  .spaces__card:hover .card-overlay__text { transform: translateY(0); }

  .services__card:hover .services__img,
  .spaces__card:hover .spaces__img { filter: blur(4px); transform: scale(1.08); }
}

/* En tactil se activa con el primer toque (clase anadida por JS) */
.services__card.is-active .card-overlay,
.spaces__card.is-active .card-overlay { opacity: 1; }

.services__card.is-active .card-overlay__text,
.spaces__card.is-active .card-overlay__text { transform: translateY(0); }

.services__card.is-active .services__img,
.spaces__card.is-active .spaces__img { filter: blur(4px); transform: scale(1.08); }


@media (max-width: 768px) {
  .claim { padding: 80px 24px 50px; }
  .card-overlay { padding: 26px 22px 76px; }
}

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


/* ══════════════════════════════════════════════════════════════
   ESTETICA MODERNA — bordes redondeados
   ══════════════════════════════════════════════════════════════ */

/* --- Botones tipo pastilla --- */
.nav__cta,
.phrase__btn,
.btn,
.modal__submit,
.cookie-banner__btn,
.services__nav--next {
  border-radius: var(--radius-pill);
}

.modal__close,
.mobile-menu__close {
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* --- Cajas grandes --- */
.modal__card,
.foto-esterno__placeholder,
.frasi__placeholder,
.mappa__right,
.cookie-banner {
  border-radius: var(--radius-lg);
}

/* El iframe del mapa se recorta con el contenedor */
.mappa__right {
  overflow: hidden;
}
.mappa__iframe {
  border-radius: var(--radius-lg);
}

/* --- Tarjetas --- */
.services__card,
.spaces__card,
.about-card,
.card-overlay {
  border-radius: var(--radius);
}

/* --- Campos del formulario del modal: de linea a caja redondeada --- */
.modal__field input[type="text"],
.modal__field input[type="email"],
.modal__field input[type="tel"] {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  transition: border-color .3s, background .3s;
}

.modal__field input[type="text"]:focus,
.modal__field input[type="email"]:focus,
.modal__field input[type="tel"]:focus {
  border-color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.08);
}

/* --- Menu lateral: entradas mas compactas --- */
.mobile-menu__list li { margin-bottom: 2px; }
.mobile-menu__list a { padding: 2px 0; }
.mobile-menu__sub { margin-bottom: 14px !important; }
.mobile-menu__sub a { font-size: 12px !important; padding-left: 16px; }

@media (max-height: 760px) {
  .mobile-menu { padding: 70px 36px 36px; }
  .mobile-menu__list a { font-size: 20px; }
}


/* ══════════ CAJA DESTACADA EN BLANCO ══════════ */
/* Bloque invertido: fondo claro y texto negro, para romper el negro
   continuo de las paginas de servicios. */
.feature-box--light {
  background: var(--white);
  color: var(--black);
  border: none;
  border-radius: var(--radius-lg);
  padding: 50px 40px;
  margin-bottom: 50px;
  text-align: center;
}

.feature-box--light .feature-box__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.8rem;
  color: var(--black);
  margin-bottom: 20px;
}

.feature-box--light .feature-box__text {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  color: #3a3a3a;
  max-width: 760px;
  margin: 0 auto;
}

.feature-box--light .feature-box__text a {
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Boton oscuro sobre la caja clara */
.feature-box__btn {
  display: inline-block;
  margin-top: 26px;
  padding: 12px 30px;
  border-radius: var(--radius-pill);
  background: var(--black);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity .3s;
}
.feature-box__btn:hover { opacity: .8; }


/* ══════════════════════════════════════════════════════════════
   CHI SIAMO — correcciones finales
   El archivo tiene varias copias de las reglas .about-card--image,
   asi que estas van al final y con mas especificidad para ganar.
   ══════════════════════════════════════════════════════════════ */

/* Contenido pegado arriba: si va centrado, la tarjeta con menos
   texto arranca mas abajo y los numeros 01/02/03 se descuadran. */
.about-grid--cards .about-card--image .about-card__overlay {
  align-items: flex-start;
  padding: 40px 28px;
}

/* Caja destacada invertida: fondo claro y texto negro */
.about-card--featured .about-card__overlay {
  background: rgba(242, 240, 235, 0.95);
}
.about-card--featured:hover .about-card__overlay {
  background: rgba(242, 240, 235, 1);
}
.about-card__featured-text {
  color: var(--black);
}


/* ══════════════════════════════════════════════════════════════
   RESENAS DE GOOGLE
   ══════════════════════════════════════════════════════════════ */
.reviews {
  background: var(--white);
  padding: 20px 40px 120px;
  text-align: center;
}

.reviews__inner {
  max-width: 720px;
  margin: 0 auto;
}

.reviews__eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #6b6b6b;
  margin-bottom: 18px;
}

.reviews__stars {
  font-size: 22px;
  letter-spacing: .3em;
  color: var(--black);
  margin-bottom: 20px;
}

.reviews__title {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 300;
  line-height: 1.25;
  color: var(--black);
  margin-bottom: 18px;
}

.reviews__text {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: #3a3a3a;
  margin-bottom: 34px;
}

.reviews__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 34px;
  border-radius: var(--radius-pill);
  background: var(--black);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity .3s;
}
.reviews__btn:hover { opacity: .82; }
.reviews__btn svg { width: 18px; height: 18px; flex-shrink: 0; }

@media (max-width: 768px) {
  .reviews { padding: 10px 24px 80px; }
}


/* ══════════ CASILLA DE PRIVACIDAD DEL MODAL ══════════ */
.modal__check {
  margin-top: 4px;
}

.modal__check label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.modal__check input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--white);
  cursor: pointer;
}

.modal__check span {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--silver);
}

.modal__check a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ══════════ AVISO EN EL HUECO DEL MAPA BLOQUEADO ══════════ */
/* Se muestra mientras el usuario no ha aceptado los cookies de
   terceros. El iframe de Google no se carga hasta entonces. */
.cookie-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 30px;
  text-align: center;
  background: var(--charcoal);
  border-radius: var(--radius-lg);
}

.cookie-placeholder__text {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--silver);
  max-width: 340px;
}

.cookie-placeholder__btn {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 12px 26px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--black);
  cursor: pointer;
  transition: opacity .3s;
}
.cookie-placeholder__btn:hover { opacity: .82; }

.cookie-placeholder__link {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--silver);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cookie-placeholder__link:hover { color: var(--white); }

/* El contenedor del mapa necesita ser el ancla del aviso */
.mappa__right { position: relative; }


/* ══════════ FOOTER — ALINEACION DE LAS COLUMNAS ══════════ */
/* Las tres columnas usan el mismo ritmo: titulo, y debajo filas de
   20px de alto separadas 14px. Asi las lineas de CONTATTI,
   NAVIGAZIONE y SEGUICI quedan a la misma altura entre si. */
.footer__col,
.footer__social,
.footer__social-links {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer__col-title {
  margin-bottom: 0;
  line-height: 20px;
}

.footer__link,
.footer__social-btn {
  display: flex;
  align-items: center;
  min-height: 20px;
  line-height: 20px;
}

/* El icono se estiraba a 22px (align-items: stretch heredado) y
   desajustaba el ritmo de la columna SEGUICI frente a las otras dos */
.footer__social-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* El boton de la app va dentro del footer como un enlace mas */
button.footer__social-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}


/* ══════════ SELECTOR DE DESCARGA DE LA APP ══════════ */
.appmodal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .8);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s var(--ease);
}
.appmodal.open {
  opacity: 1;
  visibility: visible;
}

.appmodal__card {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--charcoal);
  border: 1px solid rgba(242,240,235,.12);
  border-radius: var(--radius-lg);
  padding: 44px 36px 36px;
  text-align: center;
  transform: translateY(16px);
  transition: transform .35s var(--ease);
}
.appmodal.open .appmodal__card { transform: none; }

.appmodal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: var(--silver);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background .3s, color .3s;
}
.appmodal__close:hover { background: rgba(255,255,255,.12); color: var(--white); }

.appmodal__eyebrow {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 30px);
  letter-spacing: .1em;
  color: var(--white);
  margin-bottom: 8px;
}

.appmodal__text {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--silver);
  margin-bottom: 26px;
}

.appmodal__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.appmodal__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 14px;
  border: 1px solid rgba(242,240,235,.18);
  border-radius: var(--radius);
  color: var(--white);
  text-decoration: none;
  transition: background .3s, border-color .3s;
}
.appmodal__option:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(242,240,235,.45);
}

.appmodal__option-name {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.appmodal__option-store {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 300;
  color: var(--silver);
}

@media (max-width: 420px) {
  .appmodal__options { grid-template-columns: 1fr; }
  .appmodal__option { flex-direction: row; justify-content: center; gap: 12px; padding: 16px; }
}


/* ══════════ HERO CON FOTO ══════════ */
/* Reutiliza la colocacion de .hero__video; aqui solo se fija el
   tamano para que la foto cubra todo el hero sin deformarse */
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;   /* centra al corredor */
}


/* ══════════ SEDE & CONTATTI ENTRE DOS ZONAS BLANCAS ══════════ */
/* Antes venia despues de otra seccion negra y no necesitaba margen
   arriba. Ahora va entre las tarjetas y las resenas (ambas en blanco)
   y sin padding el mapa quedaba pegado al borde. */
.mappa {
  padding-top: 110px;
  padding-bottom: 110px;
}

@media (max-width: 768px) {
  .mappa {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}


/* Las resenas ya no siguen a otra seccion blanca, sino al mapa negro:
   necesitan su propio aire arriba */
.reviews { padding-top: 110px; }
@media (max-width: 768px) {
  .reviews { padding-top: 70px; }
}


/* ══════════════════════════════════════════════════════════════
   FOTOS DE LAS TARJETAS
   Todas salen de imagenes/web/: son copias comprimidas de los
   originales (48 MB -> 1,8 MB). Los originales no se usan en la web.
   Las tarjetas sin foto todavia mantienen su degradado de color.
   ══════════════════════════════════════════════════════════════ */
.services__img,
.spaces__img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Carrusel de la home — background-position centra al sujeto
   cuando la foto es horizontal y la tarjeta vertical */
.services__img--1 { background-image: url('../imagenes/web/COPIA.jpg');  }                                   /* CHI SIAMO */
.services__img--2 { background-image: url('../imagenes/web/pt-kate.jpg'); background-position: 60% center; } /* PERSONAL TRAINING */
.services__img--3 { background-image: url('../imagenes/web/chica-ordenador.jpg'); }                           /* ONLINE COACHING */
.services__img--4 { background-image: url('../imagenes/web/preparazione-coach.jpg'); background-position: 55% center; } /* PREPARAZIONE ATLETICA */
.services__img--5 { background-image: url('../imagenes/web/combat-boxe.jpg'); background-position: 60% 55%; } /* COMBAT TRAINING */

/* Tarjetas de los espacios */
.spaces__img--1 { background-image: url('../imagenes/web/ensalada.jpg'); }                           /* NUTRIZIONE */
.spaces__img--2 { background-image: url('../imagenes/web/massaggi.jpg'); }                                 /* MASSAGGI & RECOVERY */
/* .spaces__img--3  RHYZO       -> pendiente */
.spaces__img--3 { background-image: url('../imagenes/web/comida.jpg'); background-position: 50% 40%; }
/* .spaces__img--4  +WATT       -> pendiente */
.spaces__img--4 { background-image: url('../imagenes/web/pastillas-chica.jpg'); background-position: 50% 40%; } /* ESPACIOS */


/* ══════════ FOTO GRANDE DE LA ZONA BLANCA ══════════ */
.foto-esterno__placeholder {
  background: url('../imagenes/web/sala-finestre.jpg') center 60% / cover no-repeat;
  border: none;
}
.foto-esterno__label { display: none; }


/* ══════════ HOVER CON FOTO REAL ══════════ */
/* Con fotos claras la capa oscura necesita algo mas de fuerza para
   que la frase se lea bien encima */
.card-overlay {
  background: rgba(8, 8, 8, 0.7);
}


/* Chi Siamo: el texto va siempre encima de la foto, asi que la capa
   oscura tiene que ser mas fuerte que con los antiguos degradados */
.about-grid--cards .about-card--image .about-card__overlay {
  background: rgba(0, 0, 0, 0.66);
}
.about-grid--cards .about-card--image:hover .about-card__overlay {
  background: rgba(0, 0, 0, 0.75);
}


/* ══════════════════════════════════════════════════════════════
   AJUSTES FINALES
   ══════════════════════════════════════════════════════════════ */

/* ── Logo de la cabecera ── */
.nav__logo-img {
  height: 34px;
  width: auto;
  display: block;
}
@media (max-width: 768px) {
  .nav__logo-img { height: 26px; }
}

/* ── La frase de la portada, un poco mas abajo ── */
.hero__content {
  transform: translateY(-30px);
}

/* ── Los anclajes (#servizi, #contatti...) dejaban la seccion pegada
      arriba y tapada por la cabecera fija ── */
html {
  scroll-padding-top: 150px;
}

/* ── Carrusel: flecha para retroceder ── */
.services__nav--prev {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--gold, #f2f0eb);
  background: rgba(0, 0, 0, 0.5);
  color: var(--gold, #f2f0eb);
  font-size: 20px;
  cursor: pointer;
  z-index: 5;
  transition: background 0.3s, color 0.3s;
}
.services__nav--prev:hover {
  background: var(--gold, #f2f0eb);
  color: #000;
}

/* El desplazamiento tambien va algo mas rapido */
.services__track {
  transition: transform 0.55s var(--ease);
}

/* ── Texto de las tarjetas: que no llegue al borde ── */
.card-overlay {
  padding: 32px 22px 84px;
}
.card-overlay__text {
  max-width: 68%;
}

/* ── Las 4 tarjetas de abajo: carrusel horizontal en pantallas
      estrechas, en vez de apilarse una debajo de otra ── */
/* (El carrusel de los espacios ahora funciona igual que el de arriba:
   ver el bloque CARRUSEL DE LOS ESPACIOS al final del archivo) */

/* ── Footer negro con una linea sutil que lo separa ── */
.footer {
  background: var(--black);
  border-top: 1px solid rgba(242, 240, 235, 0.12);
}


/* El logo del footer va algo mas pequeno que el de la cabecera */
.footer__logo-img {
  height: 30px;
  width: auto;
  display: block;
  /* .footer__brand es flex en columna: sin esto el navegador estira
     el ancho del logo hasta ocupar toda la columna */
  align-self: flex-start;
  margin-bottom: 4px;
}


/* ══════════════════════════════════════════════════════════════
   CARRUSEL DE LOS ESPACIOS
   Misma mecanica que el de los servicios: pista que se desplaza
   dentro de una ventana, con flechas a los lados.
   ══════════════════════════════════════════════════════════════ */
.spaces__carousel {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
}

.spaces__viewport {
  overflow: hidden;
}

.spaces__grid {
  display: flex;
  grid-template-columns: none;
  gap: 16px;
  max-width: none;
  transition: transform 0.55s var(--ease);
  will-change: transform;
}

/* 4 tarjetas visibles restando los 3 huecos de 16px */
.spaces__card {
  flex: 0 0 calc((100% - 48px) / 4);
}

@media (max-width: 1100px) {
  .spaces__card { flex-basis: calc((100% - 16px) / 2); }   /* 2 visibles */
}

@media (max-width: 680px) {
  .spaces__card { flex-basis: 100%; }                      /* 1 visible */
}

/* Las flechas de este carrusel, sobre fondo blanco */
.spaces__carousel .services__nav--prev,
.spaces__carousel .services__nav--next {
  border-color: rgba(8, 8, 8, 0.35);
  background: rgba(255, 255, 255, 0.85);
  color: var(--black);
}
.spaces__carousel .services__nav--prev:hover,
.spaces__carousel .services__nav--next:hover {
  background: var(--black);
  color: var(--white);
}


/* ══════════ CHI SIAMO: lectura sobre las fotos ══════════ */
/* Capa mas opaca para que el texto se lea con claridad */
.about-grid--cards .about-card--image .about-card__overlay {
  background: rgba(0, 0, 0, 0.78);
}
.about-grid--cards .about-card--image:hover .about-card__overlay {
  background: rgba(0, 0, 0, 0.84);
}

/* La foto de la tarjeta 02 se ve mas de cerca */
.about-grid--cards .about-card--image:nth-child(2) {
  background-size: auto 145%;
  background-position: 58% center;
}


/* ══════════ FOOTER ALINEADO CON EL RESTO DE LA PAGINA ══════════ */
/* Se le da la misma caja que a .mappa (1400px centrados con 40px de
   padding dentro) para que el logo arranque en la misma vertical que
   el titulo CONTATTI & SEDE de arriba */
.footer {
  padding-left: 0;
  padding-right: 0;
}

.footer__top,
.footer__bottom {
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}

/* En el carrusel de los espacios se ven 3 tarjetas y media asoma la
   cuarta, igual que arriba: asi el desplazamiento se nota */
.spaces__card {
  flex-basis: calc((100% - 32px) / 3);
}

@media (max-width: 1100px) {
  .spaces__card { flex-basis: calc((100% - 16px) / 2); }
}

@media (max-width: 680px) {
  .spaces__card { flex-basis: 100%; }
}


/* ══════════════════════════════════════════════════════════════
   FRANJA DE ANUNCIO
   Va fija justo debajo de la cabecera, que tambien es fija.
   --topbar-h la usan .page-hero y el scroll de los anclajes para
   no quedarse escondidos detras.
   ══════════════════════════════════════════════════════════════ */
:root { --topbar-h: 46px; }

.topbar {
  /* Va en el flujo normal, no fija: se desplaza con la pagina y
     desaparece al bajar. El margen superior la separa de la
     cabecera, que si es fija y no ocupa espacio. */
  margin-top: var(--nav-h);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 24px;
  background: var(--white);
  color: var(--black);
  text-align: center;
}

.topbar__text {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: .02em;
  color: #1a1a1a;
  margin: 0;
}

.topbar__btn {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity .3s;
}
.topbar__btn:hover { opacity: .6; }

/* Las paginas internas empiezan mas abajo para no quedar tapadas */
/* Las paginas internas no llevan franja, asi que mantienen su margen
   original bajo la cabecera */
.page-hero {
  padding-top: calc(var(--nav-h) + 60px);
}

/* Los anclajes tambien tienen que contar con la franja */
html {
  scroll-padding-top: 150px;
}

@media (max-width: 860px) {
  :root { --topbar-h: 76px; }
  .topbar {
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
  }
  .topbar__text { font-size: 12px; line-height: 1.4; }
  .topbar__btn { font-size: 12px; }
}

@media (max-width: 420px) {
  :root { --topbar-h: 92px; }
}


/* ══════════ FOOTER: REPARTO DE LAS COLUMNAS ══════════ */
/* Izquierda el logo (alineado con el titulo de la seccion de arriba),
   en medio NAVIGAZIONE y SEGUICI, y CONTATTI pegado a la derecha para
   que caiga bajo el mapa. */
.footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  grid-template-columns: none;
}

.footer__links {
  display: flex;
  gap: 60px;
}

@media (max-width: 900px) {
  .footer__top {
    gap: 40px 30px;
  }
  .footer__links {
    gap: 40px;
  }
}


/* El bloque de texto del mapa lleva 40px de padding propio, asi que el
   logo del footer necesita los mismos 40px para quedar en la misma
   vertical que el titulo SEDE & CONTATTI */
.footer__brand {
  padding-left: 40px;
}

@media (max-width: 900px) {
  .footer__brand { padding-left: 0; }
}


/* ══════════════════════════════════════════════════════════════
   BLOQUE DE VIDEO (Chi Siamo)
   Video vertical 9:16 a la derecha y texto a la izquierda.
   ══════════════════════════════════════════════════════════════ */
.video-block {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 340px);
  align-items: center;
  gap: 60px;
  margin: 100px 0 90px;
}

.video-block__eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: 16px;
}

.video-block__title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 300;
  line-height: 1.2;
  color: var(--white);
  margin-bottom: 20px;
}

.video-block__desc {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--silver);
  max-width: 460px;
}

.video-block__player {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--charcoal);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
}

.video-block__video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--black);
}

@media (max-width: 900px) {
  .video-block {
    grid-template-columns: 1fr;
    gap: 34px;
    margin: 70px 0 60px;
    justify-items: center;
    text-align: center;
  }
  .video-block__desc { margin: 0 auto; }
  .video-block__player { width: min(320px, 100%); }
}


/* ══════════ ENLACE DE LA APP EN EL BLOQUE DE MARCA DEL FOOTER ══════════ */
.footer__brand-app {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 300;
  line-height: 20px;
  color: var(--silver);
  transition: color .3s;
}
.footer__brand-app:hover { color: var(--white); }
.footer__brand-app svg { flex-shrink: 0; }


/* ══════════ FOTO DE PORTADA EN MOVIL ══════════ */
/* La foto es horizontal y la pantalla del movil vertical: sin esto el
   recorte se come el edificio y el cartel de OAZA. */
@media (max-width: 900px) {
  .hero__img {
    /* El cartel de OAZA esta centrado en el 62% del ancho de la foto;
       con el recorte vertical del movil, el 70% lo deja en el centro */
    object-position: 70% center;
  }
}


/* ══════════════════════════════════════════════════════════════
   RECENSIONI QUE SE ALTERNAN
   Todas las citas ocupan la misma posicion; solo la que lleva
   .is-active es visible. El cambio es un fundido.
   ══════════════════════════════════════════════════════════════ */
.quotes {
  position: relative;
  margin: 8px auto 26px;
  max-width: 680px;
}

.quotes__item {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .8s var(--ease), transform .8s var(--ease), visibility .8s;
}

.quotes__item.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.quotes__text {
  font-family: var(--font-serif);
  font-size: clamp(19px, 2vw, 25px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.55;
  color: var(--black);
  margin: 0 0 18px;
}

/* Comillas decorativas */
.quotes__text::before { content: '\201C'; }
.quotes__text::after  { content: '\201D'; }

.quotes__author {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #4a4a4a;
}

.quotes__author span {
  font-weight: 300;
  letter-spacing: .06em;
  text-transform: none;
  color: #8a8a8a;
}

/* Puntitos de navegacion */
.quotes__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 40px;
}

.quotes__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(8, 8, 8, .2);
  cursor: pointer;
  transition: background .3s, transform .3s;
}

.quotes__dot.is-active {
  background: var(--black);
  transform: scale(1.35);
}

@media (max-width: 768px) {
  .quotes { margin-bottom: 20px; }
  .quotes__dots { margin-bottom: 30px; }
}


/* ══════════════════════════════════════════════════════════════
   GALERIA EN MOVIMIENTO CONTINUO
   Sustituye a la foto grande de la zona blanca. Las fotos van
   pegadas, sin separacion, y la pista se mueve sola. Como el
   contenido esta duplicado, al recorrer una tanda entera vuelve
   al inicio en la misma posicion: no hay rebobinado visible.
   ══════════════════════════════════════════════════════════════ */
.galleria {
  background: var(--white);
  padding: 0 40px 40px;
}

.galleria__viewport {
  max-width: 1400px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius);
}

.galleria__track {
  display: flex;
  width: max-content;
  /* Arranca desplazada media pista para poder avanzar hacia la derecha */
  animation: galleria-scroll 75s linear infinite;
}

@keyframes galleria-scroll {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.galleria__item {
  flex: 0 0 auto;
  width: 350px;            /* 4 fotos en 1400px, sin huecos */
  height: 500px;
  margin: 0;
  overflow: hidden;
}

.galleria__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1100px) {
  .galleria { padding: 0 24px 30px; }
  .galleria__item { width: 300px; height: 400px; }
}

@media (max-width: 680px) {
  .galleria__item { width: 220px; height: 300px; }
  .galleria__track { animation-duration: 55s; }
}

/* Respeta a quien pide menos animaciones en el sistema */
@media (prefers-reduced-motion: reduce) {
  .galleria__track { animation: none; transform: translateX(-50%); }
}


/* ══════════════════════════════════════════════════════════════
   PAGINA GALLERIA: MOSAICO
   Columnas de altura libre (estilo mamposteria) para que cada foto
   conserve su proporcion, en vertical o en horizontal.
   ══════════════════════════════════════════════════════════════ */
.mosaico {
  background: var(--black);
  padding: 20px 40px 120px;
}

.mosaico__grid {
  max-width: 1400px;
  margin: 0 auto;
  columns: 3;
  column-gap: 14px;
}

.mosaico__item {
  display: block;
  width: 100%;
  margin: 0 0 14px;
  padding: 0;
  border: none;
  background: none;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  break-inside: avoid;
  position: relative;
}

.mosaico__item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .6s var(--ease), filter .4s var(--ease);
}

.mosaico__item:hover img {
  transform: scale(1.04);
  filter: brightness(.75);
}

@media (max-width: 1000px) { .mosaico__grid { columns: 2; } }
@media (max-width: 600px)  {
  .mosaico { padding: 10px 20px 80px; }
  .mosaico__grid { columns: 1; }
}


/* ══════════════════════════════════════════════════════════════
   VISOR DE FOTOS (lightbox)
   ══════════════════════════════════════════════════════════════ */
.visor {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 70px 80px;
  background: rgba(6, 6, 6, .94);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s var(--ease);
}

.visor.open {
  opacity: 1;
  visibility: visible;
}

.visor__figura {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.visor__img {
  max-width: 100%;
  max-height: calc(100vh - 140px);
  width: auto;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}

.visor__close,
.visor__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(242, 240, 235, .3);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: var(--white);
  cursor: pointer;
  transition: background .3s, color .3s, border-color .3s;
}

.visor__close:hover,
.visor__nav:hover {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

.visor__close {
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  font-size: 24px;
  line-height: 1;
}

.visor__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font-size: 20px;
}
.visor__nav--prev { left: 20px; }
.visor__nav--next { right: 20px; }

.visor__contador {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--silver);
  margin: 0;
}

@media (max-width: 700px) {
  .visor { padding: 60px 12px 70px; }
  .visor__img { max-height: calc(100vh - 150px); }
  .visor__nav { width: 42px; height: 42px; }
  .visor__nav--prev { left: 8px; }
  .visor__nav--next { right: 8px; }
}

/* El carrete de la home es ahora un enlace a la galeria */
a.galleria__item { cursor: pointer; }


/* ══════════════════════════════════════════════════════════════
   BOTON DE WHATSAPP
   Burbuja fija abajo a la izquierda y ventanita de chat.
   ══════════════════════════════════════════════════════════════ */
.wa {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

/* Si el banner de cookies esta en pantalla, se aparta hacia arriba */
body.con-cookie-banner .wa {
  bottom: 140px;
}

/* ── La burbuja ── */
.wa__btn {
  width: 58px;
  height: 58px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.wa__btn svg { width: 32px; height: 32px; }

.wa__btn:hover {
  transform: scale(1.06);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}

/* ── La ventanita ── */
.wa__panel {
  order: -1;                       /* va encima de la burbuja */
  width: 320px;
  max-width: calc(100vw - 48px);
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.96);
  transform-origin: bottom left;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}

.wa.open .wa__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.wa__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: #075E54;
  color: #fff;
}

.wa__avatar {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wa__avatar svg { width: 22px; height: 22px; }

.wa__head-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  flex: 1;
}

.wa__head-txt strong {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
}

.wa__head-txt span {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 300;
  color: rgba(255, 255, 255, .75);
}

.wa__close {
  border: none;
  background: none;
  color: rgba(255, 255, 255, .8);
  font-size: 22px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: color .3s;
}
.wa__close:hover { color: #fff; }

.wa__body {
  padding: 20px 18px;
  background: #ECE5DD;
}

/* Burbuja de mensaje, con el piquito a la izquierda */
.wa__bubble {
  position: relative;
  margin: 0;
  padding: 12px 14px;
  background: #fff;
  border-radius: 2px 12px 12px 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: #2a2a2a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.wa__bubble::before {
  content: '';
  position: absolute;
  top: 0;
  left: -7px;
  border: 7px solid transparent;
  border-top-color: #fff;
  border-right: 0;
}

.wa__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px;
  background: #25D366;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .3s;
}
.wa__cta:hover { background: #1da851; }
.wa__cta svg { width: 18px; height: 18px; }

@media (max-width: 600px) {
  .wa { left: 16px; bottom: 16px; }
  body.con-cookie-banner .wa { bottom: 190px; }
  .wa__btn { width: 52px; height: 52px; }
  .wa__btn svg { width: 28px; height: 28px; }
}


/* ══════════════════════════════════════════════════════════════
   CINTA DE LOGOS DEL HERO
   Franja decorativa pegada al borde inferior de la foto de portada.
   Los logos se desplazan hacia la derecha sin fin: la pista lleva la
   misma tanda dos veces, asi que al completar un ciclo vuelve al
   inicio en la misma posicion y el salto no se ve.
   ══════════════════════════════════════════════════════════════ */
.hero__cinta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  overflow: hidden;
  padding: 14px 0;
  pointer-events: none;      /* decorativa: no estorba al cursor */
  /* Velo muy suave para que los logos se lean sobre cualquier foto */
  background: linear-gradient(to top, rgba(8,8,8,.45), rgba(8,8,8,0));
}

.hero__cinta-track {
  display: flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  animation: cinta-scroll 40s linear infinite;
}

@keyframes cinta-scroll {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.hero__cinta-track img {
  height: 20px;
  width: auto;
  flex-shrink: 0;
  opacity: .55;
}

@media (max-width: 768px) {
  .hero__cinta { padding: 10px 0; }
  .hero__cinta-track { gap: 5px; animation-duration: 30s; }
  .hero__cinta-track img { height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__cinta-track { animation: none; transform: translateX(-50%); }
}


/* ══════════ FOOTER: COLUMNAS A DISTANCIAS IGUALES ══════════ */
/* Las tres primeras columnas reparten el ancho en partes iguales y la
   ultima ocupa solo lo que mide su texto, quedando pegada al borde
   derecho del contenedor (la misma vertical donde termina el mapa).
   Con esto las cuatro columnas arrancan a la misma distancia una de
   otra y el correo mas largo no se pasa de esa linea. */
.footer__top {
  display: grid;
  grid-template-columns: repeat(3, 1fr) max-content;
  align-items: start;
  gap: 40px;
}

@media (max-width: 900px) {
  .footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 40px 30px;
  }
}

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


/* ══════════════════════════════════════════════════════════════
   MENU LATERAL POR ENCIMA DE LOS ELEMENTOS FLOTANTES
   El menu estaba en z-index 200, por debajo del boton de WhatsApp
   (9000) y del banner de cookies (9999): los dos quedaban por encima
   de los enlaces del final del menu y se tragaban los clics.
   ══════════════════════════════════════════════════════════════ */
.mobile-menu__overlay { z-index: 10000; }
.mobile-menu         { z-index: 10001; }

/* Mientras el menu esta abierto, el boton de WhatsApp y el banner de
   cookies se apartan: no tienen que competir con el. */
body:has(.mobile-menu.open) .wa,
body:has(.mobile-menu.open) .cookie-banner {
  opacity: 0;
  pointer-events: none;
}


/* Datos societarios en el pie */
.footer__legal {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: .02em;
  color: rgba(200, 200, 200, .45);
  margin-top: 4px;
}


/* El boton flotante de WhatsApp se queda fijo abajo a la izquierda, asi
   que el pie necesita espacio por debajo para que no tape la ultima
   linea cuando se llega al final de la pagina. */
.footer {
  padding-bottom: 100px;
}

@media (max-width: 600px) {
  .footer { padding-bottom: 86px; }
}


/* ══════════════════════════════════════════════════════════════
   BOTON "ENTRA NEL CLUB" TAMBIEN EN MOVIL
   La plantilla lo ocultaba por debajo de 480px. Se recupera
   ajustando el logo y el propio boton para que quepan los tres
   elementos sin solaparse (el logo va centrado en absoluto).
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .nav { padding: 0 16px; }
  .nav__logo-img { height: 22px; }
  .nav__cta {
    display: inline-block;
    font-size: 8px;
    letter-spacing: .08em;
    padding: 8px 12px;
    white-space: nowrap;
  }
}

@media (max-width: 400px) {
  .nav { padding: 0 12px; }
  .nav__logo-img { height: 18px; }
  .nav__cta { font-size: 7.5px; letter-spacing: .04em; padding: 7px 9px; }
}

@media (max-width: 345px) {
  .nav__logo-img { height: 16px; }
  .nav__cta { font-size: 7px; letter-spacing: .02em; padding: 6px 7px; }
}