/* ============================================================
   Upsell 147 — Selva Club (versão enxuta, 2 telas)
   Dark tribal. Archivo Black + Montserrat. Verde escasso.
   Mobile-first.
   ============================================================ */

:root {
  --bg: #0a0a0a;
  --bg-raised: #111311;
  --ink: #ffffff;
  --ink-soft: #a8a8a8;
  --ink-dim: #6b6b6b;
  --green: #00e676;
  --green-dark: #00b85e;
  --alert: #ff5252;
  --line: rgba(255, 255, 255, 0.08);
  --font-display: "Archivo Black", sans-serif;
  --font-body: "Montserrat", sans-serif;
  --timerbar-h: 42px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  padding-top: var(--timerbar-h);
}

img { max-width: 100%; display: block; }

/* ---------- estados vivo/expirado ---------- */

body:not(.is-expired) .only-expired { display: none !important; }
body.is-expired .only-live { display: none !important; }

/* ---------- atmosfera ---------- */

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 14px;
}

.eyebrow--green { color: var(--green); }

/* ---------- animações ---------- */

.reveal-load {
  opacity: 0;
  transform: translateY(18px);
  animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--d, 0) * 0.16s + 0.1s);
}

@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-load, .reveal { opacity: 1; transform: none; animation: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   BARRA DE URGÊNCIA
   ============================================================ */

.timerbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: var(--timerbar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(6, 12, 8, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 230, 118, 0.25);
}

.timerbar strong {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.08em;
  min-width: 52px;
  display: inline-block;
  text-align: center;
}

.timerbar.is-urgent {
  color: var(--alert);
  border-bottom-color: rgba(255, 82, 82, 0.4);
  animation: urgentBlink 1s steps(2, start) infinite;
}

@keyframes urgentBlink {
  50% { background: rgba(40, 8, 8, 0.94); }
}

body:not(.is-expired) .timerbar__expired { display: none; }
body.is-expired .timerbar__live { display: none; }
body.is-expired .timerbar {
  color: var(--ink-soft);
  border-bottom-color: var(--line);
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .timerbar.is-urgent { animation: none; }
}

/* ============================================================
   TELA 1 — HERO (levou × deixou pra trás)
   ============================================================ */

.hero {
  min-height: calc(100svh - var(--timerbar-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px 20px 48px;
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(0, 230, 118, 0.09), transparent 60%),
    var(--bg);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  border: 1px solid rgba(0, 230, 118, 0.35);
  background: rgba(0, 230, 118, 0.06);
  border-radius: 999px;
  padding: 9px 18px;
  margin-bottom: 22px;
}

.hero__check {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green);
  color: #04180d;
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 7.6vw, 56px);
  line-height: 1.06;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.hero__flash {
  color: var(--green);
  text-shadow: 0 0 40px rgba(0, 230, 118, 0.35);
}

.hero__unlock {
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 440px;
  margin-bottom: 26px;
  line-height: 1.5;
}

.hero__unlock strong { color: var(--ink); font-weight: 700; }

/* ---------- card do PDF comprado ---------- */

.owned {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  width: 100%;
  max-width: 440px;
  border: 2px solid rgba(0, 230, 118, 0.4);
  background: rgba(0, 230, 118, 0.05);
  padding: 14px 16px;
  margin-bottom: 22px;
}

.owned__mix {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  width: 96px;
  flex-shrink: 0;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.owned__mix img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: top;
}

.owned__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.owned__stamp {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
}

.owned__info strong {
  font-family: var(--font-display);
  font-size: 16px;
  text-transform: uppercase;
  color: var(--ink);
}

.owned__mail {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* ---------- timer gigante ---------- */

.bigtimer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 28px;
}

.bigtimer__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--alert);
}

.bigtimer__clock {
  font-family: var(--font-display);
  font-size: clamp(72px, 22vw, 130px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 60px rgba(255, 82, 82, 0.25);
}

body.is-expired .bigtimer__clock { color: var(--ink-dim); text-shadow: none; }
body.is-expired .bigtimer__label { color: var(--ink-dim); }

/* ---------- stack de entregáveis ---------- */

.unlock {
  width: 100%;
  max-width: 520px;
  border: 2px solid rgba(0, 230, 118, 0.35);
  background: linear-gradient(180deg, #121512, #0c0e0c);
  padding: 20px 20px 0;
  margin-bottom: 26px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.unlock__tag {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 12px;
  text-align: center;
}

.unlock__list { list-style: none; text-align: left; }

.unlock__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.unlock__list li img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--line);
}

.unlock__list li span {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}

.unlock__check {
  font-style: normal;
  font-weight: 900;
  color: var(--green);
  margin-right: 7px;
}

.unlock__list li s {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-dim);
  text-decoration-color: rgba(255, 82, 82, 0.85);
  text-decoration-thickness: 2px;
  white-space: nowrap;
}

