/* Vessel Software: paginas por ramo e da regiao (geradas por gerar-paginas.js, na raiz do projeto).
   Usam o style.css do site inteiro e acrescentam so o que e delas. */

/* ---------- topo da pagina ---------- */
.pg-hero{padding:calc(var(--navh) + clamp(40px,6vw,96px)) 0 clamp(48px,6vw,96px)}
.pg-hero-in{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(36px,6vw,96px);align-items:center}
.pg-hero .display{max-width:14ch;text-wrap:balance}
.pg-lede{margin-top:1.5rem;max-width:44ch;font-size:clamp(1.03rem,1.3vw,1.16rem);line-height:1.62;color:var(--text2)}
.pg-hero .cta-row{margin-top:2.1rem}
.pg-hero .card3{width:100%;max-width:440px;justify-self:end;--by:-10deg;--bx:3deg}
.pg-hero .card3 .tilt-in{transform:rotateX(calc(var(--rx,0deg) + var(--bx,0deg))) rotateY(calc(var(--ry,0deg) + var(--by,0deg)))}

/* ---------- o que vai na pagina ---------- */
.pg .feats{grid-template-columns:repeat(3,1fr)}
.pg-sec-head .lede{margin-top:1.2rem;max-width:52ch}

/* ---------- por que ter site ---------- */
.pg-por .faq-head .h2{max-width:16ch}
.pg-prosa p{font-size:clamp(1.02rem,1.2vw,1.12rem);line-height:1.7;color:var(--text2);max-width:58ch}
.pg-prosa p+p{margin-top:1.15em}
.pg-prosa p:first-child{color:var(--text)}

/* ---------- cidades (pagina da regiao) ---------- */
.cidades{margin-top:clamp(30px,4vw,52px);display:flex;flex-wrap:wrap;gap:10px 12px}
.cidades li{padding:.72em 1.15em;border-radius:999px;background:rgba(248,250,253,.72);border:1px solid var(--line);font:500 .98rem/1 var(--f-text);color:var(--navy)}
.cidades li.casa{background:var(--navy);border-color:var(--navy);color:#F2F7FF}
.cidades-nota{margin-top:1.4rem;color:var(--text2)}

/* ---------- outros ramos ---------- */
.pg-outros{padding:clamp(64px,8vw,120px) 0 clamp(20px,3vw,40px)}
.pg-outros .h2{max-width:none}
.pg-outros .ramos{margin-top:clamp(24px,3vw,36px)}

/* ---------- convite final sem o simbolo 3D ---------- */
@media (min-width:981px){.final-card.solo .final-txt{grid-column:2}}

/* ---------- caminho da pagina, logo antes do rodape ---------- */
.trilha{padding:clamp(36px,5vw,64px) 0 18px}
.trilha ol{display:flex;flex-wrap:wrap;gap:.45em;font-size:.88rem;color:var(--text2)}
.trilha li+li::before{content:"/";margin-right:.45em;color:var(--line-strong)}
.trilha a{color:var(--navy);text-underline-offset:4px}

/* ---------- responsivo ---------- */
@media (max-width:980px){
  .pg-hero-in{grid-template-columns:1fr}
  .pg-hero .card3{justify-self:start;max-width:400px;--by:0deg;--bx:0deg}
  .pg .feats{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .pg-hero{padding-top:calc(var(--navh) + 32px)}
  .pg-hero .card3{max-width:none}
  .pg-hero .card3 img{aspect-ratio:5/4}
  .pg .feats{grid-template-columns:1fr}
  .cidades li{font-size:.94rem}
}