/* ===== Fontes da marca (auto-hospedadas, entregues pela agência) ===== */
    /* GT Alpina — serifada de display/títulos (substitui Cormorant). Só temos Regular + itálicos. */
    @font-face { font-family: 'GT Alpina'; src: url('fonts/gt-alpina-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
    @font-face { font-family: 'GT Alpina'; src: url('fonts/gt-alpina-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
    @font-face { font-family: 'GT Alpina'; src: url('fonts/gt-alpina-medium-italic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
    /* GT Pressura — grotesca da marca (light/regular/bold + itálico). */
    @font-face { font-family: 'GT Pressura'; src: url('fonts/gt-pressura-light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
    @font-face { font-family: 'GT Pressura'; src: url('fonts/gt-pressura-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
    @font-face { font-family: 'GT Pressura'; src: url('fonts/gt-pressura-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
    @font-face { font-family: 'GT Pressura'; src: url('fonts/gt-pressura-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

    /* ===== Sistema tipográfico oficial (spec da agência) ===== */
    /* Editorial New — títulos H1/H2/H3 + quotes. Upright = Ultralight (200, mais fino); itálico = Light Italic (não temos Ultralight itálico). Todos os pesos mapeados p/ o arquivo (sem negrito falso). */
    @font-face { font-family: 'Editorial New'; src: url('fonts/editorial-new-ultralight.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
    @font-face { font-family: 'Editorial New'; src: url('fonts/editorial-new-light-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
    /* Silvana Text (Regular) — corpo/parágrafos/nomes. Só Regular: mapeado p/ todos os pesos. */
    @font-face { font-family: 'Silvana Text'; src: url('fonts/silvana-text-regular.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
    /* GT Pressura Mono — credits/subtitles/labels em caixa alta. */
    @font-face { font-family: 'GT Pressura Mono'; src: url('fonts/gt-pressura-mono-regular.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

    :root {
      /* Brand palette — terrosa/dourada/verde, enxuta (não usar azul/laranja) */
      --off-white: #FDFCF7;
      --ivory: #F4F1E6;           /* bege principal (fundo) */
      --cream: #ECE6D5;           /* bege levemente mais fundo, puxado pro ivory */
      --sand: #E6D8BE;            /* areia — bege mais quente/terroso */
      --carver-ochre: #946F3F;    /* ocre dos posts do Carver (amostrado do deck) */
      --pale-sage: #E4E0CE;       /* neutro claro (menos verde, mais bege) */
      --golden-sun: #9A7B2E;      /* dourado escuro único */
      --forest-floor: #3E4633;    /* verde mata profundo — dark primário */
      --warm-shade: #432D22;      /* marrom escuro quente (brand v2) */
      --warm-sun: #E8C25A;        /* dourado harmonizado (menos neon que o antigo) */
      --sage: #8C8B6E;            /* oliva médio único */
      --muted-black: #201F1A;
      --line: rgba(62, 70, 51, 0.12);
      --line-light: rgba(62, 70, 51, 0.06);

      /* Sistema da marca: display (Editorial New) / corpo (Silvana Text) / mono (GT Pressura Mono) */
      --serif: 'Editorial New', 'GT Alpina', 'Cormorant Garamond', Georgia, serif;   /* títulos + quotes */
      --text: 'Silvana Text', Georgia, 'Times New Roman', serif;                       /* corpo/parágrafos/nomes */
      --mono: 'GT Pressura Mono', 'GT Pressura', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* labels/subtitles/credits */
      --sans: var(--mono);   /* legado: quase todo var(--sans) do site é label em caixa alta -> mono */
    }

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

    html { scroll-behavior: smooth; }
    section[id] { scroll-margin-top: 80px; }

    body {
      font-family: var(--text);
      color: var(--muted-black);
      background: var(--ivory);
      line-height: 1.55;
      font-size: 16px;
      font-weight: 400;
      -webkit-font-smoothing: antialiased;
    }

    img, video { display: block; max-width: 100%; }

    a { color: inherit; text-decoration: none; }

    /* ============ NAVIGATION ============ */
    .nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      --nav-inset: 48px;
      padding: 26px 48px;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      transition: background 0.3s ease, padding 0.3s ease,
                  transform 0.5s cubic-bezier(.4,0,.2,1), opacity 0.4s ease,
                  color 0.45s ease, text-shadow 0.45s ease;
      color: var(--off-white);
      will-change: transform;
    }
    /* Padrão (páginas internas): o cabeçalho inteiro desliza pra cima ao esconder. */
    .nav.nav-hidden {
      transform: translateY(-105%);
      opacity: 0;
      pointer-events: none;
    }
    .nav.scrolled {
      background: rgba(253, 253, 253, 0.96);
      backdrop-filter: blur(10px);
      padding: 16px 48px;
      color: var(--muted-black);
    }
    /* HOME: cabeçalho sempre transparente (sem barra branca); tudo adapta a cor ao fundo */
    .nav--home.scrolled { background: transparent; backdrop-filter: none; }
    .nav--home.logo-light { color: var(--off-white); text-shadow: 0 1px 14px rgba(20, 24, 18, 0.4), 0 0 3px rgba(20, 24, 18, 0.3); }
    .nav--home.logo-dark { color: var(--muted-black); text-shadow: 0 1px 14px rgba(253, 252, 247, 0.6), 0 0 3px rgba(253, 252, 247, 0.55); }
    .nav--home.logo-gold { color: var(--golden-sun); text-shadow: 0 1px 14px rgba(253, 252, 247, 0.6), 0 0 3px rgba(253, 252, 247, 0.5); }
    /* HOME apenas: ao rolar pra baixo, a barra e os controles somem, mas o logo BSC
       continua fixado no topo (com cor adaptativa ao fundo). */
    /* remove o containing-block (will-change) pra o CTA fixed ancorar na viewport */
    .nav--home { will-change: auto; }
    .nav--home .club-selector,
    .nav--home .nav-burger {
      transition: opacity 0.4s ease,
                  transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .nav--home.nav-hidden {
      transform: none;
      opacity: 1;
      background: transparent;
      backdrop-filter: none;
    }
    /* some o seletor e o burger; o CTA "Faça parte" NÃO some — desliza pro canto */
    .nav--home.nav-hidden .club-selector,
    .nav--home.nav-hidden .nav-burger {
      opacity: 0;
      transform: translateY(-170%);
      pointer-events: none;
    }
    /* "Faça parte": fixo no canto superior direito (não desce mais). Vidro adaptativo. */
    .nav--home .nav-cta {
      position: fixed; z-index: 190; top: 20px; right: 24px;
      transform: translateX(calc(-1 * (var(--nav-inset, 48px) + 30px)));
      pointer-events: auto;
      border-color: transparent;
      -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
      transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease, opacity 0.6s ease;
    }
    /* enquanto o pop-up dos clubes está aberto, o "Faça parte" mora dentro dele */
    html.promo-active .nav--home .nav-cta { opacity: 0; pointer-events: none; }
    /* painel translúcido adaptativo: escuro sobre seções escuras, claro sobre claras */
    .nav--home.logo-light .nav-cta { background: rgba(20, 24, 18, 0.34); }
    .nav--home.logo-dark .nav-cta { background: rgba(253, 252, 247, 0.66); }
    .nav--home .nav-cta:hover { background: var(--golden-sun); color: var(--off-white); border-color: var(--golden-sun); }
    /* Seções gold (ex.: Aretê Búzios): hover NÃO é fill dourado+branco; inverte pro preto/branco */
    .nav--home.logo-gold .nav-cta:hover { background: var(--muted-black); color: var(--off-white); border-color: var(--muted-black); }
    .nav--home.nav-hidden .nav-logo {
      pointer-events: auto;
      transition: color 0.4s ease, text-shadow 0.4s ease,
                  left 0.55s cubic-bezier(0.65, 0, 0.35, 1),
                  transform 0.55s cubic-bezier(0.65, 0, 0.35, 1),
                  opacity 0.35s ease;
    }
    /* Logo adaptativo: cor conforme o fundo da seção sob o BSC flutuante. */
    .nav--home.nav-hidden.logo-light .nav-logo {
      color: var(--off-white);
      text-shadow: 0 1px 22px rgba(20, 24, 18, 0.45), 0 0 4px rgba(20, 24, 18, 0.35);
    }
    .nav--home.nav-hidden.logo-dark .nav-logo {
      color: var(--muted-black);
      text-shadow: 0 1px 20px rgba(255, 255, 255, 0.6), 0 0 4px rgba(255, 255, 255, 0.5);
    }
    /* Home: logo posicionado à esquerda; ao esconder o cabeçalho, desliza pro centro.
       O logo sai do fluxo (absoluto), então fixamos as colunas dos irmãos
       para a grade não reposicionar o seletor de clube e as ações. */
    .nav--home .club-selector { grid-column: 2; }
    .nav--home .nav-actions { grid-column: 3; }
    .nav--home .nav-logo {
      position: absolute;
      left: var(--nav-inset, 48px);
      top: 50%;
      transform: translateY(-50%);
      transition: left 0.55s cubic-bezier(0.65, 0, 0.35, 1),
                  transform 0.55s cubic-bezier(0.65, 0, 0.35, 1),
                  opacity 0.35s ease;
    }
    .nav--home.nav-hidden .nav-logo {
      left: 50%;
      transform: translate(-50%, -50%);
    }
    /* Anti-sobreposição: some quando há texto/imagem atrás; reaparece quando livre */
    .nav--home.logo-clash .nav-logo { opacity: 0; pointer-events: none; }
    .nav--home.cta-clash .nav-cta { opacity: 0; pointer-events: none; }
    .nav--home.sel-clash .club-selector { opacity: 0; pointer-events: none; }
    .nav--home.menu-clash .nav-burger { opacity: 0; pointer-events: none; }

    .nav-logo {
      display: inline-flex;
      align-items: center;
      height: 24px;
      white-space: nowrap;
    }
    /* Logo em IMAGEM: one-line "Brasil Surfe Clube" no topo (sem totem);
       ao colapsar (scroll down / nav flutuante) faz fade pro símbolo BSC. */
    .logo-full {
      height: 15px; width: auto; display: block; max-width: 340px; overflow: hidden;
      transition: opacity 0.55s ease, max-width 0.7s cubic-bezier(0.65, 0, 0.35, 1);
    }
    /* Colapsado: logomarca "BSC" (imagem oficial do brand book, base dourada), centralizada.
       Transição suave: cross-fade longo + leve crescimento do "BSC" ao entrar. */
    .logo-mark {
      position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.84);
      height: 16px; width: auto; max-width: none; opacity: 0; pointer-events: none;
      transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .nav.nav-hidden .logo-full { opacity: 0; max-width: 0; }
    .nav.nav-hidden .logo-mark { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    /* Cor adaptativa por fundo (mesmo esquema do antigo totem): claro sobre escuro, preto sobre claro. */
    /* Base da imagem é a one-line DOURADA: branco/preto saem por filtro; o dourado fica sem filtro. */
    .nav-logo img { transition: filter 0.4s ease; filter: brightness(0) invert(1) drop-shadow(0 1px 8px rgba(20, 24, 18, 0.4)); }
    .nav--home.logo-light .nav-logo img { filter: brightness(0) invert(1) drop-shadow(0 1px 8px rgba(20, 24, 18, 0.45)); }
    /* Nunca usar a logo preta: em fundos claros/fotos usamos o DOURADO (visível em ambos, on-brand). */
    .nav--home.logo-dark .nav-logo img { filter: drop-shadow(0 1px 6px rgba(20, 24, 18, 0.45)); }
    .nav--home.logo-gold .nav-logo img { filter: drop-shadow(0 1px 5px rgba(253, 252, 247, 0.55)); }
    .nav:not(.nav--home) .nav-logo img { filter: drop-shadow(0 1px 2px rgba(20, 24, 18, 0.18)); }
    @media (prefers-reduced-motion: reduce) { .logo-full, .logo-mark, .nav-logo img { transition: none; } }
    /* Mobile: one-line não cabe — mostra só o símbolo. */
    @media (max-width: 760px) {
      .logo-full { display: none; }
      .logo-mark { position: static; transform: none; opacity: 1; }
      /* logo sempre estático no canto superior esquerdo — não flutua pro centro ao rolar */
      .nav--home .nav-logo, .nav--home.nav-hidden .nav-logo { position: static; left: auto; top: auto; transform: none; }
      .nav.nav-hidden .logo-mark, .nav--home.nav-hidden .logo-mark { transform: none; }
    }
    /* Cadastro "plain": sem barra branca, sem menu, logo em Golden Sun. */
    .nav.nav--plain { background: transparent; backdrop-filter: none; box-shadow: none; color: var(--golden-sun); }
    .nav.nav--plain .nav-logo { color: var(--golden-sun); }
    .nav.nav--plain .nav-actions { display: none; }
    .nav.nav--plain .logo-totem { filter: none; }
    /* No cadastro o totem+logo vivem no conteúdo (à direita), então some do cabeçalho */
    .nav.nav--plain .nav-logo { display: none; }

    /* Club selector (nav center) */
    .club-selector {
      position: relative;
      justify-self: center;
    }
    .club-selector-trigger {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: transparent;
      border: none;
      color: inherit;
      cursor: pointer;
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-weight: 500;
      padding: 6px 0;
      opacity: 0.95;
      transition: opacity 0.2s ease;
      white-space: nowrap;
    }
    .club-selector-trigger:hover { opacity: 1; }
    .club-selector-trigger .chev {
      width: 8px; height: 5px;
      border-left: 1px solid currentColor;
      border-bottom: 1px solid currentColor;
      transform: rotate(-45deg);
      margin-left: 2px;
      margin-top: -3px;
      transition: transform 0.2s ease;
    }
    .club-selector.open .club-selector-trigger .chev {
      transform: rotate(135deg);
      margin-top: 1px;
    }

    .club-dropdown {
      position: absolute;
      top: calc(100% + 20px);
      left: 50%;
      transform: translateX(-50%) translateY(-8px);
      min-width: 420px;
      background: transparent;
      color: inherit;
      z-index: 11;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.28s ease, transform 0.28s ease;
    }
    .club-selector.open .club-dropdown {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }
    .club-dropdown-head {
      padding: 12px 20px;
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--warm-sun);
      font-weight: 600;
      border-bottom: 1px solid rgba(247, 245, 231, 0.2);
      text-align: left;
    }
    .nav.scrolled .club-dropdown-head {
      color: var(--golden-sun);
      border-bottom-color: rgba(92, 90, 67, 0.2);
    }
    .club-option {
      display: grid;
      grid-template-columns: 20px 1fr auto;
      gap: 14px;
      padding: 18px 20px;
      align-items: center;
      cursor: pointer;
      transition: opacity 0.15s ease;
      border-bottom: 1px solid rgba(247, 245, 231, 0.14);
      text-align: left;
    }
    .nav.scrolled .club-option { border-bottom-color: rgba(92, 90, 67, 0.14); }
    .club-option:last-child { border-bottom: none; }
    .club-option:hover { opacity: 0.75; }
    .club-option-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: transparent;
      border: 1.5px solid rgba(247, 245, 231, 0.4);
      justify-self: center;
    }
    .nav.scrolled .club-option-dot { border-color: rgba(92, 90, 67, 0.35); }
    .club-option.active .club-option-dot {
      background: var(--warm-sun);
      border-color: var(--warm-sun);
    }
    .nav.scrolled .club-option.active .club-option-dot {
      background: var(--golden-sun);
      border-color: var(--golden-sun);
    }
    .club-option-info { display: flex; flex-direction: column; gap: 4px; }
    .club-option-name {
      font-family: var(--serif);
      font-size: 20px;
      line-height: 1.15;
      letter-spacing: -0.012em;
      color: inherit;
      text-transform: none;
    }
    .club-option-status {
      font-size: 11px;
      letter-spacing: 0.04em;
      opacity: 0.65;
      text-transform: none;
    }
    .club-option.active .club-option-status {
      color: var(--warm-sun);
      opacity: 1;
      font-weight: 500;
    }
    .nav.scrolled .club-option.active .club-option-status { color: var(--golden-sun); }
    .club-option-meta {
      text-align: right;
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      opacity: 0.65;
      line-height: 1.4;
    }
    .club-option-meta strong {
      display: block;
      font-family: var(--serif);
      font-size: 20px;
      font-weight: 400;
      letter-spacing: -0.01em;
      text-transform: none;
      opacity: 1;
    }
    .club-option-meta-soon {
      font-style: italic;
      font-weight: 400;
      letter-spacing: 0.02em;
      text-transform: none;
      font-size: 11px;
      opacity: 0.7;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 22px;
    }

    .nav-discover {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: inherit;
      transition: opacity 0.2s ease;
    }
    .nav-discover:hover { opacity: 0.65; }

    .nav-burger {
      width: 32px;
      height: 32px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-end;
      gap: 5px;
      cursor: pointer;
      color: inherit;
      background: transparent;
      border: none;
      position: relative;
      z-index: 12;
    }
    .nav-burger span {
      display: block;
      height: 1.5px;
      background: currentColor;
      transition: all 0.25s ease;
      transform-origin: center;
    }
    .nav-burger span:nth-child(1) { width: 22px; }
    .nav-burger span:nth-child(2) { width: 16px; }
    .nav-burger.active span:nth-child(1) {
      width: 20px;
      transform: rotate(45deg) translate(3px, 3px);
    }
    .nav-burger.active span:nth-child(2) {
      width: 20px;
      transform: rotate(-45deg) translate(3px, -3px);
    }

    /* Menu overlay (transparente, abre ao clicar burger) */
    .nav-actions { position: relative; }
    .menu-overlay {
      position: absolute;
      top: calc(100% + 20px);
      right: 0;
      min-width: 360px;
      background: transparent;
      color: inherit;
      text-align: right;
      z-index: 11;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-8px);
      transition: opacity 0.28s ease, transform 0.28s ease;
    }
    .nav-actions.open .menu-overlay {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
    .menu-overlay-head {
      padding: 12px 0 12px;
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--warm-sun);
      font-weight: 600;
      border-bottom: 1px solid rgba(247, 245, 231, 0.2);
    }
    .nav.scrolled .menu-overlay-head {
      color: var(--golden-sun);
      border-bottom-color: rgba(92, 90, 67, 0.2);
    }
    .menu-link {
      display: block;
      padding: 16px 0;
      font-family: var(--serif);
      font-size: 24px;
      line-height: 1.15;
      letter-spacing: -0.014em;
      color: inherit;
      border-bottom: 1px solid rgba(247, 245, 231, 0.14);
      cursor: pointer;
      transition: opacity 0.15s ease, padding 0.2s ease;
      text-decoration: none;
      text-transform: none;
      font-weight: 400;
    }
    .nav.scrolled .menu-link { border-bottom-color: rgba(92, 90, 67, 0.14); }
    .menu-link:last-of-type { border-bottom: none; }
    .menu-link:hover { opacity: 0.7; padding-right: 12px; }
    .menu-link-num {
      display: inline-block;
      font-family: var(--sans);
      font-size: 10px;
      letter-spacing: 0.2em;
      color: var(--warm-sun);
      vertical-align: middle;
      margin-right: 20px;
      opacity: 0.75;
      font-weight: 600;
    }
    .nav.scrolled .menu-link-num { color: var(--golden-sun); }

    /* ============ HERO ============ */
    .hero {
      position: relative;
      height: 100vh;
      min-height: 680px;
      overflow: hidden;
      color: var(--off-white);
    }
    .hero-media {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      z-index: 1;
    }
    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        180deg,
        rgba(92, 90, 67, 0.25) 0%,
        rgba(92, 90, 67, 0.05) 35%,
        rgba(92, 90, 67, 0.55) 100%
      );
      z-index: 2;
    }
    .hero-content {
      position: relative;
      z-index: 3;
      height: 100%;
      padding: 0 48px 64px;
      display: flex;
      align-items: flex-end;
    }
    .hero-headline {
      flex: 1;
      max-width: 900px;
    }
    .hero-eyebrow {
      font-size: 11px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      font-weight: 500;
      margin-bottom: 32px;
      opacity: 0.95;
    }
    .hero-title {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(48px, 6.5vw, 96px);
      line-height: 1.02;
      letter-spacing: -0.025em;
      margin-bottom: 0;
    }

    /* Floating card bottom-right */
    .hero-card {
      position: absolute;
      bottom: 64px;
      right: 48px;
      z-index: 4;
      background: var(--ivory);
      color: var(--muted-black);
      padding: 18px;
      display: grid;
      grid-template-columns: 80px 1fr;
      gap: 16px;
      width: 360px;
      align-items: center;
      transition: transform 0.3s ease;
    }
    .hero-card:hover { transform: translateY(-3px); }
    .hero-card img {
      width: 80px;
      height: 80px;
      object-fit: cover;
    }
    .hero-card-body { display: flex; flex-direction: column; gap: 6px; }
    .hero-card-title {
      font-family: var(--serif);
      font-size: 19px;
      line-height: 1.2;
      letter-spacing: -0.01em;
      color: var(--muted-black);
    }
    .hero-card-cta {
      font-size: 10px;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      font-weight: 600;
      color: var(--golden-sun);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 4px;
    }
    .hero-card-cta::after {
      content: '→';
      font-size: 14px;
    }

    /* Botões compartilhados */
    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 16px 28px;
      background: var(--golden-sun);
      color: var(--off-white);
      border: none;
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.2s ease, transform 0.2s ease;
    }
    .btn-primary:hover { background: #8a6a1c; transform: translateY(-1px); }
    .btn-primary svg { width: 14px; height: 14px; }
    .btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 16px 28px;
      background: transparent;
      color: inherit;
      border: 1px solid currentColor;
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.2s ease;
      opacity: 0.9;
    }
    .btn-ghost:hover { opacity: 1; background: rgba(247, 245, 231, 0.08); }

    /* ============ SECTION BASE ============ */
    .section {
      padding: 120px 48px;
      max-width: 1400px;
      margin: 0 auto;
    }
    .section-eyebrow {
      font-size: 11px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      font-weight: 500;
      color: var(--golden-sun);
      margin-bottom: 32px;
    }
    .section-title {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(40px, 5.5vw, 72px);
      line-height: 1.05;
      letter-spacing: -0.018em;
      color: var(--muted-black);
    }
    .section-title em { font-style: italic; color: var(--forest-floor); font-weight: 300; }
    .section-lead {
      font-family: var(--serif);
      font-size: 22px;
      line-height: 1.5;
      font-weight: 300;
      color: var(--forest-floor);
      max-width: 780px;
      margin-top: 28px;
    }

    /* ============ SANCTUARY (Golden Sun block) ============ */
    .sanctuary {
      background: var(--off-white);
      color: var(--muted-black);
    }
    .sanctuary-top {
      background: var(--golden-sun);
      color: var(--ivory);
      padding: 80px 48px 100px;
    }
    .sanctuary-top-inner {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 64px;
      align-items: end;
      min-height: 280px;
    }
    .sanctuary-body {
      font-size: 15px;
      line-height: 1.7;
      color: rgba(247, 245, 231, 0.95);
      max-width: 380px;
    }
    .sanctuary-title {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(48px, 7vw, 96px);
      line-height: 1.0;
      letter-spacing: -0.025em;
      color: var(--ivory);
      text-align: right;
    }
    .sanctuary-img {
      width: 100%;
      height: 60vh;
      max-height: 720px;
      object-fit: cover;
      display: block;
    }

    /* ============ MANIFESTO ============ */
    .manifesto {
      background: var(--forest-floor);
      color: var(--ivory);
      padding: 160px 48px;
    }
    .manifesto-inner {
      max-width: 1100px;
      margin: 0 auto;
      text-align: left;
    }
    .manifesto-eyebrow {
      font-size: 11px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--warm-sun);
      margin-bottom: 48px;
      font-weight: 500;
    }
    .manifesto-title {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(40px, 6vw, 84px);
      line-height: 1.05;
      letter-spacing: -0.025em;
      color: var(--ivory);
      margin-bottom: 56px;
      max-width: 950px;
    }
    .manifesto-title em { font-style: italic; }
    .manifesto-body {
      font-size: 16px;
      line-height: 1.7;
      color: rgba(247, 245, 231, 0.8);
      max-width: 520px;
      font-weight: 300;
    }

    /* ============ UM DIA NO BSC ============ */
    .day-section { background: var(--off-white); }
    .day-header { margin-bottom: 72px; max-width: 780px; }

    .day-timeline {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: var(--line);
    }
    .day-card {
      background: var(--off-white);
      padding: 36px 28px 32px;
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 460px;
      transition: background 0.3s ease;
      overflow: hidden;
    }
    .day-card:hover { background: #FCFAF1; }
    .day-card-img { transition: transform 0.6s ease; }
    .day-card:hover .day-card-img { transform: scale(1.04); }
    .day-card-step {
      font-family: var(--serif);
      font-size: 11px;
      letter-spacing: 0.2em;
      color: var(--golden-sun);
      margin-bottom: 8px;
      font-weight: 500;
    }
    .day-card-time {
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: 0.22em;
      color: var(--forest-floor);
      margin-bottom: 16px;
      text-transform: uppercase;
      font-weight: 500;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--line-light);
    }
    .day-card-img {
      width: 100%;
      aspect-ratio: 4/3;
      object-fit: cover;
      margin-bottom: 24px;
      filter: saturate(0.85) contrast(1.02);
    }
    .day-card-title {
      font-family: var(--serif);
      font-size: 24px;
      line-height: 1.15;
      margin-bottom: 12px;
      letter-spacing: -0.012em;
      color: var(--muted-black);
    }
    .day-card-body {
      font-size: 13px;
      line-height: 1.6;
      color: var(--forest-floor);
    }

    /* ============ ONDAS (catálogo) ============ */
    .waves {
      background: var(--pale-sage);
      color: var(--muted-black);
      padding: 140px 48px 100px;
    }
    .waves-inner { max-width: 1400px; margin: 0 auto; }
    .waves-header {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: end;
      margin-bottom: 64px;
    }
    .waves-header .section-title em { color: var(--forest-floor); }
    .waves-header .section-lead { margin-top: 0; }

    /* Diagrama da piscina (aerial limpa) */
    .pool-diagram {
      width: 100%;
      margin: 0;
      overflow: hidden;
    }
    .pool-diagram img {
      width: 100%;
      aspect-ratio: 1236/548;
      object-fit: cover;
      display: block;
    }
    .pool-diagram-caption {
      margin-top: 18px;
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--forest-floor);
      font-weight: 500;
    }

    .waves-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
    }
    .wave-card {
      display: flex;
      flex-direction: column;
      cursor: pointer;
    }
    .wave-card-media {
      position: relative;
      overflow: hidden;
      aspect-ratio: 4/3;
      margin-bottom: 20px;
    }
    .wave-card-media img,
    .wave-card-media video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(0.85) contrast(1.05);
      transition: transform 0.7s ease;
    }
    .wave-card:hover .wave-card-media img,
    .wave-card:hover .wave-card-media video { transform: scale(1.05); }

    .wave-card-level {
      position: absolute;
      top: 14px;
      left: 14px;
      padding: 5px 10px;
      background: rgba(92, 90, 67, 0.7);
      backdrop-filter: blur(8px);
      color: var(--warm-sun);
      font-size: 10px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      font-weight: 600;
      z-index: 2;
    }
    .wave-card-type {
      position: absolute;
      top: 14px;
      right: 14px;
      padding: 5px 10px;
      background: rgba(92, 90, 67, 0.7);
      backdrop-filter: blur(8px);
      color: rgba(247, 245, 231, 0.9);
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      z-index: 2;
    }

    .wave-card-body { display: flex; flex-direction: column; }
    .wave-card-name {
      font-family: var(--serif);
      font-size: 28px;
      text-transform: uppercase;
      letter-spacing: -0.01em;
      color: var(--ivory);
      margin-bottom: 6px;
      font-weight: 400;
    }
    .wave-card-tag {
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--warm-sun);
      margin-bottom: 14px;
      font-weight: 500;
    }
    .wave-card-desc {
      font-size: 13px;
      line-height: 1.6;
      color: rgba(247, 245, 231, 0.7);
      margin-bottom: 18px;
      min-height: 62px;
    }
    .wave-card-meta {
      display: flex;
      gap: 14px;
      padding-top: 14px;
      border-top: 1px solid rgba(247, 245, 231, 0.12);
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(247, 245, 231, 0.85);
      flex-wrap: wrap;
    }
    .wave-card-meta-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .wave-card-meta-item svg {
      width: 12px; height: 12px;
      color: var(--warm-sun);
      opacity: 0.8;
    }

    .waves-footer {
      margin-top: 72px;
      padding-top: 40px;
      border-top: 1px solid rgba(92, 90, 67, 0.12);
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 40px;
    }
    .waves-credit {
      font-size: 12px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(92, 90, 67, 0.55);
    }
    .waves-credit strong {
      color: var(--golden-sun);
      font-weight: 500;
    }
    .waves-spec {
      display: flex;
      align-items: baseline;
      gap: 10px;
    }
    .waves-spec-num {
      font-family: var(--serif);
      font-size: 32px;
      color: var(--golden-sun);
      line-height: 1;
      font-weight: 300;
    }
    .waves-spec-num small { font-size: 14px; opacity: 0.7; font-style: italic; }
    .waves-spec-label {
      font-size: 10px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(92, 90, 67, 0.6);
    }

    /* ============ INSTALAÇÕES ============ */
    .facilities { background: var(--ivory); }
    .facilities .section-header {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: end;
      margin-bottom: 64px;
    }
    .facilities-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line);
    }
    .facility {
      background: var(--ivory);
      padding: 36px 28px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      min-height: 200px;
      transition: background 0.3s ease;
      cursor: default;
    }
    .facility:hover { background: var(--off-white); }
    .facility-icon {
      width: 36px;
      height: 36px;
      color: var(--golden-sun);
    }
    .facility-icon svg { width: 100%; height: 100%; stroke-width: 1.2; }
    .facility-name {
      font-family: var(--serif);
      font-size: 24px;
      letter-spacing: -0.012em;
      color: var(--muted-black);
    }
    .facility-desc {
      font-size: 12px;
      line-height: 1.55;
      color: var(--forest-floor);
      margin-top: auto;
    }

    /* ============ ATLETAS ============ */
    .athletes { background: var(--off-white); padding-top: 140px; padding-bottom: 140px; }
    .athletes-grid {
      margin-top: 72px;
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 24px;
    }
    .athlete {
      position: relative;
      overflow: hidden;
      aspect-ratio: 3/4;
      cursor: pointer;
    }
    .athlete.lead { aspect-ratio: 4/5; }
    .athlete img {
      width: 100%; height: 100%;
      object-fit: cover;
      filter: saturate(0.9) contrast(1.02);
      transition: transform 0.6s ease;
    }
    .athlete:hover img { transform: scale(1.03); }
    .athlete-info {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      padding: 28px;
      background: linear-gradient(180deg, transparent, rgba(92, 90, 67, 0.85));
      color: var(--off-white);
    }
    .athlete-name {
      font-family: var(--serif);
      font-size: 28px;
      letter-spacing: -0.015em;
      margin-bottom: 4px;
    }
    .athlete-role {
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--warm-sun);
      opacity: 0.95;
    }
    .athlete-quote {
      font-family: var(--serif);
      font-style: italic;
      font-size: 15px;
      line-height: 1.45;
      margin-top: 14px;
      max-width: 380px;
      opacity: 0.92;
    }

    /* ============ ÁREA DO SÓCIO ============ */
    .members {
      background: var(--forest-floor);
      color: var(--ivory);
      padding: 140px 48px;
      overflow: hidden;
    }
    .members-inner {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 0.9fr;
      gap: 80px;
      align-items: center;
    }
    .members-text .section-eyebrow { color: var(--warm-sun); }
    .members-text .section-eyebrow::before { background: var(--warm-sun); }
    .members-text .section-title { color: var(--ivory); }
    .members-text .section-title em { color: var(--warm-sun); }
    .members-text .section-lead { color: rgba(247, 245, 231, 0.78); }

    .members-features {
      list-style: none;
      margin-top: 40px;
      border-top: 1px solid rgba(247, 245, 231, 0.18);
    }
    .members-features li {
      padding: 20px 0;
      border-bottom: 1px solid rgba(247, 245, 231, 0.18);
      display: flex;
      align-items: center;
      gap: 18px;
      font-size: 14px;
    }
    .members-features li svg {
      width: 18px; height: 18px;
      color: var(--warm-sun);
      flex-shrink: 0;
    }

    .members-cta { margin-top: 40px; display: inline-flex; }

    /* Mock-up do app */
    .phone-mock {
      width: 100%;
      max-width: 360px;
      aspect-ratio: 9/19;
      background: var(--forest-floor);
      border-radius: 36px;
      padding: 12px;
      margin: 0 auto;
      box-shadow: 0 60px 120px -40px rgba(92, 90, 67, 0.55);
      position: relative;
    }
    .phone-screen {
      width: 100%; height: 100%;
      background: var(--ivory);
      border-radius: 26px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .phone-topbar {
      background: var(--forest-floor);
      color: var(--ivory);
      padding: 32px 18px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 9px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }
    .phone-topbar-logo { font-family: var(--serif); font-size: 12px; letter-spacing: 0.15em; }
    .phone-topbar-bell {
      width: 24px; height: 24px;
      border: 1px solid rgba(247,245,231,0.3);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      position: relative;
    }
    .phone-topbar-bell::after {
      content: ''; position: absolute; top: 4px; right: 4px;
      width: 6px; height: 6px; background: var(--warm-sun); border-radius: 50%;
    }
    .phone-body {
      flex: 1;
      padding: 16px;
      overflow: hidden;
    }
    .phone-greet {
      font-size: 9px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--forest-floor);
      margin-bottom: 4px;
    }
    .phone-name {
      font-family: var(--serif);
      font-size: 20px;
      color: var(--muted-black);
      margin-bottom: 16px;
    }
    .phone-card {
      background: var(--off-white);
      border: 1px solid var(--line);
      padding: 14px;
      border-radius: 10px;
      margin-bottom: 12px;
    }
    .phone-card-label {
      font-size: 8px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--golden-sun);
      margin-bottom: 8px;
    }
    .phone-card-row { display: flex; align-items: baseline; gap: 8px; }
    .phone-card-time {
      font-family: var(--serif);
      font-size: 24px;
      color: var(--forest-floor);
      line-height: 1;
    }
    .phone-card-date { font-size: 10px; color: var(--muted-black); }
    .phone-card-wave {
      font-size: 11px;
      margin-top: 8px;
      color: var(--muted-black);
      font-weight: 500;
    }
    .phone-card-bar {
      height: 4px;
      background: var(--line);
      border-radius: 2px;
      margin-top: 10px;
      overflow: hidden;
    }
    .phone-card-bar-fill {
      height: 100%;
      width: 55%;
      background: var(--golden-sun);
    }
    .phone-tag {
      display: inline-block;
      padding: 4px 10px;
      background: rgba(163, 127, 36, 0.15);
      color: var(--golden-sun);
      font-size: 9px;
      letter-spacing: 0.1em;
      border-radius: 4px;
      font-weight: 600;
      text-transform: uppercase;
    }
    .phone-news {
      width: 100%;
      aspect-ratio: 16/9;
      background: var(--forest-floor);
      border-radius: 8px;
      margin-top: 10px;
      position: relative;
      overflow: hidden;
    }
    .phone-news::after {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 0; height: 0;
      border-left: 12px solid rgba(255,255,255,0.9);
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
    }
    .phone-news img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }

    /* ============ ACOMPANHAMENTO DE OBRAS ============ */
    .construction {
      background: var(--cream);
      color: var(--muted-black);
      padding: 140px 48px 100px;
      position: relative;
      overflow: hidden;
    }
    .construction-inner {
      max-width: 1400px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }
    .construction-header {
      max-width: 720px;
      margin-bottom: 64px;
    }
    .construction .section-title em { color: var(--forest-floor); }

    .construction-figure {
      margin: 0;
    }
    .construction-figure img {
      width: 100%;
      aspect-ratio: 21/9;
      object-fit: cover;
      filter: saturate(0.85) contrast(1.05);
      display: block;
    }
    .construction-figure figcaption {
      margin-top: 18px;
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--forest-floor);
      font-weight: 500;
    }

    .construction-meta {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin: 56px 0;
    }
    .construction-chip {
      padding: 10px 18px;
      border: 1px solid rgba(92, 90, 67, 0.3);
      font-size: 12px;
      letter-spacing: 0.06em;
      color: var(--forest-floor);
    }

    .construction-actions {
      margin-top: 0;
    }

    /* ============ CADASTRO / CTA ============ */
    .signup {
      background: var(--ivory);
      padding: 140px 48px;
    }
    .signup-inner {
      max-width: 720px;
      margin: 0 auto;
      text-align: center;
    }
    .signup .section-eyebrow { justify-content: center; }
    .signup .section-eyebrow::before { display: none; }
    .signup-form {
      margin-top: 56px;
      display: grid;
      gap: 12px;
    }
    .signup-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .signup-row--full { grid-template-columns: 1fr; }
    .signup input, .signup select {
      width: 100%;
      padding: 16px 18px;
      border: 1px solid var(--line);
      background: var(--off-white);
      font-family: var(--text);
      font-size: 14px;
      color: var(--muted-black);
      border-radius: 2px;
      outline: none;
      transition: border-color 0.2s ease;
    }
    .signup input:focus, .signup select:focus { border-color: var(--golden-sun); }
    .signup .btn-primary { width: 100%; justify-content: center; margin-top: 8px; }
    /* Cadastro em forest green: fundo escuro, texto e campos claros */
    .signup { background: var(--forest-floor); }
    .signup .section-title { color: var(--off-white); font-size: clamp(32px, 4.2vw, 54px); margin-top: clamp(10px, 2vh, 28px); }
    .signup .section-lead { color: rgba(244, 241, 230, 0.8); font-family: var(--text); font-size: 18px; font-weight: 400; line-height: 1.6; }
    .signup input, .signup select {
      background: rgba(253, 252, 247, 0.06);
      border-color: rgba(244, 241, 230, 0.28);
      color: var(--off-white);
      padding: 13px 15px;
      font-size: 13.5px;
    }
    .signup input::placeholder { color: rgba(244, 241, 230, 0.55); }
    .signup select { color: rgba(244, 241, 230, 0.72); }
    .signup select option { color: var(--muted-black); }
    .signup input:focus, .signup select:focus { border-color: var(--warm-sun); }
    .signup .signup-consent { color: rgba(244, 241, 230, 0.78); }
    .signup .signup-consent a { color: var(--warm-sun); }
    .signup .signup-consent input { accent-color: var(--warm-sun); }
    .signup .signup-success h3 { color: var(--off-white); }
    .signup .signup-success p { color: rgba(244, 241, 230, 0.8); }
    /* Split: formulário à esquerda, totem + logo (dourados) à direita */
    .signup-split {
      max-width: 1120px;
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: clamp(40px, 6vw, 100px);
      align-items: center;
      text-align: left;
    }
    .signup-split .section-lead { margin: 24px 0 0; }
    .signup-split .signup-form { margin-left: 0; margin-right: 0; }
    /* Coluna do brand (esquerda, acima do título): totem + wordmark dourados, menores */
    .signup-brand-lockup {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: clamp(8px, 1.2vh, 16px);
      margin-left: clamp(46px, 7.5vw, 122px);
      margin-top: clamp(-104px, -10vh, -52px);
      margin-bottom: clamp(98px, 12.5vh, 188px);
      width: max-content;
    }
    .signup-brand-totem { width: clamp(76px, 9.2vw, 132px); height: auto; transform: translateY(clamp(-18px, -1.8vh, -8px)); }
    .signup-brand-word { display: block; width: clamp(200px, 24vw, 330px); height: auto; } /* wordmark stacked em dourado (bsc-wordmark-gold.png) */
    /* Botão Voltar do formulário (canto superior esquerdo) */
    .signup-back {
      position: fixed;
      top: clamp(20px, 3vh, 34px);
      left: clamp(20px, 4vw, 48px);
      z-index: 200;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--sans);
      font-size: 12.5px;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(244, 241, 230, 0.85);
      text-decoration: none;
      transition: color 0.2s ease, gap 0.2s ease;
    }
    .signup-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
    .signup-back:hover { color: var(--warm-sun); gap: 12px; }
    /* Coluna da foto (direita): imagem preenchendo toda a altura */
    .signup-photo { align-self: stretch; display: flex; }
    .signup-brand-photo {
      width: 100%;
      flex: 1 1 auto;
      min-height: clamp(340px, 62vh, 660px);
      object-fit: cover;
      border-radius: 2px;
      display: block;
      transform: translateX(clamp(12px, 2.4vw, 44px));
    }
    @media (max-width: 880px) {
      .signup-split { grid-template-columns: 1fr; gap: clamp(28px, 5vh, 48px); }
      .signup-brand-photo { min-height: clamp(240px, 40vh, 380px); }
    }

    /* Telefone: sem a foto, e a marca (totem + logotipo) centralizada */
    @media (max-width: 760px) {
      .signup-photo { display: none; }
      .signup-brand-lockup {
        margin-left: auto;
        margin-right: auto;
        margin-top: clamp(-32px, -3.5vh, -10px);
        margin-bottom: clamp(20px, 3.5vh, 40px);
      }
      .signup-brand-totem { transform: none; }
    }
    .signup-disclaimer {
      margin-top: 18px;
      font-size: 11px;
      color: var(--forest-floor);
      opacity: 0.7;
    }

    /* ============ FOOTER ============ */
    .footer {
      background: var(--forest-floor);
      color: rgba(247, 245, 231, 0.75);
      padding: 80px 48px 32px;
    }
    .footer-inner {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr;
      gap: 64px;
      padding-bottom: 56px;
      border-bottom: 1px solid rgba(247, 245, 231, 0.12);
    }
    .footer-brand img { height: 64px; filter: brightness(0) invert(1); margin-bottom: 24px; opacity: 0.9; }
    .footer-brand p { font-size: 13px; line-height: 1.7; max-width: 280px; }
    .footer-col h4 {
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--ivory);
      margin-bottom: 20px;
      font-weight: 600;
    }
    .footer-col ul { list-style: none; }
    .footer-col li { margin-bottom: 10px; }
    .footer-col a { font-size: 13px; transition: color 0.2s ease; }
    .footer-col a:hover { color: var(--warm-sun); }
    .footer-bottom {
      max-width: 1400px;
      margin: 0 auto;
      padding-top: 28px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 11px;
      letter-spacing: 0.08em;
    }
    .footer-bottom .footer-legal { display: flex; gap: 20px; }
    .footer-bottom .footer-legal a { font-size: 12px; letter-spacing: 0.04em; transition: color 0.2s ease; }
    .footer-bottom .footer-legal a:hover { color: var(--warm-sun); }
    .footer-bottom .partners { display: flex; gap: 24px; align-items: center; opacity: 0.6; }
    .footer-bottom .partners span { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; }

    /* ============ RESPONSIVE ============ */
    @media (max-width: 1024px) {
      .nav, .nav.scrolled { padding: 18px 24px; --nav-inset: 24px; }
      .nav-menu { display: none; }
      .nav-burger { display: flex; }
      .section { padding: 80px 24px; }
      .hero-content { padding: 0 24px 60px; }
      .hero-scroll { display: none; }
      .day-timeline { grid-template-columns: repeat(2, 1fr); }
      .waves { padding: 80px 24px 60px; }
      .waves-header { grid-template-columns: 1fr; gap: 24px; }
      .waves-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
      .waves-footer { grid-template-columns: 1fr; gap: 24px; }
      .pool-zone-label strong { font-size: 13px; }
      .pool-zone-label small { font-size: 8px; }
      .facilities .section-header { grid-template-columns: 1fr; gap: 32px; }
      .facilities-grid { grid-template-columns: repeat(2, 1fr); }
      .athletes-grid { grid-template-columns: 1fr 1fr; }
      .athletes-grid .athlete.lead { grid-column: span 2; }
      .members-inner { grid-template-columns: 1fr; gap: 56px; }
      .footer-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
      .manifesto, .members, .signup { padding: 80px 24px; }
    }
    @media (max-width: 1024px) {
      .construction { padding: 80px 24px 60px; }
      .construction-figure img { aspect-ratio: 16/9; }
      .construction-meta { margin: 32px 0; }
    }
    @media (max-width: 640px) {
      .nav, .nav.scrolled { padding: 16px 20px; --nav-inset: 20px; }
      /* "Seja membro" visível ao lado do hambúrguer (estático, compacto) */
      .nav-actions { gap: 12px; }
      .nav-cta { display: inline-flex; }
      .nav--home .nav-cta { position: static; transform: none; top: auto; right: auto; padding: 10px 18px; font-size: 12px; letter-spacing: .08em; }
      .nav--home.nav-hidden .nav-cta { opacity: 0; pointer-events: none; }
      .day-timeline, .facilities-grid { grid-template-columns: 1fr; }
      .athletes-grid { grid-template-columns: 1fr; }
      .athletes-grid .athlete.lead { grid-column: span 1; }
      .signup-row { grid-template-columns: 1fr; }
      .footer-inner { grid-template-columns: 1fr; }
      .footer-col--menu { display: none; } /* footer menor no mobile: esconde a coluna Menu (duplica o nav) */
      .footer-bottom { flex-direction: column; gap: 16px; }
      .hero-actions { flex-direction: column; align-items: stretch; }
      .hero-actions a { justify-content: center; }
      .construction-figure img { aspect-ratio: 4/3; }
      .waves-grid { grid-template-columns: 1fr; }
      .wave-card-name { font-size: 24px; }
      .pool-diagram { aspect-ratio: 4/3; margin-bottom: 32px; }
      .pool-zone-label strong { font-size: 11px; }
      .pool-zone-label small { display: none; }
      .pool-zone-label { padding: 5px 8px; }
      .pool-diagram-title { font-size: 9px; top: 14px; left: 14px; }
      /* Pico Central acima no mobile */
      .pool-zone-3 { top: 52%; }
      .pool-zone-3 .pool-zone-line { top: -32px; height: 32px; }
      .pool-zone-3 .pool-zone-label { bottom: 22px; top: auto; left: 50%; transform: translateX(-50%); }
      .pool-zone-1, .pool-zone-2 { top: 30%; }
      .pool-zone-1 .pool-zone-line, .pool-zone-2 .pool-zone-line { height: 28px; top: -28px; }
      .pool-zone-1 .pool-zone-label, .pool-zone-2 .pool-zone-label { bottom: 22px; }
    }

    /* Telas estreitas: colapsa o logo para "BSC" (evita colidir com o seletor central) */
    @media (max-width: 760px) {
      .logo-rest { max-width: 0; opacity: 0; }
      .logo-word:not(:last-child) { margin-right: 0; }
    }

/* ============ Transição entre clubes ============ */
.page-curtain {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--forest-floor);
  display: flex; align-items: center; justify-content: center;
  transform: translateY(100%);
  pointer-events: none;
}
.page-curtain-label {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(34px, 6vw, 66px); color: var(--warm-sun);
  letter-spacing: .02em; opacity: 0; transform: translateY(14px);
}
/* Saída (index → clube): cortina sobe cobrindo a tela */
.page-curtain.cover {
  transform: translateY(0);
  transition: transform .58s cubic-bezier(.76,0,.24,1);
  pointer-events: all;
}
.page-curtain.cover .page-curtain-label {
  opacity: 1; transform: translateY(0);
  transition: opacity .42s ease .16s, transform .42s ease .16s;
}
/* Chegada (clube carrega já coberto e revela subindo) */
.page-curtain.auto-reveal {
  transform: translateY(0);
  animation: curtainReveal .72s cubic-bezier(.76,0,.24,1) .28s forwards;
}
.page-curtain.auto-reveal .page-curtain-label {
  opacity: 1; transform: translateY(0);
  animation: curtainLabelOut .5s ease .28s forwards;
}
@keyframes curtainReveal { to { transform: translateY(-100%); } }
@keyframes curtainLabelOut { to { opacity: 0; transform: translateY(-12px); } }

/* Entrada do conteúdo do clube */
.club-enter { opacity: 0; animation: clubFadeUp .85s ease .42s both; }
@keyframes clubFadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
.club-hero > img { animation: heroZoom 7s ease-out both; }
@keyframes heroZoom { from { transform: scale(1.12); } to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .page-curtain { display: none !important; }
  .club-enter { opacity: 1 !important; animation: none !important; }
  .club-hero > img { animation: none !important; }
}

/* ============ CTA final da landing ============ */
.final-cta { text-align: center; background: var(--ivory); }
.final-cta-inner { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.final-cta .section-eyebrow { justify-content: center; }
.final-cta .section-eyebrow::before { display: none; }
.final-cta .section-lead { margin: 22px auto 0; }
.final-cta-btn { margin-top: 34px; }

/* ============ Menu + seletor de clube: painel legível (frosted) ============ */
.menu-overlay,
.club-dropdown {
  background: #1a1e16; /* card chapado: sem backdrop, sem sombra -> zero aura/glow sobre o creme */
  border: 1px solid rgba(247, 245, 231, 0.12);
  border-radius: 14px;
  box-shadow: none;
  color: var(--ivory);
}
.menu-overlay { padding: 4px 22px 16px; }
.club-dropdown { padding: 0; overflow: hidden; }

/* Texto sempre claro sobre o painel escuro — mesmo com o nav em estado "scrolled" */
.nav.scrolled .menu-overlay,
.nav.scrolled .club-dropdown { color: var(--ivory); }
.nav.scrolled .menu-overlay-head,
.nav.scrolled .club-dropdown-head { color: var(--warm-sun); border-bottom-color: rgba(247, 245, 231, 0.18); }
.nav.scrolled .menu-link { border-bottom-color: rgba(247, 245, 231, 0.12); }
.nav.scrolled .menu-link-num { color: var(--warm-sun); }
.nav.scrolled .club-option { border-bottom-color: rgba(247, 245, 231, 0.12); }
.nav.scrolled .club-option-dot { border-color: rgba(247, 245, 231, 0.40); }
.nav.scrolled .club-option.active .club-option-dot { background: var(--warm-sun); border-color: var(--warm-sun); }
.nav.scrolled .club-option.active .club-option-status { color: var(--warm-sun); }

/* ============ Serviços — duas colunas ============ */
.servicos-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}
.servico-col {
  padding: 48px 48px 12px;
  border-left: 1px solid var(--line);
}
.servico-col:first-child { border-left: none; padding-left: 0; }
.servico-col:last-child { padding-right: 0; }
.servico-col-num {
  font-family: var(--sans);
  font-size: 11px; letter-spacing: 0.24em; font-weight: 600;
  color: var(--golden-sun);
}
.servico-icon { width: 46px; height: 46px; margin: 24px 0 22px; color: var(--forest-floor); }
.servico-icon svg { width: 100%; height: 100%; stroke-width: 1.2; }
.servico-col-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(27px, 3.2vw, 36px); line-height: 1.08;
  letter-spacing: -0.012em; color: var(--forest-floor);
}
.servico-col-desc {
  margin-top: 18px; font-size: 15px; line-height: 1.65;
  color: var(--muted-black); opacity: 0.82; max-width: 44ch;
}
.servico-list { list-style: none; margin-top: 26px; }
.servico-list li {
  position: relative; padding: 13px 0 13px 26px;
  border-top: 1px solid var(--line-light);
  font-size: 14px; color: var(--muted-black);
}
.servico-list li::before {
  content: ''; position: absolute; left: 0; top: 18px;
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--golden-sun);
}
@media (max-width: 760px) {
  .servicos-cols { grid-template-columns: 1fr; }
  .servico-col { padding: 40px 0 8px; border-left: none; border-top: 1px solid var(--line); }
  .servico-col:first-child { border-top: none; padding-top: 8px; }
}

/* ============ Botão "Área do sócio" no topo ============ */
.nav-socio {
  font-family: var(--sans);
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: inherit;
  border: 1px solid currentColor;
  border-radius: 100px;
  padding: 9px 18px;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.nav-socio:hover {
  background: var(--warm-sun);
  border-color: var(--warm-sun);
  color: var(--muted-black);
  opacity: 1;
}
@media (max-width: 720px) {
  .nav-discover { display: none; }
  .nav-socio { padding: 8px 14px; letter-spacing: 0.1em; }
}

/* ============ Notícias ============ */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 28px;
  margin-top: 8px;
}
.news-card { display: flex; flex-direction: column; cursor: pointer; }
.news-card-media {
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px;
  background: var(--pale-sage);
}
.news-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.news-card:hover .news-card-media img { transform: scale(1.05); }
.news-card-meta {
  margin-top: 18px; font-family: var(--sans); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  color: var(--golden-sun);
}
.news-card-title {
  margin-top: 10px; font-family: var(--serif); font-weight: 400;
  font-size: 23px; line-height: 1.16; letter-spacing: -0.01em;
  color: var(--forest-floor);
}
.news-card-excerpt {
  margin-top: 12px; font-size: 14px; line-height: 1.6;
  color: var(--muted-black); opacity: 0.78; max-width: 40ch;
}
@media (max-width: 900px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .news-grid { grid-template-columns: 1fr; gap: 34px; } }

/* Notícias na landing — cabeçalho com link "ver todas" */
.news .section-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap;
}
.news-all {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--golden-sun); white-space: nowrap;
  transition: opacity 0.2s ease;
}
.news-all svg { width: 16px; height: 16px; }
.news-all:hover { opacity: 0.65; }

