/* ============================================================================
   Abrah Studios × Biomedicina in Rio 2027 — Site de entregas
   Importa tokens NoNAP. Aplica camada do conceito Bloco Tropical por cima.
   Densidade cerimonial (default).
   ============================================================================ */

@import "./tokens.css";

/* ============================================================================
   BLOCO TROPICAL — design tokens do evento
   Paleta com semântica geográfica carioca + escala completa pra cada cor.
   Cor brasileira no campo branco. Ink segura o texto, branco segura o ar,
   blocos cerimoniais carregam a cor.
   ============================================================================ */

:root {
  /* 3 famílias verdadeiras do doc Bloco Tropical:
     1. Bricolage Grotesque 800 — display, lockup, eyebrows/labels caps tracked, monogram
     2. Instrument Serif Italic — editorial, pullquote, "in", caption
     3. DM Sans 400/500/700 — body, descrições, hashtag, info técnica

     IMPORTANTE: no doc, eyebrows e labels caps usam Bricolage 800, não DM Sans bold.
     Quem usa --bir-font-mono / --bir-font-extreme / --bir-font-sub / --bir-font-lockup
     DEVE aplicar font-weight: 800. */
  --nonap-font-display: "Bricolage Grotesque", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --bir-font-extreme: "Bricolage Grotesque", "Inter", -apple-system, sans-serif;
  --bir-font-sub: "Bricolage Grotesque", "Inter", sans-serif;
  --bir-font-lockup: "Bricolage Grotesque", "Inter", sans-serif;
  --bir-font-editorial: "Instrument Serif", Georgia, serif;
  --bir-font-data: "DM Sans", "Inter", sans-serif;
  --bir-font-mono: "Bricolage Grotesque", "Inter", sans-serif;

  /* ---------- Paleta do evento — 6 cores-base nomeadas ---------- */
  --bir-mata: #0F5132;          /* verde Tijuca · primária · marca */
  --bir-mata-deep: #083522;
  --bir-mata-soft: #1E7A4A;
  --bir-mata-pale: #E5F1EB;

  --bir-ceu: #2A6FDB;           /* azul soro · secundária · dado, info técnica */
  --bir-ceu-deep: #1B4FA8;
  --bir-ceu-soft: #5B91E8;
  --bir-ceu-pale: #E9F0FB;

  --bir-sol: #F7B538;           /* amarelo cal · acento solar · grifa, complementa */
  --bir-sol-deep: #C8902A;
  --bir-sol-soft: #FBCC6B;
  --bir-sol-pale: #FEF5E1;

  --bir-chao: #F25C54;          /* coral carioca · secundária · calor, badge */
  --bir-chao-deep: #C73E37;
  --bir-chao-soft: #F78A84;
  --bir-chao-pale: #FDE9E7;

  --bir-voltagem: #4A1F7A;      /* alias retrocompatível — nome oficial é Açaí */
  --bir-voltagem-deep: #2E1250;
  --bir-voltagem-soft: #7045A8;
  --bir-voltagem-pale: #ECE3F5;

  /* Nome oficial do doc Bloco Tropical — Açaí é PRIMÁRIA · MARCA */
  --bir-acai: #4A1F7A;
  --bir-acai-deep: #2E1250;
  --bir-acai-soft: #7045A8;
  --bir-acai-pale: #ECE3F5;

  /* Coral é ACCENT · CTA · PULSO (chamado antes erroneamente de "Chão") */
  --bir-coral: var(--bir-chao);
  --bir-coral-deep: var(--bir-chao-deep);
  --bir-coral-soft: var(--bir-chao-soft);
  --bir-coral-pale: var(--bir-chao-pale);

  --bir-cal: #FBF6EE;           /* bege quente · FUNDO · NEUTRA */
  --bir-cal-deep: #EBE0CD;

  --bir-ink: #0E0E0E;           /* "tinta" — cor de texto base do doc Bloco Tropical (não está na paleta de 6 cores, mas é a cor de tipografia) */

  /* ---------- Tokens semânticos do evento ---------- */
  --bir-surface-event: var(--bir-cal);          /* fundo cerimonial do bloco do evento */
  --bir-surface-event-dark: var(--bir-mata);    /* fundo institucional */
  --bir-text-on-event: var(--bir-ink);
  --bir-text-on-dark: var(--bir-cal);
  --bir-accent-cta: var(--bir-chao);            /* call-to-action do evento */
  --bir-accent-grif: var(--bir-sol);            /* grifo/destaque */
  --bir-accent-pop: var(--bir-voltagem);        /* choque pop, usar com parcimônia */
}

/* ============================================================================
   1. RESET + BASE
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--nonap-font-body);
  font-size: var(--nonap-size-regular);
  line-height: var(--nonap-leading-normal);
  color: var(--nonap-text-primary);
  background: var(--nonap-white);
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
button { font-family: inherit; border: none; background: transparent; cursor: pointer; }

/* ============================================================================
   2. TYPOGRAPHY
   ============================================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--nonap-font-heading);
  font-weight: var(--nonap-weight-regular);
  letter-spacing: var(--nonap-tracking-tight);
  line-height: var(--nonap-leading-tight);
  color: var(--nonap-text-primary);
}

h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2.5rem); }
h4 { font-size: clamp(1.25rem, 2.5vw, 2rem); }
h5 { font-size: clamp(1.125rem, 2vw, 1.75rem); }
h6 { font-size: clamp(1rem, 1.5vw, 1.5rem); }

p { line-height: var(--nonap-leading-normal); }

.eyebrow {
  font-family: var(--bir-font-mono);
  font-size: var(--nonap-size-tiny);
  font-weight: var(--nonap-weight-medium);
  letter-spacing: var(--nonap-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--nonap-text-tertiary);
}

.lead {
  font-size: var(--nonap-size-large);
  line-height: var(--nonap-leading-normal);
  color: var(--nonap-text-secondary);
}

.display {
  font-family: var(--nonap-font-display);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.display-extreme {
  font-family: var(--bir-font-extreme);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.9;
  text-transform: uppercase;
}

.editorial-italic {
  font-family: var(--bir-font-editorial);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ============================================================================
   3. LAYOUT
   ============================================================================ */

.container { width: 100%; max-width: var(--nonap-container-xl); margin: 0 auto; padding: 0 var(--nonap-space-6); }
.container-md { max-width: var(--nonap-container-md); margin: 0 auto; padding: 0 var(--nonap-space-6); }

section { padding: var(--nonap-space-20) 0; }
section + section { border-top: 1px solid var(--nonap-stroke-tertiary); }

.section-head { margin-bottom: var(--nonap-space-12); display: flex; flex-direction: column; gap: var(--nonap-space-3); }

/* ============================================================================
   4. HEADER + FOOTER
   ============================================================================ */

.site-header {
  position: sticky; top: 0; z-index: var(--nonap-z-sticky);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--nonap-stroke-secondary);
}

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--nonap-space-4) var(--nonap-space-6);
  max-width: var(--nonap-container-xl); margin: 0 auto;
}

.brand {
  display: flex; align-items: center; gap: var(--nonap-space-3);
  font-family: var(--bir-font-mono);
  font-size: var(--nonap-size-small);
  letter-spacing: var(--nonap-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--nonap-text-primary);
}

.brand__mark {
  width: 24px; height: 24px; border-radius: var(--nonap-radius-sm);
  background: var(--bir-mata); display: grid; place-items: center;
  color: var(--nonap-white);
  font-family: var(--bir-font-lockup);
  font-size: 11px; letter-spacing: 0;
}

.brand__divider { color: var(--nonap-text-tertiary); font-weight: var(--nonap-weight-regular); }
.brand__client { color: var(--nonap-text-secondary); }

.site-nav { display: flex; gap: var(--nonap-space-6); font-size: var(--nonap-size-small); }
.site-nav a { color: var(--nonap-text-secondary); transition: color var(--nonap-duration-default) var(--nonap-ease-default); }
.site-nav a:hover { color: var(--nonap-text-primary); }
.site-nav a.is-current { color: var(--nonap-text-primary); font-weight: var(--nonap-weight-medium); }

@media (max-width: 720px) {
  .site-header__inner { flex-direction: column; gap: var(--nonap-space-3); align-items: flex-start; }
  .site-nav { gap: var(--nonap-space-4); flex-wrap: wrap; }
}

.site-footer {
  background: var(--nonap-surface-inverted);
  color: var(--nonap-text-inverted-secondary);
  padding: var(--nonap-space-20) 0 var(--nonap-space-8);
  margin-top: var(--nonap-space-32);
}

.site-footer .container {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--nonap-space-16); align-items: start;
}

.site-footer h6 { color: var(--nonap-text-inverted-primary); margin-bottom: var(--nonap-space-4); font-family: var(--nonap-font-heading); }
.site-footer p { color: var(--nonap-text-inverted-tertiary); font-size: var(--nonap-size-small); line-height: var(--nonap-leading-normal); }

.site-footer__bottom {
  max-width: var(--nonap-container-xl); margin: var(--nonap-space-16) auto 0;
  padding: var(--nonap-space-6) var(--nonap-space-6) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; justify-content: space-between;
  font-family: var(--bir-font-mono);
  font-size: var(--nonap-size-tiny);
  color: var(--nonap-text-inverted-tertiary);
  letter-spacing: var(--nonap-tracking-eyebrow);
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .site-footer .container { grid-template-columns: 1fr; gap: var(--nonap-space-10); }
  .site-footer__bottom { flex-direction: column; gap: var(--nonap-space-3); }
}

/* ============================================================================
   5. HERO
   ============================================================================ */

