@font-face {
  font-family: 'Trajan Pro';
  src: url('../fonts/TrajanPro-Regular (1).ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Boheme Floral';
  src: url('../fonts/Boheme Floral.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bergamotte';
  src: url('../fonts/Bergamotte-cd799d53.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #F7F3ED; }

/* Sublinhado da seção ativa no menu desktop (ver script no fim do index.html) */
.nav-link.nav-active { text-decoration: underline !important; }

/* Estampa de fundo em camada própria (::before) pra poder baixar a opacidade
   sem desbotar o conteúdo da página (que fica por cima, no fluxo normal). */
.page-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('../images/estampa-nova.png');
  background-size: 380px auto;
  background-repeat: repeat;
  background-attachment: fixed;
  opacity: 0.35;
}

/* Diagramação de texto: evita "palavra órfã" sozinha na última linha de
   parágrafos (text-wrap: pretty) e equilibra o comprimento das linhas em
   títulos e frases curtas (text-wrap: balance), pra leitura fluir melhor
   tanto no desktop quanto no mobile. Degrada bem em navegadores sem suporte
   (ex: Safari mais antigo) — só volta a quebrar normalmente. */
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
.hero-location, .hero-date { text-wrap: balance; }
a { color: #556144; text-decoration: none; }
a:hover { color: #556144; }
nav a { font-weight: 600 !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.nav-link { text-underline-offset: 4px; }
.nav-link:hover { text-decoration: underline !important; }
::selection { background: #556144; color: #F7F3ED; }
.nav-hamburger { display: none !important; }
.nav-mobile-panel { display: none; }
@media (max-width: 760px) {
  .nav-desktop-links { display: none !important; }
  .nav-hamburger { display: flex !important; }
  .nav-mobile-panel { display: flex !important; }
  .nav-logo { display: none !important; }

  /* Nav no mobile: só o logo some, restando o botão-hambúrguer. Como ele é
     position:absolute + top:50% dentro de uma linha cujos outros filhos ficam
     display:none, a linha colapsava para altura 0 e o botão ficava colado
     (e até cortado) no topo. Damos altura própria à linha e mais respiro à nav. */
  .nav-row { min-height: 40px !important; }
  nav { padding: 16px 16px !important; }

  /* O blur/fundo ao rolar agora fica só no chip quadrado atrás do botão
     hambúrguer (aplicado nele mesmo no HTML), não na barra inteira. */
  nav { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; }

  /* O nav mobile ficou bem mais baixo que o desktop (sem o logo de 68px); o
     padding-top do hero (140px, calibrado pro nav do desktop) sobrava e
     afastava demais o conteúdo da primeira dobra. Ajustado proporcionalmente
     à nova altura da nav mobile (~72px). */
  #home { padding-top: 110px !important; min-height: 90vh !important; }

  /* Títulos (hero e headings de seção) mantêm o MESMO tamanho de fonte do
     desktop no mobile — não são reduzidos. O texto simplesmente quebra em
     mais linhas quando não cabe na largura da tela, em vez de encolher.
     Monograma, divisor, data e localização também ficam nos tamanhos
     originais, preservando a proporção exata do desktop entre os elementos
     do hero. */

  .hero-inner { padding: 40px 12px !important; }

  /* "CARMEL TAÍBA RESORT · SÃO GONÇALO DO AMARANTE — CE" quebrava sozinho em
     3 linhas desalinhadas ("RESORT ·" / "SÃO GONÇALO DO" / "AMARANTE — CE").
     Forçamos uma quebra controlada em 2 linhas (local / cidade). A segunda
     parte ("SÃO GONÇALO DO AMARANTE — CE") ainda não cabia inteira numa
     linha só mesmo com a quebra — reduzimos um pouco o letter-spacing e a
     fonte (só desse texto de apoio, não do título) para caber em 1 linha. */
  .hero-location { font-size: 13.5px !important; letter-spacing: 0.8px !important; }
  .loc-city { display: block; margin-top: 4px; }

  .carta-inner {
    padding: 24px 24px !important;
  }

  .programacao-grid { gap: 20px !important; }
  /* Padding lateral maior que o resto do mobile — a moldura decorativa desse
     card tem a borda desenhada mais para dentro da imagem, então com pouco
     padding o texto/ícones ficavam colados na linha da moldura. */
  .programacao-card { padding: 60px 44px 52px !important; }

  /* Contador mantém exatamente o mesmo tamanho (padding, fonte) do desktop —
     não encolhe no mobile. Como os 4 blocos juntos nesse tamanho passam da
     largura da tela, viram uma faixa com scroll horizontal em vez de
     estourar a página ou de serem reduzidos. */
  .countdown-row { margin-top: 32px !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; }
  .countdown-box { flex-shrink: 0 !important; }

  .dicas-icon { height: 52px !important; width: 52px !important; }
  .dicas-icon img, .dicas-icon > div { height: 52px !important; width: 52px !important; }

  /* Moldura em 3 partes (top/miolo/bottom): padding calibrado para o conteúdo
     não encostar na borda decorativa, como nos cards de programação. */
  .dicas-card-inner { padding: 80px 44px 96px !important; }

  /* No mobile o texto fica mais difícil de ler sobre a foto (tela mais
     estreita, menos "céu limpo" por trás) — usamos uma área um pouco maior
     e um degradê branco mais forte que no desktop, sem esconder de vez a
     paisagem. */
  .comochegar-section {
    min-height: 900px !important;
    background-image: linear-gradient(to bottom, rgba(247,243,237,0.88) 0%, rgba(247,243,237,0.7) 25%, rgba(247,243,237,0.4) 50%, rgba(247,243,237,0.18) 75%, rgba(247,243,237,0.06) 100%), url('../images/IMG_7637.jpg') !important;
  }
}

/* O hero agora ocupa a tela inteira no desktop (min-height:100vh), então o
   bloco de conteúdo (monograma+nome+data+local) fica pequeno demais dentro
   de tanto espaço. Escalamos o bloco inteiro (transform, não font-size) pra
   ele ficar maior mantendo exatamente a mesma proporção entre os elementos —
   é literalmente a mesma composição, só ampliada. Só desktop; mobile já foi
   calibrado à parte e não deve mudar. */
@media (min-width: 761px) {
  .hero-inner { transform: scale(1.18); }
}

/* Inputs do formulário: anel de foco laranja (cor do botão) em vez do azul padrão do navegador */
.form-input:focus {
  outline: none !important;
  border-color: #556144 !important;
  box-shadow: 0 0 0 3px rgba(111,122,87,0.25) !important;
}

/* Botões preenchidos: hover com tom mais escuro que o fundo original */
/* !important necessário para vencer o background definido inline em cada botão */
.btn-cta-dark { border: 1px solid #556144; }
.btn-cta-dark:hover { background: #556144 !important; color: #F7F3ED !important; }
/* ENVIAR: hover num tom médio (nem o verde claro do fundo, nem o verde escuro do texto) */
.btn-submit { border: 1px solid #8A9575; }
.btn-submit:hover { background: #C9D3B9 !important; color: #556144 !important; }

/* Feedback de toque: os botões precisam responder ao clique/toque, não só ao hover */
.btn-cta-dark:active, .btn-submit:active { transform: scale(0.97); }

/* Dicas: link sutil "Ver hotel" — sem preenchimento, só sublinhado + a seta desliza no hover */
.dicas-link { text-decoration:none; display:inline-flex; align-items:center; gap:2px; transition: color 160ms ease-out; }
.dicas-link:hover { text-decoration:underline; text-underline-offset:3px; }
@media (hover: hover) and (pointer: fine) {
  .dicas-link span { display:inline-block; transition: transform 160ms ease-out; }
  .dicas-link:hover span { transform: translate(2px, -2px); }
}