/* ================================================================
   PADARIA FLOR DO TÂMEGA — bootstrap-overrides.css
   PARTE 2: Customização Bootstrap 5 · Componentes · Utilitários
   ----------------------------------------------------------------
   Este ficheiro carrega DEPOIS do Bootstrap e do style.css.
   Cada override é identificado com o componente Bootstrap original.
   Estrutura:
   1.  Navbar
   2.  Botões (btn-marca, btn-marca-invertido, btn-ghost)
   3.  Cards (produto, pilar, qualidade, contacto)
   4.  Formulários e inputs
   5.  Dropdown
   6.  Badges Bootstrap
   7.  Alertas e feedback
   8.  Hero Section
   9.  Componente — Estatísticas
   10. Componente — Secção Sobre / Escura
   11. Componente — Banner RGPD Cookies
   12. Footer
   13. Responsivo — ajustes mobile/tablet
   ================================================================ */


/* ================================================================
   1. NAVBAR — Override Bootstrap .navbar
   ================================================================ */

/* Container da navbar */
.navbar {
  /* Fundo castanho escuro com borda dourada em baixo */
  background-color: var(--cor-fundo-medio) !important;
  border-bottom:    2px solid var(--cor-dourado);

  /* Padding vertical generoso — respira */
  padding-top:    0.9rem;
  padding-bottom: 0.9rem;

  /* Bootstrap sticky-top — z-index controlado */
  z-index: var(--z-navbar);

  /* Sombra discreta ao scrollar */
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);

  /* Transição suave ao aparecer após scroll */
  transition: padding 0.3s ease, box-shadow 0.3s ease;
}

/* Navbar comprimida após scroll — JavaScript adiciona esta classe */
.navbar.navbar-comprimida {
  padding-top:    0.5rem;
  padding-bottom: 0.5rem;
  box-shadow:     0 4px 30px rgba(0, 0, 0, 0.35);
}

/* ── Marca / Logo ──────────────────────────────────────────── */
.navbar-brand {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
  text-decoration: none !important;
  padding:     0;
}

/* Imagem do logo na navbar */
.navbar-brand img {
  height: 50px;
  width:  auto;
  /* Altura fixa — evita CLS (Cumulative Layout Shift) */
}

/* Nome da marca ao lado do logo */
.navbar-brand-nome {
  font-family:    var(--fonte-titulo);
  font-size:      1.25rem;
  font-weight:    600;
  letter-spacing: 0.04em;
  color:          var(--cor-dourado) !important;
  line-height:    1;
  transition:     var(--transicao-rapida);
}

/* Subtexto abaixo do nome — "Padaria & Pastelaria" */
.navbar-brand-subtexto {
  font-family:  var(--fonte-corpo);
  font-size:    var(--tamanho-xs);
  font-style:   italic;
  color:        rgba(255, 255, 255, 0.45);
  letter-spacing: 0.06em;
  display:      block;
  margin-top:   1px;
}

/* Hover na marca */
.navbar-brand:hover .navbar-brand-nome {
  color: #E8C880 !important; /* Dourado mais claro no hover */
}

/* ── Links de navegação ────────────────────────────────────── */
.navbar-nav .nav-link {
  font-family:    var(--fonte-titulo);
  font-size:      0.72rem;
  font-weight:    600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.78) !important;
  padding:        0.5rem 0.85rem !important;
  border-radius:  var(--raio-sm);
  transition:     var(--transicao-rapida);
  position:       relative;
}

/* Sublinhado animado nos nav-links — efeito elegante */
.navbar-nav .nav-link::after {
  content:    '';
  position:   absolute;
  bottom:     0;
  left:       50%;
  right:      50%;
  height:     1px;
  background: var(--cor-dourado);
  transition: left 0.25s ease, right 0.25s ease;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
  left:  0.85rem;
  right: 0.85rem;
}

/* Hover */
.navbar-nav .nav-link:hover {
  color: var(--cor-dourado) !important;
}

/* Página activa */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link[aria-current="page"] {
  color: var(--cor-dourado) !important;
}

/* ── Botão hamburger mobile ─────────────────────────────────── */
.navbar-toggler {
  border:         1px solid var(--cor-dourado);
  border-radius:  var(--raio-sm);
  padding:        0.4rem 0.65rem;
  transition:     var(--transicao-rapida);
}

.navbar-toggler:hover {
  background: rgba(200, 169, 106, 0.1);
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(200, 169, 106, 0.3);
  outline:    none;
}

/* Ícone hamburger — linhas douradas */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28200%2C169%2C106%2C1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  width: 1.3em;
  height: 1.3em;
}


/* ================================================================
   2. DROPDOWN — Override Bootstrap .dropdown-menu
   ================================================================ */

