/* LAYOUT MAIS ESTREITO + FOTO SEM CORTAR (carregar DEPOIS de tudo) */

/* Largura alvo do conteúdo */
:root{ --page-max: 860px; }      /* ajuste para 800–900px se quiser ainda menor */

/* Alinha header e páginas com a mesma largura visual */
.nv-container{ max-width: calc(var(--page-max) + 80px); margin:0 auto; }
.rifa-page{ max-width: var(--page-max); margin: 0 auto; }

/* Se quiser estreitar TUDO do site, troque .rifa-page por .section: */
/* .section{ max-width: var(--page-max); } */

/* ===== Carrossel da rifa =====
   Mostra a foto inteira (sem corte). Vai aparecer “letterbox” (barras)
   quando a proporção da imagem não bater com a área. */
.rifa-hero .slide{ height: clamp(260px, 45vh, 520px); aspect-ratio:auto; }
.rifa-hero .slide img{
  object-position: center;
  background:#000;                  /* fundo neutro nas barras */
}

/* Se preferir manter cover mas com MENOS corte, comente o bloco acima
   e use: */
/*
.rifa-hero .slide{ aspect-ratio: 4/3; height:auto; }
.rifa-hero .slide img{ object-fit: cover !important; }
*/

/* Faixa/abas/CTA um pouco mais enxutas (acompanham a largura menor) */
.rifa-strip{ padding:6px 10px; font-size:.95rem }
.seg-tabs{ margin:8px 0 6px }
.seg-tabs .tab{ padding:10px 8px; border-radius:10px; font-size:.95rem }

.qtd-row{ grid-template-columns:40px 1fr 40px; gap:6px }
.qtd-row .box{ height:40px; font-size:16px }
.qtd-row input{ height:40px; font-size:15px }

.cta-wrap{ gap:6px; margin-top:8px }
.cta-big{ padding:10px 12px; font-size:.95rem; border-radius:10px }
.cta-big .price{ padding:3px 6px; border-radius:6px }

/* Cards da listagem de rifas um tico mais compactos */
.cards-rifas{ grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap:14px }
.rifa-card__title{ font-size:1rem; min-height:2.2em }
.rifa-card__sub{ font-size:.85rem; margin:0 0 8px }
.rifa-card__date{ font-size:.8rem }

/* Footer e espaçamentos harmonizados com a largura menor */
.footer{ padding:24px 16px }
.footer-logo{ height:40px !important }