/* NINA — landing + entrada (público). Builds on colors_and_type.css + app.css. */

/* ---------------- Landing nav ---------------- */
.lp-nav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 20px; padding: 16px 32px; background: rgba(255,251,245,0.82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.lp-nav__brand { display: flex; align-items: center; gap: 10px; }
.lp-nav__brand img { width: 34px; height: 34px; border-radius: 999px; }
.lp-nav__brand span { font-family: var(--font-display); font-weight: 600; font-size: 20px; }
.lp-nav__links { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.lp-nav__link { color: var(--muted); font-weight: 600; font-size: 14px; text-decoration: none; padding: 8px 12px; border-radius: 10px; transition: color var(--dur-fast), background var(--dur-fast); }
.lp-nav__link:hover { color: var(--ink); background: var(--surface-warm); }

.lp { max-width: 1140px; margin: 0 auto; padding: 0 32px; }
.lp-section { padding: 96px 0; }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--coral-strong); background: var(--coral-tint); padding: 6px 14px; border-radius: 999px; margin-bottom: 18px; }
.lp-h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 14px; }
.lp-lead { font-size: 18px; color: var(--muted); max-width: 620px; line-height: 1.55; }
.lp-center { text-align: center; }
.lp-center .lp-lead { margin-left: auto; margin-right: auto; }