.hero { padding: var(--nonap-space-32) 0 var(--nonap-space-24); background: var(--nonap-white); }
.hero__eyebrow { margin-bottom: var(--nonap-space-6); }
.hero h1 { margin-bottom: var(--nonap-space-6); max-width: 18ch; }
.hero .lead { max-width: 60ch; margin-bottom: var(--nonap-space-10); }
.hero__meta {
  display: flex; gap: var(--nonap-space-10); flex-wrap: wrap;
  padding-top: var(--nonap-space-8); border-top: 1px solid var(--nonap-stroke-secondary);
}
.hero__meta-item .label {
  display: block; font-family: var(--bir-font-mono);
  font-size: var(--nonap-size-tiny); letter-spacing: var(--nonap-tracking-eyebrow);
  text-transform: uppercase; color: var(--nonap-text-tertiary);
  margin-bottom: var(--nonap-space-2);
}
.hero__meta-item .value {
  font-size: var(--nonap-size-medium); color: var(--nonap-text-primary);
  font-weight: var(--nonap-weight-medium);
}

/* Faixa de blocos coloridos no topo — referência direta ao Bloco Tropical */
.bir-stripe {
  display: grid; grid-template-columns: repeat(6, 1fr);
  height: 8px; width: 100%;
}
.bir-stripe > span { display: block; }
.bir-stripe__mata { background: var(--bir-mata); }
.bir-stripe__ceu { background: var(--bir-ceu); }
.bir-stripe__sol { background: var(--bir-sol); }
.bir-stripe__chao { background: var(--bir-chao); }
.bir-stripe__voltagem { background: var(--bir-voltagem); }
.bir-stripe__cal { background: var(--bir-cal-deep); }

/* ============================================================================
   6. TIMELINE — fases (home)
   ============================================================================ */

.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--nonap-space-6); }
@media (max-width: 1024px) { .timeline { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .timeline { grid-template-columns: 1fr; } }

.phase-card {
  display: flex; flex-direction: column;
  background: var(--nonap-white);
  border: 1px solid var(--nonap-stroke-primary);
  border-radius: var(--nonap-radius-lg);
  padding: var(--nonap-space-8);
  transition: var(--nonap-transition-cerimonial);
  position: relative; min-height: 340px;
  overflow: hidden;
}

.phase-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--bir-mata);
}
.phase-card[data-status="ready"]::before { background: var(--bir-chao); }
.phase-card[data-status="next"]::before { background: var(--bir-sol); }
.phase-card[data-status="locked"]::before { background: var(--nonap-neutral-300); }

.phase-card:hover { transform: translateY(-2px); box-shadow: var(--nonap-shadow-lg); border-color: var(--nonap-stroke-strong); }

.phase-card[data-status="locked"] { background: var(--nonap-surface-page); opacity: 0.7; pointer-events: none; }
.phase-card[data-status="locked"]:hover { transform: none; box-shadow: none; }

.phase-card[data-status="ready"] { background: var(--bir-cal); border-color: transparent; }

.phase-card__number {
  font-family: var(--bir-font-mono); font-size: var(--nonap-size-tiny);
  letter-spacing: var(--nonap-tracking-eyebrow); text-transform: uppercase;
  color: var(--nonap-text-tertiary); margin-bottom: var(--nonap-space-4);
}

.phase-card__title {
  font-size: var(--nonap-size-h5); margin-bottom: var(--nonap-space-3);
  line-height: var(--nonap-leading-tight);
}

.phase-card__desc {
  font-size: var(--nonap-size-small); color: var(--nonap-text-secondary);
  line-height: var(--nonap-leading-normal); margin-bottom: var(--nonap-space-8); flex: 1;
}

.phase-card__status {
  display: inline-flex; align-items: center; gap: var(--nonap-space-2);
  font-family: var(--bir-font-mono); font-size: var(--nonap-size-tiny);
  letter-spacing: var(--nonap-tracking-eyebrow); text-transform: uppercase;
  margin-top: auto;
}

.status-dot { width: 8px; height: 8px; border-radius: var(--nonap-radius-full); }
.status-dot[data-status="ready"] { background: var(--bir-chao); }
.status-dot[data-status="next"] { background: var(--bir-sol); }
.status-dot[data-status="locked"] { background: var(--nonap-neutral-300); }

/* ============================================================================
   7. BUTTONS
   ============================================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--nonap-space-2);
  padding: var(--nonap-space-3) var(--nonap-space-6);
  font-size: var(--nonap-size-small); font-weight: var(--nonap-weight-medium);
  border-radius: var(--nonap-radius-pill);
  transition: var(--nonap-transition-default);
  white-space: nowrap;
}

.btn--primary { background: var(--bir-ink); color: var(--nonap-white); }
.btn--primary:hover { background: var(--nonap-base-ink-hover); }

.btn--ghost { background: transparent; color: var(--nonap-text-primary); box-shadow: var(--nonap-ring-default); }
.btn--ghost:hover { box-shadow: var(--nonap-ring-strong); }

.btn--rosa { background: var(--nonap-base-rosa); color: var(--nonap-white); }
.btn--rosa:hover { background: var(--nonap-base-rosa-hover); }

.btn--chao { background: var(--bir-chao); color: var(--nonap-white); }
.btn--chao:hover { background: var(--bir-chao-deep); }

/* ============================================================================
   8. BREADCRUMB
   ============================================================================ */

.breadcrumb {
  display: flex; align-items: center; gap: var(--nonap-space-2);
  font-family: var(--bir-font-mono); font-size: var(--nonap-size-tiny);
  letter-spacing: var(--nonap-tracking-eyebrow); text-transform: uppercase;
  color: var(--nonap-text-tertiary); margin-bottom: var(--nonap-space-10);
}
.breadcrumb a:hover { color: var(--nonap-text-primary); }
.breadcrumb__sep { color: var(--nonap-text-tertiary); }

/* ============================================================================
   9. CONTENT BLOCKS
   ============================================================================ */

.content-block {
  display: grid; grid-template-columns: 280px 1fr;
  gap: var(--nonap-space-12); align-items: start;
}
@media (max-width: 900px) { .content-block { grid-template-columns: 1fr; gap: var(--nonap-space-6); } }

.content-block__head .eyebrow { margin-bottom: var(--nonap-space-2); }
.content-block__head h3 { font-size: var(--nonap-size-h4); line-height: var(--nonap-leading-tight); }

.content-block__body p + p { margin-top: var(--nonap-space-4); }
.content-block__body p { color: var(--nonap-text-secondary); font-size: var(--nonap-size-medium); line-height: var(--nonap-leading-normal); }
.content-block__body strong { color: var(--nonap-text-primary); font-weight: var(--nonap-weight-semibold); }
.content-block__body em { font-style: italic; color: var(--nonap-text-primary); }

.content-block__body ul, .content-block__body ol { margin: var(--nonap-space-4) 0; padding-left: var(--nonap-space-5); }
.content-block__body ul li, .content-block__body ol li {
  position: relative; padding-left: var(--nonap-space-3);
  margin-bottom: var(--nonap-space-2);
  color: var(--nonap-text-secondary);
  font-size: var(--nonap-size-medium); line-height: var(--nonap-leading-normal);
}
.content-block__body ul li::before {
  content: "—"; position: absolute; left: calc(-1 * var(--nonap-space-5));
  color: var(--bir-chao);
}
.content-block__body ol { list-style: decimal; }
.content-block__body ol li::marker { color: var(--bir-chao); font-family: var(--bir-font-mono); }

/* ============================================================================
   10. GRIDS + VALUE / COMPETITOR / LOGO CARDS
   ============================================================================ */

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nonap-space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--nonap-space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--nonap-space-6); }
.grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--nonap-space-3); }
@media (max-width: 900px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .grid-6 { grid-template-columns: repeat(3, 1fr); } }

.value-card {
  background: var(--nonap-white);
  border: 1px solid var(--nonap-stroke-primary);
  border-radius: var(--nonap-radius-md);
  padding: var(--nonap-space-6);
}
.value-card .eyebrow { margin-bottom: var(--nonap-space-3); color: var(--bir-chao); }
.value-card h4 { font-size: var(--nonap-size-h5); margin-bottom: var(--nonap-space-2); }
.value-card p { font-size: var(--nonap-size-regular); color: var(--nonap-text-secondary); }

.competitor-card {
  background: var(--nonap-white);
  border: 1px solid var(--nonap-stroke-primary);
  border-radius: var(--nonap-radius-md);
  padding: var(--nonap-space-6);
  display: flex; flex-direction: column; gap: var(--nonap-space-3);
}
.competitor-card__head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: var(--nonap-space-3);
  border-bottom: 1px solid var(--nonap-stroke-secondary);
  margin-bottom: var(--nonap-space-2);
}
.competitor-card__name { font-weight: var(--nonap-weight-semibold); font-size: var(--nonap-size-large); }
.competitor-card__type { font-family: var(--bir-font-mono); font-size: var(--nonap-size-tiny); letter-spacing: var(--nonap-tracking-eyebrow); text-transform: uppercase; color: var(--nonap-text-tertiary); }
.competitor-card dl { display: grid; gap: var(--nonap-space-2); }
.competitor-card dt { font-family: var(--bir-font-mono); font-size: var(--nonap-size-tiny); letter-spacing: var(--nonap-tracking-eyebrow); text-transform: uppercase; color: var(--nonap-text-tertiary); margin-bottom: var(--nonap-space-1); }
.competitor-card dd { color: var(--nonap-text-secondary); font-size: var(--nonap-size-small); line-height: var(--nonap-leading-normal); margin-bottom: var(--nonap-space-2); }

/* ============================================================================
   11. CALLOUT / PULLQUOTE
   ============================================================================ */

.callout {
  background: var(--bir-cal);
  padding: var(--nonap-space-10) var(--nonap-space-8);
  border-radius: var(--nonap-radius-lg);
  margin: var(--nonap-space-10) 0;
  border-left: 4px solid var(--bir-chao);
}
.callout .eyebrow { margin-bottom: var(--nonap-space-3); }
.callout p { font-size: var(--nonap-size-large); color: var(--nonap-text-primary); line-height: var(--nonap-leading-normal); }

