/* ============================================================================
   enviquo — 02-envie.css
   BRIEF §3 — SEÇÃO NUMERADA 01 · ENVIE (fundo Canvas #F1F1F1)
   Prefixo: .s02-  ·  consome tokens.css e as classes da fundação (base.css).
   Mobile-first; breakpoints 768 e 1024. Sem transições próprias: todo o
   motion da seção é o reveal .rv da fundação (que já respeita
   prefers-reduced-motion). Nada aqui anima width/height.
   ========================================================================== */

.s02-envie { background: var(--enviquo-canvas); }

.s02-head { margin-bottom: clamp(3rem, 2rem + 4vw, 5.5rem); }

/* ——— ritmo dos 3 blocos alternados ——— */
.s02-blocos {
  display: grid;
  gap: clamp(4rem, 3rem + 5vw, 7rem);
}

.s02-bloco {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

.s02-texto {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  max-width: 34rem;
  min-width: 0;
}

.s02-texto p:not(.eyebrow-mono) { color: var(--gray-700); }

.s02-visual { min-width: 0; }

/* ============================================================
   base compartilhada dos mockups (painéis brancos, sombra suave)
   ============================================================ */
.s02-mock {
  font-size: 0.8125rem;
  line-height: 1.45;
  width: 100%;
}

.s02-mock svg { flex: none; }

/* rótulo técnico pequeno: Geist Mono, caixa alta, tracking largo */
.s02-mini-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--gray-500);
}

.s02-num { font-variant-numeric: tabular-nums; }

/* pílula de "botão" desenhado (não é interativo: mockup) */
.s02-pillbtn {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.s02-pillbtn-ink {
  background: var(--enviquo-ink);
  color: var(--enviquo-paper);
}

/* barra-esqueleto de texto */
.s02-bar {
  display: block;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--gray-200);
}

.s02-bar--w80 { width: 80%; }
.s02-bar--w70 { width: 70%; }
.s02-bar--w55 { width: 55%; }
.s02-bar--w40 { width: 40%; }

/* ============================================================
   a. mockup EDITOR (card destaque: chanfro 60° no canto sup-dir)
   ============================================================ */
.s02-editor {
  --chanfro-x: 22px;
  overflow: hidden; /* garante o raio nos cantos não chanfrados */
}

.s02-editor-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  /* padding-right maior: mantém a pílula fora da queda do chanfro */
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  border-bottom: 1px solid var(--gray-200);
}

.s02-file {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--gray-600);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* coluna de blocos: chips que quebram linha no mobile, coluna no ≥768 */
.s02-lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--gray-200);
}

.s02-lista li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--gray-50);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--gray-700);
  white-space: nowrap;
}

.s02-lista li.is-ativo {
  border-color: var(--gray-900);
  background: var(--enviquo-paper);
  color: var(--gray-900);
}

/* canvas do e-mail em montagem */
.s02-canvas {
  padding: 1rem;
  background: var(--gray-50);
}

.s02-email {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* sem isto a foto de 800px estica a
     coluna e o e-mail vaza para fora do card (bug visto em 27/07) */
  gap: 0.625rem;
  justify-items: start;
  padding: 1.25rem;
  background: var(--enviquo-paper);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
}

.s02-email-marca {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* tíquete de logo fictício: paralelogramo a 60° (dx = 14px ÷ tan 60°) */
.s02-logo-dot {
  inline-size: 14px;
  aspect-ratio: 1;
  background: var(--enviquo-ink);
  clip-path: polygon(0% 100%, 58% 0%, 100% 0%, 42% 100%);
}

.s02-email-loja {
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
}

.s02-email-h {
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--gray-900);
}

/* (a regra antiga com placeholder 16/7 saiu: agora a imagem é foto real,
   definida no bloco de campanha no fim deste arquivo) */

/* bloco selecionado no canvas (espelha o chip "Botão" ativo da coluna) */
.s02-email-sel {
  position: relative;
  margin-top: 0.5rem;
  padding: 0.5rem;
  border: 1px dashed var(--gray-900);
  border-radius: 8px;
}

.s02-tag {
  position: absolute;
  top: -0.5rem;
  right: 0.5rem;
  padding: 0.0625rem 0.375rem;
  background: var(--enviquo-ink);
  color: var(--enviquo-paper);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.s02-email-btn {
  display: inline-flex;
  padding: 0.5rem 0.875rem;
  background: var(--enviquo-ink);
  color: var(--enviquo-paper);
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1.2;
}

/* ============================================================
   b. mockup IA — "Melhorar texto" com custo em créditos
   ============================================================ */
.s02-ia {
  display: grid;
  gap: var(--space-4);
  padding: 1.25rem;
  max-width: 30rem;
}

.s02-ia-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}

.s02-ia-titulo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--gray-900);
}

/* saldo sempre visível: chip mono */
.s02-saldo {
  padding: 0.25rem 0.625rem;
  background: var(--gray-100);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--gray-700);
  white-space: nowrap;
}

