/* =========================================================
   Component — Modal de contato (formulário)
   <dialog> centralizado, por cima do conteúdo, com backdrop.
   ========================================================= */

.modal {
  width: min(430px, 92vw);
  margin: auto;                 /* centraliza o dialog modal (inset:0 + margin:auto) */
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: #F4F8E8;
  color: var(--color-ink);
  box-shadow: var(--shadow-lg);
  max-height: 92svh;            /* nunca ultrapassa a viewport (ex.: celular deitado) */
  overflow: hidden;            /* o scroll fica no inner, mantendo o radius */
}

.modal::backdrop {
  background: rgba(30, 30, 30, 0.75);   /* #1E1E1E a 75% */
}

/* --- Fade in/out --- */
.modal[open] { animation: modal-in var(--dur-base) var(--ease-out); }
.modal[open]::backdrop { animation: modal-fade var(--dur-base) var(--ease-out); }
.modal.is-closing { animation: modal-out var(--dur-base) var(--ease-std) forwards; }
.modal.is-closing::backdrop { animation: modal-fade-out var(--dur-base) var(--ease-std) forwards; }

@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes modal-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(8px) scale(0.98); }
}
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-fade-out { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .modal[open], .modal[open]::backdrop,
  .modal.is-closing, .modal.is-closing::backdrop { animation: none; }
}

/* --- Conteúdo --- */
.modal__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 28px 32px;       /* topo 28 / laterais 28 / base 32 */
  max-height: 92svh;
  overflow-y: auto;              /* rola só o conteúdo se a tela for muito baixa */
}

.modal__close {
  align-self: flex-end;          /* canto superior direito, no fluxo */
  flex: none;                    /* não encolhe na vertical quando o inner rola */
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  color: var(--color-ink);
  border: 0.8px solid #000000;   /* stroke da div do X */
  background: transparent;
  opacity: 0.6;
  transition: opacity var(--dur-base) var(--ease-std);
}
.modal__close:hover { opacity: 1; }

.modal__logo {
  width: 142px;
  height: 52px;
  flex: none;                    /* mantém a proporção quando o inner rola */
  align-self: center;
  margin-block-start: 16px;      /* botão de fechar → logo */
  margin-block-end: 40px;        /* logo → título */
}

.modal__title {
  font-size: 22px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;        /* 1% */
  line-height: 1.25;
  color: #13120B;
  text-align: center;
  margin-block-end: var(--space-3);
}

.modal__subtitle {
  font-size: 14px;
  line-height: 1.5;
  color: #5E6073;
  text-align: center;
  align-self: center;            /* centraliza o bloco de 282px */
  max-width: 282px;
  margin-block-end: 40px;        /* subtítulo → formulário */
}

/* --- Formulário --- */
.modal__form {
  display: flex;
  flex-direction: column;
}

/* grupo de campos — 8px entre eles */
.modal__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);            /* 8px entre os inputs */
}

.modal__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);            /* 8px entre os dois inputs lado a lado */
}

/* Consentimento (LGPD) — OCULTO visualmente, mas ainda no DOM e funcional.
   O input continua marcado (checked) e é enviado ao CRM normalmente
   ($form.serialize() inclui campos display:none; o handler troca p/ "1").
   O consentimento é comunicado ao usuário pelo aviso legal abaixo do botão. */
.modal__consent {
  display: none;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 11px;
  line-height: 1.4;
  color: #5E6073;
  cursor: pointer;
}
.modal__consent input {
  flex: none;
  margin-block-start: 1px;
  accent-color: var(--color-sage-ink);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.field__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: #1C1C1C;
}
.field__input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-ink);
  background: var(--color-white);   /* branco puro */
  border: none;
  border-block-end: 1px solid #CCCCCC;
  border-radius: 0;
  transition: border-color var(--dur-base) var(--ease-std);
}
.field__input::placeholder { color: #9A9A9A; }
.field__input:focus {
  outline: none;
  border-block-end-color: var(--color-sage-ink);
}

.modal__submit {
  width: 100%;
  min-height: 54px;
  margin-block-start: 32px;      /* 32px do último campo até o botão */
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.0004em;     /* -0.04% */
  text-transform: uppercase;
  color: var(--color-white);
  background: #455337;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-std);
}
.modal__submit:hover { background: #38462C; }

.modal__legal {
  font-size: 11px;
  line-height: 1.4;
  color: #5E6073;
  text-align: center;
  margin-block-start: var(--space-2);   /* 8px do botão até o texto legal */
}
.modal__legal a { color: inherit; text-decoration: underline; }

/* Mensagens de retorno do CRM (exibidas via JS de integração) */
.form_message-success,
.form_message-error {
  margin-block-start: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  border-radius: var(--radius-sm);
}
.form_message-success { color: #2E4A1E; background: #E4F0D0; }
.form_message-error   { color: #7A2A23; background: #F6DDD9; }

/* Mobile: mantém a largura original (92vw) e reduz só o padding lateral
   + a fonte da política, p/ tudo caber sem scroll, como na referência. */
@media (max-width: 480px) {
  .modal__inner { padding-inline: var(--space-4); }   /* 28 → 16px nas laterais */
  .modal__legal { font-size: 10px; }
}

@media (max-width: 420px) {
  .modal__row { grid-template-columns: 1fr; }
}