:root {
  --alle-primary: #002639;
  --alle-primary-light: #0d3c55;
  --alle-secondary: #b58b45;
  --alle-gold-light: #ffdea8;
  --alle-text: #1c1b1b;
  --alle-muted: #6f7478;
  --alle-bg: #fcf9f8;
  --alle-light: #f4f1ef;
  --alle-white: #ffffff;
  --alle-border: #e4e2df;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Hanken Grotesk", sans-serif;
  color: var(--alle-text);
  background: var(--alle-bg);
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

/* ==========================================================
   HEADER
========================================================== */

.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;

  z-index: 1050;

  width: 100%;

  background: rgba(255, 255, 255, 0.98);

  border-bottom: 1px solid rgba(0, 38, 57, 0.08);

  box-shadow: 0 2px 15px rgba(0, 38, 57, 0.03);
}

/* ==========================================================
   NAVBAR
========================================================== */

.site-header .navbar {
  min-height: 76px;

  padding: 0;

  background: transparent;
}

.site-header .navbar > .container {
  position: relative;

  min-height: 76px;
}

/* ==========================================================
   LOGO
========================================================== */

.site-header .navbar-brand {
  display: flex;

  align-items: center;

  margin: 0;
  padding: 0;
}

.site-header .brand-logo {
  display: block;

  width: auto;
  height: 48px;

  object-fit: contain;
}

/* ==========================================================
   MENU DESKTOP
========================================================== */

.site-header .navbar-nav {
  gap: 5px;
}

.site-header .nav-item {
  position: relative;
}

.site-header .nav-link {
  position: relative;

  display: flex;

  align-items: center;

  min-height: 76px;

  padding: 0 16px !important;

  border: 0;

  background: transparent;

  font-family: "Hanken Grotesk", Arial, sans-serif;

  font-size: 13px;
  line-height: 1;

  font-weight: 600;

  letter-spacing: 0.055em;

  text-transform: uppercase;

  color: #51575b;

  cursor: pointer;

  transition: color 0.2s ease;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus {
  color: var(--alle-secondary);
}

/* ==========================================================
   EMPREENDIMENTOS / SETA
========================================================== */

.site-header .submenu-toggle {
  gap: 8px;
}

.site-header .submenu-toggle i {
  font-size: 11px;

  transition: transform 0.25s ease;
}

/* ==========================================================
   SUBMENU DESKTOP
========================================================== */

.site-header .submenu-list {
  position: absolute;

  top: 100%;
  left: 0;

  z-index: 1100;

  display: block;

  width: 280px;

  min-width: 280px;

  margin: 0;
  padding: 12px 0;

  list-style: none;

  background: var(--alle-white);

  border-top: 2px solid var(--alle-secondary);

  box-shadow: 0 18px 45px rgba(0, 38, 57, 0.14);

  opacity: 0;
  visibility: hidden;

  transform: translateY(10px);

  pointer-events: none;

  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.2s ease;
}

/* abre somente no desktop */

@media (min-width: 992px) {
  .site-header .nav-item-has-submenu:hover > .submenu-list,
  .site-header .nav-item-has-submenu:focus-within > .submenu-list {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;
  }
}

/* ==========================================================
   LINKS DO SUBMENU
========================================================== */

.site-header .submenu-list li {
  display: block;

  width: 100%;

  margin: 0;
  padding: 0;
}

.site-header .submenu-list a {
  position: relative;

  display: block;

  width: 100%;

  padding: 12px 22px;

  font-family: "Hanken Grotesk", Arial, sans-serif;

  font-size: 12px;
  line-height: 1.35;

  font-weight: 600;

  letter-spacing: 0.025em;

  text-transform: uppercase;

  color: #62686c;

  background: transparent;

  transition:
    color 0.2s ease,
    background 0.2s ease,
    padding-left 0.2s ease;
}

.site-header .submenu-list a:hover {
  padding-left: 27px;

  color: var(--alle-primary);

  background: #f7f5f3;
}

/* ==========================================================
   BOTÃO FALE CONOSCO
========================================================== */

.site-header .btn-alle {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 46px;

  padding: 0 25px;

  border: 1px solid var(--alle-primary);
  border-radius: 0;

  background: var(--alle-primary);

  color: var(--alle-white);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.04em;

  text-transform: uppercase;

  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.site-header .btn-alle:hover {
  background: var(--alle-primary-light);

  border-color: var(--alle-primary-light);

  color: var(--alle-white);
}

/* ==========================================================
   BOTÃO HAMBÚRGUER
========================================================== */

.site-header .navbar-toggler {
  width: 48px;
  height: 48px;

  padding: 0;

  border: 0;
  border-radius: 0;

  background: transparent;

  color: var(--alle-primary);

  box-shadow: none !important;
}

.site-header .navbar-toggler i {
  font-size: 30px;
  line-height: 1;
}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 991.98px) {
  /* ------------------------------------------------------
       HEADER
    ------------------------------------------------------ */

  .site-header .navbar {
    min-height: 76px;
  }

  .site-header .navbar > .container {
    min-height: 76px;
  }

  .site-header .brand-logo {
    height: 42px;
  }

  /* ------------------------------------------------------
       MENU PRINCIPAL ABERTO
    ------------------------------------------------------ */

  .site-header .navbar-collapse {
    position: absolute;

    top: 76px;
    left: 12px;
    right: 12px;

    max-height: calc(100vh - 90px);

    padding: 12px 18px 20px;

    overflow-x: hidden;
    overflow-y: auto;

    background: rgba(255, 255, 255, 0.985);

    box-shadow: 0 22px 45px rgba(0, 38, 57, 0.16);
  }

  /* ------------------------------------------------------
       LISTA PRINCIPAL
    ------------------------------------------------------ */

  .site-header .navbar-nav {
    display: block;

    width: 100%;

    margin: 0;

    padding: 0;

    gap: 0;
  }

  .site-header .nav-item {
    position: relative;

    display: block;

    width: 100%;

    margin: 0;

    padding: 0;

    border-bottom: 1px solid #e6e6e6;
  }

  /* ------------------------------------------------------
       LINKS PRINCIPAIS
    ------------------------------------------------------ */

  .site-header .nav-link {
    display: flex;

    align-items: center;
    justify-content: space-between;

    width: 100%;

    min-height: 50px;

    margin: 0;

    padding: 0 4px !important;

    border: 0;

    background: transparent;

    color: #555b5f;

    text-align: left;

    font-size: 13px;

    box-shadow: none;
  }

  /* ======================================================
       SUBMENU MOBILE
       FECHADO POR PADRÃO
    ====================================================== */

  .site-header .submenu-list {
    position: static !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    z-index: auto;

    display: none !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;

    padding: 5px 0 12px 20px !important;

    border: 0 !important;
    border-left: 2px solid var(--alle-secondary) !important;

    background: #f8f7f6;

    box-shadow: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;

    pointer-events: auto !important;

    transition: none;
  }

  /* ======================================================
       SOMENTE ABERTO COM .is-open
    ====================================================== */

  .site-header .nav-item-has-submenu.is-open > .submenu-list {
    display: block !important;
  }

  /* gira seta */

  .site-header .nav-item-has-submenu.is-open > .submenu-toggle i {
    transform: rotate(180deg);
  }

  /* ------------------------------------------------------
       LINKS DO SUBMENU
    ------------------------------------------------------ */

  .site-header .submenu-list li {
    display: block;

    width: 100%;

    margin: 0;

    padding: 0;

    border: 0;
  }

  .site-header .submenu-list a {
    display: block;

    width: 100%;

    margin: 0;

    padding: 10px 16px !important;

    background: transparent;

    color: #696e72;

    font-size: 11px;
    line-height: 1.35;

    font-weight: 600;

    text-transform: uppercase;

    transform: none !important;
  }

  /* MUITO IMPORTANTE:
       remove comportamento hover do desktop */

  .site-header .submenu-list a:hover {
    padding-left: 16px !important;

    background: transparent;

    transform: none !important;

    color: var(--alle-primary);
  }

  /* ------------------------------------------------------
       FALE CONOSCO
    ------------------------------------------------------ */

  .site-header .btn-alle {
    display: flex;

    width: 100%;

    margin: 16px 0 0 !important;

    min-height: 46px;
  }
}

/* ==========================================================
   MOBILE PEQUENO
========================================================== */

@media (max-width: 575.98px) {
  .site-header .navbar-collapse {
    left: 0;
    right: 0;

    padding-left: 18px;
    padding-right: 18px;

    box-shadow: 0 18px 35px rgba(0, 38, 57, 0.14);
  }
}

/* =========================================================
           BANNER
        ========================================================= */
.hero-carousel {
  margin-top: 82px;
}

.hero-carousel .carousel-item {
  position: relative;
  height: 535px;
  min-height: 535px;
  background-size: cover;
  background-position: center center;
}

.hero-carousel .carousel-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 28, 42, 0.9) 0%,
    rgba(0, 38, 57, 0.72) 38%,
    rgba(0, 38, 57, 0.23) 70%,
    rgba(0, 38, 57, 0.1) 100%
  );
  z-index: 1;
}

.hero-carousel .carousel-item::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 35%;
  background: linear-gradient(to top, rgba(0, 20, 31, 0.35), transparent);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: center;
}

.hero-box {
  max-width: 760px;
  color: #fff;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: var(--alle-gold-light);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.hero-kicker::before {
  content: "";
  display: block;
  width: 38px;
  height: 1px;
  background: var(--alle-gold-light);
}

.hero-title {
  max-width: 720px;
  margin: 0 0 22px;
  font-size: clamp(2.4rem, 5vw, 4.15rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.035em;
  text-shadow: 0 5px 20px rgba(0, 0, 0, 0.18);
}

.hero-text {
  max-width: 610px;
  margin-bottom: 30px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.08rem;
  line-height: 1.7;
}

.btn-banner-primary,
.btn-banner-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.8rem 1.65rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: 0.25s ease;
}

.btn-banner-primary {
  background: #fff;
  color: var(--alle-primary);
  border: 1px solid #fff;
}

.btn-banner-primary:hover {
  background: var(--alle-gold-light);
  border-color: var(--alle-gold-light);
  color: #3a2a11;
}

.btn-banner-outline {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.btn-banner-outline:hover {
  background: #fff;
  color: var(--alle-primary);
}

.hero-carousel .carousel-indicators {
  z-index: 5;
  margin-bottom: 22px;
}

.hero-carousel .carousel-indicators [data-bs-target] {
  width: 34px;
  height: 2px;
  border: 0;
  margin: 0 5px;
  opacity: 0.45;
}

.hero-carousel .carousel-indicators .active {
  opacity: 1;
}

.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
  width: 6%;
  z-index: 4;
}

/* Fade mais suave */
.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  transition-duration: 1.1s;
  transform: none;
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-start,
.carousel-fade .carousel-item-prev.carousel-item-end {
  opacity: 1;
}

/* anima o conteúdo quando entra */
.carousel-item.active .hero-kicker {
  animation: fadeUp 0.65s ease 0.1s both;
}

.carousel-item.active .hero-title {
  animation: fadeUp 0.75s ease 0.2s both;
}

.carousel-item.active .hero-text {
  animation: fadeUp 0.85s ease 0.3s both;
}

