/* ==========================================================================
   Leve Run · Edição UltraCoffee
   Identidade: kit da proposta (verde petróleo, laranja energia, creme quente).
   Mobile-first: a maior parte dos convidados chega pelo QR Code, no celular.
   ========================================================================== */

:root {
  /* tokens do kit */
  --verde: #003F35;
  --laranja: #F45116;
  --creme: #F5F0E5;
  --carvao: #173D36;
  --oliva: #C9C8B8;
  --branco: #FFFFFF;

  /* derivados
     O laranja da marca sobre creme dá 3,06:1 — suficiente para elementos
     gráficos, insuficiente para texto pequeno. Por isso há duas variações:
     uma mais escura para texto sobre creme e uma mais clara para texto
     sobre o verde. Ambas passam em 4,5:1 (WCAG AA). */
  --laranja-escuro: #B4400F;
  --laranja-claro: #FF8552;
  --creme-2: #EDE5D3;
  --verde-fundo: #00332B;
  --texto-suave: #4F6A62;
  --texto-claro: rgba(245, 240, 229, .82);
  --erro: #B3261E;

  --display: Montserrat, Manrope, -apple-system, "Segoe UI", sans-serif;
  --corpo: Manrope, Inter, -apple-system, "Segoe UI", Roboto, sans-serif;

  --raio: 12px;
  --largura: 1080px;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--carvao);
  font-family: var(--corpo);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  color: var(--verde);
  line-height: 1.02;
  letter-spacing: -.025em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 8.5vw, 3.9rem); }
h2 { font-size: clamp(1.75rem, 6.2vw, 2.7rem); }
h3 { font-size: 1.1rem; letter-spacing: -.01em; }

p { margin: 0 0 1rem; }
a { color: inherit; }
img { max-width: 100%; display: block; }

.laranja { color: var(--laranja); }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--verde); color: #fff; padding: .75rem 1rem; z-index: 99; }
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; border-radius: 4px; }

/* ---------- estrutura ---------- */

.wrap { width: 100%; max-width: var(--largura); margin: 0 auto; padding-inline: 22px; }
.wrap--texto { max-width: 640px; }

.section { padding-block: clamp(3rem, 9vw, 5.5rem); position: relative; }
.section--creme-escuro { background: var(--creme-2); }
.section--verde { background: var(--verde); color: var(--texto-claro); }
.section--verde h2, .section--verde h3 { color: var(--creme); }
.section--verde strong { color: var(--creme); }

.chapeu {
  font-family: var(--display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--laranja-escuro);
  margin-bottom: .9rem;
}
.chapeu--claro { color: var(--laranja-claro); }

/* título com a pincelada laranja da proposta */
.com-pincel { display: inline-block; padding-bottom: .55rem; background: url("../img/brush-swash.png") no-repeat left bottom / auto 14px; }

/* ---------- trilho superior ---------- */

.trilho {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  background: var(--creme);
}
.trilho__risco { flex: 1; height: 1px; background: var(--oliva); }
.trilho__texto {
  font-family: var(--display);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--verde);
  white-space: nowrap;
}

/* ---------- hero ---------- */

.hero { position: relative; padding-block: clamp(1rem, 3vw, 2rem) clamp(2.5rem, 7vw, 4rem); overflow: hidden; }

.pincel { position: absolute; pointer-events: none; opacity: .95; }
.pincel--esq { left: -14px; top: 14%; width: 46px; }
.pincel--dir { right: -18px; top: 6%; width: 74px; }

.hero__marca { display: grid; justify-items: center; gap: 1.1rem; margin-bottom: 1.8rem; }
.hero__logo { width: min(74vw, 330px); height: auto; }

.palavras {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem 1rem;
  margin: 0;
  padding: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--verde);
  opacity: .72;
}

.lead { font-size: clamp(1.05rem, 3.6vw, 1.22rem); max-width: 34ch; }

