:root{
  --blue-700:#0C4396;
  --blue-500:#1F6AC9;
  --blue-300:#6DB7FF;
  --yellow-400:#F4C013;
  --white:#FFFFFF;
  --gray-700:#374151;
  --gray-500:#6B7280;

  --bg:var(--white);
  --text:var(--gray-700);
  --brand:var(--blue-700);
  --accent:var(--yellow-400);
  --soft:#E7F2FF;
  --radius:14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text); background:var(--bg); line-height:1.6;
}
h1,h2,h3{font-family:Poppins, Inter, sans-serif; margin:0 0 8px}
h1{font-size:clamp(28px,4vw,44px); line-height:1.15}
h2{font-size:clamp(22px,3vw,32px)}
h3{font-size:20px}
p{margin:0 0 12px}
a{color:var(--brand); text-decoration:none}
.container{max-width:1100px; margin:0 auto; padding:0 20px}

/* Header */
.site-header{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid #eef2ff}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--brand)}
.logo-circle{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#111;display:grid;place-items:center;font-weight:800}
.brand-text{white-space:nowrap}
.main-nav{display:flex; align-items:center; gap:18px}
.main-nav a{padding:8px 10px}
.main-nav .active{font-weight:600}

/* Buttons */
.btn{display:inline-block; padding:12px 18px; border-radius:var(--radius); font-weight:600; border:2px solid transparent; transition:.2s}
.btn-primary{background:var(--brand); color:#fff}
.btn-primary:hover{filter:brightness(1.05)}
.btn-secondary{background:var(--soft); color:var(--brand)}
.btn-inverse{background:var(--accent); color:#111}
.btn-inverse:hover{filter:brightness(1.05)}

/* Hero sections */
.hero{background:linear-gradient(180deg, var(--soft), #fff); padding:48px 0 36px}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center}
.hero-media img{width:100%; border-radius:var(--radius); box-shadow:0 12px 30px rgba(0,0,0,.10)}
.hero-ctas{display:flex; gap:12px; margin-top:14px}
.page-hero{background:#f8fafc; padding:28px 0; border-bottom:1px solid #eef2ff}
.page-hero .banner{width:100%; border-radius:var(--radius); margin-top:12px}

/* Features/cards */
.features{padding:36px 0 20px}
.features .cards{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:16px}
.card{background:#fff; border:1px solid #eef2ff; border-radius:var(--radius); padding:16px}
.card-icon{font-size:28px}

/* Sections */
.cta-band{background:var(--brand); color:#fff; margin:36px 0 0; padding:28px 0}
.cta-inner{display:flex; align-items:center; justify-content:space-between}
.site-footer{background:#f8fafc; margin-top:36px; padding:20px 0}
.footer-grid{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.brand-footer .logo-circle{background:var(--brand); color:#fff}
.muted{color:var(--gray-500)}
.small{font-size:12px}
.fineprint{text-align:center}

/* Services grid */
.service-list{padding:24px 0}
.service{border-bottom:1px solid #eef2ff; padding:16px 0}

/* Testimonials */
.testimonials{padding:28px 0}
.t-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:14px}
.t-card{background:#fff; border:1px solid #eef2ff; border-radius:var(--radius); padding:16px; box-shadow:0 6px 16px rgba(0,0,0,.04)}
.t-card p{font-size:16px}
.t-card footer{margin-top:10px; color:var(--gray-500); font-size:14px}
.t-cta{margin-top:16px}

/* Forms */
.form-wrap{padding:24px 0}
.booking-form{background:#fff; border:1px solid #eef2ff; border-radius:var(--radius); padding:20px}
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.field{display:flex; flex-direction:column; gap:6px}
.field.full{grid-column:1 / -1}
.field.checkbox label{display:flex; gap:10px; align-items:flex-start}
label{font-weight:600}
input,select,textarea{border:1px solid #e5e7eb; border-radius:10px; padding:12px; font-size:15px; outline:none; transition:.15s; background:#fff}
input:focus,select:focus,textarea:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(12,67,150,.12)}
.form-actions{margin-top:10px}
.form-result{margin-top:18px; background:#f0fdf4; border:1px solid #bbf7d0; padding:16px; border-radius:10px}

/* Banners */
.banner{width:100%; border-radius:var(--radius); box-shadow:0 10px 24px rgba(0,0,0,.08); object-fit:cover}

/* Pricing */
.pricing{padding:28px 0}
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px}
.price-card{background:#fff; border:1px solid #eef2ff; border-radius:var(--radius); padding:18px}
.price-card h3{margin-bottom:6px}
.price{font-size:28px; font-weight:800; color:var(--brand)}

/* Responsive */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .features .cards{grid-template-columns:1fr 1fr}
  .t-grid{grid-template-columns:1fr 1fr}
  .pricing-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .features .cards{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .t-grid{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
}

/* --- Added: Compact booking form and darker inputs --- */
.form-wrap { padding-top:16px; padding-bottom:24px; }
.booking-form { max-width:720px; margin:0 auto; }
.booking-form .grid { display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.booking-form .field.full { grid-column:1 / -1; }
.booking-form label { font-size:14px; margin-bottom:6px; color:#2A2A2A; }
.booking-form input, .booking-form select, .booking-form textarea { height:42px; padding:8px 10px; font-size:14px; line-height:1.3; border:1.5px solid #9AA4B2; border-radius:8px; background:#FFF; color:#1F2937; }
.booking-form textarea { min-height:96px; height:auto; }
.booking-form input::placeholder, .booking-form textarea::placeholder { color:#8A94A6; }
.booking-form input:focus, .booking-form select:focus, .booking-form textarea:focus { outline:none; border-color:#0C4396; box-shadow:0 0 0 3px rgba(12,67,150,0.15);}
.booking-form select:hover, .booking-form input:hover, .booking-form textarea:hover { border-color:#7C8A9E;}
@media (max-width:720px){ .booking-form .grid { grid-template-columns:1fr; } }

/* === New: 3 campos (Bathrooms, Bedrooms, Half-baths) lado a lado no desktop === */
@media (min-width: 900px) {
  .booking-form .row--three {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
    align-items: end; /* alinha pela base para ficar uniforme */
  }
}
/* Em telas menores, já cai para 1 coluna pelas regras existentes */