/* ================================================================
 * Kelp — Components v2 (Atomic Design)
 * ----------------------------------------------------------------
 * 20 componentes proprietários anti-AI-tell:
 *   8 ATOMS      → btn-primary, btn-secondary, btn-ghost, btn-warm,
 *                  input-field, label, divider, eyebrow
 *   7 MOLECULES  → card-default, card-elevated, card-premium,
 *                  pill-chip, badge-status, faq-accordion,
 *                  testimonial-card
 *   5 ORGANISMS  → hero-block, section-block, banner-cta, modal,
 *                  footer-block
 *
 * Princípios anti-AI-tell:
 *   - Hover MULTI-PROPERTY: nunca só opacity. Combinar transform +
 *     shadow + border + color (2-3 mudanças por hover state).
 *   - Easings sempre via --ease-aesop (assinatura motion).
 *   - Radius MISTO: pill 999, soft 8, rounded 16, sharp 4 — nunca
 *     "tudo radius-12".
 *   - Sombras tingidas com verde-floresta (vinculadas ao DS color).
 *   - Underlines botanical animados (line grow-from-left), não
 *     underline default do browser.
 *
 * Estados obrigatórios em CADA componente interativo:
 *   default / hover / active / focus-visible / disabled
 *
 * Mobile-first (375px). Breakpoints: 720px (tablet), 1024px (desktop).
 *
 * Versão: 2.0
 * Data: 2026-04-28
 * Owner: UI Designer + Brad Frost (Atomic) + DS Token Architect
 * ================================================================ */


/* ================================================================
 * BASE — reset mínimo, focus visible global, body defaults
 * ================================================================ */

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

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

body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-primary-dark);
}

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

/* Focus visible global — anel teal Kelp com offset generoso. */
:focus-visible {
  outline: 2px solid var(--accent-cta);
  outline-offset: 4px;
  border-radius: var(--radius-sharp);
}

/* Selection com tint da marca (não azul-padrão do browser). */
::selection {
  background: var(--accent-cta);
  color: var(--green-deepest);
}


/* ================================================================
 * ATOMS (8) — blocos fundamentais
 * ================================================================ */


/* ──────────────────────────────────────────────────────────────
 * ATOM 1 — .btn-primary
 * Pill teal Kelp + green-deepest text. Hover: scale(1.02) + glow
 * + leve aquecimento de cor. NÃO é só "ficar mais escuro".
 * ────────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-8);
  border: none;
  border-radius: var(--radius-pill);
  background: var(--accent-cta);
  color: var(--green-deepest);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast),
              box-shadow var(--transition-base),
              background var(--transition-fast);
}
.btn-primary:hover {
  transform: scale(1.02) translateY(-1px);
  box-shadow: var(--shadow-glow-teal), var(--shadow-md);
  background: #15F0D2; /* leve aquecimento, quase imperceptível */
}
.btn-primary:active {
  transform: scale(0.99);
  box-shadow: var(--shadow-sm);
}
.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}


/* ──────────────────────────────────────────────────────────────
 * ATOM 2 — .btn-secondary
 * Outline cream. Hover: invert (preenche com cream, texto vira
 * verde-deepest). Fill cresce de baixo pra cima.
 * ────────────────────────────────────────────────────────────── */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-8);
  background: transparent;
  color: var(--text-primary-dark);
  border: 1px solid var(--text-primary-dark);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--transition-base),
              border-color var(--transition-base);
}
.btn-secondary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--text-primary-dark);
  transform: translateY(100%);
  transition: transform var(--transition-base);
  z-index: -1;
}
.btn-secondary:hover {
  color: var(--green-deepest);
}
.btn-secondary:hover::before {
  transform: translateY(0);
}
.btn-secondary:active {
  transform: scale(0.99);
}
.btn-secondary:disabled,
.btn-secondary[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}


/* ──────────────────────────────────────────────────────────────
 * ATOM 3 — .btn-ghost
 * Text-only com underline botanical animado (grow-from-left).
 * Hover: underline cresce + cor shift pra teal.
 * ────────────────────────────────────────────────────────────── */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  background: transparent;
  border: none;
  color: var(--text-primary-dark);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: color var(--transition-fast);
}
.btn-ghost::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-base);
}
.btn-ghost:hover {
  color: var(--accent-cta);
}
.btn-ghost:hover::after {
  transform: scaleX(1);
}
.btn-ghost:active {
  opacity: 0.8;
}
.btn-ghost:disabled,
.btn-ghost[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}