.carousel-item.active .hero-actions {
  animation: fadeUp 0.9s ease 0.4s both;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
           PADRÕES
        ========================================================= */
.section-space {
  padding: 100px 0;
}

.section-kicker {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--alle-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.section-title {
  color: var(--alle-primary);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.section-text {
  color: #63696d;
  font-size: 1.02rem;
  line-height: 1.8;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--alle-secondary);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: 0.25s ease;
}

.link-arrow i {
  transition: transform 0.25s ease;
}

.link-arrow:hover {
  color: var(--alle-primary);
}

.link-arrow:hover i {
  transform: translateX(5px);
}

/* =========================================================
           SOBRE
        ========================================================= */
.about-section {
  background: #fff;
}

/* =========================================================
           EMPRESA - GALERIA DE 4 IMAGENS
           Composição baseada exatamente na proporção do exemplo:
           - superior esquerda: vertical
           - superior direita: quase quadrada
           - inferior esquerda: horizontal
           - inferior direita: vertical
           Sem áreas brancas internas.
        ========================================================= */
.about-gallery {
  position: relative;
  width: 100%;
  max-width: 620px;
  height: 640px;
  margin-left: auto;
}

.about-photo {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: #e8ebed;
  border-radius: 2px;
  box-shadow: none;
  filter: drop-shadow(0 9px 8px rgba(0, 38, 57, 0.16));
  transition:
    transform 0.35s ease,
    filter 0.35s ease;
}

.about-photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 24%;
  background: linear-gradient(
    to top,
    rgba(0, 38, 57, 0.12),
    rgba(0, 38, 57, 0)
  );
  pointer-events: none;
}

.about-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s ease;
}

.about-photo:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 12px 10px rgba(0, 38, 57, 0.2));
}

.about-photo:hover img {
  transform: scale(1.035);
}

/*
         * 1 - SUPERIOR ESQUERDA
         * Formato vertical, mais estreita e alta.
         */
.about-photo-1 {
  left: 0;
  top: 0;
  width: 302px;
  height: 302px;
}

/*
         * 2 - SUPERIOR DIREITA
         * Formato quase quadrado.
         */
.about-photo-2 {
  right: 0;
  top: 0;
  width: 304px;
  height: 232px;
}

/*
         * 3 - INFERIOR ESQUERDA
         * Formato horizontal e mais largo.
         */
.about-photo-3 {
  left: 0;
  top: 316px;
  width: 302px;
  height: auto;
  overflow: hidden;
}

/*
         * 4 - INFERIOR DIREITA
         * Formato vertical, começando logo abaixo da imagem 2.
         */
.about-photo-4 {
  right: 0;
  top: 246px;
  width: 304px;
  height: 314px;
}

/*
         * Ajuste de enquadramento individual.
         * As imagens sempre ocupam 100% do quadro.
         */
.about-photo-1 img {
  object-position: center center;
}

.about-photo-2 img {
  object-position: center center;
}

.about-photo-3 img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center center;
}

.about-photo-4 img {
  object-position: center center;
}

/* =========================================================
           EMPREENDIMENTOS
        ========================================================= */
.projects-section {
  position: relative;
  overflow: hidden;
  background: #f7f5f3;
}

.projects-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 44px;
}

.projects-carousel-wrap {
  position: relative;
  padding-right: 68px;
}

.projects-stage {
  position: relative;
  height: 650px;
}

.project-card {
  position: absolute;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0, 38, 57, 0.08);
  border-radius: 4px;
  box-shadow: 0 12px 30px rgba(0, 38, 57, 0.08);
  transition:
    left 0.62s cubic-bezier(0.22, 0.7, 0.25, 1),
    top 0.62s cubic-bezier(0.22, 0.7, 0.25, 1),
    width 0.62s cubic-bezier(0.22, 0.7, 0.25, 1),
    height 0.62s cubic-bezier(0.22, 0.7, 0.25, 1),
    transform 0.38s ease,
    box-shadow 0.38s ease,
    opacity 0.38s ease;
  will-change: left, top, width, height, transform;
}

.project-position-featured {
  left: 0;
  top: 0;
  width: calc(66.666% - 10px);
  height: 650px;
  z-index: 3;
}

.project-hidden {
  left: 100%;
  top: 0;
  width: calc(33.334% - 10px);
  height: 315px;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateX(70px);
}

.project-position-side-1,
.project-position-side-2 {
  left: calc(66.666% + 10px);
  width: calc(33.334% - 10px);
  height: 315px;
  z-index: 2;
}

.project-position-side-1 {
  top: 0;
}

.project-position-side-2 {
  top: 335px;
}

.project-image {
  position: relative;
  height: 47%;
  overflow: hidden;
  background: #e9ecee;
}

.project-position-featured .project-image {
  height: 58%;
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.65s ease,
    filter 0.45s ease;
}

.project-status {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 4;
  padding: 0.45rem 0.75rem;
  background: rgba(255, 255, 255, 0.94);
  color: var(--alle-primary);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-body {
  padding: 22px;
}

.project-position-featured .project-body {
  padding: 28px 30px;
}

.project-title {
  margin-bottom: 8px;
  color: var(--alle-primary);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.15;
}

.project-position-featured .project-title {
  font-size: 1.9rem;
}

.project-location {
  display: flex;
  align-items: center;
  color: #7a7f82;
  font-size: 0.86rem;
  line-height: 1.4;
}

.project-preview {
  margin: 11px 0 0;
  color: #62686c;
  font-size: 0.82rem;
  line-height: 1.55;
}

.project-position-featured .project-preview {
  max-width: 92%;
  margin-top: 14px;
  font-size: 0.96rem;
  line-height: 1.65;
}

.project-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #ece9e6;
  color: var(--alle-primary);
  font-size: 0.76rem;
  font-weight: 700;
}

.project-position-featured .project-link {
  margin-top: 20px;
  padding-top: 17px;
  font-size: 0.82rem;
}

.project-link i {
  color: var(--alle-secondary);
  transition: transform 0.25s ease;
}

.project-card::before {
  content: "";
  position: absolute;
  top: -45%;
  left: -80%;
  width: 42%;
  height: 190%;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transform: rotate(18deg);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.1) 30%,
    rgba(255, 255, 255, 0.48) 50%,
    rgba(255, 255, 255, 0.1) 70%,
    rgba(255, 255, 255, 0) 100%
  );
  transition:
    left 0.72s cubic-bezier(0.2, 0.65, 0.3, 1),
    opacity 0.2s ease;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 24px 44px -18px rgba(0, 38, 57, 0.32),
    0 10px 22px rgba(0, 38, 57, 0.1);
}

.project-card:hover::before {
  left: 130%;
  opacity: 1;
}

.project-card:hover .project-image img {
  transform: scale(1.035);
  filter: brightness(1.06);
}

.project-card:hover .project-link i {
  transform: translateX(5px);
}

.projects-next {
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(0, 38, 57, 0.16);
  border-radius: 50%;
  background: #fff;
  color: var(--alle-primary);
  font-size: 1.15rem;
  box-shadow: 0 10px 24px rgba(0, 38, 57, 0.1);
  transform: translateY(-50%);
  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.projects-next:hover {
  background: var(--alle-primary);
  color: #fff;
  transform: translateY(-50%) translateX(3px);
  box-shadow: 0 14px 28px rgba(0, 38, 57, 0.18);
}

.projects-next i {
  line-height: 1;
}

@media (max-width: 991.98px) {
  .projects-heading {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 34px;
  }

  .projects-carousel-wrap {
    padding-right: 0;
    padding-bottom: 70px;
  }

  .projects-stage {
    height: 600px;
  }

  .project-position-featured {
    width: calc(62% - 9px);
    height: 600px;
  }

  .project-position-side-1,
  .project-position-side-2 {
    left: calc(62% + 9px);
    width: calc(38% - 9px);
    height: 291px;
  }

  .project-hidden {
    left: 100%;
    width: calc(38% - 9px);
    height: 291px;
    opacity: 0;
    transform: translateX(60px);
  }

  .project-position-side-2 {
    top: 309px;
  }

  .projects-next {
    top: auto;
    right: 0;
    bottom: 0;
    transform: none;
  }

  .projects-next:hover {
    transform: translateX(3px);
  }

  .project-position-side-1 .project-preview,
  .project-position-side-2 .project-preview {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

@media (max-width: 767.98px) {
  .projects-stage {
    height: 690px;
  }

  .project-card {
    transition:
      left 0.55s cubic-bezier(0.22, 0.7, 0.25, 1),
      top 0.55s cubic-bezier(0.22, 0.7, 0.25, 1),
      width 0.55s cubic-bezier(0.22, 0.7, 0.25, 1),
      height 0.55s cubic-bezier(0.22, 0.7, 0.25, 1),
      transform 0.3s ease;
  }

  .project-position-featured {
    left: 0;
    top: 0;
    width: 100%;
    height: 390px;
  }

  .project-position-side-1,
  .project-position-side-2 {
    top: 410px;
    width: calc(50% - 8px);
    height: 280px;
  }

  .project-hidden {
    left: 100%;
    top: 410px;
    width: calc(50% - 8px);
    height: 280px;
    opacity: 0;
    transform: translateX(45px);
  }

  .project-position-side-1 {
    left: 0;
  }

  .project-position-side-2 {
    left: calc(50% + 8px);
  }

  .project-position-featured .project-image {
    height: 52%;
  }

  .project-position-side-1 .project-image,
  .project-position-side-2 .project-image {
    height: 42%;
  }

  .project-position-side-1 .project-link,
  .project-position-side-2 .project-link {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .projects-stage {
    height: 650px;
  }

  .project-position-featured {
    height: 365px;
  }

  .project-position-side-1,
  .project-position-side-2 {
    top: 383px;
    height: 267px;
  }

  .project-hidden {
    top: 383px;
    height: 267px;
  }

  .project-body {
    padding: 15px;
  }

  .project-position-featured .project-body {
    padding: 20px;
  }

  .project-position-featured .project-title {
    font-size: 1.55rem;
  }

  .project-title {
    font-size: 1.02rem;
  }

  .project-location {
    font-size: 0.76rem;
  }

  .project-preview {
    font-size: 0.73rem;
    line-height: 1.42;
  }

  .project-position-featured .project-preview {
    font-size: 0.85rem;
    line-height: 1.55;
  }

  .project-position-side-1 .project-preview,
  .project-position-side-2 .project-preview {
    -webkit-line-clamp: 3;
  }

  .project-status {
    left: 12px;
    top: 12px;
    padding: 0.36rem 0.56rem;
    font-size: 0.58rem;
  }
}

/* =========================================================
           PILARES
        ========================================================= */
.pillars-section {
  position: relative;
  overflow: hidden;
  background: radial-gradient(
    circle at 50% 0%,
    #0d3c55 0,
    #002639 55%,
    #001c2a 100%
  );
  color: #fff;
}

.pillars-section .section-title {
  color: #fff;
}

.pillars-section .section-text {
  color: rgba(255, 255, 255, 0.68);
}

.pillar-card {
  height: 100%;
  padding: 38px 30px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  transition: 0.3s ease;
}

.pillar-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.075);
}

.pillar-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 222, 168, 0.35);
  border-radius: 50%;
  color: var(--alle-gold-light);
  font-size: 1.8rem;
}

