/* =========================
   TOKENS & BASE
   ========================= */
:root{
  --bg: #87ceeb;         /* céu */
  --primary: #0077a3;    /* azul principal */
  --primary-2:#00bfff;   /* ciano gradiente */
  --ink: #4a3f28;        /* marrom texto */
  --paper: #ffffff;      /* superfícies claras */
  --paper-2:#f0f8ff;     /* papel azulado */
  --accent:#25D366;      /* whatsapp */
  --danger:#ff4d4f;
  --ok:#28a745;

  --radius-xs:6px;
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:15px;
  --shadow-sm: 0 3px 8px rgba(0,0,0,.08);
  --shadow:    0 4px 12px rgba(0,0,0,.12);

  --container: 1000px;

  --step--1: 0.92rem;
  --step-0: 1rem;
  --step-1: 1.12rem;
  --step-2: 1.38rem;
  --step-3: 1.8rem;
  --step-4: 2.2rem;
}

/* Fonte global */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
html{scroll-behavior:smooth;text-size-adjust:100%}
*{box-sizing:border-box}
body{
  font-family:'Poppins',sans-serif;
  margin:0; padding:0;
  background: var(--bg);
  color: var(--ink);
  line-height:1.6;
}

/* Utilitários leves */
.container{max-width:var(--container); margin:0 auto; padding:0 20px}
.center{text-align:center}
.stack>*+*{margin-top:12px}
.media-row{
  display:flex; gap:20px; flex-wrap:wrap; justify-content:center; align-items:center;
  margin:20px 0; text-align:center;
}

/* =========================
   HEADER  (COMPACTO)
   ========================= */
.header-topo{
  display:flex; align-items:center; justify-content:space-between;
  background: var(--primary);
  color:#fff;
  padding: 10px 18px;
  border-bottom-left-radius:12px;
  border-bottom-right-radius:12px;
  box-shadow: var(--shadow);
}
.header-titulo{ text-align:center; flex:1; padding:0 10px}
.header-titulo h1{
  margin:0;
  font-size: 1.9rem;
  font-weight:700;
  line-height:1.15;
}
.header-titulo p{
  margin:4px 0 0;
  font-size: 0.95rem;
  font-weight:500;
}
.logo-header{ width:auto; display:block}
.logo-uniao{ max-height:56px }
.logo-obra{
  max-height:72px;
  border:2px solid var(--primary-2);
  border-radius: var(--radius-xs); padding:2px; background:#fff;
}

/* =========================
   MAIN
   ========================= */
main{ padding:24px 0; display:flex; flex-direction:column; align-items:center}
.etapa{ width:100%; max-width:950px; display:flex; flex-direction:column; align-items:center; margin-bottom:36px}
.frase-destaque{
  font-size:1.6em; font-weight:600; color:var(--primary);
  margin:20px 0; text-align:center; padding:18px 26px;
  border-radius: var(--radius-lg);
  border:3px solid var(--primary);
  background:#e0f7ff; box-shadow: var(--shadow);
}

/* =========================
   PRÊMIOS
   ========================= */
.premios-container{
  display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:18px; width:100%; text-align:center;
}
.premios-container p{
  font-size:1.1em; font-weight:600; color:var(--primary);
}
.premios-img{
  max-width:460px; height:auto; border-radius: var(--radius); margin-top:8px; display:block;
}

/* =========================
   FORM + BLOCO CAMPANHA
   ========================= */
.form-campanha-container{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start;
  margin-top:28px; width:100%; gap:28px;
  margin-bottom:32px;
}

/* Formulário */
form{
  display:flex; flex-direction:column; gap:8px;
  flex:1 1 460px; max-width:520px;
  background: var(--paper-2);
  padding:14px; border-radius: var(--radius);
  border:3px solid var(--primary);
  box-shadow: var(--shadow-sm);
}
.form-titulo{
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px;
}
form h3{
  margin:0; text-align:center; color:var(--primary);
  font-weight:700; font-size:1.18em;
}
.logo-form-esq,.logo-form-dir{ max-height:40px }

