html,
body {
  margin: 0;
}
@font-face {
  font-family: "Akrobat";
  src: url("/wp-content/themes/lucrar-hello-child/assets/fonts/Akrobat-Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Akrobat";
  src: url("/wp-content/themes/lucrar-hello-child/assets/fonts/Akrobat-Bold.woff2")
    format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SegoePrint";
  src: url("/wp-content/themes/lucrar-hello-child/assets/fonts/segoepr.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* esconder duplicados de decor fora da secção */
body img[src*="Elipse-1-copiar"]:not(.edge-arc),
body img[src*="Retangulo-3-copiar-1"]:not(.edge-rect) {
  display: none !important;
}

.lucrar-construction-section {
  --bg: #0e1116;
  --fg: #e9edf1;
  --accent: #ffe2a6;

  /* Setúbal (PT: texto puxado à esquerda e mais largo) */
  --stb-model-w: 55%;
  --stb-model-offset-top: -8px;
  --stb-arrow-x: 72%;
  --stb-arrow-y: 32%;
  --stb-arrow-w: 140px;
  --stb-arrow-rot: -38deg;
  --stb-arrow-flip: 1;
  --stb-text-x: 76%;
  --stb-text-y: 16%;
  --stb-text-w: 420px;
  --stb-text-rot: 30deg;

  /* Pegões */
  --pgs-model-w: 60%;
  --pgs-model-offset-top: 4px;
  --pgs-arrow-x: 70%;
  --pgs-arrow-y: 28%;
  --pgs-arrow-w: 140px;
  --pgs-arrow-rot: -30deg;
  --pgs-arrow-flip: 1;
  --pgs-text-x: 74%;
  --pgs-text-y: 12%;
  --pgs-text-w: 280px;
  --pgs-text-rot: 32deg;

  /* Selos (tamanho igual) */
  --stb-stamp-w: 100px;
  --pgs-stamp-w: 170px;
  --stb-stamp-left: 58%;
  --stb-stamp-bottom: -10px;
  --stb-stamp-rot: 0deg;
  --pgs-stamp-right: 22%;
  --pgs-stamp-bottom: -4%;
  --pgs-stamp-rot: 0deg;

  /* Decor (mantido) */
  --edge-arc-top: 140px;
  --edge-arc-w: 160px;
  --edge-arc-rotate: 0deg;
  --edge-arc-opacity: 1;
  --edge-rect-bottom: 0px;
  --edge-rect-w: 40px;
  --edge-rect-rotate: 180deg;
  --edge-rect-opacity: 1;
  --edge-rect-flipX: 1;

  /* tracejado + máscaras */
  --dash-width: 5px;
  --dash-on: 18px;
  --dash-off: 18px;
  --mask-w: calc(var(--dash-width) + 10px);
  --mask-radius: 10px;
  --mask-padV: 14px;
  --mask-stamp-min: 96px;

  padding: clamp(28px, 6vw, 72px) 0 clamp(70px, 12vw, 110px);
  color: var(--fg);
  font-family: "Akrobat", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  position: relative;
  isolation: isolate;
}

.main-stage {
  max-width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid;
  place-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}
.title {
  font-size: clamp(36px, 7vw, 50px);
  font-weight: 700;
  margin: 0 0 clamp(6px, 1.6vw, 12px);
  text-transform: uppercase;
}
.subtitle {
  font-size: clamp(14px, 3vw, 18px);
  margin: 0 0 clamp(18px, 3.8vw, 24px);
  color: var(--accent);
}
.divider {
  width: 4px;
  height: clamp(22px, 4.5vw, 28px);
  margin: 0 auto clamp(18px, 3.5vw, 26px);
  background: currentColor;
  border-radius: 2px;
  opacity: 0.95;
}

.construction-container {
  position: relative;
  display: grid;
  justify-items: center;
  row-gap: clamp(44px, 6.2vw, 64px);
}

/* camadas: traço → máscaras → conteúdo → selo */
.path-main {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  height: 100%;
  width: var(--dash-width);
  background: repeating-linear-gradient(
    to bottom,
    #fff 0,
    #fff var(--dash-on),
    transparent var(--dash-on),
    transparent calc(var(--dash-on) + var(--dash-off))
  );
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
  border-radius: 999px;
}
.path-mask {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: var(--mask-w);
  background: var(--bg);
  border-radius: var(--mask-radius);
  z-index: 1;
  pointer-events: none;
}

.project-section {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  width: 100%;
  max-width: min(620px, 86vw);
}
.see-more-wrap {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.see-more {
  font-weight: 700;
  text-decoration: none;
  font-size: clamp(15px, 2.2vw, 20px);
  color: var(--accent) !important;
}

.pin-circle {
  display: grid;
  place-items: center;
  width: 52px;
  aspect-ratio: 1/1;
}
.pin {
  width: 26px;
}
.location {
  display: block;
  margin: 0;
  text-align: center;
  font-weight: 700;
  font-size: clamp(22px, 3.6vw, 24px);
}

.model-wrap {
  position: relative;
  width: 100%;
}
.model {
  display: block;
  width: 100%;
  object-fit: contain;
  position: relative;
  z-index: 3;
}
.ann-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
.arrow-img {
  position: absolute;
  z-index: 2;
}
.curve-text {
  position: absolute;
  z-index: 4;
}
.curve-text svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.curve-text text {
  font-family: "SegoePrint", cursive !important;
  fill: var(--accent);
  font-size: clamp(16px, 2.4vw, 20px);
  text-anchor: middle;
}

.completed .model {
  width: var(--stb-model-w);
  margin-inline: auto;
}
.under-construction .model {
  width: var(--pgs-model-w);
  margin-inline: auto;
}
.completed .model-wrap {
  margin-top: var(--stb-model-offset-top);
}
.under-construction .model-wrap {
  margin-top: var(--pgs-model-offset-top);
}

.completed .arrow-img {
  left: var(--stb-arrow-x);
  top: var(--stb-arrow-y);
  transform: translate(-50%, -50%) rotate(var(--stb-arrow-rot))
    scaleX(var(--stb-arrow-flip));
  width: var(--stb-arrow-w);
  aspect-ratio: 300/150;
  background: url("/wp-content/themes/lucrar-hello-child/construction/assets/Layer24copy.png")
    center/contain no-repeat;
}
.under-construction .arrow-img {
  left: var(--pgs-arrow-x);
  top: var(--pgs-arrow-y);
  transform: translate(-50%, -50%) rotate(var(--pgs-arrow-rot))
    scaleX(var(--pgs-arrow-flip));
  width: var(--pgs-arrow-w);
  aspect-ratio: 300/150;
  background: url("/wp-content/themes/lucrar-hello-child/construction/assets/Layer24copy.png")
    center/contain no-repeat;
}

.completed .curve-text {
  left: var(--stb-text-x);
  top: var(--stb-text-y);
  transform: translate(-50%, -50%) rotate(var(--stb-text-rot));
  width: var(--stb-text-w);
}
.under-construction .curve-text {
  left: var(--pgs-text-x);
  top: var(--pgs-text-y);
  transform: translate(-50%, -50%) rotate(var(--pgs-text-rot));
  width: var(--pgs-text-w);
}

.status-stamp-wrap {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.stamp-text {
  pointer-events: auto;
  background: transparent;
  color: #fff;
  font-family: "Akrobat", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(10px, 2vw, 20px);
  padding: 4px 6px;
  border-radius: 4px;
  box-shadow: none;
  display: inline-block;
  white-space: nowrap;
  transform: translateY(6px);
}
.under-construction .stamp-text {
  transform: translateY(0px) rotate(-32deg);
  transform-origin: left center;
  font-size: clamp(10px, 2vw, 20px);
  margin-left: 6px; /* small offset to sit near the terrain edge */
}
.completed-text {
  color: #fff;
  transform: translateY(0) rotate(-6deg);
  transform-origin: center;
  white-space: nowrap;
}
.status-stamp-wrap img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.completed .status-stamp-wrap {
  width: var(--stb-stamp-w);
  left: var(--stb-stamp-left);
  bottom: var(--stb-stamp-bottom);
  transform: translate(-50%, 0) rotate(var(--stb-stamp-rot));
}
.under-construction .status-stamp-wrap {
  width: var(--pgs-stamp-w);
  right: var(--pgs-stamp-right);
  bottom: var(--pgs-stamp-bottom);
  transform: rotate(var(--pgs-stamp-rot));
}

/* decor colado às bordas */
.edge-bleed {
  position: absolute;
  inset: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.edge-arc,
.edge-rect {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: none;
}
.edge-arc {
  left: 0;
  top: var(--edge-arc-top);
  width: var(--edge-arc-w);
  transform: rotate(var(--edge-arc-rotate));
  opacity: var(--edge-arc-opacity);
}
.edge-rect {
  right: 0;
  bottom: var(--edge-rect-bottom);
  width: var(--edge-rect-w);
  transform: rotate(var(--edge-rect-rotate)) scaleX(var(--edge-rect-flipX));
  opacity: var(--edge-rect-opacity);
}

/* responsivo – PT Setúbal (texto mais largo) + Pegões fino-tuning */
@media (max-width: 1024px) {
  :root .lucrar-construction-section {
    --stb-stamp-w: 90px;
    --stb-stamp-bottom: -8px;
    --pgs-stamp-w: 150px;
    --pgs-stamp-right: 24%;
    --pgs-stamp-bottom: -2%;

    --stb-model-w: 50%;
    --pgs-model-w: 55%;
    --stb-text-w: 380px;
    --pgs-text-w: 250px;
  }
}
@media (max-width: 759px) {
  :root .lucrar-construction-section {
    --stb-text-w: 340px;
    --pgs-text-w: 230px;
  }
}
@media (max-width: 639px) {
  :root .lucrar-construction-section {
    --stb-model-w: 50%;
    --pgs-model-w: 55%;
    --stb-arrow-w: 70px;
    --pgs-arrow-w: 70px;
    --stb-arrow-x: 70%;
    --pgs-arrow-x: 70%;
    --pgs-arrow-y: 30%;
    --stb-text-w: 240px;
    --stb-text-x: 72%;
    --stb-text-y: 20%;
    --pgs-text-w: 210px;
    --pgs-text-x: 74%;
    --pgs-text-y: 14%;
    --edge-arc-w: 50px;
    --edge-arc-top: 100px;
    --edge-rect-w: 20px;
    --edge-rect-bottom: 14px;

    --stb-stamp-w: clamp(60px, 12vw, 70px);
    --pgs-stamp-w: clamp(100px, 22vw, 120px);
  }
}

@media (max-width: 420px) {
  :root .lucrar-construction-section {
    --stb-text-w: 220px;
    --stb-text-y: 17%;
    --pgs-text-w: 190px;
    --pgs-text-x: 74%;
    --pgs-text-y: 12%;

    --pgs-stamp-right: 22%;
    --pgs-stamp-bottom: -4%;

    --stb-stamp-w: clamp(40px, 12vw, 50px);
    --pgs-stamp-w: clamp(60px, 20vw, 80px);
  }
}