.pillar-card h3 {
  margin-bottom: 14px;
  color: #fff;
  font-size: 1.45rem;
  font-weight: 700;
}

.pillar-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  line-height: 1.75;
}

/* =========================================================
           CTA
        ========================================================= */
.cta-section {
  background: #fff;
}

.cta-box {
  padding: 55px;
  background: #f0ece8;
  border-left: 5px solid var(--alle-secondary);
}

.cta-box h2 {
  color: var(--alle-primary);
  font-weight: 700;
}

/* =========================================================
           RODAPÉ
        ========================================================= */
.site-footer {
  padding: 70px 0 25px;
  background: #001f2f;
  color: #fff;
}

.footer-logo {
  display: block;
  width: auto;
  height: 55px;
  max-width: 280px;
  object-fit: contain;
  background: transparent;
  filter: brightness(0) invert(1);
}

.footer-text {
  max-width: 330px;
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.75;
}

.footer-title {
  margin-bottom: 19px;
  color: var(--alle-gold-light);
  font-size: 1rem;
  font-weight: 700;
}

.footer-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-list li {
  margin-bottom: 11px;
  color: rgba(255, 255, 255, 0.62);
}

.footer-list i {
  width: 22px;
  color: var(--alle-gold-light);
}

.footer-list a {
  color: rgba(255, 255, 255, 0.62);
  transition: 0.25s ease;
}

.footer-list a:hover {
  color: #fff;
}

.social-link {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  color: #fff;
  border: 1px solid rgba(255, 222, 168, 0.3);
  border-radius: 50%;
  transition: 0.25s ease;
}

.social-link:hover {
  background: var(--alle-gold-light);
  border-color: var(--alle-gold-light);
  color: var(--alle-primary);
}

.footer-bottom {
  margin-top: 50px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.82rem;
}

.about-signature {
  max-width: 520px;
  padding-left: 18px;
  border-left: 3px solid var(--alle-secondary);
  color: var(--alle-primary);
  font-size: 1.15rem;
  line-height: 1.55;
  font-weight: 700;
}

/* =========================================================
           RESPONSIVO
        ========================================================= */
@media (max-width: 991.98px) {
  .site-header,
  .site-header .navbar {
    height: 74px;
  }

  .hero-carousel {
    margin-top: 74px;
  }

  .navbar-collapse {
    position: absolute;
    top: 74px;
    left: 0;
    right: 0;
    padding: 20px 24px 26px;
    background: #fff;
    border-top: 1px solid #eee;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.07);
  }

  .navbar-nav .nav-link {
    padding: 0.8rem 0 !important;
  }

  .nav-item-has-submenu {
    padding-bottom: 4px;
  }

  .nav-item-has-submenu > .submenu-toggle {
    justify-content: space-between;
  }

  .submenu-list {
    position: static;
    display: none;
    min-width: 0;
    padding: 3px 0 8px 12px;
    background: rgba(244, 241, 239, 0.55);
    border: 0;
    border-left: 2px solid var(--alle-secondary);
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .nav-item-has-submenu.is-open > .submenu-list {
    display: block;
  }

  .submenu-list::before {
    display: none;
  }

  .submenu-list a {
    padding: 9px 12px;
    color: #62686c;
    font-size: 0.7rem;
  }

  .submenu-list a:hover,
  .submenu-list a:focus-visible {
    padding-left: 16px;
    color: var(--alle-secondary);
    background: transparent;
  }

  .nav-item-has-submenu > .submenu-toggle::after {
    margin-right: 4px;
  }

  .hero-carousel .carousel-item {
    height: 485px;
    min-height: 485px;
  }

  .hero-carousel .carousel-item::before {
    background: rgba(0, 38, 57, 0.72);
  }

  .hero-title {
    max-width: 650px;
  }
  .section-space {
    padding: 80px 0;
  }
}

@media (max-width: 767.98px) {
  .brand-logo {
    height: 46px;
    max-width: 230px;
  }

  .hero-carousel .carousel-item {
    height: 470px;
    min-height: 470px;
    background-position: 60% center;
  }

  .hero-title {
    font-size: 2.55rem;
  }

  .hero-text {
    font-size: 0.98rem;
    line-height: 1.6;
  }

  .hero-actions {
    gap: 10px !important;
  }

  .btn-banner-primary,
  .btn-banner-outline {
    padding: 0.75rem 1.1rem;
    font-size: 0.69rem;
  }

  .hero-carousel .carousel-control-prev,
  .hero-carousel .carousel-control-next {
    display: none;
  }
  .project-image {
    height: 270px;
  }

  .cta-box {
    padding: 36px 25px;
  }
}

@media (max-width: 575.98px) {
  .hero-carousel .carousel-item {
    height: 500px;
    min-height: 500px;
  }

  .hero-content {
    align-items: center;
  }

  .hero-kicker {
    font-size: 0.67rem;
    letter-spacing: 0.14em;
  }

  .hero-title {
    font-size: 2.15rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .hero-actions a {
    width: 100%;
  }
  .section-space {
    padding: 65px 0;
  }
}
.about-photo-3:hover img {
  transform: translateY(-3px);
}

/* =========================================================
           GALERIA EMPRESA - RESPONSIVO
           Mantém a composição e a distância proporcional.
        ========================================================= */
@media (max-width: 1199.98px) {
  .about-gallery {
    width: 620px;
    max-width: none;
    transform: scale(0.86);
    transform-origin: top right;
    margin-bottom: -55px;
  }
}

@media (max-width: 991.98px) {
  .about-gallery {
    width: 620px;
    max-width: none;
    margin: 45px auto 0;
    transform: none;
  }
}

@media (max-width: 767.98px) {
  .about-gallery {
    transform: scale(0.82);
    transform-origin: top center;
    margin-bottom: -72px;
  }
}

@media (max-width: 575.98px) {
  .about-gallery {
    transform: scale(0.66);
    transform-origin: top center;
    margin-top: 32px;
    margin-bottom: -135px;
  }
}

@media (max-width: 430px) {
  .about-gallery {
    transform: scale(0.54);
    margin-bottom: -190px;
  }
}

/* =========================================================
           REVISÃO RESPONSIVA GERAL
           Navegação, banner, galeria e empreendimentos
        ========================================================= */

/* Controle esquerdo oculto no desktop */
.projects-prev {
  display: none;
}

.projects-mobile-controls {
  position: static;
}

@media (max-width: 991.98px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* -------------------------
               TOPO / MENU MOBILE
            ------------------------- */
  .site-header,
  .site-header .navbar {
    height: 72px;
  }

  .site-header {
    background: #fff;
  }

  .site-header .navbar {
    padding: 0;
  }

  .site-header .navbar > .container {
    position: relative;
    min-height: 72px;
    flex-wrap: wrap;
  }

  .navbar-brand {
    margin-right: 12px;
    padding: 0;
    max-width: calc(100% - 72px);
  }

  .brand-logo {
    width: auto;
    height: 46px;
    max-width: 215px;
    object-fit: contain;
  }

  .navbar-toggler {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: transparent;
  }

  .navbar-toggler i {
    font-size: 2rem;
    line-height: 1;
  }

  #menuPrincipal {
    position: absolute;
    top: 72px;
    left: 12px;
    right: 12px;
    z-index: 1100;
    width: auto;
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    padding: 10px 18px 20px;
    background: rgba(255, 255, 255, 0.99);
    border: 1px solid rgba(0, 38, 57, 0.08);
    border-top: 0;
    box-shadow: 0 18px 32px rgba(0, 38, 57, 0.13);
  }

  #menuPrincipal .navbar-nav {
    width: 100%;
    align-items: stretch !important;
  }

  #menuPrincipal .nav-item {
    width: 100%;
  }

  #menuPrincipal .nav-link {
    display: block;
    width: 100%;
    padding: 14px 4px !important;
    border-bottom: 1px solid rgba(0, 38, 57, 0.07);
    font-size: 0.82rem;
  }

  #menuPrincipal .btn-alle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin: 16px 0 0 !important;
  }

  /* -------------------------
               BANNER
            ------------------------- */
  .hero-carousel {
    margin-top: 72px;
  }

  .hero-carousel .carousel-item {
    height: 590px;
    min-height: 590px;
  }

  .hero-content {
    padding-top: 28px;
    padding-bottom: 50px;
  }

  .hero-box {
    max-width: 620px;
  }

  .hero-title {
    font-size: clamp(2.15rem, 7.5vw, 3.25rem);
  }

  .hero-text {
    max-width: 540px;
    font-size: 1rem;
  }

  /* -------------------------
               EMPREENDIMENTOS - TABLET
            ------------------------- */
  .projects-carousel-wrap {
    padding-right: 0;
    padding-bottom: 76px;
  }

  .projects-mobile-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 54px;
  }

  .projects-prev,
  .projects-next {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(0, 38, 57, 0.16);
    border-radius: 50%;
    background: #fff;
    color: var(--alle-primary);
    font-size: 1.15rem;
    box-shadow: 0 8px 20px rgba(0, 38, 57, 0.09);
    transform: none;
    transition:
      background 0.25s ease,
      color 0.25s ease,
      box-shadow 0.25s ease;
  }

  .projects-prev:hover,
  .projects-next:hover {
    background: var(--alle-primary);
    color: #fff;
    transform: none;
    box-shadow: 0 11px 24px rgba(0, 38, 57, 0.14);
  }
}

