/* ==========================================================================
   Vila Monã — estilos globais
   ========================================================================== */

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #F5F0E6; color: #2B2621; font-family: Jost, system-ui, sans-serif; font-weight: 300; text-wrap: pretty; overflow-x: hidden; }
* { box-sizing: border-box; }
a { color: #4FA69B; text-decoration: none; transition: color .3s ease; }
a:hover { color: #C1734B; }
img { display: block; }
button { font-family: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { -webkit-tap-highlight-color: transparent; }
::selection { background: #86C5BC; color: #2B2621; }
@keyframes vmFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes vmFloat { from { transform: translateY(0); } to { transform: translateY(8px); } }

/* Estados de hover (equivalentes ao atributo style-hover do design original) */
.btn-cream { background:#F5F0E6; color:#2B2621; transition:background .3s ease, color .3s ease; }
.btn-cream:hover { background:#4FA69B; color:#F5F0E6; }
.btn-ghost-light { border:1px solid rgba(245,240,230,.55); color:#F5F0E6; transition:background .3s ease, color .3s ease, border-color .3s ease; }
.btn-ghost-light:hover { background:#F5F0E6; color:#2B2621; border-color:#F5F0E6; }
.nav-cta { border:1px solid #4FA69B; background:#4FA69B; color:#F5F0E6; transition:background .3s ease, border-color .3s ease, color .3s ease; }
.nav-cta:hover { background:transparent; border-color:currentColor; color:#4FA69B; }
.feat { background:#F5F0E6; transition:background .4s ease; }
.feat:hover { background:#FBF8F1; }
.tour { transition:background .4s ease, border-color .4s ease; }
.tour:hover { background:#C1734B; border-color:#C1734B; }
.gal { transition:opacity .4s ease; }
.gal:hover { opacity:.86; }
.foot-airbnb { background:#4FA69B; color:#F5F0E6; transition:background .3s ease; }
.foot-airbnb:hover { background:#86C5BC; color:#2B2621; }
.foot-ghost { border:1px solid rgba(245,240,230,.4); color:#F5F0E6; transition:background .3s ease, color .3s ease; }
.foot-ghost:hover { background:#F5F0E6; color:#2B2621; }

/* Placeholders da galeria (espaços para o proprietário preencher com fotos) */
.slot { width:100%; height:100%; min-height:200px; display:flex; align-items:center; justify-content:center; text-align:center; padding:18px;
        background:#EDE7DA; color:#8A8073; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
        border:1px dashed rgba(43,38,33,.22); }

/* Mobile (<900px): hero com a foto inteira da vila e o texto SOBREPOSTO na base
   (layout clássico), e a seção "A vila" logo em seguida. */
@media (max-width: 899px) {
  #topo > header {
    height: auto !important;
    min-height: 0 !important;
    background: #2B2621 !important;
  }
  /* Foto inteira da vila (proporção original, sem cortar as laterais). */
  #heroImg {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    aspect-ratio: 1040 / 1280 !important;
    background-image: url('../images/hero-mobile.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    transform: none !important;
  }
  .hero-scroll { display: none !important; }
  /* Texto do hero sobreposto na base da foto (o .hero-overlay dá o gradiente de leitura). */
  .hero-inner {
    position: absolute !important;
    inset: 0 !important;
    justify-content: flex-end !important;
    padding: 0 clamp(20px,5vw,72px) 22px !important;
  }
  .hero-cta { display: none !important; }
  /* Espaçamento no mobile: mais respiro entre a foto do hero e "A vila",
     e menos entre o rótulo "A vila" e o título "Rústico e moderno…". */
  #vila { padding-top: 44px !important; }
  #vila > p:first-child { margin-bottom: 14px !important; }
  /* Rótulos de seção (sobre o bege) em teal mais escuro para contraste. */
  [style*="color:#4FA69B"] { color: #2C7565 !important; }
}