.dropdown-menu {
  background-color: var(--cor-fundo-medio);
  border:           1px solid var(--cor-borda-escura);
  border-radius:    var(--raio-md);
  padding:          0.5rem 0;
  margin-top:       0.4rem !important;
  box-shadow:       var(--sombra-forte);

  /* Animação de entrada suave */
  animation:        dropdown-aparecer 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dropdown-aparecer {
  from {
    opacity:   0;
    transform: translateY(-8px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

/* Linha divisória no dropdown */
.dropdown-divider {
  border-color: var(--cor-borda-escura);
}

/* Item do dropdown */
.dropdown-item {
  font-family:    var(--fonte-corpo);
  font-size:      0.95rem;
  font-weight:    400;
  color:          rgba(255, 255, 255, 0.75) !important;
  padding:        0.65rem 1.5rem;
  transition:     var(--transicao-rapida);
  display:        flex;
  align-items:    center;
  gap:            0.5rem;
}

/* Linha esquerda — indica item activo */
.dropdown-item::before {
  content:    '';
  width:      0;
  height:     1em;
  background: var(--cor-dourado);
  border-radius: 1px;
  transition: width 0.2s ease;
  flex-shrink: 0;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(200, 169, 106, 0.12);
  color:            var(--cor-dourado) !important;
}
.dropdown-item:hover::before {
  width: 2px;
}

/* Cabeçalho dentro do dropdown */
.dropdown-header {
  font-family:    var(--fonte-titulo);
  font-size:      var(--tamanho-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--cor-dourado);
  padding:        0.5rem 1.5rem 0.25rem;
}


/* ================================================================
   3. BOTÕES — Componentes customizados da marca
   ================================================================ */

/* ── Base partilhada por todos os botões da marca ───────────── */
.btn-marca,
.btn-marca-invertido,
.btn-ghost {
  font-family:    var(--fonte-titulo);
  font-size:      var(--tamanho-xs);
  font-weight:    700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  gap:            0.5rem;
  padding:        0.85rem 2.4rem;
  border-radius:  var(--raio-sm);
  border:         2px solid transparent;
  cursor:         pointer;
  transition:     var(--transicao);
  line-height:    1;
  white-space:    nowrap;
  /* Sem sombra padrão Bootstrap */
  box-shadow:     none !important;
}

/* [WCAG 2.5.5] Área de toque mínima 44x44px em mobile */
@media (max-width: 767.98px) {
  .btn-marca,
  .btn-marca-invertido,
  .btn-ghost {
    min-height: 44px;
    padding: 0.9rem 1.75rem;
  }
}

/* ── Botão Primário — fundo bordô, texto branco ─────────────── */
.btn-marca {
  background-color: var(--cor-primaria);
  color:            var(--cor-texto-claro) !important;
  border-color:     var(--cor-primaria);
}

.btn-marca:hover,
.btn-marca:focus {
  background-color: var(--cor-primaria-hover);
  border-color:     var(--cor-primaria-hover);
  color:            var(--cor-texto-claro) !important;
  transform:        translateY(-2px);
  box-shadow:       0 6px 20px rgba(139, 26, 26, 0.35) !important;
}

.btn-marca:active {
  transform: translateY(0);
}

/* ── Botão Invertido — contorno bordô, fundo transparente ───── */
.btn-marca-invertido {
  background-color: transparent;
  color:            var(--cor-primaria) !important;
  border-color:     var(--cor-primaria);
}

.btn-marca-invertido:hover,
.btn-marca-invertido:focus {
  background-color: var(--cor-primaria);
  color:            var(--cor-texto-claro) !important;
  transform:        translateY(-2px);
}

/* ── Botão Ghost Dourado — para fundos escuros ──────────────── */
.btn-ghost {
  background-color: transparent;
  color:            var(--cor-dourado) !important;
  border-color:     var(--cor-dourado);
}

.btn-ghost:hover,
.btn-ghost:focus {
  background-color: var(--cor-dourado);
  color:            var(--cor-fundo-escuro) !important;
  transform:        translateY(-2px);
}

/* ── Botão de largura total ─────────────────────────────────── */
.btn-bloco {
  display: flex;
  width:   100%;
}

/* ── Tamanhos alternativos ──────────────────────────────────── */
.btn-sm.btn-marca,
.btn-sm.btn-marca-invertido,
.btn-sm.btn-ghost {
  font-size: calc(var(--tamanho-xs) * 0.9);
  padding:   0.6rem 1.5rem;
}

.btn-lg.btn-marca,
.btn-lg.btn-marca-invertido,
.btn-lg.btn-ghost {
  font-size: var(--tamanho-sm);
  padding:   1.1rem 3rem;
}

/* ── Botão de ícone circular ─────────────────────────────────── */
.btn-icone {
  width:           44px;
  height:          44px;
  padding:         0;
  border-radius:   50%;
  background:      rgba(200, 169, 106, 0.12);
  border:          1px solid var(--cor-borda-escura);
  color:           var(--cor-dourado);
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  transition:      var(--transicao);
  cursor:          pointer;
}
.btn-icone:hover {
  background: var(--cor-dourado);
  color:      var(--cor-fundo-escuro);
}


/* ================================================================
   4. CARDS — Produto, Pilar de Valor, Qualidade, Contacto
   ================================================================ */

/* ── Card base partilhado ────────────────────────────────────── */
.card-base {
  background:    var(--cor-creme);
  border:        1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  box-shadow:    var(--sombra-suave);
  transition:    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                 box-shadow 0.3s ease;
  height:        100%; /* Ocupa 100% da coluna Bootstrap */
  overflow:      hidden;
}

.card-base:hover {
  transform:  translateY(-6px);
  box-shadow: var(--sombra-media);
}

/* ── Card de Produto ─────────────────────────────────────────── */
.card-produto {
  /* Herda card-base */
}

/* Área da imagem do produto */
.card-produto__imagem {
  width:           100%;
  height:          220px;
  overflow:        hidden;
  background:      linear-gradient(
    135deg,
    var(--cor-creme-escuro) 0%,
    var(--cor-dourado-claro) 100%
  );
  display:         flex;
  align-items:     center;
  justify-content: center;
  position:        relative;
}

/* Imagem real dentro do placeholder */
.card-produto__imagem img {
  width:          100%;
  height:         220px;
  object-fit:     cover;
  transition:     transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Efeito zoom na imagem ao hover no card */
.card-base:hover .card-produto__imagem img {
  transform: scale(1.06);
}

/* Ícone placeholder quando não há imagem */
.card-produto__icone-placeholder {
  font-size: 3.5rem;
  color:     var(--cor-dourado);
  opacity:   0.55;
}

/* Corpo do card de produto */
.card-produto__corpo {
  padding: 1.5rem;
}

.card-produto__categoria {
  font-family:    var(--fonte-titulo);
  font-size:      var(--tamanho-xs);
  font-weight:    700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          var(--cor-primaria);
  display:        block;
  margin-bottom:  0.4rem;
}

.card-produto__titulo {
  font-family:    var(--fonte-titulo);
  font-size:      1.15rem;
  font-weight:    600;
  color:          var(--cor-texto);
  margin-bottom:  0.6rem;
  letter-spacing: 0.02em;
}

.card-produto__descricao {
  font-size:    0.95rem;
  color:        var(--cor-texto-suave);
  line-height:  1.65;
  margin:       0;
}

/* ── Card de Pilar de Valor ──────────────────────────────────── */
.card-pilar {
  background:   var(--cor-creme);
  border:       1px solid var(--cor-borda);
  border-top:   4px solid var(--cor-dourado); /* Linha dourada no topo */
  border-radius: var(--raio-md);
  box-shadow:   var(--sombra-suave);
  padding:      2.5rem 2rem;
  text-align:   center;
  height:       100%;
  transition:   transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s ease,
                border-top-color 0.3s ease;
}

.card-pilar:hover {
  transform:        translateY(-6px);
  box-shadow:       var(--sombra-media);
  border-top-color: var(--cor-primaria); /* Troca para bordô no hover */
}

.card-pilar__icone {
  font-size:    2.8rem;
  color:        var(--cor-dourado);
  display:      block;
  margin-bottom: 1.25rem;
  transition:   color 0.3s ease, transform 0.3s ease;
}

.card-pilar:hover .card-pilar__icone {
  color:     var(--cor-primaria);
  transform: scale(1.1);
}

.card-pilar__titulo {
  font-family:    var(--fonte-titulo);
  font-size:      1.05rem;
  font-weight:    600;
  letter-spacing: 0.06em;
  color:          var(--cor-texto);
  margin-bottom:  0.75rem;
}

.card-pilar__texto {
  font-size:   0.95rem;
  color:       var(--cor-texto-suave);
  line-height: 1.7;
  margin:      0;
}

/* ── Card de Contacto ────────────────────────────────────────── */
.card-contacto {
  background:   var(--cor-creme-escuro);
  border:       1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  padding:      2rem 1.5rem;
  text-align:   center;
  height:       100%;
  transition:   var(--transicao);
}

.card-contacto:hover {
  border-color: var(--cor-dourado);
  box-shadow:   var(--sombra-suave);
}

.card-contacto__icone {
  font-size:     2.2rem;
  color:         var(--cor-primaria);
  display:       block;
  margin-bottom: 1rem;
}

.card-contacto__label {
  font-family:    var(--fonte-titulo);
  font-size:      var(--tamanho-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--cor-texto-suave);
  display:        block;
  margin-bottom:  0.4rem;
}

.card-contacto__valor {
  font-family: var(--fonte-corpo);
  font-size:   1.05rem;
  color:       var(--cor-texto);
  text-decoration: none;
  transition:  var(--transicao-rapida);
}

.card-contacto__valor:hover {
  color: var(--cor-primaria);
  text-decoration: underline;
}

/* Nota pequena — ex: "*Chamada para rede fixa" */
.card-contacto__nota {
  font-size:   var(--tamanho-xs);
  color:       var(--cor-texto-discreto);
  margin-top:  0.35rem;
  font-style:  italic;
}


/* ================================================================
   5. FORMULÁRIOS — Override Bootstrap .form-control
   ================================================================ */

/* Label */
.form-label {
  font-family:    var(--fonte-titulo);
  font-size:      var(--tamanho-xs);
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--cor-texto-suave);
  margin-bottom:  0.4rem;
  display:        block;
}

/* Input, textarea, select */
.form-control,
.form-select {
  background-color: var(--cor-creme);
  border:          1px solid var(--cor-borda);
  border-radius:   var(--raio-md);
  color:           var(--cor-texto);
  font-family:     var(--fonte-corpo);
  font-size:       1rem;
  font-weight:     400;
  line-height:     1.6;
  padding:         0.8rem 1.1rem;
  transition:      border-color 0.2s ease, box-shadow 0.2s ease;
  /* [WCAG 1.4.11] Fundo não pode ser totalmente branco sem contraste */
}

/* Placeholder — tom suave */
.form-control::placeholder {
  color:     var(--cor-texto-discreto);
  font-style: italic;
}

/* Focus — [WCAG 2.4.7] borda dourada + sombra visível */
.form-control:focus,
.form-select:focus {
  background-color: #FFFFFF;
  border-color:     var(--cor-dourado);
  box-shadow:       0 0 0 3px rgba(200, 169, 106, 0.22);
  outline:          none; /* Substituído pelo box-shadow */
  color:            var(--cor-texto);
}

/* Textarea — altura mínima */
textarea.form-control {
  resize:     vertical;
  min-height: 120px;
}

/* Select customizado */
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236B5744' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  cursor: pointer;
}

/* Estado de erro — validação Bootstrap */
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--cor-primaria);
  background-image: none; /* Remove ícone Bootstrap padrão */
}

.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(139, 26, 26, 0.18);
}