@media (max-width: 767.98px) {
  /* -------------------------
               BASE MOBILE
            ------------------------- */
  .container {
    --bs-gutter-x: 30px;
  }

  .section-space {
    padding-top: 68px;
    padding-bottom: 68px;
  }

  .section-title {
    font-size: clamp(2rem, 9vw, 2.65rem);
    line-height: 1.08;
  }

  /* -------------------------
               TOPO
            ------------------------- */
  .site-header,
  .site-header .navbar,
  .site-header .navbar > .container {
    min-height: 68px;
    height: 68px;
  }

  .brand-logo {
    height: 43px;
    max-width: 195px;
  }

  #menuPrincipal {
    top: 68px;
    left: 10px;
    right: 10px;
  }

  /* -------------------------
               BANNER MOBILE
            ------------------------- */
  .hero-carousel {
    margin-top: 68px;
  }

  .hero-carousel .carousel-item {
    height: 610px;
    min-height: 610px;
    background-position: center;
  }

  .hero-carousel .carousel-item::before {
    background: linear-gradient(
      90deg,
      rgba(0, 28, 42, 0.92) 0%,
      rgba(0, 38, 57, 0.8) 55%,
      rgba(0, 38, 57, 0.46) 100%
    );
  }

  .hero-kicker {
    margin-bottom: 14px;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
  }

  .hero-title {
    margin-bottom: 18px;
    font-size: clamp(2rem, 10vw, 2.8rem);
  }

  .hero-text {
    margin-bottom: 24px;
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100%;
    max-width: 310px;
  }

  .btn-banner-primary,
  .btn-banner-outline {
    width: 100%;
  }

  /* -------------------------
               GALERIA SOBRE
               Remove escalas/offsets negativos.
            ------------------------- */
  .about-gallery {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    width: 100%;
    max-width: 560px;
    height: auto;
    margin: 38px auto 0;
    transform: none;
  }

  .about-photo,
  .about-photo-1,
  .about-photo-2,
  .about-photo-3,
  .about-photo-4 {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    margin: 0;
    transform: none;
  }

  .about-photo-1 {
    height: 250px;
  }

  .about-photo-2 {
    height: 210px;
  }

  .about-photo-3 {
    align-self: start;
    height: auto;
    overflow: hidden;
  }

  .about-photo-3 img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .about-photo-4 {
    height: 270px;
    margin-top: -40px;
  }

  /* -------------------------
               EMPREENDIMENTOS MOBILE
               3 cards empilhados e controles embaixo.
            ------------------------- */
  .projects-heading {
    gap: 18px;
    margin-bottom: 30px;
  }

  .projects-all-link {
    margin-top: 0;
  }

  .projects-carousel-wrap {
    width: 100%;
    padding: 0 0 76px;
  }

  .projects-stage {
    position: relative;
    width: 100%;
    height: 1110px;
  }

  .project-card,
  .project-position-featured,
  .project-position-side-1,
  .project-position-side-2,
  .project-hidden {
    width: 100%;
    left: 0;
    right: auto;
    margin: 0;
  }

  .project-position-featured {
    top: 0;
    height: 420px;
    z-index: 3;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .project-position-side-1 {
    top: 438px;
    height: 318px;
    z-index: 2;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .project-position-side-2 {
    top: 774px;
    height: 318px;
    z-index: 2;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .project-hidden {
    top: 774px;
    height: 318px;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transform: translateX(105%);
  }

  .project-position-featured .project-image {
    height: 52%;
  }

  .project-position-side-1 .project-image,
  .project-position-side-2 .project-image {
    height: 47%;
  }

  .project-body,
  .project-position-featured .project-body {
    padding: 18px 20px;
  }

  .project-position-featured .project-title {
    font-size: 1.55rem;
  }

  .project-title {
    font-size: 1.25rem;
  }

  .project-location {
    font-size: 0.81rem;
  }

  .project-preview,
  .project-position-featured .project-preview {
    display: -webkit-box;
    max-width: 100%;
    margin-top: 9px;
    overflow: hidden;
    color: #62686c;
    font-size: 0.79rem;
    line-height: 1.45;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .project-position-featured .project-preview {
    font-size: 0.84rem;
    -webkit-line-clamp: 2;
  }

  .project-link,
  .project-position-featured .project-link,
  .project-position-side-1 .project-link,
  .project-position-side-2 .project-link {
    display: flex;
    margin-top: 11px;
    padding-top: 11px;
    font-size: 0.72rem;
  }

  .projects-mobile-controls {
    bottom: 0;
  }

  /* -------------------------
               PILARES / CTA / RODAPÉ
            ------------------------- */
  .pillar-card {
    padding: 30px 22px;
  }

  .cta-box {
    padding: 34px 24px;
  }

  .site-footer {
    text-align: left;
  }

  .footer-logo {
    height: 48px;
    max-width: 230px;
  }
}

@media (max-width: 575.98px) {
  .container {
    --bs-gutter-x: 24px;
  }

  .section-space {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .brand-logo {
    height: 40px;
    max-width: 180px;
  }

  .hero-carousel .carousel-item {
    height: 590px;
    min-height: 590px;
  }

  .hero-title {
    font-size: clamp(1.9rem, 11vw, 2.5rem);
  }

  .about-gallery {
    gap: 10px;
  }

  .about-photo-1 {
    height: 220px;
  }

  .about-photo-2 {
    height: 185px;
  }

  .about-photo-4 {
    height: 235px;
    margin-top: -35px;
  }

  .projects-stage {
    height: 1060px;
  }

  .project-position-featured {
    height: 395px;
  }

  .project-position-side-1 {
    top: 413px;
    height: 305px;
  }

  .project-position-side-2 {
    top: 736px;
    height: 305px;
  }

  .project-hidden {
    top: 736px;
    height: 305px;
  }
}

@media (max-width: 390px) {
  .brand-logo {
    height: 37px;
    max-width: 160px;
  }

  .hero-carousel .carousel-item {
    height: 620px;
    min-height: 620px;
  }

  .project-body,
  .project-position-featured .project-body {
    padding-left: 16px;
    padding-right: 16px;
  }

  .project-title {
    font-size: 1.15rem;
  }

  .project-position-featured .project-title {
    font-size: 1.42rem;
  }
}

/* =========================================================
           AJUSTE FINAL - CARDS MENORES DOS EMPREENDIMENTOS NO MOBILE
        ========================================================= */
@media (max-width: 767.98px) {
  .projects-stage {
    height: 1220px;
  }

  .project-position-side-1,
  .project-position-side-2 {
    height: 365px;
  }

  .project-position-side-1 {
    top: 438px;
  }

  .project-position-side-2 {
    top: 821px;
  }

  .project-hidden {
    top: 821px;
    height: 365px;
  }

  .project-position-side-1 .project-image,
  .project-position-side-2 .project-image {
    height: 44%;
  }

  .project-position-side-1 .project-body,
  .project-position-side-2 .project-body {
    padding: 18px 18px 20px;
  }

  .project-position-side-1 .project-preview,
  .project-position-side-2 .project-preview {
    -webkit-line-clamp: 2;
    margin-bottom: 0;
  }

  .project-position-side-1 .project-link,
  .project-position-side-2 .project-link {
    display: flex;
    margin-top: 13px;
    padding-top: 12px;
  }
}

@media (max-width: 575.98px) {
  .projects-stage {
    height: 1185px;
  }

  .project-position-featured {
    height: 395px;
  }

  .project-position-side-1 {
    top: 413px;
    height: 360px;
  }

  .project-position-side-2 {
    top: 791px;
    height: 360px;
  }

  .project-hidden {
    top: 791px;
    height: 360px;
  }

  .project-position-side-1 .project-body,
  .project-position-side-2 .project-body {
    padding: 16px 16px 18px;
  }

  .project-position-side-1 .project-title,
  .project-position-side-2 .project-title {
    font-size: 1.08rem;
  }

  .project-position-side-1 .project-location,
  .project-position-side-2 .project-location {
    font-size: 0.76rem;
  }

  .project-position-side-1 .project-preview,
  .project-position-side-2 .project-preview {
    font-size: 0.74rem;
    line-height: 1.4;
  }

  .project-position-side-1 .project-link,
  .project-position-side-2 .project-link {
    font-size: 0.7rem;
  }
}

@media (max-width: 390px) {
  .projects-stage {
    height: 1215px;
  }

  .project-position-side-1,
  .project-position-side-2,
  .project-hidden {
    height: 375px;
  }

  .project-position-side-2,
  .project-hidden {
    top: 806px;
  }
}

/* =========================================================
           CORREÇÃO DEFINITIVA - BOTÃO DOS CARDS MENORES
           O link permanece sempre visível abaixo da linha divisória.
        ========================================================= */

/* O card passa a organizar imagem + conteúdo verticalmente */
.project-card {
  display: flex;
  flex-direction: column;
}

.project-card .project-image {
  flex: 0 0 auto;
}

.project-card .project-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

/*
         * O link é empurrado para o final do conteúdo.
         * Assim, a linha e o botão nunca ficam escondidos.
         */
.project-card .project-link {
  flex: 0 0 auto;
  margin-top: auto;
}

/* -------------------------
           DESKTOP
        ------------------------- */
@media (min-width: 992px) {
  .projects-stage {
    height: 720px;
  }

  .project-position-featured {
    height: 720px;
  }

  .project-position-side-1,
  .project-position-side-2 {
    height: 350px;
  }

  .project-position-side-1 {
    top: 0;
  }

  .project-position-side-2 {
    top: 370px;
  }

  .project-hidden {
    height: 350px;
  }

  .project-position-side-1 .project-image,
  .project-position-side-2 .project-image {
    height: 142px;
    flex-basis: 142px;
  }

  .project-position-side-1 .project-body,
  .project-position-side-2 .project-body {
    padding: 17px 19px 18px;
  }

  .project-position-side-1 .project-title,
  .project-position-side-2 .project-title {
    margin-bottom: 5px;
    font-size: 1.22rem;
  }

  .project-position-side-1 .project-location,
  .project-position-side-2 .project-location {
    font-size: 0.8rem;
  }

  .project-position-side-1 .project-preview,
  .project-position-side-2 .project-preview {
    display: -webkit-box;
    margin-top: 8px;
    overflow: hidden;
    font-size: 0.76rem;
    line-height: 1.42;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .project-position-side-1 .project-link,
  .project-position-side-2 .project-link {
    display: flex;
    margin-top: auto;
    padding-top: 11px;
    border-top: 1px solid #ece9e6;
    font-size: 0.72rem;
  }
}

/* -------------------------
           TABLET
        ------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .projects-stage {
    height: 690px;
  }

  .project-position-featured {
    height: 690px;
  }

  .project-position-side-1,
  .project-position-side-2 {
    height: 335px;
  }

  .project-position-side-1 {
    top: 0;
  }

  .project-position-side-2 {
    top: 355px;
  }

  .project-hidden {
    height: 335px;
  }

  .project-position-side-1 .project-image,
  .project-position-side-2 .project-image {
    height: 130px;
    flex-basis: 130px;
  }

  .project-position-side-1 .project-body,
  .project-position-side-2 .project-body {
    padding: 15px 16px 16px;
  }

  .project-position-side-1 .project-preview,
  .project-position-side-2 .project-preview {
    -webkit-line-clamp: 2;
  }

  .project-position-side-1 .project-link,
  .project-position-side-2 .project-link {
    display: flex;
    margin-top: auto;
    padding-top: 10px;
  }
}

/* -------------------------
           MOBILE
        ------------------------- */
@media (max-width: 767.98px) {
  .projects-stage {
    height: 1245px;
  }

  .project-position-featured {
    height: 420px;
  }

  .project-position-side-1 {
    top: 438px;
    height: 380px;
  }

  .project-position-side-2 {
    top: 836px;
    height: 380px;
  }

  .project-hidden {
    top: 836px;
    height: 380px;
  }

  .project-position-side-1 .project-image,
  .project-position-side-2 .project-image {
    height: 155px;
    flex-basis: 155px;
  }

  .project-position-side-1 .project-body,
  .project-position-side-2 .project-body {
    padding: 17px 18px 18px;
  }

  .project-position-side-1 .project-preview,
  .project-position-side-2 .project-preview {
    display: -webkit-box;
    margin-top: 8px;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .project-position-side-1 .project-link,
  .project-position-side-2 .project-link {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #ece9e6;
  }
}

@media (max-width: 575.98px) {
  .projects-stage {
    height: 1200px;
  }

  .project-position-featured {
    height: 395px;
  }

  .project-position-side-1 {
    top: 413px;
    height: 365px;
  }

  .project-position-side-2 {
    top: 796px;
    height: 365px;
  }

  .project-hidden {
    top: 796px;
    height: 365px;
  }

  .project-position-side-1 .project-image,
  .project-position-side-2 .project-image {
    height: 145px;
    flex-basis: 145px;
  }

  .project-position-side-1 .project-body,
  .project-position-side-2 .project-body {
    padding: 15px 16px 16px;
  }

  .project-position-side-1 .project-title,
  .project-position-side-2 .project-title {
    font-size: 1.06rem;
  }

  .project-position-side-1 .project-location,
  .project-position-side-2 .project-location {
    font-size: 0.75rem;
  }

  .project-position-side-1 .project-preview,
  .project-position-side-2 .project-preview {
    font-size: 0.73rem;
    line-height: 1.38;
  }

  .project-position-side-1 .project-link,
  .project-position-side-2 .project-link {
    font-size: 0.69rem;
  }
}

@media (max-width: 390px) {
  .projects-stage {
    height: 1220px;
  }

  .project-position-side-1,
  .project-position-side-2,
  .project-hidden {
    height: 375px;
  }

  .project-position-side-2,
  .project-hidden {
    top: 806px;
  }
}

/* =========================================================
           MOBILE - TODOS OS EMPREENDIMENTOS COM O MESMO PADRÃO
           Todos os 3 cards visíveis passam a ter o mesmo tamanho
           e a mesma proporção do card principal.
        ========================================================= */
@media (max-width: 767.98px) {
  .projects-stage {
    height: 1275px;
  }

  .project-position-featured,
  .project-position-side-1,
  .project-position-side-2 {
    left: 0;
    width: 100%;
    height: 405px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .project-position-featured {
    top: 0;
  }

  .project-position-side-1 {
    top: 425px;
  }

  .project-position-side-2 {
    top: 850px;
  }

  .project-hidden {
    left: 0;
    top: 850px;
    width: 100%;
    height: 405px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(105%);
  }

  .project-position-featured .project-image,
  .project-position-side-1 .project-image,
  .project-position-side-2 .project-image {
    height: 52%;
    flex-basis: auto;
  }

  .project-position-featured .project-body,
  .project-position-side-1 .project-body,
  .project-position-side-2 .project-body {
    padding: 20px;
  }

  .project-position-featured .project-title,
  .project-position-side-1 .project-title,
  .project-position-side-2 .project-title {
    margin-bottom: 8px;
    font-size: 1.5rem;
  }

  .project-position-featured .project-location,
  .project-position-side-1 .project-location,
  .project-position-side-2 .project-location {
    font-size: 0.8rem;
  }

  .project-position-featured .project-preview,
  .project-position-side-1 .project-preview,
  .project-position-side-2 .project-preview {
    display: -webkit-box;
    max-width: 100%;
    margin-top: 10px;
    overflow: hidden;
    font-size: 0.82rem;
    line-height: 1.48;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .project-position-featured .project-link,
  .project-position-side-1 .project-link,
  .project-position-side-2 .project-link {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #ece9e6;
    font-size: 0.72rem;
  }
}

@media (max-width: 575.98px) {
  .projects-stage {
    height: 1215px;
  }

  .project-position-featured,
  .project-position-side-1,
  .project-position-side-2,
  .project-hidden {
    height: 385px;
  }

  .project-position-side-1 {
    top: 405px;
  }

  .project-position-side-2,
  .project-hidden {
    top: 810px;
  }

  .project-position-featured .project-title,
  .project-position-side-1 .project-title,
  .project-position-side-2 .project-title {
    font-size: 1.35rem;
  }

  .project-position-featured .project-body,
  .project-position-side-1 .project-body,
  .project-position-side-2 .project-body {
    padding: 18px;
  }

  .project-position-featured .project-preview,
  .project-position-side-1 .project-preview,
  .project-position-side-2 .project-preview {
    font-size: 0.78rem;
    line-height: 1.45;
  }
}

@media (max-width: 390px) {
  .projects-stage {
    height: 1190px;
  }

  .project-position-featured,
  .project-position-side-1,
  .project-position-side-2,
  .project-hidden {
    height: 375px;
  }

  .project-position-side-1 {
    top: 395px;
  }

  .project-position-side-2,
  .project-hidden {
    top: 790px;
  }

  .project-position-featured .project-title,
  .project-position-side-1 .project-title,
  .project-position-side-2 .project-title {
    font-size: 1.28rem;
  }
}

/* =========================================================
           PILARES - VERSÃO MAIS COMPACTA E SOFISTICADA
        ========================================================= */
.pillars-section.section-space {
  padding-top: 72px;
  padding-bottom: 72px;
}

.pillars-section .row.justify-content-center.text-center.mb-5 {
  margin-bottom: 2rem !important;
}

.pillars-section .section-title {
  margin-bottom: 0.7rem !important;
  font-size: clamp(2rem, 3.2vw, 2.7rem);
}

.pillars-section .section-text {
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.96rem;
  line-height: 1.6;
}

.pillars-section .row.g-4 {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem;
}

.pillar-card {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 170px;
  align-items: flex-start;
  gap: 18px;
  padding: 24px 22px;
  text-align: left;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.055),
    rgba(255, 255, 255, 0.025)
  );
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition:
    transform 0.28s ease,
    background 0.28s ease,
    border-color 0.28s ease;
}

.pillar-card::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 222, 168, 0.35),
    transparent
  );
  opacity: 0.65;
}

.pillar-card:hover {
  transform: translateY(-3px);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.075),
    rgba(255, 255, 255, 0.035)
  );
  border-color: rgba(255, 222, 168, 0.18);
}

.pillar-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  margin: 0;
  border: 1px solid rgba(255, 222, 168, 0.3);
  border-radius: 50%;
  font-size: 1.25rem;
}