/* fichas de data / local / horário */
.fichas { list-style: none; display: grid; gap: .9rem; margin: 1.8rem 0; padding: 0; }
.fichas li { border-left: 3px solid var(--laranja); padding-left: .9rem; }
.fichas strong { display: block; font-family: var(--display); font-weight: 700; font-size: 1.02rem; color: var(--verde); letter-spacing: -.01em; }
.fichas span { font-size: .92rem; color: var(--texto-suave); }
.fichas--centro { justify-items: center; text-align: left; margin-inline: auto; max-width: 420px; }
.fichas--centro li { width: min(100%, 260px); }

/* ---------- botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: .95rem 1.8rem;
  border: 0;
  border-radius: 100px;
  font-family: var(--display);
  font-weight: 700;
  /* 19px em negrito conta como "texto grande" na WCAG: o laranja da marca
     sobre branco (3,48:1) passa nesse tamanho sem precisar ser alterado. */
  font-size: 1.19rem;
  letter-spacing: -.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn:active { transform: translateY(0); }
.btn--laranja { background: var(--laranja); color: #fff; }
.btn--verde { background: var(--verde); color: var(--creme); }
.section--verde .btn--verde { background: var(--creme); color: var(--verde); }
.btn--bloco { width: 100%; }
.btn[disabled] { opacity: .6; pointer-events: none; }

.hero__nota { font-size: .86rem; color: var(--texto-suave); margin: .8rem 0 0; }

/* ---------- foto ---------- */

.foto { margin: 0; position: relative; }
.foto--encontro img { height: clamp(240px, 46vw, 420px); object-position: center 32%; }

/* vídeo do produto */
.video {
  margin: 1.6rem 0 1.8rem;
  border-radius: var(--raio);
  overflow: hidden;
  border: 1px solid rgba(245, 240, 229, .22);
  background: #00241E;
  line-height: 0;
}
.video video { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.foto img { width: 100%; height: clamp(260px, 52vw, 460px); object-fit: cover; object-position: center 26%; }
.foto figcaption {
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-size: .68rem;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* ---------- números ---------- */

.numeros { background: var(--creme); padding-block: clamp(2.2rem, 7vw, 3.4rem); }
.numeros__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.numeros__lista li { display: flex; align-items: center; gap: .5rem; border-left: 3px solid var(--laranja); padding-left: .7rem; }
.numeros__lista b { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 9.5vw, 3.6rem); line-height: .9; color: var(--verde); letter-spacing: -.04em; }
.numeros__lista span { font-size: .8rem; line-height: 1.25; color: var(--texto-suave); }
.numeros__fita {
  margin: 1.6rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--oliva);
  font-family: var(--display);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--verde);
  text-align: center;
}

/* ---------- destaque do produto ---------- */

.destaque {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  background: rgba(245, 240, 229, .1);
  border: 1px solid rgba(245, 240, 229, .25);
  border-radius: 100px;
  padding: .55rem 1.2rem;
  margin-block: .5rem 1.4rem;
  font-size: .95rem;
}
.destaque b { font-family: var(--display); font-weight: 800; font-size: 1.3rem; color: var(--laranja); }

/* ---------- grade da experiência ---------- */

.grade { list-style: none; margin: 2rem 0; padding: 0; display: grid; gap: 0; }
.grade li { display: flex; gap: 1rem; align-items: flex-start; padding: 1.2rem 0; border-top: 1px solid var(--oliva); }
.grade li:last-child { border-bottom: 1px solid var(--oliva); }
.grade svg { flex: 0 0 auto; width: 34px; height: 34px; fill: none; stroke: var(--laranja); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.grade p { margin: 0; padding-top: .25rem; }

/* ---------- linha do tempo ---------- */

.linha { list-style: none; margin: 2rem 0 0; padding: 0 0 0 1.7rem; border-left: 2px solid var(--oliva); display: grid; gap: 1.9rem; }
.linha li { position: relative; }
.linha li::before {
  content: "";
  position: absolute;
  left: calc(-1.7rem - 8px);
  top: .45rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--laranja);
  border: 3px solid var(--creme-2);
}
.linha__hora { display: inline-block; font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: var(--laranja-escuro); letter-spacing: -.01em; margin-bottom: .1rem; }
.linha h3 { margin-bottom: .2rem; }
.linha p { color: var(--texto-suave); margin: 0; }

