/* ============================================================
   UNIVERSO TRÍA — Vivenci(lar)
   Vive separado do CSS da home: aqui .kicker tem filete dos dois
   lados e a .nav é outra. Carregado só na página do Vivenci(lar).
   ============================================================ */

.tria-viv .kicker{
  font-size:.72rem;font-weight:500;letter-spacing:.42em;text-transform:uppercase;
  color:var(--terra);display:flex;align-items:center;gap:14px;justify-content:center;
}
.tria-viv .kicker::before,.tria-viv .kicker::after{content:"";width:34px;height:1px;background:var(--terra)}

/* NAV simples */
.viv-nav{
  position:fixed;inset:0 0 auto 0;z-index:50;padding:18px 0;
  background:rgba(92,94,14,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.viv-nav .wrap{display:flex;align-items:center;justify-content:space-between}
.viv-nav-logo img{height:42px}
.nav-volta{
  font-size:.7rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--off);display:inline-flex;align-items:center;gap:10px;
  transition:color .3s ease;
}
.nav-volta:hover{color:var(--terra)}

/* HERO */
.viv-hero{
  position:relative;
  padding:190px 0 130px;
  background:var(--verde-noite);color:var(--off);
  text-align:center;overflow:hidden;
}
.viv-hero .bg{
  position:absolute;inset:0;
  background-image:var(--img);background-position:center 65%;background-size:cover;background-repeat:no-repeat;
  filter:grayscale(1) contrast(1.05);
  opacity:.42;
}
.viv-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(30,31,5,.7),rgba(30,31,5,.5) 55%,rgba(30,31,5,.95));
}
.viv-hero .conteudo{position:relative;z-index:2;width:min(780px,92%);margin:0 auto}
.viv-hero h1{
  font-family:var(--font-display);
  font-size:clamp(2.3rem,6vw,4rem);
  color:var(--off);margin:26px 0 24px;
}
.viv-hero p.sub{
  font-family:var(--font-poet);font-style:italic;
  font-size:clamp(1.2rem,2.4vw,1.55rem);
  color:rgba(254,252,249,.88);line-height:1.6;
}

/* PLANOS */
.planos{padding:130px 0 110px;background:var(--off)}
.planos h2,.incluso h2{
  font-family:var(--font-display);
  font-size:clamp(1.7rem,3.4vw,2.5rem);
  color:var(--verde);text-align:center;margin:24px 0 16px;
}
.planos .sub{
  text-align:center;max-width:52ch;margin:0 auto 70px;
  color:rgba(39,40,15,.8);
}
.plan-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,420px));
  gap:34px;justify-content:center;align-items:stretch;
}
.plano{
  border:1px solid var(--linha);border-radius:2px;
  padding:54px 46px;text-align:center;
  display:flex;flex-direction:column;gap:6px;
  background:var(--off);
  transition:transform .4s ease,box-shadow .4s ease;
}
.plano:hover{transform:translateY(-6px);box-shadow:0 24px 60px -30px rgba(39,40,15,.25)}
.plano.destaque{
  background:var(--verde-noite);color:var(--off);
  border-color:var(--verde-noite);position:relative;
}
.plano .selo{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--terra);color:var(--off);
  font-size:.6rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  padding:6px 18px;border-radius:2px;white-space:nowrap;
}
.plano .nome{
  font-size:.72rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;
  color:var(--terra);margin-bottom:18px;
}
.plano.destaque .nome{color:rgba(254,252,249,.9)}
.plano .preco{
  font-family:var(--font-poet);
  font-size:clamp(2.4rem,4.5vw,3.2rem);
  line-height:1.1;color:var(--verde);
}
.plano.destaque .preco{color:var(--off)}
.plano .preco small{font-size:.38em;font-family:var(--font-body);font-weight:400;letter-spacing:.08em}
.plano .cond{
  font-family:var(--font-poet);font-style:italic;
  font-size:1.1rem;color:var(--terra-deep);margin-top:8px;
}
.plano.destaque .cond{color:rgba(254,252,249,.8)}
.plano .obs{font-size:.82rem;color:rgba(39,40,15,.6);margin-top:14px}
.plano.destaque .obs{color:rgba(254,252,249,.55)}
.plano .btn{margin-top:34px;justify-content:center}

/* INCLUSO */
.incluso{background:var(--sand);padding:130px 0}
.incluso .sub{text-align:center;max-width:54ch;margin:0 auto 70px;color:rgba(39,40,15,.8)}
.inc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--linha);border:1px solid var(--linha);
}
.inc-item{
  background:var(--sand);padding:38px 32px;
  display:flex;flex-direction:column;gap:10px;
}
/* numeração romana no lugar de ícone: o site não usa emoji em lugar nenhum */
.inc-item .num{
  font-family:var(--font-poet);font-style:italic;
  font-size:.95rem;letter-spacing:.2em;color:var(--terra);
}
.inc-item h3{
  font-family:var(--font-poet);font-weight:500;
  font-size:1.25rem;color:var(--verde-escuro);
}
.inc-item p{font-size:.86rem;color:rgba(39,40,15,.72)}

/* QUOTE + CTA FINAL */
.fecho{
  background:var(--verde-noite);color:var(--off);
  padding:140px 0;text-align:center;position:relative;overflow:hidden;
}
.fecho::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:640px;height:640px;
  background:url("../img/submarca-agua-branco.png") center/contain no-repeat;
  opacity:.08;pointer-events:none;
}
.fecho .conteudo{position:relative;z-index:2;width:min(760px,92%);margin:0 auto}
.fecho p.quote{
  font-family:var(--font-poet);font-style:italic;
  font-size:clamp(1.4rem,3vw,2rem);line-height:1.6;
}
.fecho p.quote strong{font-weight:500;color:var(--terra)}
.fecho .btn{margin-top:48px}

/* FOOTER compacto */
.viv-footer{
  background:var(--verde-noite);color:var(--off);
  padding:60px 0 42px;border-top:1px solid var(--linha-clara);
  text-align:center;
}
.viv-footer img{width:170px;margin:0 auto 22px}
.viv-footer .frase{
  font-family:var(--font-poet);font-style:italic;
  color:rgba(254,252,249,.75);margin-bottom:26px;
}
.viv-footer .links{display:flex;flex-wrap:wrap;gap:26px;justify-content:center;margin-bottom:30px}
.viv-footer .links a{
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(254,252,249,.7);transition:color .3s ease;
}
.viv-footer .links a:hover{color:var(--terra)}
.viv-footer .copy{font-size:.7rem;letter-spacing:.14em;color:rgba(254,252,249,.4)}

@media(max-width:900px){
  .plan-grid{grid-template-columns:minmax(0,440px)}
  .inc-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .inc-grid{grid-template-columns:1fr}
  .plano{padding:46px 30px}
  .viv-hero{padding:160px 0 100px}
}

body.admin-bar .viv-nav{top:32px}
@media(max-width:782px){body.admin-bar .viv-nav{top:46px}}