.pullquote {
  font-family: var(--bir-font-editorial);
  font-style: italic;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--nonap-text-primary);
  padding: var(--nonap-space-10) 0;
  border-top: 1px solid var(--nonap-stroke-secondary);
  border-bottom: 1px solid var(--nonap-stroke-secondary);
  margin: var(--nonap-space-12) 0;
}
.pullquote::before {
  content: "—"; display: block; color: var(--bir-chao);
  margin-bottom: var(--nonap-space-3); font-family: var(--bir-font-mono);
  font-style: normal;
}

/* ============================================================================
   12. BLOCO TROPICAL — design system components
   ============================================================================ */

/* ---- 12.1 SWATCH-CARD — paleta cromática ---- */
.swatch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--nonap-space-6); }
@media (max-width: 900px) { .swatch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .swatch-grid { grid-template-columns: 1fr; } }

.swatch-card {
  display: flex; flex-direction: column;
  border-radius: var(--nonap-radius-md);
  overflow: hidden;
  border: 1px solid var(--nonap-stroke-primary);
  background: var(--nonap-white);
}

.swatch-card__color {
  aspect-ratio: 4 / 3;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--nonap-space-5);
}

.swatch-card__role {
  font-family: var(--bir-font-mono); font-size: var(--nonap-size-tiny);
  letter-spacing: var(--nonap-tracking-eyebrow); text-transform: uppercase;
  opacity: 0.78;
}

.swatch-card__name {
  font-family: var(--bir-font-extreme);
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.02em; line-height: 1; text-transform: uppercase;
}

.swatch-card__meta {
  padding: var(--nonap-space-4) var(--nonap-space-5);
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--nonap-stroke-secondary);
  font-family: var(--bir-font-mono); font-size: var(--nonap-size-tiny);
  letter-spacing: var(--nonap-tracking-eyebrow); text-transform: uppercase;
  color: var(--nonap-text-tertiary);
}

.swatch-card__hex { color: var(--nonap-text-primary); font-weight: var(--nonap-weight-medium); }

/* tipos cromáticos por classe */
.swatch--mata    { background: var(--bir-mata); color: var(--bir-cal); }
.swatch--ceu     { background: var(--bir-ceu); color: var(--bir-cal); }
.swatch--sol     { background: var(--bir-sol); color: var(--bir-ink); }
.swatch--chao    { background: var(--bir-chao); color: var(--bir-cal); }
.swatch--voltagem{ background: var(--bir-voltagem); color: var(--bir-cal); }
.swatch--cal     { background: var(--bir-cal); color: var(--bir-ink); }
.swatch--ink     { background: var(--bir-ink); color: var(--bir-cal); }

/* ---- 12.2 TYPE-SPEC — amostra de tipografia ---- */
.type-spec {
  background: var(--nonap-white);
  border: 1px solid var(--nonap-stroke-primary);
  border-radius: var(--nonap-radius-md);
  padding: var(--nonap-space-8);
  display: flex; flex-direction: column; gap: var(--nonap-space-4);
}

.type-spec__role {
  font-family: var(--bir-font-mono); font-size: var(--nonap-size-tiny);
  letter-spacing: var(--nonap-tracking-eyebrow); text-transform: uppercase;
  color: var(--bir-chao);
}

.type-spec__sample {
  font-size: clamp(2.5rem, 5vw, 4rem); line-height: 0.95;
  color: var(--nonap-text-primary);
}

.type-spec__sample--sub { font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.1; }

.type-spec__meta {
  display: flex; flex-wrap: wrap; gap: var(--nonap-space-4);
  padding-top: var(--nonap-space-4);
  border-top: 1px solid var(--nonap-stroke-secondary);
  font-family: var(--bir-font-mono); font-size: var(--nonap-size-tiny);
  letter-spacing: var(--nonap-tracking-eyebrow); text-transform: uppercase;
  color: var(--nonap-text-tertiary);
}

.type-spec__meta strong { color: var(--nonap-text-primary); font-weight: var(--nonap-weight-medium); }

/* fontes nas amostras */
.font-extreme   { font-family: var(--bir-font-extreme); font-weight: 400; }
.font-display   { font-family: var(--nonap-font-display); font-weight: 800; letter-spacing: -0.04em; }
.font-sub       { font-family: var(--bir-font-sub); font-weight: 700; }
.font-lockup    { font-family: var(--bir-font-lockup); font-weight: 400; letter-spacing: -0.02em; }
.font-editorial { font-family: var(--bir-font-editorial); font-style: italic; }
.font-data      { font-family: var(--bir-font-data); }
.font-mono      { font-family: var(--bir-font-mono); }

/* ---- 12.3 LOGO-CARD — variações de nome ---- */
.logo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--nonap-space-6); }
@media (max-width: 900px) { .logo-grid { grid-template-columns: 1fr; } }

.logo-card {
  background: var(--nonap-white);
  border: 1px solid var(--nonap-stroke-primary);
  border-radius: var(--nonap-radius-md);
  overflow: hidden;
  display: flex; flex-direction: column;
}

.logo-card[data-tone="cal"] .logo-card__lockup { background: var(--bir-cal); color: var(--bir-ink); }
.logo-card[data-tone="mata"] .logo-card__lockup { background: var(--bir-mata); color: var(--bir-cal); }
.logo-card[data-tone="ink"] .logo-card__lockup { background: var(--bir-ink); color: var(--bir-cal); }
.logo-card[data-tone="sol"] .logo-card__lockup { background: var(--bir-sol); color: var(--bir-ink); }
.logo-card[data-tone="chao"] .logo-card__lockup { background: var(--bir-chao); color: var(--bir-cal); }
.logo-card[data-tone="voltagem"] .logo-card__lockup { background: var(--bir-voltagem); color: var(--bir-cal); }

.logo-card__lockup {
  aspect-ratio: 5 / 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--nonap-space-2);
  padding: var(--nonap-space-8);
  position: relative;
}

.logo-card__name {
  font-family: var(--bir-font-extreme);
  font-size: clamp(2rem, 5vw, 3.75rem);
  line-height: 0.9; letter-spacing: -0.03em;
  text-transform: uppercase; text-align: center;
}

.logo-card__year {
  font-family: var(--bir-font-mono);
  font-size: var(--nonap-size-tiny);
  letter-spacing: 0.18em;
  opacity: 0.78;
}

.logo-card__mono {
  position: absolute; top: var(--nonap-space-4); right: var(--nonap-space-4);
  font-family: var(--bir-font-lockup);
  font-size: var(--nonap-size-small); letter-spacing: 0.08em;
  padding: 4px 8px; border: 1px solid currentColor; border-radius: var(--nonap-radius-sm);
  opacity: 0.78;
}

.logo-card__body {
  padding: var(--nonap-space-5) var(--nonap-space-6);
  display: flex; flex-direction: column; gap: var(--nonap-space-2);
}

.logo-card__variant {
  font-family: var(--bir-font-mono); font-size: var(--nonap-size-tiny);
  letter-spacing: var(--nonap-tracking-eyebrow); text-transform: uppercase;
  color: var(--bir-chao);
}

.logo-card__pitch { color: var(--nonap-text-secondary); font-size: var(--nonap-size-small); line-height: var(--nonap-leading-normal); }

/* variações tipográficas dentro do lockup */
.logo-card__lockup--stack { flex-direction: column; }
.logo-card__lockup--inline { flex-direction: row; align-items: baseline; gap: var(--nonap-space-3); }
.logo-card__lockup--inline .logo-card__year { font-size: clamp(1.25rem, 2.5vw, 2rem); opacity: 1; font-family: var(--bir-font-mono); letter-spacing: -0.02em; }
.logo-card__lockup--sigla .logo-card__name { font-size: clamp(3rem, 8vw, 6rem); letter-spacing: 0.02em; }

/* ---- 12.4 PRINCIPLE-CARD — princípios visuais ---- */
.principle-card {
  padding: var(--nonap-space-6);
  border-radius: var(--nonap-radius-md);
  background: var(--bir-cal);
  border: 1px solid transparent;
  display: flex; flex-direction: column; gap: var(--nonap-space-3);
  min-height: 200px;
}
.principle-card__num {
  font-family: var(--bir-font-mono);
  font-size: var(--nonap-size-tiny);
  letter-spacing: var(--nonap-tracking-eyebrow);
  color: var(--bir-chao);
}
.principle-card h4 {
  font-family: var(--nonap-font-display);
  font-weight: 800;
  font-size: var(--nonap-size-h5);
  line-height: 1;
  letter-spacing: -0.03em;
}
.principle-card p { font-size: var(--nonap-size-small); color: var(--nonap-text-secondary); line-height: var(--nonap-leading-normal); }

/* ---- 12.5 PATTERN-BLOCKS — grafismo "compasso de bloco" ---- */
.pattern-blocks {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 6px; margin: var(--nonap-space-10) 0;
}
.pattern-blocks > div { aspect-ratio: 1 / 1; border-radius: 2px; }
.pattern-blocks > div:nth-child(1) { background: var(--bir-mata); }
.pattern-blocks > div:nth-child(2) { background: var(--bir-ceu); }
.pattern-blocks > div:nth-child(3) { background: var(--bir-sol); }
.pattern-blocks > div:nth-child(4) { background: var(--bir-chao); }
.pattern-blocks > div:nth-child(5) { background: var(--bir-voltagem); }

/* ---- 12.6 COMBINATION TABLE — regras de combinação cromática ---- */
.combo-table {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--nonap-space-4);
}
@media (max-width: 720px) { .combo-table { grid-template-columns: 1fr; } }