/* ============ Essência — a raiz é a evolução ============ */
.essencia { background: var(--forest-floor); position: relative; padding: 0; }
/* Abertura: (A) intro totem->vídeo, (B) título entra, (C) vídeo sobe (revela o forest -> intro) */
.reveal-hero { position: relative; height: 400vh; }
/* Visitante recorrente (<24h): sem a animação de abertura — só o hero + a subida do vídeo */
@media (prefers-reduced-motion: no-preference) {
  html.intro-skip .reveal-hero { height: 200vh; }
}
html.intro-skip .reveal-hero-pin > .bi-white,
html.intro-skip .reveal-hero-pin > .bi-mask,
html.intro-skip .reveal-hero-pin > .bi-word,
html.intro-skip .reveal-hero-pin > .bi-hint { display: none; }
html.intro-skip .reveal-hero-pin > .hero .hero-content { opacity: 1; }
.reveal-hero-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.reveal-hero-pin > .hero,
.reveal-hero-pin > .intro { position: absolute; inset: 0; height: 100vh; margin: 0; }
.reveal-hero-pin > .intro { z-index: 1; padding: 0; }
/* Composição art-directed (estilo "Um sonho que virou realidade"): imagem grande em cima à direita,
   imagem menor embaixo à esquerda, título sobrepondo à direita, totem abaixo do texto. */
