/* ===== Design tokens ===== */
:root{
  --bg:#f7f8fa;
  --card:#ffffff;
  --text:#1f2328;
  --muted:#596273;
  --line:#e8ecf1;
  --brand:#1f8a70;         /* verde profundo */
  --brand-2:#25d366;       /* whatsapp */
  --shadow:0 8px 24px rgba(0,0,0,.06);
  --radius:14px;
  --radius-lg:18px;
  --focus: 0 0 0 3px rgba(31,138,112,.25);
}

/* ===== Layout ===== */
body{background:var(--bg); color:var(--text);}
.container{max-width:1100px; padding:96px 20px 28px;}

/* ===== Animations ===== */
.reveal{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}
.fade-in{animation:fadeIn .5s ease both;}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}

/* ===== Cards & grid ===== */
.grid-auto{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px;}
.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px;}
.card.hoverable{transition:transform .2s ease, box-shadow .2s ease; will-change:transform;}
.card.hoverable:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.09);}
.card h2{margin:0 0 .25rem 0}
.card p{color:var(--muted); margin:0}

/* ===== Buttons ===== */
.btn{appearance:none; border:0; border-radius:999px; padding:.75rem 1.2rem; font-weight:600; cursor:pointer; background:#222; color:#fff; box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease;}
.btn:hover{transform:translateY(-1px)}
.btn:focus{outline:none; box-shadow:var(--focus)}
.btn-brand{background:var(--brand)}
.btn-whatsapp{background:var(--brand-2)}
.btn[aria-busy="true"]{position:relative; pointer-events:none; opacity:.85}
.btn[aria-busy="true"]::after{content:""; width:16px; height:16px; border:2px solid #fff; border-bottom-color:transparent; border-radius:50%; position:absolute; right:12px; top:50%; transform:translateY(-50%); animation:spin .8s linear infinite;}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}

/* ===== Forms (floating labels) ===== */
.form{background:var(--card); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:18px; display:grid; gap:12px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media(max-width:860px){.form-grid{grid-template-columns:1fr}}
.field{position:relative;}
.input, .select, .textarea{
  width:100%; border:1px solid var(--line); border-radius:12px; padding:14px 12px 12px;
  background:#fff; color:var(--text); font:inherit; transition:border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder, .textarea::placeholder{color:transparent;} /* necessário p/ label flutuante */

.label{
  position:absolute; left:12px; top:12px; color:var(--muted);
  background:#fff; padding:0 6px; pointer-events:none;
  transform-origin:left top; transition:transform .15s ease, color .15s ease, top .15s ease;
}

.select + .label{
  background: transparent;
  padding: 0 2px;
}

.input:not(:placeholder-shown) + .label,
.textarea:not(:placeholder-shown) + .label,
.select:focus + .label,
.field.has-value .label {
  transform: translateY(-14px) scale(.86);
  color: var(--brand);
  top: 0;
}

/* Label fixo para selects */
.field-select { margin-top: 4px; }
.label-top{
  display:block;
  font-weight:600;
  font-size:.95rem;
  color:var(--muted);
  margin: 2px 2px 6px 4px;
}

/* Mantém aparência do select igual ao input */
.select{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px 12px 12px;
  background:#fff;
  color:var(--text);
  font:inherit;
  transition:border-color .15s ease, box-shadow .15s ease;
  appearance: none; /* remove seta nativa (melhor visual); opcional */
  background-image: linear-gradient(45deg, transparent 50%, #999 50%),
                    linear-gradient(135deg, #999 50%, transparent 50%),
                    linear-gradient(to right, #ccc, #ccc);
  background-position: calc(100% - 18px) 17px, calc(100% - 13px) 17px, calc(100% - 40px) 50%;
  background-size: 5px 5px, 5px 5px, 1px 22px;
  background-repeat: no-repeat;
}
.select:focus{ outline:none; border-color:var(--brand); box-shadow:var(--focus); }

/* Desativa qualquer regra de label flutuante para selects (segurança) */
.select + .label, 
.field-select .label { display:none !important; }


.input:focus, .select:focus, .textarea:focus{outline:none; border-color:var(--brand); box-shadow:var(--focus)}
.input:not(:placeholder-shown)+.label,
.textarea:not(:placeholder-shown)+.label,
.select:focus + .label,
.input:focus + .label{transform:translateY(-14px) scale(.86); color:var(--brand); top:0;}

.help{font-size:.875rem; color:var(--muted)}
.error{color:#b42318; font-size:.9rem; margin-top:-4px}
.field[aria-invalid="true"] .input,
.field[aria-invalid="true"] .textarea,
.field[aria-invalid="true"] .select{border-color:#e66;}

/* messages */
.messages{list-style:none; margin:0 0 10px 0; padding:0}
.messages li{background:#e8fff7; border:1px solid #bdf1e3; color:#0d5b4c; padding:.6rem .8rem; border-radius:10px;}

/* headings blocks */
.bloco{
    background:var(--card); 
    border-radius:var(--radius-lg); 
    box-shadow:var(--shadow); 
    padding: 24px 18px;
    margin-bottom: 28px; 
    text-align:center}

.bloco p{color:var(--muted)}

.bloco h1{ margin: 0 0 .35rem 0; }
.bloco p{  margin: .25rem 0 0 0; }

/* cards: mais espaço entre eles e melhor grid */
.grid-auto{
  gap: 20px;                    /* aumenta um pouco o gap */
  margin-top: 4px;              /* evita que cole no título em telas menores */
}

/* telas pequenas: um pouco mais de respiro */
@media (max-width: 820px){
  .bloco{ margin-bottom: 32px; }
  .grid-auto{ gap: 16px; }
}