/* Navbar */
.nav-pet{ --nav-h:72px; background:#A6D8D4; min-height:var(--nav-h); }
.nav-grid{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:8px 16px; }
body{ padding-top:72px; }

/* Botões gamer */
.btn-game{
  display:flex; align-items:center; gap:6px;
  font-weight:600; border:2px solid #fff; border-radius:10px;
  padding:6px 14px; color:#fff; text-decoration:none;
  background:linear-gradient(145deg,#F5A3A3,#E08B8B);
  box-shadow:0 4px 0 rgba(0,0,0,.25);
  transition:transform .2s, box-shadow .2s, background .2s;
}
.btn-game i{ font-size:1.2rem; }
.btn-game:hover{ transform:translateY(-2px); background:linear-gradient(145deg,#F8B6B6,#E0A1A1); box-shadow:0 5px 8px rgba(0,0,0,.3); }
.btn-game:active{ transform:translateY(1px); box-shadow:inset 0 3px 4px rgba(0,0,0,.3); }
@media (max-width: 992px){ .btn-label{display:none;} .btn-game{padding:6px 10px;} }

/* Hero */
.hero-pet{
  min-height: calc(100vh - var(--nav-h));
  background: linear-gradient(135deg,#E0B7B4 0%, #B6CDA8 100%);
  color:#fff;
  padding: 32px 0;
}

/* Seções */
.section-pet{ padding: 72px 0; }

/* Benefícios */
.pet-feature{
  background:#fff; border-radius:14px; padding:18px; text-align:center;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}
.pet-feature i{ font-size:24px; color:#A6D8D4; }
.pet-feature h6{ margin-top:8px; font-weight:700; }


/* ============================= */
/* SEÇÃO - ÁLBUM / CARROSSEL */
/* ============================= */

.album-carousel {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}

.album-carousel .carousel-inner {
  border-radius: 0;
  overflow: hidden;
  position: relative;
}

.album-carousel .carousel-img {
  height: 550px;
  object-fit: cover;
  width: 100%;
}

@media (max-width: 768px) {
  .album-carousel .carousel-img {
    height: 360px;
  }
}

/* ====== Degradê superior e inferior ====== */
.album-carousel .carousel-inner::before,
.album-carousel .carousel-inner::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 140px;
  z-index: 2;
  pointer-events: none;
}

.album-carousel .carousel-inner::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), transparent);
}

.album-carousel .carousel-inner::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent);
}

/* ====== Legendas ====== */
.album-carousel .carousel-caption {
  bottom: 2rem;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 10px;
  padding: 0.75rem 1.25rem;
  z-index: 3;
}

.album-carousel .carousel-caption h5 {
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* ====== Controles laterais ====== */
.album-carousel .carousel-control-prev-icon,
.album-carousel .carousel-control-next-icon {
  filter: invert(1);
  opacity: 0.9;
  transition: opacity 0.3s ease;
}
.album-carousel .carousel-control-prev-icon:hover,
.album-carousel .carousel-control-next-icon:hover {
  opacity: 1;
}

/* ====== Indicadores ====== */
.album-carousel .carousel-indicators [data-bs-target] {
  background-color: #fff;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.album-carousel .carousel-indicators .active {
  background-color: #0d6efd; /* azul padrão Bootstrap */
  opacity: 1;
}


/* paleta do site */
:root{
  --pet-rosa:#E0B7B4;
  --pet-menta:#B6CDA8;
  --pet-branco:#ffffff;
}

.sticker-strip{
  width:100%;
  overflow:hidden;
  background: linear-gradient(135deg,var(--pet-rosa),var(--pet-menta));
  padding: 18px 0;
  position: relative;
}

.sticker-track{
  display:flex;
  gap:0;                /* as duas listas “emendadas” */
  width:max-content;
}

.sticker-list{
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 18px;
  margin:0;
  list-style:none;
  animation: scroll-left 30s linear infinite;
}

.sticker-strip:hover .sticker-list{
  animation-play-state: paused; /* pausa ao passar o mouse */
}

.sticker-list li{
  flex:0 0 auto;
}

.sticker-list img{
  width:72px;           /* ajuste de tamanho */
  height:72px;
  object-fit:cover;
  border-radius:50%;
  border:3px solid var(--pet-branco);
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  transition: transform .2s ease;
}

.sticker-list img:hover{
  transform: scale(1.06) rotate(-2deg);
}

@keyframes scroll-left{
  from{ transform: translateX(0); }
  to  { transform: translateX(-100%); } /* move uma lista inteira */
}

/* responsivo */
@media (max-width: 576px){
  .sticker-list img{ width:56px;height:56px; }
}