/* =========================================================
   Hotel Lukweku — Folha de estilos principal
   Paleta: verde-petróleo profundo + ocre + areia quente
   Tipografia: Fraunces (títulos) + Inter (texto)
   ========================================================= */

:root{
  /* Cor */
  --color-bg:            #FBF8F2;   /* areia quente, fundo geral */
  --color-bg-alt:        #F2ECDE;   /* secções alternadas */
  --color-surface:       #FFFFFF;
  --color-ink:           #1E2420;   /* texto principal, quase-preto quente */
  --color-ink-soft:      #4B5450;   /* texto secundário */
  --color-primary:       #123A5C;   /* azul-atlântico profundo — marca */
  --color-primary-dark:  #0B2740;
  --color-primary-tint:  #E6ECF2;   /* fundo suave sobre a cor primária */
  --color-accent:        #C08A3D;   /* ocre — acento angolano */
  --color-accent-dark:   #9C6E2B;
  --color-line:          #E3DCC9;   /* linhas / bordas */
  --color-whatsapp:      #1F8A57;

  /* Tipografia */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Espaço */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6.5rem;

  /* Layout */
  --container: 1180px;
  --radius: 4px;
  --shadow-card: 0 1px 2px rgba(18,56,50,0.06), 0 8px 24px rgba(18,56,50,0.07);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--space-2);
  color: var(--color-primary);
}
h1{ font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 500; letter-spacing: -0.01em; }
h2{ font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 500; letter-spacing: -0.01em; }
h3{ font-size: 1.3rem; font-weight: 600; }
p{ margin: 0 0 var(--space-2); max-width: 62ch; color: var(--color-ink-soft); }
.lede{ font-size: 1.15rem; color: var(--color-ink-soft); }

:focus-visible{ outline: 2px solid var(--color-accent); outline-offset: 3px; }

