/* =========================================================================
   JARDIM ENCANTADO PRESERVADOS — cta.css  (dono: A9)
   Seção final #orcamento (showcase de produto + formulário de orçamento +
   Instagram) e rodapé do site. Prefixo exclusivo: .cta- / .rodape via
   .cta-rodape. Mobile-first. Não redefine .secao / .glass / .btn globais.
   Só transform/opacity são animados (guia de qualidade §3/§7).
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. Seção — moldura geral
   ------------------------------------------------------------------------- */
.secao--cta {
  overflow: visible;
}

.cta-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 8vw, 3.5rem);
  max-width: 1280px;
  margin-inline: auto;
  align-items: center;
}

/* -------------------------------------------------------------------------
   1. SHOWCASE DO PRODUTO — placa + recorte + vidro + sombra + brilho
   ------------------------------------------------------------------------- */
.cta-showcase {
  position: relative;
  width: 100%;
}

.cta-showcase__moldura {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  /* referência de enquadramento próxima de 4:5, sem cortar a placa 16:9 */
  aspect-ratio: 4 / 5;
  will-change: transform;
}

/* Brilho verde cinematográfico atrás do recorte */
.cta-showcase__glow {
  position: absolute;
  inset: -12% -18%;
  z-index: 1;
  background: radial-gradient(closest-side, var(--je-glow), transparent 72%);
  filter: blur(6px);
  opacity: .8;
  pointer-events: none;
}

/* Placa de fundo (16:9) — preenche a moldura, levemente escurecida nas bordas */
.cta-showcase__placa {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  border-radius: var(--je-radius);
  box-shadow: 0 30px 70px -30px rgba(5, 15, 10, .85);
}

/* Sombra elíptica realista sob o produto */
.cta-showcase__sombra {
  position: absolute;
  left: 50%;
  bottom: 6%;
  z-index: 3;
  width: 62%;
  height: 9%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(5, 15, 10, .55), transparent 75%);
  filter: blur(3px);
  pointer-events: none;
}

/* Recorte transparente do painel — grande, vazando a moldura, flutuação idle */
.cta-showcase__cutout {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 4;
  width: 84%;
  height: auto;
  max-height: 108%;
  transform: translateX(-50%);
  object-fit: contain;
  filter: drop-shadow(0 26px 30px rgba(5, 15, 10, .55));
  animation: cta-flutuar 6s ease-in-out infinite;
}

@keyframes cta-flutuar {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-6px); }
}

/* Painel de vidro sobreposto parcialmente ao showcase */
.cta-showcase__painel {
  position: absolute;
  left: clamp(-.5rem, -4%, 0rem);
  bottom: clamp(-1.25rem, -6%, -.5rem);
  z-index: 5;
  max-width: 78%;
  padding: 1.1rem 1.35rem;
  border-radius: var(--je-radius-sm);
}
.cta-showcase__rotulo { margin-bottom: .4rem; }
.cta-showcase__legenda {
  font-size: .92rem;
  color: var(--je-white);
  line-height: 1.4;
}

/* -------------------------------------------------------------------------
   2. CONTEÚDO — rótulo, título, texto
   ------------------------------------------------------------------------- */
.cta-conteudo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  max-width: 46rem;
}

.cta-titulo {
  font-size: clamp(2.25rem, 5.4vw, 4.25rem);
  max-width: 14ch;
}

.cta-texto {
  color: var(--je-white-60);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.65;
  max-width: 52ch;
}

/* -------------------------------------------------------------------------
   3. FORMULÁRIO DE ORÇAMENTO
   ------------------------------------------------------------------------- */
.cta-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: .5rem;
}

.cta-form__campo {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.cta-form__rotulo {
  font-family: var(--je-font-ui);
  font-weight: 600;
  font-size: .85rem;
  color: var(--je-white);
}

.cta-form__opcional {
  font-weight: 400;
  color: var(--je-white-60);
}

.cta-form__input {
  min-height: 44px;
  padding: .7rem .9rem;
  background: rgba(5, 15, 10, .32);
  border: 1px solid var(--je-glass-border);
  border-radius: var(--je-radius-sm);
  color: var(--je-white);
  font-family: var(--je-font-ui);
  font-size: .98rem;
  transition:
    border-color .35s var(--je-ease),
    box-shadow .35s var(--je-ease);
}
.cta-form__input::placeholder { color: var(--je-white-60); }
.cta-form__input:hover { border-color: rgba(244, 247, 244, .26); }
.cta-form__input:focus-visible {
  outline: 2px solid var(--je-accent);
  outline-offset: 2px;
  border-color: var(--je-accent);
}

.cta-form__select {
  cursor: pointer;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--je-white-60) 50%),
    linear-gradient(135deg, var(--je-white-60) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) center,
    calc(100% - 15px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}

.cta-form__textarea {
  min-height: 88px;
  resize: vertical;
  line-height: 1.5;
}

.cta-form__ajuda {
  font-size: .8rem;
  color: var(--je-white-60);
}

.cta-form__erro {
  font-size: .8rem;
  color: #ffb4a8;
  min-height: 0;
}
.cta-form__erro:empty { display: none; }

/* Estado inválido do campo — evidência visual além do texto de erro */
.cta-form__campo.is-invalido .cta-form__input {
  border-color: #ffb4a8;
}