/* Feedback de erro */
.invalid-feedback {
  font-family: var(--fonte-corpo);
  font-size:   var(--tamanho-sm);
  color:       var(--cor-primaria);
  font-style:  italic;
  margin-top:  0.3rem;
}

/* Estado válido */
.form-control.is-valid {
  border-color: #2E7D32;
}

/* Checkbox — [WCAG] foco e contraste */
.form-check-input {
  width:         1.15em;
  height:        1.15em;
  border:        1.5px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  cursor:        pointer;
  transition:    var(--transicao-rapida);
}

.form-check-input:checked {
  background-color: var(--cor-primaria);
  border-color:     var(--cor-primaria);
}

.form-check-input:focus {
  box-shadow:  0 0 0 3px rgba(200, 169, 106, 0.28);
  border-color: var(--cor-dourado);
  outline:     none;
}

.form-check-label {
  font-family: var(--fonte-corpo);
  font-size:   0.9rem;
  color:       var(--cor-texto-suave);
  line-height: 1.6;
  cursor:      pointer;
  padding-left: 0.25rem;
}

/* Nota RGPD dentro do formulário */
.nota-rgpd {
  background:    rgba(200, 169, 106, 0.07);
  border:        1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  padding:       1rem 1.25rem;
  font-family:   var(--fonte-corpo);
  font-size:     var(--tamanho-sm);
  color:         var(--cor-texto-suave);
  line-height:   1.65;
}
.nota-rgpd strong {
  color: var(--cor-texto);
}
.nota-rgpd a {
  color: var(--cor-primaria);
}


