/* =========================================================================
   reZeta Sites — Landing page de campanha
   Herda os tokens de ../css/style.css e simplifica o layout.
   Não depende do Bootstrap — o grid necessário está aqui embaixo.
   ========================================================================= */

/* ---------- reset mínimo (esta página não carrega o Bootstrap) ---------- */
.lp, .lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
.lp { margin: 0; }
.lp img { max-width: 100%; }
.lp ul { margin: 0; }
.lp button { font: inherit; color: inherit; }

/* ---------- grid mínimo (substitui o Bootstrap nesta página) ---------- */
.lp .container {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 20px;
}
.lp-split {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 992px) {
  .lp-split { grid-template-columns: 1fr 1fr; }
}
.lp-center { text-align: center; }
@media (max-width: 575.98px) { .lp-hide-xs { display: none; } }

.lp { padding-top: 0; }

/* ---------- barra fixa enxuta ---------- */
.lp-bar {
  position: sticky; top: 0; z-index: 900;
  background: rgba(8,11,17,.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rz-line);
}
.lp-bar__in {
  display: flex; align-items: center; gap: 1rem;
  padding: .8rem 0;
}
.lp-bar img { height: 34px; width: auto; }
.lp-bar__cta { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.lp-bar__phone {
  font-family: var(--mono); font-size: .8rem; color: var(--rz-txt-2);
}
.lp-bar__phone:hover { color: var(--rz-primary-2); }

/* ---------- seções ---------- */
.lp-section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.lp-section--alt { background: var(--rz-bg-alt); border-block: 1px solid var(--rz-line); }
.lp-head { max-width: 760px; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.lp-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: .8rem; }
.lp-head p { font-size: 1.05rem; margin: 0; }

/* ---------- hero ---------- */
.lp-hero { position: relative; padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; }
.lp-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(760px 420px at 15% 20%, rgba(61,163,156,.12), transparent 70%),
    radial-gradient(620px 380px at 88% 78%, rgba(97,175,239,.07), transparent 70%);
}
.lp-hero > .container { position: relative; z-index: 1; }
.lp-hero h1 {
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.1;
  margin: 0 0 1.1rem;
}
.lp-hero h1 .hl {
  background: linear-gradient(96deg, var(--rz-primary-2), var(--rz-primary));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lp-hero .lp-sub { font-size: 1.12rem; max-width: 52ch; margin-bottom: 1.6rem; }

.lp-cta-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.6rem; }
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--mono); font-size: .9rem; font-weight: 600;
  padding: .95rem 1.5rem;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .22s cubic-bezier(.4,0,.2,1), background .22s ease, border-color .22s ease;
}
.lp-btn--primary { background: var(--rz-primary); color: #04120f; }
.lp-btn--primary:hover { background: var(--rz-primary-2); color: #04120f; transform: translateY(-2px); }
.lp-btn--ghost { background: transparent; border-color: var(--rz-line-2); color: var(--rz-txt); }
.lp-btn--ghost:hover { border-color: var(--rz-primary); color: var(--rz-primary-2); background: rgba(61,163,156,.07); transform: translateY(-2px); }
.lp-btn--wide { width: 100%; }

/* microcopy de confiança abaixo do CTA */
.lp-trust { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; font-family: var(--mono); font-size: .78rem; color: var(--rz-txt-3); }
.lp-trust span { display: inline-flex; align-items: center; gap: .4rem; }
.lp-trust span::before { content: '✦'; color: var(--rz-primary); font-size: .7rem; }
.lp-trust b { color: var(--rz-primary-2); font-weight: 600; }

/* "(leva 1 min)" dentro do botão — menor e discreto */
.lp-btn em { font-style: normal; opacity: .72; font-weight: 500; font-size: .84em; }
@media (max-width: 359.98px) { .lp-btn em { display: none; } }

/* mock de navegador do hero */
.lp-mock { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--rz-line); box-shadow: var(--sh-lg); background: var(--rz-card); }
.lp-mock img { display: block; width: 100%; height: auto; }

/* ---------- cards genéricos ---------- */
.lp-grid { display: grid; gap: 1.1rem; }
.lp-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.lp-grid--3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
@media (min-width: 992px) { .lp-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.lp-card {
  background: var(--rz-card);
  border: 1px solid var(--rz-line);
  border-radius: var(--r-md);
  padding: 1.6rem;
  transition: border-color .25s ease, transform .25s ease;
}
.lp-card:hover { border-color: var(--rz-line-teal); transform: translateY(-4px); }
.lp-card h3 { font-size: 1.12rem; margin: 0 0 .55rem; }
.lp-card p { font-size: .95rem; margin: 0; }
.lp-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--r-sm);
  background: rgba(61,163,156,.1);
  border: 1px solid var(--rz-line-teal);
  color: var(--rz-primary-2);
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

/* ---------- para quem é (dor) ---------- */
.lp-pain { border-left: 3px solid var(--rz-primary); }
.lp-pain ul { list-style: none; padding: 0; margin: 1rem 0 0; }
.lp-pain li {
  position: relative; padding: .3rem 0 .3rem 1.6rem;
  font-size: .95rem; color: var(--rz-txt-2);
}
.lp-pain li::before {
  content: '→'; position: absolute; left: 0; top: .3rem;
  font-family: var(--mono); color: var(--rz-primary); font-size: .85rem;
}

/* ---------- segmentos / ramos atendidos ---------- */
.lp-segs {
  counter-reset: lpseg;
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
@media (min-width: 992px) { .lp-segs { grid-template-columns: repeat(2, 1fr); } }
.lp-seg {
  position: relative;
  background: var(--rz-card);
  border: 1px solid var(--rz-line);
  border-radius: var(--r-md);
  padding: 1.6rem 1.6rem 1.5rem;
  transition: border-color .25s ease, transform .25s ease;
}
.lp-seg:hover { border-color: var(--rz-line-teal); transform: translateY(-4px); }
.lp-seg::before {
  counter-increment: lpseg;
  content: counter(lpseg, decimal-leading-zero);
  font-family: var(--mono); font-size: .78rem; color: var(--rz-primary);
  display: block; margin-bottom: .6rem;
}
.lp-seg h3 { font-size: 1.12rem; margin: 0 0 .5rem; }
.lp-seg__ramos { font-size: .92rem; color: var(--rz-txt-3); margin: 0 0 1rem; }
.lp-seg__foco {
  font-size: .93rem; color: var(--rz-txt-2); margin: 0;
  padding-top: .9rem; border-top: 1px solid var(--rz-line);
}
.lp-seg__foco b { font-family: var(--mono); font-size: .8rem; color: var(--rz-primary-2); font-weight: 600; }

/* ---------- preço ---------- */
.lp-price {
  background: var(--rz-card);
  border: 1px solid var(--rz-line);
  border-radius: var(--r-md);
  padding: 1.9rem 1.7rem;
  display: flex; flex-direction: column;
  position: relative;
}
.lp-price--featured { border-color: var(--rz-line-teal); box-shadow: 0 0 0 1px var(--rz-line-teal), var(--sh-lg); }
.lp-price__tag {
  position: absolute; top: -11px; left: 1.7rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
  background: var(--rz-primary); color: #04120f;
  padding: .22rem .6rem; border-radius: 999px; font-weight: 700;
}
.lp-price h3 { font-size: 1.25rem; margin: 0 0 .3rem; }
.lp-price__for { font-family: var(--mono); font-size: .76rem; color: var(--rz-txt-3); margin-bottom: 1.2rem; }
.lp-price__value { display: flex; align-items: baseline; gap: .45rem; margin-bottom: 1.3rem; }
.lp-price__from { font-family: var(--mono); font-size: .76rem; color: var(--rz-txt-3); }
.lp-price__num { font-size: 2.1rem; font-weight: 800; color: var(--rz-primary-2); letter-spacing: -.03em; }
.lp-price__desc { font-size: .93rem; color: var(--rz-txt-2); margin: 0 0 1.1rem; }
.lp-price ul { list-style: none; padding: 0; margin: 0 0 1.6rem; flex: 1 1 auto; }
.lp-price li {
  position: relative; padding: .32rem 0 .32rem 1.6rem;
  font-size: .93rem; color: var(--rz-txt-2);
}
.lp-price li::before {
  content: '✓'; position: absolute; left: 0; top: .32rem;
  font-family: var(--mono); font-size: .82rem; color: var(--rz-primary);
}
.lp-price__note { font-size: .82rem; color: var(--rz-txt-3); margin-top: 1rem; }

/* ---------- passos ---------- */
.lp-steps { counter-reset: lpstep; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (min-width: 992px) { .lp-steps { grid-template-columns: repeat(4, 1fr); } }
.lp-step {
  position: relative;
  background: var(--rz-card);
  border: 1px solid var(--rz-line);
  border-radius: var(--r-md);
  padding: 1.5rem 1.4rem 1.4rem;
}
.lp-step::before {
  counter-increment: lpstep;
  content: counter(lpstep, decimal-leading-zero);
  font-family: var(--mono); font-size: .78rem; color: var(--rz-primary);
  display: block; margin-bottom: .7rem;
}
.lp-step h3 { font-size: 1.03rem; margin: 0 0 .45rem; }
.lp-step p { font-size: .92rem; margin: 0; }

/* ---------- portfólio ---------- */
.lp-works { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
@media (min-width: 992px) { .lp-works { grid-template-columns: repeat(3, 1fr); } }
.lp-work {
  border: 1px solid var(--rz-line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--rz-card);
  transition: border-color .25s ease, transform .25s ease;
}
.lp-work:hover { border-color: var(--rz-line-teal); transform: translateY(-4px); }
.lp-work__shot { position: relative; background: var(--rz-panel); }
.lp-work__shot::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 24px; z-index: 2;
  background: var(--rz-panel); border-bottom: 1px solid var(--rz-line);
}
.lp-work__shot::after {
  content: ''; position: absolute; top: 8px; left: 11px; z-index: 3;
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(224,108,117,.6);
  box-shadow: 12px 0 0 rgba(229,192,123,.6), 24px 0 0 rgba(152,195,121,.6);
}
.lp-work__shot img {
  display: block; width: 100%; height: auto; margin-top: 24px;
  aspect-ratio: 16/10; object-fit: cover; object-position: top;
}
.lp-work__foot { padding: .9rem 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.lp-work__name { font-size: .95rem; font-weight: 600; color: var(--rz-txt); }
.lp-work__kind { font-family: var(--mono); font-size: .68rem; color: var(--rz-txt-3); }

/* ---------- depoimentos ---------- */
.lp-quote {
  background: var(--rz-card);
  border: 1px solid var(--rz-line);
  border-radius: var(--r-md);
  padding: 1.5rem;
  height: 100%;
  display: flex; flex-direction: column;
}
/* o texto ocupa o espaço livre, então a assinatura alinha nas três colunas */
.lp-quote p { font-size: .96rem; margin: 0 0 1rem; color: var(--rz-txt); flex: 1 1 auto; }
.lp-quote p::before { content: '“'; color: var(--rz-primary); font-size: 1.4rem; line-height: 0; margin-right: .12rem; }
.lp-quote__who {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  padding-top: .9rem;
  border-top: 1px solid var(--rz-line);
}
.lp-quote__name { font-family: var(--mono); font-size: .82rem; color: var(--rz-txt-2); }
.lp-quote__stars { color: var(--rz-amber); font-size: .72rem; letter-spacing: .1em; }

/* ---------- faq ---------- */
.lp-faq { max-width: 780px; margin: 0 auto; }
.lp-faq details {
  background: var(--rz-card);
  border: 1px solid var(--rz-line);
  border-radius: var(--r-sm);
  margin-bottom: .7rem;
  overflow: hidden;
}
.lp-faq details[open] { border-color: var(--rz-line-teal); }
.lp-faq summary {
  cursor: pointer; list-style: none;
  padding: 1rem 1.2rem;
  font-family: var(--mono); font-size: .92rem; color: var(--rz-txt);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: '+'; color: var(--rz-primary); font-size: 1.1rem; }
.lp-faq details[open] summary { color: var(--rz-primary-2); }
.lp-faq details[open] summary::after { content: '−'; }
.lp-faq .lp-faq__body {
  padding: 0 1.2rem 1.2rem;
  font-size: .94rem; color: var(--rz-txt-2);
}

/* ---------- cta final ---------- */
.lp-final {
  background: var(--rz-card);
  border: 1px solid var(--rz-line-teal);
  border-radius: var(--r-md);
  padding: clamp(2rem, 5vw, 3.2rem);
  text-align: center;
  box-shadow: var(--sh-lg);
}
.lp-final h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: .7rem; }
.lp-final p { max-width: 54ch; margin: 0 auto 1.6rem; }
.lp-final .lp-cta-row { justify-content: center; margin-bottom: 0; }

/* ---------- rodapé enxuto ---------- */
.lp-foot {
  border-top: 1px solid var(--rz-line);
  background: var(--rz-bg);
  padding: 2rem 0;
  font-family: var(--mono); font-size: .76rem; color: var(--rz-txt-3);
}
.lp-foot a { color: var(--rz-txt-3); }
.lp-foot a:hover { color: var(--rz-primary-2); }
.lp-foot__in { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; justify-content: space-between; }

/* ---------- barra fixa de CTA no mobile ---------- */
.lp-sticky {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1150;
  background: rgba(11,15,22,.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--rz-line-teal);
  padding: .7rem .9rem;
}
@media (max-width: 767.98px) {
  .lp-sticky { display: block; }
  .lp-foot { padding-bottom: 5.5rem; }
  .lp-bar__phone { display: none; }
  /* no mobile a barra fixa já é o CTA — esconde o botão flutuante do chat
     (a barra chama o mesmo chat) e sobe o painel para não cobrir nada */
  .lp .rzbot__launcher { display: none; }
  .lp .rzbot { bottom: 70px; }
}