/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* Superfícies */
  --color-bg-dark:       #0a0a0a;
  --color-bg-light:      #ffffff;
  --color-bg-alt:        #f5f3ef;

  /* Bordas */
  --color-border:        #e0ddd8;
  --color-border-dark:   #2a2a2a;

  /* Textos sobre fundo claro */
  --color-text-primary:  #0a0a0a;
  --color-text-secondary:#4a4744;
  --color-text-disabled: #a8a5a0;

  /* Textos sobre fundo escuro */
  --color-text-inv-primary:   #ffffff;
  --color-text-inv-secondary: #a8a5a0;

  /* Semânticas */
  --color-error:   #c0392b;
  --color-success: #27ae60;
  --color-warning: #e67e22;
  --color-info:    #2980b9;

  /* Tipografia */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-h1:      clamp(40px, 5vw, 56px);
  --text-h2:      clamp(28px, 3.5vw, 36px);
  --text-h3:      24px;
  --text-body:    17px;
  --text-caption: 14px;
  --text-small:   13px;

  --weight-bold:     700;
  --weight-semibold: 600;
  --weight-medium:   500;
  --weight-regular:  400;

  --lh-tight:    1.1;
  --lh-snug:     1.2;
  --lh-normal:   1.3;
  --lh-relaxed:  1.75;
  --lh-caption:  1.5;

  /* Espaçamento — escala 4px */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --section-gap:          clamp(60px, 8vw, 120px);
  --card-padding-desktop: 32px;
  --card-padding-mobile:  24px;
  --reading-width:        720px;

  /* Grid */
  --container-max:         1440px;
  --container-pad-desktop: 80px;
  --container-pad-tablet:  40px;
  --container-pad-mobile:  24px;
  --grid-gutter:           24px;

  /* Interações */
  --transition-fast: 150ms ease-out;
  --transition-base: 200ms ease-out;
  --transition-slow: 300ms ease-out;

  --focus-ring:   2px solid #0a0a0a;
  --focus-offset: 3px;

  /* Bordas e raios */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-none: 0px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--text-body);
  line-height: var(--lh-relaxed);
  color: var(--color-text-primary);
  background: var(--color-bg-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol { list-style: none; }

img, video {
  max-width: 100%;
  display: block;
}

button {
  font: inherit;
  cursor: pointer;
  background: none;
  border: none;
}

/* ============================================================
   ACESSIBILIDADE
   ============================================================ */
.skip-link {
  position: absolute;
  top: -100%;
  left: 24px;
  background: var(--color-bg-dark);
  color: var(--color-text-inv-primary);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-caption);
  z-index: 1000;
  text-decoration: none;
}

.skip-link:focus {
  top: 16px;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.section--dark :focus-visible {
  outline-color: #ffffff;
}

/* ============================================================
   TIPOGRAFIA BASE
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
}

h1 { font-size: var(--text-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--text-h2); line-height: var(--lh-snug); }
h3 { font-size: var(--text-h3); line-height: var(--lh-normal); }

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

/* ============================================================
   LAYOUT UTILITÁRIOS
   ============================================================ */
.container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad-mobile);
  padding-right: var(--container-pad-mobile);
}

@media (min-width: 768px) {
  .container {
    padding-left: var(--container-pad-tablet);
    padding-right: var(--container-pad-tablet);
  }
}

@media (min-width: 1280px) {
  .container {
    padding-left: var(--container-pad-desktop);
    padding-right: var(--container-pad-desktop);
  }
}

.section {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
}

.section--black,
.section--dark {
  background: var(--color-bg-dark);
  color: var(--color-text-inv-primary);
}

.section--offwhite {
  background: var(--color-bg-alt);
}

/* ============================================================
   BOTÕES
   ============================================================ */

/* Primary */
.btn,
.btn--primary {
  display: inline-block;
  background: var(--color-bg-dark);
  color: var(--color-text-inv-primary);
  border: 1px solid var(--color-bg-dark);
  border-radius: var(--radius-none);
  padding: 10px 20px;
  font-size: 15px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base);
  text-decoration: none;
}

.btn:hover,
.btn--primary:hover {
  background: var(--color-border-dark);
  border-color: var(--color-border-dark);
}

.btn:active,
.btn--primary:active {
  background: #000000;
  border-color: #000000;
}

.btn:disabled,
.btn--primary:disabled {
  background: var(--color-text-disabled);
  border-color: var(--color-text-disabled);
  cursor: not-allowed;
}

@media (min-width: 1280px) {
  .btn,
  .btn--primary {
    padding: 12px 24px;
  }
}

/* Outline */
.btn--outline {
  display: inline-block;
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-text-primary);
  border-radius: var(--radius-none);
  padding: 10px 20px;
  font-size: 15px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base);
  text-decoration: none;
}

.btn--outline:hover {
  background: var(--color-bg-dark);
  color: var(--color-text-inv-primary);
}

.btn--outline:active {
  background: var(--color-border-dark);
  color: var(--color-text-inv-primary);
  border-color: var(--color-border-dark);
}