/* ---------------- Hero ---------------- */
.hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; padding: 72px 0 88px; }
.hero__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(38px, 5.4vw, 62px); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 20px; }
.hero__title .accent { background: linear-gradient(120deg, var(--coral-strong), var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__sub { font-size: 19px; color: var(--muted); line-height: 1.55; margin: 0 0 28px; max-width: 520px; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__trust { display: flex; align-items: center; gap: 18px; margin-top: 22px; color: var(--subtle); font-size: 13px; flex-wrap: wrap; }
.hero__trust b { color: var(--ink); }

/* phone chat mock — FIXED SIZE, chat scrolls inside (não empurra a página) */
.phone { justify-self: center; position: relative; width: 310px; height: 620px; flex: none; background: #1c1c1e; border-radius: 44px; padding: 11px; box-shadow: var(--shadow-lg), 0 0 0 2px rgba(0,0,0,0.06); }
.phone__notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 104px; height: 26px; background: #1c1c1e; border-radius: 999px; z-index: 5; }
.phone__screen { width: 100%; height: 100%; border-radius: 34px; overflow: hidden; display: flex; flex-direction: column; background: #EFE7DE; }
.wa-header { display: flex; align-items: center; gap: 8px; padding: 13px 14px 9px; background: #fff; border-bottom: 1px solid #eee; padding-top: 46px; }
.wa-header img { width: 32px; height: 32px; border-radius: 999px; }
.wa-header__name { font-weight: 600; font-size: 14px; color: #111b21; display: flex; align-items: center; gap: 5px; }
.wa-verified { width: 13px; height: 13px; border-radius: 999px; background: #25D366; color: #fff; display: inline-grid; place-items: center; }
.wa-header__status { font-size: 11px; color: #54656f; }
.chat-body { flex: 1; min-height: 0; overflow: hidden; padding: 14px 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; background-color: #EFE7DE; background-image: radial-gradient(rgba(0,0,0,0.022) 1px, transparent 1px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px); mask-image: linear-gradient(to bottom, transparent 0, #000 26px); }
.chat-body::-webkit-scrollbar { display: none; }
.chat-day { flex: none; align-self: center; background: #fff; color: #54656f; font-size: 10px; font-weight: 600; padding: 3px 11px; border-radius: 8px; box-shadow: 0 1px 1px rgba(0,0,0,0.05); margin-bottom: 4px; }
.bubble { flex: none; max-width: 80%; padding: 7px 10px 5px; border-radius: 12px; font-size: 13px; line-height: 1.38; box-shadow: 0 1px 0.5px rgba(0,0,0,0.08); position: relative; animation: bubbleIn var(--dur-base) var(--ease-out); }
@keyframes bubbleIn { from { transform: translateY(8px) scale(0.96); } }
@media (prefers-reduced-motion: reduce) { .bubble { animation: none; } }
.bubble--me { align-self: flex-end; background: #D9FDD3; border-top-right-radius: 4px; }
.bubble--nina { align-self: flex-start; background: #fff; border-top-left-radius: 4px; }
.bubble__time { font-size: 9px; color: #667781; text-align: right; margin-top: 2px; }
.bubble--img { padding: 4px; }
.bubble--img .receipt { width: 142px; height: 92px; border-radius: 9px; background: var(--surface-warm); display: flex; flex-direction: column; gap: 5px; padding: 11px; }
.bubble--img .receipt div { height: 6px; border-radius: 3px; background: var(--line); }
.bubble--card { background: #fff; padding: 0; overflow: hidden; width: 210px; }
.bubble--typing { padding: 10px 12px; }
.mini-tx { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.mini-tx__ic { width: 34px; height: 34px; border-radius: 999px; background: var(--coral-tint); display: grid; place-items: center; font-size: 16px; flex: none; }
.wa-input { display: flex; align-items: center; gap: 8px; padding: 8px 10px 12px; background: #EFE7DE; }
.wa-input__box { flex: 1; background: #fff; border-radius: 18px; padding: 9px 14px; font-size: 12px; color: var(--subtle); }
.wa-input__send { width: 34px; height: 34px; border-radius: 999px; background: #25D366; color: #fff; display: grid; place-items: center; flex: none; }

/* ---------------- Logos / metrics strip ---------------- */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 36px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.metric { text-align: center; }
.metric__v { font-family: var(--font-display); font-weight: 600; font-size: 34px; letter-spacing: -0.02em; }
.metric__l { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* ---------------- Steps ---------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 28px; box-shadow: var(--shadow-sm); position: relative; }
.step__n { position: absolute; top: 22px; right: 24px; font-family: var(--font-display); font-size: 40px; font-weight: 600; color: var(--coral-tint); line-height: 1; }
.step__ic { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: var(--coral-tint); color: var(--coral-strong); margin-bottom: 18px; }
.step__t { font-family: var(--font-display); font-weight: 600; font-size: 20px; margin: 0 0 8px; }
.step__d { color: var(--muted); font-size: 15px; line-height: 1.5; }

/* ---------------- Features ---------------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast); }
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.feature__ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; }
.feature__t { font-weight: 700; font-size: 16px; margin: 0 0 6px; }
.feature__d { color: var(--muted); font-size: 14px; line-height: 1.5; }

/* ---------------- Charts proof ---------------- */
.proof { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.proof__card { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 28px; box-shadow: var(--shadow-md); }

/* ---------------- Pricing ---------------- */
.price-card { max-width: 440px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-lg); overflow: hidden; }
.price-card__head { padding: 32px 32px 24px; background: linear-gradient(135deg, var(--coral-tint), var(--amber-tint)); text-align: center; }
.price-card__name { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--coral-strong); font-size: 14px; margin-bottom: 10px; }
.price-card__val { font-family: var(--font-display); font-weight: 600; font-size: 54px; letter-spacing: -0.02em; line-height: 1; }
.price-card__per { color: var(--muted); font-size: 15px; margin-top: 6px; }
.price-card__trial { display: inline-block; margin-top: 14px; background: var(--surface); border-radius: 999px; padding: 6px 16px; font-size: 13px; font-weight: 700; color: var(--mint-strong); border: 1px solid var(--mint-tint); }
.price-card__body { padding: 28px 32px 32px; }
.price-perk { display: flex; gap: 11px; align-items: flex-start; padding: 7px 0; font-size: 15px; }
.price-perk svg { color: var(--mint-strong); flex: none; margin-top: 2px; }

/* ---------------- FAQ ---------------- */
.faq { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; text-align: left; background: none; border: none; padding: 22px 4px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--ink); cursor: pointer; }
.faq-q svg { flex: none; color: var(--coral-strong); transition: transform var(--dur-base) var(--ease-out); }
.faq-item.open .faq-q svg { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-out); }
.faq-item.open .faq-a { max-height: 240px; }
.faq-a p { margin: 0; padding: 0 4px 22px; color: var(--muted); font-size: 16px; line-height: 1.6; }

/* ---------------- CTA band + footer ---------------- */
.cta-band { background: linear-gradient(135deg, var(--coral-strong), #d8431f); border-radius: 32px; padding: 64px 48px; text-align: center; color: #fff; position: relative; overflow: hidden; }
.cta-band h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 4vw, 42px); margin: 0 0 14px; letter-spacing: -0.02em; }
.cta-band p { font-size: 18px; opacity: 0.92; margin: 0 0 28px; }
.cta-band__glow { position: absolute; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(251,191,36,0.4), transparent 70%); top: -120px; right: -80px; }

.lp-footer { border-top: 1px solid var(--line); padding: 48px 0; margin-top: 24px; }
.lp-footer__grid { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.lp-footer__links { display: flex; gap: 28px; flex-wrap: wrap; }
.lp-footer__links a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; }
.lp-footer__links a:hover { color: var(--coral-strong); }

.ios-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff; padding: 9px 16px; border-radius: 12px; font-size: 13px; font-weight: 600; text-decoration: none; }

/* ---------------- Entrada (registro / OTP) ---------------- */
.entry { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.entry__aside { background: linear-gradient(160deg, var(--coral-tint), var(--amber-tint)); padding: 56px; display: flex; flex-direction: column; justify-content: space-between; }
.entry__brand { display: flex; align-items: center; gap: 10px; }
.entry__brand img { width: 38px; height: 38px; border-radius: 999px; }
.entry__brand span { font-family: var(--font-display); font-weight: 600; font-size: 22px; }
.entry__aside-h { font-family: var(--font-display); font-weight: 600; font-size: 34px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 16px; }
.entry__panel { display: flex; align-items: center; justify-content: center; padding: 48px 32px; }
.entry__form { width: 100%; max-width: 400px; }
.otp-inputs { display: flex; gap: 12px; justify-content: center; }
.otp-inputs input { width: 60px; height: 70px; text-align: center; font-family: var(--font-display); font-size: 30px; font-weight: 600; border: 1.5px solid var(--line); border-radius: 16px; background: var(--surface); }
.otp-inputs input:focus { border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-tint); outline: none; }

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .hero__sub { margin-left: auto; margin-right: auto; }
  .hero__cta, .hero__trust { justify-content: center; }
  .chat-phone, .phone { order: -1; }
  .proof { grid-template-columns: 1fr; gap: 28px; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .steps, .features { grid-template-columns: 1fr; }
  .entry { grid-template-columns: 1fr; }
  .entry__aside { display: none; }
}
@media (max-width: 560px) {
  .lp { padding: 0 18px; }
  .lp-nav { padding: 14px 18px; }
  .lp-nav__link.hide-xs { display: none; }
  .lp-section { padding: 64px 0; }
  .cta-band { padding: 44px 24px; }
  .otp-inputs input { width: 52px; height: 62px; font-size: 26px; }
}