/* /pedido CTA blocks: the wizard's .button-container right-aligns (it held the
   "Next" button); the standalone CTA reads better anchored to the text column */
.button-container.cta-left { justify-content: flex-start; }
.divider-line-outer.cta-divider { margin: 3.5rem 0 3rem; }
.info_point_row_container.contact-points {
  max-width: 100%; align-items: flex-start; grid-column-gap: 3rem; grid-row-gap: 2rem;
  margin-bottom: 2.5rem; padding-right: 0;
}
.info_point_row_container.contact-points .info_point_container { max-width: 18rem; }
@media screen and (max-width: 767px) {
  .info_point_row_container.contact-points { flex-flow: column; }
  .info_point_row_container.contact-points .info_point_container { max-width: 100%; }
}

/* Touch fix for the "construction zones" reveal (deep-research, high-confidence,
   WCAG 1.4.13): the 3 columns reveal their image on mouseover only — broken on
   touch (esp. iPad landscape >991px, where the desktop hover layout is shown to
   a touch device and the image stays display:none). On any non-hover/coarse
   pointer, show the always-visible image the site already ships and drop the
   hover container. Mouse/fine-pointer behaviour is untouched. */
@media (hover: none), (pointer: coarse) {
  .col_3_item .about_img_container { display: none !important; }
  .col_3_item .about_img_container_mobile,
  .col_3_item .about_img_container_inner_mobile { display: block !important; }
  .col_3_item .about_col_hover { display: none !important; }
  /* uniform crop: each image follows its own natural ratio, so heights drift
     (212/211/194px). Lock all three to one proportion and cover-crop. */
  .col_3_item .about_img_container_inner_mobile {
    aspect-ratio: 4 / 3; height: auto !important; overflow: hidden;
  }
  .col_3_item .about_img_container_mobile img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
}
/* Equal-height column titles so the always-visible images align horizontally
   when the 3 zones sit side by side on touch (PT "Propriedades Residenciais e
   de Assinatura" wraps to 3 lines vs 2 on others at iPad-landscape widths,
   pushing its image down). Touch + row layout only — desktop mouse untouched. */
@media (pointer: coarse) and (min-width: 992px) {
  .col_3_item h3 { min-height: 3.3em; }
}
/* Homepage services band: was a 350dvh sticky video scrubber; now a concise
   design-build statement. Collapse the fixed height and lay out the statement. */
.section_services { height: auto !important; padding-bottom: 6rem; }
.wn-services-statement { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2.5rem; }
.wn-services-pillars { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 0.5rem; }
.wn-services-pillars > div { font-size: 1.25rem; font-weight: 600; }
.wn-services-pillars .text-style-standout { margin-right: 0.4rem; }
@media screen and (max-width: 767px) {
  .wn-services-pillars { flex-direction: column; gap: 1rem; }
}
/* Landing-page language switcher (the policy skeleton ships none). Sits with the
   desktop nav links; small, uppercase, current locale emphasized. */
.wn-lang-switch { display: inline-flex; align-items: center; margin-top: 0.75rem; font-size: 0.8rem; letter-spacing: 0.05em; }
.wn-lang-switch .wn-lang-link { color: inherit; opacity: 0.55; text-decoration: none; text-transform: uppercase; transition: opacity 0.2s; }
.wn-lang-switch .wn-lang-link + .wn-lang-link { margin-left: 0.75rem; }
.wn-lang-switch .wn-lang-link:hover { opacity: 1; }
.wn-lang-switch .wn-lang-current { opacity: 1; font-weight: 600; }

/* ── Flagship conversion landings (gated by def.flagship) ────────────────────
   Homepage-grade, full-bleed hero + one primary CTA on the ad-destination
   landings; the SEO body + FAQ stay below the fold. Every rule is scoped under
   .wn-flagship-hero / .wn-flagship-* so no other page changes visually. Palette
   is the brand's own: #202a30 (dark), #fdc41f (yellow), #e2f0fb (light), white,
   #698996 (muted). */