.pillar-card h3 {
  margin: 1px 0 7px;
  font-size: 1.12rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.pillar-card p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}

.pillar-card > div:not(.pillar-icon) {
  min-width: 0;
}

@media (max-width: 991.98px) {
  .pillars-section.section-space {
    padding-top: 62px;
    padding-bottom: 62px;
  }

  .pillar-card {
    min-height: 160px;
    padding: 22px 20px;
  }
}

@media (max-width: 767.98px) {
  .pillars-section.section-space {
    padding-top: 54px;
    padding-bottom: 54px;
  }

  .pillars-section .row.justify-content-center.text-center.mb-5 {
    margin-bottom: 1.5rem !important;
  }

  .pillar-card {
    min-height: 0;
    gap: 15px;
    padding: 20px 18px;
  }

  .pillar-icon {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    font-size: 1.12rem;
  }

  .pillar-card h3 {
    font-size: 1.05rem;
  }

  .pillar-card p {
    font-size: 0.82rem;
    line-height: 1.5;
  }
}

/* =========================================================
           PILARES - INVERSÃO DE CORES NO HOVER
        ========================================================= */
.pillar-card {
  overflow: hidden;
  transition:
    transform 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    color 0.3s ease;
}

.pillar-card .pillar-icon,
.pillar-card h3,
.pillar-card p {
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.pillar-card:hover {
  transform: translateY(-4px);
  background: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
}

.pillar-card:hover .pillar-icon {
  background: var(--alle-primary);
  border-color: var(--alle-primary);
  color: var(--alle-gold-light);
  transform: scale(1.04);
}

.pillar-card:hover h3 {
  color: var(--alle-primary);
}

.pillar-card:hover p {
  color: #62686c;
}

.pillar-card:hover::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(181, 139, 69, 0.65),
    transparent
  );
  opacity: 1;
}

@media (hover: none) {
  .pillar-card:hover {
    transform: none;
  }
}

/* =========================================================
           MOBILE - EFEITO ATIVO AO ENTRAR NA ÁREA VISÍVEL
        ========================================================= */
@media (max-width: 767.98px) {
  /* Empreendimentos */
  .project-card.mobile-in-view {
    transform: translateY(-4px);
    box-shadow:
      0 22px 42px -16px rgba(0, 38, 57, 0.3),
      0 10px 22px rgba(0, 38, 57, 0.1);
  }

  .project-card.mobile-in-view::before {
    left: 130%;
    opacity: 1;
  }

  .project-card.mobile-in-view .project-image img {
    transform: scale(1.035);
    filter: brightness(1.06);
  }

  .project-card.mobile-in-view .project-link i {
    transform: translateX(5px);
  }

  /* Nossos Pilares */
  .pillar-card.mobile-in-view {
    transform: translateY(-4px);
    background: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
  }

  .pillar-card.mobile-in-view .pillar-icon {
    background: var(--alle-primary);
    border-color: var(--alle-primary);
    color: var(--alle-gold-light);
    transform: scale(1.04);
  }

  .pillar-card.mobile-in-view h3 {
    color: var(--alle-primary);
  }

  .pillar-card.mobile-in-view p {
    color: #62686c;
  }

  .pillar-card.mobile-in-view::after {
    background: linear-gradient(
      90deg,
      transparent,
      rgba(181, 139, 69, 0.65),
      transparent
    );
    opacity: 1;
  }
}

/* =========================================================
           CONTATO / ATENDIMENTO
        ========================================================= */
.contact-section {
  position: relative;
  background: #fff;
}

.contact-info {
  position: relative;
  height: 100%;
  padding: 8px 18px 0 0;
}

.contact-title {
  margin: 10px 0 16px;
  color: var(--alle-primary);
}

.contact-intro {
  max-width: 390px;
  margin-bottom: 32px;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--alle-border);
}

.contact-item {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  padding: 19px 0;
  border-bottom: 1px solid var(--alle-border);
}

.contact-icon {
  display: flex;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(181, 139, 69, 0.28);
  border-radius: 50%;
  color: var(--alle-secondary);
  font-size: 1rem;
}

.contact-item > div:last-child {
  min-width: 0;
  padding-top: 1px;
  color: #5f666a;
  font-size: 0.92rem;
  line-height: 1.55;
}