.intro-stage { position: relative; width: 100%; height: 100%; max-width: 1500px; margin: 0 auto; }
.intro-img { position: absolute; object-fit: cover; display: block; border-radius: 2px; box-shadow: 0 30px 70px -42px rgba(0,0,0,.6); }
.intro-img--lg { top: 10%; right: 4%; width: 60%; height: 52%; }
.intro-img--sm { left: 4%; bottom: 8%; width: 30%; height: 40%; object-position: 74% center; }
.intro-aerials { display: none; } /* aéreas extras: só no mobile (desktop usa as imagens absolutas do stage) */
/* totem no canto superior esquerdo; texto no canto inferior direito */
.intro-stage .intro-totem { position: absolute; top: 15%; left: 8%; height: 88px; width: auto; margin: 0; }
.intro-wordmark { display: none; } /* só aparece no mobile (lockup abaixo do totem) */
.intro-headline { position: absolute; right: 4%; bottom: 9%; left: auto; top: auto; text-align: right; }
.intro-headline .intro-title { color: var(--off-white); font-family: var(--serif); font-weight: 300; font-size: clamp(34px, 4.8vw, 76px); line-height: 1.06; letter-spacing: -.02em; margin: 0 0 0 auto; max-width: 8.5em; text-wrap: balance; text-shadow: 0 2px 26px rgba(20,24,18,.5); }
@media (max-width: 860px) {
  /* intro compacta no mobile — #intro p/ vencer as regras duplicadas (.reveal-hero-pin>.intro e .intro de seção) */
  .reveal-hero-pin > #intro, #intro { height: auto; padding: clamp(44px,7vh,80px) 0; }
  #intro .intro-stage { height: auto; max-width: none; display: flex; flex-direction: column; align-items: stretch; gap: clamp(14px, 2.4vh, 22px); margin-top: clamp(40px, 8vh, 84px); }
  #intro .intro-img { position: static !important; inset: auto !important; height: auto !important; border-radius: 2px; }
  #intro .intro-img--lg { width: 88% !important; align-self: flex-end; margin-right: 6vw; aspect-ratio: 16/10; }
  #intro .intro-img--sm { display: none !important; }
  /* imagem do aéreo: trocada de lugar com o render — vai pra CIMA (order:-1); render do skatepark desce */
  #intro .intro-aerials { display: block; order: -1; width: 88%; align-self: flex-end; margin-right: 6vw; }
  #intro .intro-aerials img { display: block; width: 100%; height: auto; border-radius: 2px; box-shadow: 0 30px 70px -42px rgba(0,0,0,.6); }
  /* rodapé da intro: totem no canto inferior-esquerdo + título no inferior-direito, lado a lado */
  #intro .intro-footer { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 14px; padding: clamp(8px,1.5vh,18px) 6vw 0; margin: 0; }
  #intro .intro-lockup { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: clamp(7px,1.3vh,12px); }
  #intro .intro-totem { position: static !important; inset: auto !important; height: 40px; width: auto; margin: 0; }
  #intro .intro-wordmark { display: block; width: clamp(100px, 30vw, 150px); height: auto; }
  #intro .intro-headline { position: static !important; inset: auto !important; text-align: right; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0; }
  #intro .intro-headline .intro-title { font-size: clamp(26px, 7vw, 42px) !important; max-width: 100%; margin: 0 0 0 auto; line-height: 1.12; position: relative; top: 0.22em; }
  /* hero mobile: imagem estática via BACKGROUND cover — o poster de <video> não respeita
     object-fit:cover no iOS Safari (fica "contido"/letterboxed). Background cover preenche certo. */
  .reveal-hero-pin > .hero .hero-media { display: block; }
  .reveal-hero-pin > .hero { height: 100vh; height: 100lvh; background: var(--muted-black); }
  .hero-title { font-size: clamp(36px, 10vw, 46px); }
  /* hero = 100lvh (a maior altura; nunca deixa a próxima seção vazar no iOS quando a barra some).
     O título sobe um pouco p/ não ficar atrás da barra inferior do Safari quando ela está visível. */
  .reveal-hero-pin > .hero .hero-content { padding-bottom: clamp(90px, 13vh, 120px); }
  /* indicador de scroll (linha animada) fica atrás da barra do Safari no mobile — esconder
     (a regra base .hero-scroll{display:flex} vinha depois e vencia o display:none de ≤1024) */
  .reveal-hero-pin > .hero .hero-scroll { display: none; }
  /* sem Lenis no mobile: âncoras suaves nativas + offset do nav */
  html { scroll-behavior: smooth; }
  #comunidade, #arete, #piscina, #tecnologia, #clube-bsc { scroll-margin-top: 64px; }
}
.reveal-hero-pin > .hero { z-index: 2; will-change: transform; }
@media (prefers-reduced-motion: reduce), (max-width: 860px) {
  /* mobile/reduced: sem scroll-scrub — hero e intro viram seções normais em tela cheia */
  .reveal-hero, html.intro-skip .reveal-hero { height: auto; }
  .reveal-hero-pin { position: static; height: auto; overflow: visible; }
  .reveal-hero-pin > .hero, .reveal-hero-pin > .intro, .reveal-hero-pin > .essencia {
    position: relative; inset: auto; height: 100vh; height: 100lvh; min-height: 0; margin: 0;
  }
  .reveal-hero-pin > .bi-white, .reveal-hero-pin > .bi-mask, .reveal-hero-pin > .bi-word, .reveal-hero-pin > .bi-hint { display: none; }
  .reveal-hero-pin > .hero .hero-content { opacity: 1; }
}
/* ===== PEEL Hero → Intro (mobile) — só onde há scroll-driven animation (iOS 26+/Safari 26, Chrome 115+).
   Aditivo: sem suporte, cai no empilhamento atual (hero e intro em telas separadas). O vídeo do hero
   "abre" (desliza pra cima) revelando a intro, que fica fixa por trás. ===== */
