/* Captura de uma tela, cartao claro a direita: foto da varanda com a horta a esquerda, manjericao e tomatinhos recortados flutuando na borda do cartao, campos com rotulo que sobe e botao de contorno que enche de baixo para cima. Cabe na altura da janela. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: clip; background: var(--cor-fundo); color: var(--cor-texto); font-family: var(--fonte-texto); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, p { margin: 0; }

/* Palco: a foto em tela cheia, os objetos flutuando e o cartao. */
.palco { --lado: max(24px, calc((100% - 1440px) / 2 + 96px)); --largura: 520px; position: relative; display: grid; overflow: hidden; }
.palco__foto { position: relative; height: 56vh; min-height: 330px; overflow: hidden; }
.palco__foto img { width: 100%; height: 100%; object-fit: cover; object-position: var(--foco-celular, center 20%); animation: assentar 3s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes assentar { from { transform: scale(1.08); } to { transform: none; } }
.palco__foto::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 40%; background: linear-gradient(to bottom, transparent, var(--cor-fundo)); }

/* Objetos recortados: entram, derivam devagar e seguem o cursor de leve. */
.objeto { position: absolute; z-index: 2; width: var(--tam, 120px); height: auto; pointer-events: none; filter: drop-shadow(0 18px 22px rgb(0 0 0 / 28%)); animation: surgir 0.9s var(--atraso, 0.6s) cubic-bezier(0.2, 0.7, 0.2, 1) both, deriva var(--ciclo, 7s) calc(var(--atraso, 0.6s) + 0.9s) ease-in-out infinite alternate; transition: translate 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes surgir { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }
@keyframes deriva { from { transform: translateY(-9px) rotate(var(--giro-a, -4deg)); } to { transform: translateY(9px) rotate(var(--giro-b, 4deg)); } }
.objeto--a { top: calc(56vh - 250px); left: 14px; --tam: 92px; }
.objeto--b { top: calc(56vh - 200px); right: 14px; --tam: 80px; --atraso: 0.8s; --ciclo: 8s; }

/* Cartao. */
.cartao { position: relative; z-index: 1; display: grid; justify-items: var(--alinhar, start); gap: 14px; width: min(100% - 24px, 560px); margin: -110px auto 40px; padding: 30px 24px 32px; border: 1px solid var(--cor-borda); border-radius: 20px; background: var(--cor-superficie); text-align: var(--texto-alinhar, left); box-shadow: 0 40px 80px -40px rgb(0 0 0 / 55%); animation: subir 0.9s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes subir { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.logo { width: auto; height: 60px; }
.quando { color: var(--cor-acento-2); font-family: var(--fonte-rotulo); font-size: 0.92rem; font-weight: 500; }
h1 { max-width: 16ch; margin-top: 2px; font-family: var(--fonte-titulo); font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: var(--peso-titulo, 800); line-height: 1.04; letter-spacing: var(--espaco-titulo, 0); text-wrap: balance; }
.apoio { max-width: 34em; color: var(--cor-texto-2); font-size: 1rem; }

/* Formulario. */
.formulario { display: grid; gap: 12px; width: 100%; margin-top: 6px; padding-top: 20px; border-top: 1px solid var(--cor-borda); text-align: left; }
.formulario .campo { position: relative; display: grid; gap: 6px; }
.formulario .campo > label { color: var(--cor-texto-2); font-family: var(--fonte-rotulo); font-size: 0.85rem; font-weight: 800; }
.campo__caixa { position: relative; }
.formulario .campo input:not([type="checkbox"]):not([type="radio"]) { width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid var(--cor-borda); border-radius: 10px; background: var(--cor-campo, var(--cor-superficie)); color: var(--cor-texto); font: inherit; font-size: 1rem; transition: border-color 0.2s ease, background-color 0.2s ease, outline-offset 0.2s ease; }
.formulario .campo input::placeholder { color: var(--cor-texto-3, var(--cor-texto-2)); }
.formulario .campo input:not([type="checkbox"]):not([type="radio"]):focus { border-color: var(--cor-acento); outline: 3px solid color-mix(in srgb, var(--cor-acento) 22%, transparent); outline-offset: 2px; }
.formulario .campo--erro input:not([type="checkbox"]):not([type="radio"]) { border-color: #e2554a; }
.formulario .campo--erro { animation: tremer 0.4s ease; }
@keyframes tremer { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.campo__erro { color: #d8483d; font-size: 0.82rem; }
.formulario .iti { display: block; width: 100%; }
.formulario .formulario__confianca { display: block; color: var(--cor-texto-3); font-size: 0.8rem; line-height: 1.55; text-align: var(--texto-alinhar, left); }

/* Botao base. */
.botao--enviar { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; margin-top: 4px; padding: 0 22px; overflow: hidden; border: 0; border-radius: 10px; background: var(--cor-acento); color: var(--cor-acento-texto); font-family: var(--fonte-rotulo); font-size: 1.05rem; font-weight: 800; cursor: pointer; transition: transform 0.2s ease, background-position 0.45s ease, box-shadow 0.2s ease, background-size 0.45s ease, color 0.3s ease; }
.botao--enviar:focus-visible { outline: 3px solid var(--cor-texto); outline-offset: 3px; }
.botao__seta { display: inline-grid; place-items: center; transition: transform 0.3s ease; }
.botao__seta svg { width: 20px; height: 20px; }

/* Desktop: cabe na altura da janela, sem barra de rolagem; o cartao desce do topo
   ate a base e se dissolve na foto; o rodape fica sobre a foto. */
@media (min-width: 980px) and (min-height: 640px) {
  html, body { height: 100%; }
  body { position: relative; overflow: hidden; }
  .palco { height: 100vh; height: 100dvh; align-items: stretch; }
  .palco__foto { position: absolute; inset: 0; height: auto; }
  .palco__foto img { object-position: var(--foco, center 22%); }
  .palco__foto::after { top: auto; height: 26%; background: linear-gradient(to bottom, transparent, rgb(0 0 0 / 45%)); }
  .cartao { align-content: start; gap: clamp(8px, 1.5vh, 14px); width: var(--largura); height: 100%; margin: 0; padding: clamp(24px, 4.6vh, 48px) 44px 0; border: 0; border-radius: 0; box-shadow: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, #000 86%, transparent 100%); animation-name: descer; }
  @keyframes descer { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
  .logo { height: clamp(46px, 7.4vh, 70px); }
  h1 { font-size: clamp(1.9rem, 5vh, 3.1rem); }
  .apoio { font-size: clamp(0.9rem, 1.85vh, 1rem); }
  .formulario { gap: clamp(7px, 1.25vh, 12px); margin-top: 0; padding-top: clamp(10px, 2vh, 20px); }
  .formulario .campo input:not([type="checkbox"]):not([type="radio"]) { min-height: clamp(42px, 5.4vh, 52px); }
  .botao--enviar { min-height: clamp(44px, 5.8vh, 56px); }
  body .rodape { position: absolute; bottom: 0; z-index: 3; width: calc(100% - var(--largura) - 2 * max(24px, calc((100% - 1440px) / 2 + 96px))); padding: 44px max(20px, 3vw) 18px; background: linear-gradient(to top, rgb(0 0 0 / 42%), transparent); color: rgb(255 255 255 / 88%); font-size: 0.8rem; text-shadow: 0 1px 2px rgb(0 0 0 / 60%), 0 0 14px rgb(0 0 0 / 55%); }
  .objeto--a, .objeto--b { top: auto; left: auto; right: auto; }
}
@media (min-width: 980px) and (max-height: 639px) {
  .palco { min-height: 100vh; }
  .palco__foto { position: absolute; inset: 0; height: auto; }
  .palco__foto::after { display: none; }
  .cartao { width: var(--largura); margin: 32px 0; padding: 32px 44px; }
  .objeto { display: none; }
}

/* Rodape. */
.rodape { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; padding: 22px max(20px, 5vw) 30px; color: var(--cor-texto-3); font-size: 0.85rem; }
.rodape nav { display: flex; gap: 24px; }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--cor-acento); }
@media (max-width: 700px) { .rodape { justify-content: center; text-align: center; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition: none !important; }
}

@media (min-width: 980px) {
  .cartao { margin-left: auto; margin-right: var(--lado); }
  .rodape { left: 0; }
  .objeto--a { top: 30%; right: calc(var(--lado) + var(--largura) - 18px); --tam: clamp(118px, 10vw, 160px); }
  .objeto--b { bottom: 12%; right: calc(var(--lado) + var(--largura) - 14px); --tam: clamp(104px, 9vw, 140px); }
}

/* Campos com o rotulo dentro, que sobe quando o campo tem foco ou valor. */
.formulario .campo.campo--flutuante { display: block; }
.formulario .campo.campo--flutuante input:not([type="checkbox"]):not([type="radio"]) { padding: 20px 16px 6px; }
.formulario .campo--flutuante > label { position: absolute; top: 50%; left: 17px; color: var(--cor-texto-3, var(--cor-texto-2)); font-family: var(--fonte-texto); font-size: 1rem; font-weight: 400; pointer-events: none; transform: translateY(-50%); transform-origin: left center; transition: transform 0.2s ease, color 0.2s ease; }
.formulario .campo--flutuante input:focus + label, .formulario .campo--flutuante input:not(:placeholder-shown) + label { color: var(--cor-acento-2); font-weight: 600; transform: translateY(-112%) scale(0.74); }

/* Botao de contorno que enche de baixo para cima no hover. */
.botao--enviar { border: 2px solid var(--cor-acento); background: linear-gradient(var(--cor-acento), var(--cor-acento)) no-repeat bottom / 100% 0%; color: var(--cor-acento-2); }
.botao--enviar:hover { background-size: 100% 100%; color: var(--cor-acento-texto); }
.botao--enviar:hover .botao__seta { transform: translateX(4px); }

/* Confirmacao que ocupa o lugar do formulario depois da inscricao. */
.formulario[hidden], .confirmacao[hidden] { display: none; }
.confirmacao { display: grid; gap: 12px; padding-top: 6px; }
.confirmacao:focus { outline: none; }
.confirmacao__marca { width: 44px; height: 44px; color: var(--cor-acento); }
.confirmacao__titulo { margin: 0; color: var(--cor-texto); font-family: var(--fonte-titulo); font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.confirmacao p { margin: 0; line-height: 1.5; }
.confirmacao p:not(.confirmacao__titulo) { color: var(--cor-texto-2); }
.confirmacao strong { color: var(--cor-texto); white-space: nowrap; }
.confirmacao__corrigir { justify-self: start; padding: 0; border: 0; background: none; color: var(--cor-acento-2); font: inherit; font-size: 0.9rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }