:root{--teal:#009688;--teal-600:#00796B;--gray-900:#333;--gray-700:#666;--gray-500:#999;}
.btn-teal{background:var(--teal);color:#fff;border:0}.btn-teal:hover{background:var(--teal-600);color:#fff}
.btn-outline-teal{border-color:var(--teal);color:var(--teal)}.btn-outline-teal:hover{background:var(--teal);color:#fff}
.bg-teal-gradient{background:linear-gradient(90deg,var(--teal) 0%,#00bfa5 100%)}
.bg-teal-subtle{background:rgba(0,150,136,.15)}.text-teal-emphasis{color:var(--teal-600)}

/* RATIO helpers */
.ratio-9x16{position:relative;width:100%}.ratio-9x16::before{display:block;content:'';padding-top:177.78%}
.ratio-9x16>*,.ratio-9x16 img{position:absolute;top:0;left:0;width:100%;height:100%}
.object-fit-cover{object-fit:cover;width:100%;height:100%}

/* 4:5 (1080x1350 - retrato Instagram) */
.ratio-4x5{position:relative;width:100%}
.ratio-4x5::before{content:"";display:block;padding-top:125%}
.ratio-4x5 > *, .ratio-4x5 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* 1.91:1 (ex: 1200x628 px) */
.ratio-191x100{position:relative;width:100%}
.ratio-191x100::before{content:"";display:block;padding-top:52.36%}
.ratio-191x100 > *, .ratio-191x100 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ===== Modal de galeria (altura total e imagem contida) ===== */
#bannerModal .modal-dialog{max-width:96vw; max-height:90vh}
#bannerModal .modal-content{
  height:100vh;display:flex;flex-direction:column;background:var(--bs-body-bg)
}
#bannerModal .modal-header{border-bottom:1px solid rgba(0,0,0,.06)}
#bannerModal .modal-footer{min-height:56px;border-top:1px solid rgba(0,0,0,.06)}
#bannerModal .modal-body{
  flex:1;padding:0;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:#626262
}
/* carrossel ocupa o corpo */
#bannerCarousel, #bannerCarousel .carousel-inner, #bannerCarousel .carousel-item{height:100%}
/* wrapper interno flex (N�O use d-flex direto no .carousel-item) */
.carousel-item > .d-flex{width:100%;height:100%}
/* imagem se ajusta � altura �til do modal-body */
#bannerCarousel .fit-img{
  max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;display:block;margin:0 auto
}
/* v�deo com contain */
#bannerCarousel .fit-video{
  max-height:100%;
  max-width:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  margin:0 auto;
  background:#000;
}

/* PDF ocupa todo o slide */
#bannerCarousel .fit-embed{
  width:100%;
  height:100%;
  border:0;
  display:block;
}


/* setinhas vis�veis em fundos claros */
.carousel-control-prev-icon, .carousel-control-next-icon{
  filter: drop-shadow(0 0 3px rgba(0,0,0,.4));
}
/* fullscreen em telas pequenas */
@media (max-width:576px){#bannerModal .modal-dialog{height:100vh;margin:0}}

/* ===== Hero fixo ? altura responsiva ===== */

#hero {
  border-radius: 12px;
  overflow: hidden;
}

.hero-fixed {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  border-radius: 12px;
  background: transparent !important; /* garante transpar�ncia total */
}

.hero-fixed img{width:100%;height:100%;border-radius: 12px;object-fit:cover}
/* legenda s� no HERO (n�o impacta modal) */
.hero-fixed .carousel-caption{
  background:transparent;
  padding-left: 2rem;
  left:0;right:0;bottom:0;padding:1rem 1.25rem 1.5rem;color:#fff
}
/* Altura ajustada para telas menores */
@media (max-width:992px){.hero-fixed{height:240px}}
@media (max-width:768px){.hero-fixed{height:200px}}
@media (max-width:576px){.hero-fixed{height:160px}}