@supports (animation-timeline: scroll()) {
  @media (max-width: 860px) {
    .reveal-hero-pin { position: relative; height: 200lvh; overflow: visible; background: var(--forest-floor); }
    .reveal-hero-pin > .hero {
      position: sticky; top: 0; height: 100lvh; z-index: 2; overflow: hidden;
      will-change: transform; transform: translateZ(0);
      animation: heroPeelUp linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100lvh;
    }
    /* vídeo em camada própria de GPU — evita o "preto" que o iOS mostra num <video> transladado */
    .reveal-hero-pin > .hero .hero-media { transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
    #intro.intro {
      position: sticky; top: 0; height: 100lvh; min-height: 100lvh; margin-top: -100lvh; z-index: 1;
      background: var(--forest-floor); /* fundo sólido atrás do hero, caso o vídeo deixe qualquer brecha */
    }
  }
}
@keyframes heroPeelUp { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-100%,0); } }
.essencia-inner { max-width: 760px; margin: 0 auto; }
.essencia .section-eyebrow { justify-content: center; }
.essencia .section-eyebrow::before { display: none; }
.essencia .section-title em { color: var(--golden-sun); }
.essencia .section-lead { margin: 22px auto 0; max-width: 60ch; }
.brand-tree { width: 100%; max-width: 460px; height: auto; margin: 36px auto 4px; display: block; }
.essencia-close { margin-top: 26px; font-family: var(--serif); font-size: clamp(22px, 3.2vw, 30px); line-height: 1.2; color: var(--forest-floor); }
.essencia-close em { font-style: italic; color: var(--golden-sun); }

/* Essência — linha de abertura (insight) */
.essencia-open { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.6vw, 27px); line-height: 1.3; color: var(--forest-floor); opacity: 0.62; margin-top: 0; }
.essencia .section-title { margin-top: 8px; }
.essencia .section-lead strong { color: var(--golden-sun); font-weight: 500; }

/* Essência — grade de ofertas */
.essencia-grid { margin-top: 44px; }
.essencia-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .essencia-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .essencia-grid { grid-template-columns: 1fr; } }

/* ============ As ondas (carrossel de vídeos) ============ */
.ondas { background: var(--cream); }
.ondas-head { max-width: 62ch; }
.ondas-head .section-lead { margin-top: 14px; }
.ondas-carousel { margin-top: 32px; }
.ondas-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ondas-track::-webkit-scrollbar { display: none; }
.onda-card { flex: 0 0 auto; width: clamp(240px, 30vw, 330px); scroll-snap-align: start; position: relative; border-radius: 10px; overflow: hidden; background: var(--forest-floor); }
.onda-media { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.onda-poster { background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
.onda-play { width: 54px; height: 54px; border-radius: 50%; background: rgba(247,241,230,.92); position: relative; }
.onda-play::before { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%,-50%); border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--forest-floor); }
.onda-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px; color: var(--off-white); background: linear-gradient(180deg, transparent, rgba(18,18,14,.8)); }
.onda-tag { font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--warm-sun); }
.onda-name { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.1; margin-top: 3px; }
.ondas-nav { margin-top: 18px; display: flex; gap: 10px; justify-content: flex-end; }
.onda-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--off-white); color: var(--forest-floor); font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.onda-btn:hover { background: var(--forest-floor); color: var(--off-white); border-color: var(--forest-floor); }
@media (max-width: 640px) { .ondas-nav { display: none; } }

/* Sobre — divisória entre história e serviços */
.sobre-servicos-head { margin-top: 58px; padding-top: 40px; border-top: 1px solid var(--line); }
.sobre-servicos-head .section-lead { margin-top: 10px; max-width: 62ch; }

/* ============ Cena imersiva (image-led) ============ */
.scene { position: relative; min-height: 92vh; display: flex; align-items: flex-end; padding: 12vh 8vw; overflow: hidden; color: var(--ivory); }
.scene .scene-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.scene-veil { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(18,18,13,.30) 0%, rgba(18,18,13,0) 30%, rgba(18,18,13,.34) 60%, rgba(18,18,13,.88) 100%); }
.scene-inner { position: relative; z-index: 2; max-width: 780px; }
.scene-eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--warm-sun); margin-bottom: 20px; }
.scene-title { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 6.4vw, 82px); line-height: 1.02; letter-spacing: -.015em; text-wrap: balance; }
.scene-title em { font-style: italic; color: var(--warm-sun); }
.scene-body { margin-top: 22px; max-width: 52ch; font-size: clamp(16px, 2.1vw, 20px); line-height: 1.55; color: rgba(247,245,231,.86); }
@media (max-width: 640px) { .scene { padding: 14vh 24px 10vh; min-height: 88vh; } }

/* ============ Ofertas — editorial (Essência) ============ */
.essencia .offerings { max-width: 1180px; margin: 60px auto 0; display: grid;
  grid-template-columns: 0.92fr 1.08fr; gap: clamp(36px, 5vw, 80px); align-items: stretch; text-align: left; }
.offerings-media { position: relative; overflow: hidden; margin: 0; }
.offerings-media img { width: 100%; height: 100%; min-height: 460px; object-fit: cover; }
.offerings-media figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 26px 22px;
  font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.35; color: var(--ivory);
  background: linear-gradient(180deg, rgba(18,18,13,0) 0%, rgba(18,18,13,.72) 100%); }
.offerings-list { display: flex; flex-direction: column; justify-content: center; }
.offering { padding: 22px 0; border-top: 1px solid var(--line); }
.offering:first-child { border-top: none; padding-top: 0; }
.offering:last-child { padding-bottom: 0; }
.offering-name { font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 2.3vw, 27px);
  letter-spacing: -0.015em; color: var(--muted-black); }
.offering-desc { margin-top: 7px; font-size: 14.5px; line-height: 1.6; color: var(--forest-floor); max-width: 46ch; }
@media (max-width: 860px) {
  .essencia .offerings { grid-template-columns: 1fr; gap: 30px; }
  .offerings-media img { min-height: 320px; }
}

/* ============ Botão dentro das cenas imersivas ============ */
.btn-scene {
  display: inline-flex; align-items: center; gap: 11px; margin-top: 30px;
  padding: 15px 26px; background: rgba(244,241,230,.06);
  border: 1px solid rgba(244,241,230,.45); color: var(--ivory);
  font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  backdrop-filter: blur(2px); transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-scene svg { width: 14px; height: 14px; }
.btn-scene:hover { background: var(--warm-sun); border-color: var(--warm-sun); color: var(--muted-black); transform: translateY(-1px); }

/* ============ Carrossel da Essência ============ */
.essencia-carousel {
  display: flex; gap: 0; margin: 0; padding: 0;
  height: 100vh; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-padding-left: 0;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.essencia-carousel::-webkit-scrollbar { display: none; }
.ess-slide {
  position: relative; flex: 0 0 50vw; margin: 0;
  height: 100vh; scroll-snap-align: start; overflow: hidden;
}
.ess-slide img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: saturate(1.03);
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.ess-slide:hover img { transform: scale(1.04); }
.essencia-carousel { cursor: grab; }
.essencia-carousel.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.essencia-carousel.dragging .ess-slide img { transition: none; transform: none; }
.ess-slide::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(18,18,13,.42) 0%, rgba(18,18,13,0) 30%, rgba(18,18,13,0) 60%, rgba(18,18,13,.5) 100%);
}
.ess-title {
  position: absolute; top: 0; left: 0; z-index: 2; max-width: 92%;
  padding: clamp(24px, 2.6vw, 38px) clamp(24px, 2.6vw, 38px) 0;
  font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.5vw, 42px);
  line-height: 1.06; letter-spacing: -.01em; color: var(--ivory);
}
.ess-tag {
  position: absolute; left: clamp(24px, 2.6vw, 38px); bottom: clamp(22px, 2.4vw, 32px); z-index: 2;
  font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ivory); background: rgba(20, 22, 16, .42); backdrop-filter: blur(4px);
  padding: 7px 12px;
}
.ess-note {
  position: absolute; z-index: 2;
  left: clamp(24px, 2.6vw, 38px); right: clamp(24px, 2.6vw, 38px);
  bottom: clamp(22px, 2.4vw, 32px);
  font-family: var(--sans); font-size: 12.5px; font-weight: 400; line-height: 1.5;
  color: var(--ivory); text-shadow: 0 1px 14px rgba(12, 14, 9, .55);
}
.essencia-actions { position: absolute; right: clamp(24px, 4vw, 48px); bottom: 36px; z-index: 3; margin: 0; }
.essencia-actions .btn-ghost { color: var(--ivory); border-color: rgba(247,245,231,.5); background: rgba(20,24,18,.25); backdrop-filter: blur(6px); }
.essencia-actions .btn-ghost:hover { background: var(--golden-sun); border-color: var(--golden-sun); color: var(--off-white); opacity: 1; }
@media (max-width: 900px) { .essencia-carousel { margin: 0; } }
@media (max-width: 640px) {
  .essencia-carousel { padding: 0; gap: 0; scroll-padding-left: 0; }
  .ess-slide { flex: 0 0 100vw; height: 100vh; }
}

/* ============ Indicador de scroll no hero ============ */
.hero-scroll {
  position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%);
  z-index: 5; width: 20px; height: 52px; display: flex; justify-content: center;
}
.hero-scroll-line {
  position: relative; width: 1px; height: 100%;
  background: linear-gradient(180deg, rgba(244,241,230,.55), rgba(244,241,230,0));
  overflow: hidden;
}
.hero-scroll-line::after {
  content: ''; position: absolute; left: 0; top: -45%; width: 1px; height: 45%;
  background: var(--warm-sun); animation: heroScrollDrop 2s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes heroScrollDrop { 0% { top: -45%; } 55%, 100% { top: 100%; } }

/* ============ Intro (reveal animado estilo destino) ============ */
.intro { background: var(--forest-floor); padding: clamp(96px, 15vh, 168px) 8vw clamp(60px, 9vh, 100px); text-align: center; }
.intro-media { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.8vw, 22px); max-width: 1120px; margin: 0 auto clamp(52px, 8vh, 92px); }
.intro-media img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; display: block; box-shadow: 0 20px 50px -24px rgba(20, 24, 18, .45); }
@media (max-width: 720px) { .intro-media { grid-template-columns: 1fr; } }
.intro-inner { max-width: 940px; margin: 0 auto; }
.intro-eyebrow {
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .28em;
  text-transform: uppercase; color: var(--golden-sun); margin-bottom: 26px;
}
.intro-totem { display: block; height: 62px; width: auto; margin: 0 auto 30px; }
.intro-title {
  font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 5vw, 62px);
  line-height: 1.04; letter-spacing: -.02em; color: var(--off-white); text-wrap: balance;
}
.intro-title .rw { display: inline-block; opacity: 0;
  transform: translateY(1.15em) scale(1.04); filter: blur(10px);
  transition: opacity .9s cubic-bezier(.16,.9,.28,1), transform 1.05s cubic-bezier(.16,.9,.28,1), filter .9s ease; }
.intro-title.in .rw { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
.intro-sub {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(26px, 4.4vw, 54px); line-height: 1.1;
  color: var(--warm-sun); margin-top: 14px;
}
.intro-sub.reveal-fade { transition-delay: .5s; }
.intro-body {
  margin: 28px auto 0; max-width: 58ch; font-size: clamp(16px, 2vw, 21px);
  line-height: 1.62; color: var(--forest-floor);
}
.reveal-fade { opacity: 0; transform: translateY(30px); filter: blur(6px);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.16,.9,.28,1), filter 1.1s ease; }
.reveal-fade.in { opacity: 1; transform: translateY(0); filter: blur(0); }
.intro-eyebrow.reveal-fade { transition-duration: .8s; }
.intro-body.reveal-fade { transition-delay: .7s; }
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-line::after { animation: none; }
  .intro-title .rw, .reveal-fade { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ============ Reveal escalonado do carrossel (Essência) ============ */
.essencia-carousel .ess-slide {
  opacity: 0; transform: translateY(48px) scale(.98); filter: blur(8px);
  transition: opacity .9s ease, transform 1s cubic-bezier(.16,.9,.28,1), filter .9s ease;
}
.essencia-carousel.in .ess-slide { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
.essencia-carousel.in .ess-slide:nth-child(1) { transition-delay: .00s; }
.essencia-carousel.in .ess-slide:nth-child(2) { transition-delay: .11s; }
.essencia-carousel.in .ess-slide:nth-child(3) { transition-delay: .22s; }
.essencia-carousel.in .ess-slide:nth-child(4) { transition-delay: .33s; }
.essencia-carousel.in .ess-slide:nth-child(5) { transition-delay: .44s; }
.essencia-carousel.in .ess-slide:nth-child(6) { transition-delay: .55s; }
/* título e tag sobem um tico depois da imagem */
.essencia-carousel .ess-slide .ess-title,
.essencia-carousel .ess-slide .ess-note,
.essencia-carousel .ess-slide .ess-tag {
  transform: translateY(14px); opacity: 0; transition: opacity .7s ease .15s, transform .7s ease .15s;
}
.essencia-carousel.in .ess-slide .ess-title,
.essencia-carousel.in .ess-slide .ess-note,
.essencia-carousel.in .ess-slide .ess-tag { transform: translateY(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .essencia-carousel .ess-slide,
  .essencia-carousel .ess-slide .ess-title,
  .essencia-carousel .ess-slide .ess-note,
  .essencia-carousel .ess-slide .ess-tag { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ============ Reveal da cena do Manifesto ============ */
.scene-manifesto .scene-img { transform: scale(1.14); transition: transform 2.2s cubic-bezier(.2,.7,.2,1); }
.scene-manifesto.in .scene-img { transform: scale(1); }
.scene-manifesto .scene-eyebrow,
.scene-manifesto .scene-title,
.scene-manifesto .btn-scene {
  opacity: 0; transform: translateY(34px); filter: blur(9px);
  transition: opacity 1s ease, transform 1.1s cubic-bezier(.16,.9,.28,1), filter 1s ease;
}
.scene-manifesto.in .scene-eyebrow { transition-delay: .10s; }
.scene-manifesto.in .scene-title  { transition-delay: .24s; }
.scene-manifesto.in .btn-scene    { transition-delay: .52s; }
.scene-manifesto.in .scene-eyebrow,
.scene-manifesto.in .scene-title,
.scene-manifesto.in .btn-scene { opacity: 1; transform: translateY(0); filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  .scene-manifesto .scene-img { transform: none; transition: none; }
  .scene-manifesto .scene-eyebrow,
  .scene-manifesto .scene-title,
  .scene-manifesto .btn-scene { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ============ Lenis (smooth scroll) ============ */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ============ Abas (páginas de clube) ============ */
.tabs-section { background: var(--ivory); }
.tabs-inner { max-width: 1180px; margin: 0 auto; }
.tabs-inner .section-title { margin-top: 8px; }
.tabs {
  display: flex; flex-wrap: wrap; gap: 6px 36px; margin: 40px 0 0;
  border-bottom: 1px solid var(--line);
}
.tab {
  appearance: none; background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sage); padding: 0 0 16px; position: relative;
  transition: color .2s ease;
}
.tab:hover { color: var(--forest-floor); }
.tab.is-active { color: var(--muted-black); }
.tab.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--golden-sun);
}
.tab-panels { margin-top: 44px; }
.tab-panel { display: none; }
.tab-panel.is-active {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px);
  align-items: center; animation: tabfade .55s cubic-bezier(.16,.9,.28,1);
}
@keyframes tabfade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.tab-media { overflow: hidden; }
.tab-media img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.tab-copy h3 {
  font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 3vw, 42px);
  line-height: 1.08; letter-spacing: -.01em; color: var(--muted-black);
}
.tab-copy h3 em { font-style: italic; color: var(--golden-sun); }
.tab-copy p { margin-top: 16px; font-size: 16px; line-height: 1.65; color: var(--forest-floor); max-width: 52ch; }
.tab-chips { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.tab-actions { margin-top: 28px; }
@media (max-width: 780px) {
  .tab-panel.is-active { grid-template-columns: 1fr; gap: 28px; }
  .tab-media img { min-height: 240px; }
  .tabs { gap: 6px 24px; }
}

/* ============ Correção de estouro horizontal (grid + imagem no mobile) ============ */
/* Permite que colunas de grid encolham abaixo da largura intrínseca da imagem */
.members-inner > *, .tab-panel > * { min-width: 0; }
.members-text, .tab-copy, .tab-media { min-width: 0; }
.tab-media img { max-width: 100%; }

/* ============ Formulário de cadastro ============ */
/* honeypot: fora da tela, mas presente no DOM */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.phone-group { display: grid; grid-template-columns: 96px 1fr; gap: 8px; }
.signup-consent {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 12px;
  text-align: left; font-size: 12.5px; line-height: 1.5; color: var(--forest-floor);
}
.signup-consent input { width: auto; margin-top: 3px; flex-shrink: 0; accent-color: var(--golden-sun); }
.signup-consent a { color: var(--golden-sun); text-decoration: underline; }
.signup-consent em { opacity: .6; font-style: italic; }
.form-status { margin-top: 14px; font-size: 13px; min-height: 18px; text-align: center; }
.form-status.err { color: #b23b3b; }
.signup-success { margin-top: 48px; text-align: center; animation: tabfade .5s ease; }
.signup-success .success-check {
  width: 58px; height: 58px; margin: 0 auto 22px; border-radius: 50%;
  background: var(--golden-sun); color: var(--off-white);
  display: flex; align-items: center; justify-content: center; font-size: 30px; line-height: 1;
}
.signup-success h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 4vw, 40px); letter-spacing: -.01em; color: var(--muted-black); }
.signup-success p { margin-top: 12px; color: var(--forest-floor); font-size: 16px; }

.signup-form[hidden] { display: none; }

/* ============ Página Tecnologia ============ */
.tech-caps { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .tech-caps { grid-template-columns: 1fr; } }

.tech-wave { background: var(--forest-floor); color: var(--ivory); padding: 60px 48px; }
.tech-wave-inner {
  max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 24px 48px;
}
.tech-wave h3 {
  font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.12; letter-spacing: -.01em; max-width: 20ch;
}
.tech-wave h3 em { font-style: italic; color: var(--warm-sun); }
.tech-wave p { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: rgba(247,245,231,.68); max-width: 46ch; }
.tech-wave-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.tech-wave-chip {
  border: 1px solid rgba(247,245,231,.3); padding: 9px 15px;
  font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .04em; white-space: nowrap;
}
@media (max-width: 640px) { .tech-wave { padding: 44px 24px; } }

/* container do phone mock dentro da aba App */
.tab-media-app {
  display: flex; align-items: center; justify-content: center;
  background: var(--forest-floor); padding: 48px 24px; min-height: 360px; overflow: hidden;
}
.tab-media-app .phone-mock { max-width: 268px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.55); }

/* ============ Página Sobre (abas) ============ */
.about-services { margin-top: 24px; display: flex; flex-direction: column; gap: 18px; }
.about-services strong {
  display: block; font-family: var(--serif); font-weight: 500; font-size: 19px;
  letter-spacing: -.01em; color: var(--muted-black);
}
.about-services span { display: block; margin-top: 5px; font-size: 14px; line-height: 1.55; color: var(--forest-floor); max-width: 46ch; }
.about-projects { display: flex; gap: 14px; flex-wrap: wrap; }
.about-projects .btn-ghost { color: var(--forest-floor); border-color: rgba(62,70,51,.35); padding: 13px 22px; }
.about-projects .btn-ghost:hover { background: var(--forest-floor); border-color: var(--forest-floor); color: var(--ivory); opacity: 1; }

/* ============ Página jurídica (prose) ============ */
.legal { max-width: 760px; margin: 0 auto; padding: 140px 24px 100px; }
/* Botão "Voltar" das páginas legais (sem nav completo) — fundo claro, texto escuro */
.legal-back { position: fixed; top: clamp(20px, 3vh, 34px); left: clamp(20px, 4vw, 48px); z-index: 200; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-black); text-decoration: none; transition: opacity .2s ease; }
.legal-back:hover { opacity: .6; }
.legal-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.legal h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(34px, 6vw, 56px); line-height: 1.05; letter-spacing: -.01em; color: var(--muted-black); margin-top: 10px; }
.legal-updated { margin-top: 10px; font-size: 13px; color: var(--sage); }
.legal h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 3vw, 26px); color: var(--muted-black); margin-top: 42px; }
.legal p, .legal li { font-size: 15px; line-height: 1.75; color: var(--forest-floor); margin-top: 14px; }
.legal ul { margin-top: 8px; padding-left: 20px; }
.legal a { color: var(--golden-sun); text-decoration: underline; }
.legal-placeholder { margin-top: 40px; padding: 24px; background: var(--cream); border-left: 2px solid var(--golden-sun); font-style: italic; color: var(--forest-floor); }
@media (max-width: 640px) { .legal { padding: 110px 20px 70px; } }