.combo-row {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  border-radius: var(--nonap-radius-sm); overflow: hidden;
  border: 1px solid var(--nonap-stroke-primary);
}
.combo-row__sample {
  padding: var(--nonap-space-5);
  display: flex; flex-direction: column; gap: var(--nonap-space-2);
  font-family: var(--bir-font-extreme); text-transform: uppercase; line-height: 0.95;
}
.combo-row__sample-eyebrow {
  font-family: var(--bir-font-mono);
  font-size: var(--nonap-size-tiny); letter-spacing: var(--nonap-tracking-eyebrow);
  text-transform: uppercase; opacity: 0.8; font-weight: 400;
}
.combo-row__sample-text { font-size: clamp(1.5rem, 2.5vw, 2.25rem); }
.combo-row__caption {
  padding: var(--nonap-space-5); background: var(--nonap-white);
  display: flex; flex-direction: column; gap: var(--nonap-space-2);
  font-size: var(--nonap-size-small); color: var(--nonap-text-secondary); line-height: var(--nonap-leading-normal);
}
.combo-row__caption strong { color: var(--nonap-text-primary); font-weight: var(--nonap-weight-semibold); font-family: var(--bir-font-mono); font-size: var(--nonap-size-tiny); letter-spacing: var(--nonap-tracking-eyebrow); text-transform: uppercase; }

/* ---- 12.7 GRAFISMO SVG inline — círculos concêntricos / microscópio ---- */
.bir-icon {
  width: 56px; height: 56px;
  display: inline-block; flex-shrink: 0;
}

/* ============================================================================
   13. APPROVAL BLOCK
   ============================================================================ */

.approval {
  background: var(--bir-ink);
  color: var(--bir-cal);
  border-radius: var(--nonap-radius-xl);
  padding: var(--nonap-space-16) var(--nonap-space-12);
  text-align: center;
  margin-top: var(--nonap-space-20);
  position: relative; overflow: hidden;
}

.approval::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(
    to right,
    var(--bir-mata) 0% 16.66%,
    var(--bir-ceu) 16.66% 33.33%,
    var(--bir-sol) 33.33% 50%,
    var(--bir-chao) 50% 66.66%,
    var(--bir-voltagem) 66.66% 83.33%,
    var(--bir-cal-deep) 83.33% 100%
  );
}

.approval h3 { color: var(--bir-cal); margin-bottom: var(--nonap-space-4); font-family: var(--nonap-font-display); font-weight: 800; }
.approval p { color: rgba(251, 246, 238, 0.78); max-width: 50ch; margin: 0 auto var(--nonap-space-8); font-size: var(--nonap-size-medium); }
.approval .btn--ghost { color: var(--bir-cal); box-shadow: 0 0 0 1px rgba(251, 246, 238, 0.24) inset; }
.approval .btn--ghost:hover { box-shadow: 0 0 0 1px rgba(251, 246, 238, 0.5) inset; }
.approval__actions { display: inline-flex; gap: var(--nonap-space-3); flex-wrap: wrap; justify-content: center; }

/* ============================================================================
   14. LOCKED PAGE (em breve)
   ============================================================================ */

.locked-hero {
  min-height: 70vh; display: grid; place-items: center; text-align: center;
  padding: var(--nonap-space-20) var(--nonap-space-6);
  background: var(--bir-cal);
}
.locked-hero h1 { max-width: 22ch; margin: 0 auto var(--nonap-space-6); font-family: var(--nonap-font-display); font-weight: 800; }
.locked-hero .lead { max-width: 55ch; margin: 0 auto var(--nonap-space-10); }
.locked-hero__date {
  display: inline-flex; align-items: center; gap: var(--nonap-space-2);
  padding: var(--nonap-space-2) var(--nonap-space-4);
  background: var(--nonap-white); border-radius: var(--nonap-radius-pill);
  font-family: var(--bir-font-mono); font-size: var(--nonap-size-tiny);
  letter-spacing: var(--nonap-tracking-eyebrow); text-transform: uppercase;
}

/* ============================================================================
   15. UTILITIES
   ============================================================================ */

.text-center { text-align: center; }
.flex { display: flex; }
.gap-3 { gap: var(--nonap-space-3); }
.gap-6 { gap: var(--nonap-space-6); }
.rosa { color: var(--bir-chao); }
.muted { color: var(--nonap-text-tertiary); }
.mt-8 { margin-top: var(--nonap-space-8); }
.mt-12 { margin-top: var(--nonap-space-12); }
.mt-16 { margin-top: var(--nonap-space-16); }

/* ============================================================================
   16. PADRONAGENS BLOCO TROPICAL — patterns ricos
   Cinco padrões pra carregar a presença visual do conceito.
   Aplicar como background de section, divisor entre blocos, decoração de hero.
   ============================================================================ */

/* ---- 16.1 PATTERN-STRIPES-V — listras verticais multicor ---- */
.pattern-stripes-v {
  height: 320px;
  background: repeating-linear-gradient(
    to right,
    var(--bir-mata) 0 40px,
    var(--bir-ceu) 40px 80px,
    var(--bir-sol) 80px 120px,
    var(--bir-chao) 120px 160px,
    var(--bir-voltagem) 160px 200px,
    var(--bir-cal) 200px 240px
  );
  border-radius: var(--nonap-radius-md);
  position: relative;
  overflow: hidden;
}
.pattern-stripes-v::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to right,
    rgba(10,10,10,0) 0 39px,
    rgba(10,10,10,0.08) 39px 40px
  );
}
.pattern-stripes-v--thin {
  height: 180px;
}
.pattern-stripes-v--thin {
  background: repeating-linear-gradient(
    to right,
    var(--bir-mata) 0 16px,
    var(--bir-ceu) 16px 32px,
    var(--bir-sol) 32px 48px,
    var(--bir-chao) 48px 64px,
    var(--bir-voltagem) 64px 80px,
    var(--bir-cal-deep) 80px 96px
  );
}

/* ---- 16.2 PATTERN-GRID — grade modular de blocos com paleta intercalada ---- */
.pattern-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 6px;
  aspect-ratio: 2 / 1;
  border-radius: var(--nonap-radius-md);
  overflow: hidden;
  background: var(--bir-ink);
  padding: 6px;
}
.pattern-grid > div { border-radius: 2px; }
.pattern-grid > div:nth-child(8n+1) { background: var(--bir-mata); }
.pattern-grid > div:nth-child(8n+2) { background: var(--bir-cal); }
.pattern-grid > div:nth-child(8n+3) { background: var(--bir-ceu); }
.pattern-grid > div:nth-child(8n+4) { background: var(--bir-sol); }
.pattern-grid > div:nth-child(8n+5) { background: var(--bir-chao); }
.pattern-grid > div:nth-child(8n+6) { background: var(--bir-mata); }
.pattern-grid > div:nth-child(8n+7) { background: var(--bir-voltagem); }
.pattern-grid > div:nth-child(8n+8) { background: var(--bir-cal); }

/* ---- 16.3 PATTERN-STACK — blocos empilhados sobrepostos (passaporte feel) ---- */
.pattern-stack {
  position: relative;
  aspect-ratio: 5 / 4;
  background: var(--bir-cal);
  border-radius: var(--nonap-radius-md);
  overflow: hidden;
}
.pattern-stack::before,
.pattern-stack::after {
  content: ""; position: absolute;
  border-radius: 4px;
}
.pattern-stack::before {
  inset: 12% 18% 18% 12%;
  background: var(--bir-mata);
  transform: rotate(-3deg);
}
.pattern-stack::after {
  inset: 20% 12% 12% 22%;
  background: var(--bir-chao);
  transform: rotate(4deg);
}
.pattern-stack__top {
  position: absolute; inset: 24% 24% 24% 24%;
  background: var(--bir-sol);
  border-radius: 4px;
  display: grid; place-items: center;
  font-family: var(--bir-font-extreme);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--bir-mata);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  z-index: 2;
}

/* ---- 16.4 PATTERN-CIRCLES — malha de círculos concêntricos (microscópio) ---- */
.pattern-circles {
  aspect-ratio: 2 / 1;
  background:
    radial-gradient(circle at 12.5% 50%, var(--bir-sol) 6%, transparent 6.5%),
    radial-gradient(circle at 12.5% 50%, transparent 12%, var(--bir-mata) 12.5%, var(--bir-mata) 14%, transparent 14.5%),
    radial-gradient(circle at 12.5% 50%, transparent 19%, var(--bir-ceu) 19.5%, var(--bir-ceu) 21%, transparent 21.5%),
    radial-gradient(circle at 37.5% 50%, var(--bir-chao) 6%, transparent 6.5%),
    radial-gradient(circle at 37.5% 50%, transparent 12%, var(--bir-mata) 12.5%, var(--bir-mata) 14%, transparent 14.5%),
    radial-gradient(circle at 37.5% 50%, transparent 19%, var(--bir-voltagem) 19.5%, var(--bir-voltagem) 21%, transparent 21.5%),
    radial-gradient(circle at 62.5% 50%, var(--bir-voltagem) 6%, transparent 6.5%),
    radial-gradient(circle at 62.5% 50%, transparent 12%, var(--bir-chao) 12.5%, var(--bir-chao) 14%, transparent 14.5%),
    radial-gradient(circle at 62.5% 50%, transparent 19%, var(--bir-mata) 19.5%, var(--bir-mata) 21%, transparent 21.5%),
    radial-gradient(circle at 87.5% 50%, var(--bir-mata) 6%, transparent 6.5%),
    radial-gradient(circle at 87.5% 50%, transparent 12%, var(--bir-sol) 12.5%, var(--bir-sol) 14%, transparent 14.5%),
    radial-gradient(circle at 87.5% 50%, transparent 19%, var(--bir-ceu) 19.5%, var(--bir-ceu) 21%, transparent 21.5%),
    var(--bir-cal);
  border-radius: var(--nonap-radius-md);
}