.btn--outline:disabled {
  color: var(--color-text-disabled);
  border-color: var(--color-text-disabled);
  cursor: not-allowed;
}

@media (min-width: 1280px) {
  .btn--outline {
    padding: 12px 24px;
  }
}

/* Ghost (sobre fundo escuro) */
.btn--ghost {
  display: inline-block;
  background: transparent;
  color: var(--color-text-inv-primary);
  border: 1px solid var(--color-text-inv-primary);
  border-radius: var(--radius-none);
  padding: 10px 20px;
  font-size: 15px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
  text-decoration: none;
}

.btn--ghost:hover {
  background: var(--color-bg-light);
  color: var(--color-text-primary);
}

.btn--ghost:active {
  background: var(--color-bg-alt);
  color: var(--color-text-primary);
  border-color: var(--color-bg-alt);
}

@media (min-width: 1280px) {
  .btn--ghost {
    padding: 12px 24px;
  }
}

/* Botão invertido — sobre fundo escuro, visual primary */
.btn--inverted {
  display: inline-block;
  background: var(--color-bg-light);
  color: var(--color-text-primary);
  border: 1px solid var(--color-bg-light);
  border-radius: var(--radius-none);
  padding: 10px 20px;
  font-size: 15px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base);
  text-decoration: none;
}

.btn--inverted:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-bg-alt);
}

@media (min-width: 1280px) {
  .btn--inverted {
    padding: 12px 24px;
  }
}

/* ============================================================
   TAG BADGE
   ============================================================ */
.tag-badge {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: var(--lh-caption);
  text-decoration: none;
  transition: border-color var(--transition-base), color var(--transition-base);
}

a.tag-badge:hover {
  border-color: var(--color-text-primary);
  color: var(--color-text-primary);
}

/* Tag badge sobre fundo escuro */
.section--dark .tag-badge,
.section--black .tag-badge {
  border-color: var(--color-border-dark);
  color: var(--color-text-inv-secondary);
}

/* ============================================================
   NAVEGAÇÃO
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg-light);
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition-base);
}

.site-header.nav--scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding-left: var(--container-pad-mobile);
  padding-right: var(--container-pad-mobile);
}

@media (min-width: 1280px) {
  .site-nav {
    height: 64px;
    padding-left: var(--container-pad-desktop);
    padding-right: var(--container-pad-desktop);
    max-width: var(--container-max);
    margin: 0 auto;
  }
}

.site-nav__logo {
  font-size: 16px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  text-decoration: none;
  flex-shrink: 0;
}

/* Desktop nav links */
.site-nav__menu {
  display: none;
}

@media (min-width: 1280px) {
  .site-nav__menu {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex: 1;
    justify-content: flex-end;
    margin-right: var(--space-8);
  }
}

.site-nav__link {
  font-size: 15px;
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site-nav__link:hover {
  color: var(--color-text-primary);
}

.site-nav__link.is-active {
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
}

/* CTA desktop */
.site-nav__cta {
  display: none;
}

@media (min-width: 1280px) {
  .site-nav__cta {
    display: inline-block;
  }
}

/* Hamburger */
.site-nav__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  gap: 6px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

@media (min-width: 1280px) {
  .site-nav__hamburger {
    display: none;
  }
}

.site-nav__hamburger-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text-primary);
  border-radius: 1px;
  transition: transform var(--transition-base), opacity var(--transition-base);
  transform-origin: center;
}

/* X ao abrir */
.nav-open .site-nav__hamburger-bar:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}

.nav-open .site-nav__hamburger-bar:nth-child(2) {
  transform: translateY(-4px) rotate(-45deg);
}

/* Mobile overlay */
.site-nav__overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-bg-light);
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.site-nav__overlay.is-open {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

body.nav-open {
  overflow: hidden;
}

.site-nav__overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 var(--container-pad-mobile);
  border-bottom: 1px solid var(--color-border);
}

.site-nav__overlay-logo {
  font-size: 16px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  text-decoration: none;
}

.site-nav__close {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  gap: 6px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.site-nav__close-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text-primary);
  border-radius: 1px;
}

.site-nav__close-bar:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}

.site-nav__close-bar:nth-child(2) {
  transform: translateY(-4px) rotate(-45deg);
}

.site-nav__overlay-links {
  padding-top: var(--space-5);
}

.site-nav__overlay-link {
  display: block;
  font-size: 20px;
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  padding: 20px var(--container-pad-mobile);
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site-nav__overlay-link:hover {
  color: var(--color-text-secondary);
}

.site-nav__overlay-cta {
  display: block;
  margin: var(--space-8) var(--container-pad-mobile);
  text-align: center;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--color-bg-dark);
  padding: 60px var(--container-pad-mobile) 40px;
}

@media (min-width: 1280px) {
  .site-footer {
    padding: 60px var(--container-pad-desktop);
  }
}

.site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.site-footer__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

@media (min-width: 768px) {
  .site-footer__top {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
}

.site-footer__brand {
  flex: 0 0 auto;
}

.site-footer__name {
  font-size: 16px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-inv-primary);
  display: block;
}