/* ──────────────────────────────────────────────────────────────
 * ATOM 4 — .btn-warm
 * Pill gold oxidado para founding tier / premium. Hover: glow
 * gold + scale sutil + leve elevação.
 * ────────────────────────────────────────────────────────────── */
.btn-warm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-8);
  border: 1px solid var(--accent-premium);
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--gold-oxidado), #B8895C);
  color: var(--green-deepest);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast),
              box-shadow var(--transition-base);
}
.btn-warm:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: var(--shadow-glow-gold), var(--shadow-md);
}
.btn-warm:active {
  transform: scale(0.99);
}
.btn-warm:disabled,
.btn-warm[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}


/* ──────────────────────────────────────────────────────────────
 * ATOM 5 — .input-field
 * Bg semi-transparente + border-bottom 1px subtle. Focus:
 * border-bottom 2px gold. Estética de papel de receituário antigo,
 * NÃO "input box arredondado Tailwind default".
 * ────────────────────────────────────────────────────────────── */
.input-field {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-2);
  background: rgba(245, 239, 230, 0.04);
  border: none;
  border-bottom: 1px solid var(--border-medium-dark);
  border-radius: 0; /* propositalmente angular, anti-AI-tell */
  color: var(--text-primary-dark);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  transition: border-color var(--transition-base),
              background var(--transition-base);
}
.input-field::placeholder {
  color: var(--text-muted-dark);
  font-style: italic;
}
.input-field:hover {
  background: rgba(245, 239, 230, 0.06);
  border-bottom-color: var(--text-secondary-dark);
}
.input-field:focus {
  outline: none;
  border-bottom: 2px solid var(--accent-premium);
  background: rgba(245, 239, 230, 0.08);
}
.input-field:focus-visible {
  outline: none; /* o anel é o border-bottom gold */
}
.input-field:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.input-field[aria-invalid="true"] {
  border-bottom-color: var(--status-error);
}


/* ──────────────────────────────────────────────────────────────
 * ATOM 6 — .label
 * Overline mono uppercase — usado acima de inputs.
 * ────────────────────────────────────────────────────────────── */
.label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-overline);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-secondary-dark);
}


/* ──────────────────────────────────────────────────────────────
 * ATOM 7 — .divider
 * Linha 1px com gradient subtle (não linha sólida default).
 * ────────────────────────────────────────────────────────────── */
.divider {
  display: block;
  width: 100%;
  height: 1px;
  margin: var(--space-8) 0;
  border: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--border-medium-dark) 20%,
    var(--border-medium-dark) 80%,
    transparent 100%
  );
}
.divider--vertical {
  width: 1px;
  height: 100%;
  margin: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--border-medium-dark) 20%,
    var(--border-medium-dark) 80%,
    transparent 100%
  );
}


/* ──────────────────────────────────────────────────────────────
 * ATOM 8 — .eyebrow
 * Mono uppercase 11px wide — kicker editorial sobre headlines.
 * Inspiração: revistas de arte (Frieze, Apollo).
 * ────────────────────────────────────────────────────────────── */
.eyebrow {
  display: inline-block;
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-overline);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-secondary-dark);
}
.eyebrow--accent {
  color: var(--accent-cta);
}
.eyebrow--premium {
  color: var(--accent-premium);
}


/* ================================================================
 * MOLECULES (7) — composições de atoms
 * ================================================================ */


/* ──────────────────────────────────────────────────────────────
 * MOLECULE 9 — .card-default
 * Radius 8px (soft) + bg verde-mid + border subtle + padding-6.
 * Card "padrão" sem hover dramático.
 * ────────────────────────────────────────────────────────────── */
.card-default {
  background: var(--bg-card-dark);
  border: 1px solid var(--border-subtle-dark);
  border-radius: var(--radius-soft);
  padding: var(--space-6);
  color: var(--text-primary-dark);
  transition: border-color var(--transition-base);
}
.card-default:hover {
  border-color: var(--border-medium-dark);
}