.s02-ia-campo {
  display: grid;
  gap: 0.375rem;
}

.s02-ia-atual {
  padding: 0.625rem 0.75rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  color: var(--gray-700);
}

.s02-ia-acoes li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: 0.625rem;
}

.s02-ia-acoes li:not(:last-child) { border-bottom: 1px solid var(--gray-100); }

.s02-acao {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
  color: var(--gray-700);
}

.s02-custo,
.s02-saldo-apos {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--gray-600);
  white-space: nowrap;
}

/* resultado: destaque por borda Ink (sem vermelho neste mockup) */
.s02-ia-sugestao {
  display: grid;
  gap: 0.625rem;
  padding: 0.875rem;
  border: 1px solid var(--gray-900);
  border-radius: 12px;
}

.s02-ia-nova {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--gray-900);
}

.s02-ia-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}

/* ============================================================
   c. mockup VARIÁVEIS + preview personalizado
   ============================================================ */
.s02-varset {
  display: grid;
  gap: var(--space-4);
}

.s02-vars {
  display: grid;
  gap: var(--space-3);
  padding: 1rem 1.25rem;
}

.s02-vars-lista {
  display: grid;
  gap: var(--space-2);
}

.s02-vars-lista li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.s02-vars-lista svg { color: var(--gray-500); }

.s02-vars-lista code {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  padding: 0.1875rem 0.375rem;
  background: var(--gray-100);
  border-radius: 4px;
  color: var(--gray-700);
}

.s02-var-valor {
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
}

.s02-preview {
  display: grid;
  gap: var(--space-4);
  padding: 1.25rem;
  max-width: 34rem;
}

.s02-preview-campo {
  display: grid;
  gap: 0.375rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--gray-200);
}

.s02-preview-assunto {
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--gray-900);
}

.s02-preview-corpo {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
}

.s02-preview-corpo p { color: var(--gray-700); }

/* campo destacado: o único vermelho da seção
   (texto signal-700 = 4,63:1 sobre signal-50; lei do #E62208+ atendida) */
.s02-var {
  padding: 0 0.25rem;
  background: var(--signal-50);
  color: var(--signal-700);
  border-radius: 4px;
  font-weight: 600;
}

/* ============================================================
   ≥768: editor ganha coluna lateral; vars + preview se sobrepõem
   ============================================================ */
@media (min-width: 768px) {
  .s02-editor-corpo {
    display: grid;
    grid-template-columns: 10.5rem minmax(0, 1fr);
  }

  .s02-lista {
    flex-direction: column;
    align-items: stretch;
    align-content: start;
    border-bottom: 0;
    border-right: 1px solid var(--gray-200);
  }

  .s02-lista li { white-space: normal; }

  .s02-canvas { padding: 1.25rem 1.5rem 1.5rem; }

  /* profundidade: o painel de variáveis "flutua" sobre a prévia */
  .s02-vars {
    position: relative;
    z-index: 1;
    max-width: 17rem;
  }

  .s02-preview {
    margin-top: -2.25rem;
    margin-left: clamp(2rem, 6vw, 4.5rem);
    /* o deslocamento entra na conta da largura: margem + caixa nunca passam
       da coluna do grid (a trilha auto NÃO desconta a margem sozinha).
       Sem isto, a 1024px a prévia estourava 20px de scroll horizontal. */
    max-width: min(34rem, 100% - clamp(2rem, 6vw, 4.5rem));
  }
}

/* ============================================================
   ≥1024: blocos em duas colunas, alternando texto ↔ mockup
   ============================================================ */
@media (min-width: 1024px) {
  .s02-bloco {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }

  /* bloco b: mockup à esquerda, texto à direita (só ordem visual;
     nada interativo dentro, então a ordem de leitura não muda) */
  .s02-bloco--flip .s02-texto { order: 2; }
  .s02-bloco--flip .s02-visual { order: 1; }

  .s02-ia { margin-inline: auto; }
}

/* ——— e-mails de exemplo com cara de campanha real (27/07) ———
   Antes o corpo era barra cinza + placeholder de imagem vazio: lia como
   rascunho sem vida. Agora entra foto de campanha e copy de verdade. */
.s02-email-img {
  overflow: hidden;
  border-radius: 8px;
  margin-block: 0.625rem;
  aspect-ratio: 16 / 10;   /* 4/3 deixava o e-mail alto e cortava o botão */
  inline-size: 100%;
  background: var(--gray-100);
}

.s02-email-img img {
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.s02-email-p {
  margin-block-start: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--gray-600);
}

.s02-email-rodape {
  margin-block-start: 0.625rem;
  padding-block-start: 0.5rem;
  border-block-start: 1px solid var(--gray-200);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--gray-500);
}

.s02-preview-foto {
  overflow: hidden;
  border-radius: 8px;
  margin-block-start: 0.625rem;
  aspect-ratio: 16 / 9;
  background: var(--gray-100);
}

.s02-preview-foto img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.s02-preview-cta { margin-block-start: 0.625rem; }