.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.section{ padding: var(--space-6) 0; }
.section--alt{ background: var(--color-bg-alt); }
.section--primary{ background: var(--color-primary); color: #EFEDE4; }
.section--primary h2, .section--primary h3{ color: #FFFFFF; }
.section--primary p{ color: #C9D3CE; }

.section-head{
  max-width: 640px;
  margin-bottom: var(--space-4);
}
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.kicker{
  display:inline-block;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-accent-dark);
  font-size: 1.05rem;
  margin-bottom: var(--space-1);
}

/* Botões */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding: 0.85em 1.7em;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  border: 1px solid transparent;
  cursor:pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: var(--color-accent); color: #21170A; }
.btn-primary:hover{ background: var(--color-accent-dark); color:#fff; }
.btn-outline{ background: transparent; border-color: currentColor; color: inherit; }
.btn-outline:hover{ background: rgba(255,255,255,0.08); }
.btn-outline-dark{ background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.btn-outline-dark:hover{ background: var(--color-primary); color: #fff; }
.btn-ghost{ background: transparent; color: var(--color-primary); padding-left: 0; padding-right:0; }
.btn-ghost::after{ content:"›"; margin-left:.4em; }
.btn-whatsapp{ background: var(--color-whatsapp); color:#fff; }
.btn-whatsapp:hover{ background:#186E45; color:#fff; }
.btn-block{ width:100%; }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(251,248,242,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-line);
}
.site-header .inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 1rem var(--space-3);
  max-width: var(--container); margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:.6em; font-family: var(--font-display); font-size:1.35rem; color: var(--color-primary); font-weight:600; }
.brand-logo{ height:42px; width:auto; display:block; }
.brand-logo-icon{ height:34px; width:auto; display:block; }
.brand .mark{
  width:34px; height:34px; border-radius: 50%;
  background: var(--color-primary);
  color:#F2ECDE; display:flex; align-items:center; justify-content:center;
  font-size:1rem; font-family: var(--font-display);
}
.main-nav{ display:flex; align-items:center; gap: var(--space-4); }
.main-nav ul{ display:flex; gap: var(--space-3); }
.main-nav a{ font-size: 0.96rem; color: var(--color-ink); padding: .3em 0; border-bottom: 1px solid transparent; }
.main-nav a:hover, .main-nav a[aria-current="page"]{ border-bottom-color: var(--color-accent); color: var(--color-primary); }
.header-cta{ display:flex; align-items:center; gap: .7em; }
.nav-toggle{
  display:none; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--color-line); background:var(--color-surface);
  align-items:center; justify-content:center; cursor:pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:18px; height:2px; background: var(--color-primary); position:relative; transition:.2s;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height: 86vh;
  display:flex; align-items:flex-end;
  color:#fff;
  overflow:hidden;
  background: var(--color-primary-dark);
}
.hero.has-image{ background-image: linear-gradient(180deg, rgba(11,39,64,.15) 0%, rgba(11,39,64,.45) 55%, rgba(11,39,64,.88) 100%), var(--hero-img); background-size: cover; background-position: center; }
.hero-slider{ position:absolute; inset:0; z-index:0; }
.hero-slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition: opacity .9s ease; overflow:hidden; }
.hero-slide::before{ content:""; position:absolute; inset:0; background:inherit; background-size:cover; background-position:center; transform: scale(1); transition: transform 7s linear; }
.hero-slide.is-active{ opacity:1; }
.hero-slide.is-active::before{ transform: scale(1.12); }
.hero-overlay{ position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(11,39,64,.15) 0%, rgba(11,39,64,.48) 55%, rgba(11,39,64,.88) 100%); }
.hero-inner{ position:relative; z-index:2; max-width: var(--container); margin:0 auto; width:100%; padding: var(--space-5) var(--space-3) var(--space-4); }
.hero .kicker{ color:#E8D2AA; }
.hero h1{ color:#fff; max-width: 16ch; }
.hero p{ color:#E7E9E2; max-width: 46ch; font-size:1.1rem; }
.hero-actions{ display:flex; gap: var(--space-2); flex-wrap:wrap; margin-top: var(--space-2); }
.hero-controls{ position:relative; z-index:2; display:flex; align-items:center; gap: var(--space-3); padding: 0 var(--space-3) var(--space-3); max-width: var(--container); margin:0 auto; }
.hero-dots{ display:flex; gap:.5em; }
.hero-dots button{ width:9px; height:9px; border-radius:50%; border:1px solid rgba(255,255,255,.7); background:transparent; padding:0; cursor:pointer; transition: background .2s, width .2s; }
.hero-dots button.is-active{ background:#fff; width:22px; border-radius:5px; }
.hero-caption{ color:#fff; font-family: var(--font-display); font-style: italic; font-size:.98rem; opacity:.9; }
.hero-arrows{ position:absolute; z-index:2; inset:0; display:flex; align-items:center; justify-content:space-between; padding: 0 var(--space-2); pointer-events:none; }
.hero-arrow{
  pointer-events:auto;
  width:44px; height:44px; border-radius:50%;
  background: rgba(11,39,64,.35); border:1px solid rgba(255,255,255,.5); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition: background .18s;
}
.hero-arrow:hover{ background: rgba(11,39,64,.6); }
@media (prefers-reduced-motion: reduce){
  .hero-slide::before{ transition:none; transform:none !important; }
}
@media (max-width:640px){
  .hero-arrow{ width:36px; height:36px; }
  .hero-caption{ display:none; }
}

/* ---------- Booking widget ---------- */
.booking-widget{
  position:relative; z-index:5;
  margin: -64px auto 0; max-width: var(--container);
  padding: 0 var(--space-3);
}
.booking-card{
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-line);
  padding: var(--space-3);
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  align-items:end;
}
.field{ display:flex; flex-direction:column; gap:.4em; }
.field label{ font-size:.8rem; text-transform: none; letter-spacing:.01em; color: var(--color-ink-soft); }
.field input, .field select{
  border: 1px solid var(--color-line); border-radius: var(--radius);
  padding: .7em .8em; font-family: var(--font-body); font-size: .95rem;
  background: var(--color-bg); color: var(--color-ink);
}
.field input:focus, .field select:focus{ border-color: var(--color-accent); }

/* ---------- Cards genéricas ---------- */
.grid{ display:grid; gap: var(--space-3); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }

.room-card, .content-card{
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.room-card .media, .content-card .media{ aspect-ratio: 4/3; overflow:hidden; background: var(--color-primary-tint); }
.room-card .media img, .content-card .media img{ width:100%; height:100%; object-fit:cover; }
.room-card .body, .content-card .body{ padding: var(--space-3); display:flex; flex-direction:column; gap:.5em; flex:1; }
.room-meta{ display:flex; gap:1.1em; flex-wrap:wrap; font-size:.85rem; color: var(--color-ink-soft); border-top:1px solid var(--color-line); margin-top:auto; padding-top: var(--space-2); }
.room-price{ font-family: var(--font-display); font-size:1.25rem; color: var(--color-primary); }
.room-actions{ display:flex; gap:.6em; margin-top:.4em; }
.room-thumbs{ display:flex; gap:.4em; margin-top:.3em; }
.room-thumbs img{ flex:1; width:100%; aspect-ratio:1; object-fit:cover; border-radius: 3px; cursor:pointer; }

/* ---------- Split section (imagem + texto) ---------- */
.split{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-5); align-items:center; }
.split.reverse{ direction: rtl; }
.split.reverse > *{ direction: ltr; }
.split .media{ border-radius: var(--radius); overflow:hidden; aspect-ratio: 4/3.1; background: var(--color-primary-tint); }
.split .media img{ width:100%; height:100%; object-fit:cover; }
.split-text ul.checklist li{ position:relative; padding-left:1.6em; margin-bottom:.55em; color: var(--color-ink); }
.split-text ul.checklist li::before{ content:"—"; position:absolute; left:0; color: var(--color-accent-dark); }

/* ---------- Amenities ---------- */
.amenity-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-3); }
.amenity{ display:flex; flex-direction:column; gap:.7em; padding: var(--space-3); background: var(--color-surface); border:1px solid var(--color-line); border-radius: var(--radius); }
.amenity .icon{ width:38px; height:38px; color: var(--color-accent-dark); }
.amenity h4{ margin:0; font-family: var(--font-body); font-weight:600; font-size:1rem; color: var(--color-primary); }
.amenity p{ margin:0; font-size:.9rem; }

/* ---------- Gallery ---------- */
.gallery-filters{ display:flex; gap:.6em; flex-wrap:wrap; margin-bottom: var(--space-3); }
.gallery-filters button{
  padding:.5em 1.1em; border-radius: 999px; border:1px solid var(--color-line);
  background: var(--color-surface); font-family: var(--font-body); font-size:.88rem; cursor:pointer;
  color: var(--color-ink-soft);
}
.gallery-filters button.is-active{ background: var(--color-primary); color:#fff; border-color: var(--color-primary); }
.masonry{ column-count: 3; column-gap: var(--space-2); }
.masonry figure{ margin: 0 0 var(--space-2); break-inside: avoid; border-radius: var(--radius); overflow:hidden; background: var(--color-primary-tint); }
.masonry img{ width:100%; display:block; }

/* ---------- Testemunhos ---------- */
.review-card{ background: var(--color-surface); border:1px solid var(--color-line); border-radius: var(--radius); padding: var(--space-3); }
.review-card .stars{ color: var(--color-accent-dark); letter-spacing: .15em; margin-bottom:.6em; }

/* ---------- Formulários ---------- */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-3); }
.form-grid .full{ grid-column: 1 / -1; }
.form-card{
  background: var(--color-surface); border:1px solid var(--color-line); border-radius: var(--radius);
  padding: var(--space-4);
}
textarea{ resize: vertical; min-height: 110px; font-family: var(--font-body); }

/* ---------- Localização / Contactos ---------- */
.info-list{ display:flex; flex-direction:column; gap: var(--space-2); }
.info-list .row{ display:flex; gap: 1em; align-items:flex-start; padding-bottom: var(--space-2); border-bottom:1px solid var(--color-line); }
.info-list .row .label{ min-width: 130px; font-weight:600; color: var(--color-primary); font-size:.92rem; }
.map-embed{ border-radius: var(--radius); overflow:hidden; border:1px solid var(--color-line); aspect-ratio: 16/10.5; background: var(--color-primary-tint); display:flex; align-items:center; justify-content:center; color: var(--color-ink-soft); text-align:center; padding: var(--space-3); }

/* ---------- Faixa CTA ---------- */
.cta-band{ text-align:center; }
.cta-band h2{ max-width: 24ch; margin-left:auto; margin-right:auto; }

/* ---------- Placeholder de informação ---------- */
.tbc{ color: var(--color-accent-dark); font-weight:600; }

/* ---------- Breadcrumb / page hero simples ---------- */
.page-hero{
  padding: var(--space-5) 0 var(--space-4);
  background: var(--color-primary);
  color:#fff;
}
.page-hero h1{ color:#fff; max-width: 22ch; }
.page-hero p{ color:#C9D3CE; }
.breadcrumb{ font-size:.85rem; color:#9FB2AB; margin-bottom: var(--space-2); }
.breadcrumb a{ color:#C9D3CE; }

/* ---------- Rodapé ---------- */
.site-footer{ background: var(--color-primary-dark); color:#C9D3CE; padding: var(--space-5) 0 var(--space-3); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom:1px solid rgba(255,255,255,.12); }
.site-footer h4{ color:#fff; font-family: var(--font-body); font-size:.92rem; font-weight:700; margin-bottom: var(--space-2); }
.site-footer a{ color:#C9D3CE; }
.site-footer a:hover{ color:#fff; }
.footer-links li{ margin-bottom:.6em; font-size:.92rem; }
.footer-brand p{ color:#9FB2AB; }
.social-row{ display:flex; gap:.7em; margin-top: var(--space-2); }
.social-row a{ width:36px; height:36px; border:1px solid rgba(255,255,255,.25); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top: var(--space-3); font-size:.82rem; color:#8FA39B; flex-wrap:wrap; gap: .5em; }
.footer-bottom .legal-links{ display:flex; gap: var(--space-2); }

/* ---------- WhatsApp flutuante ---------- */
.whatsapp-float{
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width:58px; height:58px; border-radius:50%;
  background: var(--color-whatsapp); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
  transition: transform .18s ease;
}
.whatsapp-float:hover{ transform: scale(1.06); }

/* ---------- Tabela de preços ---------- */
.price-table{ width:100%; border-collapse: collapse; background: var(--color-surface); border:1px solid var(--color-line); border-radius: var(--radius); overflow:hidden; }
.price-table th, .price-table td{ padding: .85em 1.1em; text-align:left; border-bottom:1px solid var(--color-line); font-size:.95rem; }
.price-table thead th{ background: var(--color-primary); color:#fff; font-family: var(--font-body); font-weight:600; font-size:.85rem; }
.price-table td:last-child, .price-table th:last-child{ text-align:right; font-family: var(--font-display); color: var(--color-primary); font-size:1.05rem; }
.price-table tbody tr:last-child td{ border-bottom:none; }
.price-table tbody tr:hover{ background: var(--color-bg-alt); }
.price-note{ font-size:.88rem; color: var(--color-ink-soft); margin-top: var(--space-2); }
.checkinout-row{ display:flex; gap: var(--space-4); flex-wrap:wrap; margin-top: var(--space-3); }
.checkinout-row .pill{ background: var(--color-primary-tint); border-radius: var(--radius); padding: .8em 1.3em; font-size:.9rem; }
.checkinout-row .pill strong{ color: var(--color-primary); display:block; font-family: var(--font-display); font-size:1.15rem; }

/* ---------- Utilidades ---------- */
.mt-0{ margin-top:0; } .center-text{ text-align:center; }
.eventos-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-2); }
.event-pill{ padding: var(--space-3); border:1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); text-align:center; }
.event-pill h4{ margin: .4em 0 0; font-family: var(--font-body); font-weight:600; color: var(--color-primary); font-size:.98rem; }
.event-pill .icon{ width:30px; height:30px; margin:0 auto; color: var(--color-accent-dark); }

/* =========================================================
   Responsividade
   ========================================================= */
@media (max-width: 1024px){
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .amenity-grid{ grid-template-columns: repeat(2,1fr); }
  .eventos-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .split{ grid-template-columns: 1fr; }
  .split.reverse{ direction: ltr; }
  .masonry{ column-count: 2; }
}

@media (max-width: 860px){
  .main-nav{ position: fixed; inset: 0 0 0 auto; width: min(86vw, 340px); height:100vh;
    background: var(--color-surface); flex-direction:column; align-items:flex-start;
    padding: var(--space-5) var(--space-3); transform: translateX(100%); transition: transform .25s ease;
    box-shadow: -12px 0 30px rgba(0,0,0,.12);
  }
  .main-nav.is-open{ transform: translateX(0); }
  .main-nav ul{ flex-direction:column; gap: var(--space-2); width:100%; }
  .main-nav a{ font-size:1.05rem; }
  .header-cta .btn-outline-dark{ display:none; }
  .nav-toggle{ display:flex; }
  .booking-card{ grid-template-columns: 1fr 1fr; }
  .booking-card .btn{ grid-column: 1/-1; }
}

@media (max-width: 640px){
  .section{ padding: var(--space-5) 0; }
  .grid-3, .grid-4, .grid-2{ grid-template-columns: 1fr; }
  .booking-card{ grid-template-columns: 1fr; margin: 0; }
  .booking-widget{ margin-top: var(--space-3); }
  .hero{ min-height: 78vh; }
  .form-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; gap: var(--space-3); }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .masonry{ column-count: 1; }
  .eventos-grid{ grid-template-columns: 1fr; }
}