/* lista com check dentro das abas */
.tab-list { list-style: none; margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.tab-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; line-height: 1.55; color: var(--forest-floor); }
.tab-list svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--golden-sun); }

/* rótulo de categoria dentro das abas (parcerias) */
.tab-cat { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--golden-sun); margin-bottom: 12px; }

/* ============ Galeria (seções) ============ */
.gallery-head { max-width: 760px; margin-bottom: 44px; }
.gallery-head .section-lead { margin-top: 14px; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gallery-item { position: relative; overflow: hidden; aspect-ratio: 4 / 3; margin: 0; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 42px 18px 16px;
  color: var(--ivory); font-family: var(--serif); font-weight: 400; font-size: clamp(17px, 1.7vw, 22px);
  letter-spacing: -.01em;
  background: linear-gradient(180deg, rgba(18,18,13,0), rgba(18,18,13,.8));
}
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery-grid { grid-template-columns: 1fr; } }

/* painel de aba em largura cheia (galeria) */
.tab-panel--wide.is-active { display: block; }
.gallery-lead { max-width: 60ch; margin: 0 0 36px; font-size: clamp(16px, 2vw, 19px); line-height: 1.6; color: var(--forest-floor); }

/* galeria: abas começam logo após o hero (sem título repetido) */
#galeria { padding-top: 48px; }
#galeria .tabs { margin-top: 0; }

/* ============ Galeria: exposição de arte (ondas) ============ */
.exhibit { display: flex; flex-direction: column; gap: 0; margin-top: 8px; }
.exhibit-piece { margin: 0; width: min(54%, 620px); position: relative; z-index: 1; }
.exhibit-piece:nth-child(even) { margin-left: auto; }
.exhibit-piece:not(:first-child) { margin-top: -84px; }
.exhibit-piece:hover { z-index: 5; }
.exhibit-media { overflow: hidden; background: var(--cream); box-shadow: 0 40px 90px -50px rgba(32,31,26,.5); }
.exhibit-media img, .exhibit-media video { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.exhibit-piece:hover .exhibit-media img, .exhibit-piece:hover .exhibit-media video { transform: scale(1.03); }
.exhibit-label { margin-top: 18px; display: flex; align-items: baseline; gap: 14px; }
.exhibit-piece:nth-child(even) .exhibit-label { justify-content: flex-end; }
.exhibit-num { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--golden-sun); }
.exhibit-name { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.01em; color: var(--muted-black); }
.exhibit-meta { align-self: center; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--sage); }
@media (max-width: 720px) { .exhibit-piece, .exhibit-piece:nth-child(even) { width: 100%; margin-left: 0; } }

/* ============ Lightbox (galeria) ============ */
.exhibit-media { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 2000; display: none;
  align-items: center; justify-content: center; padding: 6vh 5vw;
  background: rgba(18,18,13,.93); backdrop-filter: blur(4px);
}
.lightbox.open { display: flex; animation: tabfade .3s ease; }
.lightbox-content { max-width: 1100px; width: 100%; display: flex; align-items: center; justify-content: center; }
.lightbox-content video, .lightbox-content img { width: 100%; max-height: 84vh; object-fit: contain; display: block; }
.lightbox-close {
  position: absolute; top: 22px; right: 28px; width: 44px; height: 44px;
  background: none; border: none; color: var(--ivory); font-size: 34px; line-height: 1; cursor: pointer; opacity: .8;
}
.lightbox-close:hover { opacity: 1; }
.lightbox-cap {
  position: absolute; bottom: 26px; left: 0; right: 0; text-align: center;
  color: rgba(247,245,231,.82); font-family: var(--serif); font-style: italic; font-size: 18px;
}

/* TESTE — vídeos lado a lado em quadrados (aba Ondas da galeria) */
.video-squares {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 26px 0 10px;
}
.video-squares .vsq {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--cream);
  box-shadow: 0 30px 70px -45px rgba(32, 31, 26, 0.5);
}
.video-squares .vsq video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 720px) {
  .video-squares { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============ Galeria — O que somos + Clubes ============ */
.galeria-about { background: var(--ivory); }
.ga-clubs { margin-top: 72px; }
.ga-clubs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.ga-club {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 34px 36px; background: var(--ivory);
  border: 1px solid rgba(62, 70, 51, .16);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.ga-club:hover {
  border-color: var(--golden-sun); transform: translateY(-2px);
  box-shadow: 0 30px 60px -45px rgba(32, 31, 26, .45);
}
.ga-club-name { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 32px); color: var(--muted-black); line-height: 1.1; }
.ga-club-status { font-family: var(--text); font-size: 13px; letter-spacing: .01em; color: var(--sage); }
.ga-club-arrow { position: absolute; top: 34px; right: 36px; color: var(--golden-sun); font-size: 20px; transition: transform .25s ease; }
.ga-club:hover .ga-club-arrow { transform: translateX(5px); }
@media (max-width: 720px) { .ga-clubs-grid { grid-template-columns: 1fr; } }

/* ============ Botão "Faça parte" no nav (páginas internas) ============ */
.nav-cta {
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
  color: inherit; padding: 11px 20px; border: 1px solid currentColor;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.nav-cta:hover { background: var(--golden-sun); border-color: var(--golden-sun); color: var(--off-white); }

/* ============ Pop-up de anúncio dos clubes (canto inferior direito) ============ */
.promo {
  position: fixed; z-index: 200; right: 24px; bottom: 24px;
  width: 344px; max-width: calc(100vw - 32px);
  background: rgba(253, 252, 247, 0.78); color: var(--muted-black);
  -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: 0 40px 90px -38px rgba(20, 24, 18, .55);
  overflow: hidden;
  opacity: 0; transform: translateY(24px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.16, .9, .28, 1);
}
.promo.is-visible { opacity: 1; transform: translateY(0); }
.promo[hidden] { display: none; }
.promo-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 30px; height: 30px; display: grid; place-items: center;
  background: rgba(253, 252, 247, .82); backdrop-filter: blur(4px);
  border: none; border-radius: 50%; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--muted-black);
  transition: background .2s ease;
}
.promo-close:hover { background: var(--off-white); }
.promo-media { display: block; height: 152px; overflow: hidden; }
.promo-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.promo-media:hover img { transform: scale(1.04); }
.promo-body { padding: 20px 22px 24px; }
.promo-eyebrow { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--golden-sun); margin-bottom: 10px; }
.promo-title { font-family: var(--serif); font-weight: 400; font-size: 27px; line-height: 1.1; color: var(--muted-black); margin: 0 0 9px; }
.promo-text { font-family: var(--text); font-size: 14px; line-height: 1.5; color: var(--forest-floor); margin: 0 0 16px; }
.promo-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--off-white); background: var(--forest-floor); padding: 12px 20px;
  transition: background .2s ease;
}
.promo-btn:hover { background: var(--golden-sun); }
.promo-actions { display: flex; align-items: center; gap: 18px; }
.promo-link {
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--forest-floor); white-space: nowrap;
  border-bottom: 1px solid rgba(62, 70, 51, .3); padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.promo-link:hover { color: var(--golden-sun); border-color: var(--golden-sun); }