.wn-flagship-hero { padding-top: 0; background: #202a30; }
/* desktop top-bar floats over the image, above it in the stack */
.wn-flagship-hero .section-menu-top {
  position: absolute; top: 0; left: 0; right: 0; width: 100%; z-index: 5;
}
/* the injected lang switch is light on the dark hero */
.wn-flagship-hero .wn-lang-switch .wn-lang-link { color: #ffffff; }
/* Flagship header treatment. All landings now build from the single EN skeleton
   (PR #56: .hero_nav_link / .hero_nav_container_desktop, white logo SVG), so
   these can target the exact classes. Over the dark hero, force the white-on-dark
   look: white logo + "DESIGN + BUILD" subtitle, bright-white nav. */
.wn-flagship-hero .menu-logo svg path { fill: #ffffff; }
.wn-flagship-hero .hero_nav_container_desktop a.hero_nav_link {
  color: #ffffff; opacity: 1;
}
.wn-flagship-hero .hero_nav_container_desktop a.hero_nav_link:hover { opacity: 0.7; }
/* breathing room below the logo lockup */
.wn-flagship-hero .menu-logo { margin-bottom: 0.75rem; }
/* The EN skeleton ships the desktop nav as a flex COLUMN; force a single,
   always-visible HORIZONTAL row on desktop — the harmonious canonical look. */
@media screen and (min-width: 992px) {
  .wn-flagship-hero .hero_nav_container_desktop {
    display: flex; flex-flow: row wrap; align-items: center;
    justify-content: flex-end; width: auto; row-gap: 0.35rem;
  }
  /* space the links via a margin on the link (robust regardless of container gap) */
  .wn-flagship-hero .hero_nav_container_desktop a.hero_nav_link {
    width: auto; white-space: nowrap; margin: 0 0 0 1.9rem;
  }
  .wn-flagship-hero .hero_nav_container_desktop a.hero_nav_link:first-child {
    margin-left: 0;
  }
  /* keep the language switch clear of the last nav link */
  .wn-flagship-hero .hero_nav_container_desktop .wn-lang-switch { margin-left: 2.2rem; }
}
.wn-flagship-band {
  position: relative; min-height: 92vh; min-height: 92svh;
  display: flex; align-items: flex-end; overflow: hidden;
}
/* Desktop: taller band so the (square) render shows almost in full instead of
   being cropped ~43% in height. Capped by 124vh so it never gets absurd on wide
   monitors; mobile keeps 92svh. */
@media screen and (min-width: 768px) {
  .wn-flagship-band { min-height: min(85vw, 124vh); }
}
.wn-flagship-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: 0;
}
/* bottom-heavy scrim so the display type stays legible over the render */
.wn-flagship-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 62% 46% at 100% 0%,
      rgba(32, 42, 48, 0.62) 0%,
      rgba(32, 42, 48, 0.22) 54%,
      rgba(32, 42, 48, 0) 80%),
    linear-gradient(to bottom,
      rgba(32, 42, 48, 0.60) 0%,
      rgba(32, 42, 48, 0.40) 10%,
      rgba(32, 42, 48, 0.14) 24%,
      rgba(32, 42, 48, 0) 38%),
    linear-gradient(to top,
      rgba(32, 42, 48, 0.85) 0%,
      rgba(32, 42, 48, 0.70) 24%,
      rgba(32, 42, 48, 0.25) 58%,
      rgba(32, 42, 48, 0.06) 100%);
}
.wn-flagship-copy {
  position: relative; z-index: 2; max-width: 68rem;
  padding: 0 4rem 5rem; color: #ffffff;
}
.wn-flagship-kicker {
  font-family: Ppmori-SemiBold, Arial, sans-serif;
  text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 0.85rem; color: #fdc41f; margin-bottom: 1.75rem;
}
.wn-flagship-copy h1 {
  font-family: Ppmori-SemiBold, Arial, sans-serif;
  font-size: clamp(2.6rem, 6.5vw, 6.5rem);
  letter-spacing: -0.04em; line-height: 1.05;
  color: #ffffff; margin: 0;
}
.wn-flagship-promise {
  color: #e2f0fb; max-width: 38rem;
  font-size: 1.25rem; line-height: 1.5; margin: 1.75rem 0 2.5rem;
}
.wn-flagship-copy .button-container { margin-top: 0; }
/* single primary CTA: solid brand yellow, unmistakable over the dark image */
.wn-flagship-copy .button.is-secondary {
  background-color: #fdc41f; border-color: #fdc41f; color: #202a30;
  transition: background-color 0.2s, border-color 0.2s;
}
.wn-flagship-copy .button.is-secondary:hover {
  background-color: #ffffff; border-color: #ffffff;
}
/* pillars band in the body: widen the info row + let the points wrap */
.wn-flagship-pillars {
  max-width: 100%; flex-flow: row wrap; align-items: flex-start;
  grid-column-gap: 3rem; grid-row-gap: 2rem; padding-right: 0;
}
.wn-flagship-pillars .info_point_container { max-width: 15rem; }
.wn-flagship-stamp { color: #698996; font-size: 0.8rem; letter-spacing: 0.02em; }
@media screen and (max-width: 767px) {
  .wn-flagship-copy { padding: 0 1.25rem 3rem; }
  .wn-flagship-pillars { flex-direction: column; }
  .wn-flagship-pillars .info_point_container { max-width: 100%; }
}