/* ---- 16.5 PATTERN-PASSPORT — composição "carimbo de passaporte" ---- */
.pattern-passport {
  background: var(--bir-cal);
  border-radius: var(--nonap-radius-md);
  padding: var(--nonap-space-8);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: var(--nonap-space-3);
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
}
.pattern-passport::before {
  content: "RIO · BR · 2027";
  position: absolute;
  bottom: var(--nonap-space-3); right: var(--nonap-space-4);
  font-family: var(--bir-font-mono);
  font-size: var(--nonap-size-tiny);
  letter-spacing: 0.18em;
  color: var(--bir-mata);
  opacity: 0.6;
}
.pattern-passport__stamp {
  display: grid; place-items: center;
  font-family: var(--bir-font-extreme);
  text-transform: uppercase;
  font-size: clamp(0.75rem, 1.2vw, 1.125rem);
  letter-spacing: -0.01em;
  line-height: 0.95;
  text-align: center;
  padding: var(--nonap-space-2);
  border-radius: 2px;
  transform: rotate(-2deg);
}
.pattern-passport__stamp:nth-child(2n) { transform: rotate(3deg); }
.pattern-passport__stamp:nth-child(3n) { transform: rotate(-1deg); }
.pattern-passport__stamp--mata { background: var(--bir-mata); color: var(--bir-cal); }
.pattern-passport__stamp--ceu { background: var(--bir-ceu); color: var(--bir-cal); }
.pattern-passport__stamp--sol { background: var(--bir-sol); color: var(--bir-ink); }
.pattern-passport__stamp--chao { background: var(--bir-chao); color: var(--bir-cal); }
.pattern-passport__stamp--voltagem { background: var(--bir-voltagem); color: var(--bir-cal); }
.pattern-passport__stamp--outline {
  background: transparent;
  border: 2px solid var(--bir-mata);
  color: var(--bir-mata);
}

/* ============================================================================
   17. LOCKUPS — variações de marca BIOMED IN RIO
   Quatro lockups principais (do print de referência) + complementares.
   ============================================================================ */

.lockup-showcase {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--nonap-space-6);
}
@media (max-width: 900px) { .lockup-showcase { grid-template-columns: 1fr; } }

.lockup {
  background: var(--bir-ink);
  border-radius: var(--nonap-radius-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 360px;
}

.lockup__canvas {
  flex: 1;
  display: grid; place-items: center;
  padding: var(--nonap-space-10) var(--nonap-space-8);
  position: relative;
}

.lockup__body {
  padding: var(--nonap-space-5) var(--nonap-space-6);
  background: rgba(251, 246, 238, 0.04);
  border-top: 1px solid rgba(251, 246, 238, 0.08);
  display: flex; flex-direction: column; gap: var(--nonap-space-2);
}

.lockup__variant {
  font-family: var(--bir-font-mono);
  font-size: var(--nonap-size-tiny);
  letter-spacing: var(--nonap-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--bir-chao);
}

.lockup__pitch {
  color: rgba(251, 246, 238, 0.72);
  font-size: var(--nonap-size-small);
  line-height: var(--nonap-leading-normal);
}

/* ---- 17.1 LOCKUP BiR27 (dual-color, inline) ---- */
.lockup-bir27 {
  display: inline-flex; align-items: baseline;
  font-family: var(--bir-font-lockup);
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: 0.85; letter-spacing: -0.04em;
}
.lockup-bir27 .l-bir { color: var(--bir-voltagem); }
.lockup-bir27 .l-27 { color: var(--bir-sol); }
.lockup-bir27 .l-i { display: inline-block; position: relative; }

/* ---- 17.2 LOCKUP BiR / 2027 (stacked, mata + chão) ---- */
.lockup-bir2027 {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  font-family: var(--bir-font-lockup);
  letter-spacing: -0.04em;
  line-height: 0.85;
}
.lockup-bir2027 .l-bir {
  color: var(--bir-mata);
  font-size: clamp(3rem, 8vw, 6.5rem);
}
.lockup-bir2027 .l-year {
  color: var(--bir-chao);
  font-size: clamp(1.75rem, 5vw, 3.75rem);
  margin-top: -0.1em;
}

/* ---- 17.3 LOCKUP BiR-em-caixa + BIOMED IN RIO 27 ---- */
.lockup-boxed {
  display: inline-flex; flex-direction: column;
  align-items: flex-start; gap: var(--nonap-space-4);
}
.lockup-boxed__box {
  border: 3px solid var(--bir-ceu);
  padding: var(--nonap-space-3) var(--nonap-space-5);
  font-family: var(--bir-font-lockup);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 0.9; letter-spacing: -0.03em;
  color: var(--bir-mata);
  background: transparent;
  position: relative;
}
.lockup-boxed__caption {
  font-family: var(--bir-font-extreme);
  font-size: clamp(1.125rem, 2.2vw, 1.75rem);
  text-transform: uppercase;
  letter-spacing: -0.01em; line-height: 0.95;
  color: var(--bir-cal);
}

/* ---- 17.4 LOCKUP bloco Sol — BIO MED IN RIO 2027 ---- */
.lockup-bloco-sol {
  display: inline-flex; flex-direction: column;
  align-items: flex-start; gap: var(--nonap-space-4);
}
.lockup-bloco-sol__block {
  background: var(--bir-sol);
  padding: var(--nonap-space-4) var(--nonap-space-5);
  font-family: var(--bir-font-extreme);
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.02em;
  display: inline-flex; flex-direction: column;
  border-radius: 2px;
}
.lockup-bloco-sol__name {
  color: var(--bir-mata);
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
}
.lockup-bloco-sol__year {
  color: var(--bir-chao);
  font-size: clamp(1.25rem, 3vw, 2rem);
  margin-top: 4px;
}
.lockup-bloco-sol__caption {
  font-family: var(--bir-font-extreme);
  font-size: clamp(1rem, 2vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: -0.01em; line-height: 0.95;
  color: var(--bir-cal);
}

/* ---- 17.5 LOCKUP oficial completa (Cal background) ---- */
.lockup--oficial { background: var(--bir-cal); }
.lockup--oficial .lockup__body {
  background: rgba(10,10,10,0.04); border-color: rgba(10,10,10,0.08);
}
.lockup--oficial .lockup__variant { color: var(--bir-mata); }
.lockup--oficial .lockup__pitch { color: var(--nonap-text-secondary); }
.lockup-oficial {
  font-family: var(--bir-font-lockup);
  font-size: clamp(1.5rem, 4vw, 2.75rem);
  line-height: 0.95; letter-spacing: -0.03em;
  color: var(--bir-ink);
  text-align: center;
}
.lockup-oficial .l-italic { font-family: var(--bir-font-editorial); font-style: italic; font-weight: 400; color: var(--bir-chao); }

/* ---- 17.6 LOCKUP monograma BIR · 27 ---- */
.lockup--mono { background: var(--bir-mata); }
.lockup--mono .lockup__variant { color: var(--bir-sol); }
.lockup--mono .lockup__pitch { color: rgba(251,246,238,0.8); }
.lockup-mono {
  font-family: var(--bir-font-lockup);
  font-size: clamp(3.5rem, 9vw, 7rem);
  line-height: 0.85; letter-spacing: 0.04em;
  color: var(--bir-cal);
  text-align: center;
}
.lockup-mono .l-dot { color: var(--bir-sol); display: inline-block; margin: 0 0.15em; }

/* ============================================================================
   18. SISTEMA-BLOCO / AZULEJO — pattern principal do Bloco Tropical
   Grid modular de tiles. Cada tile tem cor de fundo + forma em cor de frente.
   Combinatorial: bg × shape × fg. Usado em backdrop, sidebar de Save the Date,
   composição de mosaico tropical-geométrico.
   ============================================================================ */

.azulejo {
  display: grid;
  grid-template-columns: repeat(var(--azulejo-cols, 4), 1fr);
  aspect-ratio: var(--azulejo-ratio, 1);
  background: var(--bir-cal);
  overflow: hidden;
  border-radius: var(--nonap-radius-md);
}

.azulejo--bleed { border-radius: 0; }

.tile {
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
}

/* fundos de tile */
.tile[data-bg="mata"]     { background: var(--bir-mata); }
.tile[data-bg="ceu"]      { background: var(--bir-ceu); }
.tile[data-bg="ceu-soft"] { background: var(--bir-ceu-soft); }
.tile[data-bg="sol"]      { background: var(--bir-sol); }
.tile[data-bg="sol-soft"] { background: var(--bir-sol-soft); }
.tile[data-bg="chao"]     { background: var(--bir-chao); }
.tile[data-bg="chao-soft"]{ background: var(--bir-chao-soft); }
.tile[data-bg="voltagem"] { background: var(--bir-voltagem); }
.tile[data-bg="cal"]      { background: var(--bir-cal); }
.tile[data-bg="ink"]      { background: var(--bir-ink); }

/* formas em ::before */
.tile::before {
  content: ""; position: absolute;
}

/* círculo central */
.tile[data-shape="circle"]::before {
  inset: 18%; border-radius: 50%;
}

/* semicírculo top */
.tile[data-shape="half-top"]::before {
  top: 0; left: 0; right: 0; height: 100%;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  clip-path: inset(0 0 50% 0);
}
.tile[data-shape="half-top"]::before { border-radius: 50%; clip-path: none; top: -50%; left: 0; right: 0; height: 100%; }

/* semicírculo bottom */
.tile[data-shape="half-bottom"]::before {
  border-radius: 50%; bottom: -50%; left: 0; right: 0; height: 100%;
}

/* semicírculo left */
.tile[data-shape="half-left"]::before {
  border-radius: 50%; left: -50%; top: 0; bottom: 0; width: 100%;
}

/* semicírculo right */
.tile[data-shape="half-right"]::before {
  border-radius: 50%; right: -50%; top: 0; bottom: 0; width: 100%;
}

/* quarto de círculo top-left */
.tile[data-shape="quarter-tl"]::before {
  top: 0; left: 0; width: 100%; height: 100%;
  border-radius: 0 0 100% 0;
}

/* quarto de círculo top-right */
.tile[data-shape="quarter-tr"]::before {
  top: 0; right: 0; width: 100%; height: 100%;
  border-radius: 0 0 0 100%;
}

/* quarto de círculo bottom-left */
.tile[data-shape="quarter-bl"]::before {
  bottom: 0; left: 0; width: 100%; height: 100%;
  border-radius: 0 100% 0 0;
}

/* quarto de círculo bottom-right */
.tile[data-shape="quarter-br"]::before {
  bottom: 0; right: 0; width: 100%; height: 100%;
  border-radius: 100% 0 0 0;
}

/* losango */
.tile[data-shape="diamond"]::before {
  top: 50%; left: 50%; width: 70%; height: 70%;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* losango com mini círculo dentro (via ::after) */
.tile[data-shape="diamond-dot"]::before {
  top: 50%; left: 50%; width: 70%; height: 70%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.tile[data-shape="diamond-dot"]::after {
  content: ""; position: absolute;
  top: 50%; left: 50%; width: 22%; height: 22%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

/* triângulo top-right */
.tile[data-shape="tri-tr"]::before {
  top: 0; right: 0; width: 100%; height: 100%;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}

/* triângulo bottom-left */
.tile[data-shape="tri-bl"]::before {
  bottom: 0; left: 0; width: 100%; height: 100%;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

/* cor de frente da forma */
.tile[data-fg="mata"]::before, .tile[data-fg="mata"]::after { background: var(--bir-mata); }
.tile[data-fg="ceu"]::before, .tile[data-fg="ceu"]::after { background: var(--bir-ceu); }
.tile[data-fg="ceu-soft"]::before { background: var(--bir-ceu-soft); }
.tile[data-fg="sol"]::before, .tile[data-fg="sol"]::after { background: var(--bir-sol); }
.tile[data-fg="sol-soft"]::before { background: var(--bir-sol-soft); }
.tile[data-fg="chao"]::before, .tile[data-fg="chao"]::after { background: var(--bir-chao); }
.tile[data-fg="chao-soft"]::before { background: var(--bir-chao-soft); }
.tile[data-fg="voltagem"]::before, .tile[data-fg="voltagem"]::after { background: var(--bir-voltagem); }
.tile[data-fg="cal"]::before, .tile[data-fg="cal"]::after { background: var(--bir-cal); }
.tile[data-fg="ink"]::before, .tile[data-fg="ink"]::after { background: var(--bir-ink); }

/* dot/after second color */
.tile[data-dot="cal"]::after { background: var(--bir-cal); }
.tile[data-dot="sol"]::after { background: var(--bir-sol); }
.tile[data-dot="chao"]::after { background: var(--bir-chao); }
.tile[data-dot="voltagem"]::after { background: var(--bir-voltagem); }
.tile[data-dot="mata"]::after { background: var(--bir-mata); }

/* ============================================================================
   19. SAVE THE DATE HERO — espelho do print 02 do Bloco Tropical
   Lado esquerdo: lockup BIO! in RIO 27 multicolor sobre fundo Sol.
   Lado direito: azulejo geométrico full-bleed.
   ============================================================================ */

.std-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--bir-sol);
  border-radius: var(--nonap-radius-lg);
  overflow: hidden;
  border: 2px solid var(--bir-ink);
}
@media (max-width: 900px) { .std-hero { grid-template-columns: 1fr; } }

.std-hero__left {
  padding: var(--nonap-space-10) var(--nonap-space-12);
  display: flex; flex-direction: column;
  justify-content: space-between;
  min-height: 540px;
}
@media (max-width: 720px) { .std-hero__left { padding: var(--nonap-space-8); min-height: auto; } }

.std-hero__eyebrow {
  font-family: var(--bir-font-mono);
  font-size: var(--nonap-size-tiny);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bir-ink);
  margin-bottom: var(--nonap-space-8);
}

.std-hero__lockup {
  font-family: var(--bir-font-extreme);
  text-transform: uppercase;
  line-height: 0.85;
  letter-spacing: -0.04em;
  display: flex; flex-direction: column;
  font-size: clamp(3.5rem, 9vw, 7.5rem);
}
.std-hero__lockup .l-bio { color: var(--bir-voltagem); }
.std-hero__lockup .l-in {
  font-family: var(--bir-font-editorial);
  font-style: italic;
  font-weight: 400;
  color: var(--bir-chao);
  text-transform: lowercase;
  font-size: 0.55em;
  display: inline-block;
  margin-right: 0.15em;
}
.std-hero__lockup .l-rio-line { display: flex; align-items: baseline; gap: 0.1em; }
.std-hero__lockup .l-rio { color: var(--bir-ink); }
.std-hero__lockup .l-27 { color: var(--bir-mata); }

.std-hero__info {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--nonap-space-6); flex-wrap: wrap;
  margin-top: var(--nonap-space-10);
}
.std-hero__info-meta {
  font-family: var(--bir-font-extreme);
  text-transform: uppercase;
  color: var(--bir-ink);
  line-height: 1.2;
  font-size: var(--nonap-size-small);
  letter-spacing: 0.04em;
}
.std-hero__info-meta strong { display: block; font-size: var(--nonap-size-regular); margin-bottom: 4px; }
.std-hero__info-meta em { font-style: normal; opacity: 0.7; display: block; font-weight: 400; }

.std-hero__cta {
  display: inline-flex; align-items: center; gap: var(--nonap-space-2);
  background: var(--bir-ink); color: var(--bir-cal);
  padding: var(--nonap-space-3) var(--nonap-space-6);
  font-family: var(--bir-font-mono);
  font-size: var(--nonap-size-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 4px;
  transition: var(--nonap-transition-default);
}
.std-hero__cta:hover { background: var(--bir-voltagem); color: var(--bir-cal); }

.std-hero__right {
  position: relative;
  background: var(--bir-cal);
  border-left: 2px solid var(--bir-ink);
}
@media (max-width: 900px) { .std-hero__right { border-left: none; border-top: 2px solid var(--bir-ink); min-height: 360px; } }

.std-hero__right-label {
  position: absolute;
  top: var(--nonap-space-4); left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--bir-font-mono);
  font-size: var(--nonap-size-tiny);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bir-ink);
  background: var(--bir-cal);
  padding: var(--nonap-space-2) var(--nonap-space-3);
  border: 1px solid var(--bir-ink);
  border-radius: 2px;
}

.std-hero__quote {
  position: absolute;
  bottom: var(--nonap-space-8); left: var(--nonap-space-8); right: var(--nonap-space-8);
  z-index: 2;
}
.std-hero__quote-text {
  font-family: var(--bir-font-editorial);
  font-style: italic;
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  line-height: 1.05;
  color: var(--bir-ink);
}
.std-hero__quote-hashtag {
  display: block;
  margin-top: var(--nonap-space-3);
  font-family: var(--bir-font-mono);
  font-size: var(--nonap-size-tiny);
  letter-spacing: 0.1em;
  color: var(--bir-chao);
}

/* ============================================================================
   20. BIG LOCKUP CARDS — três fundos (claro / cor / acento)
   Espelho do print 01: BIOMED in RIO 27 em três contextos.
   ============================================================================ */

.big-lockup-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--nonap-space-6);
}
@media (max-width: 900px) { .big-lockup-grid { grid-template-columns: 1fr; } }