/* abaixo de 640px o botão flutuante some, então o pop-up volta pro rodapé */
@media (max-width: 640px) { .promo { right: 12px; left: 12px; bottom: 12px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .promo { transition: opacity .3s ease; transform: none; } }

/* ============ Sobre — editorial imagem + texto (estilo IZZA) ============ */
.about-izza {
  display: grid; grid-template-columns: 1.02fr 0.98fr; align-items: center;
  gap: clamp(40px, 6vw, 104px);
  max-width: 1440px; margin: 0 auto;
  padding: clamp(72px, 11vh, 130px) clamp(24px, 5vw, 72px) clamp(96px, 16vh, 200px);
  background: var(--ivory);
}
.ai-media { margin: 0; overflow: hidden; align-self: stretch; }
.ai-media img {
  width: 100%; height: 100%; min-height: clamp(440px, 72vh, 780px);
  object-fit: cover; display: block;
  transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.ai-media:hover img { transform: scale(1.035); }
.ai-text { max-width: 32rem; }
.ai-lead {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(28px, 3.8vw, 50px); line-height: 1.1; letter-spacing: -.01em;
  color: var(--muted-black); margin: 20px 0 0; text-wrap: balance;
}
.ai-body {
  font-family: var(--text); font-size: clamp(16px, 1.55vw, 19px); line-height: 1.72;
  color: var(--forest-floor); margin: 28px 0 0; max-width: 44ch;
}
/* Variante espelhada: imagem à direita (mesma seção editorial do clube) */
.about-izza--right .ai-media { order: 2; }
.about-izza--right .ai-text { order: 1; }
@media (max-width: 860px) {
  .about-izza { grid-template-columns: 1fr; gap: 34px; padding-left: 24px; padding-right: 24px; padding-top: clamp(48px, 7vh, 76px); padding-bottom: clamp(48px, 7vh, 76px); }
  .ai-media img { min-height: 58vh; }
  /* no mobile empilha na ordem do DOM (imagem em cima) nas duas variantes */
  .about-izza--right .ai-media, .about-izza--right .ai-text { order: 0; }
}

/* Botões da seção editorial "O clube" */
.ai-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.ai-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  padding: 15px 26px; border: 1px solid transparent; white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ai-btn-primary { background: var(--forest-floor); color: var(--ivory); border-color: var(--forest-floor); }
.ai-btn-primary:hover { background: var(--golden-sun); border-color: var(--golden-sun); color: var(--off-white); }
.ai-btn-ghost { background: transparent; color: var(--forest-floor); border-color: rgba(62,70,51,.4); }
.ai-btn-ghost:hover { border-color: var(--forest-floor); background: rgba(62,70,51,.06); }

/* Tema escuro de teste: fundo escuro + dourado (warm-sun) + texto off-white */
/* Slide compacto: a seção ocupa ~1 tela (100vh); imagem preenche (cover), título ancora embaixo à direita. */
.about-izza--dark { background: var(--golden-sun); align-items: stretch; height: 100vh; box-sizing: border-box; grid-template-rows: minmax(0, 1fr); max-width: none; margin: 0; padding: clamp(64px,9vh,96px) max(clamp(24px,5vw,72px), calc((100% - 1440px) / 2)) clamp(28px,3vh,44px); }
.about-izza--dark .ai-media { height: 100%; box-shadow: none; overflow: visible; }
.about-izza--dark .ai-media img { min-height: 0; height: 100%; width: auto; max-width: 100%; display: block; object-fit: contain; box-shadow: 0 24px 60px -28px rgba(20,24,18,.5); }  /* imagem inteira (retrato), sem corte; sombra propria */
.about-izza--dark .ai-text { display: flex; flex-direction: column; max-width: none; min-height: 0; }
/* body no topo, título grande ancorado no canto inferior direito */
.about-izza--dark .ai-body { order: 1; margin: 0 0 0 auto; text-align: right; max-width: 46ch; color: var(--off-white); font-weight: 500; }
.about-izza--dark .ai-actions { order: 2; justify-content: flex-end; }
.about-izza--dark .ai-lead { order: 3; margin: auto 0 0; text-align: right; color: var(--off-white); font-weight: 400; font-size: clamp(34px, 4.6vw, 68px); line-height: 1.02; }
@media (max-width: 860px) {
  .about-izza--dark { height: auto; grid-template-rows: none; padding-top: clamp(80px,12vh,100px); padding-bottom: clamp(40px,6vh,56px); }
  .about-izza--dark .ai-media { height: auto; }
  .about-izza--dark .ai-media img { height: auto; width: 72%; max-width: 330px; min-height: 0; margin: 0 auto; }
  .about-izza--dark .ai-body { margin: 0; text-align: left; }
  .about-izza--dark .ai-actions { justify-content: flex-start; }
  .about-izza--dark .ai-lead { margin-top: clamp(44px, 9vh, 80px); max-width: 100%; text-align: right; font-size: clamp(32px, 8vw, 48px); }
}
.about-izza--dark .ai-btn-primary { background: transparent; color: var(--muted-black); border-color: var(--muted-black); }
.about-izza--dark .ai-btn-primary:hover { background: var(--muted-black); color: var(--off-white); border-color: var(--muted-black); }
.about-izza--dark .ai-btn-ghost { color: var(--muted-black); border-color: rgba(32, 31, 26, 0.4); }
.about-izza--dark .ai-btn-ghost:hover { background: var(--muted-black); color: var(--off-white); border-color: var(--muted-black); }

/* ============ Abertura (intro totem -> vídeo) — overlays sobre o vídeo do hero ============ */
/* os overlays vivem DENTRO do .reveal-hero-pin, por cima do .hero (z2), e usam o MESMO vídeo (hero-media) */
.reveal-hero-pin { background: #000; }
.reveal-hero-pin > .bi-white { position: absolute; inset: 0; z-index: 3; background: #fff; will-change: opacity; }
.reveal-hero-pin > .bi-mask { position: absolute; inset: 0; z-index: 4; background: #000; mix-blend-mode: multiply; will-change: opacity; }
.reveal-hero-pin > .bi-mask .bi-totem { position: absolute; left: 50%; top: 50%; width: clamp(90px,12vw,168px); height: auto; opacity: 0; filter: brightness(0) invert(1); transform: translate(-50%, calc(-50% - 50px)) scale(1); will-change: transform, opacity; }
.reveal-hero-pin > .bi-word { position: absolute; left: 50%; top: 50%; z-index: 5; opacity: 0; transform: translate(-50%, calc(-50% + 20px)); display: flex; align-items: baseline; color: #ffffff; font-family: var(--sans); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: clamp(36px,6vw,78px); white-space: nowrap; will-change: opacity, transform; }
.reveal-hero-pin > .bi-word .biw { display: inline-flex; align-items: baseline; }
.reveal-hero-pin > .bi-word .biw:not(:last-child) { margin-right: 0; } /* espaçamento dirigido pelo scroll (JS) */
.reveal-hero-pin > .bi-word .bir { display: inline-block; overflow: hidden; max-width: 0; opacity: 0; } /* expansão BSC->nome dirigida pelo scroll (JS) */
.reveal-hero-pin > .bi-word .bi-oneline { display: block; flex-shrink: 0; max-width: none; width: clamp(440px, 68vw, 1120px); height: auto; }
.reveal-hero-pin > .bi-hint { position: absolute; z-index: 6; bottom: 30px; left: 50%; transform: translateX(-50%); font-family: var(--sans); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(247,245,231,.65); will-change: opacity; }
.reveal-hero-pin > .bi-hint::after { content: ''; display: block; width: 1px; height: 26px; margin: 12px auto 0; background: rgba(247,245,231,.45); }
/* nav escondido enquanto a intro está ativa */
html.intro-active .nav { opacity: 0 !important; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-hero-pin > .bi-white, .reveal-hero-pin > .bi-word, .reveal-hero-pin > .bi-hint { display: none; }
  .reveal-hero-pin > .bi-mask { mix-blend-mode: normal; background: transparent; }
  .reveal-hero-pin > .bi-mask .bi-totem { display: none; }
}

/* ============ Faixa de fotos (interlúdio artístico entre Clube e Parcerias) ============ */
/* Peels em cadeia: comunidade -> imagens -> Aretê. As duas "capas" (sp-cover) prendem no topo
   (sticky) e sobem 1:1 com o scroll (JS), revelando a próxima; o Aretê (sp-base) é conteúdo real
   que segue rolando por baixo. Só no desktop; no mobile fica tudo em fluxo normal. */
.slides-peel { position: relative; }
.sp-runway { display: none; } /* spacer-runway só no peel mobile (desktop usa padding-bottom + JS) */
@media (min-width: 901px) {
  /* Mesmo esquema do reveal do hero: a capa (imagens, z2) prende no topo e SOBE desde o início;
     o Aretê (z1) fica PARADO atrás (o JS o mantém congelado por ~1 tela via transform), e depois
     volta a rolar. O padding-bottom dá o "runway" da parada; a seção seguinte (.sp-after) sobe pra
     cobrir esse runway (sem buraco). */
  .slides-peel { padding-bottom: 100vh; }
  .slides-peel > .sp-cover { position: sticky; top: 0; height: 100vh; overflow: hidden; z-index: 2; display: flex; flex-direction: column; justify-content: center; will-change: transform; }
  .slides-peel > .sp-cover .pb-collage { margin-top: 0; }
  .slides-peel > .sp-base { position: relative; z-index: 1; margin-top: -100vh; will-change: transform; }
  /* #ondas5 vira capa (100vh, overflow hidden). Foto INTEIRA (sem corte), o mais alta possível:
     top ~0 encosta no topo da capa. Este é o teto sem cortar; negativo cortaria o topo da imagem. */
  #ondas5.sp-cover .es48-cta-img { top: clamp(0px, 1vh, 12px); }
}

/* === PEEL MOBILE #1: capa photo-band compactada em 1 tela (gated iOS 26+; fallback mantém a colagem alta) === */
@supports (animation-timeline: scroll()) {
  @media (max-width: 860px) {
    .slides-peel > .photo-band.sp-cover {
      height: 100lvh; overflow: hidden; padding: clamp(12px, 2.5vh, 26px) 0;
      display: flex; flex-direction: column; justify-content: center;
    }
    .photo-band.sp-cover .pb-collage {
      position: static; height: 100%; margin: 0; padding: 0 clamp(14px, 4vw, 26px);
      display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr 0.82fr; gap: 8px;
    }
    .photo-band.sp-cover .pb-yago       { grid-column: 1; grid-row: 1 / 3; }
    .photo-band.sp-cover .pb-vb         { grid-column: 2; grid-row: 1; aspect-ratio: auto; }
    .photo-band.sp-cover .pb-mich       { grid-column: 2; grid-row: 2; aspect-ratio: auto; }
    .photo-band.sp-cover .pb-mich-beach { grid-column: 1 / -1; grid-row: 3; width: 100%; justify-self: stretch; margin: 0; aspect-ratio: auto; }
    .photo-band.sp-cover .pb-angra      { display: none; }
    .photo-band.sp-cover .pb-collage .pb-portrait { height: 100%; }
    .photo-band.sp-cover .pb-collage .pb-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
    .photo-band.sp-cover .pb-collage .pb-mich-beach img { object-position: center top; } /* sobe o enquadramento p/ pegar o corpo da Michelle (topo da foto) */

    /* --- MOVIMENTO do peel #1: capa (photo-band) sobe revelando o Aretê (base) --- */
    .slides-peel > .sp-runway { display: block; height: 100lvh; } /* runway de CONTEÚDO (não padding): dá alcance ao sticky da base */
    /* capa só rola normal por cima (z2) — SEM sticky/animação (evita a tremida do sticky+transform no iOS);
       o reveal vem 100% do congelamento da base abaixo */
    .slides-peel > .photo-band.sp-cover { position: relative; z-index: 2; }
    /* base (Aretê) congelada por STICKY NATIVO (sem transform = sem lag/tremida): prende ~1 tela (runway)
       enquanto a capa rola por cima revelando-a, depois solta e rola normal. */
    .slides-peel > #arete.sp-base {
      position: sticky; top: 0; margin-top: -100lvh; z-index: 1; background: var(--ivory);
    }

    /* === PEEL #2: capa wave-cone compactada em 1 tela (full-bleed, coladas, como o fim de A Onda original) === */
    .slides-peel > .wave-cover.sp-cover {
      height: 100lvh; overflow: hidden; padding: 0; position: relative; z-index: 2;
      display: flex; flex-direction: column; justify-content: center;
    }
    .wave-cover.sp-cover .wave-cone {
      height: 100%; margin: 0; padding: 0;
      display: flex; flex-direction: column; gap: 0;
    }
    /* capa = tubulares + header + onda-de-lado; header em célula menor (0.72) p/ cortar menos — é panorâmica */
    .wave-cover.sp-cover .wave-cone .wc-1,
    .wave-cover.sp-cover .wave-cone .wc-lado { flex: 1.15 1 0; min-height: 0; width: 100%; border-radius: 0; }
    .wave-cover.sp-cover .wave-cone .wc-4 { flex: 0.72 1 0; min-height: 0; width: 100%; border-radius: 0; }
    .wave-cover.sp-cover .wave-cone figure img { width: 100%; height: 100%; object-fit: cover; }
    /* --- MOVIMENTO do peel #2: capa wave-cone (z2, rola por cima) → Carver (base sticky, congela, revela) --- */
    .slides-peel > #tecnologia.sp-base {
      position: sticky; top: 0; margin-top: -100lvh; z-index: 1; background: var(--carver-ochre);
    }
  }
}

/* === PEEL #3 (mobile): a ÚLTIMA tela da Carver sobe revelando o Brasil Surfe Clube (base atrás) === */
@supports (animation-timeline: scroll()) {
  @media (max-width: 860px) {
    .peel-m3 { position: relative; }
    /* #clube-bsc prende atrás (z0, atrás da Carver z1 do peel #2) e sobrepõe a última tela da Carver via margin negativa */
    .peel-m3 > #clube-bsc.peel3-base { position: sticky; top: 0; margin-top: -100lvh; z-index: 0; min-height: 100lvh; }
    .peel-m3 > .sp-runway { display: block; height: 100lvh; }
  }
}

.photo-band { background: var(--golden-sun); padding: clamp(30px, 6vh, 70px) clamp(24px, 5vw, 64px) clamp(40px, 8vh, 92px); overflow: hidden; }
.photo-band-row { display: flex; gap: clamp(12px, 1.8vw, 28px); align-items: flex-start; justify-content: center; }
.photo-band-cta { text-align: center; margin-top: clamp(26px, 4vh, 46px); }
.pb-collage { position: relative; height: clamp(500px, 62vh, 640px); margin: clamp(20px, 3vh, 36px) 0 0; }
.pb-portrait { margin: 0; overflow: hidden; }
.pb-portrait img { width: 100%; height: auto; display: block; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.pb-portrait:hover img { transform: scale(1.04); }
.pb-collage .pb-portrait { position: absolute; width: auto; }
.pb-collage .pb-portrait img { width: auto; height: 100%; display: block; }  /* proporção natural de cada imagem — sem corte */
.pb-yago    { height: 90%; top: 0;    left: 34%; transform: translateX(-50%); z-index: 1; box-shadow: 0 26px 66px -28px rgba(20,24,18,.55); }  /* Yago (retrato) centro, empurrado para a esquerda */
.pb-mich    { height: 68%; top: -6%;  right: 34%; z-index: 3; box-shadow: 0 24px 60px -28px rgba(20,24,18,.55); }  /* Michelle prancha, um pouco em cima e à esquerda da silhueta (angra) */
.pb-vb      { height: 95%; bottom: calc(-1 * clamp(40px, 8vh, 92px)); left: calc(-1 * clamp(24px, 5vw, 64px)); z-index: 3; box-shadow: 28px -22px 80px -26px rgba(20,24,18,.6); }  /* retrato, colado na borda inferior-esquerda; sombra p/ cima-direita */
.pb-angra   { height: 65%; bottom: 10%; right: calc(-1 * clamp(24px, 5vw, 64px)); z-index: 2; box-shadow: -28px -22px 80px -26px rgba(20,24,18,.6); }  /* paisagem (silhueta da praia); colada na direita; sombra p/ cima-esquerda */
.pb-mich-beach { display: none; }  /* só no mobile (full-width abaixo da colagem) */
/* Capa de ondas: 2 imagens da esquerda + 2 da direita convergindo na diagonal p/ 1 no meio */
.wave-cover { background: var(--sage); }
.wave-cone { position: relative; width: 100%; max-width: clamp(780px, 96vw, 1440px); height: clamp(560px, 82vh, 800px); margin: 0 auto; }
.wave-cone figure { position: absolute; margin: 0; overflow: hidden; border-radius: 2px; box-shadow: 0 34px 80px -28px rgba(20,24,18,.62); }
.wave-cone img { width: 100%; height: auto; display: block; }   /* proporção natural — sem corte */
/* moodboard espalhado: tamanhos variados, de ponta a ponta, cada foto inteira */
.wave-cone .wc-1 { width: clamp(380px, 43vw, 700px); top: -7%;  left: 1%;  z-index: 2; }   /* cara no tubo (sup. esq.) */
.wave-cone .wc-2 { width: clamp(340px, 37vw, 580px); top: 56%; left: 1%;  z-index: 3; }   /* manobras */
.wave-cone .wc-3 { width: clamp(420px, 49vw, 780px); top: 38%; left: 60%; transform: translateX(-50%); z-index: 4; }   /* footer-hero — banner central, um pouco à direita */
.wave-cone .wc-3 img { aspect-ratio: 2.3; object-fit: cover; object-position: 82% center; }   /* mais alto: corta a água vazia da esquerda, mantém o surfista */
.wave-cone .wc-4 { width: clamp(400px, 44vw, 660px); top: 80%; right: 1%; z-index: 3; }   /* header (inf. dir.) */
.wave-cone .wc-5 { width: clamp(370px, 42vw, 680px); top: -6%;  right: 1%; z-index: 2; }
.wave-cone .wc-lado { display: none; }   /* onda de lado: só no mobile (substitui a wc-5) */   /* onda-tubular (onda pura, sup. dir.) — mais alta e maior */
@media (max-width: 900px) {
  .wave-cover { padding: clamp(14px, 2.6vh, 26px) 0 0; }
  .wave-cone { position: static; height: auto; max-width: none; width: 100%; margin: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .wave-cone figure { position: static; transform: none; }
  .wave-cone .wc-1, .wave-cone .wc-2, .wave-cone .wc-3, .wave-cone .wc-4, .wave-cone .wc-5, .wave-cone .wc-lado { width: 100%; border-radius: 0; box-shadow: none; }
  .wave-cone .wc-2, .wave-cone .wc-3, .wave-cone .wc-5 { display: none; }   /* manobras + footer-hero + onda-tubular: ocultas no mobile */
  .wave-cone .wc-lado { display: block; order: 1; }   /* onda de lado: entra no lugar da onda-tubular e vira a última (mobile) */
  .wave-cone .wc-4 { box-shadow: none; }   /* onda-header: agora no meio do cone (mobile) */
}
.gallery-link { display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; padding: 0; color: var(--golden-sun); font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transition: color .3s ease; }
.gallery-link svg { width: 34px; height: 18px; overflow: visible; transition: transform .38s cubic-bezier(.2,.7,.2,1); }
.gallery-link:hover { color: var(--muted-black); }
/* link 'Ver galeria' legível sobre o fundo dourado da faixa */
.photo-band .gallery-link { color: var(--off-white); }
.photo-band .gallery-link:hover { color: var(--ivory); }
.gallery-link:hover svg { transform: translateX(7px); }
.pb-item { margin: 0; overflow: hidden; flex: 0 0 auto; }
/* Sombra suave nas bordas das imagens de conteúdo (profundidade, estética menos "laboratório") */
.pb-item, .ai-media, .club-card { box-shadow: 0 20px 50px -24px rgba(20, 24, 18, 0.45); }
.pb-item img { display: block; width: 100%; height: auto; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.pb-item:hover img { transform: scale(1.04); }
.pb-p { width: clamp(150px, 15vw, 215px); }  /* base retrato (mobile) */
.pb-l { width: clamp(210px, 22vw, 310px); }  /* base paisagem (mobile) */
/* desktop: tamanhos e alturas propositalmente irregulares (bagunçado) */
.pb-1 { width: clamp(150px, 16vw, 225px); margin-top: clamp(58px, 10vw, 112px); }
.pb-2 { width: clamp(230px, 24vw, 350px); margin-top: 0; }
.pb-3 { width: clamp(108px, 11vw, 150px); margin-top: clamp(22px, 5vw, 46px); }
.pb-4 { width: clamp(165px, 17vw, 240px); margin-top: clamp(84px, 13vw, 152px); }
.pb-5 { width: clamp(130px, 14vw, 188px); margin-top: clamp(12px, 3vw, 30px); }
@media (max-width: 860px) {
  .photo-band { padding: 30px 0 36px; }
  .photo-band-row { justify-content: flex-start; overflow-x: auto; gap: 14px; padding: 0 24px; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .photo-band-cta { padding: 0 24px; }
  .pb-item { scroll-snap-align: start; }
  .pb-p { width: 56vw; }
  .pb-l { width: 78vw; }
  .pb-1, .pb-2, .pb-3, .pb-4, .pb-5 { margin-top: 0; }
  .pb-collage { position: static; display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px; padding: 0 24px; height: auto; margin: clamp(16px,3vh,32px) 0 0; }
  .pb-collage .pb-portrait { position: static; transform: none; aspect-ratio: auto; width: 100%; height: 100%; overflow: hidden; }
  .pb-collage .pb-portrait img { width: 100%; height: 100%; object-fit: cover; }
  .pb-vb, .pb-mich { grid-column: 2; aspect-ratio: 3 / 4; }
  .pb-vb { grid-row: 1; }
  .pb-collage .pb-vb img { height: 132%; object-position: center top; }
  .pb-mich { grid-row: 2; }
  .pb-yago { grid-column: 1; grid-row: 1 / span 2; }
  .pb-yago img { object-position: center 20%; }
  .pb-collage .pb-mich-beach { display: block; grid-column: 1 / -1; grid-row: 3; width: 74%; justify-self: center; height: auto; aspect-ratio: auto; margin-top: clamp(8px, 2vh, 20px); }
  .pb-mich-beach img { height: auto; }
  .pb-angra { display: none; }
}

/* ============ Carrossel de clubes (Búzios / Barra) ============ */
.clubs { background: var(--ivory); padding: clamp(60px, 10vh, 120px) 0 clamp(70px, 11vh, 130px); }
.clubs .section-eyebrow { color: var(--golden-sun); }
.clubs-head .section-title { color: var(--golden-sun); font-weight: 500; }
.clubs-coords { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--golden-sun); margin: 12px 0 0; }
.clubs-body { margin: clamp(220px, 30vh, 420px) 0 0; max-width: 42ch; }
.clubs-body p { font-family: var(--text); font-size: clamp(16px, 1.55vw, 19px); font-weight: 600; line-height: 1.72; color: var(--golden-sun); margin: 0; }
.clubs-body p + p { margin-top: 1.1em; }
.clubs-cta-row { display: flex; justify-content: flex-end; margin-top: clamp(48px, 7vh, 104px); }
.clubs-cta { display: inline-flex; align-items: center; font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: 17px 32px; border: 1px solid var(--golden-sun); background: var(--golden-sun); color: var(--off-white); text-decoration: none; white-space: nowrap; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.clubs-cta:hover { background: transparent; color: var(--golden-sun); border-color: var(--golden-sun); }
.clubs-head .section-title em { color: var(--golden-sun); }
.clubs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: 1440px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 72px) clamp(28px, 4vh, 48px); }
.clubs-head .section-title { margin: 8px 0 0; }
.clubs-nav { display: flex; gap: 10px; flex: 0 0 auto; }
.clubs-arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(32,31,26,.22); background: transparent; color: var(--muted-black); display: grid; place-items: center; cursor: pointer; transition: background .3s, border-color .3s, color .3s, opacity .3s; }
.clubs-arrow:hover { background: var(--forest-floor); border-color: var(--forest-floor); color: var(--off-white); }
.clubs-arrow svg { width: 20px; height: 20px; }
.clubs-arrow[disabled] { opacity: .3; pointer-events: none; }
.clubs-track { display: flex; gap: clamp(16px, 2.4vw, 32px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 0 clamp(24px, 5vw, 72px); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.clubs-track::-webkit-scrollbar { display: none; }
.club-card { position: relative; flex: 1 1 0; min-width: 0; scroll-snap-align: start; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; text-decoration: none; display: block; }
.club-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.club-card:hover img { transform: scale(1.05); }
.club-card-veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,24,18,.8) 0%, rgba(20,24,18,.15) 46%, transparent 72%); }
.club-card-content { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(24px, 3vw, 40px); color: var(--off-white); }
.club-card-badge { display: inline-block; font-family: var(--sans); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--warm-sun); border: 1px solid rgba(232,194,90,.5); padding: 5px 12px; border-radius: 100px; margin-bottom: 14px; }
.club-card-name { font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 4vw, 54px); line-height: 1; margin: 0; }
.club-card-loc { font-family: var(--text); font-size: 14px; color: rgba(247,245,231,.82); margin: 10px 0 0; }
.club-card-cta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin-top: 18px; }
.club-card-cta svg { width: 18px; height: 18px; transition: transform .3s; }
.club-card:hover .club-card-cta svg { transform: translateX(5px); }

/* Slideshow dos renders de Búzios (substitui os cards) */
.buzios-show { position: relative; max-width: 1440px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 72px); }
.bshow-stage { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.6vw, 30px); }
.bshow-track { position: relative; flex: 0 1 1080px; min-width: 0; margin: 0; aspect-ratio: 16 / 10; border-radius: 4px; box-shadow: 0 30px 70px -40px rgba(20,24,18,.5); display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; touch-action: pan-x; }
.bshow-track::-webkit-scrollbar { display: none; }
.bshow-track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.bshow-slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; margin: 0; scroll-snap-align: start; }
.bshow-slide img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.bshow-arrow { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--golden-sun); background: transparent; color: var(--golden-sun); display: grid; place-items: center; cursor: pointer; transition: background .3s ease, color .3s ease; }
.bshow-arrow:hover { background: var(--golden-sun); color: var(--off-white); }
.bshow-arrow svg { width: 22px; height: 22px; }
.bshow-dots { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.bshow-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1px solid var(--golden-sun); background: transparent; cursor: pointer; transition: background .3s, transform .3s; }
.bshow-dot.is-active { background: var(--golden-sun); transform: scale(1.15); }
.bshow-video { max-width: none; margin: 0 auto; }
.bshow-video video { width: 100%; display: block; border-radius: 4px; box-shadow: 0 26px 58px -30px rgba(20,24,18,.42); }
.bshow-cta-row { max-width: none; margin: clamp(18px, 2.5vh, 28px) auto 0; display: flex; justify-content: flex-end; }
.bshow-cta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: 15px 30px; border-radius: 100px; background: var(--golden-sun); color: var(--off-white); text-decoration: none; transition: background .3s ease, transform .3s ease; }
.bshow-cta:hover { background: var(--muted-black); }
.bshow-cta svg { width: 18px; height: 18px; transition: transform .3s ease; }
.bshow-cta:hover svg { transform: translateX(5px); }
/* Vídeo menor no canto superior direito + slideshow full-width abaixo */
.clubs-top { display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(24px, 4vw, 72px); max-width: 1440px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 72px); }
.clubs-top .clubs-info { flex: 1 1 auto; min-width: 0; }
.clubs-top .clubs-info .clubs-coords { margin-top: 0; }
.clubs-top .bshow-vidcol { flex: 0 0 auto; width: clamp(420px, 68vw, 900px); margin-top: clamp(4px, 1vh, 16px); }
.clubs-top .bshow-vidcol .bshow-video { max-width: none; margin: 0; }
.clubs-top .bshow-vidcol .bshow-cta-row { max-width: none; margin: clamp(16px, 2vh, 24px) 0 0; }
/* Trio de fotos entre o vídeo e o slideshow: Serra · Pescador (centro) · VB fundo */
.clubs-trio { max-width: 1440px; margin: clamp(80px, 12vh, 180px) auto 0; padding: 0 clamp(24px, 5vw, 72px); display: flex; align-items: flex-start; justify-content: flex-start; gap: clamp(16px, 2.4vw, 44px); }
.clubs-trio .ct-vb { margin-left: auto; width: clamp(270px, 31vw, 470px); margin-top: clamp(50px, 8vw, 140px); }
.clubs-trio > .ct-side:first-child { margin-left: calc(-1 * clamp(12px, 2.4vw, 52px)); width: clamp(220px, 26vw, 380px); margin-top: clamp(70px, 9vw, 160px); }
.clubs-trio figure { margin: 0; overflow: hidden; border-radius: 3px; box-shadow: 0 26px 58px -30px rgba(20,24,18,.42); }
.clubs-trio img { display: block; width: 100%; height: auto; }
.clubs-trio .ct-side { flex: 0 1 auto; width: clamp(220px, 26vw, 380px); margin-top: clamp(120px, 15.5vw, 232px); }
.clubs-trio .ct-center { flex: 0 1 auto; width: clamp(380px, 47vw, 710px); margin: 0 auto; }
/* vb (direita): sobe um pouco e vai mais pra direita — vence o .ct-side base (mesma especificidade) */
.clubs-trio .ct-side.ct-vb { margin-top: clamp(60px, 10vw, 160px); margin-left: 0; margin-right: calc(-1 * clamp(8px, 2.2vw, 44px)); }
.buzios-show { margin-top: clamp(70px, 10vh, 150px); }
/* Título "Carver" no canto superior direito da seção (ex-Tecnologia) */
/* Seções em fluxo normal (peel removido) */
#tecnologia { position: relative; background: var(--carver-ochre); display: block; min-height: 100vh; max-width: none; margin: 0; padding-left: max(clamp(24px,5vw,72px), calc((100% - 1440px) / 2)); padding-right: max(clamp(24px,5vw,72px), calc((100% - 1440px) / 2)); padding-bottom: clamp(40px, 7vh, 100px); }

/* ============ PISCINA ES48 ============ */
#piscina { background: var(--sage); color: var(--off-white); display: flex; align-items: center; justify-content: center; min-height: 100vh; position: relative; padding: clamp(72px, 12vh, 150px) clamp(24px, 5vw, 96px) clamp(72px, 12vh, 150px); }
#piscina .es48-video { width: clamp(360px, 88vw, 1480px); margin: 0; border-radius: clamp(8px, 1vw, 16px); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(20,24,18,.55); }
#piscina .es48-video video { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; background: var(--muted-black); }
@media (max-width: 860px) {
  #piscina { display: block; }
  #piscina .es48-video { width: 100%; margin-top: clamp(24px, 4vh, 40px); }
}