/* ================================================================
   6. BADGES BOOTSTRAP — Override
   ================================================================ */

/* Badge padrão da marca */
.badge.badge-marca {
  background:     rgba(200, 169, 106, 0.12);
  border:         1px solid rgba(200, 169, 106, 0.35);
  color:          var(--cor-dourado-claro);
  font-family:    var(--fonte-corpo);
  font-size:      var(--tamanho-xs);
  font-weight:    400;
  letter-spacing: 0.06em;
  padding:        0.35rem 0.85rem;
  border-radius:  var(--raio-pill);
}

/* Badge de categoria de produto */
.badge.badge-categoria {
  background:     var(--cor-primaria-claro);
  color:          var(--cor-primaria);
  font-family:    var(--fonte-titulo);
  font-size:      calc(var(--tamanho-xs) * 0.9);
  font-weight:    700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding:        0.3rem 0.75rem;
  border-radius:  var(--raio-sm);
}


/* ================================================================
   7. ALERTAS / FEEDBACK
   ================================================================ */

/* Alerta de sucesso após envio de formulário */
.alerta-sucesso {
  background:    rgba(46, 125, 50, 0.08);
  border:        1px solid rgba(46, 125, 50, 0.3);
  border-left:   4px solid #2E7D32;
  border-radius: var(--raio-md);
  padding:       1rem 1.25rem;
  font-family:   var(--fonte-corpo);
  font-size:     0.95rem;
  color:         #1B5E20;
  display:       flex;
  align-items:   center;
  gap:           0.75rem;
}

/* Alerta de erro */
.alerta-erro {
  background:    var(--cor-primaria-claro);
  border:        1px solid rgba(139, 26, 26, 0.3);
  border-left:   4px solid var(--cor-primaria);
  border-radius: var(--raio-md);
  padding:       1rem 1.25rem;
  font-family:   var(--fonte-corpo);
  font-size:     0.95rem;
  color:         var(--cor-primaria-hover);
  display:       flex;
  align-items:   center;
  gap:           0.75rem;
}


/* ================================================================
   8. HERO SECTION
   ================================================================ */

.hero {
  position:   relative;
  min-height: 78vh;
  display:    flex;
  align-items: center;
  overflow:   hidden;

  /* Gradiente sobre a foto de fundo — mantém legibilidade sem esconder a imagem */
  background:
    linear-gradient(
      135deg,
      rgba(26,  10,  5,  0.80) 0%,
      rgba(61,  43,  31, 0.62) 55%,
      rgba(139, 26,  26, 0.50) 100%
    ),
    url('../imagens/pao/pao_004.webp') center/cover no-repeat,
    var(--cor-fundo-escuro);
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;
}

/* Barra dourada à esquerda — detalhe elegante */
.hero::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  bottom:     0;
  width:      4px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--cor-dourado) 30%,
    var(--cor-dourado) 70%,
    transparent 100%
  );
  z-index:    var(--z-base);
}

/* Fade para creme no fundo — transição suave para secção seguinte */
.hero::after {
  content:   '';
  position:  absolute;
  bottom:    0;
  left:      0;
  right:     0;
  height:    100px;
  background: linear-gradient(to top, var(--cor-creme), transparent);
  pointer-events: none;
  z-index:   var(--z-base);
}

