/* =========================================================
   clubdenovias.mx — Landing
   Medidas tomadas del diseño en Figma (frame de 1440px).
   Secciones a todo el ancho; --u convierte 1px del diseño a un
   tamaño fijo de pantalla de computadora (no crece con monitores grandes).
   ========================================================= */

:root {
  --navy: #343359;
  --cream: #FAF6F2;
  --sand: #DFD1C6;
  --sky: #CFE4FF;
  --white: #FFFFFF;
  --ink: #111111;
  --nav-gray: #D9D9D9;

  --serif: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --u: clamp(0.5px, calc(100vw / 1600), 0.62px);
  --nav-h: calc(107 * var(--u));
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, p, blockquote, figure, ul { margin: 0; padding: 0; }
ul { list-style: none; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

.page { position: relative; }
main section { scroll-margin-top: var(--nav-h); }

/* ============ NAV ============ */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  padding: 0 calc(52 * var(--u)) 0 calc(62 * var(--u));
  background: #C9C9C9;
  border-bottom: 1px solid #000;
  transition: background-color .35s, border-color .35s;
}
.nav.is-scrolled {
  background: rgba(201, 201, 201, .55);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  border-bottom-color: rgba(0, 0, 0, .25);
}
.nav__logo {
  font-size: calc(31 * var(--u));
  font-weight: 400;
  letter-spacing: .01em;
  color: #1a1a1a;
}
.nav__links {
  display: flex;
  gap: calc(68 * var(--u));
  margin-left: calc(150 * var(--u));
}
.nav__links a {
  font-size: calc(24 * var(--u));
  color: #1f1f1f;
  letter-spacing: .01em;
  transition: opacity .2s;
}
.nav__links a:hover { opacity: .6; }
.nav__access {
  margin-left: auto;
  font-size: calc(25 * var(--u));
  padding: 0 calc(10 * var(--u)) calc(2 * var(--u));
  border-bottom: 2px solid #1a1a1a;
  color: #1a1a1a;
  transition: opacity .2s;
}
.nav__access:hover { opacity: .65; }
.nav__burger { display: none; }

/* ============ HERO ============ */
.hero {
  position: relative;
  height: max(480px, min(calc(100vw * 1834 / 2884), calc(100svh - var(--nav-h))));
  background: #8f8a86 url("assets/hero.jpg") 50% 30% / cover no-repeat;
  color: var(--white);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(40,38,48,.18) 0%, rgba(40,38,48,0) 55%);
  pointer-events: none;
}
.hero__content {
  position: absolute;
  left: calc(48 * var(--u));
  top: 31.7%;
}
.hero__eyebrow {
  position: relative;
  padding-left: calc(84 * var(--u));
  max-width: calc(700 * var(--u));
  font-size: calc(21.5 * var(--u));
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .32em;
  text-transform: uppercase;
}
.hero__eyebrow-line {
  position: absolute;
  left: 0; top: .7em;
  width: calc(70 * var(--u));
  height: 1px;
  background: currentColor;
}
.hero__title {
  margin-top: calc(48 * var(--u));
  margin-left: calc(23 * var(--u));
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(132 * var(--u));
  line-height: .9;
  text-transform: uppercase;
  letter-spacing: -.005em;
}
.hero__title span { display: block; }
.hero__title-2 { padding-left: calc(68 * var(--u)); }
.hero__title em { font-style: italic; }

.hero__aside {
  position: absolute;
  right: calc(50 * var(--u));
  top: 58.7%;
  width: calc(345 * var(--u));
  padding: calc(30 * var(--u)) 0 calc(42 * var(--u)) calc(13 * var(--u));
  border-left: 1px solid rgba(255,255,255,.9);
  font-size: calc(22 * var(--u));
  line-height: 1.2;
  text-align: justify;
  hyphens: none;
}