.site-footer__tagline {
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  color: var(--color-text-inv-secondary);
  margin-top: var(--space-2);
  display: block;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer__link {
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  color: var(--color-text-inv-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site-footer__link:hover {
  color: var(--color-text-inv-primary);
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  border-top: 1px solid var(--color-border-dark);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
}

@media (min-width: 768px) {
  .site-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.site-footer__copy,
.site-footer__idk {
  font-size: var(--text-small);
  color: var(--color-text-inv-secondary);
}

.site-footer__idk a {
  color: var(--color-text-inv-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site-footer__idk a:hover {
  color: var(--color-text-inv-primary);
}

/* ============================================================
   CARD DE POST
   ============================================================ */
.post-card {
  border-top: 1px solid var(--color-border);
  padding: var(--space-5) 0;
  display: block;
  text-decoration: none;
  color: inherit;
}

@media (min-width: 1280px) {
  .post-card {
    padding: var(--space-6) 0;
  }
}

.post-card__tag {
  margin-bottom: var(--space-3);
}

.post-card__title {
  font-size: 20px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--lh-normal);
  margin-bottom: var(--space-3);
  transition: color var(--transition-fast);
}

.post-card:hover .post-card__title {
  color: var(--color-text-secondary);
}

.post-card__excerpt {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  line-height: var(--lh-caption);
  margin-bottom: var(--space-3);
}

.post-card__meta {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  line-height: var(--lh-caption);
}

/* Grid de posts */
.post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-10);
}

@media (min-width: 768px) {
  .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .post-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   CARD DE PILAR
   ============================================================ */
.pilar-card {
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--card-padding-mobile);
  display: flex;
  flex-direction: column;
  min-height: 180px;
  transition: border-color var(--transition-base);
}

@media (min-width: 1280px) {
  .pilar-card {
    padding: var(--card-padding-desktop);
  }
}

.pilar-card:hover {
  border-color: var(--color-text-primary);
}

.pilar-card__title {
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  line-height: var(--lh-normal);
}

.pilar-card__desc {
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  margin-top: var(--space-3);
}

.pilar-card__link {
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  margin-top: auto;
  padding-top: var(--space-5);
  text-decoration: none;
  display: inline-block;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.pilar-card:hover .pilar-card__link {
  transform: translateX(4px);
}

/* Grid de pilares */
.pilar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-12);
}

@media (min-width: 768px) {
  .pilar-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   BLOCO SECTION HEADER (label + H2)
   ============================================================ */
.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.section-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}

.section-title {
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-top: var(--space-2);
  line-height: var(--lh-snug);
}

.section--dark .section-label {
  color: var(--color-text-inv-secondary);
}

.section--dark .section-title,
.section--black .section-title {
  color: var(--color-text-inv-primary);
}

.section-title--small {
  font-size: 20px;
}

/* ============================================================
   HOMEPAGE — BLOCO 1: HERO
   ============================================================ */
.hero {
  background-color: var(--color-bg-dark);
  min-height: 100svh;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  position: relative;
  overflow: hidden;
}

/* Noise texture — faz o fundo respirar */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero__text {
  order: 2;
  padding: 40px var(--container-pad-mobile) 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

.hero__label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 28px;
}

.hero__label::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--color-text-secondary);
  flex-shrink: 0;
}

.hero__title {
  font-size: clamp(36px, 9vw, 48px);
  font-weight: var(--weight-bold);
  color: var(--color-text-inv-primary);
  line-height: 1.0;
}

.hero__subtitle {
  font-size: 16px;
  font-weight: var(--weight-regular);
  color: var(--color-text-inv-secondary);
  line-height: 1.7;
  margin-top: 24px;
}

.hero__anchor {
  margin-top: 40px;
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  transition: color var(--transition-base), gap var(--transition-base);
}

.hero__anchor::after {
  content: '↓';
  font-size: 14px;
  display: block;
}

.hero__anchor:hover {
  color: var(--color-text-inv-primary);
  gap: 14px;
}

.hero__image {
  order: 1;
  height: 72vw;
  overflow: hidden;
  margin: 0 calc(-1 * var(--container-pad-mobile));
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1279px) {
  .hero {
    grid-template-columns: 58fr 42fr;
    grid-template-rows: unset;
    align-items: stretch;
    min-height: 100svh;
    min-height: 100vh;
  }

  .hero__text {
    order: unset;
    padding: clamp(80px, 10vw, 120px) clamp(32px, 4vw, 56px);
    max-width: none;
  }

  .hero__title {
    font-size: clamp(36px, 5vw, 52px);
  }

  .hero__subtitle {
    font-size: 16px;
    max-width: 380px;
  }

  .hero__image {
    order: unset;
    height: auto;
    margin: 0;
    align-items: flex-end;
    overflow: visible;
    padding-right: clamp(0px, 3vw, 40px);
  }

  .hero__photo {
    height: clamp(420px, 70vh, 640px);
    width: auto;
    object-fit: contain;
    object-position: bottom center;
  }
}

