/* ============================================================
   Atlanticoimo — layout.css
   Estrutura de pagina: cabecalho A (transparente sobre o hero,
   solido ao deslocar, fixo), rodape C (missao + ligacoes),
   contentores e cabecalhos de seccao.
   ============================================================ */

/* ---------- Contentores ---------- */
.cfimpt-wrap { width: 100%; max-width: var(--cfimpt-maxw); margin-inline: auto; padding-inline: 22px; }
.cfimpt-wrap-narrow { max-width: 820px; }
.cfimpt-main { display: block; }
body.cfimpt-no-hero .cfimpt-main { padding-top: 74px; }

/* ---------- Cabecalho (variante A) ---------- */
.cfimpt-header {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  transition: background-color .28s ease, box-shadow .28s ease, color .28s ease;
}
.cfimpt-header-inner {
  max-width: var(--cfimpt-maxw); margin-inline: auto;
  padding: 14px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
}
/* Estado transparente sobre o hero */
.cfimpt-header-overlay { background: transparent; color: #fff; }
.cfimpt-header-overlay .cfimpt-brand-name,
.cfimpt-header-overlay .cfimpt-menu a,
.cfimpt-header-overlay .cfimpt-platforms-toggle { color: #fff; }
.cfimpt-header-overlay .cfimpt-brand-mark { background: var(--cfimpt-accent); }
/* Estado solido (ao deslocar ou em paginas sem hero) */
.cfimpt-header-overlay.cfimpt-scrolled,
.cfimpt-header.cfimpt-solid {
  background: var(--cfimpt-surface);
  box-shadow: var(--cfimpt-shadow);
  color: var(--cfimpt-text);
}
.cfimpt-header-overlay.cfimpt-scrolled .cfimpt-brand-name,
.cfimpt-header.cfimpt-solid .cfimpt-brand-name { color: var(--cfimpt-primary); }
.cfimpt-header-overlay.cfimpt-scrolled .cfimpt-menu a,
.cfimpt-header.cfimpt-solid .cfimpt-menu a,
.cfimpt-header-overlay.cfimpt-scrolled .cfimpt-platforms-toggle,
.cfimpt-header.cfimpt-solid .cfimpt-platforms-toggle { color: var(--cfimpt-text); }

/* ---------- Marca ---------- */
.cfimpt-brand-text { display: inline-flex; align-items: center; gap: 10px; }
.cfimpt-brand-mark {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--cfimpt-primary);
  position: relative; flex: none;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
}
.cfimpt-brand-mark::after {
  content: ""; position: absolute; inset: 7px 7px auto 7px; height: 5px;
  border-radius: 2px; background: var(--cfimpt-accent);
}
.cfimpt-brand-name {
  font-family: var(--cfimpt-font-head); font-size: 22px; letter-spacing: .3px;
  color: var(--cfimpt-primary);
}

/* ---------- Navegacao ---------- */
.cfimpt-menu {
  list-style: none; display: flex; align-items: center; gap: 26px;
  margin: 0; padding: 0;
}
.cfimpt-menu a { font-size: 15px; font-weight: 500; color: var(--cfimpt-text); }
.cfimpt-menu a:hover { color: var(--cfimpt-accent-dark); }

.cfimpt-nav { display: flex; align-items: center; gap: 26px; }

/* Menu de plataformas (dropdown) */
.cfimpt-nav-platforms { position: relative; }
.cfimpt-platforms-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  font: 500 15px/1 var(--cfimpt-font-body); color: var(--cfimpt-text);
}
.cfimpt-caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -3px; }
.cfimpt-platforms-panel {
  position: absolute; top: calc(100% + 14px); right: 0;
  min-width: 240px; background: var(--cfimpt-surface);
  border: 1px solid var(--cfimpt-border); border-radius: var(--cfimpt-radius);
  box-shadow: var(--cfimpt-shadow-lg); padding: 10px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.cfimpt-nav-platforms:hover .cfimpt-platforms-panel,
.cfimpt-nav-platforms:focus-within .cfimpt-platforms-panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.cfimpt-platforms-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cfimpt-platforms-list a { display: block; padding: 8px 12px; border-radius: var(--cfimpt-radius-sm); font-size: 14.5px; color: var(--cfimpt-text); }
.cfimpt-platforms-list a:hover { background: var(--cfimpt-accent-soft); color: var(--cfimpt-primary); }

.cfimpt-nav-cta {
  display: inline-flex; align-items: center; padding: 10px 18px;
  background: var(--cfimpt-accent); color: var(--cfimpt-primary-dark);
  border-radius: 999px; font-weight: 600; font-size: 14.5px;
}
.cfimpt-nav-cta:hover { background: var(--cfimpt-accent-dark); color: #fff; }

/* ---------- Cabecalhos de seccao ---------- */
.cfimpt-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.cfimpt-section-head h2 { margin: 0; }
.cfimpt-section-link { font-weight: 600; font-size: 15px; color: var(--cfimpt-secondary); white-space: nowrap; }
.cfimpt-section-link:hover { color: var(--cfimpt-primary); }
.cfimpt-section-intro { color: var(--cfimpt-muted); max-width: 70ch; margin-top: -6px; margin-bottom: 26px; }
.cfimpt-section-alt { background: var(--cfimpt-accent-soft); }

/* ---------- Rodape (variante C) ---------- */
.cfimpt-footer { background: var(--cfimpt-primary-dark); color: rgba(255,255,255,.82); margin-top: 70px; }
.cfimpt-footer-mission { max-width: 46ch; }
.cfimpt-footer-mark { display: inline-block; width: 34px; height: 34px; border-radius: 9px; background: var(--cfimpt-accent); margin-bottom: 12px; }
.cfimpt-footer-mission h3 { color: #fff; margin: 0 0 14px; font-size: 24px; }
.cfimpt-footer-claim { color: rgba(255,255,255,.88); margin-bottom: 14px; }
.cfimpt-footer-note { font-size: 13.5px; color: rgba(255,255,255,.6); line-height: 1.6; }
.cfimpt-footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.cfimpt-footer-col h4 { color: #fff; margin: 0 0 14px; font-size: 16px; }
.cfimpt-footer-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.cfimpt-footer-menu a { color: rgba(255,255,255,.78); font-size: 14.5px; }
.cfimpt-footer-menu a:hover { color: var(--cfimpt-accent); }
.cfimpt-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  max-width: var(--cfimpt-maxw); margin-inline: auto;
  padding: 18px 22px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 13.5px; color: rgba(255,255,255,.6);
}
.cfimpt-footer-bottom a { color: rgba(255,255,255,.6); }
.cfimpt-footer-bottom a:hover { color: var(--cfimpt-accent); }