/* ============ BIENVENIDA ============ */
.welcome {
  position: relative;
  min-height: calc(1000 * var(--u));
  padding: calc(182 * var(--u)) calc(48 * var(--u)) calc(180 * var(--u)) calc(48 * var(--u));
  background: var(--cream);
}
.welcome__kicker {
  font-size: calc(34.5 * var(--u));
  line-height: 1.12;
}
.welcome__body {
  max-width: calc(1050 * var(--u));
  margin-left: calc(345 * var(--u));
  margin-top: calc(28 * var(--u));
}
.welcome__title {
  max-width: calc(700 * var(--u));
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(94 * var(--u));
  line-height: .96;
  padding-bottom: calc(18 * var(--u));
}
.welcome__head { border-bottom: 1px solid #222; }
.welcome__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(28 * var(--u));
  margin-top: calc(30 * var(--u));
}
.welcome__cols p {
  text-align: justify;
  hyphens: auto;
  font-size: calc(33 * var(--u));
  font-weight: 400;
  line-height: 1.13;
  color: #1a1a1a;
}

/* ============ EQUIPO ============ */
.team {
  background: var(--navy);
  color: var(--white);
  padding: calc(48 * var(--u)) calc(48 * var(--u)) calc(52 * var(--u)) calc(50 * var(--u));
}
.team__head {
  display: grid;
  grid-template-columns: calc(685 * var(--u)) 1fr;
  align-items: start;
}
.team__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(72 * var(--u));
  line-height: 1.02;
}
.team__intro {
  text-align: justify;
  hyphens: auto;
  max-width: calc(660 * var(--u));
  padding-top: calc(26 * var(--u));
  font-size: calc(25.5 * var(--u));
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: .005em;
}
.team__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(33 * var(--u));
  row-gap: calc(32 * var(--u));
  margin-top: calc(118 * var(--u));
}
.team__grid li { border-top: 1px solid rgba(255,255,255,.85); border-bottom: 1px solid rgba(255,255,255,.85); }
.team__grid a {
  display: flex;
  align-items: center;
  height: calc(88 * var(--u));
  padding-left: calc(173 * var(--u));
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(34.5 * var(--u));
  line-height: .98;
  text-transform: uppercase;
  letter-spacing: .01em;
  transition: background-color .25s, padding-left .25s;
}
.team__grid li:nth-child(even) a { padding-left: calc(178 * var(--u)); }
.team__grid a:hover { background: rgba(255,255,255,.06); }
.team__foot {
  text-align: center;
  width: fit-content;
  max-width: calc(720 * var(--u));
  margin: calc(40 * var(--u)) auto 0;
  padding: 0 calc(10 * var(--u)) calc(4 * var(--u));
  border-bottom: 1px solid rgba(255,255,255,.85);
  font-size: calc(25.5 * var(--u));
  font-weight: 300;
  line-height: 1.12;
}

/* ============ INSPIRACIÓN ============ */
.story {
  display: grid;
  grid-template-columns: calc(479 * var(--u)) calc(720 * var(--u));
  justify-content: center;
  column-gap: calc(70 * var(--u));
  align-items: start;
  min-height: calc(1000 * var(--u));
  padding: calc(152 * var(--u)) calc(52 * var(--u)) calc(130 * var(--u));
  background: var(--sand);
}
.story__photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 479 / 718;
  object-fit: cover;
}
.story__text { padding-top: calc(68 * var(--u)); }
.story__quote {
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(65.5 * var(--u));
  line-height: 1.28;
  max-width: calc(660 * var(--u));
  color: #111;
}
.story__quote em { font-style: italic; }
.story__rule {
  margin: calc(38 * var(--u)) 0 0;
  border: 0;
  border-top: 1px solid #222;
}
.story__note {
  margin-top: calc(76 * var(--u));
  font-size: calc(27 * var(--u));
  color: #1a1a1a;
}