/* Desktop */
@media (min-width: 1280px) {
  .hero {
    grid-template-columns: 55fr 45fr;
    grid-template-rows: unset;
    align-items: stretch;
    min-height: 100svh;
    min-height: 100vh;
  }

  .hero__text {
    order: unset;
    padding: clamp(100px, 12vw, 160px) clamp(40px, 5vw, 80px) clamp(80px, 8vw, 120px);
    max-width: 600px;
  }

  .hero__title {
    font-size: clamp(44px, 5.5vw, 68px);
  }

  .hero__subtitle {
    font-size: 18px;
    max-width: 440px;
    margin-top: 28px;
  }

  .hero__anchor {
    margin-top: 52px;
  }

  .hero__image {
    order: unset;
    height: auto;
    margin: 0;
    align-items: flex-end;
    overflow: visible;
    padding-right: clamp(0px, 4vw, 60px);
    justify-content: center;
  }

  .hero__photo {
    height: clamp(560px, 82vh, 880px);
    width: auto;
    object-fit: contain;
    object-position: bottom center;
  }
}

/* Wide */
@media (min-width: 1440px) {
  .hero {
    grid-template-columns: 52fr 48fr;
  }
}

/* ============================================================
   HOMEPAGE — BLOCO 2: PARA QUEM É
   ============================================================ */
.para-quem {
  background: var(--color-bg-alt);
}

.para-quem__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-top: var(--space-12);
}

@media (min-width: 1280px) {
  .para-quem__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-10);
  }
}

.para-quem__item {
  /* sem card, sem borda — tipografia pura */
}

.para-quem__number {
  display: block;
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  color: var(--color-text-disabled);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.para-quem__title {
  font-size: 18px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-top: var(--space-4);
  line-height: var(--lh-normal);
}

.para-quem__text {
  font-size: 16px;
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-top: var(--space-3);
}

/* ============================================================
   HOMEPAGE — BLOCO 3: PILARES
   ============================================================ */
.pilares {
  background: var(--color-bg-light);
}

/* ============================================================
   HOMEPAGE — BLOCO 4: ARTIGOS
   ============================================================ */
.artigos {
  background: var(--color-bg-alt);
}

.artigos__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-5);
}

.artigos__all-link {
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.artigos__all-link:hover {
  color: var(--color-text-primary);
}

/* ============================================================
   HOMEPAGE — BLOCO 5: AUTORIDADE
   ============================================================ */
.autoridade {
  background: var(--color-bg-dark);
}

.autoridade__credencial {
  font-size: 19px;
  font-weight: var(--weight-regular);
  color: var(--color-text-inv-secondary);
  line-height: 1.65;
  max-width: 640px;
}

/* Grid de métricas */
.autoridade__metrics {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--color-border-dark);
  border-bottom: 1px solid var(--color-border-dark);
  margin: var(--space-12) 0;
}

@media (min-width: 768px) {
  .autoridade__metrics {
    grid-template-columns: repeat(3, 1fr);
  }
}

.autoridade__metric {
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-border-dark);
}

.autoridade__metric:last-child {
  border-bottom: none;
}

@media (min-width: 768px) {
  .autoridade__metric {
    padding: var(--space-10) var(--space-6) var(--space-10) 0;
    border-bottom: none;
    border-right: 1px solid var(--color-border-dark);
  }

  .autoridade__metric:first-child {
    padding-left: 0;
  }

  .autoridade__metric:not(:first-child) {
    padding-left: var(--space-6);
  }

  .autoridade__metric:last-child {
    border-right: none;
  }
}

.autoridade__number {
  font-size: clamp(48px, 6vw, 72px);
  font-weight: var(--weight-bold);
  color: var(--color-text-inv-primary);
  line-height: 1;
  letter-spacing: -0.02em;
  display: block;
}

.autoridade__metric-label {
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  color: var(--color-text-inv-secondary);
  margin-top: var(--space-2);
  line-height: var(--lh-caption);
  display: block;
}

/* Logos */
.autoridade__logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
  align-items: center;
  margin-top: var(--space-12);
}

.autoridade__logos img,
.logo-slot img {
  height: 28px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.5;
}

.autoridade__cta-link {
  display: inline-block;
  font-size: 15px;
  font-weight: var(--weight-medium);
  color: var(--color-text-inv-primary);
  margin-top: var(--space-12);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.autoridade__cta-link:hover {
  text-decoration: underline;
}

/* ============================================================
   ANIMAÇÕES DE SCROLL
   ============================================================ */
.section--animated {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

.section--animated.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .section--animated {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   BARRA DE PROGRESSO DE LEITURA
   ============================================================ */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--color-text-primary);
  width: 0%;
  z-index: 200;
  transition: width 100ms linear;
}

/* ============================================================
   TRATAMENTOS DE IMAGEM
   ============================================================ */
.img-overlay {
  position: relative;
}

.img-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.15) 0%,
    rgba(10, 10, 10, 0.45) 100%
  );
  pointer-events: none;
}

.img-muted {
  filter: grayscale(30%) contrast(1.05);
}

/* ============================================================
   HOMEPAGE — BLOCO 6: CTA DUPLO
   ============================================================ */