/* ──────────────────────────────────────────────────────────────
 * MOLECULE 10 — .card-elevated
 * Radius 16px (rounded) + shadow-md. Hover: lift -2px + shadow-lg
 * + border emerge. Multi-property hover.
 * ────────────────────────────────────────────────────────────── */
.card-elevated {
  background: var(--bg-card-dark);
  border: 1px solid var(--border-subtle-dark);
  border-radius: var(--radius-rounded);
  padding: var(--space-6);
  color: var(--text-primary-dark);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              border-color var(--transition-base);
}
.card-elevated:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-medium-dark);
}
.card-elevated:focus-within {
  border-color: var(--accent-cta);
}


/* ──────────────────────────────────────────────────────────────
 * MOLECULE 11 — .card-premium
 * Radius 16px + gold border + shadow-glow-gold. Hover: ripple
 * spotlight (mouse-tracked via --mx --my, setados pelo
 * interactions.v2.js).
 * ────────────────────────────────────────────────────────────── */
.card-premium {
  position: relative;
  background: var(--bg-card-dark);
  border: 1px solid var(--accent-premium);
  border-radius: var(--radius-rounded);
  padding: var(--space-8);
  color: var(--text-primary-dark);
  box-shadow: var(--shadow-glow-gold), var(--shadow-md);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--transition-base),
              box-shadow var(--transition-base);
  --mx: 50%;
  --my: 50%;
}
.card-premium::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    400px circle at var(--mx) var(--my),
    rgba(212, 163, 115, 0.15),
    transparent 60%
  );
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
  z-index: 0;
}
.card-premium > * {
  position: relative;
  z-index: 1;
}
.card-premium:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-gold), var(--shadow-lg);
}
.card-premium:hover::before {
  opacity: 1;
}


/* ──────────────────────────────────────────────────────────────
 * MOLECULE 12 — .pill-chip
 * Radius pill + uppercase 11px + 6 variants (default, accent,
 * warm, success, warn, error).
 * ────────────────────────────────────────────────────────────── */
.pill-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: rgba(245, 239, 230, 0.08);
  border: 1px solid var(--border-subtle-dark);
  color: var(--text-secondary-dark);
  font-family: var(--font-mono);
  font-size: var(--fs-overline);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--transition-fast),
              border-color var(--transition-fast);
}
.pill-chip:hover {
  background: rgba(245, 239, 230, 0.12);
  border-color: var(--border-medium-dark);
}
.pill-chip--accent {
  background: rgba(0, 229, 199, 0.10);
  border-color: rgba(0, 229, 199, 0.30);
  color: var(--accent-cta);
}
.pill-chip--warm {
  background: rgba(212, 163, 115, 0.10);
  border-color: rgba(212, 163, 115, 0.30);
  color: var(--accent-premium);
}
.pill-chip--success {
  background: rgba(136, 176, 75, 0.10);
  border-color: rgba(136, 176, 75, 0.30);
  color: var(--status-success);
}
.pill-chip--warn {
  background: rgba(232, 168, 124, 0.10);
  border-color: rgba(232, 168, 124, 0.30);
  color: var(--status-warn);
}
.pill-chip--error {
  background: rgba(201, 52, 52, 0.10);
  border-color: rgba(201, 52, 52, 0.30);
  color: var(--status-error);
}


/* ──────────────────────────────────────────────────────────────
 * MOLECULE 13 — .badge-status
 * Small pill com 4 variants: active, pending, paused, rejected.
 * Cada um com bullet point colorido antes do texto.
 * ────────────────────────────────────────────────────────────── */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: rgba(245, 239, 230, 0.06);
  border: 1px solid var(--border-subtle-dark);
  font-family: var(--font-mono);
  font-size: var(--fs-overline);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-secondary-dark);
}
.badge-status::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge-status--active {
  color: var(--status-success);
  border-color: rgba(136, 176, 75, 0.30);
}
.badge-status--pending {
  color: var(--accent-premium);
  border-color: rgba(212, 163, 115, 0.30);
}
.badge-status--paused {
  color: var(--cream-darker);
  border-color: rgba(196, 184, 158, 0.30);
}
.badge-status--rejected {
  color: var(--status-error);
  border-color: rgba(201, 52, 52, 0.30);
}