/* ============ CLUB ============ */
.club {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: calc(736 * var(--u));
  padding: calc(105 * var(--u)) calc(48 * var(--u)) calc(110 * var(--u));
  background: var(--cream);
}
.club__inner { width: calc(660 * var(--u)); }
.club__kicker {
  text-align: center;
  font-size: calc(34 * var(--u));
  margin-right: calc(10 * var(--u));
}
.club__text {
  text-align: center;
  margin-top: calc(22 * var(--u));
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(66 * var(--u));
  line-height: 1.16;
  color: #111;
}
.club__text strong { font-weight: 600; }
.club__dot {
  position: absolute;
  top: calc(256 * var(--u));
  width: calc(152 * var(--u));
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--navy);
}
.club__dot--l { left: calc(50% - 594 * var(--u)); }
.club__dot--r { right: calc(50% - 593 * var(--u)); }

/* ============ FOOTER ============ */
.footer {
  background: var(--navy);
  color: #fff;
  padding: calc(64 * var(--u)) calc(48 * var(--u)) calc(56 * var(--u));
}
.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: calc(30 * var(--u));
  border-bottom: 1px solid rgba(255,255,255,.75);
}
.footer__logo {
  font-family: var(--serif);
  font-size: calc(49 * var(--u));
  line-height: 1;
  letter-spacing: .01em;
}
.footer__tag {
  margin-top: calc(6 * var(--u));
  font-size: calc(27 * var(--u));
  font-weight: 300;
  color: rgba(255,255,255,.72);
}
.contact {
  min-width: calc(330 * var(--u));
  margin-right: calc(45 * var(--u));
}
.contact__title {
  font-family: var(--serif);
  font-size: calc(40 * var(--u));
  line-height: 1;
}
.contact__mail {
  display: inline-flex;
  align-items: center;
  gap: calc(12 * var(--u));
  margin-top: calc(16 * var(--u));
  font-size: calc(26 * var(--u));
  font-weight: 300;
  color: rgba(255,255,255,.8);
  transition: color .2s;
}
.contact__mail svg { width: 1.05em; height: 1.05em; fill: currentColor; }
.contact__mail:hover { color: #fff; }
.contact__social {
  display: flex;
  gap: calc(14 * var(--u));
  margin-top: calc(20 * var(--u));
}
.contact__social a {
  display: grid;
  place-items: center;
  width: calc(56 * var(--u));
  min-width: 32px;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  color: #fff;
  transition: background-color .2s, color .2s, border-color .2s;
}
.contact__social a:hover { background: #fff; color: var(--navy); border-color: #fff; }
.contact__social svg { width: 48%; height: 48%; fill: currentColor; }
.contact__social .icon-stroke { fill: none; stroke: currentColor; stroke-width: 2; }
.contact__social .icon-stroke .dot { fill: currentColor; stroke: none; }
.footer__bottom {
  margin-top: calc(60 * var(--u));
  text-align: right;
  font-size: calc(28 * var(--u));
  font-weight: 300;
  color: rgba(255,255,255,.72);
}

/* ============ MODAL ACCESO ============ */
.login {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: start center;
  padding-top: calc(167 * var(--u));
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.login.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity .3s ease;
}
.login__backdrop {
  position: absolute; inset: 0;
  background: rgba(52, 51, 89, .5);
}
.login__card {
  position: relative;
  width: min(calc(656 * var(--u)), calc(100vw - 32px));
  padding: calc(26 * var(--u)) calc(24 * var(--u));
  background: var(--white);
  border-radius: calc(40 * var(--u));
  transform: translateY(12px);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.login.is-open .login__card { transform: none; }
.login__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(85 * var(--u)) calc(28 * var(--u)) calc(90 * var(--u));
  background: var(--sky);
  border-radius: calc(38 * var(--u));
  text-align: center;
}
.login__title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: calc(28 * var(--u));
  letter-spacing: .35em;
  margin-right: -.35em;
  text-transform: uppercase;
}
.login__sub {
  margin-top: calc(28 * var(--u));
  font-size: calc(24.5 * var(--u));
  line-height: 1.12;
}
.login__label {
  margin-top: calc(70 * var(--u));
  font-size: calc(19 * var(--u));
  font-weight: 500;
  letter-spacing: .14em;
}
.login__label + .login__input { margin-top: calc(22 * var(--u)); }
.login__input ~ .login__label { margin-top: calc(40 * var(--u)); }
.login__input {
  width: 100%;
  max-width: calc(520 * var(--u));
  height: calc(68 * var(--u));
  padding: 0 calc(16 * var(--u));
  border: 0;
  border-radius: 0;
  background: #EEF5FF;
  font: inherit;
  font-size: calc(20 * var(--u));
  color: var(--ink);
}
.login__close {
  position: absolute;
  top: calc(-18 * var(--u));
  right: calc(-18 * var(--u));
  z-index: 1;
  display: grid;
  place-items: center;
  width: calc(56 * var(--u));
  min-width: 36px;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(20, 20, 40, .25);
  transition: transform .2s, background-color .2s;
}
.login__close:hover { transform: scale(1.06); background: #46457a; }
.login__close svg {
  width: 46%;
  height: 46%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.login__forgot {
  margin-top: calc(22 * var(--u));
  font-size: calc(18 * var(--u));
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity .2s;
}
.login__forgot:hover { opacity: .7; }
.login__input:focus { outline: 1.5px solid rgba(52,51,89,.55); outline-offset: 0; }

/* ============ MÓVIL ============ */
.mobile-menu { display: none; }

@media (max-width: 760px) {
  :root {
    --m: min(calc(100vw / 402), 1.4px);
    --nav-h: calc(75 * var(--m));
  }

  .nav {
    position: fixed;
    inset: 0 0 auto 0;
    transition: background-color .3s, box-shadow .3s;
    padding: 0 calc(20 * var(--m)) 0 calc(22 * var(--m));
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 0;
  }
  .nav::after {
    content: "";
    position: absolute;
    left: calc(23 * var(--m)); right: calc(25 * var(--m)); bottom: 0;
    height: 1px; background: #1a1a1a;
  }
  .nav.is-scrolled {
    background: rgba(250, 246, 242, .96);
    box-shadow: 0 1px 0 rgba(0,0,0,.08);
  }
  .nav.is-scrolled::after { opacity: 0; }
  .nav__links { display: none; }
  .nav__burger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc(38 * var(--m));
    height: calc(26 * var(--m));
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .nav__burger span { display: block; height: 1.5px; background: #1a1a1a; }
  .nav__logo {
    position: absolute;
    left: 50%; transform: translateX(-46%);
    font-size: calc(13.5 * var(--m));
  }
  .nav__access {
    width: calc(84 * var(--m));
    padding: 0 0 calc(3 * var(--m));
    font-size: calc(13.5 * var(--m));
    line-height: 1.45;
    text-align: center;
  }

  .mobile-menu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: var(--nav-gray);
    transform: translateX(-100%);
    transition: transform .4s cubic-bezier(.2,.8,.2,1);
  }
  .mobile-menu.is-open { transform: none; }
  .mobile-menu__top {
    height: var(--nav-h);
    display: flex;
    align-items: center;
    margin: 0 0 0 calc(22 * var(--m));
    border-bottom: 1px solid #1a1a1a;
  }
  .mobile-menu__links {
    display: flex;
    flex-direction: column;
    gap: calc(85 * var(--m));
    padding: calc(70 * var(--m)) calc(23 * var(--m));
  }
  .mobile-menu__links a { font-size: calc(24 * var(--m)); color: #111; }

  .hero {
    height: auto;
    min-height: max(100svh, calc(893 * var(--m)));
    background-position: 58% 0;
  }
  .hero::before { background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(30,28,40,.18) 100%); }
  .hero__content {
    position: static;
    padding-top: calc(345 * var(--m));
  }
  .hero__eyebrow {
    margin-left: calc(23 * var(--m));
    padding-left: calc(34 * var(--m));
    max-width: calc(250 * var(--m));
    font-size: calc(13 * var(--m));
    line-height: 1.3;
    letter-spacing: .28em;
  }
  .hero__eyebrow-line { width: calc(30 * var(--m)); }
  .hero__title {
    margin: calc(140 * var(--m)) 0 0;
    font-size: calc(58 * var(--m));
    text-align: center;
  }
  .hero__title-2 { padding-left: 0; margin-left: calc(-8 * var(--m)); }
  .hero__aside {
    position: absolute;
    top: auto;
    right: calc(24 * var(--m));
    bottom: 0;
    left: calc(102 * var(--m));
    width: auto;
    padding: calc(14 * var(--m)) 0 calc(14 * var(--m)) calc(16 * var(--m));
    font-size: calc(12.5 * var(--m));
    line-height: 1.15;
  }

  .welcome { min-height: 0; padding: 72px 24px 80px; }
  .welcome__kicker { font-size: 17px; }
  .welcome__body { margin: 36px 0 0; }
  .welcome__title { font-size: 46px; padding-bottom: 16px; }
  .welcome__cols { grid-template-columns: 1fr; gap: 18px; margin-top: 22px; }
  .welcome__cols p { font-size: 17px; }

  .team { padding: 64px 24px 64px; }
  .team__head { grid-template-columns: 1fr; gap: 16px; }
  .team__title { font-size: 46px; }
  .team__intro { padding-top: 0; font-size: 16px; }
  .team__grid { grid-template-columns: 1fr; row-gap: 14px; margin-top: 48px; }
  .team__grid a,
  .team__grid li:nth-child(even) a { height: 68px; padding-left: 64px; font-size: 22px; }
  .team__foot { margin: 40px auto 0; max-width: none; padding: 0 0 6px; font-size: 16px; }

  .story { grid-template-columns: 1fr; row-gap: 40px; min-height: 0; padding: 72px 24px 80px; }
  .story__photo { width: min(78%, 320px); }
  .story__text { padding-top: 0; }
  .story__quote { font-size: 36px; line-height: 1.35; }
  .story__rule { margin-top: 28px; }
  .story__note { margin-top: 28px; font-size: 16px; }

  .club { min-height: 0; padding: 80px 24px 150px; }
  .club__inner { width: 100%; max-width: 360px; }
  .club__kicker { font-size: 17px; margin: 0; }
  .club__text { font-size: 34px; margin-top: 14px; }
  .club__dot { top: auto; bottom: 48px; width: 64px; }
  .club__dot--l { left: calc(50% - 88px); }
  .club__dot--r { right: calc(50% - 88px); }

  .footer { padding: 40px 24px 40px; }
  .footer__top { flex-direction: column; align-items: flex-start; gap: 28px; padding-bottom: 22px; }
  .footer__logo { font-size: 32px; }
  .footer__tag { font-size: 15px; }
  .contact { margin: 0; }
  .contact__title { font-size: 26px; }
  .contact__mail { margin-top: 10px; font-size: 15px; gap: 8px; }
  .contact__social { margin-top: 14px; gap: 10px; }
  .contact__social a { width: 38px; }
  .footer__bottom { margin-top: 32px; font-size: 14px; }

  .login { place-items: center; padding: 16px; }
  .login__card { width: 100%; max-width: 420px; padding: 14px; border-radius: 28px; }
  .login__inner { padding: 52px 20px 56px; border-radius: 22px; }
  .login__title { font-size: 22px; }
  .login__sub { margin-top: 18px; font-size: 17px; }
  .login__label { margin-top: 40px; font-size: 14px; }
  .login__label + .login__input { margin-top: 14px; }
  .login__input ~ .login__label { margin-top: 26px; }
  .login__input { max-width: none; height: 52px; font-size: 16px; }
  .login__forgot { margin-top: 16px; font-size: 14px; }
  .login__close { top: -10px; right: -10px; width: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}