/* ---------- informações práticas ---------- */

.praticas { display: grid; gap: 0; margin-top: 1.6rem; }
.praticas > div { padding: 1.3rem 0; border-top: 1px solid var(--oliva); }
.praticas > div:last-child { border-bottom: 1px solid var(--oliva); }
.praticas h3 { color: var(--verde); margin-bottom: .3rem; }
.praticas p { margin: 0; color: var(--texto-suave); }

/* ---------- formulário ---------- */

.form {
  margin-top: 2rem;
  display: grid;
  gap: 1.25rem;
  background: var(--branco);
  border: 1px solid var(--oliva);
  border-radius: var(--raio);
  padding: clamp(1.2rem, 5vw, 2rem);
}

.field { display: grid; gap: .35rem; margin: 0; padding: 0; border: 0; }
.field > label, .field > legend { font-family: var(--display); font-weight: 700; font-size: .92rem; color: var(--verde); padding: 0; }

.req { color: var(--laranja); }
.opt { font-family: var(--corpo); font-weight: 400; font-size: .78rem; color: var(--texto-suave); text-transform: lowercase; }

input[type="text"], input[type="tel"], input[type="email"], select {
  width: 100%;
  min-height: 52px;
  padding: .75rem .9rem;
  font-family: var(--corpo);
  font-size: 16px; /* evita o zoom automático do iOS */
  color: var(--carvao);
  background: var(--branco);
  border: 1.5px solid var(--oliva);
  border-radius: 10px;
  appearance: none;
}
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F6A62' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 20px;
  padding-right: 2.6rem;
}
input:focus, select:focus { border-color: var(--verde); }
input[aria-invalid="true"] { border-color: var(--erro); }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

.hint { font-size: .84rem; color: var(--texto-suave); margin: .1rem 0 0; }
.hint--centro { text-align: center; }