.cta-duplo {
  background: var(--color-bg-alt);
}

.cta-duplo__grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .cta-duplo__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.cta-duplo__block {
  padding: var(--space-10) 0;
}

.cta-duplo__block:last-child {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-10);
}

@media (min-width: 768px) {
  .cta-duplo__block {
    padding: var(--space-12);
  }

  .cta-duplo__block:first-child {
    border-right: 1px solid var(--color-border);
  }

  .cta-duplo__block:last-child {
    border-top: none;
  }
}

.cta-duplo__label {
  display: block;
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.cta-duplo__title {
  font-size: 22px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-top: var(--space-2);
  line-height: var(--lh-normal);
}

.cta-duplo__desc {
  font-size: 15px;
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-top: var(--space-3);
  max-width: 400px;
}

.cta-duplo__action {
  margin-top: var(--space-8);
}

/* ============================================================
   POST INDIVIDUAL
   ============================================================ */
.post-page {
  background: var(--color-bg-light);
}

.post-header {
  padding: var(--space-10) var(--container-pad-mobile) var(--space-8);
  border-bottom: 1px solid var(--color-border);
  max-width: calc(var(--reading-width) + var(--container-pad-mobile) * 2);
  margin: 0 auto;
}

@media (min-width: 768px) {
  .post-header {
    padding: var(--space-12) var(--container-pad-tablet) var(--space-10);
    max-width: calc(var(--reading-width) + var(--container-pad-tablet) * 2);
  }
}

@media (min-width: 1280px) {
  .post-header {
    padding: var(--space-16) 0 var(--space-10);
    max-width: var(--reading-width);
    margin: 0 auto;
  }
}

.post-header__tag {
  margin-bottom: var(--space-4);
}

.post-header__title {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-top: var(--space-4);
}

.post-header__meta {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  margin-top: var(--space-4);
  line-height: var(--lh-caption);
}

.post-body {
  padding: var(--space-10) var(--container-pad-mobile);
  max-width: calc(var(--reading-width) + var(--container-pad-mobile) * 2);
  margin: 0 auto;
}

@media (min-width: 768px) {
  .post-body {
    padding: var(--space-10) var(--container-pad-tablet);
    max-width: calc(var(--reading-width) + var(--container-pad-tablet) * 2);
  }
}

@media (min-width: 1280px) {
  .post-body {
    padding: var(--space-10) 0;
    max-width: var(--reading-width);
    margin: 0 auto;
  }
}

/* Conteúdo do post (Koenig) */
.post-content {
  font-size: var(--text-body);
  line-height: var(--lh-relaxed);
  color: var(--color-text-primary);
}

.post-content h2 {
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: var(--weight-semibold);
  margin: var(--space-12) 0 var(--space-4);
  line-height: var(--lh-snug);
}

.post-content h3 {
  font-size: 20px;
  font-weight: var(--weight-medium);
  margin: var(--space-8) 0 var(--space-3);
  line-height: var(--lh-normal);
}

.post-content p {
  margin-bottom: var(--space-6);
}

.post-content blockquote {
  border-left: 3px solid var(--color-text-primary);
  padding: var(--space-1) 0 var(--space-1) var(--space-5);
  font-style: italic;
  color: var(--color-text-secondary);
  margin: var(--space-8) 0;
}

.post-content ul,
.post-content ol {
  padding-left: var(--space-6);
  list-style: revert;
  margin-bottom: var(--space-6);
}

.post-content li {
  margin-bottom: var(--space-2);
}

.post-content code {
  background: var(--color-bg-alt);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 15px;
  font-family: 'SFMono-Regular', Consolas, monospace;
}

.post-content pre {
  background: var(--color-bg-alt);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-bottom: var(--space-6);
}

.post-content pre code {
  background: none;
  padding: 0;
  border-radius: 0;
}

.post-content a {
  color: var(--color-text-primary);
  text-decoration: underline;
  transition: opacity var(--transition-fast);
}

.post-content a:hover {
  opacity: 0.6;
}

.post-content img {
  max-width: 100%;
  height: auto;
  width: auto;
  border-radius: var(--radius-md);
  margin: var(--space-8) 0;
  display: block;
}

/* Koenig — larguras especiais */
.post-content .kg-width-wide {
  margin-left: -var(--space-6);
  margin-right: -var(--space-6);
  max-width: calc(100% + var(--space-12));
}

.post-content .kg-width-full {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
}

@media (min-width: 768px) {
  .post-content .kg-width-wide {
    margin-left: -var(--container-pad-tablet);
    margin-right: -var(--container-pad-tablet);
    max-width: calc(100% + var(--container-pad-tablet) * 2);
  }
}

/* Koenig — outros blocos */
.post-content .kg-image-card {
  margin: var(--space-8) 0;
}

.post-content .kg-image-card figcaption {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  text-align: center;
  margin-top: var(--space-2);
}

.post-content .kg-gallery-card {
  margin: var(--space-8) 0;
}

.post-content .kg-gallery-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.post-content .kg-gallery-image img {
  border-radius: var(--radius-sm);
}

.post-content .kg-bookmark-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin: var(--space-8) 0;
  text-decoration: none;
  display: block;
  transition: border-color var(--transition-base);
}