.cta-form__botao {
  align-self: flex-start;
  min-height: 48px;
  margin-top: .3rem;
  touch-action: manipulation;
}
.cta-form__botao[aria-busy="true"] {
  opacity: .82;
  cursor: progress;
}

.cta-form__fallback {
  font-size: .88rem;
  color: var(--je-white-60);
}
.cta-form__fallback-link {
  color: var(--je-accent);
  text-underline-offset: .2em;
  text-decoration: underline;
  text-decoration-color: rgba(98, 217, 155, .4);
  padding: .2rem 0;
  transition: color .3s var(--je-ease);
}
.cta-form__fallback-link:hover { color: #8ce8b8; }
.cta-form__fallback-link:focus-visible {
  outline: 2px solid var(--je-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* -------------------------------------------------------------------------
   4. INSTAGRAM
   ------------------------------------------------------------------------- */
.cta-instagram {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: .4rem .2rem;
  color: var(--je-white-60);
  transition:
    color .35s var(--je-ease),
    transform .35s var(--je-ease),
    filter .35s var(--je-ease);
}
.cta-instagram__icone {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.cta-instagram__texto {
  font-size: .92rem;
  letter-spacing: .01em;
}
.cta-instagram:hover,
.cta-instagram:focus-visible {
  color: var(--je-accent);
  transform: scale(1.03);
  filter: drop-shadow(0 0 14px rgba(98, 217, 155, .45));
}
.cta-instagram:focus-visible {
  outline: 2px solid var(--je-accent);
  outline-offset: 4px;
  border-radius: 6px;
}

/* -------------------------------------------------------------------------
   5. RODAPÉ
   ------------------------------------------------------------------------- */
.cta-rodape {
  position: relative;
  z-index: var(--z-conteudo);
  border-top: 1px solid var(--je-glass-border);
  padding: clamp(1.75rem, 4vw, 2.5rem) var(--je-pad-secao) clamp(2rem, 5vw, 3rem);
}

.cta-rodape__container {
  max-width: 1280px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}

/* Nome VAZADO PURO: o vídeo é recortado pelo formato das letras via máscara PNG
   (assets/images/nome-mask.png = "Jardim Encantado" branco sobre transparente).
   SEM fundo escuro, SEM caixa — só as letras com o vídeo rolando dentro; o resto
   fica transparente e mostra o rodapé. Funciona em todos os navegadores (iOS incl.).
   O aspecto do bloco = aspecto da máscara (9.75:1) para as letras não distorcerem. */
.cta-rodape__nome {
  flex: 1 1 100%;                 /* linha própria, acima dos contatos */
  position: relative;
  width: min(100%, 62rem);        /* largura do nome; encolhe no mobile */
  aspect-ratio: 3911 / 401;       /* mesmo aspecto da máscara */
  margin-bottom: clamp(.6rem, 2vw, 1.3rem);
}
.cta-rodape__nome .namemask-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  /* recorta o vídeo no formato do nome */
  -webkit-mask-image: url('../assets/images/nome-mask.png');
          mask-image: url('../assets/images/nome-mask.png');
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
  transform: translateZ(0);       /* camada de GPU → vídeo não congela */
  will-change: transform;
  backface-visibility: hidden;
}
/* nome acessível para leitores de tela (o visual vem da máscara) */
.cta-rodape__nome .namemask-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; margin: -1px; padding: 0; border: 0;
}

.cta-rodape__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}
.cta-rodape__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .85rem;
  color: var(--je-white-60);
  transition: color .3s var(--je-ease);
}
.cta-rodape__link:hover { color: var(--je-accent); }
.cta-rodape__link:focus-visible {
  outline: 2px solid var(--je-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.cta-rodape__copy {
  font-size: .8rem;
  color: var(--je-white-60);
}

/* Crédito do desenvolvedor — linha própria, discreto */
.cta-rodape__credito {
  flex: 1 1 100%;
  margin-top: clamp(.4rem, 1.5vw, .9rem);
  font-size: .72rem;
  letter-spacing: .04em;
  color: rgba(244, 247, 244, .4);
}
.cta-rodape__credito a {
  color: rgba(244, 247, 244, .62);
  border-bottom: 1px solid transparent;
  transition: color .3s var(--je-ease), border-color .3s var(--je-ease);
}
.cta-rodape__credito a:hover { color: var(--je-accent); border-bottom-color: var(--je-accent); }
.cta-rodape__credito a:focus-visible {
  outline: 2px solid var(--je-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* -------------------------------------------------------------------------
   6. BREAKPOINTS (mobile-first → desktop)
   ------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .cta-showcase__moldura { max-width: 480px; }
}

@media (min-width: 1024px) {
  .cta-container {
    grid-template-columns: minmax(360px, 44%) 1fr;
    gap: clamp(2.5rem, 6vw, 5.5rem);
  }
  .cta-showcase__moldura { max-width: 100%; }
  .cta-conteudo { align-items: flex-start; }

  /* rodapé mantém quebra: a marca grande fica na 1ª linha e os contatos abaixo */
  .cta-rodape__container { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .cta-form { padding: 1.25rem; }
  .cta-showcase__painel { max-width: 88%; padding: .9rem 1.1rem; }
}

/* -------------------------------------------------------------------------
   7. MOVIMENTO REDUZIDO
   (o bloco global de base.css já zera animation/transition-duration;
   aqui só desligamos explicitamente a flutuação idle por clareza)
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cta-showcase__cutout { animation: none; }
}