.big-lockup {
  border-radius: var(--nonap-radius-md);
  padding: var(--nonap-space-12) var(--nonap-space-10);
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 320px;
  border: 1px solid var(--nonap-stroke-primary);
}

.big-lockup--positive { background: var(--bir-cal); }
.big-lockup--positive .big-lockup__rio { color: var(--bir-ink); }
.big-lockup--positive .big-lockup__27 { color: var(--bir-sol); }
.big-lockup--positive .big-lockup__bio { color: var(--bir-ink); }
.big-lockup--positive .big-lockup__in { color: var(--bir-sol); }
.big-lockup--positive .big-lockup__label { color: var(--bir-ink); opacity: 0.6; }

.big-lockup--negative { background: var(--bir-voltagem); border-color: var(--bir-voltagem); }
.big-lockup--negative .big-lockup__bio,
.big-lockup--negative .big-lockup__rio { color: var(--bir-cal); }
.big-lockup--negative .big-lockup__in { color: var(--bir-chao); }
.big-lockup--negative .big-lockup__27 { color: var(--bir-sol); }
.big-lockup--negative .big-lockup__label { color: var(--bir-cal); opacity: 0.65; }

.big-lockup--alta { background: var(--bir-sol); border-color: var(--bir-sol); }
.big-lockup--alta .big-lockup__bio,
.big-lockup--alta .big-lockup__rio { color: var(--bir-ink); }
.big-lockup--alta .big-lockup__in { color: var(--bir-chao); }
.big-lockup--alta .big-lockup__27 { color: var(--bir-chao); }
.big-lockup--alta .big-lockup__label { color: var(--bir-ink); opacity: 0.7; }

.big-lockup__mark {
  font-family: var(--bir-font-extreme);
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.04em;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
}
.big-lockup--feature .big-lockup__mark { font-size: clamp(3.5rem, 10vw, 7.5rem); }

.big-lockup__bio { display: block; }
.big-lockup__line2 { display: flex; align-items: baseline; gap: 0.15em; flex-wrap: wrap; }
.big-lockup__in {
  font-family: var(--bir-font-editorial);
  font-style: italic;
  font-weight: 400;
  text-transform: lowercase;
  font-size: 0.5em;
}
.big-lockup__27 {
  font-family: var(--bir-font-extreme);
}

.big-lockup__label {
  font-family: var(--bir-font-mono);
  font-size: var(--nonap-size-tiny);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: var(--nonap-space-8);
}

/* decoração de cantos (semicírculos sobrepostos) — referência do print */
.big-lockup__deco {
  position: absolute;
  top: 0; right: 0;
  width: 140px; height: 100px;
  pointer-events: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.big-lockup__deco > span { display: block; position: relative; overflow: hidden; }
.big-lockup__deco > span::before {
  content: ""; position: absolute; inset: 0;
}
.big-lockup__deco > span:nth-child(1)::before { background: var(--bir-chao); border-radius: 0 0 100% 0; }
.big-lockup__deco > span:nth-child(2)::before { background: var(--bir-sol); border-radius: 0 0 0 100%; }
.big-lockup__deco > span:nth-child(3)::before { background: var(--bir-voltagem); border-radius: 0 100% 0 0; }
.big-lockup__deco > span:nth-child(4)::before { background: var(--bir-cal); border-radius: 100% 0 0 0; }

/* ============================================================================
   21. MINI-CARD BIO·RIO 27 CONGRESSO — linha de 5 variações cromáticas
   ============================================================================ */

.bio-rio-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--nonap-space-4);
}
@media (max-width: 900px) { .bio-rio-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .bio-rio-row { grid-template-columns: 1fr; } }