.post-content .kg-bookmark-card:hover {
  border-color: var(--color-text-primary);
}

.post-content .kg-bookmark-title {
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.post-content .kg-bookmark-description {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}

/* CTA pós-post */
.post-cta {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-16);
  padding-top: var(--space-12);
  padding-left: var(--container-pad-mobile);
  padding-right: var(--container-pad-mobile);
  max-width: calc(var(--reading-width) + var(--container-pad-mobile) * 2);
  margin-left: auto;
  margin-right: auto;
  padding-bottom: var(--space-16);
}

@media (min-width: 1280px) {
  .post-cta {
    padding-left: 0;
    padding-right: 0;
    max-width: var(--reading-width);
  }
}

.post-cta__text {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}

/* ============================================================
   TAG PAGE
   ============================================================ */
.tag-page {
  background: var(--color-bg-light);
}

.tag-header {
  padding: 60px var(--container-pad-mobile) var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .tag-header {
    padding: 60px var(--container-pad-tablet) var(--space-10);
  }
}

@media (min-width: 1280px) {
  .tag-header {
    padding: 60px var(--container-pad-desktop) var(--space-12);
  }
}

.tag-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.tag-header__label {
  display: block;
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.tag-header__title {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  line-height: var(--lh-snug);
  margin-top: var(--space-2);
}

.tag-header__desc {
  font-size: 18px;
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-top: var(--space-4);
  max-width: 560px;
}

.tag-posts {
  padding: var(--space-8) var(--container-pad-mobile) 60px;
}

@media (min-width: 768px) {
  .tag-posts {
    padding: var(--space-10) var(--container-pad-tablet) 80px;
  }
}

@media (min-width: 1280px) {
  .tag-posts {
    padding: var(--space-10) var(--container-pad-desktop) 80px;
  }
}

.tag-posts__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.tag-posts .post-grid {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .tag-posts .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   PÁGINA DE METODOLOGIA / JORNADA DE IMPACTO
   ============================================================ */
.metodologia-hero {
  background: var(--color-bg-dark);
  padding: clamp(80px, 10vw, 140px) var(--container-pad-mobile);
}

@media (min-width: 1280px) {
  .metodologia-hero {
    padding: clamp(80px, 10vw, 140px) var(--container-pad-desktop);
  }
}

.metodologia-hero__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.metodologia-hero__label {
  display: block;
  font-size: var(--text-small);
  color: var(--color-text-inv-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.metodologia-hero__title {
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  color: var(--color-text-inv-primary);
  margin-top: var(--space-2);
  line-height: var(--lh-tight);
  max-width: 680px;
}

.metodologia-hero__problema {
  font-size: 19px;
  font-weight: var(--weight-regular);
  color: var(--color-text-inv-secondary);
  line-height: 1.65;
  margin-top: var(--space-5);
  max-width: 680px;
}

.metodologia-etapas {
  background: var(--color-bg-light);
  padding: var(--section-gap) var(--container-pad-mobile);
}

@media (min-width: 1280px) {
  .metodologia-etapas {
    padding: var(--section-gap) var(--container-pad-desktop);
  }
}

.metodologia-etapas__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.metodologia-etapas__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-top: var(--space-10);
}

@media (min-width: 768px) {
  .metodologia-etapas__grid {
    flex-direction: row;
    gap: var(--space-10);
    align-items: flex-start;
  }
}

.metodologia-etapa {
  flex: 1;
}

.metodologia-etapa:not(:last-child) {
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .metodologia-etapa:not(:last-child) {
    padding-bottom: 0;
    border-bottom: none;
    padding-right: var(--space-10);
    border-right: 1px solid var(--color-border);
  }
}

.metodologia-etapa__num {
  font-size: 48px;
  font-weight: var(--weight-bold);
  color: var(--color-border);
  line-height: 1;
}

.metodologia-etapa__title {
  font-size: 20px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-top: var(--space-4);
  line-height: var(--lh-normal);
}

.metodologia-etapa__desc {
  font-size: 16px;
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-top: var(--space-3);
}

.metodologia-cta {
  background: var(--color-bg-dark);
  padding: var(--space-20) var(--container-pad-mobile);
  text-align: center;
}

@media (min-width: 1280px) {
  .metodologia-cta {
    padding: var(--space-20) var(--container-pad-desktop);
  }
}

/* ============================================================
   PÁGINAS ICP (para-ecommerce / para-empresas-de-servico)
   ============================================================ */
.icp-hero {
  background: var(--color-bg-dark);
  padding: clamp(80px, 10vw, 140px) var(--container-pad-mobile);
}

@media (min-width: 1280px) {
  .icp-hero {
    padding: clamp(80px, 10vw, 140px) var(--container-pad-desktop);
  }
}

.icp-hero__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.icp-hero__label {
  display: block;
  font-size: var(--text-small);
  color: var(--color-text-inv-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.icp-hero__title {
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  color: var(--color-text-inv-primary);
  margin-top: var(--space-2);
  line-height: var(--lh-tight);
}

.icp-hero__subtitle {
  font-size: 19px;
  font-weight: var(--weight-regular);
  color: var(--color-text-inv-secondary);
  line-height: 1.65;
  margin-top: var(--space-5);
  max-width: 600px;
}

.icp-content {
  background: var(--color-bg-light);
}

.icp-content__inner {
  max-width: var(--reading-width);
  margin: 0 auto;
}

.icp-posts {
  background: var(--color-bg-alt);
}

.icp-cta {
  background: var(--color-bg-dark);
}

.icp-cta__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  text-align: center;
}

.icp-cta__title {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  color: var(--color-text-inv-primary);
  line-height: var(--lh-snug);
}

.icp-cta__text {
  font-size: 18px;
  color: var(--color-text-inv-secondary);
  margin-top: var(--space-4);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.icp-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.icp-cta__btn {
  display: inline-block;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  border-radius: var(--radius-none);
  text-decoration: none;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.icp-cta__btn--primary {
  background: var(--color-bg-light);
  color: var(--color-text-primary);
  border: 1px solid var(--color-bg-light);
}

.icp-cta__btn--primary:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-bg-alt);
}

.icp-cta__btn--secondary {
  background: transparent;
  color: var(--color-text-inv-primary);
  border: 1px solid var(--color-text-inv-primary);
}

.icp-cta__btn--secondary:hover {
  background: var(--color-bg-light);
  color: var(--color-text-primary);
}

/* ============================================================
   PALESTRAS
   ============================================================ */
.palestras-hero {
  background: var(--color-bg-alt);
  padding: var(--section-gap) var(--container-pad-mobile);
}

@media (min-width: 1280px) {
  .palestras-hero {
    padding: var(--section-gap) var(--container-pad-desktop);
  }
}

.palestras-hero__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.palestras-hero__label {
  display: block;
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.palestras-hero__title {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin-top: var(--space-2);
  line-height: var(--lh-snug);
}

.palestras-hero__subtitle {
  font-size: 18px;
  color: var(--color-text-secondary);
  margin-top: var(--space-4);
}

.palestras-hero__cta {
  margin-top: var(--space-8);
}

.palestras-temas {
  background: var(--color-bg-light);
  padding: var(--section-gap) var(--container-pad-mobile);
}

@media (min-width: 1280px) {
  .palestras-temas {
    padding: var(--section-gap) var(--container-pad-desktop);
  }
}

.palestras-temas__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.palestra-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background-color var(--transition-fast);
}

.palestra-item:first-child {
  border-top: 1px solid var(--color-border);
}

.palestra-item:hover {
  background: var(--color-bg-alt);
  margin: 0 calc(-1 * var(--container-pad-mobile));
  padding-left: var(--container-pad-mobile);
  padding-right: var(--container-pad-mobile);
}

.palestra-item__num {
  font-size: var(--text-small);
  color: var(--color-text-disabled);
  width: 32px;
  flex-shrink: 0;
}

.palestra-item__title {
  font-size: 20px;
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  flex: 1;
}

.palestra-item__arrow {
  font-size: 20px;
  color: var(--color-text-primary);
  margin-left: auto;
  flex-shrink: 0;
}

/* ============================================================
   PÁGINA DE CONTATO
   ============================================================ */
.contato-form {
  max-width: 640px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.form-group label {
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
}

.form-group input,
.form-group select,
.form-group textarea {
  font-family: var(--font-family);
  font-size: var(--text-body);
  color: var(--color-text-primary);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-none);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  transition: border-color var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-text-primary);
}

.form-group textarea {
  resize: vertical;
  min-height: 140px;
  line-height: var(--lh-relaxed);
}

.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a4744' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}

.form-submit {
  margin-top: var(--space-8);
}

.form-notice {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  margin-top: var(--space-4);
}

/* Estado de sucesso após envio */
.form-success {
  display: none;
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  text-align: center;
}

.form-success.is-visible {
  display: block;
}

.form-success__title {
  font-size: 20px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.form-success__text {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
}

/* ============================================================
   PÁGINAS INTERNAS — COMPONENTES COMPARTILHADOS
   ============================================================ */

/* Hero unificado — fundo off-white, texto escuro (padrão /palestras) */
.page-hero {
  background: var(--color-bg-alt);
  padding: var(--section-gap) var(--container-pad-mobile);
}

@media (min-width: 768px) {
  .page-hero {
    padding: var(--section-gap) var(--container-pad-tablet);
  }
}

@media (min-width: 1280px) {
  .page-hero {
    padding: var(--section-gap) var(--container-pad-desktop);
  }
}

.page-hero__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.page-hero__label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: var(--space-4);
}

.page-hero__label::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--color-text-secondary);
  flex-shrink: 0;
}

.page-hero__title {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  line-height: var(--lh-snug);
  max-width: 720px;
}

.page-hero__subtitle {
  font-size: 18px;
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-top: var(--space-4);
  max-width: 600px;
}

.page-hero__cta {
  display: inline-block;
  margin-top: var(--space-8);
  font-size: 15px;
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.page-hero__cta:hover {
  opacity: 0.6;
}

/* Conteúdo editorial */
.page-content {
  background: var(--color-bg-light);
}

.page-content__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

/* CTA final — fundo escuro */
.page-cta {
  background: var(--color-bg-dark);
  padding: var(--space-20) var(--container-pad-mobile);
  text-align: center;
}

@media (min-width: 768px) {
  .page-cta {
    padding: var(--space-20) var(--container-pad-tablet);
  }
}

@media (min-width: 1280px) {
  .page-cta {
    padding: var(--space-20) var(--container-pad-desktop);
  }
}

.page-cta__inner {
  max-width: 640px;
  margin: 0 auto;
}

.page-cta__title {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  color: var(--color-text-inv-primary);
  line-height: var(--lh-snug);
}

.page-cta__text {
  font-size: 18px;
  font-weight: var(--weight-regular);
  color: var(--color-text-inv-secondary);
  line-height: 1.65;
  margin-top: var(--space-4);
}

.page-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

/* Formatos (palestras) */
.formatos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-12);
}