.unlock__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 14px 0 16px;
}

.unlock__total span {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.unlock__total s {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ink-soft);
  text-decoration-color: rgba(255, 82, 82, 0.9);
  text-decoration-thickness: 3px;
  white-space: nowrap;
}

/* ---------- oferta no hero ---------- */

.hero__offer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 460px;
  border: 2px solid rgba(0, 230, 118, 0.55);
  background: linear-gradient(180deg, rgba(0, 230, 118, 0.08), rgba(0, 230, 118, 0.02) 60%, transparent);
  padding: 24px 20px 22px;
  margin-bottom: 26px;
  box-shadow:
    0 0 0 1px rgba(0, 230, 118, 0.1),
    0 24px 70px rgba(0, 0, 0, 0.55),
    0 0 90px rgba(0, 230, 118, 0.12);
  animation: offerGlow 2.8s ease-in-out infinite;
}

@keyframes offerGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(0, 230, 118, 0.1), 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 70px rgba(0, 230, 118, 0.1); }
  50% { box-shadow: 0 0 0 1px rgba(0, 230, 118, 0.2), 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 130px rgba(0, 230, 118, 0.22); }
}

.hero__offerGlow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 90% at 50% 100%, rgba(0, 230, 118, 0.14), transparent 65%);
}

.hero__offerLabel {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
  position: relative;
}

.hero__offerPrice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
}

.hero__offerAnchors {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.hero__offerAnchors s {
  font-family: var(--font-display);
  color: var(--ink-dim);
  text-decoration-color: rgba(255, 82, 82, 0.9);
  text-decoration-thickness: 3px;
}

.hero__offerAnchors s:first-child { font-size: clamp(18px, 4.6vw, 26px); }
.hero__offerAnchors s:last-child { font-size: clamp(24px, 6vw, 36px); }

.hero__offerNow {
  font-family: var(--font-display);
  font-size: clamp(88px, 26vw, 150px);
  line-height: 0.95;
  color: var(--green);
  letter-spacing: -0.02em;
  text-shadow:
    0 0 30px rgba(0, 230, 118, 0.45),
    0 0 90px rgba(0, 230, 118, 0.25);
}

.hero__offerNow small {
  font-size: 0.3em;
  vertical-align: 1.7em;
  margin-right: 6px;
  color: var(--ink-soft);
  text-shadow: none;
}

.hero__offerNow--dead {
  color: var(--ink-dim);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 82, 82, 0.9);
  text-decoration-thickness: 6px;
  text-shadow: none;
}

.hero__offerTerms {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  position: relative;
}

body.is-expired .hero__offer {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  animation: none;
}

body.is-expired .hero__offerLabel { color: var(--ink-dim); }
body.is-expired .hero__offerGlow { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hero__offer { animation: none; }
}

/* ============================================================
   CTA
   ============================================================ */

.cta {
  display: block;
  width: 100%;
  max-width: 440px;
  background: linear-gradient(180deg, var(--green), var(--green-dark));
  color: #04180d;
  font-weight: 800;
  font-size: 17px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-align: center;
  border-radius: 0;
  padding: 18px 22px;
  box-shadow: 0 14px 34px rgba(0, 230, 118, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(0, 230, 118, 0.36);
}

.cta:active { transform: translateY(0); }

.cta--scroll {
  animation: pulse 2.4s ease-in-out infinite;
}

.cta--flash {
  margin-bottom: 28px;
  animation: pulse 2.4s ease-in-out infinite;
}

.cta__arrow {
  display: inline-block;
  margin-left: 6px;
  animation: bob 1.6s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 14px 34px rgba(0, 230, 118, 0.26); }
  50% { box-shadow: 0 14px 48px rgba(0, 230, 118, 0.45); }
}

.cta--expired {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  box-shadow: none;
  animation: none;
}

.cta--expired:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--ink-dim);
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .cta--scroll, .cta__arrow { animation: none; }
}

/* ============================================================
   TELA 2 — OFERTA
   ============================================================ */