/* Logótipo SVG animado no hero */
.hero__logo-svg {
  position:   absolute;
  top:        44%;
  right:      2vw;
  transform:  translateY(-50%);
  width:      min(32vw, 440px);
  z-index:    var(--z-base);
  pointer-events: none;
  filter:     drop-shadow(0 14px 40px rgba(0,0,0,.5));
  opacity:    0;
  animation:  hero-logo-entrada 1.1s var(--ease-app, cubic-bezier(.16,1,.3,1)) .3s forwards;
}
.hero__logo-svg svg { display: block; width: 100%; height: auto; }
@keyframes hero-logo-entrada {
  from { opacity: 0; transform: translateY(-50%) scale(.92); }
  to   { opacity: 1; transform: translateY(-50%) scale(1); }
}
/* O rolo da massa rola para trás e para a frente, como a amassar */
#rolo-massa {
  transform-box:    fill-box;
  transform-origin: center;
  animation:         rolo-a-rolar 2.2s ease-in-out infinite;
}
@keyframes rolo-a-rolar {
  0%   { transform: translateX(-8%) rotate(-18deg); }
  50%  { transform: translateX(8%)  rotate(18deg); }
  100% { transform: translateX(-8%) rotate(-18deg); }
}
@media (max-width: 1200px) {
  .hero__logo-svg { width: min(28vw, 340px); right: 2.5vw; }
}
@media (max-width: 991px) {
  .hero {
    flex-direction: column;
    justify-content: center;
    padding-top: 2rem;
  }
  .hero__logo-svg {
    display:   block;
    position:  static;
    margin:    0 auto 1.5rem;
    top:       auto;
    right:     auto;
    transform: none;
    width:     min(60vw, 260px);
    filter:    drop-shadow(0 8px 24px rgba(0,0,0,.45));
  }
  @keyframes hero-logo-entrada {
    from { opacity: 0; transform: translateY(-12px) scale(.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__logo-svg { animation: none; opacity: 1; }
  #rolo-massa { animation: none; }
}

/* Container de conteúdo do hero */
.hero__conteudo {
  position: relative;
  z-index:  var(--z-elevado);
  padding:  4rem 0 3rem;
}

/* [SEO] H1 do hero — responsivo com clamp() */
.hero__titulo {
  font-family:    var(--fonte-titulo);
  font-size:      clamp(2.2rem, 4.6vw, 3.75rem);
  font-weight:    700;
  color:          var(--cor-texto-claro);
  line-height:    1.14;
  letter-spacing: 0.01em;
  text-shadow:    var(--sombra-texto);
  margin-bottom:  0;
}

/* Palavra dourada dentro do H1 */
.hero__titulo .destaque {
  color:   var(--cor-dourado);
  display: block; /* quebra linha naturalmente */
}

/* Linha ornamental dourada — entre título e subtítulo */
.hero__divisor {
  width:      72px;
  height:     2px;
  background: linear-gradient(to right, var(--cor-dourado), transparent);
  margin:     1.75rem 0;
}

/* Subtítulo / proposta de valor */
.hero__subtitulo {
  font-family:  var(--fonte-corpo);
  font-size:    clamp(1.05rem, 2.2vw, 1.4rem);
  font-weight:  300;
  font-style:   italic;
  color:        var(--cor-dourado-claro);
  line-height:  1.75;
  max-width:    540px;
  text-shadow:  0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Grupo de badges sobre o H1 */
.hero__badges {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.6rem;
  margin-bottom: 1.75rem;
}

/* Badge individual do hero */
.hero__badge {
  display:         inline-flex;
  align-items:     center;
  gap:             0.4rem;
  background:      rgba(200, 169, 106, 0.12);
  border:          1px solid rgba(200, 169, 106, 0.35);
  color:           var(--cor-dourado-claro);
  font-family:     var(--fonte-titulo);
  font-size:       calc(var(--tamanho-xs) * 0.95);
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  padding:         0.35rem 0.9rem;
  border-radius:   var(--raio-pill);
}

/* CTAs do hero */
.hero__ctas {
  display:   flex;
  flex-wrap: wrap;
  gap:       1rem;
  margin-top: 2.25rem;
}

/* Indicador "scroll para baixo" */
.hero__scroll {
  position:   absolute;
  bottom:     130px;
  left:       50%;
  transform:  translateX(-50%);
  text-align: center;
  z-index:    var(--z-elevado);
  animation:  flutuar 2.2s ease-in-out infinite;
}
.hero__scroll-texto {
  font-family:    var(--fonte-titulo);
  font-size:      calc(var(--tamanho-xs) * 0.85);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          rgba(200, 169, 106, 0.7);
  display:        block;
  margin-bottom:  0.25rem;
}
.hero__scroll i {
  font-size: 1.1rem;
  color:     var(--cor-dourado);
  display:   block;
}


/* ================================================================
   9. COMPONENTE — ESTATÍSTICAS (Secção Sobre Nós)
   ================================================================ */

/* Container das estatísticas */
.stats {
  display:    grid;
  grid-template-columns: repeat(4, 1fr);
  gap:        0;
  border-top: 1px solid var(--cor-borda-escura);
  border-bottom: 1px solid var(--cor-borda-escura);
  margin-bottom: 4rem;
}

/* Item individual */
.stat {
  text-align:  center;
  padding:     2rem 1rem;
  border-right: 1px solid var(--cor-borda-escura);
  transition:   background 0.25s ease;
}

.stat:last-child {
  border-right: none;
}

.stat:hover {
  background: rgba(200, 169, 106, 0.06);
}

/* Número grande */
.stat__numero {
  font-family:    var(--fonte-titulo);
  font-size:      clamp(2rem, 4vw, 3.2rem);
  font-weight:    700;
  color:          var(--cor-dourado);
  line-height:    1;
  display:        block;
  margin-bottom:  0.35rem;
}

/* Label da estatística */
.stat__label {
  font-family:    var(--fonte-corpo);
  font-size:      var(--tamanho-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--cor-texto-claro-suave);
  display:        block;
}

/* Grid responsivo para estatísticas */
@media (max-width: 767.98px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat:nth-child(2) {
    border-right: none;
  }
  .stat:nth-child(1),
  .stat:nth-child(2) {
    border-bottom: 1px solid var(--cor-borda-escura);
  }
}

@media (max-width: 479.98px) {
  .stats {
    grid-template-columns: 1fr 1fr;
  }
}


/* ================================================================
   10. COMPONENTE — QUALIDADE (lista com ícone)
   ================================================================ */

/* Item de qualidade */
.qualidade-item {
  display:       flex;
  gap:           1.25rem;
  align-items:   flex-start;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--cor-borda);
}

.qualidade-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Círculo com ícone */
.qualidade-item__icone {
  flex-shrink:     0;
  width:           52px;
  height:          52px;
  background:      var(--cor-primaria);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--cor-texto-claro);
  font-size:       1.3rem;
  box-shadow:      0 4px 12px rgba(139, 26, 26, 0.25);
  transition:      transform 0.25s ease, background 0.25s ease;
}

.qualidade-item:hover .qualidade-item__icone {
  background: var(--cor-dourado);
  color:      var(--cor-fundo-escuro);
  transform:  scale(1.08);
}

/* Texto ao lado do ícone */
.qualidade-item__texto h4 {
  font-family:    var(--fonte-titulo);
  font-size:      1rem;
  letter-spacing: 0.04em;
  color:          var(--cor-texto);
  margin-bottom:  0.3rem;
}

.qualidade-item__texto p {
  font-size:   0.94rem;
  line-height: 1.65;
  margin:      0;
}


/* ================================================================
   11. COMPONENTE — BANNER RGPD COOKIES
   [RGPD Art. 7.º + Diretiva ePrivacy 2002/58/CE]
   ================================================================ */

#cookie-banner {
  position:      fixed;
  bottom:        0;
  left:          0;
  right:         0;
  background:    rgba(22, 10, 5, 0.98);
  border-top:    2px solid var(--cor-dourado);
  padding:       1.2rem 0;
  z-index:       var(--z-modal);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cookie-banner__texto {
  font-family: var(--fonte-corpo);
  font-size:   0.9rem;
  color:       var(--cor-texto-claro-suave);
  line-height: 1.6;
  margin:      0;
}

.cookie-banner__texto a {
  color:       var(--cor-dourado);
  text-decoration: underline;
}
.cookie-banner__texto a:hover {
  color: #E8C880;
}

/* Botão aceitar */
.cookie-btn-aceitar {
  background:     var(--cor-primaria);
  color:          var(--cor-texto-claro);
  border:         2px solid var(--cor-primaria);
  font-family:    var(--fonte-titulo);
  font-size:      var(--tamanho-xs);
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding:        0.6rem 1.5rem;
  border-radius:  var(--raio-sm);
  cursor:         pointer;
  transition:     var(--transicao);
  white-space:    nowrap;
  min-height:     44px; /* [WCAG 2.5.5] */
}

.cookie-btn-aceitar:hover,
.cookie-btn-aceitar:focus {
  background: var(--cor-primaria-hover);
  border-color: var(--cor-primaria-hover);
}

/* Botão gerir preferências */
.cookie-btn-gerir {
  background:     transparent;
  color:          rgba(255, 255, 255, 0.65);
  border:         1px solid rgba(255, 255, 255, 0.25);
  font-family:    var(--fonte-titulo);
  font-size:      var(--tamanho-xs);
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding:        0.6rem 1.5rem;
  border-radius:  var(--raio-sm);
  cursor:         pointer;
  transition:     var(--transicao);
  white-space:    nowrap;
  min-height:     44px; /* [WCAG 2.5.5] */
}

.cookie-btn-gerir:hover,
.cookie-btn-gerir:focus {
  border-color: var(--cor-dourado);
  color:        var(--cor-dourado);
}

/* Mobile — empilhar botões */
@media (max-width: 575.98px) {
  #cookie-banner .cookie-banner__accoes {
    flex-direction: column;
    width:          100%;
  }
  .cookie-btn-aceitar,
  .cookie-btn-gerir {
    width: 100%;
    justify-content: center;
  }
}


/* ================================================================
   12. FOOTER — Override e customização completa
   ================================================================ */

footer {
  background:  var(--cor-fundo-escuro);
  color:       var(--cor-texto-claro-suave);
  padding-top: 4.5rem;
  border-top:  3px solid var(--cor-dourado);
}

/* Logótipo no footer */
.footer__logo-nome {
  font-family:    var(--fonte-titulo);
  font-size:      1.55rem;
  font-weight:    700;
  color:          var(--cor-dourado);
  letter-spacing: 0.04em;
  display:        block;
  margin-bottom:  0.15rem;
}

.footer__logo-sub {
  font-family:  var(--fonte-corpo);
  font-size:    0.88rem;
  font-style:   italic;
  color:        rgba(255, 255, 255, 0.38);
  display:      block;
  margin-bottom: 1.25rem;
}

/* Descrição curta no footer */
.footer__descricao {
  font-family: var(--fonte-corpo);
  font-size:   0.88rem;
  color:       rgba(255, 255, 255, 0.48);
  line-height: 1.75;
  margin-bottom: 1.25rem;
}

/* Marca registada no footer */
.footer__marca-reg {
  font-family:    var(--fonte-titulo);
  font-size:      calc(var(--tamanho-xs) * 0.9);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--cor-dourado);
  opacity:        0.7;
}

