/* EngExpose — padrões visuais reutilizáveis.
   Depende de tokens/colors.css, tokens/typography.css e tokens/spacing.css.
   Prefixo "ee-" em todas as classes para não colidir com o CSS de cada projeto. */

/* ---------- Texto ---------- */
.ee-eyebrow{font-family:var(--font-mono);font-weight:500;font-size:var(--text-xs);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-secondary)}
.ee-display{font-family:var(--font-display);font-weight:var(--weight-black);text-transform:uppercase;
  line-height:var(--leading-display);letter-spacing:var(--tracking-display);color:var(--text-primary);text-wrap:balance;margin:0}
.ee-grad-text{background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Botões ---------- */
.ee-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-body);font-weight:var(--weight-black);font-size:var(--text-base);line-height:1;
  padding:16px 26px;border-radius:var(--radius-pill);border:2px solid transparent;cursor:pointer;
  text-decoration:none;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
.ee-btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.ee-btn--primary{background:var(--gradient-brand);color:var(--text-on-brand);box-shadow:var(--shadow-glow)}
.ee-btn--primary:hover{transform:translateY(-2px)}
.ee-btn--ghost{background:transparent;color:var(--text-primary);border-color:var(--border-default)}
.ee-btn--ghost:hover{border-color:var(--brand-secondary)}
.ee-btn--sm{padding:10px 16px;font-size:var(--text-sm)}
.ee-btn--block{width:100%}

/* ---------- Tag ---------- */
.ee-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-weight:500;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:var(--radius-pill);
  border:1px solid var(--border-default);color:var(--text-secondary);background:var(--surface-card)}
.ee-tag--live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand-accent)}
.ee-tag--brand{background:var(--gradient-brand);color:var(--text-on-brand);border-color:transparent}

/* ---------- Legenda (estilo legenda de vídeo) ----------
   A assinatura visual da marca: frases em inglês como legendas de série/vídeo. */
.ee-caption{display:inline;font-family:var(--font-body);font-weight:var(--weight-bold);font-size:var(--text-md);
  line-height:1.7;color:#FFFFFF;background:rgba(11,10,22,.82);padding:3px 10px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:4px}
.ee-caption-block{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.ee-caption-block small{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:#FFFFFF;
  background:rgba(11,10,22,.82);padding:2px 8px;border-radius:4px}

/* ---------- Card ---------- */
.ee-card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--space-6)}

/* ---------- Passo do método VIVA ---------- */
.ee-step{display:grid;grid-template-columns:auto 1fr;gap:var(--space-5);align-items:start}
.ee-step__letter{font-family:var(--font-display);font-weight:var(--weight-black);font-size:var(--text-4xl);line-height:.8;
  background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;color:transparent;min-width:.7em}
.ee-step__title{font-family:var(--font-display);font-weight:var(--weight-black);text-transform:uppercase;
  font-size:var(--text-xl);line-height:1;margin:0 0 var(--space-2);color:var(--text-primary)}
.ee-step__title small{font-size:inherit;color:var(--text-secondary);font-weight:600}
.ee-step p{margin:0;color:var(--text-secondary);line-height:var(--leading-normal)}

/* ---------- Medidor de horas de exposição ---------- */
.ee-meter{display:grid;gap:var(--space-2)}
.ee-meter__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
.ee-meter__value{white-space:nowrap;text-transform:none;font-family:var(--font-mono);font-size:var(--text-lg);color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:0}
.ee-meter__track{position:relative;height:12px;border-radius:var(--radius-pill);background:var(--surface-raised);overflow:hidden}
.ee-meter__fill{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--gradient-brand)}
.ee-meter__ticks{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);font-variant-numeric:tabular-nums}

/* ---------- Plano / preço ---------- */
.ee-plan{display:flex;flex-direction:column;gap:var(--space-5);background:var(--surface-card);
  border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--space-6)}
.ee-plan--featured{border:2px solid transparent;
  background:linear-gradient(var(--surface-card),var(--surface-card)) padding-box,var(--gradient-brand) border-box}
.ee-plan__name{font-family:var(--font-display);font-weight:var(--weight-black);text-transform:uppercase;font-size:var(--text-2xl);line-height:.95;margin:0;color:var(--text-primary)}
.ee-plan__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-family:var(--font-display);font-weight:var(--weight-black);font-size:var(--text-3xl);line-height:1;color:var(--text-primary);font-variant-numeric:tabular-nums}
.ee-plan__price small{line-height:1.3;font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-secondary);text-transform:none}
.ee-plan__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3);color:var(--text-primary)}
.ee-plan__list li{position:relative;padding-left:26px;line-height:1.4}
.ee-plan__list li::before{content:"";position:absolute;left:0;top:3px;width:14px;height:14px;border-radius:50%;background:var(--gradient-brand)}
.ee-plan__list li.is-off{color:var(--text-secondary);text-decoration:line-through}
.ee-plan__list li.is-off::before{background:var(--surface-raised)}

/* ---------- Depoimento ---------- */
.ee-quote{display:flex;flex-direction:column;gap:var(--space-4);margin:0}
.ee-quote blockquote{margin:0;font-size:var(--text-md);line-height:var(--leading-normal);color:var(--text-primary)}
.ee-quote figcaption{display:flex;align-items:center;gap:var(--space-3);color:var(--text-secondary);font-size:var(--text-sm)}
.ee-quote figcaption img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.ee-quote figcaption strong{display:block;color:var(--text-primary)}

/* ---------- Seletor de idioma PT | EN ---------- */
.ee-lang{display:inline-flex;padding:3px;border-radius:var(--radius-pill);border:1px solid var(--border-default);background:var(--surface-card)}
.ee-lang button{font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.08em;border:0;cursor:pointer;
  padding:6px 12px;border-radius:var(--radius-pill);background:transparent;color:var(--text-secondary)}
.ee-lang button[aria-pressed="true"]{background:var(--text-primary);color:var(--surface-page)}
.ee-lang button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* ---------- Foto com moldura em gradiente ---------- */
.ee-photo{position:relative;border-radius:var(--radius-lg);overflow:hidden;isolation:isolate}
.ee-photo img{display:block;width:100%;height:100%;object-fit:cover}
.ee-photo::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:var(--gradient-brand);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

@media (prefers-reduced-motion:reduce){.ee-btn{transition:none}.ee-btn--primary:hover{transform:none}}