label{ font-weight:600; font-size:0.95em; color:#214b5a }
input[type="text"], input[type="tel"], input[type="number"]{
  width:100%; padding:12px 12px;
  border-radius: var(--radius-sm);
  border:1.5px solid rgba(0,0,0,.12);
  background:#fff; color:var(--ink);
}
input::placeholder{ color:rgba(0,0,0,.45) }
button[type="submit"]{
  margin-top:8px;
  display:inline-flex; justify-content:center; align-items:center;
  padding:10px 12px; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  color:#fff; font-weight:700; border:none; cursor:pointer;
}

/* Bloco “Campanha Principal” */
.campanha-principal{
  flex:1 1 300px; max-width:325px;
  background:#d0ebff; border:3px solid var(--primary);
  border-radius: var(--radius); padding:25px; text-align:center;
  box-shadow: var(--shadow-sm);
}
.titulo-campanha-bloco{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:16px}
.logo-campanha-grande{ height:50px; width:auto }
.titulo-campanha-bloco h2{
  margin:0; font-size:1.7em; font-weight:700;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

/* Botões gerais */
.btn-oficial, .btn-whats{
  display:inline-block; width:100%; margin-top:10px; padding:10px 8px;
  color:#fff; border:none; border-radius: var(--radius-sm);
  font-weight:700; font-size:1em; text-align:center; text-decoration:none;
}
.btn-oficial{ background: linear-gradient(90deg, var(--primary), var(--primary-2)) }
.btn-whats{ background: var(--accent) }

/* =========================
   ETAPA 2 (PIX)
   ========================= */
#etapa2{ display:none; flex-direction:column; align-items:center; text-align:center; gap:14px }
#etapa2.show{ display:flex }
.btn-copiar{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius: var(--radius-sm);
  border:1px solid rgba(0,0,0,.12); background:#fff; color:var(--ink); cursor:pointer;
}

/* =========================
   MENSAGENS (aparecem só quando tem texto)
   ========================= */
.error-msg, .success-msg{ display:none; font-size:.85em; margin-top:6px }
.error-msg{ color:var(--danger) }
.success-msg{ color:var(--ok) }
.error-msg:not(:empty), .success-msg:not(:empty){ display:block }

/* =========================
   STEPper de Quantidade
   ========================= */
.qty{
  display:flex; align-items:center; gap:8px;
  background:#fff; border:1.5px solid rgba(0,0,0,.12);
  border-radius:var(--radius-sm); padding:6px; width:100%;
}
.qty-btn{
  flex:0 0 40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; border:1px solid rgba(0,0,0,.12);
  background: linear-gradient(180deg,#ffffff,#f3f6f9);
  cursor:pointer; user-select:none; font-weight:700; font-size:1.1rem; color:#0b3a4a;
  transition:filter .15s ease, transform .08s ease;
}
.qty-btn:active{ transform:translateY(1px) }
.qty-btn.is-disabled{
  opacity:.4; cursor:not-allowed; filter:saturate(.2);
}
.qty-input{
  flex:1 1 auto; height:40px; text-align:center; font-weight:700; font-size:1rem; color:var(--ink);
  border:none; outline:none; background:transparent; min-width:0;
}
/* esconde spinners nativos */
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.qty-input[type=number]{ -moz-appearance:textfield; }

/* ==== INTERAÇÃO SEGURA (evita CSS bloquear clique) ==== */
.qty{ position: relative; }
.qty-btn{
  position: relative;
  z-index: 1;
  pointer-events: auto;     /* garante clique */
  touch-action: manipulation; /* evita delay/zoom no mobile */
}

/* =========================
   SEÇÃO “SOBRE A OBRA”
   ========================= */
.sobre-obra-container{
  background: var(--paper);
  padding: 28px 36px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-width:950px; margin:28px auto;
  text-align:center;
}
.sobre-obra-container h2,
.sobre-obra-container h3{
  font-weight:700; margin:26px 0 18px;
  font-size:1.6em;
  background: linear-gradient(90deg, #62c4e7, #057e94);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.sobre-obra-container p{ margin:0 0 16px; color:var(--ink) }

.contato-obra{ font-weight:500; line-height:1.5; font-size:1em }
.obra-principal,.obra-secundaria{
  max-width:600px; height:auto; border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0,0,0,.1);
  margin:20px auto; display:block;
}

/* Bullets */
ul{ list-style:none; padding:0; margin:0 0 14px 0 }
ul li{
  display:flex; align-items:center; gap:6px; justify-content:center;
  font-weight:400; color:var(--ink); margin-bottom:8px;
}
ul li::before{
  content:"•"; font-size:1.2em;
  background: linear-gradient(135deg, #007bff, #00c6ff);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

/* Ícones sociais */
.icones-sociais{ margin-top:12px; display:flex; justify-content:center; gap:22px }
.icones-sociais a{
  font-size:2rem; color:var(--primary);
  transition: transform .2s ease, color .2s ease;
}
.icones-sociais a:hover{ color:var(--primary-2); transform:scale(1.08) }

/* =========================
   FOOTER
   ========================= */
footer{
  background: var(--primary); color:#fff; text-align:center;
  padding:20px 10px; font-size:.95em;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

/* =========================
   HOTFIX anti-overflow no mobile
   ========================= */
html, body { width: 100%; overflow-x: hidden; }
*, *::before, *::after { min-width: 0; }
img, svg, video { max-width: 100%; height: auto; }

.etapa,
.form-campanha-container,
.sobre-obra-container,
.campanha-principal,
form,
.premios-container { width: 100%; box-sizing: border-box; }

/* =========================
   RESPONSIVIDADE
   ========================= */

/* ≤ 1024px */
@media (max-width: 1024px){
  .container{ padding: 0 16px; }
  .header-titulo h1{ font-size: 1.8rem; }
  .titulo-campanha-bloco h2{ font-size: 1.6rem; }
  .premios-img{ max-width: 520px; width: 100%; }
  .obra-principal, .obra-secundaria{ max-width: 520px; }
}

/* ≤ 900px (empilha form + card) */
@media (max-width: 900px){
  .form-campanha-container{
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  form, .campanha-principal{ max-width: 100%; }
  form{ order: 1; }
  .campanha-principal{ order: 2; }
  .btn-oficial, .btn-whats, button[type="submit"]{ width: 100%; }

  .sobre-obra-container{ margin: 24px auto; padding: 22px 18px; }
}

/* ≤ 700px (celulares grandes) */
@media (max-width: 700px){
  body{ padding: 0 6px; }
  main{ padding: 18px 6px; }
  .etapa{ padding: 0 6px; }
  .frase-destaque{ margin: 14px 6px; }

  .header-topo{
    flex-direction: column;
    gap: 8px;
    text-align: center;
    padding: 10px 12px;
    margin: 0 6px;
    border-bottom-left-radius:12px;
    border-bottom-right-radius:12px;
  }

  form,
  .campanha-principal,
  .sobre-obra-container{
    margin-left:auto; margin-right:auto;
    padding-left:16px; padding-right:16px;
    border-width:2px;
    border-radius:12px;
  }

  .sobre-obra-container p{ margin: 0 0 18px; }

  .premios-img,
  .obra-principal,
  .obra-secundaria{
    width: 100%; max-width: 100%;
    margin: 14px auto;
  }

  .logo-uniao{ max-height: 52px; }
  .logo-obra{ max-height: 68px; }

  .frase-destaque{
    font-size: 1.25rem;
    padding: 14px 16px;
  }
  .titulo-campanha-bloco h2{ font-size: 1.45rem; }

  input[type="text"], input[type="tel"], input[type="number"]{
    padding: 14px 12px;
    font-size: 1rem;
    min-height: 48px;
  }
  label{ font-size: 0.95rem; }

  .error-msg, .success-msg{ line-height:1.3; margin-top:4px; }

  /* stepper: botões maiores no mobile */
  .qty{ padding:6px }
  .qty-btn{ flex-basis:44px; height:44px; font-size:1.2rem }
  .qty-input{ height:44px; font-size:1.05rem }
}

/* ≤ 420px (celulares compactos) */
@media (max-width: 420px){
  .header-titulo h1{ font-size: 1.5rem; }
  .header-titulo p{ font-size: .9rem; }

  .sobre-obra-container{ padding: 14px 12px; border-radius: 10px; }
  .sobre-obra-container h2,
  .sobre-obra-container h3{
    font-size: 1.25rem; margin: 18px 0 12px;
  }

  .campanha-principal{ padding: 16px 12px; border-radius: 10px; }
  form{ padding: 12px; border-radius: 10px; }
  footer{ border-top-left-radius: 10px; border-top-right-radius: 10px; }

  .form-campanha-container{ margin-bottom: 44px; }
}