/* ===== Badge ?Ver galeria? compacto ===== */
.badge-carousel{
  position:absolute;top:.5rem;right:.5rem;background:rgba(0,0,0,.6);color:#fff;
  font-size:.75rem;font-weight:500;padding:.25rem .55rem;border-radius:6px;
  display:inline-flex;align-items:center;gap:.25rem;backdrop-filter:blur(2px);z-index:2
}
.badge-carousel i{font-size:.8rem;opacity:.9}
.badge-carousel:hover{background:rgba(0,0,0,.8);text-decoration:none;transform:scale(1.05);transition:all .2s}

#carouselBanners .carousel-inner {
  padding: 0.5rem;
}

#carouselBanners .carousel-control-prev,
#carouselBanners .carousel-control-next {
  width: 5%;
  opacity: 1; /* sempre vis�vel */
}

#carouselBanners .carousel-control-prev-icon,
#carouselBanners .carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.6); /* fundo escuro */
  background-size: 60%;
  border-radius: 50%;
  padding: 20px; /* aumenta o clique e o �cone */
  filter: invert(1); /* deixa a seta branca */
  transition: background-color 0.3s ease, transform 0.2s;
}

#carouselBanners .carousel-control-prev-icon:hover,
#carouselBanners .carousel-control-next-icon:hover {
  background-color: rgba(0, 0, 0, 0.85);
  transform: scale(1.1);
}

#carouselBanners .card img {
  transition: transform 0.3s ease;
}

#carouselBanners .card img:hover {
  transform: scale(1.05);
}
.dropdown-item.active,
.btn-outline-teal.active {
  background-color: #009688;
  color: #fff !important;
  border-color: #009688;
}

.dropdown-item.active i {
  color: #fff !important;
}

.text-teal {
  color: #009688;
}



/* =========================================================
   HERO — Carousel Responsivo (consolidado)
   ====================================================== */

/* Container do hero */
#hero {
  margin-bottom: 1rem;                /* afasta do grid abaixo sem criar “buraco” */
}
@media (min-width: 768px){
  #hero { margin-bottom: 1.25rem; }
}

/* Altura responsiva do banner (ajuste os limites se quiser) */
#hero .hero-fixed {
  height: clamp(140px, 26vw, 320px);  /* mobile baixo, desktop mais “wide” */
  border-radius: 16px;
  overflow: hidden;
  background: #0b0f10;                /* fallback enquanto a imagem carrega */
}

/* Todos os níveis herdam 100% da altura do hero */
#hero .carousel-inner,
#hero .carousel-item,
#hero .carousel-item > a,
#hero .carousel-item > div {
  height: 100%;
}

/* Imagem preenche sem distorcer e sem “pulo” */
#hero .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Botões ocupam a altura do banner e ficam centralizados */
#hero .carousel-control-prev,
#hero .carousel-control-next {
  top: 0;
  bottom: 0;
  height: 100%;
  opacity: .9;                         /* visíveis em fundo claro/escuro */
}
#hero .carousel-control-prev-icon,
#hero .carousel-control-next-icon {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}

/* Caption: layout e legibilidade */
#hero .carousel-caption {
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 1rem 1.25rem 1.25rem;
  text-align: left;
}
#hero .carousel-caption h5 {
  margin: 0 0 .25rem 0;
}

/* Utilitário usado no seu HTML: gradiente do rodapé para cima */
.bg-gradient-to-top {
  background: linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,0) 100%);
  color: #fff;
}

/* Versões mais compactas no mobile */
@media (max-width: 576px){
  #hero .carousel-caption { padding: .5rem .75rem .75rem; font-size: .95rem; }
  #hero .carousel-caption h5 { font-size: 1rem; }
}

/* Bordinhas sempre arredondadas inclusive durante o fade */
#hero .carousel,
#hero .carousel-inner,
#hero .carousel-item {
  border-radius: 16px;
}

/* (Opcional) Indicadores, caso use: aproximar do conteúdo e melhorar contraste */
#hero .carousel-indicators {
  margin-bottom: .25rem;
}
#hero .carousel-indicators [data-bs-target] {
  background-clip: padding-box;
  opacity: .6;
}
#hero .carousel-indicators .active {
  opacity: 1;
}