.bio-rio {
  aspect-ratio: 1;
  border-radius: var(--nonap-radius-md);
  padding: var(--nonap-space-4) var(--nonap-space-4) var(--nonap-space-5);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
}

.bio-rio__brand {
  font-family: var(--bir-font-mono);
  font-size: var(--nonap-size-tiny);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  z-index: 2;
}

.bio-rio__27 {
  font-family: var(--bir-font-extreme);
  font-size: clamp(3rem, 8vw, 5rem);
  line-height: 1;
  text-align: center;
  letter-spacing: -0.04em;
  z-index: 2;
  align-self: center;
}

.bio-rio__caption {
  font-family: var(--bir-font-editorial);
  font-style: italic;
  font-size: var(--nonap-size-small);
  align-self: flex-end;
  z-index: 2;
}

/* decoração orgânica nos cantos */
.bio-rio::before, .bio-rio::after {
  content: ""; position: absolute; border-radius: 50%; z-index: 1;
}
.bio-rio::before {
  bottom: -30%; left: -20%;
  width: 70%; height: 70%;
}
.bio-rio::after {
  top: -15%; right: -15%;
  width: 50%; height: 50%;
}

.bio-rio--voltagem { background: var(--bir-voltagem); color: var(--bir-cal); }
.bio-rio--voltagem::before { background: rgba(247, 181, 56, 0.35); }
.bio-rio--voltagem::after { background: rgba(242, 92, 84, 0.45); }
.bio-rio--voltagem .bio-rio__brand { color: var(--bir-sol); }
.bio-rio--voltagem .bio-rio__27 { color: var(--bir-sol); }
.bio-rio--voltagem .bio-rio__caption { color: var(--bir-chao-soft); }

.bio-rio--chao { background: var(--bir-chao); color: var(--bir-cal); }
.bio-rio--chao::before { background: rgba(74, 31, 122, 0.4); }
.bio-rio--chao::after { background: rgba(251, 246, 238, 0.35); }
.bio-rio--chao .bio-rio__brand { color: var(--bir-cal); }
.bio-rio--chao .bio-rio__27 { color: var(--bir-cal); }
.bio-rio--chao .bio-rio__caption { color: var(--bir-cal); }

.bio-rio--mata { background: var(--bir-mata); color: var(--bir-cal); }
.bio-rio--mata::before { background: rgba(74, 31, 122, 0.45); }
.bio-rio--mata::after { background: rgba(247, 181, 56, 0.45); }
.bio-rio--mata .bio-rio__brand { color: var(--bir-sol); }
.bio-rio--mata .bio-rio__27 { color: var(--bir-sol); }
.bio-rio--mata .bio-rio__caption { color: var(--bir-sol); }

.bio-rio--ceu { background: var(--bir-ceu); color: var(--bir-cal); }
.bio-rio--ceu::before { background: rgba(74, 31, 122, 0.4); }
.bio-rio--ceu::after { background: rgba(251, 246, 238, 0.35); }
.bio-rio--ceu .bio-rio__brand { color: var(--bir-cal); }
.bio-rio--ceu .bio-rio__27 { color: var(--bir-cal); }
.bio-rio--ceu .bio-rio__caption { color: var(--bir-cal); }

.bio-rio--acai { background: #1A0E1A; color: var(--bir-cal); }
.bio-rio--acai::before { background: rgba(74, 31, 122, 0.55); }
.bio-rio--acai::after { background: rgba(247, 181, 56, 0.4); }
.bio-rio--acai .bio-rio__brand { color: var(--bir-sol); }
.bio-rio--acai .bio-rio__27 { color: var(--bir-sol); }
.bio-rio--acai .bio-rio__caption { color: var(--bir-sol); }

/* ============================================================================
   22. PASSAPORTE-BLOCO — composição de cards rotacionados
   ============================================================================ */

.passaporte {
  background: var(--bir-voltagem);
  border-radius: var(--nonap-radius-md);
  padding: var(--nonap-space-12);
  min-height: 360px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.passaporte__stack {
  position: relative;
  width: min(560px, 100%);
  aspect-ratio: 2 / 1;
}

.passaporte__card {
  position: absolute;
  border-radius: var(--nonap-radius-md);
  padding: var(--nonap-space-5) var(--nonap-space-6);
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: var(--nonap-shadow-lg);
}

.passaporte__card--tile {
  top: 5%; left: 5%; width: 42%; height: 90%;
  background: var(--bir-sol);
  color: var(--bir-mata);
  transform: rotate(-6deg);
}
.passaporte__card--tile::before {
  content: ""; position: absolute;
  bottom: -20%; left: -20%; width: 70%; height: 70%;
  border-radius: 50%; background: var(--bir-mata); opacity: 0.18;
}
.passaporte__card--tile .passaporte__brand {
  font-family: var(--bir-font-mono);
  font-size: var(--nonap-size-tiny);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bir-mata);
}
.passaporte__card--tile .passaporte__27 {
  font-family: var(--bir-font-extreme);
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: 1; text-align: center;
  color: var(--bir-mata);
}
.passaporte__card--tile .passaporte__caption {
  font-family: var(--bir-font-editorial);
  font-style: italic;
  align-self: flex-end;
  color: var(--bir-mata);
}

.passaporte__card--cover {
  top: 8%; right: 5%; width: 48%; height: 88%;
  background: var(--bir-cal);
  color: var(--bir-voltagem);
  transform: rotate(4deg);
}
.passaporte__card--cover .passaporte__label {
  font-family: var(--bir-font-mono);
  font-size: var(--nonap-size-tiny);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bir-ink);
}
.passaporte__card--cover .passaporte__title {
  font-family: var(--bir-font-extreme);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--bir-voltagem);
  margin-top: var(--nonap-space-3);
}
.passaporte__card--cover .passaporte__edition {
  font-family: var(--bir-font-editorial);
  font-style: italic;
  font-size: var(--nonap-size-medium);
  color: var(--bir-chao);
  margin-top: var(--nonap-space-2);
}

.passaporte__card--shadow {
  top: 18%; left: 28%; width: 44%; height: 78%;
  background: var(--bir-chao);
  transform: rotate(-2deg);
  z-index: -1;
}

/* ============================================================================
   23. APLICAÇÕES — Story 1080×1920 · Post IG 1080² · Backdrop teaser
   ============================================================================ */

.aplicacoes {
  display: grid;
  grid-template-columns: 0.7fr 1fr 1fr;
  gap: var(--nonap-space-5);
  align-items: stretch;
}
@media (max-width: 900px) { .aplicacoes { grid-template-columns: 1fr; } }

.aplic {
  border-radius: var(--nonap-radius-md);
  padding: var(--nonap-space-6) var(--nonap-space-6) var(--nonap-space-8);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 420px;
}

.aplic__label {
  font-family: var(--bir-font-mono);
  font-size: var(--nonap-size-tiny);
  letter-spacing: 0.16em; text-transform: uppercase;
  z-index: 2;
}

.aplic__lockup {
  font-family: var(--bir-font-extreme);
  text-transform: uppercase;
  line-height: 0.85;
  letter-spacing: -0.04em;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  z-index: 2;
}

.aplic__quote {
  font-family: var(--bir-font-editorial);
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.25rem);
  z-index: 2;
}

.aplic__hashtag {
  font-family: var(--bir-font-mono);
  font-size: var(--nonap-size-tiny);
  letter-spacing: 0.08em;
  z-index: 2;
}

.aplic__deco {
  position: absolute; width: 80px; height: 80px;
  border-radius: 50%;
}

/* Story Chão */
.aplic--story { background: var(--bir-chao); color: var(--bir-cal); }
.aplic--story .aplic__label { color: var(--bir-cal); }
.aplic--story .aplic__hashtag { color: rgba(251,246,238,0.7); }
.aplic--story::before {
  content: ""; position: absolute;
  top: -10%; right: -10%; width: 35%; height: 25%;
  background: var(--bir-voltagem);
  border-radius: 0 0 0 100%;
}
.aplic--story::after {
  content: ""; position: absolute;
  top: 8%; right: 6%; width: 26px; height: 26px;
  background: var(--bir-sol); border-radius: 50%;
  z-index: 1;
}

