/* CMBM — utilities.css
   Variáveis de marca e classes utilitárias de layout/tipografia.
   Não altera a identidade visual — apenas move os valores que já
   existiam inline para variáveis e classes reutilizáveis. */

:root {
  --cmbm-wine: #3A0E28;
  --cmbm-ink: #241019;
  --cmbm-pink: #E01A79;
  --cmbm-pink-dark: #B01362;
  --cmbm-pink-bg: #FBEAF1;
  --cmbm-pink-tint: #F291C0;
  --cmbm-teal: #1F8C81;
  --cmbm-teal-light: #2FBFB0;
  --cmbm-teal-bg: #E9FAF8;
  --cmbm-teal-ink: #08312c;
  --cmbm-green: #2C6B44;
  --cmbm-green-light: #3C8F5C;
  --cmbm-green-bg: #EAF6EE;
  --cmbm-cream: #FFF9F4;
  --cmbm-line: #EBD9E2;
  --cmbm-shadow: 0 10px 30px -12px rgba(58, 14, 40, .25);
  --cmbm-shadow-lg: 0 20px 44px -18px rgba(58, 14, 40, .4);
  --cmbm-font-serif: Georgia, "Times New Roman", serif;
  --cmbm-font-mono: "Courier New", monospace;
  --cmbm-font-sans: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

html { scroll-behavior: smooth; }

body.cmbm-theme {
  margin: 0;
  background: var(--cmbm-cream);
  color: var(--cmbm-ink);
  font-family: var(--cmbm-font-sans);
  line-height: 1.65;
  font-size: 17px;
}

.cmbm-container { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; position: relative; }
.cmbm-max-820 { max-width: 820px; margin: 0 auto; }
.cmbm-max-760 { max-width: 760px; }
.cmbm-max-700 { max-width: 700px; }
.cmbm-max-560 { max-width: 560px; margin: 0 auto; }

.cmbm-section { padding: 4rem 0; }
.cmbm-section--tight-top { padding-top: 1rem; }
.cmbm-section--tight-bottom { padding-bottom: 3rem; }
.cmbm-section--bg-pink { background: var(--cmbm-pink-bg); }
.cmbm-section--bg-teal { background: var(--cmbm-teal-bg); }
.cmbm-section--bg-green { background: var(--cmbm-green-bg); }
.cmbm-section--bg-dark { background: var(--cmbm-wine); color: #F6E4EE; }
.cmbm-section--bg-white { background: #fff; }
.cmbm-center { text-align: center; }
.cmbm-center-margin { margin-left: auto; margin-right: auto; }

.cmbm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem; }
.cmbm-grid-2--hero { grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; }
.cmbm-grid-2--sidebar { grid-template-columns: 35% 1fr; align-items: center; }
.cmbm-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.6rem; }

.cmbm-eyebrow { font-family: var(--cmbm-font-mono); text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; color: var(--cmbm-pink-dark); font-weight: 700; margin: 0 0 .4rem; }
.cmbm-eyebrow--light { color: var(--cmbm-pink-tint); }
.cmbm-eyebrow--teal { color: var(--cmbm-teal); }
.cmbm-eyebrow--green { color: var(--cmbm-green); }

.cmbm-title-hero { font-family: var(--cmbm-font-serif); color: var(--cmbm-wine); line-height: 1.08; font-weight: 700; letter-spacing: -.01em; font-size: clamp(2.1rem, 4vw, 2.8rem); margin: 1rem 0; }
.cmbm-title-page { font-family: var(--cmbm-font-serif); color: var(--cmbm-wine); font-weight: 700; font-size: clamp(2.1rem, 4vw, 2.8rem); margin: .4rem 0 1rem; }
.cmbm-title-xl { font-family: var(--cmbm-font-serif); color: var(--cmbm-wine); font-size: 2rem; font-weight: 700; margin: .4rem 0 1rem; }
.cmbm-title-lg { font-family: var(--cmbm-font-serif); color: var(--cmbm-wine); font-size: 1.35rem; font-weight: 700; margin-bottom: .6rem; }
.cmbm-title-light { color: #fff; }
.cmbm-lead { max-width: 540px; font-size: 1.08rem; }
.cmbm-text-pink { color: var(--cmbm-pink); }
.cmbm-text-teal { color: var(--cmbm-teal); }

.cmbm-checklist { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-top: 1.2rem; font-size: .9rem; list-style: none; padding: 0; }
.cmbm-checklist li { display: flex; align-items: center; gap: .4rem; }
.cmbm-checklist b { color: var(--cmbm-green); font-weight: 700; }

.cmbm-icon-list { list-style: none; display: grid; gap: .7rem; margin: 1rem 0 0; padding: 0; }
.cmbm-icon-list li { display: flex; gap: .6rem; }
.cmbm-icon-list--pink li span { color: var(--cmbm-pink-dark); font-weight: 700; }
.cmbm-icon-list--teal li span { color: var(--cmbm-teal); font-weight: 700; }
.cmbm-icon-list--green li span { color: var(--cmbm-green); font-weight: 700; }

.cmbm-tag { display: inline-block; font-family: var(--cmbm-font-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; padding: .18rem .55rem; border-radius: 999px; margin-bottom: .5rem; font-weight: 700; background: rgba(224, 26, 121, .12); color: var(--cmbm-pink-dark); }
.cmbm-tag--teal { background: rgba(47, 191, 176, .15); color: var(--cmbm-teal); }
.cmbm-tag--green { background: rgba(60, 143, 92, .15); color: var(--cmbm-green); }

.cmbm-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.cmbm-skip-link { position: absolute; left: -9999px; top: 0; background: var(--cmbm-wine); color: #fff; padding: .8rem 1.2rem; z-index: 10000; border-radius: 0 0 10px 0; font-family: var(--cmbm-font-mono); font-size: .8rem; }
.cmbm-skip-link:focus { left: 0; }