.erro { font-size: .85rem; color: var(--erro); font-weight: 600; margin: .1rem 0 0; }
.erro--geral { background: #FDECEA; border-radius: 10px; padding: .8rem 1rem; }

.choice { display: flex; gap: .65rem; align-items: flex-start; font-size: .95rem; line-height: 1.45; padding: .45rem 0; cursor: pointer; }
.choice input { width: 22px; height: 22px; margin: 0; flex: 0 0 auto; accent-color: var(--verde); }

/* bloco recolhível com os campos opcionais: encurta o formulário
   sem tirar nenhuma pergunta do ar */
.mais { border: 1.5px solid var(--oliva); border-radius: 10px; background: var(--creme); }
.mais summary {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .95rem 2.6rem .95rem 1rem;
  cursor: pointer;
  position: relative;
  list-style: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--verde);
  border-radius: 10px;
}
.mais summary::-webkit-details-marker { display: none; }
.mais summary small { font-family: var(--corpo); font-weight: 400; font-size: .82rem; color: var(--texto-suave); }
.mais summary::after {
  content: "";
  position: absolute;
  right: 1.1rem;
  top: 1.35rem;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid var(--laranja-escuro);
  border-bottom: 2.5px solid var(--laranja-escuro);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.mais[open] summary::after { transform: rotate(-135deg); top: 1.6rem; }
.mais summary:hover { background: var(--creme-2); }
.mais__campos { display: grid; gap: 1.25rem; padding: .2rem 1rem 1.2rem; }

.privacidade {
  font-size: .86rem;
  color: var(--texto-suave);
  background: var(--creme);
  border-radius: 10px;
  padding: .9rem 1rem;
  margin: .5rem 0 0;
}

/* Marcador do que ainda falta confirmar. Depois de publicar,
   nenhum ".ph" deve sobrar na página. */
.ph { background: #FFE08A; color: var(--carvao); border-bottom: 1px dashed rgba(23, 61, 54, .5); padding: 0 .2em; border-radius: 3px; }

/* ---------- confirmação ---------- */

.confirmacao { text-align: center; }
.confirmacao__logo { width: 160px; height: auto; margin: 0 auto 1.2rem; }
.confirmacao .lead { margin-inline: auto; }
.confirmacao__acoes { display: grid; gap: .7rem; margin: 1.8rem 0 1rem; }

/* ---------- dúvidas ---------- */

.duvidas { text-align: center; }
.duvidas__acoes { display: grid; gap: .7rem; margin: 1.4rem 0 .9rem; }
.duvidas__contato { font-size: .9rem; color: var(--texto-claro); margin: 0; }

/* ---------- rodapé ---------- */

.rodape { background: var(--creme); padding-top: clamp(2.5rem, 8vw, 3.5rem); text-align: center; }
.rodape__titulo { font-family: var(--display); font-weight: 700; font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 1.4rem; }
.parceiros {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0 0 1.6rem;
  border-bottom: 1px solid var(--oliva);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.6rem 2.2rem;
}
/* alturas ajustadas para equilibrar opticamente as três marcas */
.parceiros img { width: auto; }
.parceiros img[alt="Cozinha Leve"] { height: 32px; }
.parceiros img[alt="UltraCoffee"] { height: 19px; }
.parceiros__texto { font-family: var(--display); font-weight: 800; font-size: 1rem; color: var(--verde); letter-spacing: -.01em; }
.parceiros--secundario { margin-top: -.4rem; gap: 1rem; }
.parceiros--secundario img[alt="BYD"] { height: 20px; }
.rodape__nota { font-size: .82rem; color: var(--texto-suave); padding-bottom: 2rem; }
.rodape__assinatura {
  background: var(--verde);
  color: var(--creme);
  font-family: var(--display);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .02em;
  margin: 0;
  padding: 1.3rem 22px;
}

/* ---------- barra fixa de conversão ---------- */

#inscricao { scroll-margin-top: 10px; }

.barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 16px calc(.7rem + env(safe-area-inset-bottom));
  background: var(--creme);
  border-top: 1px solid var(--oliva);
  box-shadow: 0 -6px 24px rgba(0, 63, 53, .12);
  animation: sobe .22s ease-out;
}
.barra[hidden] { display: none; }
.barra__info { display: grid; line-height: 1.25; min-width: 0; }
.barra__info strong { font-family: var(--display); font-weight: 800; font-size: .98rem; color: var(--verde); }
.barra__info span { font-size: .78rem; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* mantém 19px: é o tamanho em que o laranja da marca passa no contraste */
.barra .btn { min-height: 48px; padding: .5rem 1.15rem; flex: 0 0 auto; }

@keyframes sobe { from { transform: translateY(100%); } to { transform: translateY(0); } }

body.com-barra { padding-bottom: 82px; }

/* ---------- telas maiores ---------- */

@media (min-width: 760px) {
  .fichas { grid-template-columns: repeat(3, 1fr); }
  .fichas--centro { grid-template-columns: 1fr 1fr; max-width: 560px; }
  .grade { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
  .grade li:nth-last-child(2) { border-bottom: 1px solid var(--oliva); }
  .praticas { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
  .praticas > div:nth-last-child(2) { border-bottom: 1px solid var(--oliva); }
  .confirmacao__acoes, .duvidas__acoes { grid-auto-flow: column; justify-content: center; }
  .numeros__lista { gap: 2rem; }
  .com-pincel { background-size: auto 18px; }
  .pincel--esq { width: 70px; top: 10%; }
  .pincel--dir { width: 120px; }
}

@media (min-width: 980px) {
  .hero { padding-block: 2rem 5rem; }
  .hero__marca { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2.5rem; }
  .hero__logo { width: 360px; }
  .palavras { flex-direction: column; align-items: flex-end; text-align: right; gap: .45rem; border-right: 1px solid var(--oliva); padding-right: 1.5rem; }
  .palavras--dir { align-items: flex-start; text-align: left; border-right: 0; border-left: 1px solid var(--oliva); padding: 0 0 0 1.5rem; }
  .hero h1, .hero .lead, .hero .fichas, .hero .btn { max-width: none; }
  .hero h1 { text-align: center; }
  .hero .lead { text-align: center; margin-inline: auto; max-width: 46ch; }
  .hero > .wrap { text-align: center; }
  .fichas { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .mais summary::after { transition: none; }
  .barra { animation: none; }
}