/* ──────────────────────────────────────────────────────────────
 * MOLECULE 14 — .faq-accordion
 * Usa <details> nativo. Ícone "+" gira 45° on open. Conteúdo
 * faz slide suave. Sem JS necessário pra abrir/fechar
 * (data-exclusive é tratado pelo JS apenas para "um aberto por vez").
 * ────────────────────────────────────────────────────────────── */
.faq-accordion {
  border-bottom: 1px solid var(--border-subtle-dark);
  padding: var(--space-6) 0;
}
.faq-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--text-primary-dark);
  transition: color var(--transition-fast);
}
.faq-accordion summary::-webkit-details-marker {
  display: none;
}
.faq-accordion summary::after {
  content: '+';
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-medium-dark);
  border-radius: 50%;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: var(--fw-light);
  color: var(--text-secondary-dark);
  transition: transform var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base);
}
.faq-accordion[open] summary::after {
  transform: rotate(45deg);
  border-color: var(--accent-cta);
  color: var(--accent-cta);
}
.faq-accordion summary:hover {
  color: var(--accent-cta);
}
.faq-accordion summary:hover::after {
  border-color: var(--accent-cta);
  color: var(--accent-cta);
}
.faq-accordion[open] summary {
  margin-bottom: var(--space-4);
}
.faq-accordion__content {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary-dark);
  animation: kelp-faq-slide 0.4s var(--ease-aesop) both;
}
@keyframes kelp-faq-slide {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ──────────────────────────────────────────────────────────────
 * MOLECULE 15 — .testimonial-card
 * Quote em Migra italic + avatar + attribution mono.
 * Inspiração: The Gentlewoman / Soho House magazine.
 * ────────────────────────────────────────────────────────────── */
.testimonial-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-8);
  background: var(--bg-card-dark);
  border: 1px solid var(--border-subtle-dark);
  border-radius: var(--radius-soft);
  color: var(--text-primary-dark);
  transition: border-color var(--transition-base);
}
.testimonial-card:hover {
  border-color: var(--border-medium-dark);
}
.testimonial-card__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary-dark);
  margin: 0;
}
.testimonial-card__quote::before {
  content: '“';
  display: inline-block;
  margin-right: var(--space-1);
  color: var(--accent-cta);
}
.testimonial-card__quote::after {
  content: '”';
  display: inline-block;
  margin-left: var(--space-1);
  color: var(--accent-cta);
}
/* audit-fix #5: avatares circulares pretos vazios eram anti-Gentlewoman.
 * Removidos. Atribuicao agora estilo Frieze magazine: hairline + nome+role
 * mono uppercase em uma linha (em-dash separator).
 */
.testimonial-card__attribution {
  display: block;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle-dark);
}
.testimonial-card__avatar {
  display: none;
}
.testimonial-card__meta {
  display: block;
}
.testimonial-card__name {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-primary-dark);
}
.testimonial-card__role {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-wide);
  color: var(--text-muted-dark);
  text-transform: uppercase;
}
.testimonial-card__role::before {
  content: ' — ';
  margin: 0 4px;
  color: var(--text-muted-dark);
}


/* ================================================================
 * ORGANISMS (5) — composições maiores
 * ================================================================ */


/* ──────────────────────────────────────────────────────────────
 * ORGANISM 16 — .hero-block
 * Full-bleed + image bg + headline (.t-hero) + dual CTA + scroll
 * cue animado.
 * ────────────────────────────────────────────────────────────── */
.hero-block {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-16) var(--space-6) var(--space-24);
  overflow: hidden;
  background: var(--bg-section-dark);
  color: var(--text-primary-dark);
  isolation: isolate;
}
.hero-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-hero-overlay);
  z-index: 1;
}
.hero-block__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-block__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container-default);
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.hero-block__headline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  margin: 0;
  max-width: 16ch;
}
.hero-block__sub {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary-dark);
  max-width: 52ch;
  margin: 0;
}
.hero-block__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.hero-block__scroll-cue {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-muted-dark);
  text-decoration: none;
}
.hero-block__scroll-cue::after {
  content: '';
  width: 1px;
  height: 32px;
  background: var(--text-muted-dark);
  animation: kelp-scroll-cue 2s var(--ease-aesop) infinite;
  transform-origin: top center;
}
@keyframes kelp-scroll-cue {
  0%   { transform: scaleY(0); transform-origin: top center; }
  50%  { transform: scaleY(1); transform-origin: top center; }
  51%  { transform: scaleY(1); transform-origin: bottom center; }
  100% { transform: scaleY(0); transform-origin: bottom center; }
}
@media (min-width: 720px) {
  .hero-block {
    padding: var(--space-24) var(--space-12) var(--space-32);
  }
}


