/*
 * TROFENO Home CSS — v2.0 Production
 * Página inicial + modal de autenticação
 * Paleta: #000 · #111 · #fff · cinzas funcionais
 */


/* ══ BASE ══ */
.trf-home-wrap *, .trf-auth-overlay * { box-sizing: border-box; }
.trf-home-wrap {
  font-family: var(--font);
  color: var(--c-text-primary);
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
}
.trf-home-wrap button, .trf-auth-overlay button {
  font-family: var(--font);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* NOTE: no background:none here — individual button classes set their own bg */
}
.trf-home-wrap a, .trf-auth-overlay a { color: inherit; text-decoration: none; }
.trf-home-wrap *:focus-visible, .trf-auth-overlay *:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}

/* Container */
.trf-container { max-width: 1120px; margin: 0 auto; padding: 0 clamp(var(--sp-2), 5vw, var(--sp-4)); }

/* ══════════════════════════════
   NAV
══════════════════════════════ */
.trf-hnav {
  position: sticky; top: 0; z-index: 100;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(var(--sp-2), 5vw, var(--sp-4));
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-border);
}
.trf-hnav-brand { display: flex; align-items: center; }
.trf-hnav-logo {
  height: var(--logo-h);
  width: auto;
  max-width: var(--logo-maxw);
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
.trf-hnav-name  { font-size: var(--text-base); font-weight: 800; letter-spacing: .05em; color: var(--c-text-primary); }
.trf-hnav-links { display: flex; align-items: center; gap: 4px; }
.trf-hnav-link  {
  padding: 8px var(--sp-2);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: #111111;
  background: #ffffff;
  border: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.trf-hnav-link:hover { background: #f4f4f5; color: #000000; }
.trf-hnav-cta {
  padding: 8px var(--sp-2);
  margin-left: 4px;
  background: #111111;
  color: #ffffff;
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 700;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.trf-hnav-cta:hover {
  background: #000000;
  color: #ffffff;
}

/* ══════════════════════════════
   HERO
══════════════════════════════ */
.trf-hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: center;
  padding: clamp(var(--sp-6), 8vw, var(--sp-8)) clamp(var(--sp-2), 5vw, var(--sp-4));
  max-width: 1120px; margin: 0 auto;
}
.trf-hero-eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-brand); margin-bottom: var(--sp-1); display: block; }
.trf-hero-h1 { font-size: clamp(var(--text-2xl), 4.5vw, var(--text-4xl)); font-weight: 800; line-height: 1.1; letter-spacing: -.025em; color: var(--ink-900); margin-bottom: var(--sp-2); }
.trf-hero-body { font-size: var(--text-md); color: var(--c-text-secondary); line-height: 1.7; max-width: 46ch; margin-bottom: var(--sp-3); }
.trf-hero-btns { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.trf-hero-note { font-size: var(--text-sm); color: var(--c-text-tertiary); }

/* Buttons (home-specific, extends .tf-btn) */
.trf-btn-solid {
  background: #111111;
  color: #ffffff;
  border: 1.5px solid #111111;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0 var(--sp-3);
  min-height: 44px;
  border-radius: var(--r-md);
  font-size: var(--text-base);
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.trf-btn-solid:hover {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
}

.trf-btn-outline { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-3); min-height: 44px; border-radius: var(--r-md); border: 1.5px solid var(--c-border); background: transparent; color: var(--c-text-secondary); font-size: var(--text-base); font-weight: 600; font-family: var(--font); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.trf-btn-outline:hover {
  background: #111111;
  border-color: #111111;
  color: #ffffff;
}

/* Mockup */
.trf-mockup { background: var(--c-surface); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-xl), 0 0 0 1px rgba(0,0,0,.05); }
.trf-mockup-chrome { height: 36px; background: var(--c-surface-sunken); border-bottom: 1px solid var(--c-border); display: flex; align-items: center; gap: 6px; padding: 0 14px; }
.trf-mockup-chrome span { width: 10px; height: 10px; border-radius: 50%; }
.trf-mockup-chrome span:nth-child(1){ background: #ff6058; }
.trf-mockup-chrome span:nth-child(2){ background: #ffbd2e; }
.trf-mockup-chrome span:nth-child(3){ background: #27c840; }
.trf-mockup-body { display: flex; height: 220px; }
.trf-mockup-tools { width: 44px; background: var(--c-surface-sunken); border-right: 1px solid var(--c-border); display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 6px; }
.trf-mockup-tool { width: 26px; height: 26px; border-radius: 6px; background: var(--c-border); display: flex; align-items: center; justify-content: center; font-size: .6rem; color: var(--c-text-tertiary); }
.trf-mockup-tool.sel { background: var(--c-brand); color: var(--c-text-invert); }
.trf-mockup-stage { flex: 1; position: relative; background: var(--ink-50); overflow: hidden; }
.trf-mockup-page { position: absolute; background: #fff; border: 1px solid var(--c-border); border-radius: 3px; box-shadow: var(--shadow-sm); }
.trf-mockup-page--active { border-color: var(--c-brand); box-shadow: 0 0 0 2px var(--c-brand), var(--shadow-sm); }

/* ══════════════════════════════
   FEATURES
══════════════════════════════ */
.trf-features { padding: clamp(var(--sp-4), 6vw, var(--sp-6)) 0; background: var(--c-surface-sunken); border-top: 1px solid var(--c-border); }
.trf-eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-brand); margin-bottom: var(--sp-1); display: block; }
.trf-h2 { font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl)); font-weight: 800; letter-spacing: -.02em; color: var(--ink-900); margin-bottom: var(--sp-4); }
.trf-feats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.trf-feat { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: var(--sp-3); transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.trf-feat:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.trf-feat-ico { width: 44px; height: 44px; border-radius: var(--r-lg); background: var(--c-brand); color: var(--c-text-invert); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; margin-bottom: var(--sp-2); flex-shrink: 0; }
.trf-feat h3 { font-size: var(--text-base); font-weight: 700; color: var(--c-text-primary); margin-bottom: 4px; }
.trf-feat p  { font-size: var(--text-sm); color: var(--c-text-secondary); line-height: 1.6; }

/* ══════════════════════════════
   PRICING
══════════════════════════════ */
.trf-pricing { padding: clamp(var(--sp-4), 6vw, var(--sp-6)) 0; background: var(--c-surface); border-top: 1px solid var(--c-border); scroll-margin-top: 70px; }
.trf-pricing-sub { font-size: var(--text-base); color: var(--c-text-secondary); margin-top: 6px; margin-bottom: var(--sp-4); }
.trf-plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-2); align-items: start; }

.trf-plan { border: 1.5px solid var(--c-border); border-radius: var(--r-2xl); padding: var(--sp-3); position: relative; background: var(--c-surface); transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.trf-plan:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* Featured plan — fundo preto, texto branco */
.trf-plan--featured {
  border-color: var(--ink-900);
  background: var(--ink-800);
  box-shadow: var(--shadow-xl);
  transform: translateY(-6px);
}
.trf-plan--featured:hover { transform: translateY(-8px); box-shadow: var(--shadow-2xl); }

.trf-plan-badge-top { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--ink-900); color: #fff; padding: 3px var(--sp-2); border-radius: var(--r-full); font-size: var(--text-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.trf-plan--featured .trf-plan-badge-top { background: #fff; color: var(--ink-900); }

.trf-plan-name { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c-text-tertiary); margin-bottom: var(--sp-1); display: block; }
.trf-plan--featured .trf-plan-name { color: rgba(255,255,255,.5); }

.trf-plan-price-row { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; }
.trf-plan-amount { font-size: var(--text-4xl); font-weight: 800; color: var(--c-text-primary); line-height: 1; }
.trf-plan--featured .trf-plan-amount { color: #ffffff; }
.trf-plan-cur { font-size: var(--text-md); font-weight: 600; color: var(--c-text-tertiary); }
.trf-plan--featured .trf-plan-cur { color: rgba(255,255,255,.5); }
.trf-plan-period { font-size: var(--text-sm); color: var(--c-text-tertiary); margin-bottom: var(--sp-2); }
.trf-plan--featured .trf-plan-period { color: rgba(255,255,255,.45); }

.trf-plan-perks { list-style: none; padding: 0; margin: 0 0 var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); }
.trf-plan-perks li { font-size: var(--text-sm); color: var(--c-text-secondary); display: flex; align-items: flex-start; gap: var(--sp-1); }
.trf-plan-perks li::before { content: '✓'; color: var(--c-success); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.trf-plan--featured .trf-plan-perks li { color: rgba(255,255,255,.8); }
.trf-plan--featured .trf-plan-perks li::before { color: #4ade80; }

.trf-plan-btn { display: flex; align-items: center; justify-content: center; gap: var(--sp-1); width: 100%; min-height: 44px; padding: 0 var(--sp-2); border-radius: var(--r-md); font-size: var(--text-sm); font-weight: 700; font-family: var(--font); cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.trf-plan-btn--ghost {
  border: 1.5px solid #111111;
  background: #111111;
  color: #ffffff;
}
.trf-plan-btn--ghost:hover {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
}
.trf-plan-btn--wa { background: var(--c-wa); color: #fff; border: 1.5px solid var(--c-wa); }
.trf-plan-btn--wa:hover { background: var(--c-wa-hover); border-color: var(--c-wa-hover); color: #fff; }
.trf-plan--featured .trf-plan-btn--wa { background: #ffffff; color: #111111; border-color: #ffffff; } /* white bg, black text — intentional contrast */
.trf-plan--featured .trf-plan-btn--wa:hover { background: var(--ink-50); color: var(--ink-800); }
.trf-plan-btn--wa-outline { border: 1.5px solid var(--c-wa); color: #15803d; background: var(--c-success-surface); }
.trf-plan-btn--wa-outline:hover { background: #dcfce7; color: #14532d; }

/* ══════════════════════════════
   FOOTER
══════════════════════════════ */
.trf-footer { padding: var(--sp-3) 0; border-top: 1px solid var(--c-border); }
.trf-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.trf-footer p { font-size: var(--text-xs); color: var(--c-text-tertiary); }

/* ══════════════════════════════
   AUTH OVERLAY
══════════════════════════════ */
.trf-auth-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-2);
}
.trf-auth-card {
  background: var(--c-surface);
  border-radius: var(--r-2xl);
  padding: var(--sp-3);
  width: 100%; max-width: 472px;
  max-height: 96vh; overflow-y: auto;
  box-shadow: var(--shadow-2xl);
  animation: auth-in .22s cubic-bezier(.16,1,.3,1);
}
@keyframes auth-in { from { opacity:0; transform: translateY(12px) scale(.97); } }

.trf-auth-back { display: inline-flex; align-items: center; gap: 4px; color: var(--c-text-tertiary); font-size: var(--text-sm); font-weight: 600; padding: 0; margin-bottom: var(--sp-2); background: none; border: none; cursor: pointer; transition: color var(--dur-fast) var(--ease); }
.trf-auth-back:hover { color: var(--c-text-primary); }

.trf-auth-brand { display: flex; justify-content: center; margin-bottom: var(--sp-2); }
.trf-auth-logo {
  height: var(--logo-h);
  min-height: 24px;
  max-height: 56px;
  width: auto;
  max-width: var(--logo-maxw);
  object-fit: contain;
  display: block;
}
.trf-auth-wordmark { font-size: var(--text-xl); font-weight: 800; letter-spacing: .06em; color: var(--c-text-primary); }

.trf-auth-tabs { display: flex; gap: 2px; background: var(--c-surface-sunken); border-radius: var(--r-lg); padding: 4px; margin-bottom: var(--sp-3); }
.trf-auth-tab { flex: 1; padding: 9px; border-radius: var(--r-md); font-size: var(--text-sm); font-weight: 600; color: var(--c-text-tertiary); background: transparent; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.trf-auth-tab:hover:not(.active) { color: var(--c-text-secondary); background: rgba(0,0,0,.04); }
.trf-auth-tab.active { background: var(--c-surface); color: var(--c-text-primary); box-shadow: var(--shadow-xs); }

.trf-auth-panel-hd { margin-bottom: var(--sp-3); }
.trf-auth-panel-hd h2 { font-size: var(--text-xl); font-weight: 800; color: var(--c-text-primary); margin-bottom: 4px; }
.trf-auth-panel-hd p  { font-size: var(--text-sm); color: var(--c-text-secondary); }

/* AUTH FORM FIELDS (usa sistema tf-field + tf-input) */
.trf-fld { /* alias */ }
.trf-fld label { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-sm); font-weight: 600; color: var(--c-text-primary); margin-bottom: 6px; }
.trf-fld-link  { font-size: var(--text-xs); font-weight: 500; color: var(--c-text-tertiary); transition: color var(--dur-fast) var(--ease); }
.trf-fld-link:hover { color: var(--c-text-primary); }
.trf-req { color: var(--c-danger); margin-left: 2px; }

.trf-finput {
  display: block; width: 100%;
  min-height: 44px;
  padding: 0 var(--sp-2);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text-primary);
  font-family: var(--font);
  font-size: var(--text-base);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  -webkit-appearance: none;
}
.trf-finput:hover:not(:disabled) { border-color: var(--c-border-strong); }
.trf-finput:focus:not(:disabled) {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px rgba(0,0,0,.07);
}
.trf-finput::placeholder { color: var(--c-text-tertiary); }

/* Campo com o olho do password */
.trf-fld-pw { position: relative; }
.trf-fld-pw .trf-finput { padding-right: 44px; }
.trf-pw-eye { position: absolute; right: 0; top: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--c-text-tertiary); background: none; border: none; cursor: pointer; transition: color var(--dur-fast) var(--ease); border-radius: 0 var(--r-md) var(--r-md) 0; }
.trf-pw-eye:hover { color: var(--c-text-primary); }

/* Form rows */
.trf-fld      { margin-bottom: var(--sp-2); }
.trf-fld-row  { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.trf-check-row { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--text-sm); color: var(--c-text-secondary); cursor: pointer; margin-bottom: var(--sp-2); user-select: none; }
.trf-check-row input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--c-brand); flex-shrink: 0; }

/* Submit */
.trf-submit-btn {
  width: 100%;
  min-height: 48px;
  background: #111111;
  color: #ffffff;
  border: none;
  border-radius: var(--r-md);
  font-size: var(--text-base);
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: var(--sp-1);
  transition: background var(--dur-fast) var(--ease);
  margin-bottom: var(--sp-2);
}
.trf-submit-btn:hover:not(:disabled) { background: #000000; color: #ffffff; }
.trf-submit-btn:disabled { opacity: .38; cursor: not-allowed; }
.trf-btn-spin { display: flex; align-items: center; gap: var(--sp-1); }
.trf-spin-svg { animation: tf-spin 1s linear infinite; }
@keyframes tf-spin { to { transform: rotate(360deg); } }

/* Free plan pill */
.trf-free-pill { display: flex; align-items: center; gap: var(--sp-1); background: var(--c-success-surface); border: 1px solid #bbf7d0; border-radius: var(--r-md); padding: 10px var(--sp-2); font-size: var(--text-sm); font-weight: 600; color: #166534; margin-bottom: var(--sp-2); }

/* Form alerts */
.trf-form-alert { padding: 10px var(--sp-2); border-radius: var(--r-md); font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--sp-2); line-height: 1.5; }
.trf-form-alert.success { background: var(--c-success-surface); color: #14532d; border: 1px solid #bbf7d0; }
.trf-form-alert.error   { background: var(--c-danger-surface);  color: #991b1b; border: 1px solid #fecaca; }

/* Auth switch link */
.trf-auth-switch { font-size: var(--text-sm); color: var(--c-text-tertiary); text-align: center; }
.trf-text-link { color: var(--c-text-primary); font-weight: 700; font-size: var(--text-sm); font-family: var(--font); background: none; border: none; text-decoration: underline; cursor: pointer; transition: opacity var(--dur-fast) var(--ease); padding: 0; }
.trf-text-link:hover { opacity: .7; }

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width: 900px) {
  .trf-hero { grid-template-columns: 1fr; padding-top: var(--sp-5); }
  .trf-hero-right { display: none; }
  .trf-feats-grid { grid-template-columns: repeat(2, 1fr); }
  .trf-plans-grid { grid-template-columns: 1fr; }
  .trf-plan--featured { transform: none; }
}
@media (max-width: 600px) {
  .trf-feats-grid { grid-template-columns: 1fr; }
  .trf-auth-card { padding: var(--sp-2) var(--sp-2); border-radius: var(--r-xl); }
  .trf-fld-row { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════
   SCROLLBAR — Remove browser blue, apply dark gray
══════════════════════════════════════ */
html, body, .trf-home-wrap {
  scrollbar-width: thin;
  scrollbar-color: #3A3A3A transparent;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: transparent;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: #3A3A3A;
  border-radius: 100px;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: #111111;
}

/* ── Footer contacts ── */
.trf-footer-contacts {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.trf-footer-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  color: #6B7280;
  text-decoration: none;
  transition: color .12s;
}
.trf-footer-contact-link:hover { color: #111111; }
.trf-footer-contact-link svg   { flex-shrink: 0; }