@media (min-width: 768px) {
  .formatos-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.formato-card {
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--card-padding-mobile);
  transition: border-color var(--transition-base);
}

@media (min-width: 1280px) {
  .formato-card {
    padding: var(--card-padding-desktop);
  }
}

.formato-card:hover {
  border-color: var(--color-text-primary);
}

.formato-card__title {
  font-size: 20px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.formato-card__desc {
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
  line-height: var(--lh-caption);
}

/* Posts relacionados (ICP pages) */
.page-posts {
  background: var(--color-bg-alt);
}

.page-posts__empty {
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  padding: 60px 0;
  text-align: center;
}

/* ============================================================
   PÁGINA ESTÁTICA GENÉRICA
   ============================================================ */
.static-page__header {
  background: var(--color-bg-dark);
  padding: clamp(60px, 8vw, 100px) var(--container-pad-mobile);
}

@media (min-width: 1280px) {
  .static-page__header {
    padding: clamp(60px, 8vw, 100px) var(--container-pad-desktop);
  }
}

.static-page__header h1 {
  color: var(--color-text-inv-primary);
  max-width: 720px;
}

.static-page__header p {
  color: var(--color-text-inv-secondary);
  font-size: 18px;
  margin-top: var(--space-4);
  max-width: 600px;
}

.static-page__body {
  padding: var(--section-gap) var(--container-pad-mobile);
}

@media (min-width: 1280px) {
  .static-page__body {
    padding: var(--section-gap) var(--container-pad-desktop);
  }
}

/* ============================================================
   AUTHOR PAGE
   ============================================================ */
.author-header {
  background: var(--color-bg-dark);
  padding: clamp(60px, 8vw, 100px) var(--container-pad-mobile);
}

@media (min-width: 1280px) {
  .author-header {
    padding: clamp(60px, 8vw, 100px) var(--container-pad-desktop);
  }
}

.author-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.author-header__avatar {
  border-radius: 50%;
  margin-bottom: var(--space-4);
}

.author-header__name {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  color: var(--color-text-inv-primary);
}

.author-header__bio {
  font-size: 18px;
  color: var(--color-text-inv-secondary);
  margin-top: var(--space-3);
  max-width: 560px;
}

.author-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.author-header__location,
.author-header__website {
  font-size: var(--text-caption);
  color: var(--color-text-inv-secondary);
}

.author-header__website {
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.author-header__website:hover {
  color: var(--color-text-inv-primary);
}

.author-header__count {
  font-size: var(--text-caption);
  color: var(--color-text-inv-secondary);
  margin-top: var(--space-4);
}

.author-posts {
  padding: var(--section-gap) var(--container-pad-mobile);
}

@media (min-width: 1280px) {
  .author-posts {
    padding: var(--section-gap) var(--container-pad-desktop);
  }
}

.author-posts__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.author-posts__empty {
  color: var(--color-text-secondary);
  font-size: var(--text-body);
}

/* ============================================================
   ERROR PAGE
   ============================================================ */
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: var(--space-16) var(--container-pad-mobile);
}

.error-code {
  font-size: 80px;
  font-weight: var(--weight-bold);
  color: var(--color-border);
  line-height: 1;
  display: block;
}

.error-message {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  margin-top: var(--space-4);
  margin-bottom: 0;
}

.error-link {
  display: inline-block;
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  margin-top: var(--space-6);
  text-decoration: underline;
  transition: opacity var(--transition-fast);
}

.error-link:hover {
  opacity: 0.6;
}

/* ============================================================
   PAGINAÇÃO
   ============================================================ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.pagination__link {
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.pagination__link:hover {
  opacity: 0.6;
}

.pagination__info {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}

/* ============================================================
   ESTADO VAZIO
   ============================================================ */
.empty-state {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  padding: 60px 0;
  text-align: center;
}

/* ============================================================
   LOADING STATE
   ============================================================ */
.loading {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

/* ============================================================
   SITE WRAPPER
   ============================================================ */
.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-main {
  flex: 1;
}