body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
.hero-section { min-height: 70vh; }
.cookie-banner {
    position: fixed; bottom: 0; width: 100%; background: #2c3e50; color: white; z-index: 9999;
    display: none;
}
.card:hover { transform: translateY(-5px); transition: 0.3s; }
/* ===== Setas ténues nos carrosséis ===== */
.carousel-control-prev,
.carousel-control-next {
    opacity: 0;                     /* invisível por padrão */
    transition: opacity 0.3s ease;
    width: 10%;                     /* área clicável generosa */
}

.carousel:hover .carousel-control-prev,
.carousel:hover .carousel-control-next {
    opacity: 0.25;                  /* aparece muito ténue no hover */
}

.carousel .carousel-control-prev:hover,
.carousel .carousel-control-next:hover {
    opacity: 0.6;                   /* ligeiro destaque ao passar nas setas */
}

/* Remove fundos e círculos */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-image: none !important;  /* remove ícone padrão Bootstrap */
    filter: none !important;
    width: auto;
    height: auto;
}

/* Substitui por setas finas com borda */
.carousel-control-prev-icon::before {
    content: '‹';
    font-size: 3rem;
    font-weight: 100;
    color: white;
    text-shadow: 0 0 8px rgba(0,0,0,0.3);
    line-height: 1;
}

.carousel-control-next-icon::before {
    content: '›';
    font-size: 3rem;
    font-weight: 100;
    color: white;
    text-shadow: 0 0 8px rgba(0,0,0,0.3);
    line-height: 1;
}

/* Remove qualquer background dos botões que possam ter sido colocados inline */
.carousel-control-prev,
.carousel-control-next {
    background: none !important;
    border: none !important;
}
/* Transição fade para o carrossel */
.carousel-fade .carousel-item {
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}
.carousel-fade .carousel-item.active {
    opacity: 1;
}
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
    opacity: 1;
}
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
    opacity: 0;
}
.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev {
    transform: translateX(0);
}


.hero-carousel {
    position: relative;
}
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4); /* fundo escurecido */
    z-index: 2;
}
/* Transição fade para o carrossel */
.carousel-fade .carousel-item {
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}
.carousel-fade .carousel-item.active {
    opacity: 1;
}
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
    opacity: 1;
}
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
    opacity: 0;
}
.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev {
    transform: translateX(0);
}
/* Ribbon / fita de destaque */
.ribbon-wrapper {
    position: relative;
    overflow: hidden;
}
.ribbon {
    position: absolute;
    top: 10px;
    right: -35px;
    width: 130px;
    padding: 4px 0;
    text-align: center;
    font-size: 0.75rem;
    font-weight: bold;
    color: white;
    transform: rotate(45deg);
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ribbon.destaque {
    background: #e74c3c; /* vermelho */
}
.ribbon.novidade {
    background: #27ae60; /* verde */
}
/* Se os dois estiverem ativos, podemos empilhar ou ajustar. 
   Solução simples: mostrar apenas um se ambos ativos? 
   Melhor: o ribbon 'novidade' pode deslocar-se mais para baixo.
*/
.ribbon.destaque + .ribbon.novidade,
.ribbon.novidade + .ribbon.destaque {
    top: 45px;
}