/* ============ PISCINA ES48 — DETALHE (27s) ============ */
#ondas27 { background: var(--sage); color: var(--off-white); display: block; min-height: 100vh; position: relative; padding: clamp(72px, 12vh, 150px) clamp(24px, 5vw, 96px); }
#ondas27 .es48-detail-text { position: absolute; top: clamp(2px, 0.5vh, 14px); right: clamp(32px, 6vw, 140px); max-width: none; white-space: nowrap; margin: 0; text-align: left; font-family: var(--text); font-weight: 400; font-size: clamp(15px, 1.7vw, 23px); line-height: 1.6; letter-spacing: 0; color: var(--off-white); }
#ondas27 .es48-title { position: absolute; top: clamp(2px, 0.5vh, 12px); left: clamp(20px, 3.5vw, 64px); margin: 0; font-family: var(--serif); font-weight: 400; font-style: normal; font-size: clamp(46px, 7vw, 116px); line-height: 1; letter-spacing: -.01em; color: var(--off-white); text-shadow: 0 6px 16px rgba(20,24,18,.24); }
#ondas27 .es48-title em { font-style: italic; }
#ondas27 .es48-leadblock { position: absolute; z-index: 3; right: clamp(32px, 6vw, 140px); left: auto; top: clamp(120px, 17vh, 220px); bottom: auto; margin: 0; text-align: right; }
#ondas27 .es48-lead { max-width: none; white-space: nowrap; margin: 0; font-family: var(--text); font-weight: 400; font-size: clamp(17px, 2vw, 27px); line-height: 1.6; letter-spacing: 0; color: var(--off-white); }
#ondas27 .es48-lead2 { max-width: 26ch; margin: clamp(12px, 2vh, 24px) 0 0 calc(-1 * clamp(24px, 5vw, 90px)); font-family: var(--text); font-weight: 400; font-size: clamp(18px, 2.2vw, 32px); line-height: 1.22; letter-spacing: -.01em; color: var(--off-white); }
#ondas27 .es48-lead2 sup { font-size: .55em; vertical-align: super; }
#ondas27 .es48-img { position: absolute; top: clamp(200px, 26vh, 360px); left: clamp(-24px, 2vw, 56px); width: clamp(340px, 52vw, 780px); margin: 0; box-shadow: 0 30px 60px -30px rgba(20,24,18,.5); }
#ondas27 .es48-img img { width: 100%; height: auto; display: block; }
#ondas27 .es48-img2 { position: absolute; z-index: 3; bottom: clamp(150px, 21vh, 360px); right: clamp(20px, 3.5vw, 64px); left: auto; width: clamp(300px, 37vw, 580px); margin: 0; box-shadow: 0 30px 60px -30px rgba(20,24,18,.5); }
/* ES48 — slide 3 (sage): vídeo aéreo BSC cena 02 */
/* margin-top = (padrão amenities->Yago) - (bottom do VB aéreo), p/ que o gap animação->aéreo iguale o padrão em qualquer altura de tela */
#ondas3 { background: var(--sage); color: var(--off-white); display: block; min-height: 100vh; position: relative; margin-top: calc(clamp(80px, 13vh, 200px) - clamp(150px, 21vh, 360px)); padding: 0 clamp(24px, 5vw, 96px) clamp(60px, 10vh, 120px); }
#ondas3 .cena02-video { width: clamp(340px, 82vw, 1200px); margin: 0 auto; border-radius: clamp(8px, 1vw, 16px); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(20,24,18,.55); }
#ondas3 .cena02-video video { width: 100%; height: auto; display: block; aspect-ratio: 1600 / 866; object-fit: cover; background: var(--muted-black); }
#ondas3 .ondas-amenities { list-style: none; margin: clamp(28px, 4.5vh, 60px) auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: center; align-items: start; gap: clamp(18px, 2.6vh, 32px) clamp(40px, 6.5vw, 104px); }
#ondas3 .ondas-amenities li { font-family: var(--sans); font-size: clamp(12px, 1.25vw, 16px); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--off-white); display: inline-flex; align-items: center; gap: .6em; }
#ondas3 .ondas-amenities li::before { content: ''; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
#ondas3 .ondas-quote-row { display: flex; align-items: center; justify-content: center; gap: clamp(28px, 4vw, 80px); max-width: clamp(340px, 90vw, 1240px); margin: clamp(80px, 13vh, 200px) auto 0; }
#ondas3 .ondas-quote-img { flex: 0 0 auto; width: clamp(340px, 52vw, 780px); margin: 0; box-shadow: 0 30px 60px -30px rgba(20,24,18,.55); }
#ondas3 .ondas-quote-img img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; display: block; }
#ondas3 .ondas-quote { flex: 0 1 auto; max-width: clamp(300px, 40vw, 560px); margin: 0; text-align: left; }
@media (max-width: 860px) {
  #ondas3 .ondas-quote-row { flex-direction: column; }
  #ondas3 .ondas-quote-img { width: 100%; }
  #ondas3 .ondas-quote { max-width: none; text-align: center; }
}
#ondas3 .ondas-quote p { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(22px, 3vw, 42px); line-height: 1.28; letter-spacing: -.01em; color: var(--off-white); }
#ondas3 .ondas-quote cite { display: block; margin: clamp(14px, 2.4vh, 28px) 0 0; font-family: var(--sans); font-style: normal; font-size: clamp(12px, 1.2vw, 15px); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--warm-sun); }
@media (max-width: 860px) {
  #ondas3 { padding: clamp(48px, 8vh, 80px) clamp(24px, 5vw, 96px); }
  #ondas3 .cena02-video { width: 100%; }
  #ondas3 .ondas-amenities { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}

/* ES48 — slide 4 (sage): entenda mais + vídeo (ao lado, a receber) */
#ondas4 { background: var(--sage); color: var(--off-white); display: flex; flex-direction: column; align-items: stretch; min-height: 100vh; position: relative; padding: clamp(56px, 9vh, 128px) clamp(24px, 5vw, 96px) clamp(72px, 12vh, 150px); }
#ondas4 .ondas4-top { display: flex; align-items: stretch; gap: clamp(32px, 5vw, 88px); width: 100%; }
#ondas4 .es48-more { flex: 0 1 auto; align-self: center; text-align: center; max-width: 16ch; margin: clamp(64px, 10vh, 150px) 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 3vw, 44px); line-height: 1.15; letter-spacing: -.01em; color: var(--off-white); }
#ondas4 .bocayuva-video { flex: 1 1 auto; min-width: 0; max-width: clamp(400px, 62vw, 880px); margin: clamp(4px, 1vh, 20px) 0 0; border-radius: clamp(8px, 1vw, 16px); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(20,24,18,.55); }
#ondas4 .bocayuva-video video { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; background: var(--muted-black); }
#ondas4 .es48-textcol { flex: 0 1 auto; display: flex; flex-direction: column; }
#ondas4 .es48-endless { position: relative; margin: auto 0 clamp(60px, 11vh, 150px); align-self: center; }
#ondas4 .es48-endless img { width: clamp(190px, 22vw, 300px); height: auto; display: block; }
#ondas4 .es48-tm { position: absolute; top: clamp(1px, .4vw, 4px); right: clamp(-15px, -1.3vw, -9px); font-family: var(--mono); font-size: clamp(10px, 1.1vw, 14px); line-height: 1; color: var(--off-white); }
#ondas4 .es48-people-row { display: flex; align-items: center; justify-content: center; gap: clamp(28px, 4vw, 80px); max-width: clamp(340px, 92vw, 1120px); margin: clamp(64px, 11vh, 170px) auto 0; }
#ondas4 .es48-people { margin: 0; flex: 0 0 auto; width: clamp(360px, 44vw, 620px); }
#ondas4 .es48-people img { width: 100%; height: auto; display: block; border-radius: 0; box-shadow: 0 24px 50px -28px rgba(20,24,18,.55); }
#ondas4 .ondas-quote { flex: 0 1 auto; margin: 0; max-width: clamp(300px, 40vw, 560px); text-align: left; }
#ondas4 .ondas-quote p { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(22px, 2.8vw, 40px); line-height: 1.28; letter-spacing: -.01em; color: var(--off-white); }
#ondas4 .ondas-quote cite { display: block; margin: clamp(14px, 2.4vh, 28px) 0 0; font-family: var(--sans); font-style: normal; font-size: clamp(12px, 1.2vw, 15px); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--warm-sun); }
@media (max-width: 860px) {
  #ondas4 { min-height: 0; }
  #ondas4 .ondas4-top { flex-direction: column; align-items: flex-start; }
  #ondas4 .es48-endless { margin-top: clamp(40px, 7vh, 72px); }
  #ondas4 .es48-more { max-width: none; }
  #ondas4 .bocayuva-video { max-width: none; width: 100%; }
  #ondas4 .es48-people-row { flex-direction: column; align-items: flex-start; }
  #ondas4 .es48-people { width: 100%; }
  #ondas4 .ondas-quote { max-width: none; }
}

/* ES48 — slide 5 (sage): onda + Faça parte */
#ondas5 { background: var(--sage); color: var(--off-white); display: block; min-height: clamp(560px, 62vh, 720px); position: relative; padding: clamp(72px, 12vh, 150px) clamp(24px, 5vw, 96px); }
#ondas5 .es48-cta-img { position: absolute; top: clamp(-260px, -14vh, -120px); left: clamp(24px, 5vw, 80px); width: clamp(400px, 66vw, 980px); margin: 0; box-shadow: 0 30px 60px -30px rgba(20,24,18,.5); }
#ondas5 .es48-cta-img img { width: 100%; height: auto; display: block; }
#ondas5 .es48-cta-side { position: absolute; top: clamp(70px, 12vh, 170px); right: clamp(24px, 4vw, 72px); transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 3vh, 34px); }
#ondas5 .es48-cta-text { max-width: 15ch; margin: 0; text-align: center; font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.8vw, 42px); line-height: 1.18; letter-spacing: -.01em; color: var(--off-white); }
#ondas5 .es48-join { display: inline-flex; align-items: center; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: 18px 42px; border: 1px solid #ffffff; background: transparent; color: #ffffff; text-decoration: none; border-radius: 0; transition: background .2s ease, color .2s ease; }
#ondas5 .es48-join:hover { background: #ffffff; color: var(--sage); }
@media (max-width: 860px) {
  #ondas5 { min-height: 0; }
  #ondas5 .es48-cta-img { position: static; width: 100%; }
  #ondas5 .es48-cta-side { position: static; transform: none; margin-top: clamp(24px, 4vh, 40px); align-items: flex-start; }
  #ondas5 .es48-cta-text { text-align: left; max-width: none; }
}
#ondas27 .es48-img2 img { width: 100%; height: auto; display: block; }
.es48-vbae-mobile { display: none; }  /* cópia do VB aéreo só no mobile (dentro do #ondas4, após a quote do VB) */
@media (max-width: 860px) {
  #ondas27 { min-height: 0; }
  #ondas27 .es48-title { position: static; }
  #ondas27 .es48-img { position: static; width: 100%; margin-top: clamp(20px, 4vh, 36px); }
  #ondas27 .es48-img2 { position: static; width: 100%; margin-top: clamp(20px, 4vh, 36px); }
  #ondas27 .es48-leadblock { position: static; margin-top: clamp(20px, 4vh, 36px); }
  #ondas27 .es48-lead, #ondas27 .es48-lead2 { max-width: none; }
  #ondas27 .es48-lead2 { margin-left: 0; }
  #ondas27 .es48-detail-text { position: static; max-width: none; text-align: left; margin-top: clamp(20px, 4vh, 36px); }
}

/* ===== ES48 — responsivo mobile (reset robusto: tudo em fluxo, largura total) ===== */
@media (max-width: 860px) {
  html, body { overflow-x: hidden; overflow-x: clip; }  /* clip (onde suportado) não vira container de scroll → NÃO quebra o position:sticky do peel; hidden = fallback p/ Safari antigo */
  #piscina, #ondas27, #ondas3, #ondas4, #ondas5 {
    display: block; min-height: 0; max-width: 100%; overflow: hidden;
    margin-top: 0; padding: clamp(48px, 8vh, 88px) 24px;
  }
  /* mídias em fluxo, largura total, sem offsets/transform */
  #piscina .es48-video, #ondas27 .es48-img, #ondas27 .es48-img2, #ondas3 .cena02-video,
  #ondas4 .bocayuva-video, #ondas5 .es48-cta-img, #ondas3 .ondas-quote-img {
    position: static !important; top: auto; right: auto; bottom: auto; left: auto;
    width: 100% !important; max-width: 100%; margin: 0 0 clamp(18px, 3.5vh, 30px); transform: none;
  }
  /* textos/containers em fluxo, largura total, alinhados à esquerda */
  #ondas27 .es48-title, #ondas27 .es48-leadblock, #ondas27 .es48-lead, #ondas27 .es48-lead2,
  #ondas27 .es48-detail-text, #ondas4 .es48-more, #ondas5 .es48-cta-side, #ondas5 .es48-cta-text,
  #ondas3 .ondas-quote-row, #ondas3 .ondas-quote, #ondas3 .ondas-amenities {
    position: static !important; top: auto; right: auto; bottom: auto; left: auto;
    max-width: 100%; margin-left: 0; margin-right: 0; transform: none; text-align: left;
  }
  /* fontes menores no mobile */
  #ondas27 .es48-title { font-size: clamp(40px, 13vw, 64px); margin: 0 0 clamp(14px, 2.5vh, 24px); }
  #ondas27 .es48-lead { font-size: clamp(18px, 4.6vw, 24px); white-space: normal; }
  #ondas27 .es48-lead2 { font-size: clamp(16px, 4.4vw, 22px); margin-top: clamp(8px, 1.6vh, 14px); }
  #ondas27 .es48-detail-text { font-size: clamp(18px, 4.8vw, 23px); line-height: 1.5; white-space: normal; margin-top: clamp(16px, 3vh, 26px); } /* body "25 segundos" um pouco maior (quebra em vez de cortar) */
  #ondas27 .es48-img { margin-top: clamp(30px, 6vh, 54px); } /* Yago aéreo mais pra baixo (vence o margin:0 do grupo de mídias acima) */
  #ondas27 .es48-leadblock { margin-top: clamp(28px, 5vh, 46px); }
  #ondas4 .es48-more { font-size: clamp(22px, 6vw, 34px); margin-top: 0; }
  #ondas5 .es48-cta-text { font-size: clamp(22px, 6vw, 34px); }
  #ondas3 .ondas-quote p { font-size: clamp(22px, 5.5vw, 32px); }
  /* layouts que eram lado-a-lado viram coluna */
  #ondas4 { display: block; }
  #ondas5 .es48-cta-side { display: flex; flex-direction: column; align-items: flex-start; margin-top: clamp(18px, 3.5vh, 30px); gap: clamp(16px, 3vh, 28px); }
  #ondas3 .ondas-quote-row { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(18px, 3.5vh, 30px); margin-top: clamp(36px, 6vh, 64px); }
  #ondas3 .ondas-amenities { display: grid; grid-template-columns: 1fr; text-align: center; justify-items: center; margin-top: clamp(24px, 4vh, 40px); }
}
/* A Onda (mobile): hero (vídeo) maior/full-width e mais perto do título "A Onda." */
@media (max-width: 860px) {
  #piscina { padding-top: 0; padding-left: 0; padding-right: 0; padding-bottom: clamp(16px, 3vh, 30px); }
  #piscina .es48-video { margin-bottom: 0; border-radius: 0; box-shadow: none; }
  #ondas27 { padding-top: clamp(16px, 3vh, 30px); padding-bottom: clamp(16px, 3vh, 30px); }
  #ondas3 { padding-top: clamp(14px, 2.6vh, 26px); padding-bottom: clamp(14px, 2.6vh, 26px); }
  #ondas4 { padding-top: clamp(14px, 2.6vh, 26px); padding-bottom: clamp(16px, 3vh, 30px); }
  #ondas4 .ondas4-top { gap: clamp(14px, 2.6vh, 26px); }
  #ondas4 .es48-endless { margin-bottom: clamp(12px, 2.4vh, 24px); }
  #ondas4 .es48-people-row { margin-top: clamp(16px, 3vh, 30px); }
  /* VB aéreo: some do slide "A Onda." e reaparece após a quote do Yago (#ondas3) */
  #ondas27 .es48-img2 { display: none; }
  #ondas3 .es48-vbae-mobile { display: block; width: 100%; margin-top: clamp(28px, 5vh, 48px); }
  #ondas3 .es48-vbae-mobile img { width: 100%; height: auto; display: block; }
}
#tecnologia .carver-title { position: absolute; top: clamp(72px, 11vh, 160px); left: max(clamp(24px, 5vw, 72px), calc((100% - 1440px) / 2)); z-index: 3; margin: 0; font-family: var(--serif); font-weight: 400; font-style: normal; font-size: clamp(44px, 8vw, 132px); line-height: 1; letter-spacing: -.01em; color: var(--off-white); pointer-events: none; }
#tecnologia .carver-below { display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(24px, 4vw, 80px); margin-top: clamp(26px, 4.5vh, 56px); }
#tecnologia .carver-textcol { flex: 1 1 auto; min-width: 0; margin-top: clamp(28px, 5vh, 80px); }
#tecnologia .carver-copy { flex-shrink: 0; width: clamp(340px, 40vw, 540px); max-width: none; margin: clamp(-48px, -5vh, -24px) 0 clamp(36px, 6vh, 80px); font-family: var(--text); font-size: clamp(18px, 1.9vw, 24px); font-weight: 500; line-height: 1.6; color: var(--off-white); text-align: center; }
#tecnologia .carver-copy-right { max-width: 42ch; margin: clamp(24px, 4vh, 56px) 0 0; font-family: var(--text); font-size: clamp(16px, 1.6vw, 20px); font-weight: 500; line-height: 1.62; color: var(--off-white); text-align: right; }
#tecnologia .carver-textcol .carver-copy-right { max-width: 48ch; margin: clamp(44px, 7vh, 130px) 0 0 clamp(0px, 3vw, 56px); text-align: left; font-size: clamp(18px, 1.9vw, 24px); line-height: 1.6; }
/* desktop: desce um pouco a caixa de texto do Carver (mobile mantém a regra acima) */
@media (min-width: 861px) { #tecnologia .carver-textcol .carver-copy-right { margin-top: clamp(90px, 12vh, 170px); } }
#tecnologia .carver-desenho { max-width: 660px; margin: clamp(130px, 19vh, 300px) 0 0 calc(-1 * clamp(14px, 3vw, 56px)); border-radius: 0; box-shadow: 0 24px 50px -28px rgba(20,24,18,.5); }
#tecnologia .carver-desenho img { width: 100%; height: auto; display: block; }
#tecnologia .carver-rightcol { flex: 0 0 auto; width: clamp(220px, 28vw, 420px); margin-top: clamp(44px, 9vh, 132px); display: flex; flex-direction: column; align-items: flex-end; }
#tecnologia .carver-neil { width: 100%; margin: 0; border-radius: 0; box-shadow: 0 24px 50px -28px rgba(20,24,18,.5); transform: translateX(calc(-1 * clamp(12px, 3vw, 54px))); }
#tecnologia .carver-neil img { width: 100%; height: auto; display: block; }
#tecnologia .carver-quotes { display: block; width: 100%; margin: clamp(96px, 14vh, 210px) 0 0; }
#tecnologia .carver-quote { width: clamp(280px, 40vw, 500px); margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(21px, 2.5vw, 36px); line-height: 1.3; letter-spacing: -.005em; color: var(--off-white); }
#tecnologia .carver-quote-1 { margin-left: clamp(0px, 3vw, 56px); }
#tecnologia .carver-quote-2 { margin: clamp(30px, 5vh, 76px) 0 0 clamp(110px, 22vw, 320px); }
#tecnologia .carver-quote p { margin: 0; }
#tecnologia .carver-quote p + p { margin-top: 0.35em; }
#tecnologia .carver-quote-by { display: block; margin: clamp(14px, 2vh, 24px) 0 0; text-align: right; font-family: var(--sans); font-style: normal; font-size: clamp(12px, 1.2vw, 15px); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--warm-sun); }
#tecnologia .carver-prancha { width: clamp(240px, 30vw, 360px); margin: clamp(28px, 4.5vh, 64px) 0 0; box-shadow: 0 24px 50px -28px rgba(20,24,18,.5); }
#tecnologia .carver-prancha img { width: 100%; height: auto; display: block; }
#tecnologia .carver-render { width: 100%; margin: clamp(24px, 4vh, 56px) 0 0; }
#tecnologia .carver-neil + .carver-render { margin-top: clamp(72px, 11vh, 180px); }
#tecnologia .carver-render img { width: 100%; height: auto; display: block; }
/* render-2 agora na coluna esquerda: largura moderada */
#tecnologia .carver-textcol .carver-render { width: clamp(320px, 44vw, 600px); margin: clamp(40px, 6vh, 96px) 0 0; }
/* prancha agora na coluna direita: largura total da coluna */
#tecnologia .carver-rightcol .carver-prancha { width: 80%; margin-top: clamp(40px, 6.5vh, 110px); }
#tecnologia .carver-logo-end { margin: clamp(28px, 4.5vh, 70px) 0 clamp(8px, 2vh, 24px); display: flex; justify-content: center; align-items: center; gap: clamp(32px, 6vw, 96px); flex-wrap: wrap; }
#tecnologia .carver-logo-end img { width: clamp(150px, 20vw, 280px); height: auto; display: block; }
#tecnologia .carver-copy-mtop { display: none; } /* body no topo da Carver: só no mobile */
#tecnologia .carver-copy-right-mbot { display: none; } /* body embaixo das imagens do Neil: só no mobile */
@media (max-width: 860px) {
  #tecnologia .carver-below { flex-direction: column; align-items: stretch; gap: 24px; }
  #tecnologia .carver-copy.carver-copy-mtop { display: block; width: auto; max-width: 560px; margin: clamp(130px, 17vh, 185px) 0 clamp(16px, 3vh, 28px); padding-right: clamp(18px, 6vw, 40px); text-align: left; font-size: clamp(19px, 4.8vw, 23px); line-height: 1.5; } /* body acima da 1ª imagem: esquerda, fonte menor, caixa mais larga (padding-right evita corte) */
  #tecnologia .carver-rightcol .carver-copy { display: none; }      /* esconde a cópia original (rightcol) no mobile */
  #tecnologia .carver-textcol .carver-copy-right { display: none; } /* esconde a copy-right original (textcol) no mobile — vai p/ embaixo das imagens */
  #tecnologia .carver-copy-right.carver-copy-right-mbot { display: block; width: auto; max-width: 560px; margin: clamp(22px, 4vh, 40px) 0 0; padding-right: clamp(18px, 6vw, 40px); text-align: left; font-size: clamp(19px, 4.8vw, 23px); line-height: 1.5; } /* body embaixo das imagens do Neil, esquerda */
  #tecnologia .carver-textcol { margin-top: 0; }
  #tecnologia .carver-copy { width: auto; max-width: none; flex-shrink: 1; margin: clamp(18px, 3.5vh, 32px) 0 clamp(16px, 3vh, 28px); }
  #tecnologia .carver-desenho { margin-top: 0; margin-left: 0; } /* zera o margin-top gigante: agora quem limpa o título é o body acima */
  /* neil + prancha: 2-up FULL-BLEED (largura total da tela) e COLADAS (sem gap no meio, sem espaço em volta) */
  #tecnologia .carver-rightcol { width: 100vw; margin: 0; position: relative; left: 50%; transform: translateX(-50%); flex-direction: row; gap: 0; align-items: stretch; }
  #tecnologia .carver-rightcol .carver-neil, #tecnologia .carver-rightcol .carver-prancha { flex: 1 1 0; width: auto; min-width: 0; margin: 0; transform: none; border-radius: 0; box-shadow: none; overflow: hidden; }
  #tecnologia .carver-rightcol .carver-neil img, #tecnologia .carver-rightcol .carver-prancha img { width: 100%; height: 100%; object-fit: cover; display: block; }
  #tecnologia .carver-quotes { width: 100%; margin-top: clamp(28px, 5vh, 56px); } /* sobe a quote (no mobile herdava ~112px do desktop) */
  #tecnologia .carver-quote { width: 100%; }
  #tecnologia .carver-quote-1 { margin-left: 0; }
  #tecnologia .carver-quote-2 { margin: clamp(24px, 4vh, 40px) 0 0 0; }
  #tecnologia .carver-quote-by { text-align: left; }
  #tecnologia .carver-render { width: 100%; margin: clamp(18px, 3vh, 32px) 0 0; }
  #tecnologia .carver-neil { transform: none; }
  #tecnologia .carver-textcol .carver-render { width: 100%; margin: clamp(18px, 3vh, 32px) 0 0; }
  #tecnologia .carver-rightcol .carver-prancha { margin-top: 0; } /* 2-up: sem gap vertical */
}
/* Vídeo Carver: play ao clicar (com som) */
.ai-media.carver-video { position: relative; }
.ai-media.carver-video { width: 100%; margin-top: clamp(10px, 1.8vh, 32px); border-radius: clamp(8px, 1vw, 18px); overflow: hidden; }
.ai-media.carver-video video { width: 100%; height: auto; aspect-ratio: 1920 / 1012; min-height: 0; object-fit: cover; display: block; background: var(--muted-black); border-radius: inherit; }
.carver-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; width: clamp(66px, 8vw, 96px); height: clamp(66px, 8vw, 96px); border-radius: 50%; border: 0; background: rgba(253,252,247,.9); color: var(--muted-black); display: grid; place-items: center; cursor: pointer; transition: transform .3s ease, background .3s ease; backdrop-filter: blur(4px); }
.carver-play:hover { transform: translate(-50%, -50%) scale(1.06); background: var(--off-white); }
.carver-play svg { width: 40%; height: 40%; margin-left: 8%; }
.carver-video.is-playing .carver-play { display: none; }
@media (max-width: 860px) {
  /* vídeo Carver maior (full-bleed, proporcional → mais alto) e um pouco mais pra baixo */
  #tecnologia .ai-media.carver-video { width: 100vw; position: relative; left: 50%; transform: translateX(-50%); margin-top: clamp(30px, 5.5vh, 60px); border-radius: 0; }
}
/* Rodapé abaixo do slideshow: comodidades (esquerda) + logo (direita) */
.clubs-footer { max-width: 1080px; margin: clamp(-170px, -11vw, -80px) auto 0; padding: 0 clamp(24px, 5vw, 72px); display: flex; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 88px); position: relative; z-index: 2; }
.clubs-amenities { list-style: none; margin: 0 0 0 calc(-1 * clamp(10px, 3vw, 56px)); padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(9px, 1.3vh, 16px); }
/* 9 amenities em grade 3x3 (column-major): [3 quadras] · [Pista, Coworking, Academia] · [Spa, Gastronomia, Piscina] */
.clubs-amenities--band { max-width: 1440px; margin: clamp(48px, 7vh, 100px) auto 0; padding: 0 clamp(24px, 5vw, 72px); display: grid; grid-template-columns: repeat(3, max-content); grid-template-rows: repeat(3, auto); grid-auto-flow: column; justify-content: center; align-items: start; column-gap: clamp(30px, 5vw, 84px); row-gap: clamp(12px, 1.7vh, 20px); }
.clubs-amenities li { font-family: var(--sans); font-size: clamp(14px, 1.4vw, 17px); font-weight: 300; letter-spacing: .12em; text-transform: uppercase; color: var(--golden-sun); display: inline-flex; align-items: center; gap: .6em; }
.clubs-amenities li::before { content: ''; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.clubs-footer .clubs-logo { flex: 0 0 auto; margin: 0; }
.clubs-footer .clubs-logo img { width: clamp(180px, 24vw, 320px); height: auto; display: block; }
@media (max-width: 860px) {
  /* Seção Aretê Búzios — responsivo */
  .clubs-head { padding-bottom: clamp(14px, 3vh, 26px); }
  .clubs-top { flex-direction: column; gap: 20px; }
  .clubs-top .bshow-vidcol { width: 100%; margin-top: 0; }
  .clubs-top .clubs-info .clubs-coords { margin-top: 0; }
  .clubs-body { margin-top: clamp(18px, 3vh, 30px); max-width: none; }
  .clubs-coords { font-size: 11px; letter-spacing: .08em; }
  .clubs-cta-row { justify-content: flex-start; margin-top: clamp(20px, 3vh, 34px); }
  /* Trio empilhado, centralizado, sem margens de desktop */
  /* trio: pescador full-width em cima; praia + VB Búzios lado a lado (menores) embaixo */
  .clubs-trio { display: grid; grid-template-columns: 1fr 1fr; align-items: start; column-gap: 10px; row-gap: 14px; margin-top: clamp(40px, 7vh, 80px); }
  .clubs-trio .ct-center { grid-column: 1 / -1; grid-row: 2; width: 100%; max-width: min(88%, 440px); justify-self: center; margin: 0; }
  .clubs-trio > .ct-side:first-child { grid-column: 1; grid-row: 1; width: 100%; margin: 0; }
  .clubs-trio .ct-side.ct-vb { grid-column: 2; grid-row: 1; width: 100%; margin: 0; }
  .clubs-trio > .ct-side:first-child img, .clubs-trio .ct-side.ct-vb img { aspect-ratio: 3 / 4; object-fit: cover; }
  /* Rodapé: comodidades em cima, logo embaixo */
  .clubs-footer { flex-direction: column; align-items: flex-start; gap: clamp(24px, 4vh, 40px); margin-top: clamp(32px, 5.5vh, 60px); }
  /* Faixa de amenities 2 colunas: gap/tipografia menores p/ caber no mobile */
  .clubs-amenities--band { column-gap: clamp(22px, 5vw, 44px); padding: 0 20px; }
  .clubs-amenities { margin-left: 0; }
  .clubs-footer .clubs-logo { align-self: center; }
  .clubs-footer .clubs-logo img { width: clamp(200px, 56vw, 300px); }
  /* Slideshow: no mobile é swipe — faixa cheia, setas escondidas (dots continuam) */
  .bshow-stage { display: block; }
  .bshow-arrow { display: none; }
  .bshow-track { aspect-ratio: 4 / 3; width: 100%; margin: 0; }
}
@media (max-width: 680px) {
  /* Amenities: em telas estreitas, uma coluna só (3 colunas não cabem) */
  .clubs-amenities--band { grid-template-columns: max-content; grid-template-rows: none; grid-auto-flow: row; row-gap: 11px; }
}
@media (max-width: 860px) {
  .club-card { flex: 0 0 84vw; }
}

/* ============ Menu drawer (desliza do lado direito) + PUSH da página ============ */
/* PUSH: a página inteira desliza pra esquerda quando o menu abre (translada só no eixo X) */
.page-shift { transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1); will-change: transform; }
html.menu-open .page-shift { transform: translateX(clamp(-420px, -82vw, -290px)); }
.menu-scrim {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(18, 22, 14, 0.28);
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease;
}
html.menu-open .menu-scrim { opacity: 1; pointer-events: auto; }
/* o drawer sobrepõe o estilo antigo de dropdown do .menu-overlay (mesmo seletor, mais abaixo no arquivo) */
.menu-overlay {
  position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh;
  width: clamp(290px, 82vw, 420px); min-width: 0;
  z-index: 310;
  background: var(--cream); color: var(--muted-black);
  box-shadow: -24px 0 60px -30px rgba(20, 24, 18, 0.55);
  transform: translateX(101%);
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  padding: clamp(84px, 12vh, 118px) clamp(30px, 5vw, 56px) 40px;
  display: flex; flex-direction: column;
  overflow-y: auto; text-align: left; opacity: 1; pointer-events: auto;
}
html.menu-open .menu-overlay { transform: translateX(0); }
.menu-close {
  position: absolute; top: 24px; right: clamp(22px, 4vw, 40px);
  width: 40px; height: 40px; display: grid; place-items: center;
  background: transparent; border: 1px solid rgba(32, 31, 26, 0.18); border-radius: 50%;
  color: var(--muted-black); cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.menu-close:hover { background: rgba(32, 31, 26, 0.06); border-color: rgba(32, 31, 26, 0.4); }
.menu-close svg { width: 18px; height: 18px; }
.menu-overlay .menu-overlay-head {
  color: var(--golden-sun); border-bottom-color: rgba(32, 31, 26, 0.14);
  text-align: left; padding: 0 0 16px;
}
.menu-overlay .menu-link {
  color: var(--muted-black); border-bottom-color: rgba(32, 31, 26, 0.10);
  font-size: clamp(26px, 3vw, 32px); padding: 18px 0; text-align: left;
}
.menu-overlay .menu-link:last-of-type { border-bottom: none; }
.menu-overlay .menu-link:hover { opacity: 1; color: var(--golden-sun); padding-right: 0; padding-left: 8px; }
.menu-overlay .menu-link-num { color: var(--golden-sun); margin-right: 16px; }
@media (prefers-reduced-motion: reduce) {
  .menu-overlay, .menu-scrim { transition: none; }
}

/* ============================================================
   BSC — TRÊS ACESSOS (seção editorial escura, triptico escalonado)
   Escopo isolado em .bsc-access — não depende do peel Carver/Parcerias.
   ============================================================ */
.bsc-access {
  background: var(--warm-shade);
  color: var(--off-white);
  padding: clamp(90px, 15vh, 190px) clamp(24px, 5vw, 72px) clamp(96px, 16vh, 200px);
  position: relative;
  overflow: hidden;
}
.bsc-access-inner { max-width: 1440px; margin: 0 auto; }

/* Cabeçalho */
.bsc-access-head { max-width: 60rem; margin: 0 auto; text-align: center; }
.bsc-access .section-eyebrow { color: var(--warm-sun); margin-bottom: 22px; }
.bsc-access-titlerow { display: flex; flex-direction: column; align-items: center; gap: clamp(24px, 4vh, 56px); }
.bsc-access-totem { flex: none; width: clamp(64px, 8vw, 132px); height: auto; }
.bsc-access-title { color: var(--off-white); max-width: none; font-size: clamp(46px, 6.5vw, 96px); text-align: center; }
.bsc-access-wordmark { width: clamp(240px, 36vw, 540px); height: auto; }
.bsc-access-title--sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bsc-access-title em { color: var(--warm-sun); font-style: italic; font-weight: 300; }
.bsc-access-lead {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(20px, 2.3vw, 30px); line-height: 1.4; letter-spacing: -.005em;
  color: rgba(244, 241, 230, .74); margin: 26px 0 0; max-width: 46ch; text-wrap: balance;
}

/* Triptico */
.bsc-access-grid {
  list-style: none; margin: clamp(52px, 8vh, 96px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 3vw, 54px); align-items: start;
}
.bsc-card { margin: 0; }
/* escalonamento editorial: card do meio desce, criando ritmo (não convencional) */
.bsc-card--offset { transform: translateY(clamp(28px, 6vh, 72px)); }

.bsc-card-media {
  margin: 0; overflow: hidden; position: relative;
  aspect-ratio: 3 / 4; background: rgba(0,0,0,.2);
  box-shadow: 0 30px 60px -34px rgba(12, 16, 10, .8);
}
.bsc-card-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(1.02);
  transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.bsc-card:hover .bsc-card-media img { transform: scale(1.05); }
/* keyline dourada fina no topo do bloco de texto */
.bsc-card-num {
  display: block; margin: 26px 0 0; padding-top: 16px;
  border-top: 1px solid rgba(232, 194, 90, .5);
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: .28em; color: var(--warm-sun);
}
.bsc-card-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 3vw, 40px); line-height: 1.05; letter-spacing: -.015em;
  color: var(--off-white); margin: 10px 0 0;
}
.bsc-card-copy {
  font-family: var(--text); font-size: clamp(15px, 1.45vw, 17.5px); line-height: 1.68;
  color: rgba(244, 241, 230, .68); margin: 14px 0 0; max-width: 34ch;
}