.offer {
  position: relative;
  min-height: calc(100svh - var(--timerbar-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 20px 56px;
  border-top: 1px solid var(--line);
}

.offer__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 45% at 50% 40%, rgba(0, 230, 118, 0.07), transparent 65%);
}

.offer__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 6.8vw, 46px);
  line-height: 1.08;
  text-transform: uppercase;
  margin-bottom: 16px;
  position: relative;
}

.offer__title em {
  font-style: normal;
  color: var(--green);
}

.offer__lead {
  color: var(--ink-soft);
  max-width: 540px;
  margin: 0 auto 30px;
  position: relative;
}

.offer__lead strong { color: var(--ink); }

/* ---------- grid oferta (foto + card) ---------- */

.offer__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: 100%;
  max-width: 460px;
  margin-bottom: 30px;
  position: relative;
}

.offer__figure {
  width: 100%;
  border: 2px solid var(--line);
  background: var(--bg-raised);
}

.offer__figure img { width: 100%; height: auto; }

.offer__figure figcaption {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  text-align: left;
}

/* ---------- card de preço ---------- */

.price-card {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, #131613, #0d0f0d);
  border: 2px solid rgba(0, 230, 118, 0.35);
  border-radius: 0;
  padding: 26px 24px 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 60px rgba(0, 230, 118, 0.06);
  margin-bottom: 30px;
}

.price-card .cta { max-width: none; }

.price-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line);
}

.price-card__full {
  color: var(--ink-dim);
  font-size: 18px;
  font-weight: 700;
  text-decoration-color: rgba(255, 82, 82, 0.85);
  text-decoration-thickness: 2px;
}

.price-card__bridge {
  font-size: 15px;
  color: var(--ink-soft);
  padding: 16px 0 4px;
}

.price-card__bridge strong { color: var(--green); }

.price-card__final {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0 2px;
}

.price-card__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.price-card__price {
  font-family: var(--font-display);
  font-size: clamp(60px, 16vw, 88px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.price-card__price small {
  font-size: 0.35em;
  vertical-align: 1.4em;
  margin-right: 4px;
  color: var(--ink-soft);
}

.price-card__terms {
  font-size: 13px;
  color: var(--ink-dim);
  margin-top: 2px;
}

.price-card__timer {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--alert);
  margin: 14px 0;
}

.price-card__timer strong {
  font-family: var(--font-display);
  font-size: 15px;
}

.price-card__decline {
  display: inline-block;
  margin-top: 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.price-card__decline:hover { color: var(--ink-soft); }

body.is-expired .price-card__timer { color: var(--ink-dim); }
body.is-expired .price-card__full { text-decoration: none; color: var(--ink); }
body.is-expired .price-card__final,
body.is-expired .price-card__bridge { opacity: 0.35; }
body.is-expired .price-card { border-color: var(--line); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); }
body.is-expired .unlock { border-color: var(--line); }
body.is-expired .unlock__tag { color: var(--ink-dim); }

/* ---------- última chamada ---------- */

.lastcall {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-width: 460px;
  border: 2px dashed rgba(255, 82, 82, 0.5);
  background: rgba(255, 82, 82, 0.04);
  padding: 22px 20px;
  margin-top: 26px;
  position: relative;
}

.lastcall__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--alert);
}

.lastcall__clock {
  font-family: var(--font-display);
  font-size: clamp(48px, 13vw, 72px);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.lastcall__note {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  max-width: 340px;
}

body.is-expired .lastcall { border-color: var(--line); background: rgba(255, 255, 255, 0.02); }
body.is-expired .lastcall__label { color: var(--ink-dim); }
body.is-expired .lastcall__clock { color: var(--ink-dim); }

.offer__reassure {
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 480px;
  position: relative;
}

.offer__reassure strong { color: var(--green); }

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  padding: 28px 24px 36px;
  text-align: center;
  border-top: 1px solid var(--line);
}

.footer p {
  font-size: 11px;
  color: var(--ink-dim);
  max-width: 480px;
  margin: 0 auto 6px;
}

/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width: 760px) {
  .unlock { max-width: 560px; padding: 24px 28px 4px; }
  .unlock__list li span, .unlock__list li s { font-size: 15px; }

  .offer__grid {
    flex-direction: row;
    align-items: stretch;
    max-width: 880px;
  }

  .offer__figure {
    flex: 0 0 340px;
    display: flex;
    flex-direction: column;
  }

  .offer__figure img { flex: 1; object-fit: cover; }

  .offer__grid .price-card { flex: 1; }
}