/* ==========================================================================
   Método Caracol — Sections (sections.css)
   Programadores: Graciliano Tolentino; Willian Albarelo
   Método Caracol, marca registrada.
   Data de geração: 2026-01-23
   Padrão: High Tech 12/10 (Ciclo Visual 01)
   Objetivo: direção de arte em nível de seção (ritmo, fundos, hierarquia)
   consumindo tokens.css, SEM criar componentes (components.css) e
   SEM redefinir identidade (tokens.css).

   Contrato:
   - NÃO redefine tokens (apenas consome var()).
   - NÃO cria .btn/.card/.input etc.
   - Pode definir wrappers/variações de seção (hero/alt) e espaçamento vertical.
   ========================================================================== */

/* --------------------------------------------------------------------------
   P0 — Wrapper e ritmo vertical (macro)
   -------------------------------------------------------------------------- */

.section {
  /* Ritmo vertical padrão */
  padding-block: var(--mc-gap-6, 40px);
}

@media (min-width: 900px) {
  .section {
    padding-block: var(--mc-gap-7, 56px);
  }
}

.section--tight {
  padding-block: var(--mc-gap-5, 32px);
}

.section--loose {
  padding-block: calc(var(--mc-gap-7, 56px) * 1.15);
}

/* Inner padronizado (compatível, caso você use no futuro) */
.section__inner {
  width: min(100% - (var(--mc-gap-5, 32px) * 2), var(--mc-container, 1120px));
  margin-inline: auto;
}

.section__inner--flush {
  width: min(100%, var(--mc-container, 1120px));
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   P0 — Fundos de seção (token-driven)
   -------------------------------------------------------------------------- */

.section--default {
  background: transparent;
}

.section--alt {
  background: var(--mc-gradient-alt, transparent);
}

.section--surface {
  background: var(--mc-surface, #101823);
}

.section--surface-2 {
  background: var(--mc-surface-2, #0f1520);
}

/* Separadores suaves */
.section--divider {
  border-top: 1px solid var(--mc-sep, rgba(231, 238, 252, 0.08));
}

.section--divider-strong {
  border-top: 1px solid var(--mc-border-soft, rgba(231, 238, 252, 0.14));
}

/* --------------------------------------------------------------------------
   P0 — Hero (macro visual) — sem virar componente
   -------------------------------------------------------------------------- */

.section--hero {
  background: var(--mc-gradient-hero, transparent);
  padding-block: var(--mc-gap-7, 56px);
}

@media (min-width: 900px) {
  .section--hero {
    padding-block: calc(var(--mc-gap-7, 56px) * 1.25);
  }
}

/* Garanta respiro quando hero vem colado no header */
.section--hero.section--divider,
.section--hero.section--divider-strong {
  border-top-color: var(--mc-border-soft, rgba(231, 238, 252, 0.14));
}

/* --------------------------------------------------------------------------
   P0 — “Section head” (arquitetura de seção, não componente)
   - padroniza título + texto auxiliar
   -------------------------------------------------------------------------- */

.section-head {
  margin-bottom: var(--mc-gap-5, 32px);
}

.section-head > :where(h2, .h2) {
  margin-bottom: var(--mc-gap-2, 10px);
}

.section-head > :where(p, .muted) {
  max-width: 72ch;
}

/* --------------------------------------------------------------------------
   P0 — Ritmo interno genérico (arquitetura de conteúdo)
   -------------------------------------------------------------------------- */

.flow > * + * {
  margin-top: var(--mc-gap-4, 24px);
}

.flow--tight > * + * {
  margin-top: var(--mc-gap-3, 16px);
}

.flow--loose > * + * {
  margin-top: var(--mc-gap-6, 40px);
}

/* --------------------------------------------------------------------------
   P0 — Grid macro (estrutura de seção, não componente)
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--mc-gap-4, 24px);
}

.grid--2 {
  grid-template-columns: 1fr;
}

.grid--3 {
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .grid--2 {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   P0 — Alternância visual “cinematográfica” sem hardcode
   - reforça ritmo do scroll (UX emocional)
   -------------------------------------------------------------------------- */

.section.section--alt {
  position: relative;
}

.section.section--alt::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* brilho ultra sutil para “camadas” (token-first) */
  background: var(
    --mc-alt-overlay,
    radial-gradient(1200px 600px at 15% 10%, rgba(231, 238, 252, 0.06), transparent 60%)
  );
  opacity: 0.9;
}

/* --------------------------------------------------------------------------
   P0 — Espaços seguros para imagens/diagramas (slots)
   - NÃO cria componente; apenas reserva área em seções
   -------------------------------------------------------------------------- */

.section--diagram {
  /* quando você adicionar a seção do diagrama no HTML */
  background: var(--mc-gradient-alt, transparent);
}

.section--diagram .diagram-wrap {
  /* wrapper macro para centralizar um SVG/IMG */
  display: grid;
  place-items: center;
  gap: var(--mc-gap-4, 24px);
}

/* --------------------------------------------------------------------------
   Nota intencional (Caracol 12/10)
   - sections.css define “onde” e “quanto” (ritmo/fundos/wrappers).
   - components.css define “o quê” (botões, cards, inputs, etc.).
   - layout.css define base global (body/html/links/foco).
   -------------------------------------------------------------------------- */