.contact-label {
  display: block;
  margin-bottom: 4px;
  color: var(--alle-primary);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contact-item a {
  color: #5f666a;
  text-decoration: none;
  transition: color 0.25s ease;
}

.contact-item a:hover {
  color: var(--alle-secondary);
}

.contact-item address {
  margin: 0;
  color: #5f666a;
  font-style: normal;
}

.contact-social {
  margin-top: 30px;
}

.contact-social-title {
  display: block;
  margin-bottom: 13px;
  color: var(--alle-primary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contact-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.contact-social-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border: 1px solid var(--alle-border);
  color: var(--alle-primary);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.contact-social-link:hover {
  transform: translateY(-2px);
  background: var(--alle-primary);
  border-color: var(--alle-primary);
  color: #fff;
}

.contact-form-box {
  position: relative;
  padding: 44px 46px;
  background: var(--alle-light);
  border-top: 3px solid var(--alle-secondary);
  box-shadow: 0 18px 46px rgba(0, 38, 57, 0.07);
}

.contact-form-heading {
  max-width: 690px;
  margin-bottom: 30px;
}

.contact-form-heading h2 {
  margin: 9px 0 8px;
  color: var(--alle-primary);
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.contact-form-heading p {
  margin: 0;
  color: var(--alle-muted);
  font-size: 0.94rem;
  line-height: 1.6;
}

.contact-form .form-label {
  margin-bottom: 8px;
  color: var(--alle-primary);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contact-form .form-label span {
  color: var(--alle-secondary);
}

.contact-form .form-control {
  min-height: 54px;
  padding: 14px 15px;
  border: 1px solid #d9d7d4;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.88);
  color: var(--alle-text);
  font-size: 0.9rem;
  box-shadow: none;
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.contact-form textarea.form-control {
  min-height: 155px;
  resize: vertical;
}

.contact-form .form-control::placeholder {
  color: #9a9ea1;
}

.contact-form .form-control:focus {
  background: #fff;
  border-color: var(--alle-secondary);
  box-shadow: 0 0 0 3px rgba(181, 139, 69, 0.09);
}

.contact-form .form-control.is-invalid {
  border-color: #a64545;
}

.contact-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 28px;
}

.contact-form-note {
  display: flex;
  max-width: 330px;
  gap: 9px;
  align-items: flex-start;
  margin: 0;
  color: #707579;
  font-size: 0.77rem;
  line-height: 1.45;
}

.contact-form-note i {
  margin-top: 1px;
  color: var(--alle-secondary);
  font-size: 1rem;
}

.contact-submit {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 23px;
  border: 1px solid var(--alle-primary);
  background: var(--alle-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}

.contact-submit:hover {
  transform: translateY(-2px);
  background: var(--alle-secondary);
  border-color: var(--alle-secondary);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 38, 57, 0.13);
}

.contact-submit i {
  font-size: 1rem;
}

@media (max-width: 991.98px) {
  .contact-info {
    padding-right: 0;
  }

  .contact-intro {
    max-width: 620px;
  }
}

@media (max-width: 767.98px) {
  .contact-section.section-space {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .contact-form-box {
    padding: 30px 22px;
  }

  .contact-form-heading {
    margin-bottom: 24px;
  }

  .contact-form-heading h2 {
    font-size: 2rem;
  }

  .contact-form-footer {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
  }

  .contact-form-note {
    max-width: none;
  }

  .contact-submit {
    width: 100%;
  }
}

@media (max-width: 390px) {
  .contact-form-box {
    padding: 26px 18px;
  }

  .contact-social-link {
    flex: 1 1 calc(50% - 5px);
    justify-content: center;
  }
}

/* =========================================================
           BANNER - IMAGENS SEM GRADIENTE / SOBREPOSIÇÃO
        ========================================================= */
.hero-carousel .carousel-item::before,
.hero-carousel .carousel-item::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

@media (max-width: 991.98px) {
  .hero-carousel .carousel-item::before,
  .hero-carousel .carousel-item::after {
    display: none !important;
    content: none !important;
    background: none !important;
  }
}

@media (max-width: 767.98px) {
  .hero-carousel .carousel-item::before,
  .hero-carousel .carousel-item::after {
    display: none !important;
    content: none !important;
    background: none !important;
  }
}

/* =========================================================
           BANNER - GRADIENTE PRETO SUAVE DA ESQUERDA PARA A DIREITA
        ========================================================= */
.hero-carousel .carousel-item::before {
  display: block !important;
  content: "" !important;
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.34) 28%,
    rgba(0, 0, 0, 0.16) 56%,
    rgba(0, 0, 0, 0) 100%
  ) !important;
  z-index: 1;
  pointer-events: none;
}

.hero-carousel .carousel-item::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* Logomarca do empreendimento no primeiro banner */
.soho-banner-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 260px;
  max-height: 92px;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.18));
}

.hero-kicker.hero-kicker-logo {
  display: block;
  margin-bottom: 20px;
  color: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.hero-kicker.hero-kicker-logo::before {
  display: none;
  content: none;
}

@media (max-width: 767.98px) {
  .hero-carousel .carousel-item::before {
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.5) 0%,
      rgba(0, 0, 0, 0.36) 38%,
      rgba(0, 0, 0, 0.16) 72%,
      rgba(0, 0, 0, 0) 100%
    ) !important;
  }

  .soho-banner-logo {
    max-width: 210px;
    max-height: 76px;
  }
}

@media (max-width: 575.98px) {
  .soho-banner-logo {
    max-width: 185px;
    max-height: 68px;
  }
}

/* =========================================================
           EMPREENDIMENTOS - SELO COM LOGOMARCA
           Substitui os antigos textos "Lançamento", "Em Obras", etc.
        ========================================================= */
.project-status.project-logo-badge {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  padding: 10px;
  background: #104462;
  border: 0;
  box-shadow: 0 8px 18px rgba(0, 38, 57, 0.18);
  overflow: hidden;
}

.project-status.project-logo-badge img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}

/* Cards menores do lado direito */
.project-position-side-1 .project-logo-badge,
.project-position-side-2 .project-logo-badge {
  width: 62px;
  height: 62px;
  padding: 8px;
  left: 14px;
  top: 14px;
}

@media (max-width: 991.98px) {
  .project-status.project-logo-badge,
  .project-position-side-1 .project-logo-badge,
  .project-position-side-2 .project-logo-badge {
    width: 62px;
    height: 62px;
    padding: 8px;
    left: 14px;
    top: 14px;
  }
}

@media (max-width: 767.98px) {
  .project-status.project-logo-badge,
  .project-position-featured .project-logo-badge,
  .project-position-side-1 .project-logo-badge,
  .project-position-side-2 .project-logo-badge {
    width: 64px;
    height: 64px;
    padding: 8px;
    left: 14px;
    top: 14px;
  }
}

@media (max-width: 575.98px) {
  .project-status.project-logo-badge,
  .project-position-featured .project-logo-badge,
  .project-position-side-1 .project-logo-badge,
  .project-position-side-2 .project-logo-badge {
    width: 58px;
    height: 58px;
    padding: 7px;
    left: 12px;
    top: 12px;
  }
}

/* =========================================================
           EMPREENDIMENTOS - LOGOMARCAS 30% MAIORES
        ========================================================= */
.project-status.project-logo-badge {
  width: 96px;
  height: 96px;
  padding: 10px;
}

.project-position-side-1 .project-logo-badge,
.project-position-side-2 .project-logo-badge {
  width: 81px;
  height: 81px;
  padding: 8px;
}

@media (max-width: 991.98px) {
  .project-status.project-logo-badge,
  .project-position-side-1 .project-logo-badge,
  .project-position-side-2 .project-logo-badge {
    width: 81px;
    height: 81px;
    padding: 8px;
  }
}

@media (max-width: 767.98px) {
  .project-status.project-logo-badge,
  .project-position-featured .project-logo-badge,
  .project-position-side-1 .project-logo-badge,
  .project-position-side-2 .project-logo-badge {
    width: 83px;
    height: 83px;
    padding: 8px;
  }
}

@media (max-width: 575.98px) {
  .project-status.project-logo-badge,
  .project-position-featured .project-logo-badge,
  .project-position-side-1 .project-logo-badge,
  .project-position-side-2 .project-logo-badge {
    width: 75px;
    height: 75px;
    padding: 7px;
  }
}

/* =========================================================
           EMPREENDIMENTOS - FUNDO BRANCO COM EFEITO GLOW NAS LOGOMARCAS
        ========================================================= */
.project-status.project-logo-badge {
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.98) 56%,
    rgba(255, 255, 255, 0.92) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.95),
    0 0 22px rgba(255, 255, 255, 0.72),
    0 0 38px rgba(255, 255, 255, 0.42),
    0 10px 24px rgba(0, 38, 57, 0.16);
}

.project-status.project-logo-badge::before {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: -1;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.52) 0%,
    rgba(255, 255, 255, 0.24) 48%,
    rgba(255, 255, 255, 0) 75%
  );
  filter: blur(8px);
  pointer-events: none;
}

.project-status.project-logo-badge img {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.85))
    drop-shadow(0 2px 5px rgba(0, 38, 57, 0.1));
}

/* =========================================================
           EMPREENDIMENTOS - CORREÇÃO DO GLOW
           Mantém o fundo original #104462 e adiciona apenas glow branco
        ========================================================= */
.project-status.project-logo-badge {
  background: #104462 !important;
  border: 0 !important;
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.72),
    0 0 22px rgba(255, 255, 255, 0.46),
    0 0 36px rgba(255, 255, 255, 0.24),
    0 10px 24px rgba(0, 38, 57, 0.16) !important;
}

.project-status.project-logo-badge::before {
  content: "";
  position: absolute;
  inset: -12px;
  z-index: -1;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.18) 48%,
    rgba(255, 255, 255, 0) 76%
  );
  filter: blur(8px);
  pointer-events: none;
}

.project-status.project-logo-badge img {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.1));
}

/* =========================================================
           EMPREENDIMENTOS - GLOW APENAS NA CAIXA DA LOGOMARCA
        ========================================================= */
.project-status.project-logo-badge {
  background: #104462 !important;
  border: 0 !important;
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.7),
    0 0 24px rgba(255, 255, 255, 0.42),
    0 0 38px rgba(255, 255, 255, 0.2),
    0 10px 24px rgba(0, 38, 57, 0.16) !important;
}

.project-status.project-logo-badge::before {
  display: none !important;
  content: none !important;
  background: none !important;
  filter: none !important;
}

.project-status.project-logo-badge img {
  position: relative;
  z-index: 2;
  filter: none !important;
}

/* =========================================================
           EMPREENDIMENTOS - CAIXAS DE LOGO MAIORES E PADRONIZADAS
           Mesmo tamanho em todos os cards.
           Nos cards menores, a caixa fica centralizada verticalmente
           dentro da foto, deixando a mesma margem em cima e embaixo.
        ========================================================= */
.project-status.project-logo-badge,
.project-position-featured .project-logo-badge,
.project-position-side-1 .project-logo-badge,
.project-position-side-2 .project-logo-badge {
  left: 16px !important;
  top: 50% !important;
  width: 112px !important;
  height: 112px !important;
  padding: 10px !important;
  transform: translateY(-50%) !important;
  background: #104462 !important;
  border: 0 !important;
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.7),
    0 0 24px rgba(255, 255, 255, 0.42),
    0 0 38px rgba(255, 255, 255, 0.2),
    0 10px 24px rgba(0, 38, 57, 0.16) !important;
}

.project-status.project-logo-badge::before,
.project-position-featured .project-logo-badge::before,
.project-position-side-1 .project-logo-badge::before,
.project-position-side-2 .project-logo-badge::before {
  display: none !important;
  content: none !important;
}

.project-status.project-logo-badge img,
.project-position-featured .project-logo-badge img,
.project-position-side-1 .project-logo-badge img,
.project-position-side-2 .project-logo-badge img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: none !important;
}

@media (max-width: 767.98px) {
  .project-status.project-logo-badge,
  .project-position-featured .project-logo-badge,
  .project-position-side-1 .project-logo-badge,
  .project-position-side-2 .project-logo-badge {
    left: 14px !important;
    top: 50% !important;
    width: 112px !important;
    height: 112px !important;
    padding: 10px !important;
    transform: translateY(-50%) !important;
  }
}

@media (max-width: 390px) {
  .project-status.project-logo-badge,
  .project-position-featured .project-logo-badge,
  .project-position-side-1 .project-logo-badge,
  .project-position-side-2 .project-logo-badge {
    left: 12px !important;
    width: 104px !important;
    height: 104px !important;
    padding: 9px !important;
  }
}

/* =========================================================
           PRIMEIRO EMPREENDIMENTO - POSIÇÃO DA CAIXA DA LOGOMARCA
           Mantém a caixa próxima ao topo e com margens superior
           e lateral iguais.
        ========================================================= */
.project-position-featured .project-logo-badge {
  left: 18px !important;
  top: 18px !important;
  transform: none !important;
}

@media (max-width: 991.98px) {
  .project-position-featured .project-logo-badge {
    left: 16px !important;
    top: 16px !important;
    transform: none !important;
  }
}