/* ──────────────────────────────────────────────────────────────
 * ORGANISM 17 — .section-block
 * Container + eyebrow + headline + sub + reveal-on-scroll.
 * Variants: --dark, --cream (alternância editorial dark/light).
 * ────────────────────────────────────────────────────────────── */
.section-block {
  padding: var(--space-24) var(--space-6);
  background: var(--bg-primary);
  color: var(--text-primary-dark);
}
.section-block--dark {
  background: var(--bg-section-dark);
}
.section-block--cream {
  background: var(--bg-section-light);
  color: var(--text-primary-light);
}
.section-block--cream .eyebrow,
.section-block--cream .label {
  color: var(--text-secondary-light);
}
.section-block__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.section-block__inner--narrow {
  max-width: var(--container-narrow);
}
.section-block__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 60ch;
}
.section-block__headline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  margin: 0;
}
.section-block__sub {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary-dark);
  margin: 0;
}
.section-block--cream .section-block__sub {
  color: var(--text-secondary-light);
}
@media (min-width: 720px) {
  .section-block {
    padding: var(--space-32) var(--space-12);
  }
}


/* ──────────────────────────────────────────────────────────────
 * ORGANISM 18 — .banner-cta
 * Full-bleed CTA section com bg image + overlay verde + headline.
 * Inspirado em sections de fim de página (Aesop, Soho House).
 * ────────────────────────────────────────────────────────────── */
.banner-cta {
  position: relative;
  padding: var(--space-32) var(--space-6);
  background: var(--bg-footer);
  color: var(--text-primary-dark);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.banner-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-cta-banner);
  z-index: 1;
}
.banner-cta__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.banner-cta__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container-narrow);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}
.banner-cta__headline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  margin: 0;
  max-width: 20ch;
}
.banner-cta__sub {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary-dark);
  margin: 0;
  max-width: 52ch;
}


/* ──────────────────────────────────────────────────────────────
 * ORGANISM 19 — .modal
 * Full-screen overlay + content card centered. Close X, ESC,
 * click outside (handled in interactions.v2.js).
 * ────────────────────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: rgba(4, 13, 8, 0.85);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
}
.modal[aria-hidden="false"],
.modal.is-open {
  display: flex;
  animation: kelp-modal-fade 0.4s var(--ease-aesop) both;
}
.modal__content {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: calc(100dvh - var(--space-12));
  overflow-y: auto;
  padding: var(--space-12) var(--space-8);
  background: var(--bg-card-dark);
  border: 1px solid var(--border-medium-dark);
  border-radius: var(--radius-rounded);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary-dark);
  animation: kelp-modal-content 0.5s var(--ease-out-back) both;
}
.modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-medium-dark);
  border-radius: 50%;
  background: transparent;
  color: var(--text-primary-dark);
  font-size: 20px;
  cursor: pointer;
  transition: transform var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
}
.modal__close:hover {
  transform: rotate(90deg);
  border-color: var(--accent-cta);
  color: var(--accent-cta);
}
@keyframes kelp-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes kelp-modal-content {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* ──────────────────────────────────────────────────────────────
 * ORGANISM 20 — .footer-block
 * 4-col grid + brand col + nav cols + Trinity message + disclaimer.
 * Mobile: stack vertical. Desktop (≥720px): 2fr 1fr 1fr 1fr.
 * ────────────────────────────────────────────────────────────── */
.footer-block {
  background: var(--bg-footer);
  color: var(--text-secondary-dark);
  padding: var(--space-24) var(--space-6) var(--space-8);
  border-top: 1px solid var(--border-subtle-dark);
}
.footer-block__inner {
  max-width: var(--container-default);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}
