/* ============================================================
   Clube das Fraldas — moldura.css (r17, obra cabecalho_unico)
   Cabeçalho e rodapé únicos de TODAS as páginas (www e radar).
   Autossuficiente: não depende do style.css nem do radar.css.
   MOBILE-FIRST: base 360 px; menu em linha a partir de 960 px.
   ============================================================ */
.header, .rodape {
  --m-azul: #2EC5FF; --m-navy: #162F5B; --m-claro: #F1FBFF; --m-claro-2: #EBF5F9; --m-suave: #B4EAFF;
  --m-gutter: clamp(16px, 5vw, 20px); --m-toque: 44px;
  font-family: 'Montserrat Alternates', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.header a, .rodape a { text-decoration: none; }
.rodape__in, .header__inner { width: min(100% - 2 * var(--m-gutter), 1140px); margin-inline: auto; }

/* ---------- Cabeçalho ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(241, 251, 255, .92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--m-claro-2);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 10px; }
.header__logo { display: flex; align-items: center; min-height: var(--m-toque); }
.header__logo img { display: block; height: clamp(40px, 11vw, 52px); width: auto; }
.menu-toggle {
  display: flex; align-items: center; justify-content: center;
  width: var(--m-toque); height: var(--m-toque);
  background: none; border: none; border-radius: 12px;
  font-family: inherit; font-size: 28px; line-height: 1; color: var(--m-navy); cursor: pointer;
}
.menu-toggle:active { background: var(--m-claro-2); }
.nav {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: var(--m-claro); flex-direction: column; padding: 8px var(--m-gutter) 16px; gap: 2px;
  border-bottom: 1px solid var(--m-claro-2); box-shadow: 0 10px 20px rgba(0,0,0,.08);
}
.nav.aberto { display: flex; }
.nav a { display: flex; align-items: center; min-height: var(--m-toque); font-weight: 600; font-size: 16px; line-height: 1.25; color: var(--m-navy); }
.nav a:hover { color: var(--m-azul); }
.nav a.nav--destaque { color: var(--m-azul); }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.header__cta { display: none; }   /* no celular o botão do topo sai; cada página tem o seu logo abaixo */

/* ---------- Rodapé ---------- */
.rodape { background: var(--m-navy); color: var(--m-claro); }
.rodape > .rodape__in { padding: clamp(32px, 7vw, 44px) 0 4px; }   /* embaixo só 4 px: os links já têm 44 px de altura (área de toque) */
.rodape__logo img { display: block; height: clamp(48px, 13vw, 60px); width: auto; margin: 0 auto 18px; }
.rodape p { text-align: center; font-size: 13px; line-height: 1.6; max-width: 900px; margin: 0 auto 10px; color: var(--m-suave); }
.rodape__links { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 4px; margin: 8px 0 0; font-size: 13px; font-weight: 600; }
.rodape__links a { display: inline-flex; align-items: center; min-height: var(--m-toque); padding: 0 8px; color: var(--m-azul); }
.rodape__links a:hover { color: var(--m-claro); text-decoration: underline; }
.rodape__legal { background: #0E2247; padding: 14px 0 16px; }
.rodape .copy { font-size: 11px; line-height: 1.6; opacity: .7; max-width: 960px; margin: 0 auto; }
.rodape .copy a { color: var(--m-suave); text-decoration: underline; display: inline-block; padding: 6px 0; }

@media (min-width: 640px) {
  .rodape__links { gap: 0 14px; }
}
@media (min-width: 960px) {
  .header__inner { padding-block: 14px; gap: 20px; }
  .menu-toggle { display: none; }
  .nav {
    display: flex; position: static; flex-direction: row; gap: clamp(16px, 2vw, 28px); padding: 0;
    background: transparent; border: none; box-shadow: none; margin-left: auto;
  }
  .nav a { min-height: 0; font-size: 15px; white-space: nowrap; }
  .header__cta {
    display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
    background: var(--m-navy); color: var(--m-claro); font-weight: 600; font-size: 15px; line-height: 1.25;
    padding: 12px 24px; border-radius: 100px; box-shadow: 0 0 10px 0 var(--m-azul);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .header__cta:hover { transform: translateY(-2px); box-shadow: 0 0 18px 2px var(--m-azul); }
}