@media (max-width: 767.98px) {
  .project-position-featured .project-logo-badge {
    left: 14px !important;
    top: 14px !important;
    transform: none !important;
  }
}

@media (max-width: 390px) {
  .project-position-featured .project-logo-badge {
    left: 12px !important;
    top: 12px !important;
    transform: none !important;
  }
}

/* =========================================================
           EMPREENDIMENTOS - CARDS MENORES COM CAIXA 30% MENOR NO DESKTOP
           No mobile, todos mantêm o mesmo tamanho/padrão.
        ========================================================= */

/* Desktop e tablets largos: reduz apenas cards menores */
@media (min-width: 992px) {
  .project-position-side-1 .project-logo-badge,
  .project-position-side-2 .project-logo-badge {
    width: 78px !important;
    height: 78px !important;
    padding: 7px !important;
  }
}

/* Mobile: todos os cards voltam ao mesmo padrão */
@media (max-width: 767.98px) {
  .project-position-featured .project-logo-badge,
  .project-position-side-1 .project-logo-badge,
  .project-position-side-2 .project-logo-badge {
    width: 112px !important;
    height: 112px !important;
    padding: 10px !important;
  }
}

@media (max-width: 390px) {
  .project-position-featured .project-logo-badge,
  .project-position-side-1 .project-logo-badge,
  .project-position-side-2 .project-logo-badge {
    width: 104px !important;
    height: 104px !important;
    padding: 9px !important;
  }
}

/* =========================================================
           EMPREENDIMENTOS - AJUSTE FINAL DE POSICIONAMENTO DAS LOGOS
           Desktop:
           - cards menores com margem superior igual à margem esquerda.
           Mobile:
           - todas as caixas centralizadas verticalmente na área da foto,
             mantendo exatamente o mesmo padrão entre os cards.
        ========================================================= */

/* Desktop: cards menores com margem superior = margem esquerda */
@media (min-width: 992px) {
  .project-position-side-1 .project-logo-badge,
  .project-position-side-2 .project-logo-badge {
    left: 14px !important;
    top: 14px !important;
    transform: none !important;
  }
}

/* Mobile: todos os cards com mesmo tamanho e centralização vertical */
@media (max-width: 767.98px) {
  .project-position-featured .project-logo-badge,
  .project-position-side-1 .project-logo-badge,
  .project-position-side-2 .project-logo-badge {
    left: 14px !important;
    top: 50% !important;
    width: 112px !important;
    height: 112px !important;
    padding: 10px !important;
    transform: translateY(-50%) !important;
  }
}

@media (max-width: 390px) {
  .project-position-featured .project-logo-badge,
  .project-position-side-1 .project-logo-badge,
  .project-position-side-2 .project-logo-badge {
    left: 12px !important;
    top: 50% !important;
    width: 104px !important;
    height: 104px !important;
    padding: 9px !important;
    transform: translateY(-50%) !important;
  }
}

/* =========================================================
           BANNERS - GRADIENTE MAIS ESCURO NO LADO ESQUERDO
           Mantém a transição gradual até ficar transparente à direita.
        ========================================================= */
.hero-carousel .carousel-item::before {
  display: block !important;
  content: "" !important;
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.68) 0%,
    rgba(0, 0, 0, 0.48) 28%,
    rgba(0, 0, 0, 0.22) 56%,
    rgba(0, 0, 0, 0) 100%
  ) !important;
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 767.98px) {
  .hero-carousel .carousel-item::before {
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.68) 0%,
      rgba(0, 0, 0, 0.5) 38%,
      rgba(0, 0, 0, 0.22) 72%,
      rgba(0, 0, 0, 0) 100%
    ) !important;
  }
}

.whatsapp {
  position: fixed;
  top: 92%;
  right: 1%;
  padding: 10px;
  z-index: 10000000;
}
@media screen and (max-width: 479px) {
  .whatsapp {
    top: 82%;
  }
}

/* ==========================================================
   PÁGINA DE CONTATO
========================================================== */

.contato-page {
  position: relative;

  width: 100%;

  padding-top: 76px;

  background: var(--alle-bg);
}

/* ==========================================================
   HERO
========================================================== */

.contato-page__hero {
  position: relative;

  padding: 90px 0 80px;

  background: var(--alle-primary);

  overflow: hidden;
}

/* decoração */

.contato-page__hero::after {
  content: "";

  position: absolute;

  top: -260px;
  right: -170px;

  width: 600px;
  height: 600px;

  border: 1px solid rgba(255, 255, 255, 0.06);

  border-radius: 50%;

  pointer-events: none;
}

.contato-page__hero .container {
  position: relative;

  z-index: 2;
}

/* kicker */

.contato-page__hero .empreendimento-kicker {
  display: inline-block;

  margin-bottom: 16px;

  font-size: 12px;
  line-height: 1;

  font-weight: 700;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: var(--alle-gold-light);
}

/* título */

.contato-page__title {
  max-width: 700px;

  margin: 0 0 20px;

  font-family: "Hanken Grotesk", Arial, sans-serif;

  font-size: clamp(42px, 5vw, 64px);

  line-height: 1;

  font-weight: 600;

  letter-spacing: -0.04em;

  color: var(--alle-white);
}

/* subtítulo */

.contato-page__subtitle {
  max-width: 610px;

  margin: 0;

  font-size: 18px;

  line-height: 1.7;

  color: rgba(255, 255, 255, 0.68);
}

/* ==========================================================
   CONTEÚDO
========================================================== */

.contato-page__content {
  padding: 90px 0 110px;
}

/* ==========================================================
   GRID
========================================================== */

.contato-page__grid {
  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.1fr);

  gap: 70px;

  align-items: start;
}

/* ==========================================================
   CABEÇALHOS
========================================================== */

.contato-page__section-header {
  margin-bottom: 34px;
}

.contato-page__label {
  display: block;

  margin-bottom: 9px;

  font-size: 11px;

  line-height: 1;

  font-weight: 700;

  letter-spacing: 0.17em;

  text-transform: uppercase;

  color: var(--alle-secondary);
}

.contato-page__section-header h2 {
  margin: 0 0 10px;

  font-size: 32px;

  line-height: 1.15;

  font-weight: 600;

  letter-spacing: -0.025em;

  color: var(--alle-primary);
}

.contato-page__section-header p {
  max-width: 470px;

  margin: 0;

  font-size: 15px;

  line-height: 1.65;

  color: var(--alle-muted);
}

/* ==========================================================
   DADOS VINDOS DE exibirTodosDados()
========================================================== */

.contato-page__dados-cadastrados {
  position: relative;

  padding: 30px;

  background: var(--alle-white);

  border: 1px solid var(--alle-border);

  box-shadow: 0 12px 35px rgba(0, 38, 57, 0.05);

  font-size: 15px;

  line-height: 1.8;

  color: var(--alle-text);
}

/* links */

.contato-page__dados-cadastrados a {
  color: var(--alle-primary);

  transition: color 0.2s ease;
}

.contato-page__dados-cadastrados a:hover {
  color: var(--alle-secondary);
}

/* parágrafos eventualmente gerados pelo método */

.contato-page__dados-cadastrados p {
  margin-top: 0;

  margin-bottom: 12px;
}

.contato-page__dados-cadastrados p:last-child {
  margin-bottom: 0;
}

/* ==========================================================
   WHATSAPP
========================================================== */

.contato-page__whatsapp {
  display: grid;

  grid-template-columns:
    52px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 18px;

  margin-top: 20px;

  padding: 22px;

  background: var(--alle-primary);
}

/* ícone */

.contato-page__whatsapp-icon {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 52px;
  height: 52px;

  border: 1px solid rgba(255, 255, 255, 0.18);

  font-size: 22px;

  color: var(--alle-gold-light);
}

/* texto */

.contato-page__whatsapp-content {
  display: flex;

  flex-direction: column;

  gap: 3px;
}

.contato-page__whatsapp-content span {
  font-size: 11px;

  font-weight: 600;

  letter-spacing: 0.07em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.55);
}

.contato-page__whatsapp-content strong {
  font-size: 15px;

  line-height: 1.35;

  font-weight: 600;

  color: var(--alle-white);
}

/* botão */

.contato-page__whatsapp-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  min-height: 46px;

  padding: 0 18px;

  border: 1px solid rgba(255, 255, 255, 0.22);

  color: var(--alle-white);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.05em;

  text-transform: uppercase;

  white-space: nowrap;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.contato-page__whatsapp-button:hover {
  background: var(--alle-white);

  border-color: var(--alle-white);

  color: var(--alle-primary);
}

/* ==========================================================
   MAPA
========================================================== */

.contato-page__mapa {
  position: relative;

  width: 100%;

  min-height: 470px;

  overflow: hidden;

  background: #eee;

  border: 8px solid var(--alle-white);

  box-shadow: 0 18px 45px rgba(0, 38, 57, 0.1);
}

/* iframe vindo do administrativo */

.contato-page__mapa iframe {
  display: block;

  width: 100% !important;

  height: 470px !important;

  min-height: 470px;

  margin: 0;

  border: 0 !important;
}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 991.98px) {
  .contato-page__hero {
    padding: 70px 0 65px;
  }

  .contato-page__content {
    padding: 70px 0 85px;
  }

  .contato-page__grid {
    grid-template-columns: 1fr;

    gap: 60px;
  }
}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767.98px) {
  .contato-page {
    padding-top: 76px;
  }

  .contato-page__hero {
    padding: 55px 0;
  }

  .contato-page__title {
    font-size: 38px;
  }

  .contato-page__subtitle {
    font-size: 16px;
  }

  .contato-page__content {
    padding: 55px 0 70px;
  }

  .contato-page__section-header {
    margin-bottom: 25px;
  }

  .contato-page__section-header h2 {
    font-size: 28px;
  }

  /* dados */

  .contato-page__dados-cadastrados {
    padding: 24px 20px;
  }

  /* WhatsApp */

  .contato-page__whatsapp {
    grid-template-columns:
      48px
      minmax(0, 1fr);

    padding: 20px;
  }

  .contato-page__whatsapp-icon {
    width: 48px;
    height: 48px;
  }

  .contato-page__whatsapp-button {
    grid-column: 1 / -1;

    width: 100%;

    margin-top: 4px;
  }

  /* mapa */

  .contato-page__mapa,
  .contato-page__mapa iframe {
    min-height: 380px;

    height: 380px !important;
  }
}

/* ==========================================================
   MOBILE PEQUENO
========================================================== */

@media (max-width: 480px) {
  .contato-page__mapa,
  .contato-page__mapa iframe {
    min-height: 320px;

    height: 320px !important;
  }
}

/* ==========================================================
   PÁGINA BÁSICA
========================================================== */

.pagina-basica {
  width: 100%;

  padding-top: 76px;

  background: var(--alle-bg);
}

/* ==========================================================
   HERO
========================================================== */

.pagina-basica__hero {
  position: relative;

  padding: 80px 0 70px;

  background: var(--alle-primary);

  overflow: hidden;
}

.pagina-basica__hero::after {
  content: "";

  position: absolute;

  width: 500px;
  height: 500px;

  top: -300px;
  right: -100px;

  border: 1px solid rgba(255, 255, 255, 0.06);

  border-radius: 50%;

  pointer-events: none;
}