/* Título de coluna no footer */
.footer__col-titulo {
  font-family:    var(--fonte-titulo);
  font-size:      var(--tamanho-xs);
  font-weight:    700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--cor-dourado);
  margin-bottom:  1.25rem;
  padding-bottom: 0.6rem;
  border-bottom:  1px solid var(--cor-borda-escura);
}

/* Links do footer */
.footer__link {
  display:        block;
  color:          rgba(255, 255, 255, 0.55);
  text-decoration: none;
  font-family:    var(--fonte-corpo);
  font-size:      0.93rem;
  padding:        0.22rem 0;
  transition:     var(--transicao-rapida);
  position:       relative;
  padding-left:   0;
}

.footer__link::before {
  content:    '→';
  position:   absolute;
  left:       -1rem;
  opacity:    0;
  transition: opacity 0.2s ease, left 0.2s ease;
}

.footer__link:hover,
.footer__link:focus {
  color:        var(--cor-dourado);
  padding-left: 1rem;
}

.footer__link:hover::before {
  opacity: 1;
  left:    0;
}

/* Contacto no footer */
.footer__contacto-item {
  display:       flex;
  align-items:   flex-start;
  gap:           0.75rem;
  margin-bottom: 0.9rem;
  font-family:   var(--fonte-corpo);
  font-size:     0.9rem;
}

.footer__contacto-icone {
  color:        var(--cor-dourado);
  font-size:    1rem;
  flex-shrink:  0;
  margin-top:   0.1rem;
}

