/* Cores do Bruno Barreiro: verde da marca, laranja do arco e fundo claro */
:root{
  --verde: #0B6B38;
  --verde-2: #0A5A2F;
  --verde-escuro: #0A3D26;
  --laranja: #F2A31B;
  --fundo: #F5FAF6;
  --branco: #FFFFFF;
  --tinta: #14261C;
  --fraca: #4C5F54;
  --filete: #D5E3D9;
  --erro: #B3261E;
  --ok: #1B7A45;
  --sans: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tit: "Poppins", system-ui, sans-serif;
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body{ margin: 0; background: var(--fundo); color: var(--tinta); font: 400 1.0625rem/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; }

/* abertura */
.hero{ position: relative; overflow: hidden; background: linear-gradient(180deg, #FFFFFF 0%, var(--fundo) 100%); padding: 0 max(20px, env(safe-area-inset-left, 0px)) 40px max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); padding-top: calc(28px + env(safe-area-inset-top, 0px)); }
.onda{ position: absolute; pointer-events: none; }
.onda-a{ left: -30%; top: -22%; width: 90%; aspect-ratio: 1.6; background: radial-gradient(closest-side, var(--verde) 0 62%, transparent 63%); border-radius: 50%; opacity: .96; }
.onda-b{ left: -34%; top: -12%; width: 70%; aspect-ratio: 1.4; border-radius: 50%; border: 6px solid var(--laranja); border-color: var(--laranja) transparent transparent transparent; transform: rotate(-24deg); opacity: .95; }
.miolo{ position: relative; max-width: 30rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; }
.logo{ width: min(66vw, 250px); margin-top: 46px; }
.foto{ width: min(76vw, 300px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #fff; margin-top: 18px; box-shadow: 0 14px 40px rgba(10,61,38,.22), 0 0 0 5px #fff; }
.foto img{ width: 100%; height: 100%; object-fit: cover; }
.selo{ margin: 26px 0 0; font: 700 .8rem var(--tit); letter-spacing: .18em; text-transform: uppercase; color: var(--verde); }
h1{ font: 800 clamp(1.9rem, 8vw, 2.7rem)/1.08 var(--tit); letter-spacing: -.02em; margin: 10px 0 0; color: var(--verde-escuro); text-wrap: balance; }
.intro{ margin: 14px 0 0; color: var(--fraca); font-size: 1.1rem; }
.temas{ list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 20px 0 0; padding: 0; }
.temas li{ background: #fff; border: 1px solid var(--filete); color: var(--verde-2); font: 600 .85rem var(--sans); padding: 6px 13px; border-radius: 999px; }

/* botões */
.btn{ display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 14px 30px; margin-top: 26px; border-radius: 999px; border: 0; background: var(--verde); color: #fff; font: 700 1.05rem var(--tit); text-decoration: none; cursor: pointer; box-shadow: 0 10px 24px rgba(11,107,56,.28); transition: transform .15s ease, background .15s ease; width: 100%; max-width: 22rem; }
.btn:hover{ background: var(--verde-2); transform: translateY(-1px); }
.btn:focus-visible{ outline: 3px solid var(--laranja); outline-offset: 3px; }
.btn:disabled{ opacity: .7; cursor: not-allowed; transform: none; }

/* formulário */
.bloco{ padding: 8px max(16px, env(safe-area-inset-left, 0px)) 46px; padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.form{ max-width: 32rem; margin: 0 auto; background: #fff; border: 1px solid var(--filete); border-radius: 22px; padding: 26px 22px 24px; box-shadow: 0 16px 40px rgba(10,61,38,.1); }
.form h2{ font: 700 1.5rem/1.2 var(--tit); color: var(--verde-escuro); margin: 0; }
.sub{ margin: 6px 0 20px; color: var(--fraca); }
.campo{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; min-width: 0; }
.dupla{ display: grid; grid-template-columns: 1fr; gap: 0; }
label{ font: 700 .92rem var(--sans); color: var(--tinta); }
.obr{ font-weight: 600; font-size: .75rem; color: var(--fraca); margin-left: 6px; }
input, select, textarea{ width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--filete); border-radius: 12px; background: #fff; color: var(--tinta); font: 400 16px/1.4 var(--sans); -webkit-appearance: none; appearance: none; }
select{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%230B6B38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
textarea{ resize: vertical; min-height: 110px; }
input::placeholder, textarea::placeholder{ color: #8A9990; }
input:focus-visible, select:focus-visible, textarea:focus-visible{ outline: 3px solid rgba(242,163,27,.55); border-color: var(--verde); }
input.invalido, select.invalido{ border-color: var(--erro); }
.zap{ display: flex; gap: 8px; }
.ddi{ width: 112px; flex-shrink: 0; }
.zap input{ flex: 1; min-width: 0; }
.btn-form{ width: 100%; max-width: none; margin-top: 6px; }
.aviso{ margin: 6px 0 12px; padding: 12px 14px; border-radius: 12px; font: 600 .95rem var(--sans); }
.aviso.erro{ background: #FCE9E7; color: var(--erro); }
.aviso.ok{ background: #E2F4E8; color: var(--ok); }
.aviso[hidden]{ display: none; }
.lgpd{ margin: 14px 0 0; font-size: .82rem; color: var(--fraca); text-align: center; }

/* rodapé */
footer{ background: var(--verde-escuro); color: #BFD6C8; text-align: center; padding: 30px max(20px, env(safe-area-inset-left, 0px)) calc(30px + env(safe-area-inset-bottom, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); font-size: .9rem; }
footer img{ width: 150px; margin: 0 auto 14px; background: #fff; border-radius: 14px; padding: 10px 14px; }
footer p{ margin: 0 auto; max-width: 26rem; }

@media (min-width: 640px){
  .dupla{ grid-template-columns: 1fr 1fr; gap: 14px; }
  .hero{ padding-bottom: 56px; }
  .onda-a{ left: -18%; top: -34%; width: 60%; }
  .onda-b{ left: -20%; top: -20%; width: 48%; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .btn{ transition: none; }
}