.pagina-basica__hero .container {
  position: relative;

  z-index: 2;
}

/* ==========================================================
   TÍTULO
========================================================== */

.pagina-basica__kicker {
  display: block;

  margin-bottom: 14px;

  font-size: 11px;
  line-height: 1;

  font-weight: 700;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: var(--alle-gold-light);
}

.pagina-basica__title {
  max-width: 850px;

  margin: 0;

  font-family: "Hanken Grotesk", Arial, sans-serif;

  font-size: clamp(40px, 5vw, 60px);

  line-height: 1.05;

  font-weight: 600;

  letter-spacing: -0.035em;

  color: var(--alle-white);
}

.pagina-basica__line {
  display: block;

  width: 54px;
  height: 2px;

  margin-top: 27px;

  background: var(--alle-secondary);
}

/* ==========================================================
   CONTEÚDO
========================================================== */

.pagina-basica__content {
  padding: 85px 0 110px;
}

.pagina-basica__body {
  /*max-width: 1100px;*/

  margin: 0 auto;
}

/* ==========================================================
   FOTO PRINCIPAL
========================================================== */

.pagina-basica__featured {
  width: 100%;

  margin-bottom: 48px;
}

.pagina-basica__featured img {
  display: block;

  max-width: 100%;
  height: auto;

  margin: 0 auto;
}

/* corrige possíveis classes antigas */

.pagina-basica__featured .img-responsive {
  display: block;

  max-width: 100%;
  height: auto;
}

/* ==========================================================
   TEXTO
========================================================== */

.pagina-basica__text {
  /*max-width: 900px;*/

  margin: 0 auto;

  font-size: 17px;

  line-height: 1.8;

  color: var(--alle-text);
}

.pagina-basica__text p {
  margin: 0 0 22px;
}

.pagina-basica__text p:last-child {
  margin-bottom: 0;
}

.pagina-basica__text h2,
.pagina-basica__text h3,
.pagina-basica__text h4 {
  margin-top: 38px;
  margin-bottom: 16px;

  font-weight: 600;

  color: var(--alle-primary);
}

.pagina-basica__text h2 {
  font-size: 30px;
}

.pagina-basica__text h3 {
  font-size: 24px;
}

.pagina-basica__text h4 {
  font-size: 20px;
}

.pagina-basica__text strong {
  font-weight: 700;

  color: var(--alle-primary);
}

.pagina-basica__text a {
  color: var(--alle-secondary);

  text-decoration: underline;

  text-underline-offset: 3px;
}

.pagina-basica__text ul,
.pagina-basica__text ol {
  margin: 20px 0;

  padding-left: 24px;
}

.pagina-basica__text li {
  margin-bottom: 8px;
}

/* ==========================================================
   GALERIA
========================================================== */

.pagina-basica__gallery {
  margin-top: 85px;

  padding-top: 65px;

  border-top: 1px solid var(--alle-border);
}

/* ==========================================================
   CABEÇALHO DA GALERIA
========================================================== */

.pagina-basica__gallery-header {
  margin-bottom: 35px;
}

.pagina-basica__gallery-label {
  display: block;

  margin-bottom: 9px;

  font-size: 11px;

  line-height: 1;

  font-weight: 700;

  letter-spacing: 0.17em;

  text-transform: uppercase;

  color: var(--alle-secondary);
}

.pagina-basica__gallery-header h2 {
  margin: 0;

  font-size: 34px;

  line-height: 1.15;

  font-weight: 600;

  letter-spacing: -0.025em;

  color: var(--alle-primary);
}

/* ==========================================================
   GRID DA GALERIA
========================================================== */

.pagina-basica__gallery-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 24px;
}

/* ==========================================================
   ITEM
========================================================== */

.pagina-basica__gallery-item {
  min-width: 0;
}

.pagina-basica__gallery-link {
  position: relative;

  display: block;

  width: 100%;

  aspect-ratio: 4 / 3;

  overflow: hidden;

  background: #eee;
}

.pagina-basica__gallery-link img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.5s ease,
    filter 0.5s ease;
}

/* ==========================================================
   OVERLAY
========================================================== */

.pagina-basica__gallery-overlay {
  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 9px;

  background: rgba(0, 38, 57, 0.6);

  opacity: 0;

  transition: opacity 0.3s ease;
}

.pagina-basica__gallery-link:hover .pagina-basica__gallery-overlay {
  opacity: 1;
}

.pagina-basica__gallery-link:hover img {
  transform: scale(1.045);
}

.pagina-basica__gallery-icon {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  border: 1px solid rgba(255, 255, 255, 0.55);

  color: var(--alle-gold-light);

  font-size: 17px;
}

.pagina-basica__gallery-view {
  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--alle-white);
}

/* ==========================================================
   LEGENDA
========================================================== */

.pagina-basica__gallery-caption {
  padding: 13px 2px 0;

  font-size: 14px;

  line-height: 1.5;

  color: var(--alle-muted);
}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 991.98px) {
  .pagina-basica__hero {
    padding: 65px 0 60px;
  }

  .pagina-basica__content {
    padding: 65px 0 85px;
  }

  .pagina-basica__gallery {
    margin-top: 65px;

    padding-top: 50px;
  }

  .pagina-basica__gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767.98px) {
  .pagina-basica {
    padding-top: 76px;
  }

  .pagina-basica__hero {
    padding: 50px 0;
  }

  .pagina-basica__title {
    font-size: 37px;
  }

  .pagina-basica__content {
    padding: 50px 0 65px;
  }

  .pagina-basica__featured {
    margin-bottom: 35px;
  }

  .pagina-basica__text {
    font-size: 16px;

    line-height: 1.7;
  }

  .pagina-basica__gallery {
    margin-top: 50px;

    padding-top: 42px;
  }

  .pagina-basica__gallery-header {
    margin-bottom: 26px;
  }

  .pagina-basica__gallery-header h2 {
    font-size: 29px;
  }

  .pagina-basica__gallery-grid {
    grid-template-columns: 1fr;

    gap: 26px;
  }

  /*
     * No touch/mobile não dependemos do hover
     * para indicar que a foto pode ser aberta.
     */

  .pagina-basica__gallery-overlay {
    justify-content: flex-end;

    align-items: flex-end;

    padding: 16px;

    background: linear-gradient(to top, rgba(0, 38, 57, 0.6), transparent 55%);

    opacity: 1;
  }

  .pagina-basica__gallery-view {
    display: none;
  }

  .pagina-basica__gallery-icon {
    width: 38px;
    height: 38px;

    background: var(--alle-primary);

    border: 0;
  }
}

/* ========================================================= */

/* ==========================================================
   POPUP - ALLE
========================================================== */

.alle-popup {
  position: fixed;

  inset: 0;

  z-index: 99999;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 30px;

  opacity: 1;

  transition: opacity 0.25s ease;
}

/* ==========================================================
   FUNDO
========================================================== */

.alle-popup__backdrop {
  position: absolute;

  inset: 0;

  background: rgba(0, 25, 38, 0.78);

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* ==========================================================
   CAIXA
========================================================== */

.alle-popup__dialog {
  position: relative;

  z-index: 2;

  width: 100%;
  max-width: 760px;

  max-height: calc(100vh - 60px);

  overflow-y: auto;

  background: #fff;

  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);

  animation: allePopupEntrada 0.35s ease both;
}

/* ==========================================================
   BOTÃO FECHAR
========================================================== */

.alle-popup__close {
  position: absolute;

  top: 18px;
  right: 18px;

  z-index: 5;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  padding: 0;

  border: 0;

  background: var(--alle-primary);

  color: #fff;

  font-size: 17px;

  cursor: pointer;

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.alle-popup__close:hover {
  background: var(--alle-secondary);

  transform: rotate(90deg);
}

/* ==========================================================
   FOTO
========================================================== */

.alle-popup__image {
  width: 100%;

  overflow: hidden;

  background: #eee;
}

.alle-popup__image img {
  display: block;

  width: 100%;
  height: auto;

  max-height: 440px;

  object-fit: cover;
}

/* remove margens que possam vir do sistema */

.alle-popup__image p,
.alle-popup__image figure {
  margin: 0;
}

/* ==========================================================
   CONTEÚDO
========================================================== */

.alle-popup__content {
  padding: 42px 48px 46px;
}

/* ==========================================================
   LABEL
========================================================== */

.alle-popup__label {
  display: block;

  margin-bottom: 11px;

  color: var(--alle-secondary);

  font-size: 11px;

  line-height: 1;

  font-weight: 700;

  letter-spacing: 0.17em;

  text-transform: uppercase;
}

/* ==========================================================
   TÍTULO
========================================================== */

.alle-popup__title {
  max-width: 620px;

  margin: 0;

  color: var(--alle-primary);

  font-size: 35px;

  line-height: 1.12;

  font-weight: 600;

  letter-spacing: -0.025em;
}

/* ==========================================================
   DETALHE DOURADO
========================================================== */

.alle-popup__line {
  display: block;

  width: 48px;
  height: 2px;

  margin: 22px 0 25px;

  background: var(--alle-secondary);
}

/* ==========================================================
   DESCRIÇÃO
========================================================== */

.alle-popup__description {
  color: var(--alle-muted);

  font-size: 16px;

  line-height: 1.7;
}

.alle-popup__description p {
  margin: 0 0 16px;
}

.alle-popup__description p:last-child {
  margin-bottom: 0;
}

.alle-popup__description strong {
  color: var(--alle-primary);

  font-weight: 600;
}

.alle-popup__description a {
  color: var(--alle-secondary);

  font-weight: 600;
}

/* ==========================================================
   BLOQUEIA SCROLL DA PÁGINA
========================================================== */

body.alle-popup-open {
  overflow: hidden;
}

/* ==========================================================
   FECHAMENTO
========================================================== */

.alle-popup--closing {
  opacity: 0;
}

.alle-popup--closing .alle-popup__dialog {
  transform: translateY(15px) scale(0.98);
}

/* ==========================================================
   ANIMAÇÃO
========================================================== */

@keyframes allePopupEntrada {
  from {
    opacity: 0;

    transform: translateY(22px) scale(0.98);
  }

  to {
    opacity: 1;

    transform: translateY(0) scale(1);
  }
}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767.98px) {
  .alle-popup {
    align-items: center;

    padding: 18px;
  }

  .alle-popup__dialog {
    max-height: calc(100vh - 36px);
  }

  .alle-popup__close {
    top: 12px;
    right: 12px;

    width: 38px;
    height: 38px;

    font-size: 15px;
  }

  .alle-popup__image img {
    max-height: 300px;
  }

  .alle-popup__content {
    padding: 30px 25px 32px;
  }

  .alle-popup__title {
    padding-right: 25px;

    font-size: 28px;
  }

  .alle-popup__line {
    margin: 18px 0 21px;
  }

  .alle-popup__description {
    font-size: 15px;

    line-height: 1.65;
  }
}

/* ==========================================================
   CELULARES PEQUENOS
========================================================== */

@media (max-width: 420px) {
  .alle-popup {
    padding: 12px;
  }

  .alle-popup__dialog {
    max-height: calc(100vh - 24px);
  }

  .alle-popup__content {
    padding: 27px 21px 29px;
  }

  .alle-popup__title {
    font-size: 25px;
  }
}