.footer__contacto-link {
  color:           rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition:      var(--transicao-rapida);
  line-height:     1.5;
}
.footer__contacto-link:hover {
  color: var(--cor-dourado);
}

/* Rodapé legal — linha inferior */
.footer__legal {
  border-top:      1px solid rgba(255, 255, 255, 0.07);
  padding:         1.5rem 0;
  margin-top:      3rem;
  display:         flex;
  flex-wrap:       wrap;
  justify-content: space-between;
  align-items:     center;
  gap:             0.75rem;
}

.footer__copyright {
  font-family:  var(--fonte-corpo);
  font-size:    var(--tamanho-sm);
  color:        rgba(255, 255, 255, 0.3);
  margin:       0;
}

/* Navegação legal */
.footer__nav-legal {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.25rem;
  align-items: center;
}

.footer__nav-legal a {
  font-family:    var(--fonte-corpo);
  font-size:      var(--tamanho-sm);
  color:          rgba(255, 255, 255, 0.38);
  text-decoration: underline;
  padding:        0 0.5rem;
  transition:     var(--transicao-rapida);
}
.footer__nav-legal a:hover {
  color: var(--cor-dourado);
}
.footer__nav-legal span {
  color:   rgba(255, 255, 255, 0.15);
  font-size: var(--tamanho-sm);
}

/* Mobile footer */
@media (max-width: 767.98px) {
  footer {
    padding-top: 3rem;
  }
  .footer__legal {
    flex-direction: column;
    text-align:     center;
  }
  .footer__nav-legal {
    justify-content: center;
  }
}


/* ================================================================
   13. RESPONSIVO GLOBAL — ajustes mobile / tablet
   ================================================================ */

/* ── Mobile (< 576px) ────────────────────────────────────────── */
@media (max-width: 575.98px) {

  /* Hero em mobile — altura total do viewport */
  .hero {
    min-height: 100svh; /* svh = small viewport height, ignora barra mobile */
  }

  /* H1 mais pequeno em mobile */
  .hero__titulo {
    font-size: 2.2rem;
  }

  /* Subtítulo centrado */
  .hero__subtitulo {
    max-width: 100%;
  }

  /* Divisor centrado */
  .hero__divisor {
    margin-left:  auto;
    margin-right: auto;
  }

  /* CTAs em coluna em mobile */
  .hero__ctas {
    flex-direction: column;
    align-items:    flex-start;
  }

  /* Ocultar indicador de scroll em mobile */
  .hero__scroll {
    display: none;
  }

  /* Secções menos padding em mobile */
  .secao {
    padding: 3.5rem 0;
  }
}

/* ── Tablet (577px – 991px) ──────────────────────────────────── */
@media (min-width: 576px) and (max-width: 991.98px) {

  .hero__titulo {
    font-size: 3rem;
  }

  .secao {
    padding: 4rem 0;
  }
}

/* ── Acessibilidade: alto contraste ─────────────────────────── */
/* [WCAG] Suporte ao modo de alto contraste do Windows           */
@media (forced-colors: active) {

  .btn-marca,
  .btn-marca-invertido,
  .btn-ghost {
    forced-color-adjust: none;
    border: 2px solid ButtonText;
  }

  .card-pilar {
    border: 1px solid ButtonText;
  }

  .form-control,
  .form-select {
    border: 1px solid ButtonText;
  }
}


/* ================================================================
   SELECTOR DE IDIOMA — globo + dropdown de bandeiras
   ================================================================ */
.seletor-idioma {
  position: relative;
  display: inline-block;
}
.seletor-idioma__btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(200,169,106,.3);
  border-radius: var(--raio-pill);
  color: var(--cor-dourado-claro);
  font-family: var(--fonte-titulo);
  font-size: .72rem;
  letter-spacing: .06em;
  font-weight: 600;
  padding: .4rem .85rem;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease;
}
.seletor-idioma__btn:hover,
.seletor-idioma.aberto .seletor-idioma__btn {
  background: rgba(200,169,106,.15);
  border-color: var(--cor-dourado);
}
.seletor-idioma__btn i { font-size: .95rem; }

