/* ==========================================================================
   Café com Guerreiro — "Em Construção" page
   ========================================================================== */

body.construction-page{ overflow:hidden; }

.construction{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
}

.construction-media{ position:absolute; inset:0; z-index:0; }
.construction-media img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.construction-scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 15%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.78) 55%, rgba(0,0,0,0.92) 100%);
}

.construction-content{
  position:relative; z-index:2;
  padding:0 24px;
  max-width:640px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.construction-logo{
  height:64px;
  width:auto;
  margin-bottom:34px;
}

.construction .kicker{ margin-bottom:18px; }

.construction-title{
  font-family:var(--font-display);
  color:var(--snow);
  text-transform:uppercase;
  font-size:clamp(2.1rem, 5.5vw, 3.6rem);
  line-height:1.05;
  margin-bottom:22px;
}

.construction-lead{
  color:rgba(239,236,229,0.85);
  font-size:1.08rem;
  line-height:1.6;
  max-width:480px;
  margin:0 auto 40px;
}

/* roast gauge */
.roast-gauge{ width:100%; max-width:360px; margin:0 auto 40px; }
.roast-gauge-track{
  width:100%; height:8px; border-radius:999px;
  background:rgba(239,236,229,0.18);
  overflow:hidden;
}
.roast-gauge-fill{
  height:100%; width:0%; border-radius:999px;
  background:linear-gradient(90deg, var(--amber), var(--orange));
  animation:fillRoast 2.2s var(--ease) 0.3s forwards;
}
@keyframes fillRoast{ to{ width:80%; } }
.roast-gauge-label{
  display:block; margin-top:10px;
  font-size:0.74rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--amber);
}

.construction-actions{
  display:flex; gap:16px; flex-wrap:wrap; justify-content:center;
  margin-bottom:24px;
}

.construction-phone{
  color:rgba(239,236,229,0.6);
  font-size:0.92rem;
}

/* steam decoration, reused pattern from hero */
.construction-steam{
  position:absolute; left:50%; top:14%; z-index:1;
  width:80px; height:180px; pointer-events:none;
  transform:translateX(-50%);
}
.construction-steam span{
  position:absolute; bottom:0; left:50%;
  width:10px; height:10px; border-radius:50%;
  background:rgba(239,236,229,0.45);
  filter:blur(6px);
  animation:constructionRise 4.5s ease-in infinite;
}
.construction-steam span:nth-child(2){ left:30%; animation-delay:1.3s; }
.construction-steam span:nth-child(3){ left:70%; animation-delay:2.6s; }
@keyframes constructionRise{
  0%{ transform:translate(-50%,0) scale(0.6); opacity:0; }
  20%{ opacity:0.6; }
  100%{ transform:translate(-50%,-160px) scale(1.6); opacity:0; }
}

.construction-footer{
  position:absolute; bottom:0; left:0; right:0; z-index:2;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:22px 28px;
  font-size:0.78rem;
  color:rgba(239,236,229,0.45);
}
.construction-footer a{
  color:rgba(239,236,229,0.7);
  text-decoration:underline;
  text-decoration-color:rgba(239,236,229,0.3);
  transition:color .3s;
}
.construction-footer a:hover{ color:var(--orange); text-decoration-color:var(--orange); }

@media(max-width:640px){
  .construction-footer{ flex-direction:column; text-align:center; padding:18px 20px; }
  .construction-logo{ height:52px; }
}