/* Post IG Céu */
.aplic--post { background: var(--bir-ceu); color: var(--bir-cal); padding: var(--nonap-space-6); }
.aplic--post .aplic__label { color: var(--bir-cal); }
.aplic--post .aplic__hashtag { color: rgba(251,246,238,0.85); }
.aplic--post .aplic__post-grid {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: var(--nonap-space-2);
  flex: 1; margin: var(--nonap-space-4) 0;
}
.aplic--post .aplic__post-grid > div {
  border-radius: 4px;
  display: grid; place-items: center;
  font-family: var(--bir-font-extreme);
  text-transform: uppercase;
  font-size: clamp(1rem, 2vw, 1.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.aplic--post .pg-bio { background: var(--bir-sol); color: var(--bir-ink); }
.aplic--post .pg-27 { background: var(--bir-voltagem); color: var(--bir-cal); }
.aplic--post .pg-in { background: var(--bir-chao); color: var(--bir-cal); font-family: var(--bir-font-editorial); font-style: italic; text-transform: lowercase; }
.aplic--post .pg-biorio { background: var(--bir-cal); color: var(--bir-ink); letter-spacing: -0.02em; }

/* Backdrop Ink */
.aplic--backdrop { background: var(--bir-ink); color: var(--bir-cal); }
.aplic--backdrop .aplic__label { color: var(--bir-sol); }
.aplic--backdrop .aplic__lockup-stack {
  font-family: var(--bir-font-extreme);
  text-transform: uppercase;
  line-height: 0.85;
  letter-spacing: -0.04em;
  font-size: clamp(2rem, 5vw, 3.75rem);
  display: flex; flex-direction: column;
  margin: var(--nonap-space-6) 0;
  z-index: 2;
}
.aplic--backdrop .l-jor { color: var(--bir-sol); }
.aplic--backdrop .l-nada { color: var(--bir-sol); }
.aplic--backdrop .l-con { color: var(--bir-chao); }
.aplic--backdrop .l-tinua { color: var(--bir-chao); }
.aplic--backdrop .aplic__quote { color: var(--bir-cal); }
.aplic--backdrop .aplic__hashtag { color: var(--bir-sol); }
.aplic--backdrop::after {
  content: ""; position: absolute;
  bottom: var(--nonap-space-6); right: var(--nonap-space-6);
  width: 40px; height: 40px;
  background: var(--bir-voltagem);
  border-radius: 0 50% 0 0;
}

/* ============================================================================
   24. SECTION HEADER COM LABEL FAIXA (espelho do "APLICAÇÃO · HASHTAG ...")
   ============================================================================ */

.bloco-label {
  display: flex; align-items: center;
  gap: var(--nonap-space-3);
  margin-bottom: var(--nonap-space-8);
  font-family: var(--bir-font-mono);
  font-size: var(--nonap-size-tiny);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--bir-ink);
}
.bloco-label__marker {
  display: inline-block;
  width: 0; height: 0;
  border-left: 8px solid var(--bir-ceu);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.bloco-label__line {
  flex: 1; height: 1px; background: var(--bir-ceu);
}

/* ============================================================================
   25. LOGO-SVG GRID — exibição dos SVGs reais do estudo de logos
   ============================================================================ */

.logo-svg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--nonap-space-6);
}
.logo-svg-grid--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .logo-svg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .logo-svg-grid, .logo-svg-grid--three { grid-template-columns: 1fr; } }

.logo-svg-card {
  border: 1px solid var(--nonap-stroke-primary);
  border-radius: var(--nonap-radius-md);
  overflow: hidden;
  background: var(--nonap-white);
  display: flex; flex-direction: column;
}

.logo-svg-card--feature { grid-column: span 2; }
@media (max-width: 1024px) { .logo-svg-card--feature { grid-column: span 1; } }

.logo-svg-card__canvas {
  aspect-ratio: 16 / 10;
  display: grid; place-items: center;
  padding: var(--nonap-space-10) var(--nonap-space-8);
  position: relative;
}
.logo-svg-card--feature .logo-svg-card__canvas {
  aspect-ratio: 16 / 8;
  padding: var(--nonap-space-12) var(--nonap-space-10);
}

.logo-svg-card__canvas img {
  max-width: 100%;
  max-height: 220px;
  width: auto; height: auto;
}
.logo-svg-card--feature .logo-svg-card__canvas img {
  max-height: 280px;
}

.logo-svg-card__body {
  padding: var(--nonap-space-5) var(--nonap-space-6);
  border-top: 1px solid var(--nonap-stroke-secondary);
  display: flex; flex-direction: column; gap: var(--nonap-space-2);
  flex: 1;
}

.logo-svg-card__variant {
  font-family: var(--bir-font-mono);
  font-size: var(--nonap-size-tiny);
  letter-spacing: var(--nonap-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--bir-chao);
}

.logo-svg-card__pitch {
  color: var(--nonap-text-secondary);
  font-size: var(--nonap-size-small);
  line-height: var(--nonap-leading-normal);
}

/* ============================================================================
   26. CONCEITO HERO — "BLOCO TROPICAL." gigante multicolor (espelha o doc)
   ============================================================================ */

.conceito-hero {
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  gap: var(--nonap-space-10);
  align-items: center;
  padding: var(--nonap-space-12) 0 var(--nonap-space-8);
}
@media (max-width: 1024px) { .conceito-hero { grid-template-columns: 1fr; } }

.conceito-hero__display {
  font-family: var(--nonap-font-display);
  font-weight: 800;
  font-size: clamp(4rem, 14vw, 11rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  margin: 0;
}
.conceito-hero__display .l-bloco { color: var(--bir-acai); display: block; }
.conceito-hero__display .l-tropi { color: var(--bir-coral); }
.conceito-hero__display .l-cal { color: var(--bir-mata); }
.conceito-hero__display .l-dot { color: var(--bir-sol); }

.conceito-hero__visual {
  display: flex; flex-direction: column; gap: var(--nonap-space-5);
}
.conceito-hero__shape {
  background: var(--bir-sol);
  aspect-ratio: 5 / 4;
  border-radius: var(--nonap-radius-md);
  position: relative; overflow: hidden;
}
.conceito-hero__shape::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: 0; height: 75%;
  background: var(--bir-acai);
  border-radius: 100% 100% 0 0 / 60% 60% 0 0;
}
.conceito-hero__caption {
  font-family: var(--bir-font-mono);
  font-size: var(--nonap-size-tiny);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nonap-text-secondary);
  line-height: 1.5;
}

.conceito-hero__chips {
  display: flex; gap: var(--nonap-space-3); flex-wrap: wrap;
  margin-bottom: var(--nonap-space-6);
}
.conceito-chip {
  font-family: var(--bir-font-mono);
  font-size: var(--nonap-size-tiny);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: var(--nonap-space-2) var(--nonap-space-3);
  border-radius: 2px;
}
.conceito-chip--coral { background: var(--bir-coral); color: var(--bir-cal); }
.conceito-chip--acai { background: var(--bir-acai); color: var(--bir-cal); }

/* ============================================================================
   27. BLOCO ESCURO 3-COL — Manifesto + Por que BIOMED + Herança Visual
   ============================================================================ */

.bloco-escuro {
  background: var(--bir-ink);
  color: var(--bir-cal);
  border-radius: var(--nonap-radius-lg);
  padding: var(--nonap-space-12) var(--nonap-space-10);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--nonap-space-10);
}
@media (max-width: 900px) { .bloco-escuro { grid-template-columns: 1fr; padding: var(--nonap-space-10) var(--nonap-space-6); } }

.bloco-escuro__col h4 {
  font-family: var(--bir-font-mono);
  font-size: var(--nonap-size-tiny);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bir-sol);
  margin-bottom: var(--nonap-space-4);
}
.bloco-escuro__col p {
  font-size: var(--nonap-size-medium);
  line-height: 1.45;
  color: var(--bir-cal);
}
.bloco-escuro__col--manifesto p {
  font-family: var(--bir-font-editorial);
  font-style: italic;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.3;
}
.bloco-escuro__col--manifesto .grif-coral { color: var(--bir-coral); font-style: italic; }
.bloco-escuro__col--manifesto .grif-sol { color: var(--bir-sol); font-style: italic; }
.bloco-escuro__col--manifesto .grif-ceu { color: var(--bir-ceu); font-style: italic; }

/* ============================================================================
   28. REGRA DE COMBINAÇÃO — faixa preta abaixo da paleta (espelha o doc)
   ============================================================================ */

.regra-combinacao {
  background: var(--bir-ink);
  color: var(--bir-cal);
  padding: var(--nonap-space-6) var(--nonap-space-8);
  border-radius: var(--nonap-radius-md);
  margin-top: var(--nonap-space-2);
  font-size: var(--nonap-size-small);
  line-height: var(--nonap-leading-normal);
}
.regra-combinacao strong {
  color: var(--bir-sol);
  font-family: var(--bir-font-data);
  font-weight: 700;
  font-size: var(--nonap-size-tiny);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: inline-block;
  margin-right: var(--nonap-space-2);
}

/* ============================================================================
   29. CORREÇÃO TIPOGRÁFICA — força font-weight 800 em todos os usos de
   Bricolage Grotesque como display/eyebrow/label.
   No doc Bloco Tropical, eyebrows/labels caps são Bricolage 800, não DM Sans.
   ============================================================================ */

.eyebrow,
.brand,
.brand__client,
.breadcrumb,
.site-nav,
.site-nav a,
.hero__meta-item .label,
.phase-card__number,
.phase-card__status,
.btn,
.swatch-card__role,
.swatch-card__hex,
.type-spec__role,
.type-spec__meta,
.callout .eyebrow,
.pullquote::before,
.competitor-card__type,
.competitor-card dt,
.locked-hero__date,
.std-hero__eyebrow,
.std-hero__cta,
.std-hero__info-meta,
.std-hero__right-label,
.std-hero__quote-hashtag,
.bloco-label,
.bloco-escuro__col h4,
.aplic__label,
.aplic__hashtag,
.passaporte__brand,
.passaporte__label,
.passaporte__edition,
.lockup__variant,
.lockup-mono,
.lockup-bir27,
.lockup-bir2027,
.bio-rio__brand,
.big-lockup__label,
.logo-svg-card__variant,
.conceito-chip,
.regra-combinacao strong,
.bir-font-mono,
.font-mono,
.font-extreme,
.font-display,
.font-sub,
.font-lockup,
.brand__mark,
.site-footer__bottom {
  font-weight: 800;
}

/* eyebrow no doc tem letter-spacing maior nos labels de seção (0.18-0.22em) */
.bloco-label,
.std-hero__eyebrow,
.std-hero__right-label,
.bloco-escuro__col h4,
.std-hero__info-meta,
.aplic__label,
.passaporte__label,
.lockup__variant,
.big-lockup__label {
  letter-spacing: 0.18em;
}

/* Pesos específicos pro DM Sans (body, dado neutro, hashtag) */
.font-data,
.bloco-escuro__col p:not(.bloco-escuro__col--manifesto p),
.regra-combinacao,
.std-hero__quote-hashtag,
.aplic__hashtag,
.passaporte__caption + p,
.lockup__pitch,
.bio-rio__caption,
.logo-svg-card__pitch {
  font-family: var(--bir-font-data);
}

/* hashtags ficam DM Sans 700 (não Bricolage) — caps tracked baixo */
.std-hero__quote-hashtag,
.aplic__hashtag {
  font-family: var(--bir-font-data);
  font-weight: 700;
  letter-spacing: 0.1em;
}