/* Rodapé / CTA */
.bsc-access-foot {
  margin: clamp(64px, 11vh, 128px) 0 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: clamp(18px, 3vw, 40px);
}
.bsc-access-kicker {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(26px, 3.4vw, 46px); line-height: 1.1; letter-spacing: -.01em;
  color: var(--off-white); margin: 0;
}
.bsc-access-cta { align-self: center; }
/* CTA precisa contrastar com o fundo verde (o ai-btn-primary padrão é verde = invisível aqui) */
/* Menu de opções sutil (acordeão nativo <details>) */
.bsc-menu { max-width: 760px; margin: clamp(40px, 7vh, 90px) auto 0; }
.bsc-menu-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: clamp(16px, 2vw, 28px); padding: clamp(26px, 5vh, 60px) 0; font-family: var(--sans); font-style: normal; font-weight: 500; font-size: clamp(15px, 1.6vw, 21px); line-height: 1.3; color: var(--off-white); transition: color .25s ease; }
.bsc-menu-item summary::-webkit-details-marker { display: none; }
.bsc-menu-item summary:hover { color: var(--warm-sun); }
/* bolinha (onda) no lugar do +, à direita */
.bsc-menu-item summary::after { content: ''; flex: none; width: clamp(9px, 0.9vw, 12px); height: clamp(9px, 0.9vw, 12px); border-radius: 50%; background: var(--warm-sun); transition: background .25s ease, box-shadow .25s ease; }
.bsc-menu-item[open] summary::after { background: transparent; box-shadow: inset 0 0 0 2px var(--warm-sun); }
.bsc-menu-item p { margin: 0 0 clamp(20px, 3vh, 30px); max-width: 62ch; font-family: var(--text); font-size: clamp(15px, 1.45vw, 17.5px); line-height: 1.7; color: rgba(253,252,247,.82); }
.bsc-access .ai-btn-primary { background: var(--warm-sun); color: var(--forest-floor); border-color: var(--warm-sun); }
.bsc-access .ai-btn-primary:hover { background: var(--off-white); border-color: var(--off-white); color: var(--forest-floor); }
/* CTA "Quer saber mais? Fale conosco" ao fim das perguntas */
.bsc-access-cta { display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 2.6vh, 30px); margin: clamp(56px, 9vh, 120px) auto 0; text-align: center; }
.bsc-access-cta-lead { font-family: var(--serif); font-style: normal; font-size: clamp(24px, 3.4vw, 44px); line-height: 1.2; color: var(--off-white); }

/* Stagger do reveal-fade dentro da seção */
.bsc-access-head .reveal-fade:nth-child(2) { transition-delay: .1s; }
.bsc-access-head .reveal-fade:nth-child(3) { transition-delay: .2s; }
.bsc-card.reveal-fade:nth-child(1) { transition-delay: .05s; }
.bsc-card.reveal-fade:nth-child(2) { transition-delay: .18s; }
.bsc-card.reveal-fade:nth-child(3) { transition-delay: .31s; }
/* tira o efeito de entrada (reveal-fade) no último slide (Brasil Surfe Clube) — aparece direto, no mobile E no desktop */
#clube-bsc .reveal-fade { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }

/* Tablet: 3 colunas mais apertadas continuam ok; some o offset abaixo de 860 */
@media (max-width: 860px) {
  .bsc-access-grid { grid-template-columns: 1fr; gap: clamp(40px, 7vh, 64px); max-width: 30rem; }
  .bsc-card--offset { transform: none; }
  .bsc-card-media { aspect-ratio: 4 / 3; }
  .bsc-card-copy { max-width: none; }
  .bsc-access-foot { margin-top: clamp(48px, 8vh, 72px); }
  .bsc-access-titlerow { margin-left: 0; gap: clamp(12px, 3vw, 20px); }
  .bsc-access-title { font-size: clamp(36px, 11vw, 60px); }
  .bsc-access-totem { width: clamp(56px, 15vw, 96px); }
  .bsc-access-wordmark { width: clamp(220px, 66vw, 360px); }
}