* { box-sizing: border-box; }
body { margin: 0; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* Fuente RF Dewi (coloca tus archivos en assets/fonts/) */
@font-face {
  font-family: 'RF Dewi';
  src: url('../fonts/RFDewi-Bold.woff2') format('woff2'),
       url('../fonts/RFDewi-Bold.woff') format('woff');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

/* Nav (barra superior crema) */
.nav { position: sticky; top: 0; z-index: 10; height: 61px; background: #FAEDE1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 30px; font-family: 'RF Dewi', 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.nav-left { display: flex; align-items: center; gap: 10px; }
.nav-ico { width: 32px; height: 32px; object-fit: contain; display: inline-block; }
.nav-center { display: flex; gap: 24px; justify-content: center; }
.nav-link { text-decoration: none; color: #00455B; font-weight: 800; letter-spacing: 0.5px; font-size: 22px; text-transform: uppercase; padding: 16px 14px; border-radius: 10px; font-family: 'RF Dewi', 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.nav-right { display: flex; gap: 15px; justify-content: flex-end; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 34px; border-radius: 0; font-weight: 800; font-size: 18px; letter-spacing: 0.5px; text-transform: uppercase; text-decoration: none; box-shadow: 0 4px 14px rgba(255,255,255,0.15); font-family: 'RF Dewi', 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.btn-outline { color: #00455B; border: 1px solid #00455B; background: transparent; }
.btn-primary { color: #FAEDE1; background: #00455B; }

/* Hero */
.hero { position: relative; height: calc(100vh - 61px); min-height: 851px; background: url('../img/hero.jpg') center/cover no-repeat #000; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(250,237,225,0.8) 0%, rgba(0,0,0,0.35) 35%, rgba(0,0,0,0.6) 100%); }
.hero-center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.hero-logo-img { width: min(520px, 70%); height: auto; filter: drop-shadow(0 4px 18px rgba(0,0,0,0.45)); }

/* Strip section */
.strip { position: relative; background: #00455B url('../img/strip-pattern.svg') center/180px repeat; color: #fff; padding: 48px 0; overflow: hidden; }
.strip::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(1200px 400px at 50% -200px, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 60%); mix-blend-mode: soft-light; opacity: 0.6; }
.strip-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; text-align: center; }
.strip-title { margin: 0; font-size: 32px; letter-spacing: 2px; text-transform: uppercase; font-family: 'RF Dewi', 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.strip-desc { margin: 12px auto 24px; max-width: 950px; font-size: 18px; }
.strip-cta { display: flex; gap: 15px; justify-content: center; }
.btn-white { background: #fff; color: #00455B; }
.btn-outline-white { background: transparent; color: #fff; border: 1px solid #fff; }

/* Sección callout con imagen de fondo (Figma 8991:152055) */
.callout {
  position: relative;
  height: 770px;
  color: #fff;
  background-image: linear-gradient(to left, rgba(0,69,91,1), rgba(0,69,91,0)), url('../img/image-7.jpg');
  background-size: auto, cover;
  background-position: 0% 0%, 50% 50%;
}
.callout-inner { position: absolute; inset: 0; display: grid; align-content: center; justify-items: start; padding: 0 24px 0 97px; text-align: left; }
.callout-title { margin: 0 0 12px; font-size: 32px; letter-spacing: 2px; text-transform: uppercase; font-family: 'RF Dewi', 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; width: 601px; }
.callout-desc { margin: 0 0 24px; max-width: 583px; font-size: 18px; }
.callout-cta { display: flex; gap: 15px; justify-content: flex-start; }
.btn-invert { background: #fff; color: #00455B; }
.btn-outline-invert { background: transparent; color: #fff; border: 1px solid #fff; }
.callout-cta .btn { height: 60px; padding: 0 34px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; text-transform: uppercase; }
.btn-menu-narrow { min-width: 143px; }
.btn-reserve-wide { min-width: 188px; }

@media (max-width: 900px) {
  .nav { grid-template-columns: 1fr auto; gap: 12px; }
  .nav-center { display: none; }
  .hero-logo { font-size: 38px; }
  .hero-logo .emblema { width: 64px; height: 64px; }
}

/* Ubicaciones */
.locations { background: #FAEDE1; padding: 56px 0; }
.locations-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(2,1fr); gap: 32px; }
.location { display: grid; gap: 12px; text-align: center; color: #00455B; }
.location .photo { width: 100%; height: 520px; background-size: cover; background-position: center; box-shadow: 0 6px 24px rgba(0,0,0,0.12); }
.location h3 { margin: 0; font-size: 22px; font-family: 'RF Dewi', 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.location p { margin: 0 0 8px; font-size: 18px; }
.location .loc-cta { display: flex; justify-content: center; }
.btn-loc { background: #00455B; color: #FAEDE1; height: 60px; padding: 0 34px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; text-transform: uppercase; }

@media (max-width: 900px) {
  .locations-inner { grid-template-columns: 1fr; }
  .location .photo { height: 380px; }
}

@media (max-width: 900px) {
  .callout-inner { justify-items: center; padding: 0 24px; text-align: center; }
  .callout-title { width: auto; }
  .callout-desc { max-width: 95%; }
}

/* CLUB 7 MARES (Figma 8991:152014) */
.club { background: #00455B; color: #F1EEE5; padding: 0; }
.club-inner { width: 100%; margin: 0; }
/* Encabezado con textura */
.club-header { position: relative; background: #00455B url('../img/strip-pattern.svg') center/180px repeat; padding: 72px 0 56px; text-align: center; }
.club-header::before { content: ""; position: absolute; inset: 0; background: radial-gradient(1200px 400px at 50% -200px, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 60%); mix-blend-mode: soft-light; opacity: 0.6; }
.club-title { position: relative; margin: 0; font-size: 43px; letter-spacing: 2px; text-transform: uppercase; font-family: 'RF Dewi', 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.club-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.club-tile { position: relative; height: 784px; background-size: cover; background-position: center; }
.club-tile::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.club-tile .tile-title { position: absolute; left: 50%; top: 38%; transform: translateX(-50%); margin: 0; color: #F1EEE5; font-size: 43px; text-transform: uppercase; text-align: center; font-family: 'RF Dewi', 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; padding: 0 16px; z-index: 1; }
.club-tile .tile-cta { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); background: #fff; color: #00455B; height: 60px; padding: 0 34px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; text-transform: uppercase; text-decoration: none; min-width: 188px; box-shadow: 0 4px 14px rgba(255,255,255,0.15); z-index: 1; }

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

/* Sección final con logo sobre imagen (Figma 9010:152136) */
.final { position: relative; height: 770px; background: url('../img/image-8.jpg') center/cover no-repeat; }
.final::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.37); }
.final-inner { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 24px; }
.final-inner img { width: 549px; max-width: 80%; height: auto; filter: drop-shadow(0 0 13px rgba(0,0,0,0.8)); }
.final-cta { display: flex; gap: 15px; }
.btn-final { height: 60px; min-width: 233px; padding: 0 34px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; text-transform: uppercase; }
.btn-final-outline { color: #fff; border: 1px solid #fff; background: transparent; }
.btn-final-filled { color: #00455B; background: #fff; }

/* Sección contacto/ubicaciones (Figma 8991:152057) */
.contact { display: grid; grid-template-columns: 1fr 1fr; height: 784px; }
.contact-left { position: relative; background: #00455B url('../img/strip-pattern.svg') center/180px repeat; color: #F1EEE5; padding: 0 24px 0 97px; display: grid; align-content: center; }
.contact-left::before { content: ""; position: absolute; inset: 0; background: radial-gradient(1200px 400px at 50% -200px, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 60%); mix-blend-mode: soft-light; opacity: 0.6; }
.contact-inner { position: relative; max-width: 557px; }
.contact-title { margin: 0 0 12px; font-size: 32px; letter-spacing: 1px; text-transform: uppercase; font-family: 'RF Dewi', 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.contact-sub { margin: 0 0 6px; font-size: 18px; }
.contact-hr { height: 1px; background: #F1EEE5; opacity: 0.6; margin: 10px 0 18px; }
.contact-desc { margin: 0 0 18px; font-size: 18px; }
.contact-cta { display: flex; }
.btn-contact { background: #fff; color: #00455B; height: 60px; padding: 0 34px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; text-transform: uppercase; min-width: 306px; }
.contact-right { background: url('../img/image-9.jpg') center/cover no-repeat; }

/* Footer (Figma 8991:152071) */
.footer { background: #222222; color: #F1EEE5; height: 218px; display: grid; align-items: center; }
.footer-inner { max-width: 1440px; margin: 0 auto; padding: 0 97px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.footer-logo { width: 344px; max-width: 60%; height: auto; background: none; }
.footer-copy { justify-self: end; text-align: right; font-size: 18px; font-weight: 500; font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif; }

@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr; gap: 12px; padding: 24px; text-align: center; }
  .footer-copy { justify-self: center; text-align: center; font-size: 16px; }
}