/* ============================================================
   MARÉ · design system — tenant: Paraíso da Sereia Eco-Chalés
   White-label: trocar as vars de :root troca o estabelecimento.
   ============================================================ */

:root {
  /* Paleta — identidade oficial @paraisodasereiaap: azul royal do logo,
     laranja do chalé/sol, branco das ondas. */
  --lagoon-950: #07253F;   /* fundo hero/footer (azul profundo) */
  --lagoon-900: #0B3560;
  --lagoon-700: #104E88;
  --teal-500:  #1873BF;    /* primária — azul do wordmark */
  --aqua-400:  #3EA7E0;    /* acento aquático */
  --aqua-200:  #B9DFF5;
  --coral-500: #F08442;    /* CTA — laranja do chalé/sol do logo */
  --coral-600: #DD6A22;
  --gold-300:  #F6C863;    /* sol */
  --sand-100:  #F6FAFD;    /* fundo claro padrão */
  --sand-200:  #E7F1F9;
  --wood-700:  #8A5A33;    /* madeira do deck */
  --ink-900:   #152736;    /* texto */
  --ink-600:   #4A6072;    /* texto secundário */
  --white:     #FFFFFF;

  --grad-scale: linear-gradient(135deg, var(--teal-500), var(--aqua-400));
  --grad-sunset: linear-gradient(160deg, #07253F 0%, #104E88 45%, #1873BF 85%, #F08442 135%);

  /* Tipografia */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;

  /* Escala */
  --radius-s: 8px; --radius-m: 14px; --radius-l: 22px; --radius-pill: 999px;
  --shadow-1: 0 2px 10px rgba(6, 43, 44, .08);
  --shadow-2: 0 12px 32px rgba(6, 43, 44, .16);
  --container: 1140px;
}

/* ---------- reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--sand-100);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--teal-500); text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
section { padding: 72px 0; }

/* ---------- componentes base ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  padding: 14px 28px; border-radius: var(--radius-pill);
  border: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.btn-primary { background: var(--coral-500); color: var(--white); }
.btn-primary:hover { background: var(--coral-600); }
.btn-ghost { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,.55); }
.btn-ghost:hover { border-color: var(--white); background: rgba(255,255,255,.08); }
.btn-teal { background: var(--grad-scale); color: var(--white); }

.card {
  background: var(--white); border-radius: var(--radius-l);
  box-shadow: var(--shadow-1); overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }

.kicker {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal-500); margin-bottom: 10px;
}
.section-title { font-size: clamp(1.7rem, 3.5vw, 2.4rem); color: var(--lagoon-900); }
.section-sub { color: var(--ink-600); max-width: 640px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .82rem; font-weight: 600; padding: 6px 14px;
  border-radius: var(--radius-pill); background: var(--sand-200); color: var(--lagoon-900);
}

/* selo circular branco do logotipo oficial (compartilhado por todas as páginas) */
.logo-badge {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
  background: var(--white); border: 1.5px solid rgba(255,255,255,.55);
  box-shadow: var(--shadow-1); overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
}
.logo-badge img { width: 100%; height: 100%; object-fit: cover; display: block; }
.logo-badge--footer { width: 52px; height: 52px; }

/* padrão de escamas (sereia) para fundos escuros */
.scales-bg {
  background-image: radial-gradient(circle at 50% 0, rgba(44,177,166,.14) 0 38%, transparent 40%);
  background-size: 48px 24px;
  background-position: 0 0, 24px 12px;
}

/* divisor de onda entre seções: usar <div class="wave"><svg .../></div> */
.wave { line-height: 0; }
.wave svg { width: 100%; height: 56px; }

@media (max-width: 720px) {
  section { padding: 48px 0; }
}