.seletor-idioma__menu {
  position: absolute;
  top: calc(100% + .6rem);
  left: 50%;
  transform: translateX(-50%);
  background: var(--cor-creme);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-forte);
  list-style: none;
  margin: 0;
  padding: .4rem;
  min-width: 180px;
  z-index: 1200;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.seletor-idioma.aberto .seletor-idioma__menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.idioma-opcao {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  border: none;
  background: transparent;
  border-radius: var(--raio-sm);
  padding: .6rem .75rem;
  font-family: var(--fonte-corpo);
  font-size: .95rem;
  color: var(--cor-texto-suave);
  text-align: left;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.idioma-opcao:hover { background: rgba(139,26,26,.06); color: var(--cor-texto); }
.idioma-opcao.ativo { background: rgba(139,26,26,.08); color: var(--cor-primaria); font-weight: 600; }
.idioma-bandeira { font-size: 1.15rem; line-height: 1; }

@media (min-width: 992px) {
  .seletor-idioma { margin: 0; }
}
.btn-topo {
  position:       fixed;
  right:          24px;
  bottom:         24px;
  width:          48px;
  height:         48px;
  border-radius:  50%;
  background:     var(--cor-primaria);
  border:         2px solid var(--cor-dourado);
  color:          var(--cor-dourado-claro);
  display:        flex;
  align-items:    center;
  justify-content: center;
  font-size:      1.25rem;
  line-height:    1;
  cursor:         pointer;
  text-decoration: none;
  opacity:        0;
  visibility:     hidden;
  transform:      translateY(12px);
  transition:     opacity .3s ease, transform .3s ease, bottom .3s ease,
                   visibility .3s, background .25s ease, color .25s ease;
  z-index:        var(--z-topo);
  box-shadow:     var(--sombra-media);
}
.btn-topo.visivel {
  opacity:    1;
  visibility: visible;
  transform:  translateY(0);
}
.btn-topo.acima-cookies {
  bottom: 108px;
}
.btn-topo:hover,
.btn-topo:focus-visible {
  background: var(--cor-dourado);
  color:      var(--cor-fundo-escuro);
  transform:  translateY(-3px);
}
@media (max-width: 576px) {
  .btn-topo { right: 16px; bottom: 16px; width: 44px; height: 44px; font-size: 1.1rem; }
  .btn-topo.acima-cookies { bottom: 148px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-topo { transition: opacity .2s ease, visibility .2s; transform: none !important; }
}


/* ================================================================
   BOTÃO — WHATSAPP FLUTUANTE
   ================================================================ */
.btn-whatsapp-flutuante {
  position:       fixed;
  left:           24px;
  bottom:         24px;
  width:          52px;
  height:         52px;
  border-radius:  50%;
  background:     #25D366;
  border:         2px solid rgba(255,255,255,.5);
  color:          #FFFFFF;
  display:        flex;
  align-items:    center;
  justify-content: center;
  font-size:      1.5rem;
  line-height:    1;
  text-decoration: none;
  z-index:        var(--z-topo);
  box-shadow:     0 8px 24px rgba(0,0,0,.28);
  transition:     transform .25s ease, box-shadow .25s ease, bottom .3s ease;
  animation:      pulsoWhats 2.4s ease-in-out infinite;
}
.btn-whatsapp-flutuante:hover,
.btn-whatsapp-flutuante:focus-visible {
  color:      #FFFFFF;
  transform:  translateY(-3px) scale(1.05);
  box-shadow: 0 12px 30px rgba(0,0,0,.32);
  animation-play-state: paused;
}
.btn-whatsapp-flutuante.acima-cookies {
  bottom: 108px;
}
@keyframes pulsoWhats {
  0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,.28), 0 0 0 0   rgba(37,211,102,.45); }
  50%      { box-shadow: 0 8px 24px rgba(0,0,0,.28), 0 0 0 10px rgba(37,211,102,0); }
}
@media (max-width: 576px) {
  .btn-whatsapp-flutuante { left: 16px; bottom: 16px; width: 48px; height: 48px; font-size: 1.35rem; }
  .btn-whatsapp-flutuante.acima-cookies { bottom: 148px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-whatsapp-flutuante { animation: none; transition: bottom .3s ease; }
}


/* ================================================================
   BARRA — ENCOMENDE AQUI (ticker com movimento contínuo)
   ================================================================ */
.barra-encomenda {
  display:        block;
  overflow:       hidden;
  white-space:    nowrap;
  padding:        .65rem 0;
  background:     linear-gradient(90deg, var(--cor-primaria), #8A1F1F);
  color:          #FFFFFF;
  text-decoration: none;
}
.barra-encomenda__pista {
  display:        inline-flex;
  align-items:    center;
  animation:      ticker-encomenda 22s linear infinite;
  will-change:    transform;
}
.barra-encomenda__item {
  display:        inline-flex;
  align-items:    center;
  gap:            .6rem;
  font-family:    var(--fonte-titulo);
  font-size:      .82rem;
  letter-spacing: .04em;
  padding:        0 2.5rem;
  white-space:    nowrap;
}
.barra-encomenda:hover .barra-encomenda__pista,
.barra-encomenda:focus-visible .barra-encomenda__pista {
  animation-play-state: paused;
}
.barra-encomenda i.bi-arrow-right-circle-fill {
  font-size: 1rem;
}
@keyframes ticker-encomenda {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 480px) {
  .barra-encomenda__item { font-size: .74rem; padding: 0 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .barra-encomenda__pista { animation: none; }
  .barra-encomenda { white-space: normal; text-align: center; padding: .55rem 1rem; }
}


/* ================================================================
   GALERIA — REELS DO FACEBOOK (cards que abrem no Facebook)
   ================================================================ */
.reels-galeria {
  display:            grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                1.25rem;
  padding:            .5rem .25rem 1.75rem;
  margin-bottom:      1rem;
}
.reels-item {
  position:           relative;
  display:            block;
  width:              100%;
  aspect-ratio:       220 / 392;
  border-radius:      var(--raio-md);
  overflow:           hidden;
  box-shadow:         var(--sombra-media);
  background:         var(--cor-fundo-medio);
  text-decoration:    none;
}
@media (max-width: 900px) {
  .reels-galeria { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .reels-galeria { grid-template-columns: 1fr 1fr; gap: .75rem; }
}
.reels-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease-app, cubic-bezier(.16,1,.3,1));
}
.reels-item:hover img { transform: scale(1.08); }
.reels-item::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,4,2,.85) 0%, rgba(10,4,2,.15) 45%, rgba(10,4,2,.35) 100%);
}
.reels-item__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,.16);
  border: 2px solid rgba(255,255,255,.85);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.5rem;
  transition: transform .3s var(--ease-app, cubic-bezier(.16,1,.3,1)), background .3s ease;
}
.reels-item__play i { margin-left: 3px; }
.reels-item:hover .reels-item__play { transform: translate(-50%, -50%) scale(1.12); background: rgba(255,255,255,.28); }
.reels-item__legenda {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .9rem .75rem;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  font-family: var(--fonte-titulo); font-size: .7rem; letter-spacing: .06em;
  color: #fff;
}



/* ================================================================
   FIM DE bootstrap-overrides.css
   Próximo ficheiro: index.html (Partes 3, 4 e 5)
   ================================================================ */