/* ============================================================
   RESPONSIVO — mobile-first.
   O layout principal é o de 360px (a maioria chega pelo link da bio).
   Breakpoints: 480 / 768 / 1024 / 1360
   ============================================================ */

/* ---------------- 480px ---------------- */
@media (min-width: 480px) {
  .vip_form { grid-template-columns: 1fr 1fr; }
  .vip_form .u-btn--1 { grid-column: 1 / -1; width: auto; justify-self: center; min-width: 260px; }
}

/* ---------------- 768px ---------------- */
@media (min-width: 768px) {
  /* O vídeo da obra é vertical (gravado no celular) e a seção é horizontal.
     Cortar no "cover" comeria justamente o prédio. Então no desktop mostramos
     o quadro inteiro e preenchemos as laterais com o poster desfocado. */
  .obra_media::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: url("../assets/img/obra-poster.jpg") center / cover no-repeat;
    filter: blur(36px) brightness(.42) saturate(.85);
    transform: scale(1.18);
  }
  .obra_media video { object-fit: contain; z-index: 1; }

  .promessa_grid { grid-template-columns: repeat(4, 1fr); }
  .numbers_grid  { grid-template-columns: repeat(3, 1fr); }
  .incluso_grid  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery_grid  { grid-template-columns: repeat(4, 1fr); }

  .local_card { grid-template-columns: 1.15fr 1fr; }
  .local_map { min-height: 100%; }

  .familia_slide { grid-template-columns: 1.05fr .95fr; gap: 0; align-items: center; }
  .slide_card { margin-top: 0; margin-left: -70px; width: min(100%, 460px); }

  .hero_content { padding-right: 66px; }
  .footer_grid { grid-template-columns: 1.2fr .8fr; }
}

/* ---------------- 1024px ---------------- */
@media (min-width: 1024px) {
  .cards-flip_card { width: 420px; margin-left: -210px; }
  .incluso_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

/* ---------------- Mobile: simplificações ---------------- */
@media (max-width: 767px) {
  :root { --offset-size: 22px; --corner-cut: 20px; }

  /* no celular o topo fica só com logo + hambúrguer.
     Os dois CTAs não somem do site — eles estão logo abaixo, no painel do hero,
     onde o dedo alcança melhor. Empilhados aqui em cima ficavam apertados
     e batiam no conteúdo ao rolar. */
  .header_buttons_optional { display: none; }
  .header_buttons { padding: 18px 0 0; }
  .header_logo { padding: 14px 0 0; }
  .header_logo svg { width: 108px; }
  .buttons_menu { width: 30px; height: 22px; margin-top: 6px; }
  .buttons_menu_icon::before { top: -7px; }
  .buttons_menu_icon::after  { top: 7px; }

  .hero_scroll { display: none; }
  /* painel do hero em sangria total no mobile, mais compacto */
  .hero_content {
    width: calc(100% + var(--container-padding) * 2);
    margin-left: calc(var(--container-padding) * -1);
    margin-right: calc(var(--container-padding) * -1);
    padding: 22px 40px 26px var(--container-padding);
  }

  /* baralho do rodízio: card mais estreito para a inclinação não vazar
     pelas bordas, e menos espaço morto acima */
  .cards-flip_stage { height: 500px; margin-top: clamp(26px, 6vw, 38px); }
  .cards-flip_card {
    width: min(400px, 76vw);
    margin-left: calc(min(400px, 76vw) / -2);
  }
  .card_face { clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px)); }
  .card_body { padding: 48px 20px 22px; }
  .cards-flip_hint { margin-top: 18px; }

  /* ---- Área de toque ----
     No celular tudo que se clica precisa de uns 44px de altura. Estes quatro
     estavam entre 22 e 28px, difíceis de acertar com o dedo. */
  .buttons_menu::after { content: ""; position: absolute; inset: -11px -8px; }
  .numbers_link { padding: 11px 0 9px; }
  .footer_menu a { padding-block: 8px; }
  .footer_contact a { padding-block: 10px; }

  /* letras miúdas demais para ler em tela pequena */
  .brand_ticker_track span { font-size: .68rem; }
  .card_top { font-size: .74rem; }
  .obra_media { clip-path: inset(28% 8% 28% 8%); }
  .familia_swiper { overflow: hidden; }
  .marquee_card { width: 62vw; }
  .footer_wordmark { font-size: 22vw; }
}

/* ---------------- Touch ---------------- */
.is-touch .c-cursor { display: none !important; }
.is-touch .c-scrollbar { display: none; }