.footer-block__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.footer-block__wordmark {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary-dark);
}
.footer-block__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-snug);
  color: var(--text-secondary-dark);
  max-width: 32ch;
}
.footer-block__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer-block__nav-title {
  font-family: var(--font-mono);
  font-size: var(--fs-overline);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-muted-dark);
  margin-bottom: var(--space-2);
}
.footer-block__nav a {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--text-secondary-dark);
  text-decoration: none;
  transition: color var(--transition-fast);
  position: relative;
  width: fit-content;
}
.footer-block__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-base);
}
.footer-block__nav a:hover {
  color: var(--accent-cta);
}
.footer-block__nav a:hover::after {
  transform: scaleX(1);
}
.footer-block__trinity {
  grid-column: 1 / -1;
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-subtle-dark);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--text-primary-dark);
  text-align: center;
}
.footer-block__disclaimer {
  grid-column: 1 / -1;
  padding-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-relaxed);
  color: var(--text-muted-dark);
  text-align: center;
  max-width: 80ch;
  margin: 0 auto;
}
@media (min-width: 720px) {
  .footer-block__inner {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}


/* ================================================================
 * NAV (helper estrutural — burger mobile)
 * Hook usado pelo interactions.v2.js
 * ================================================================ */

.nav-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--border-medium-dark);
  border-radius: 50%;
  color: var(--text-primary-dark);
  cursor: pointer;
  transition: border-color var(--transition-fast),
              color var(--transition-fast);
}
.nav-burger:hover {
  border-color: var(--accent-cta);
  color: var(--accent-cta);
}
.nav-links {
  display: none;
}
.nav-links.open {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
@media (min-width: 1024px) {
  .nav-burger {
    display: none;
  }
  .nav-links {
    display: flex;
    flex-direction: row;
    gap: var(--space-6);
  }
}


/* ================================================================
 * COOKIE BANNER (helper)
 * ================================================================ */

/* Cookie banner — top-strip 56px (audit-fix #3)
 * Era card flutuante bottom que cobria 25% do canvas (pricing/testimonials).
 * Agora: thin strip top discreto, nao bloqueia conteudo critico.
 * z-index acima do nav-sticky para garantir prioridade.
 */
#cookie-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  z-index: 60;
  height: 56px;
  padding: 0 var(--space-6);
  background: var(--green-darker);
  border: none;
  border-bottom: 1px solid var(--border-subtle-dark);
  border-radius: 0;
  box-shadow: 0 1px 0 rgba(7, 21, 16, 0.4);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-secondary-dark);
  overflow: hidden;
}
#cookie-banner p {
  font-size: 13px;
  line-height: 1.4;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#cookie-banner.hidden {
  display: none;
}
@media (max-width: 720px) {
  #cookie-banner {
    padding: 0 var(--space-4);
    gap: var(--space-3);
  }
  #cookie-banner p {
    font-size: 12px;
  }
}


/* ================================================================
 * LOADING STATES — botanical shimmer (autoral, não Tailwind pulse)
 * ----------------------------------------------------------------
 * Gradient cream-verde se movendo lateralmente. Inspiração:
 * folha de papel velha sob luz de janela passando.
 * ================================================================ */

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--green-mid);
  border-radius: var(--radius-soft);
  min-height: 16px;
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(245, 239, 230, 0.06) 30%,
    rgba(245, 239, 230, 0.12) 50%,
    rgba(245, 239, 230, 0.06) 70%,
    transparent 100%
  );
  animation: kelp-shimmer 2.4s var(--ease-aesop) infinite;
}
@keyframes kelp-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}


/* ================================================================
 * FIM — components.v2.css
 *
 * Total: 20 componentes proprietários + helpers (nav, cookie, skeleton).
 *
 * Como usar nos HTMLs:
 *   <link rel="stylesheet" href="/membros/assets/brand-v2/tokens.v2.css">
 *   <link rel="stylesheet" href="/membros/assets/brand-v2/components.v2.css">
 *   <script defer src="/membros/assets/brand-v2/interactions.v2.js"></script>
 *
 * Exemplos de combinação:
 *   <button class="btn-primary">Solicitar acesso</button>
 *   <article class="card-elevated reveal">…</article>
 *   <details class="faq-accordion" data-exclusive>…</details>
 *
 * NÃO modificar este arquivo sem revisar tokens.v2.css.
 * Se precisar de variant nova, criar como modifier (.btn-primary--small)
 * e nunca como override fora do arquivo.
 * ================================================================ */