/* VIPPER HOME — ajustes de secao (carregado depois de vipper.css) */
.vp-video-sec .wrap,.sec .wrap{max-width:var(--maxw)}

/* ---------- HERO: altura e enquadramento ---------- */
.hb-slide img{object-position:center;object-fit:contain}


@media(prefers-reduced-motion:reduce){
  .hb-slide.on picture{animation:none}
  .hb-slide{transition:none}
}

/* ---------- RESERVA: sticky abaixo do header no mobile ---------- */
.ressec{border-radius:0}
.res-form .res-go svg{width:16px;height:16px}

/* ---------- VIDEO ---------- */
.vp-video video{background:#000}

/* ---------- VISTA ---------- */
.vp-vista .duo{gap:48px}
.vp-vista-gal picture img{border-radius:0}

/* ---------- TURISMO cards sem foto (lista limpa) ---------- */
.grid.g3 .card .bd{padding:24px}
.grid.g3 .card .bd h3{font-family:var(--font-h);font-size:19px;font-weight:700;color:#1D1E21}
.grid.g3 .card .bd p{font-size:14px;color:#5F6066;line-height:1.65;margin-top:9px}

/* ---------- GRUPO ---------- */
.grp-nums,.grupo-cards{gap:16px}

/* ---------- MISSAS ---------- */
.sec-missas .duo{grid-template-columns:1.15fr .85fr}

@media(max-width:900px){
  .vp-vista .duo,.sec-missas .duo{grid-template-columns:1fr!important}
  .sec-missas .vp-missas-card{order:-1}
  .vm-big{font-size:56px}
}

/* ==========================================================================
   BLOCO "BEM-VINDO" — fotos no PADRAO do EcoMAPP (medido no site oficial):
     . coluna de 550px, 3 fotos em 4:3 (ratio 1.33)
     . foto grande 550x413 + duas de 267x200
     . border-radius lg na grande, md nas pequenas
   Antes as fotos vinham com width:100% e proporcao propria, o que deixava
   tamanhos desiguais (fora de padrao).
   ========================================================================== */
.sec-tint .duo > div:last-child{display:grid!important;gap:16px!important;align-content:start!important}
/* a foto grande vem em <picture> (webp + jpg): o <picture> e' inline por padrao
   e ficava com largura 0. Forcamos block + largura cheia. */
.sec-tint .duo > div:last-child > picture{
  display:block!important;width:100%!important;aspect-ratio:4/3!important;
  border-radius:var(--r-lg)!important;overflow:hidden!important;
  box-shadow:var(--shadow)!important}
.sec-tint .duo > div:last-child > picture > img{
  display:block!important;width:100%!important;height:100%!important;
  object-fit:cover!important;border-radius:inherit!important}
.sec-tint .duo > div:last-child > div{
  display:grid!important;grid-template-columns:1fr 1fr!important;gap:16px!important}
.sec-tint .duo > div:last-child > div picture,
.sec-tint .duo > div:last-child > div img{
  display:block!important;width:100%!important;aspect-ratio:4/3!important;
  border-radius:var(--r-md)!important;overflow:hidden!important;
  box-shadow:var(--shadow)!important}
/* a imagem preenche o quadro 4:3 sem distorcer */
.sec-tint .duo > div:last-child img{
  height:100%!important;object-fit:cover!important;object-position:center!important}
.sec-tint .duo > div:last-child picture img{border-radius:inherit!important}

@media(max-width:900px){
  .sec-tint .duo > div:last-child > picture,
  .sec-tint .duo > div:last-child > img{aspect-ratio:16/10!important}
}