/* ============================================================
   Renato Portela — Design Tokens
   Variáveis CSS prontas para uso na landing page.
   ============================================================ */

:root {
  /* ---------- BRAND ---------- */
  --brand:           #FF6B1A;
  --brand-hover:     #FF7A33;
  --brand-pressed:   #E55A0E;
  --brand-soft:      #FFE9DC;

  /* ---------- INK / SURFACES ---------- */
  --ink:             #111111;
  --ink-deep:        #0E1116;
  --white:           #FFFFFF;

  /* ---------- GRAYS ---------- */
  --gray-50:         #FAFAFA;
  --gray-100:        #F2F2F2;
  --gray-200:        #E5E5E5;
  --gray-500:        #737373;
  --gray-700:        #404040;

  /* ---------- SEMANTIC ---------- */
  --success:         #16A34A;
  --success-soft:    #DCFCE7;
  --warning:         #F59E0B;
  --error:           #DC2626;
  --error-soft:      #FEE2E2;
  --info:            #2563EB;

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-hero:         clamp(2.5rem, 5vw + 1rem, 4rem);    /* 40 -> 64 */
  --fs-h2:           clamp(2rem, 3vw + 1rem, 3rem);      /* 32 -> 48 */
  --fs-h3:           clamp(1.5rem, 1vw + 1rem, 1.75rem); /* 24 -> 28 */
  --fs-eyebrow:      0.8125rem;                          /* 13 */
  --fs-lead:         clamp(1.125rem, 0.5vw + 1rem, 1.3125rem); /* 18 -> 21 */
  --fs-body:         1.0625rem;                          /* 17 */
  --fs-small:        0.875rem;                           /* 14 */
  --fs-caption:      0.75rem;                            /* 12 */

  --lh-tight:        1.05;
  --lh-snug:         1.20;
  --lh-normal:       1.50;
  --lh-relaxed:      1.55;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;

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

  /* ---------- RADIUS ---------- */
  --radius-sm:       8px;
  --radius-md:       12px;
  --radius-lg:       18px;
  --radius-xl:       22px;
  --radius-2xl:      28px;
  --radius-pill:     980px;

  /* ---------- SHADOWS ---------- */
  --shadow-sm:       0 1px 2px rgba(17, 17, 17, 0.04);
  --shadow-md:       0 12px 32px rgba(17, 17, 17, 0.06);
  --shadow-lg:       0 24px 60px rgba(17, 17, 17, 0.10);
  --shadow-brand:    0 16px 40px rgba(255, 107, 26, 0.18);
  --shadow-cta:      0 8px 24px rgba(255, 107, 26, 0.30);

  /* ---------- SPACING (escala 4px) ---------- */
  --space-1:         4px;
  --space-2:         8px;
  --space-3:         12px;
  --space-4:         16px;
  --space-6:         24px;
  --space-8:         32px;
  --space-12:        48px;
  --space-16:        64px;
  --space-24:        96px;
  --space-32:        128px;

  /* ---------- LAYOUT ---------- */
  --container-max:   1200px;
  --container-pad:   24px;
  --container-pad-lg: 48px;

  /* ---------- MOTION ---------- */
  --ease-out:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
}

/* ============================================================
   BASE
   ============================================================ */
* {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--ink);
  background: var(--white);
}

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 var(--space-3);
}

.h1, h1 {
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: 0;
}

.h2, h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
  margin: 0;
}

.h3, h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: 0;
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--gray-700);
}

/* Pontuação em laranja (assinatura visual) */
.dot { color: var(--brand); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: all var(--duration-base) var(--ease-out);
  text-decoration: none;
}

.btn-primary {
  background: var(--brand);
  color: var(--white);
}
.btn-primary:hover {
  background: var(--brand-hover);
  box-shadow: var(--shadow-cta);
}
.btn-primary:active {
  background: var(--brand-pressed);
}

.btn-secondary {
  background: transparent;
  color: var(--brand);
  border: 1.5px solid var(--brand);
  padding: 12.5px 24px;
}
.btn-secondary:hover {
  background: var(--brand-soft);
}

.btn-link {
  background: transparent;
  color: var(--brand);
  padding: 0;
  border-radius: 0;
}
.btn-link .arrow {
  display: inline-block;
  transition: transform var(--duration-base) var(--ease-out);
}
.btn-link:hover .arrow {
  transform: translateX(3px);
}

.btn-on-dark {
  background: var(--white);
  color: var(--ink);
}
.btn-on-dark:hover {
  background: var(--brand-soft);
}

/* ============================================================
   FORM INPUTS
   ============================================================ */
.input-label {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--ink);
  margin-bottom: 6px;
}

.input {
  width: 100%;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: var(--fs-body);
  font-family: inherit;
  color: var(--ink);
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.input::placeholder {
  color: #A3A3A3;
}
.input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(255, 107, 26, 0.18);
}
.input.is-error {
  border-color: var(--error);
}
.input-error-msg {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--error);
}

/* ============================================================
   FILE UPLOAD AREA
   ============================================================ */
.upload-zone {
  background: var(--brand-soft);
  border: 2px dashed var(--brand);
  border-radius: var(--radius-lg);
  padding: 48px 24px;
  text-align: center;
  transition: all var(--duration-base) var(--ease-out);
}
.upload-zone__title {
  font-size: 18px;
  font-weight: var(--fw-semibold);
  color: var(--ink);
  margin: var(--space-4) 0 var(--space-2);
}
.upload-zone__hint {
  font-size: var(--fs-small);
  color: var(--gray-500);
}
.upload-zone.is-success {
  background: var(--success-soft);
  border: 2px solid var(--success);
}
.upload-zone.is-error {
  background: var(--error-soft);
  border: 2px solid var(--error);
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--gray-50);
  border-radius: 20px;
  padding: var(--space-8);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-brand);
}

.card__icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-soft);
  border-radius: 14px;
  color: var(--brand);
  margin-bottom: var(--space-6);
}
.card__title {
  font-size: 20px;
  font-weight: var(--fw-semibold);
  color: var(--ink);
  margin: 0 0 var(--space-2);
}
.card__desc {
  font-size: 16px;
  color: var(--gray-500);
  margin: 0;
}

/* Card horizontal de navegação rápida */
.nav-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 24px 20px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: all var(--duration-base) var(--ease-out);
}
.nav-card:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
}

/* Card de plano */
.plan-card {
  background: var(--white);
  padding: 64px var(--space-6);
  text-align: center;
  border-radius: var(--radius-xl);
}
.plan-card.is-featured {
  border: 2px solid var(--brand);
}
.plan-card__badge {
  display: inline-block;
  background: var(--brand);
  color: var(--white);
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
@media (min-width: 768px) {
  .container { padding: 0 var(--container-pad-lg); }
}

.section {
  padding: var(--space-16) 0;
}
@media (min-width: 768px) {
  .section { padding: var(--space-24) 0; }
}

.section--alt {
  background: var(--gray-50);
}

.section--dark {
  background: var(--ink-deep);
  color: var(--white);
}
.section--dark .h1,
.section--dark .h2,
.section--dark .h3 {
  color: var(--white);
}
.section--dark .lead {
  color: rgba(255, 255, 255, 0.75);
}