/* =============================================================
   3ª Feira de Touros Nelore da Laçada — landing page de captura
   Cores e fontes do Brand Kit v1.0 da Fazenda Laçada.
   Mobile first: o padrão é o celular, o @media amplia.
   ============================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  --verde-lacada:   #7C8A6E;
  --preto-editorial:#1F1F1C;
  --bege-papel:     #D9D1BB;
  --bege-claro:     #ECE5D6;
  --oliva-escuro:   #5C624E;
  --verde-profundo: #384034;
  --dourado:        #B49A63;

  /* fontes nativas, sem download: a página precisa abrir rápido no 4G */
  --serif: Georgia, Cambria, "Times New Roman", serif;
  --sans: "Century Gothic", "URW Gothic", Calibri, "Segoe UI", Arial, sans-serif;

  --margem: 1.25rem;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--verde-profundo);
  color: var(--bege-claro);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2 { font-family: var(--serif); font-weight: 700; line-height: 1.15; margin: 0; }
p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- 3. Página ---------- */
/* Uma tela, sem rolagem: a arte ocupa a altura que sobrar depois do bloco de
   texto e do botão. 100dvh (e não 100vh) porque no celular a barra do
   navegador entra e sai da conta — com vh o botão ficaria cortado. */
.pagina {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 1rem;
  padding: var(--margem);
  padding-bottom: max(var(--margem), env(safe-area-inset-bottom));
}

.arte { margin: 0; min-height: 0; display: flex; justify-content: center; }
/* contain, nunca cover: a arte é um cartaz, cortar tira informação */
.arte img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* ---------- 4. Painel de texto e CTA ---------- */
.painel { text-align: center; display: grid; gap: .3rem; }

.painel__titulo {
  font-size: 1.05rem;
  color: var(--bege-claro);
}
.painel__data { font-size: .95rem; font-weight: 700; color: var(--bege-claro); }
.painel__local { font-size: .85rem; color: rgba(236, 229, 214, .8); }
/* a fonte de fallback deixa o ponto medio colado a direita; o span acerta
   o espacamento dos dois lados */
.painel__local span { color: var(--dourado); margin: 0 .35rem; }
.painel__lote {
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dourado);
  margin-top: .15rem;
}

/* Bege Claro sobre Verde Profundo: 11:1. O CTA é o elemento mais claro da
   página inteira, para não competir com nada. */
.botao {
  margin-top: .9rem;
  width: 100%;
  border: 0;
  background: var(--bege-claro);
  color: var(--verde-profundo);
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 1.05rem 1.25rem;
  cursor: pointer;
  transition: background-color .2s ease;
}
.botao:hover { background: #FFFFFF; }
.botao:focus-visible { outline: 2px solid var(--dourado); outline-offset: 3px; }

/* ---------- 5. Modal ---------- */
/* visibility, e nao display:none: o formulario do HubSpot precisa de uma
   caixa com dimensoes reais para montar corretamente ao carregar a pagina. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(31, 31, 28, .72);
  color: var(--preto-editorial);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s;
}
.modal--aberto { visibility: visible; opacity: 1; pointer-events: auto; }

.modal__caixa {
  position: relative;
  width: min(100%, 480px);
  background: var(--bege-claro);
  border-top: 3px solid var(--dourado);
  padding: 1.75rem 1.25rem 1.5rem;
  /* o formulário do HubSpot pode ficar mais alto que a tela: a rolagem
     acontece aqui dentro, nunca na página atrás */
  max-height: 90dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal__titulo {
  font-size: 1.35rem;
  color: var(--verde-profundo);
  padding-right: 2rem;
}
.modal__apoio {
  font-size: .85rem;
  color: var(--oliva-escuro);
  margin: .35rem 0 1.25rem;
  padding-right: 2rem;
}

.modal__fechar {
  position: absolute;
  top: .55rem;
  right: .55rem;
  width: 40px;              /* alvo de toque confortável no celular */
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  cursor: pointer;
}
.modal__fechar svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--oliva-escuro);
  stroke-width: 1.75;
  stroke-linecap: round;
}
.modal__fechar:hover svg { stroke: var(--verde-profundo); }
.modal__fechar:focus-visible { outline: 2px solid var(--dourado); outline-offset: 2px; }

/* Reserva de espaço enquanto o HubSpot monta o iframe, para o modal não
   "pular" de altura ao abrir. */
.hs-form-frame { min-height: 320px; }
.hs-form-frame iframe { width: 100% !important; max-width: 100% !important; }
/* quando a alternativa aparece nao ha formulario para reservar espaco */
.modal__caixa--sem-form .hs-form-frame { min-height: 0; }

/* Acao discreta, no padrao do site: texto em Oliva Escuro com filete Dourado.
   Dourado no texto sobre Bege Claro daria 2,2:1 de contraste. */
.modal__alternativa { text-align: center; padding: .5rem 0 .25rem; }
.modal__alternativa p { font-size: .85rem; color: var(--oliva-escuro); margin-bottom: .85rem; }
.modal__link {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--oliva-escuro);
  text-decoration: none;
  border-bottom: 1px solid var(--dourado);
  padding-bottom: .2rem;
}
.modal__link:hover { opacity: .7; }
.modal__link:focus-visible { outline: 2px solid var(--dourado); outline-offset: 3px; }

/* =============================================================
   6. Telas maiores: arte à esquerda, texto e CTA à direita
   ============================================================= */
@media (min-width: 900px) {
  :root { --margem: 2.5rem; }

  .pagina {
    grid-template-rows: none;
    grid-template-columns: auto minmax(300px, 380px);
    align-items: center;
    justify-content: center;
    gap: 3.5rem;
  }

  .arte img { height: min(88dvh, 760px); }

  .painel { text-align: left; gap: .45rem; }
  .painel__titulo { font-size: 1.9rem; }
  .painel__data { font-size: 1.15rem; }
  .painel__local { font-size: .95rem; }
  .painel__lote { font-size: .82rem; margin-top: .5rem; }
  .botao { margin-top: 1.6rem; width: auto; justify-self: start; padding: 1.1rem 2rem; }
}

/* Telas baixas e deitadas: a arte 9:16 não cabe, então libera a rolagem em
   vez de espremer o cartaz a ponto de ficar ilegível. */
@media (max-height: 560px) and (max-width: 899px) {
  .pagina { min-height: 0; }
  .arte img { height: auto; max-height: 70dvh; }
}