:root {
  /* Cores Literais (como tens) */
  --cor-vinho: #660000;
  --cor-preta: #121212;
  --cor-branca: #f8f8f8;
  --cor-dourado: #c8a96a;
  --cor-cinza-escuro: #2e2e2e;
  --ink: #eaeaea;
  --muted: #bdbdbd;

  /* * OTIMIZAÇÃO: Cores Funcionais (para consistência) 
   * Usamos estas para botões, fundos, etc.
  */
  --color-primary: var(--cor-vinho);
  --color-secondary: var(--cor-dourado);
  --color-background: var(--cor-preta);
  --color-surface: #1a1a1a; /* Para cards/elementos elevados */
  --color-text: var(--cor-branca);
  --color-text-muted: var(--ink);
  --color-border: rgba(255, 255, 255, 0.12);

  /* Tipografia */
  --font-titulo: 'Playfair Display', serif;
  --font-texto: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";

  /* Tamanhos fluidos (Perfeito!) */
  --font-xl: clamp(2rem, 3vw + 1rem, 3rem);
  --font-lg: clamp(1.375rem, 1.2vw + 1rem, 1.75rem);
  --font-md: clamp(1rem, .25vw + .9rem, 1.125rem);
  --font-sm: .9rem;

  /* Layout */
  /* OTIMIZAÇÃO: Usar min() é mais robusto que um valor fixo */
  --container-width: 1280px;
  --container-padding: clamp(1rem, 3vw, 2rem);
  --raio-borda: .75rem; /* 12px */
  --raio-pill: 999px;

  /* Efeitos (Perfeito!) */
  --transicao-padrao: .3s cubic-bezier(.22, .61, .36, 1);
  --sombra-leve: 0 6px 24px rgba(0, 0, 0, .18);
  --sombra-forte: 0 10px 40px rgba(0, 0, 0, .28);

  /* Animações (Perfeito!) */
  --reveal-dur: .8s;
  --reveal-ease: cubic-bezier(.2, .65, .2, 1);
}

/* ====== Reset mínimo + Tipografia Base ====== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ====== Reset mínimo + tipografia ====== */
*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  text-size-adjust:100%;
  /* CORREÇÃO: Impede o scroll horizontal em todo o site */
  overflow-x: hidden;
}

body{
  margin:0;
  background:var(--cor-preta);
  color:var(--cor-branca);
  font-family:var(--font-texto);
  font-size:var(--font-md);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* CORREÇÃO: Garante que o body também não "vaza" */
  overflow-x: hidden;
}

img,
video,
picture,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-titulo);
  color: var(--color-secondary); /* Dourado é mais usado para títulos */
  line-height: 1.2;
  /* OTIMIZAÇÃO: Títulos mais legíveis em ecrãs largos */
  text-wrap: balance;
}

h1 { font-size: var(--font-xl); }
h2 { font-size: var(--font-lg); }
h3 { font-size: clamp(1.125rem, .6vw + 1rem, 1.35rem); }

p {
  color: var(--color-text-muted);
  margin-bottom: 1rem; /* Apenas margem inferior para evitar colapso */
  max-width: 70ch; /* Limite de largura de linha para legibilidade */
}

a {
  color: var(--color-secondary);
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

/* CORREÇÃO: Logo "espalmado" no menu mobile
  Isto corrige o problema do .drawer-logo img
*/
.drawer-logo img {
  /* A tua regra original (correta): */
  max-height: 44px;

  /* A CORREÇÃO: */
  /* Diz ao browser para calcular a largura automaticamente
     para manter o rácio de aspeto, em vez de
     esticar para 100% da largura. */
  width: auto;
  
  /* Também é uma boa ideia impedir que o link se estique */
  .drawer-logo {
  	align-self: flex-start; /* Impede o <a> de esticar */
  	width: auto; /* Garante que o <a> tem o tamanho do logo */
  }
}

/* ====== UTILITÁRIOS GLOBAIS (Extraído das secções) ====== */

/* 1. O Container (Centralizado) */
.container,
.container-footer,
.container-galeria {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* 2. Botão Primário (Base) */
.btn-primaria {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.35rem; /* Tamanho base generoso */
  border-radius: var(--raio-pill);
  font-weight: 700;
  letter-spacing: .2px;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary), #8a1a1a 58%);
  border: 1px solid rgba(200, 169, 106, .28); /* Borda dourada subtil */
  box-shadow: 0 10px 26px rgba(102, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .04);

  /* Efeitos */
  position: relative;
  isolation: isolate;
  transform: translateZ(0);
  transition: transform var(--transicao-padrao), box-shadow var(--transicao-padrao), background var(--transicao-padrao);
  outline-offset: 3px;
}
.btn-primaria:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(102, 0, 0, .45);
}
.btn-primaria:active {
  transform: translateY(0);
}
/* Efeito de luz do Hero, mas global (opcional) */
.btn-primaria::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  z-index: -1;
  background: radial-gradient(120px 80px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .2), transparent 60%);
  opacity: 0;
  transition: opacity var(--transicao-padrao);
}
.btn-primaria:hover::after {
  opacity: .55;
}

/* 3. Botão Secundário (Base) */
.btn-sec,
.btn-secundaria {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.35rem;
  border-radius: var(--raio-pill);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  
  color: var(--color-text);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--color-border);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);

  /* Efeitos */
  transition: transform var(--transicao-padrao), box-shadow var(--transicao-padrao), background var(--transicao-padrao);
  outline-offset: 3px;
}
.btn-sec:hover,
.btn-secundaria:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
}

/* 4. Foco Visível para TODOS os botões e links */
:where(.btn-primaria, .btn-sec, .btn-secundaria):focus-visible,
:where(.menu-nav a, .drawer-nav a, .social-icons a):focus-visible {
  outline: 2px solid color-mix(in oklab, var(--cor-dourado) 70%, #fff 30%);
  outline-offset: 4px;
  box-shadow: 0 0 0 6px rgba(200, 169, 106, .22);
}

/* 5. Animação Reveal (Base) */
.reveal {
  opacity: 0;
  transform: translateY(22px) scale(.985);
  filter: blur(.5px);
  transition: opacity var(--reveal-dur) var(--reveal-ease), 
              transform var(--reveal-dur) var(--reveal-ease), 
              filter calc(var(--reveal-dur) * .85) var(--reveal-ease);
  will-change: transform, opacity, filter;
}
.reveal.show {
  opacity: 1;
  transform: none;
  filter: none;
}

/* 6. Acessibilidade */
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* ===== Header aprimorado (Otimizado) ===== */
.header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
  padding: clamp(.8rem, 1.6vw, 1.2rem) var(--container-padding); /* OTIMIZADO: Usa padding global */
  background: rgba(0, 0, 0, .45);
  backdrop-filter: saturate(120%) blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .3s ease, box-shadow .3s ease, transform .4s ease;
  box-shadow: 0 0 12px rgba(0, 0, 0, .28);
  will-change: transform, background, box-shadow;
}

.header.is-scrolled {
  background: rgba(0, 0, 0, .72);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.container-header {
  max-width: var(--container-width); /* OTIMIZADO: Usa width global */
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(.6rem, 2vw, 1.5rem);
}

/* Brand */
.logo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-titulo);
  font-size: clamp(1.25rem, 2vw, 1.9rem);
  color: var(--color-secondary); /* OTIMIZADO: Usa var() */
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: .02em;
  transition: filter .25s ease, text-shadow .25s ease, transform .25s ease;
}
.logo img {
  display: block;
  height: auto;
  width: auto;
  max-height: 48px;
}
.logo:hover {
  text-shadow: 0 0 6px var(--color-secondary); /* OTIMIZADO: Usa var() */
  transform: translateY(-1px);
}

/* Navegação desktop */
.menu-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
  list-style: none; /* Já estava no reset global, mas não faz mal manter */
  padding: 0;
  margin: 0;
}
.menu-nav a {
  color: var(--color-text); /* OTIMIZADO: Usa var() */
  font-size: clamp(.95rem, .4vw + .8rem, 1rem);
  font-weight: 500;
  text-decoration: none;
  position: relative;
  padding: .25rem .1rem;
  transition: color .25s ease, opacity .25s ease;
}
.menu-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 0%;
  background: var(--color-secondary); /* OTIMIZADO: Usa var() */
  transition: width .25s ease;
}
.menu-nav a:hover,
.menu-nav a.active {
  color: var(--color-secondary); /* OTIMIZADO: Usa var() */
}
.menu-nav a:hover::after,
.menu-nav a.active::after {
  width: 100%;
}

.header .btn-primaria {
  padding: .6rem 1.1rem;
  font-size: clamp(.95rem, .4vw + .8rem, 1rem);
}


/* Hamburger + Drawer móvel */
.header-burger {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--color-border); /* OTIMIZADO: Usa var() */
  background: rgba(0, 0, 0, .35);
  color: var(--color-text); /* OTIMIZADO: Usa var() */
  position: relative;
  transition: transform .2s ease, background .25s ease;
}
.header-burger:hover {
  background: rgba(0, 0, 0, .5);
  transform: translateY(-1px);
}
.header-burger span {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  background: var(--color-text); /* OTIMIZADO: Usa var() */
  border-radius: 2px;
  transform: translateX(-50%);
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.header-burger span:nth-child(1) { top: 13px; }
.header-burger span:nth-child(2) { top: 20px; }
.header-burger span:nth-child(3) { top: 27px; }

/* OTIMIZAÇÃO: Renomeei as classes b1/b2/b3 no CSS para nth-child() 
   para não depender de classes no HTML dos <span> */
.header-burger[aria-expanded="true"] span:nth-child(1) {
  top: 20px;
  transform: translateX(-50%) rotate(45deg);
}
.header-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.header-burger[aria-expanded="true"] span:nth-child(3) {
  top: 20px;
  transform: translateX(-50%) rotate(-45deg);
}

.header-drawer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: start end;
  z-index: 1200;
  transition: opacity .25s ease, visibility .25s ease;
  opacity: 1;
  visibility: visible;
}
.header-drawer[hidden] {
  opacity: 0;
  visibility: hidden;
}
.header-drawer .drawer-inner {
  width: min(86vw, 380px);
  height: 100%;
  background: rgba(18, 18, 18, .98);
  border-left: 1px solid rgba(255, 255, 255, .08);
  box-shadow: -10px 0 30px rgba(0, 0, 0, .45);
  transform: translateX(0);
  transition: transform .28s cubic-bezier(.2, .65, .2, 1);
  padding: clamp(16px, 3vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.header-drawer[hidden] .drawer-inner {
  transform: translateX(100%); /* OTIMIZAÇÃO: Sair 100% da tela é mais limpo */
}
.drawer-logo img {
  max-height: 44px;
}
.drawer-nav {
  display: grid;
  gap: .6rem;
  margin-top: .5rem;
}
.drawer-nav a {
  display: block;
  padding: .8rem 1rem;
  border-radius: .6rem;
  color: var(--color-text-muted); /* OTIMIZADO: Usa var() */
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .06);
  background: rgba(255, 255, 255, .03);
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.drawer-nav a:hover {
  background: rgba(255, 255, 255, .08);
  transform: translateX(2px);
}
.drawer-cta {
  margin-top: auto;
  display: grid;
  gap: .6rem;
}
/* OTIMIZAÇÃO: O botão no drawer deve usar a classe .btn-primaria */
.drawer-cta .btn-primaria {
  width: 100%; /* Fazer o botão ocupar todo o espaço */
}
.drawer-close {
  align-self: flex-end;
  border: none;
  background: transparent;
  color: var(--color-text); /* OTIMIZADO: Usa var() */
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  padding: .2rem .4rem;
}

/* * OTIMIZAÇÃO: Bloco de Acessibilidade :where(...):focus-visible removido.
 * Já está 100% coberto pela nossa Base Global.
*/

/* Responsividade */
@media (max-width: 1024px) {
  .menu-nav ul {
    gap: 1.25rem;
  }
}
@media (max-width: 860px) {
  .menu-nav {
    display: none;
  }
  .header-burger {
    display: inline-grid;
    place-items: center;
  }
  /* OTIMIZAÇÃO: Ajusta o padding do botão *primário* em mobile */
  .header .btn-primaria {
    padding: .55rem 1rem;
  }
  .logo img {
    max-height: 42px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .header,
  .menu-nav a::after,
  .btn-primaria, /* OTIMIZAÇÃO: Atualizado de .btn-reservar */
  .header-burger {
    transition: none;
  }
}

/* ===== Hero Section (Otimizado) ===== */

/* Variáveis locais do Hero (Correto!) */
:root {
  --header-h: 0px; /* ajustado em runtime */
  --vh-fix: 1vh; /* fallback iOS/Android */
}

        /* Altura exata da viewport com fallbacks (Perfeito!) */
        .hero-section {
          position: relative;
          isolation: isolate;
          overflow: hidden;
          height: calc(100svh - var(--header-h));
          height: calc(100dvh - var(--header-h));
          height: calc(100vh - var(--header-h));
          height: calc(100 * var(--vh-fix) - var(--header-h));
          background: var(--color-background); /* OTIMIZAÇÃO: Usa var() */
          color: var(--color-text); /* OTIMIZAÇÃO: Usa var() */
        }

        /* Ornamento coerente (Mantido - Perfeito) */
        .hero-section::after {
          content: "";
          position: absolute;
          inset: auto -12% -28% -12%;
          height: 45%;
          pointer-events: none;
          z-index: 0;
          background: radial-gradient(60% 60% at 50% 50%, rgba(200, 169, 106, .10) 0%, rgba(200, 169, 106, 0) 60%);
          filter: blur(28px);
        }

        /* Vinhetas para legibilidade (Mantido - Perfeito) */
        .hero-section::before {
          content: "";
          position: absolute;
          inset: 0;
          z-index: -1;
          pointer-events: none;
          background:
            radial-gradient(1100px 520px at 20% 15%, rgba(0, 0, 0, .35), transparent 60%),
            linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .78) 38%, rgba(0, 0, 0, .9) 100%);
        }

        /* Vídeo de fundo (Mantido - Perfeito) */
        .hero-video {
          position: absolute;
          inset: 0;
          z-index: -2;
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
          transform: translateZ(0) scale(1.03);
          filter: brightness(.9) contrast(1.05) saturate(1.08);
          transition: transform .9s var(--reveal-ease), filter .5s ease, opacity .4s ease;
          will-change: transform, filter, opacity;
        }

        /* iOS fill-available (Mantido - Perfeito) */
        @supports (-webkit-touch-callout: none) {
          .hero-section {
            height: calc(-webkit-fill-available - var(--header-h));
          }
        }

        /* Overlay de conteúdo */
        .hero-overlay {
          position: absolute;
          inset: 0;
          z-index: 1;
        }

        /* * OTIMIZAÇÃO: Bloco .container removido (3 linhas poupadas)
        * Já está definido na "Base Global".
        */

        .hero-content {
          position: absolute;
          inset: 0;
          display: grid;
          align-content: start;
          gap: clamp(16px, 2.8vw, 28px);
          /* OTIMIZAÇÃO: Usa a variável global de padding do container */
          padding: clamp(56px, 12vh, 120px) var(--container-padding) clamp(32px, 10vh, 80px);
          color: var(--color-text); /* OTIMIZAÇÃO: Usa var() */
        }

        /* Tipografia alinhada */
        .hero-content h1 {
          font-family: var(--font-titulo);
          color: var(--color-secondary); /* OTIMIZAÇÃO: Usa var() */
          font-size: clamp(2rem, 6vw, 3rem);
          line-height: 1.12;
          text-wrap: balance;
          text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
        }
        .hero-content h1::after {
          content: "";
          display: block;
          width: 60px;
          height: 3px;
          background: var(--color-secondary); /* OTIMIZAÇÃO: Usa var() */
          margin-top: .5rem;
          border-radius: 2px;
        }
        .hero-content p {
          max-width: 65ch;
          font-size: clamp(1rem, .6vw + .95rem, 1.2rem);
          color: var(--color-text-muted); /* OTIMIZAÇÃO: Usa var() */
          opacity: .92;
        }

        /* CTAs (wrapper) */
        .hero-ctas {
          display: flex;
          flex-wrap: wrap;
          gap: 12px;
          align-items: center;
        }

        /* * OTIMIZAÇÃO: Estilos de botão (DRY)
        * Removemos 10+ linhas de estilos redundantes (border-radius, font-weight, transition, etc.)
        * Herda tudo do .btn-primaria e .btn-secundaria globais.
        * Mantemos APENAS o que é único desta secção (o min-height e padding-inline fluidos).
        */
        .hero-ctas .btn-primaria,
        .hero-ctas .btn-secundaria {
          --h: clamp(44px, 6.2vh, 54px);
          min-height: var(--h);
          padding-inline: clamp(18px, 3.6vw, 28px);
          /* Propriedades únicas mantidas */
          inline-size: fit-content;
        }

        /* OTIMIZAÇÃO: Estilos *específicos* do Hero são mantidos como *overrides* */
        .hero-ctas .btn-primaria {
          /* Estes são ligeiramente diferentes da base, por isso mantêm-se */
          border: 1px solid rgba(200, 169, 106, .22);
          box-shadow: 0 10px 26px rgba(102, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .04);
        }
        .hero-ctas .btn-primaria:hover {
          /* O :hover da base é bom, mas este é específico, por isso mantem-se */
          transform: translateY(-1px);
          box-shadow: 0 16px 36px rgba(102, 0, 0, .55);
        }
        .hero-ctas .btn-primaria::after {
          /* O ::after do Hero é mais complexo que o da base, por isso mantem-se */
          background:
            radial-gradient(120px 80px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .2), transparent 60%),
            radial-gradient(300px 120px at 50% 120%, rgba(200, 169, 106, .22), transparent 70%);
        }

        .hero-ctas .btn-secundaria {
          /* O border e shadow são específicos, mantêm-se */
          border: 1px solid rgba(200, 169, 106, .35);
          box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);
        }

        /* * OTIMIZAÇÃO: Bloco :focus-visible removido (4 linhas poupadas)
        * Já está 100% coberto pela "Base Global".
        */

        /* Chips/Highlights (Mantido - Perfeito) */
        .hero-highlights {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
        }
        .highlight-item {
          display: inline-flex;
          align-items: center;
          gap: .55em;
          padding: .6rem .9rem;
          border-radius: var(--raio-pill);
          font-size: clamp(.92rem, .2vw + .86rem, 1rem);
          color: var(--color-text); /* OTIMIZAÇÃO: Usa var() */
          background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
          border: 1px solid var(--color-border); /* OTIMIZAÇÃO: Usa var() */
          box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
          transition: transform var(--transicao-padrao), box-shadow var(--transicao-padrao), border-color var(--transicao-padrao);
        }
        .highlight-item:hover {
          transform: translateY(-2px);
          box-shadow: 0 18px 36px rgba(0, 0, 0, .28);
          border-color: rgba(200, 169, 106, .45);
        }

        /* Reviews compactas (Mantido - Perfeito) */
        .google-reviews {
          display: flex;
          align-items: center;
          gap: .6rem;
          width: max-content;
          max-width: 100%;
          margin-top: 6px;
          padding: .55rem .8rem;
          font-size: clamp(.95rem, .4vw + .9rem, 1rem);
          line-height: 1;
          color: var(--color-text-muted); /* OTIMIZAÇÃO: Usa var() */
          background: rgba(28, 28, 28, .8);
          border: 1px solid rgba(255, 255, 255, .10);
          border-radius: calc(var(--raio-borda) + .4rem);
          box-shadow: 0 10px 24px rgba(0, 0, 0, .26), inset 0 0 0 1px rgba(255, 255, 255, .03);
          backdrop-filter: blur(3px);
        }
        .google-reviews strong {
          color: var(--color-text); /* OTIMIZAÇÃO: Usa var() */
          font-weight: 800;
        }
        /* ... (estilos de estrelas mantidos) ... */

        /* * OTIMIZAÇÃO: Bloco .reveal removido (7 linhas poupadas)
        * Já está 100% coberto pela "Base Global".
        */

        /* Responsividade */
        @media (min-width: 768px) {
          /* * OTIMIZAÇÃO: Bloco .container removido (redundante) */
          .hero-content {
            /* OTIMIZAÇÃO: Usa a variável global de padding */
            padding: clamp(64px, 12vh, 140px) var(--container-padding) clamp(36px, 10vh, 100px);
          }
        }

        /* Motion reduce (Perfeito!) */
        @media (prefers-reduced-motion: reduce) {
          .hero-video {
            transform: none;
            transition: none;
          }
          /* * OTIMIZAÇÃO: Bloco .reveal removido (redundante) */
          .btn-primaria,
          .btn-secundaria,
          .highlight-item {
            transition: none;
          }
        }

        /* Util (Perfeito!) */
        .hero-content > * {
          max-width: 85ch;
        }

        /* FIX simples para mobile (iPhone/Safari e afins) */
@media (max-width: 768px) {
  .hero-section {
    height: auto;  /* deixa a secção crescer conforme o conteúdo */
    min-height: calc(100svh - var(--header-h)); /* ainda garante “tela cheia” */
    overflow: visible;  /* evita cortar nada da hero */
  }
}

        /* ===== Secção Buffet (NOVA) ===== */
        .buffet-section {
          background: var(--color-background);
          color: var(--color-text);
          /* Usamos o padding global para consistência */
          padding: clamp(3.5rem, 6vw, 6rem) var(--container-padding);
          position: relative;
          overflow: hidden;
          isolation: isolate;
        }

        /* Ornamento de "glow" (consistente com as outras secções) */
        .buffet-section::before {
          content: "";
          position: absolute;
          inset: auto -20% -35% -20%;
          height: 60%;
          pointer-events: none;
          z-index: 0;
          background: radial-gradient(60% 60% at 50% 50%, rgba(200, 169, 106, .08) 0%, rgba(200, 169, 106, 0) 60%);
          filter: blur(40px);
        }

        /* Grelha de 2 colunas */
        .buffet-grid {
          display: grid;
          align-items: center;
          gap: clamp(1.5rem, 4vw, 4rem);
          /* Texto (1.1fr) | Slider (.9fr) */
          grid-template-columns: 1.1fr .9fr;
          max-width: var(--container-width);
          margin: 0 auto;
          position: relative;
          z-index: 1;
        }

        /* Coluna 1: Texto e Info */
        .buffet-texto h2 {
          font-family: var(--font-titulo);
          font-size: var(--font-xl);
          color: var(--color-secondary);
          margin: 0 0 .5rem;
          letter-spacing: .02em;
          text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
        }
        /* Linha dourada (consistente com outras secções) */
        .buffet-texto h2::after {
          content: "";
          display: block;
          width: 60px;
          height: 3px;
          background: var(--color-secondary);
          margin-top: .5rem;
          border-radius: 2px;
        }
        .buffet-texto .subtitulo {
          font-size: var(--font-lg); /* Um pouco maior para destacar */
          color: var(--color-text-muted);
          margin-bottom: 1.5rem;
          opacity: .9;
        }
        .buffet-texto p {
          /* Herda o 'p' global */
          margin-bottom: 1.5rem;
          opacity: .9;
        }

        /* Lista de Informação (Horário, Preço) */
        .buffet-info {
          list-style: none;
          margin: 1.5rem 0 2rem;
          padding: 1.5rem 0 0;
          display: grid;
          gap: .75rem; /* 12px */
          /* Linha divisória subtil */
          border-top: 1px solid var(--color-border);
        }
        .buffet-info li {
          display: flex;
          gap: .5rem;
          font-size: var(--font-md);
          line-height: 1.5;
        }
        .buffet-info li strong {
          color: var(--color-secondary);
          flex-shrink: 0; /* Impede que o 'strong' quebre linha */
        }
        .buffet-info li span {
          color: var(--color-text-muted);
        }
        .buffet-info li small {
          font-size: .8em;
          opacity: .7;
        }

        /* Botão CTA */
        .buffet-cta .btn-primaria {
          /* Herda 99% do .btn-primaria global */
          /* Apenas ajustamos o tamanho para ser mais proeminente */
          padding: .8rem 1.6rem;
          font-size: 1.05rem;
        }

        /* Coluna 2: Slider de Imagens */
        .buffet-slider-wrapper {
          position: relative;
          border-radius: var(--raio-borda);
          overflow: hidden; /* Importante para o Swiper */
          /* Sombra e borda premium (consistente com o mapa/galeria) */
          box-shadow: 0 14px 36px rgba(0, 0, 0, .35), 0 0 1rem rgba(200, 169, 106, .10);
          border: 1px solid var(--color-border);
        }

        .buffet-slider-wrapper .swiper {
          border-radius: var(--raio-borda);
        }

        .buffet-slider-wrapper .swiper-slide img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          aspect-ratio: 4/3; /* Consistência */
          display: block;
        }

        /* Paginação (Dots) do Swiper */
        .buffet-slider-wrapper .swiper-pagination {
          /* Posiciona os dots dentro do slider */
          position: absolute;
          bottom: 10px !important; /* !important para override do Swiper */
          left: 0;
          width: 100%;
          z-index: 10;
        }
        .buffet-slider-wrapper .swiper-pagination-bullet {
          background-color: #fff; /* Dots brancos para bom contraste */
          opacity: .55;
          transition: transform .2s ease, opacity .2s ease;
        }
        .buffet-slider-wrapper .swiper-pagination-bullet-active {
          opacity: 1;
          transform: scale(1.1);
          background-color: var(--color-secondary); /* Dot ativo dourado */
        }


        /* ===== Responsividade da Secção Buffet ===== */
        @media (max-width: 980px) {
          /* Stacks para 1 coluna */
          .buffet-grid {
            grid-template-columns: 1fr;
          }
          
          /* Centraliza o texto em mobile */
          .buffet-texto {
            text-align: center;
          }
          .buffet-texto h2::after {
            margin-inline: auto; /* Centraliza a linha dourada */
          }
          
          /* Melhora a legibilidade da lista de info em mobile */
          .buffet-info li {
            flex-direction: column;
            align-items: center;
            gap: .25rem;
          }
          
          .buffet-slider-wrapper {
            margin-top: 1.5rem;
          }
        }

/* ===== Especialidades Section (Otimizado) ===== */

.especialidades-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-background); /* OTIMIZAÇÃO: Usa var() */
  color: var(--color-text); /* OTIMIZAÇÃO: Usa var() */
  /* OTIMIZAÇÃO: Usa a var global para padding */
  padding: clamp(3.5rem, 6vw, 6rem) var(--container-padding);
}

/* Ornamentos (Mantido - Perfeito) */
.especialidades-section::before {
  content: "";
  position: absolute;
  inset: auto -12% -28% -12%;
  height: 45%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(60% 60% at 50% 50%, rgba(200, 169, 106, .08) 0%, rgba(200, 169, 106, 0) 60%);
  filter: blur(28px);
}

/* Título + subtítulo (Perfeito, apenas trocamos vars) */
.especialidades-section h3 {
  font-family: var(--font-titulo);
  font-size: var(--font-xl);
  color: var(--color-secondary); /* OTIMIZAÇÃO: Usa var() */
  margin: 0 0 .5rem;
  letter-spacing: .02em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
  position: relative;
  z-index: 1;
}
.especialidades-section h3::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--color-secondary); /* OTIMIZAÇÃO: Usa var() */
  margin-top: .5rem;
  border-radius: 2px;
}
.especialidades-section .subtitulo {
  margin-top: .25rem;
  color: var(--color-text-muted); /* OTIMIZAÇÃO: Usa var() */
  font-size: var(--font-md);
  opacity: .92;
  max-width: 95%;
}

/* * INOVAÇÃO: Grid simplificada (Mesmo resultado, 80% menos código) */
.cards-especialidades {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(16px, 2.6vw, 28px);
  margin-top: clamp(18px, 3vw, 28px);
  max-width: 1280px; /* O container global já tem padding, não precisamos de 96vw */
  margin-inline: auto;

  /* Esta é a nova lógica de colunas: 1, 2, ou 3 */
  grid-template-columns: 1fr; /* 1. Mobile-first: 1 coluna */
}
/* 2. Tablet: 2 colunas */
@media (min-width: 641px) {
  .cards-especialidades {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* 3. Desktop: 3 colunas */
@media (min-width: 1025px) {
  .cards-especialidades {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* Card (Estilos de layout de grid removidos, o resto está perfeito) */
.card-prato {
  /* OTIMIZAÇÃO: `grid-column: span X` já não é necessário */
  display: grid;
  gap: .8rem;
  padding: clamp(12px, 1.2vw, 16px);
  border-radius: calc(var(--raio-borda) + .25rem);
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02));
  border: 1px solid var(--color-border); /* OTIMIZAÇÃO: Usa var() */
  box-shadow: var(--sombra-leve);
  transform: translateZ(0);
  transition:
    transform var(--transicao-padrao),
    box-shadow var(--transicao-padrao),
    border-color var(--transicao-padrao),
    background var(--transicao-padrao);
  isolation: isolate;
}
/* OTIMIZAÇÃO: Media queries de grid-column removidas */

.card-prato:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .35);
  border-color: rgba(200, 169, 106, .35);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
}
.card-prato:focus-within {
  /* OTIMIZAÇÃO: Usa a var() global */
  outline: 2px solid var(--color-secondary);
  outline-offset: 4px;
}

/* Imagem + selo (Perfeito, apenas trocamos vars) */
.prato-img-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--raio-borda) + .25rem);
  aspect-ratio: 16/10;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.prato-img-wrapper picture,
.prato-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.prato-img-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .25) 75%, rgba(0, 0, 0, .45));
  pointer-events: none;
}
.selo-destaque {
  position: absolute;
  left: .75rem;
  top: .75rem;
  padding: .45rem .7rem;
  border-radius: var(--raio-pill);
  font-weight: 700;
  font-size: .85rem;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary), #8a1a1a 58%); /* OTIMIZAÇÃO: Usa var() */
  border: 1px solid rgba(200, 169, 106, .38);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .26), inset 0 0 0 1px rgba(255, 255, 255, .05);
  transform: translateY(-6px);
  opacity: 0;
  transition: opacity .4s var(--reveal-ease), transform .4s var(--reveal-ease);
}
.card-prato:hover .selo-destaque {
  transform: translateY(0);
  opacity: 1;
}

/* Título/descrição (Perfeito, apenas trocamos vars) */
.card-prato h3 {
  margin: .1rem 0 .25rem;
  color: var(--color-text); /* OTIMIZAÇÃO: Usa var() */
  font-size: clamp(1.05rem, .7vw + 1rem, 1.35rem);
  text-wrap: balance;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}
.card-prato p {
  color: var(--color-text-muted); /* OTIMIZAÇÃO: Usa var() */
  margin: 0 0 .2rem;
  opacity: .92;
}

/* CTA no card (Wrapper) */
.prato-cta {
  margin-top: .4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  justify-content: space-between;
}

/* * OTIMIZAÇÃO: Bloco de botões (22 linhas poupadas!)
 * Removemos todas as definições. Os botões herdam do global.
 * Apenas ajustamos o padding, que é único para estes botões.
*/
.prato-cta .btn-primaria,
.prato-cta .btn-sec {
  padding: .55rem 1rem;
}

/* * OTIMIZAÇÃO: Bloco :focus-visible removido (4 linhas poupadas)
 * Já está 100% coberto pela "Base Global".
*/

/* * OTIMIZAÇÃO: Bloco .reveal removido (7 linhas poupadas)
 * Já está 100% coberto pela "Base Global".
*/

/* Escalonamento (Mantido - Perfeito) */
.cards-especialidades .card-prato {
  transition-delay: .0s;
}
.cards-especialidades .card-prato:nth-child(1) {
  transition-delay: .10s;
}
.cards-especialidades .card-prato:nth-child(2) {
  transition-delay: .16s;
}
.cards-especialidades .card-prato:nth-child(3) {
  transition-delay: .22s;
}
/* ... (etc) ... */

/* CTA global (Otimizado) */
.cta-especialidades {
  margin-top: clamp(18px, 4vw, 36px);
  display: flex;
  justify-content: center;
}
/* OTIMIZAÇÃO: Herda o padding-base. Apenas ajusta o font-size. */
.cta-especialidades .btn-primaria {
  font-size: clamp(1rem, .35vw + .95rem, 1.05rem);
}

/* DIALOG (Mantido - Perfeito, apenas trocamos vars) */
.prato-dialog {
  border: none;
  padding: 0;
  margin: auto;
  width: min(960px, 96vw);
  max-height: 90dvh;
  background: rgba(18, 18, 18, .96);
  color: var(--color-text); /* OTIMIZAÇÃO: Usa var() */
  border-radius: calc(var(--raio-borda) + .35rem);
  box-shadow: var(--sombra-forte);
  overflow: clip;
}
.prato-dialog::backdrop {
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(3px);
}
.dialog-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--color-border); /* OTIMIZAÇÃO: Usa var() */
  background: rgba(0, 0, 0, .35);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform var(--transicao-padrao), background var(--transicao-padrao);
}
.dialog-close:hover {
  transform: translateY(-1px);
  background: rgba(0, 0, 0, .55);
}
.dialog-body {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .dialog-body {
    grid-template-columns: 1fr 1fr;
  }
}
.dialog-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 16/12;
}
.dialog-info {
  padding: clamp(16px, 2.8vw, 28px);
  display: grid;
  gap: .6rem;
  align-content: start;
}
.dialog-title {
  margin: .25rem 0 .1rem;
  font-size: clamp(1.2rem, .6vw + 1.1rem, 1.6rem);
  color: var(--color-text); /* OTIMIZAÇÃO: Usa var() */
  text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}
.dialog-desc {
  color: var(--color-text-muted); /* OTIMIZAÇÃO: Usa var() */
  margin: 0 0 .25rem;
}
.dialog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  color: var(--muted);
}
.dialog-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .4rem;
}
/* OTIMIZAÇÃO: Os botões no dialog vão herdar o .btn-primaria e .btn-sec global */
.dialog-cta .btn-primaria,
.dialog-cta .btn-sec {
  padding: .55rem 1rem; /* Ajuste de tamanho local */
}

/* Scroll-driven animations (Mantido - Perfeito) */
@supports (animation-timeline: view()) {
  .prato-img-wrapper img {
    animation: espParallax both .9s ease;
    animation-timeline: view();
    animation-range: entry 0% cover 50%;
  }
  @keyframes espParallax {
    from {
      transform: scale(1.08) translateY(-1%);
      filter: brightness(1.0);
    }
    to {
      transform: scale(1.02) translateY(0);
      filter: brightness(1.06);
    }
  }
  /* Evita dupla transição quando a view-timeline está ativa */
  .reveal {
    transition: none;
  }
}

/* Responsivo (Mantido - Perfeito) */
@media (max-width: 980px) {
  .especialidades-section h2::after {
    margin-inline: auto;
  }
  .especialidades-section .subtitulo {
    max-width: 100%;
    margin-inline: auto;
    text-align: center;
  }
}

/* Preferências do utilizador (Otimizado) */
@media (prefers-reduced-motion: reduce) {
  /* OTIMIZAÇÃO: .reveal removido, já coberto pelo global */
  .card-prato,
  .btn-primaria,
  .btn-sec {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ===== Vinhos & Carnes (Otimizado) ===== */

.vinhos-carnes-section {
  background: var(--color-background); /* OTIMIZAÇÃO: Usa var() */
  color: var(--color-text); /* OTIMIZAÇÃO: Usa var() */
  /* OTIMIZAÇÃO: Corrigido para a variável global de padding */
  padding: clamp(3.5rem, 6vw, 6rem) var(--container-padding);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Ornamento sutil no fundo (Mantido - Perfeito) */
.vinhos-carnes-section::before {
  content: "";
  position: absolute;
  inset: auto -20% -35% -20%;
  height: 60%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(60% 60% at 50% 50%, rgba(200, 169, 106, .08) 0%, rgba(200, 169, 106, 0) 60%);
  filter: blur(40px);
}

/* Grid (Mantido - Perfeito) */
.vinhos-carnes-grid {
  display: grid;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: 1.1fr .9fr;
  max-width: var(--container-width); /* OTIMIZAÇÃO: Usa var() */
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Título e subtítulo (Perfeito, apenas trocamos vars) */
.vinhos-carnes-texto h2 {
  font-family: var(--font-titulo);
  font-size: var(--font-xl);
  color: var(--color-secondary); /* OTIMIZAÇÃO: Usa var() */
  margin: 0 0 .5rem;
  position: relative;
  letter-spacing: .02em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.vinhos-carnes-texto h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--color-secondary); /* OTIMIZAÇÃO: Usa var() */
  margin-top: .5rem;
  border-radius: 2px;
}
.vinhos-carnes-texto p {
  font-size: var(--font-md);
  line-height: 1.7;
  margin: 0 0 2rem;
  opacity: .9;
  max-width: 95%;
  color: var(--color-text-muted); /* OTIMIZAÇÃO: Adicionado var() */
}

/* Lista premium (Perfeito, apenas trocamos vars) */
.lista-premium {
  list-style: none;
  padding: 0;
  margin: 0 0 2.5rem;
  display: grid;
  gap: .7rem;
}
.lista-premium li {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--font-sm);
  color: var(--color-text); /* OTIMIZAÇÃO: Usa var() */
  opacity: .85;
  transition: transform .25s ease, color .25s ease;
  transform: translateZ(0);
}
.lista-premium li::before {
  content: "✦";
  color: var(--color-secondary); /* OTIMIZAÇÃO: Usa var() */
  font-size: .85rem;
  flex: 0 0 auto;
}
.lista-premium li:hover {
  transform: translateX(4px);
  color: rgba(255, 255, 255, .95);
}

/* Imagem (Mantido - Perfeito) */
.vinhos-carnes-imagem {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio-borda);
  box-shadow: 0 0 1rem rgba(255, 255, 255, .05);
}
.vinhos-carnes-imagem::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .25));
  pointer-events: none;
}
.vinhos-carnes-imagem img {
  width: 100%;
  display: block;
  border-radius: var(--raio-borda);
  transition: transform .6s cubic-bezier(.2, .65, .2, 1), filter .6s ease;
  transform: scale(1.02);
}
.vinhos-carnes-imagem:hover img {
  transform: scale(1.06);
  filter: brightness(1.06);
}

/* Botão (Otimizado) */
.vinhos-carnes-texto .btn-primaria {
  /* Herda display, border-radius, font-weight, transition base, etc. */
  
  /* 1. Overrides Específicos */
  padding: .75rem 2rem;
  font-size: 1rem;
  box-shadow: 0 10px 28px rgba(102, 0, 0, .22);
  
  /* OTIMIZAÇÃO: Adicionada transição de 'color' para o hover */
  transition: transform .18s ease, 
              box-shadow .25s ease, 
              background var(--transicao-padrao), 
              color var(--transicao-padrao);
}
/* 2. Variação de Hover (Mantida - Perfeita!) */
.vinhos-carnes-texto .btn-primaria:hover {
  background-color: var(--color-secondary); /* OTIMIZAÇÃO: Usa var() */
  color: var(--color-background); /* OTIMIZAÇÃO: Usa var() */
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(200, 169, 106, .25);
}

/* ===== Scroll reveal (Mantido - Perfeito) ===== */
/* (Este é o teu padrão de animação, está ótimo) */
.vinhos-carnes-texto h2,
.vinhos-carnes-texto p,
.vinhos-carnes-texto .lista-premium li,
.vinhos-carnes-texto .btn-primaria,
.vinhos-carnes-imagem {
  opacity: 0;
  transform: translateY(22px) scale(.985);
  transition: opacity .7s ease, transform .7s ease, filter .6s ease;
  will-change: transform, opacity;
}
.vinhos-carnes-section.revealed .vinhos-carnes-texto h2 {
  opacity: 1;
  transform: none;
  transition-delay: .05s;
}

/* Adição para o botão "A nossa história" */
.vinhos-carnes-cta {
  margin-top: 1.5rem; /* Adiciona espaço acima do botão */
}

.vinhos-carnes-texto .btn-primaria {
  padding: .65rem 1.2rem;
  font-size: 0.95rem;
}

/* ===== Scroll-driven animations (Mantido - Perfeito) ===== */
@supports (animation-timeline: view()) {
  .vinhos-carnes-imagem img {
    animation: vcParallax both .9s ease;
    animation-timeline: view();
    animation-range: entry 0% cover 50%;
  }
  @keyframes vcParallax {
    from {
      transform: scale(1.08) translateY(-1%);
      filter: brightness(1.0);
    }
    to {
      transform: scale(1.02) translateY(0);
      filter: brightness(1.06);
    }
  }
}

/* ===== Responsividade (Mantido - Perfeito) ===== */
@media (max-width: 980px) {
  .vinhos-carnes-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .vinhos-carnes-texto p {
    max-width: 100%;
    margin-inline: auto;
  }
  .vinhos-carnes-imagem {
    margin-top: 1.5rem;
  }
  .vinhos-carnes-texto h2::after {
    margin-inline: auto;
  }
}

/* ===== Preferências do utilizador (Mantido - Perfeito) ===== */
@media (prefers-reduced-motion: reduce) {
  .vinhos-carnes-texto h2,
  .vinhos-carnes-texto p,
  .vinhos-carnes-texto .lista-premium li,
  .vinhos-carnes-texto .btn-primaria,
  .vinhos-carnes-imagem {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===== Testemunhos (Otimizado & Fundido) ===== */
.testemunhos-section {
  background-color: var(--color-background); /* OTIMIZAÇÃO: Usa var() */
  /* OTIMIZAÇÃO: Corrigido para a variável global de padding */
  padding: clamp(3.5rem, 6vw, 6rem) var(--container-padding);
  text-align: center;
  color: var(--color-text); /* OTIMIZAÇÃO: Usa var() */
  position: relative;
  overflow: hidden;
}

.testemunhos-section h2 {
  font-family: var(--font-titulo);
  font-size: var(--font-xl);
  color: var(--color-secondary); /* OTIMIZAÇÃO: Usa var() */
  margin: 0 0 .5rem;
  letter-spacing: .02em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

.testemunhos-section .subtitulo {
  font-size: var(--font-md);
  margin: 0 auto 3rem;
  opacity: .85;
  max-width: min(70ch, 92vw);
  color: var(--color-text-muted); /* OTIMIZAÇÃO: Usa var() */
}

/* * OTIMIZAÇÃO: O bloco .cards-testemunhos (grid) foi removido.
 * Fundimos os seus estilos com o .testimonials (slider) abaixo.
*/

/* 1. O contentor do slider (o "viewport") */
.testimonials {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* OTIMIZAÇÃO: Puxámos o max-width do antigo .cards-testemunhos */
  max-width: 1200px;
  margin: 0 auto;
}
.testimonials::-webkit-scrollbar {
  display: none;
}

/* 2. O "track" (a lista <ul>) */
.t-track {
  display: flex;
  gap: 1rem;
  padding-inline: 2rem; /* Permite que o 1º/último card centrem */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 3. O item do slider (o <li>) - ESTILOS FUNDIDOS */
.testemunho-card {
  /* A. Layout do Slider (do teu código) */
  scroll-snap-align: center;
  flex-shrink: 0;
  width: 80%;
  max-width: 400px;
  
  /* B. Aparência do Card (do teu antigo .cards-testemunhos) */
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02));
  border: 1px solid var(--color-border); /* OTIMIZAÇÃO: Usa var() */
  padding: clamp(1.25rem, 2.2vw, 2rem) clamp(1rem, 2vw, 1.5rem);
  border-radius: var(--raio-borda);
  box-shadow: 0 0 .75rem rgba(255, 255, 255, .04);
  transition: transform .35s cubic-bezier(.2, .65, .2, 1), box-shadow .35s cubic-bezier(.2, .65, .2, 1), border-color .35s;
  text-align: center;
  color: var(--color-text); /* OTIMIZAÇÃO: Usa var() */
  will-change: transform, box-shadow;
  position: relative;
  overflow: hidden;
}
.testemunho-card:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 18px 38px rgba(200, 169, 106, .22);
  border-color: rgba(255, 255, 255, .10);
}

/* Ornamento de aspas (Mantido - Perfeito) */
.testemunho-card::before {
  content: "“";
  position: absolute;
  inset: auto 12px 6px auto;
  font-family: var(--font-titulo);
  font-size: 3.2rem;
  line-height: 1;
  color: rgba(255, 255, 255, .08);
  pointer-events: none;
}

/* Estrelas (Mantido - Perfeito) */
.estrelas-review {
  margin-bottom: 1rem;
}
.estrelas-svg {
  width: 120px;
  height: 24px;
  color: var(--color-secondary); /* OTIMIZAÇÃO: Usa var() */
  display: inline-block;
  filter: drop-shadow(0 2px 6px rgba(200, 169, 106, .25));
}

/* Texto (Perfeito, apenas trocamos vars) */
.testemunho-card blockquote {
  font-style: italic;
  font-size: clamp(.95rem, .3vw + .85rem, 1.05rem);
  line-height: 1.6;
  margin: 0 0 1rem;
  color: rgba(255, 255, 255, .92);
}
.nome-cliente {
  font-weight: 700;
  color: var(--color-secondary); /* OTIMIZAÇÃO: Usa var() */
  font-size: .9rem;
  margin-top: .5rem;
}

/* Foco acessível (Mantido - Perfeito) */
.testemunho-card:focus-within,
.testemunho-card:focus-visible {
  outline: 2px solid var(--color-secondary); /* OTIMIZAÇÃO: Usa var() */
  outline-offset: 3px;
}

/* * OTIMIZAÇÃO: Todos os blocos de Scroll Reveal, @supports e
 * @media(prefers-reduced-motion) foram removidos.
 * (A nossa "Base Global" já trata disto de forma uniforme)
*/

/* ===== Responsividade (Mantido) ===== */
@media (max-width: 680px) {
  .testemunho-card {
    padding: 1.1rem .95rem;
  }
  .estrelas-svg {
    width: 110px;
  }
  /* OTIMIZAÇÃO: Ajuste de padding para o track em mobile */
  .t-track {
    padding-inline: 1rem; 
    gap: .75rem;
  }
  .testemunho-card {
    width: 85vw; /* Ocupa mais ecrã em mobile */
  }
}

/* ===== Galeria (Otimizado) ===== */
.galeria-section {
  background-color: var(--color-background);
  padding: clamp(3.5rem, 6vw, 6rem) var(--container-padding);
  font-family: var(--font-texto);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.galeria-section h2 {
  font-size: var(--font-xl);
  color: var(--color-secondary);
  margin: 0 0 .5rem;
  letter-spacing: .02em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
  text-align: center;
}

.galeria-section .subtitulo {
  font-size: var(--font-md);
  color: var(--color-text-muted);
  margin: 0 auto 3rem;
  opacity: .85;
  max-width: min(70ch, 92vw);
  text-align: center;
}

/* ===== Swiper ===== */
.swiper {
  position: relative;
  padding: 0 1rem 2rem;
  overflow: hidden;
}

/* Fades nas laterais */
.swiper::before,
.swiper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 3.5rem;
  width: 48px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to right, var(--color-background) 0%, transparent 100%);
}
.swiper::after {
  right: 0;
  transform: scaleX(-1);
}
.swiper::before {
  left: 0;
}

.swiper-wrapper {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
}

/* Slides */
.swiper-slide {
  flex-shrink: 0;
  width: clamp(240px, 42vw, 520px);
  height: auto;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--raio-borda);
  transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
  box-shadow: 0 0 1rem rgba(0, 0, 0, .15);
  position: relative;
  will-change: transform, box-shadow;
}
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  transform: scale(1.02);
  transition: transform .6s cubic-bezier(.2, .65, .2, 1), filter .5s ease;
}
.swiper-slide:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .28);
}
.swiper-slide:hover img {
  transform: scale(1.06);
  filter: saturate(1.06);
}

/* * ============================================
 * A CORREÇÃO PARA O AZUL ESTÁ AQUI
 * (Estas regras sobrepõem-se ao default do Swiper)
 * ============================================
 */

/* Botões navegação (Setas) */
.swiper-button-prev,
.swiper-button-next {
  /* Cor (Dourado em vez de Azul) */
  color: var(--color-secondary);
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  /* Fundo (Preto/Glassmorphism em vez de transparente) */
  background-color: rgba(0, 0, 0, .4);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  transition: background-color .2s ease, transform .15s ease;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
  backdrop-filter: blur(6px);
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
  background-color: rgba(0, 0, 0, .6);
  transform: translateY(-50%) scale(1.04);
}
/* O :focus-visible é tratado pelo CSS Global */


/* Paginação (Dots) */
.swiper-pagination {
  margin-top: 1.5rem;
  /* Garante que os dots estão por baixo e não sobre a imagem */
  position: relative;
  bottom: auto;
}
.swiper-pagination-bullet {
  /* Cor (Dourado em vez de Azul) */
  background-color: var(--color-secondary);
  opacity: .55;
  transition: transform .2s ease, opacity .2s ease;
}
.swiper-pagination-bullet-active {
  opacity: 1;
  transform: scale(1.1);
}

/* ===== Lightbox (Mantido - Perfeito) ===== */
.gallery-lightbox::backdrop {
  background: rgba(0, 0, 0, .75);
}
.gallery-lightbox {
  border: none;
  border-radius: var(--raio-borda);
  padding: 0;
  max-width: min(92vw, 1200px);
  width: fit-content;
  overflow: hidden;
  background: #0e0e0e;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .5);
}
.gallery-lightbox .lb-img {
  width: 100%;
  height: auto;
  display: block;
}
.lb-controls {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  align-items: center;
  padding: .6rem .8rem;
  background: #0e0e0e;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.lb-controls button,
.lb-controls a {
  padding: .5rem .75rem;
  border-radius: .6rem;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.lb-controls button:hover,
.lb-controls a:hover {
  background: #222;
}

/* ===== Responsividade (Mantido - Perfeito) ===== */
@media (max-width: 980px) {
  .swiper::before,
  .swiper::after {
    width: 32px;
  }
  .swiper-slide {
    width: clamp(220px, 58vw, 420px);
  }
}
@media (max-width: 680px) {
  .swiper::before,
  .swiper::after {
    display: none;
  }
  .swiper {
    padding-inline: 0;
  }
  .swiper-slide {
    width: calc(100vw - 32px);
  }
}

/* ===== Reserva (Otimizado) ===== */
.reserva-section {
  background-color: var(--color-background); /* OTIMIZAÇÃO: Usa var() */
  color: var(--color-text); /* OTIMIZAÇÃO: Usa var() */
  /* OTIMIZAÇÃO: Corrigido para a variável global de padding */
  padding: clamp(3.5rem, 6vw, 6rem) var(--container-padding);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Glow sutil de fundo (Mantido - Perfeito) */
.reserva-section::before {
  content: "";
  position: absolute;
  inset: auto -25% -40% -25%;
  height: 65%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(60% 60% at 50% 50%, rgba(200, 169, 106, .06) 0%, rgba(200, 169, 106, 0) 60%);
  filter: blur(42px);
}

.reserva-grid {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 3.5vw, 3rem);
  max-width: var(--container-width); /* OTIMIZAÇÃO: Usa var() */
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Tipografia (Perfeito, apenas trocamos vars) */
.reserva-texto h2 {
  font-family: var(--font-titulo);
  font-size: var(--font-xl);
  color: var(--color-secondary); /* OTIMIZAÇÃO: Usa var() */
  margin: 0 0 1rem;
  letter-spacing: .02em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

.reserva-texto p {
  font-size: var(--font-md);
  margin: 0 0 1.5rem;
  opacity: .9;
  max-width: 70ch;
  color: var(--color-text-muted); /* OTIMIZAÇÃO: Usa var() */
}

.reserva-info {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  gap: .6rem;
}
.reserva-info li {
  font-size: var(--font-sm);
  opacity: .88;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.reserva-info a {
  color: var(--color-secondary); /* OTIMIZAÇÃO: Usa var() */
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dashed transparent;
  transition: border-color .25s ease, color .25s ease;
}
.reserva-info a:hover {
  color: #ffe0a3; /* Mantido - variação de hover única */
  border-color: #ffe0a3;
}

/* CTA (Otimizado) */
.reserva-texto .btn-primaria {
  /* Herda a base global */
  margin-top: .3rem;
  
  /* Overrides locais */
  padding: .8rem 1.6rem;
  box-shadow: 0 10px 28px rgba(102, 0, 0, .22);
  
  /* OTIMIZAÇÃO: Removida 'transition' redundante */
}
.reserva-texto .btn-primaria:hover {
  /* Override de hover mantido */
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(200, 169, 106, .25);
}

/* Mapa (Mantido - Perfeito) */
.reserva-mapa iframe {
  width: 100%;
  height: clamp(300px, 30vw, 420px);
  border: 0;
  border-radius: var(--raio-borda);
  box-shadow: 0 0 1rem rgba(200, 169, 106, .10), 0 14px 36px rgba(0, 0, 0, .35);
  background: #0f0f0f; /* Fallback de loading */
}

/* * OTIMIZAÇÃO: Bloco "Scroll reveal" removido (17 linhas poupadas).
 * A "Base Global" (.reveal) trata disto.
 * (Certifica-te que h2, p, li, .btn-primaria, e .reserva-mapa têm a classe "reveal" no HTML)
*/

/* * OTIMIZAÇÃO: Bloco "Scroll-driven animations" removido (12 linhas poupadas).
 * A "Base Global" (.reveal) trata disto.
*/

/* ===== Responsividade (Mantido - Perfeito) ===== */
@media (max-width: 980px) {
  .reserva-grid {
    grid-template-columns: 1fr;
  }
  .reserva-texto p {
    max-width: 100%;
  }
  .reserva-mapa {
    margin-top: 1rem;
  }
}

/* ============================================
   FOOTER - VERSÃO FINAL (MOBILE-FIRST)
   ============================================ */

.footer {
  background: var(--color-background);
  color: var(--color-text);
  /* Padding vertical generoso e padding lateral que respeita o container */
  padding: clamp(3rem, 6vw, 5rem) var(--container-padding);
}

/* --- GRELHA SUPERIOR --- */

.footer-grid {
  display: grid;
  /* * MOBILE-FIRST (Default):
   * Tudo numa só coluna, centrado.
  */
  grid-template-columns: 1fr;
  gap: 2.5rem; /* Espaço generoso entre secções empilhadas */
  align-items: start;
}

/* Estilos dos Títulos (h3) e Linhas (::after) */
.footer-contacto h3, 
.footer-horario h3, 
.footer-redes h3 {
  font-family: var(--font-titulo);
  color: var(--color-secondary);
  font-weight: 700;
  letter-spacing: .01em;
  margin: 0 0 .5rem;
}
.footer-contacto h3::after, 
.footer-horario h3::after, 
.footer-redes h3::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--color-secondary);
  margin-top: .35rem;
}

/* Listas (Telefone, Horário) */
.footer-contacto ul, 
.footer-horario ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem; /* Espaço entre linhas (ex: Tel 1 e Tel 2) */
}

/* Links */
.footer a {
  color: var(--color-text);
  text-decoration: none;
  transition: opacity var(--transicao-padrao);
}
.footer a:hover {
  opacity: .95;
}

/* Ícones Sociais */
.social-icons {
  display: flex;
  gap: .75rem; /* Mais espaço */
}
.social-icons a {
  width: 42px; /* Ligeiramente maior */
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  transition: var(--transicao-padrao);
}
.social-icons a:hover {
  transform: translateY(-2px);
  border-color: rgba(200, 169, 106, .45);
  background: #202020;
}

/* Bloco da Marca (Logo, Texto, Botão) */
.footer-brand img {
  width: min(200px, 60vw);
  height: auto;
  display: block;
  margin-bottom: 1rem;
}
.footer-logo p {
  color: var(--color-text-muted);
  opacity: .9;
  margin: 0 0 1rem;
  max-width: 42ch; /* Limita largura do texto */
}
.footer-logo .btn-primaria {
  inline-size: fit-content;
  margin-top: .4rem;
  padding: .65rem 1.1rem;
  font-weight: 800;
}

/* --- GRELHA INFERIOR (PRR, Legal, Aivy) --- */

.footer-bottom-extra {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px dashed var(--color-border);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  
  display: flex;
  flex-direction: column; /* MOBILE-FIRST: Empilhado */
  align-items: center; /* MOBILE-FIRST: Centrado */
  gap: 2rem;
}

/* 1. Apoio PRR */
.apoios-prr {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  justify-content: center; /* Centra em mobile */
}
.apoios-prr img {
  max-width: 300px; 
  width: 100%;
  height: auto; 
  filter: grayscale(.1);
  opacity: .8;
}
.apoio-frase {
  display: none; /* Escondido em mobile para simplicidade */
}

/* 2. Legal (Copyright & Links) */
.footer-legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  text-align: center;
}
.footer-legal p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-sm);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
}
.footer-links a {
  font-size: var(--font-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 255, 255, .18);
  padding-bottom: 2px;
  transition: var(--transicao-padrao);
}
.footer-links a:hover {
  color: var(--color-text);
  border-bottom-color: rgba(200, 169, 106, .5);
}

/* 3. By Aivy */
.footer-by-aivy {
  font-size: var(--font-sm);
  color: var(--color-text-muted);
  text-align: center;
}
.footer-by-aivy a {
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 255, 255, .3);
  transition: var(--transicao-padrao);
}
.footer-by-aivy a:hover {
  color: var(--color-secondary);
  border-bottom-color: var(--color-secondary);
}

/* ============================================
   BREAKPOINT DESKTOP (Onde a magia acontece)
   ============================================ */

@media (min-width: 980px) {
  
  /* --- GRELHA SUPERIOR (4 Colunas) --- */
  .footer-grid {
    grid-template-columns: 2fr 1.2fr 1fr 1fr;
    gap: clamp(16px, 2vw, 24px);
    /* Alinha tudo à esquerda em desktop */
    text-align: left; 
  }

  /* Alinha os elementos que estavam centrados */
  .footer-brand img,
  .footer-logo .btn-primaria {
    margin-left: 0;
    margin-right: 0;
  }
  .social-icons {
    justify-content: flex-start;
  }
  .footer-contacto h3::after, 
  .footer-horario h3::after, 
  .footer-redes h3::after {
    margin-left: 0;
    margin-right: 0;
  }

  /* --- GRELHA INFERIOR (Layout em Linha) --- */
  .footer-bottom-extra {
    flex-direction: row; /* Volta a ser horizontal */
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
  }

  /* 1. Apoio PRR */
  .apoios-prr {
    flex: 1;
    min-width: 250px;
    justify-content: flex-start; /* Alinha à esquerda */
  }
  .apoio-frase {
    display: block; /* Mostra a frase em desktop */
  }

  /* 2. Legal */
  .footer-legal {
    flex-basis: 300px;
    flex-grow: 1;
    align-items: center; /* Mantém centrado */
  }

  /* 3. By Aivy */
  .footer-by-aivy {
    flex: 1;
    text-align: right; /* Alinha à direita */
  }
}

/* Cookie dialog (Mantido) */
.cookie-banner {
  border: none;
  padding: 0;
  margin: auto;
  width: min(720px, 96vw);
  background: #151515;
  color: var(--color-text);
  border-radius: 14px;
}
.cookie-banner::backdrop {
  background: rgba(0, 0, 0, .55);
}
.cookie-banner p {
  margin: 0;
  padding: 14px 18px;
  color: var(--color-text-muted);
}
.cookie-actions {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  padding: 10px 18px;
  border-top: 1px solid var(--color-border);
  background: var(--color-background);
}
.cookie-actions .btn-sec {
  padding: .55rem .9rem;
}
.cookie-actions .btn-primaria {
  padding: .55rem 1rem;
}
.cookie-actions .btn-link {
  color: var(--color-text-muted);
  text-decoration: underline;
}

/* Cookie dialog (Mantido) */
.cookie-banner {
  border: none;
  padding: 0;
  margin: auto;
  width: min(720px, 96vw);
  background: #151515;
  color: var(--color-text);
  border-radius: 14px;
}
.cookie-banner::backdrop {
  background: rgba(0, 0, 0, .55);
}
.cookie-banner p {
  margin: 0;
  padding: 14px 18px;
  color: var(--color-text-muted);
}
.cookie-actions {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  padding: 10px 18px;
  border-top: 1px solid var(--color-border);
  background: var(--color-background);
}
.cookie-actions .btn-sec {
  padding: .55rem .9rem;
}
.cookie-actions .btn-primaria {
  padding: .55rem 1rem;
}
.cookie-actions .btn-link {
  color: var(--color-text-muted);
  text-decoration: underline;
}

/* ===== Estilos para o Formulário de Reserva (NOVO) ===== */

/* Substitui .reserva-texto por .reserva-form-wrapper */
.reserva-form-wrapper h2 {
  font-family: var(--font-titulo);
  font-size: var(--font-xl);
  color: var(--color-secondary);
  margin: 0 0 1rem;
  letter-spacing: .02em;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.reserva-form-wrapper .subtitulo {
  font-size: var(--font-lg);
  color: var(--color-text-muted);
  margin-bottom: 2rem;
  opacity: .9;
}

/* Grelha do formulário */
#whatsapp-form {
  display: grid;
  gap: 1rem; /* 16px */
  /* Grelha de 2 colunas */
  grid-template-columns: 1fr 1fr;
}

/* Wrapper de cada campo */
.form-grupo {
  display: grid;
  gap: .3rem; /* 5px */
}
/* Faz um campo ocupar a largura total */
.form-grupo-full {
  grid-column: 1 / -1;
}

/* Labels (etiquetas) */
#whatsapp-form label {
  font-family: var(--font-texto);
  font-size: var(--font-sm);
  color: var(--color-secondary);
  font-weight: 600;
  opacity: .9;
}

/* Inputs (Estilo premium) */
#whatsapp-form input[type="text"],
#whatsapp-form input[type="tel"],
#whatsapp-form input[type="date"],
#whatsapp-form input[type="time"],
#whatsapp-form input[type="number"] {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--color-border);
  border-radius: .5rem; /* 8px */
  padding: .75rem 1rem;
  color: var(--color-text);
  font-family: var(--font-texto);
  font-size: 1rem;
  width: 100%;
  transition: border-color var(--transicao-padrao), box-shadow var(--transicao-padrao);
}

/* Placeholder */
#whatsapp-form input::placeholder {
  color: var(--color-text-muted);
  opacity: .5;
}

/* Foco (consistente com o site) */
#whatsapp-form input:focus,
#whatsapp-form input:focus-visible {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 4px rgba(200, 169, 106, .2);
}

/* Botão de Submissão */
#whatsapp-form .btn-primaria {
  width: 100%; /* Ocupa a largura total */
  margin-top: .5rem;
  padding: .8rem 1.6rem; /* Um pouco maior */
  font-size: 1.05rem;
}

/* Ajustes para inputs de Data/Hora (para o dark mode) */
#whatsapp-form input[type="date"],
#whatsapp-form input[type="time"] {
  color-scheme: dark;
}
/* Remove a seta feia do input[number] */
#whatsapp-form input[type="number"] {
  -moz-appearance: textfield;
}
#whatsapp-form input[type="number"]::-webkit-inner-spin-button,
#whatsapp-form input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Responsividade do Formulário */
@media (max-width: 640px) {
  /* Em mobile, coloca todos os campos em 1 coluna */
  #whatsapp-form {
    grid-template-columns: 1fr;
  }
}

/* ============================================
 * ESTILOS: PÁGINA "SOBRE NÓS"
 * ============================================*/

.page-header {
  /* Define o espaçamento vertical (80px) */
  padding: 5rem 0; 
  text-align: center;
  
  /* REMOVIDO: Aquele 'border-bottom' que eu tinha 
    adicionado estava a criar a inconsistência. 
    Removido!
  */
}

.page-header .subtitulo {
  /* Este bloco está perfeito */
  font-family: var(--font-secundaria);
  color: var(--cor-branco);
  font-size: 1.125rem; /* 18px */
  font-weight: 300;
  line-height: 1.6;
  max-width: 600px; 
  margin: 0.75rem auto 0 auto; 
}

.page-header {

  /* Define o espaçamento vertical (80px) */

  padding: 5rem 0;

  text-align: center;

 

  /* Cria uma linha divisória subtil.

    Usamos o nosso --cor-dourado (#C8964B)

    com 20% de opacidade (o '33' no final).

  */

  border-bottom: 1px solid #C8964B33;

}



.page-header .subtitulo {

  /* A classe .subtitulo já deve existir,

    mas garantimos aqui a formatação correta.

  */

  font-family: var(--font-secundaria);

  color: var(--cor-branco);

  font-size: 1.125rem; /* 18px */

  font-weight: 300;

  line-height: 1.6;

 

  /* Limita a largura do texto para melhor leitura */

  max-width: 600px;

 

  /* Centra o bloco de texto e adiciona margem no topo */

  margin: 0.75rem auto 0 auto;

}



/* ============================================== */

/* ELEMENTO GLOBAL: Travessão Dourado (Linha)    */

/* ============================================== */



/* Classe para adicionar o travessão dourado abaixo de um título */

.titulo-com-linha {

  position: relative; /* Necessário para posicionar o pseudo-elemento */

  padding-bottom: 0.5rem; /* Espaço entre o texto e a linha */

  display: inline-block; /* Garante que a linha não ocupe a largura total */

}

.titulo-com-linha::after {

  content: ''; /* Conteúdo vazio para o pseudo-elemento */

  position: absolute;

  left: 0;

  bottom: 0; /* Posiciona a linha na parte inferior */

  width: 40px; /* Largura da linha */

  height: 3px; /* Espessura da linha */

  background-color: var(--cor-dourado); /* A nossa cor dourada */

}

/* =================================== */
/* PÁGINA SOBRE - Grelha de Conteúdo   */
/* (Usado em "História", "Essência", etc.) */
/* =================================== */

.sobre-grid-section {
  /* Espaçamento vertical generoso para "respirar" */
  padding: 5rem 0; 
  /* Linha divisória subtil no topo,
     para separar da secção anterior (.page-header).
  */
  border-top: 1px solid #C8964B33;
}

.sobre-grid {
  /* Cria o nosso layout de 2 colunas */
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50% para cada coluna */
  gap: 3rem; /* Espaço generoso entre as colunas */
  align-items: center; /* Alinha o texto e a imagem verticalmente */
}

/* Definimos um estilo global para parágrafos de texto 
  para máxima consistência.
*/
.paragrafo-padrao {
  font-family: var(--font-secundaria); /* Inter */
  color: #E0E0E0; /* Um cinza claro, não branco puro */
  font-size: 1.1rem; /* 17.6px (se for muito, mudamos para 1rem) */
  line-height: 1.7; /* Boa legibilidade */
  margin-bottom: 1.5rem; /* Espaço entre parágrafos */
}

/* Garante que o último parágrafo não tem margem extra */
.paragrafo-padrao:last-of-type {
  margin-bottom: 0;
}

.sobre-grid-imagem img {
  /* Garante que a imagem é responsiva */
  width: 100%;
  height: auto;
  /* Arredonda os cantos, seguindo o design de 
    outros elementos (ex: cards da index)
  */
  border-radius: 12px;
  object-fit: cover;
}


/* =================================== */
/* RESPONSIVO: Grelha "Sobre" (Mobile) */
/* =================================== */

@media (max-width: 768px) {
  .sobre-grid-section {
    /* Reduz o padding em mobile */
    padding: 3rem 0;
  }

  .sobre-grid {
    /* As colunas passam a ser uma única (stack) */
    grid-template-columns: 1fr; 
    gap: 2rem; /* Reduz o espaço entre texto e imagem */
  }

  .sobre-grid-texto {
    /* Em mobile, o texto vem depois (Default) */
    order: 2;
  }
  
  .sobre-grid-imagem {
    /* Em mobile, a imagem vem primeiro (Destaca a imagem) */
    order: 1;
  }
  
  .paragrafo-padrao {
    font-size: 1rem; /* 16px (mais adequado para mobile) */
  }
}

/* =================================== */
/* PÁGINA SOBRE - Galeria "Antes & Depois" */
/* =================================== */

.galeria-transicao-section {
  /* Espaçamento vertical */
  padding: 5rem 0;
  /* Linha divisória subtil (consistente com a secção anterior) */
  border-top: 1px solid #C8964B33;
  /* Alinha os títulos da secção ao centro */
  text-align: center;
}

/* Estilo para o subtítulo desta secção */
.galeria-transicao-section .subtitulo {
  font-family: var(--font-secundaria);
  color: #E0E0E0;
  font-size: 1.1rem;
  font-weight: 300;
  max-width: 500px;
  margin: 0.75rem auto 0 auto;
}

/* A grelha de 3 colunas */
.galeria-transicao-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colunas iguais */
  gap: 2rem; /* Espaço entre os cards */
  margin-top: 3rem; /* Espaço abaixo dos títulos */
}

.transicao-card {
  /* O cursor "pointer" indica que é interativo */
  cursor: pointer;
}

/* A "caixa" que contém as imagens */
.transicao-imagem {
  position: relative; /* Fundamental para o efeito hover */
  /* Força um rácio de 4:3 (altura é 75% da largura) */
  aspect-ratio: 4 / 3; 
  overflow: hidden; /* Esconde o que sair fora da caixa */
  border-radius: 12px; /* Cantos arredondados */
  background-color: #111; /* Fundo para o caso da imagem demorar a carregar */
}

/* Estilo de AMBAS as imagens (a normal e a .img-hover) */
.transicao-imagem picture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.4s ease-in-out; /* A magia do fade */
}

.transicao-imagem img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Garante que a imagem cobre a caixa sem distorcer */
}

/* ---- O EFEITO HOVER ---- */

/* A imagem .img-hover começa invisível */
.transicao-imagem picture.img-hover {
  opacity: 0;
}

/* Ao fazer hover no card, a .img-hover fica visível */
.transicao-card:hover .transicao-imagem picture.img-hover {
  opacity: 1;
}

/* ---- O TOOLTIP ---- */
.transicao-imagem .tooltip {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: var(--cor-branco);
  font-family: var(--font-secundaria);
  font-size: 0.875rem; /* 14px */
  padding: 0.5rem 1rem;
  border-radius: 20px;
  z-index: 10;
  white-space: nowrap; /* Impede que quebre a linha */
  transition: opacity 0.3s ease-in-out;
}

/* Ao fazer hover, o tooltip desaparece */
.transicao-card.has-tooltip:hover .tooltip {
  opacity: 0;
}

/* Legenda de texto abaixo da imagem */
.transicao-card p {
  font-family: var(--font-secundaria);
  color: var(--cor-branco);
  font-size: 1.1rem;
  font-weight: 500;
  text-align: center;
  margin-top: 1rem;
}


/* =================================== */
/* RESPONSIVO: Galeria "Antes & Depois" */
/* =================================== */

@media (max-width: 992px) {
  /* Em tablets, passa para 2 colunas */
  .galeria-transicao-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  /* Em mobile, passa para 1 coluna */
  .galeria-transicao-grid {
    grid-template-columns: 1fr;
    /* Limita a largura em mobile para não ficar gigante */
    max-width: 400px;
    margin: 3rem auto 0 auto;
  }
}

/* =================================== */
/* PÁGINA SOBRE - Secção "A Nossa Equipa" */
/* =================================== */

.equipa-section {
  /* Espaçamento vertical */
  padding: 5rem 0;
  /* Linha divisória subtil */
  border-top: 1px solid #C8964B33;
  /* Alinha os títulos da secção ao centro */
  text-align: center;
}

/* Estilo para o subtítulo desta secção */
.equipa-section .subtitulo {
  font-family: var(--font-secundaria);
  color: #E0E0E0;
  font-size: 1.1rem;
  font-weight: 300;
  max-width: 500px;
  margin: 0.75rem auto 0 auto;
}

/* A grelha de 3 colunas */
.equipa-grid {
  display: grid;
  /* 3 colunas de 1 fração cada */
  grid-template-columns: repeat(3, 1fr); 
  gap: 2rem; /* Espaço entre os cards */
  margin-top: 3rem; /* Espaço abaixo dos títulos */
  align-items: start; /* Alinha os cards ao topo */
}

/* O card de cada membro */
.membro {
  text-align: center;
}

/* Estilo para a imagem de perfil */
.membro picture {
  /* Força a imagem a ser um bloco */
  display: block; 
  /* Define o tamanho da imagem */
  width: 150px;
  height: 150px;
  margin: 0 auto 1.5rem auto; /* Centra e dá espaço abaixo */
  border-radius: 50%; /* A magia da imagem redonda */
  overflow: hidden; /* Garante que a imagem fica contida no círculo */
}

.membro img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cobre o círculo sem distorcer */
}

/* NOME do membro (Ex: Manuel Oliveira) */
.membro h3 {
  font-family: var(--font-principal); /* Playfair Display */
  color: var(--cor-dourado); /* A nossa cor dourada */
  font-size: 1.75rem; /* 28px */
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* CARGO do membro (Ex: Mestre Churrasqueiro) */
.membro .cargo {
  font-family: var(--font-secundaria);
  color: var(--cor-branco);
  font-size: 1rem;
  font-weight: 300;
  font-style: italic; /* Dá um toque de classe */
  margin-bottom: 1rem;
}

/* BIO do membro */
.membro .bio {
  font-family: var(--font-secundaria);
  color: #E0E0E0;
  font-size: 0.95rem; /* 15.2px */
  line-height: 1.6;
}

/* ---- O DESTAQUE ---- */

/* Estilo para o membro com a classe .destaque */
.membro.destaque {
  /* Dá mais "peso" ao card de destaque */
  background-color: #1A1A1A; /* Um fundo ligeiramente mais claro */
  padding: 2rem;
  border-radius: 12px;
  border: 1px solid #C8964B33; /* Borda dourada subtil */
}

/* Imagem maior para o membro em destaque */
.membro.destaque picture {
  width: 180px;
  height: 180px;
  border: 3px solid var(--cor-dourado); /* Contorno dourado na foto */
}

/* =================================== */
/* RESPONSIVO: Secção "Equipa"         */
/* =================================== */

@media (max-width: 992px) {
  /* Em tablets, passa para 1 coluna */
  .equipa-grid {
    grid-template-columns: 1fr;
    /* Limita a largura em tablet/mobile */
    max-width: 500px;
    margin: 3rem auto 0 auto;
  }

  .membro.destaque {
    padding: 1.5rem;
  }
}

/* =================================== */
/* PÁGINA SOBRE - Layout Inverso     */
/* =================================== */

/* Estilo para o subtítulo que criaste 
   dentro das grelhas de conteúdo */
.sobre-grid-texto .subtitulo {
  font-family: var(--font-secundaria);
  color: #E0E0E0;
  font-size: 1.2rem; /* 19.2px */
  font-weight: 300;
  font-style: italic; /* Fica excelente aqui */
  line-height: 1.6;
  /* Espaço antes do parágrafo principal */
  margin-bottom: 1.5rem; 
}


/* ---- Lógica do Layout Inverso (Desktop) ---- */

/* Por defeito, o .sobre-grid coloca o texto na coluna 1 
  e a imagem na coluna 2.
  Quando tem a classe .layout-inverso...
*/

.layout-inverso .sobre-grid-texto {
  grid-column: 2; /* O Texto vai para a coluna 2 */
  grid-row: 1;    /* Garante que fica na primeira linha */
}

.layout-inverso .sobre-grid-imagem {
  grid-column: 1; /* A Imagem vai para a coluna 1 */
}


/* ======================================== */
/* RESPONSIVO: Layout Inverso (Mobile)      */
/* ======================================== */

@media (max-width: 768px) {
  /* Lembra-te que em mobile, o nosso CSS anterior 
    (no Turno 17) disse:
    - .sobre-grid-texto { order: 2; }
    - .sobre-grid-imagem { order: 1; }
    (A imagem vem primeiro)

    Agora, no .layout-inverso, queremos o oposto 
    para criar a alternância.
  */
  
  .layout-inverso .sobre-grid-texto {
    order: 1; /* O Texto vem primeiro */
  }
  
  .layout-inverso .sobre-grid-imagem {
    order: 2; /* A Imagem vem depois */
  }
}

/* =================================== */
/* PÁGINA SOBRE - Slider "Bastidores"  */
/* =================================== */

.bastidores-section {
  /* Espaçamento vertical */
  padding: 5rem 0;
  /* Linha divisória subtil */
  border-top: 1px solid #C8964B33;
  /* Alinha os títulos da secção ao centro */
  text-align: center;
  /* O slider vai sair do .container, por isso 
     precisamos de overflow-x: hidden na secção 
     para evitar scroll horizontal na página
  */
  overflow-x: hidden;
}

/* Estilo para o subtítulo desta secção */
.bastidores-section .subtitulo {
  font-family: var(--font-secundaria);
  color: #E0E0E0;
  font-size: 1.1rem;
  font-weight: 300;
  max-width: 500px;
  margin: 0.75rem auto 0 auto;
}

/* O wrapper do slider */
.bastidores-slider-wrapper {
  margin-top: 3rem;
}

/* O segredo do Marquee:
   Força o Swiper a mover-se a uma velocidade 
   constante (linear), em vez de "ease".
*/
.bastidores-slider-wrapper .swiper-wrapper {
  transition-timing-function: linear !important; 
}

/* Estilo de cada imagem/slide */
.bastidores-slider-wrapper .swiper-slide {
  /* Define a largura automática baseada no 
     conteúdo (a imagem) */
  width: auto; 
}

.bastidores-slider-wrapper .swiper-slide img {
  /* Define uma altura fixa para todas as imagens */
  height: 300px; 
  width: auto; /* A largura ajusta-se para manter o rácio */
  border-radius: 12px; /* Cantos arredondados */
  object-fit: cover;
}

@media (max-width: 768px) {
  /* Em mobile, reduzimos a altura das imagens */
  .bastidores-slider-wrapper .swiper-slide img {
    height: 200px;
  }
}

/* =================================== */
/* PÁGINA SOBRE - Secção Vídeo         */
/* =================================== */

.video-section {
  /* Espaçamento vertical */
  padding: 5rem 0;
  /* Linha divisória subtil */
  border-top: 1px solid #C8964B33;
}

/* Grelha de 2 colunas (Texto | Vídeo) */
.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 colunas, 50/50 */
  gap: 3rem; /* Espaço entre texto e vídeo */
  align-items: center; /* Alinha verticalmente */
}

/* Alinha o texto da coluna à esquerda */
.video-texto {
  text-align: left;
}

/* O .titulo-com-linha já alinha à esquerda por defeito,
   por isso não precisamos de mexer. */

/* Subtítulo da secção de vídeo */
.video-texto .subtitulo {
  font-family: var(--font-secundaria);
  color: #E0E0E0;
  font-size: 1.2rem; /* 19.2px */
  font-weight: 300;
  line-height: 1.7;
  margin-top: 1.5rem; /* Espaço abaixo do título */
}

/* Wrapper do vídeo */
.video-wrapper video {
  /* Garante que o vídeo é responsivo */
  width: 100%;
  height: auto;
  /* Aplica os nossos cantos arredondados */
  border-radius: 12px;
  /* Fundo escuro caso o poster demore a carregar */
  background-color: #111;
}

/* ---- CTA Final ---- */
.cta-menu {
  text-align: center;
  /* Espaço acima, separando da grelha do vídeo */
  margin-top: 4rem; 
  /* Linha subtil para enquadrar o CTA */
  padding-top: 3rem;
  border-top: 1px solid #C8964B33;
}

.cta-texto {
  font-family: var(--font-principal); /* Playfair Display */
  font-size: 1.75rem; /* 28px */
  font-weight: 500;
  color: var(--cor-branco);
  max-width: 450px;
  margin: 0 auto 1.5rem auto; /* Centra e dá espaço abaixo */
}

/* O .btn-primaria já deve estar estilizado globalmente */


/* =================================== */
/* RESPONSIVO: Secção Vídeo (Mobile)   */
/* =================================== */

@media (max-width: 768px) {
  .video-grid {
    /* Passa para 1 coluna em mobile */
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .video-texto {
    /* Centra o texto em mobile */
    text-align: center;
  }

  /* O .titulo-com-linha já está centrado
     quando o seu 'pai' (.video-texto) 
     está com text-align: center.
  */

  .cta-texto {
    font-size: 1.5rem; /* 24px */
  }
}

/* =================================== */
/* PÁGINA MENU                    */
/*                                     */
/* =================================== */

.page-buffet {
  background: radial-gradient(circle at top, rgba(200, 169, 106, .12), transparent 55%),
              var(--color-background);
  color: var(--color-text);
}

.section {
  padding-block: clamp(3rem, 7vw, 5rem);
}

.section-header {
  text-align: center;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.section-header p {
  margin-inline: auto;
}

/* Container já existe no teu CSS, aqui só garantimos consistência */
.page-buffet .container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* ===========================
   BOTÕES PARA ESTA PÁGINA
=========================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.35rem;
  border-radius: var(--raio-pill);
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform var(--transicao-padrao),
              box-shadow var(--transicao-padrao),
              background var(--transicao-padrao),
              border-color var(--transicao-padrao),
              color var(--transicao-padrao);
}

.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary), #8a1a1a 58%);
  border-color: rgba(200, 169, 106, .38);
  box-shadow: var(--sombra-forte);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
}

.btn-outline,
.btn-ghost {
  color: var(--color-text);
  background: transparent;
  border-color: var(--color-border);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}

.btn-outline:hover,
.btn-ghost:hover {
  background: rgba(255, 255, 255, .05);
}

.btn-primary:active,
.btn-outline:active,
.btn-ghost:active {
  transform: translateY(0);
}

/* ===========================
   HERO IMERSIVO – BUFFET
=========================== */

.section-hero-buffet {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--color-text);
}

/* Layout principal do conteúdo dentro do hero */
.buffet-hero__content {
  position: relative;
  z-index: 1;
  min-height: min(80vh, 800px);
  display: flex;
  align-items: center;
  padding-block: clamp(4rem, 8vw, 6rem);
}

.buffet-hero__inner {
  max-width: 44rem;
}

/* MEDIA / BACKGROUND */

.buffet-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.buffet-hero__media picture,
.buffet-hero__media img {
  width: 100%;
  height: 100%;
  display: block;
}

.buffet-hero__media img {
  object-fit: cover;
}

/* Overlay com gradiente para leitura do texto */
.buffet-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      120deg,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(0, 0, 0, 0.55) 40%,
      rgba(0, 0, 0, 0.9) 100%
    );
}

/* BADGE */

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.9rem;
  border-radius: var(--raio-pill);
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(200, 169, 106, 0.6);
  color: var(--color-text-muted);
  font-size: var(--font-sm);
  margin-bottom: 1.25rem;
  backdrop-filter: blur(6px);
}

.hero-badge__pill {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.hero-badge__separator {
  font-size: 0.8rem;
  opacity: 0.65;
}

.hero-badge::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: radial-gradient(circle, #ffdd88, #c8a96a);
  box-shadow: 0 0 12px rgba(255, 221, 136, 0.9);
}

/* TÍTULO + SUBTÍTULO */

.buffet-hero__title {
  color: #fff;
  margin-bottom: 1rem;
  font-size: clamp(2.2rem, 3.1vw, 3rem);
  line-height: 1.1;
}

.buffet-hero__subtitle,
.hero-subtitle {
  max-width: 42rem;
  font-size: var(--font-md);
  color: var(--ink);
  margin-bottom: 1.75rem;
}

/* AÇÕES */

.hero-actions,
.buffet-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.buffet-hero__btn {
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.buffet-hero__btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.buffet-hero__btn--ghost:hover {
  transform: translateY(-1px);
}

/* META INFO */

.hero-meta,
.buffet-hero__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
  padding: 1rem 1.25rem;
  border-radius: var(--raio-borda);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
}

.hero-meta .meta-item,
.buffet-hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.meta-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.meta-value {
  color: #fff;
  font-size: 0.95rem;
}

/* RESPONSIVIDADE HERO */

@media (max-width: 767px) {
  .buffet-hero__content {
    min-height: auto;
  }

  .buffet-hero__inner {
    text-align: left;
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (min-width: 768px) {
  .hero-meta,
  .buffet-hero__meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .buffet-hero__content {
    padding-block: clamp(5rem, 7vw, 7rem);
  }
}

/* ===========================
   BARRA DE DESTAQUES
=========================== */

.section-highlight-bar {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.02), transparent);
}

/* Layout da secção */

.buffet-highlights__container {
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
}

.buffet-highlights__header {
  text-align: left;
  margin-bottom: 2rem;
}

.buffet-highlights__eyebrow {
  font-size: var(--font-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

.buffet-highlights__title {
  margin-bottom: 0.5rem;
}

.buffet-highlights__grid,
.highlight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

/* Cards */

.highlight-item,
.buffet-highlights__item {
  background: var(--color-surface);
  border-radius: var(--raio-borda);
  padding: 1.5rem 1.25rem;
  box-shadow: var(--sombra-leve);
  border: 1px solid rgba(255, 255, 255, 0.04);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: flex-start;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.highlight-item:hover,
.buffet-highlights__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.25);
  border-color: rgba(200, 169, 106, 0.7);
}

.highlight-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  background: rgba(200, 169, 106, 0.12);
}

.highlight-item i {
  font-size: 1.6rem;
  color: var(--color-secondary);
}

.highlight-item__title,
.highlight-item h3,
.highlight-item h2 {
  margin-bottom: 0.4rem;
  font-size: 1.05rem;
}

.highlight-item__text,
.highlight-item p {
  margin-bottom: 0;
  color: var(--color-text-muted);
}

/* RESPONSIVIDADE – BARRA DE DESTAQUES */

@media (min-width: 768px) {
  .buffet-highlights__grid,
  .highlight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .buffet-highlights__grid,
  .highlight-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .buffet-highlights__header {
    max-width: 40rem;
  }
}

/* ===========================
   EXPERIÊNCIA BUFFET
=========================== */

.section-experience {
  position: relative;
}

.buffet-experience__layout,
.experience-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: flex-start;
}

/* Texto / header */

.buffet-experience__header {
  margin-bottom: 1.5rem;
}

.buffet-experience__title,
.experience-text h2 {
  margin-bottom: 1rem;
}

.buffet-experience__intro,
.experience-text > p {
  margin-bottom: 1.5rem;
  max-width: 40rem;
}

/* Lista de passos */

.buffet-experience__steps,
.experience-steps {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  list-style: none;
  padding: 0;
  margin-inline: 0;
}

.buffet-experience__step,
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: flex-start;
}

.step-number {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: rgba(200, 169, 106, 0.16);
  border: 1px solid rgba(200, 169, 106, 0.7);
  color: var(--color-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}

.step-content h3,
.step-title {
  margin-bottom: 0.25rem;
  font-size: 1rem;
}

.step-content p,
.step-text {
  margin: 0;
  color: var(--color-text-muted);
}

/* Nota importante */

.buffet-experience__note,
.experience-note {
  margin-top: 0.5rem;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  background: rgba(0, 0, 0, 0.6);
  border: 1px dashed rgba(200, 169, 106, 0.6);
  font-size: var(--font-sm);
}

/* Media da experiência */

.buffet-experience__media,
.experience-media {
  display: grid;
  gap: 1rem;
}

.media-main {
  border-radius: var(--raio-borda);
  overflow: hidden;
  box-shadow: var(--sombra-leve);
}

.media-main img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.media-grid__item img,
.media-grid img {
  border-radius: 0.6rem;
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

/* Pequena interação nas imagens */

.media-main img,
.media-grid img {
  transition: transform 0.22s ease, filter 0.22s ease;
}

.media-main:hover img {
  transform: scale(1.02);
}

.media-grid__item:hover img,
.media-grid img:hover {
  transform: scale(1.03);
}

/* Responsividade */

@media (min-width: 768px) {
  .buffet-experience__layout,
  .experience-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
  }
}

@media (max-width: 599px) {
  .buffet-experience__layout,
  .experience-layout {
    gap: 2rem;
  }

  .buffet-experience__steps,
  .experience-steps {
    gap: 1rem;
  }
}

/* ===========================
   HORÁRIOS & PREÇOS
=========================== */

.section-schedule-pricing {
  background: radial-gradient(circle at top, rgba(200, 169, 106, 0.1), transparent 60%);
}

/* Layout geral */

.buffet-pricing__container {
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
}

.buffet-pricing__header {
  text-align: left;
  margin-bottom: 2rem;
}

.buffet-pricing__eyebrow {
  font-size: var(--font-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.buffet-pricing__title {
  margin-bottom: 0.5rem;
}

.buffet-pricing__description {
  max-width: 40rem;
  color: var(--color-text-muted);
}

/* Grid de cards */

.pricing-grid,
.buffet-pricing__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
}

/* Cards base */

.pricing-card,
.buffet-pricing__card {
  background: var(--color-surface);
  border-radius: var(--raio-borda);
  padding: 1.75rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: var(--sombra-leve);
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.pricing-card:hover,
.buffet-pricing__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  border-color: rgba(200, 169, 106, 0.7);
}

/* Card “outline” (o que não está incluído) */

.pricing-card-outline,
.buffet-pricing__card--outline {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}

/* Card em destaque (jantar) */

.pricing-card--highlight {
  background: radial-gradient(circle at top, rgba(200, 169, 106, 0.16), rgba(0, 0, 0, 0.85));
  border-color: rgba(200, 169, 106, 0.9);
}

.pricing-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: var(--font-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-secondary);
  margin-bottom: 0.6rem;
}

/* Cabeçalho do card */

.pricing-card__header {
  margin-bottom: 1.1rem;
}

.pricing-card h3,
.pricing-card__title {
  margin-bottom: 0.35rem;
}

.pricing-card__tagline {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0.25rem 0 0;
}

/* Horário */

.pricing-time,
.pricing-card__time {
  font-size: var(--font-sm);
  color: var(--muted);
  margin-bottom: 1.15rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.pricing-time__separator {
  opacity: 0.7;
}

/* Valores (Adulto / Criança) */

.pricing-values {
  margin: 0 0 0.75rem;
}

.pricing-value {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.35rem;
}

.pricing-label {
  font-size: 0.9rem;
  color: var(--ink);
}

.pricing-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-secondary);
}

/* Listas de incluído / não incluído */

.pricing-includes,
.pricing-excludes {
  margin: 1rem 0 0.75rem;
  padding-left: 1.1rem;
}

.pricing-includes li,
.pricing-excludes li {
  position: relative;
  margin-bottom: 0.4rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.pricing-includes li::before,
.pricing-excludes li::before {
  content: "•";
  position: absolute;
  left: -1rem;
  color: var(--color-secondary);
}

/* Nota */

.pricing-footnote {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0;
}

/* CTA final / aviso */

.buffet-pricing__cta {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
}

.buffet-pricing__note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  max-width: 34rem;
}

.buffet-pricing__btn {
  /* assume .btn base já definida */
}

/* Responsividade */

@media (min-width: 768px) {
  .pricing-grid,
  .buffet-pricing__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .pricing-grid,
  .buffet-pricing__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .buffet-pricing__header {
    max-width: 40rem;
  }

  .buffet-pricing__cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ===========================
   PRATOS / CARDS VISUAIS
=========================== */

.section-dish-showcase {
  position: relative;
}

/* Grid de pratos */

.dish-card-grid,
.buffet-dishes__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

/* Card base */

.dish-card,
.buffet-dishes__card {
  background: var(--color-surface);
  border-radius: var(--raio-borda);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: var(--sombra-leve);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.dish-card:hover,
.buffet-dishes__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  border-color: rgba(200, 169, 106, 0.8);
}

/* Imagem do prato */

.dish-card__figure {
  position: relative;
  overflow: hidden;
}

.dish-card img {
  width: 100%;
  height: clamp(180px, 26vw, 220px);
  object-fit: cover;
  display: block;
  transition: transform 0.22s ease, filter 0.22s ease;
}

.dish-card:hover img {
  transform: scale(1.05);
}

/* Conteúdo do card */

.dish-card-body,
.dish-card__body {
  padding: 1.1rem 1.25rem 1.25rem;
}

.dish-card-body h3,
.dish-card__title {
  margin-bottom: 0.4rem;
  font-size: 1.05rem;
}

.dish-card__text {
  margin: 0;
  color: var(--color-text-muted);
}

/* Footer da secção */

.section-footer-link,
.buffet-dishes__footer {
  margin-top: 2rem;
  text-align: center;
}

.buffet-dishes__btn {
  /* assume .btn base já definida */
}

/* Responsividade */

@media (min-width: 640px) {
  .dish-card-grid,
  .buffet-dishes__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .dish-card-grid,
  .buffet-dishes__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ===========================
   PORQUÊ ESTE BUFFET?
=========================== */

.section-why-buffet {
  background: linear-gradient(135deg, #181818, #101010);
}

/* Layout */

.why-layout,
.buffet-why__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
}

/* Texto */

.buffet-why__header {
  margin-bottom: 1.3rem;
}

.buffet-why__eyebrow {
  font-size: var(--font-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

.why-text h2,
.buffet-why__title {
  margin-bottom: 0.8rem;
}

.why-text > p,
.buffet-why__description {
  margin-bottom: 1.25rem;
  max-width: 40rem;
  color: var(--color-text-muted);
}

/* Lista de razões */

.why-list,
.buffet-why__list {
  display: grid;
  gap: 0.55rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.why-list li,
.buffet-why__item {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

.buffet-why__icon {
  font-size: 0.9rem;
  margin-top: 0.15rem;
  color: var(--color-secondary);
}

.buffet-why__text {
  flex: 1;
}

/* Media / imagem */

.why-media,
.buffet-why__media {
  max-width: 480px;
  justify-self: center;
}

.why-media img,
.buffet-why__figure img {
  width: 100%;
  border-radius: var(--raio-borda);
  box-shadow: var(--sombra-forte);
  display: block;
  object-fit: cover;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.why-media img:hover,
.buffet-why__figure img:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.45);
}

/* Responsividade – Porquê este buffet */

@media (min-width: 768px) {
  .why-layout,
  .buffet-why__layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }

  .buffet-why__media {
    justify-self: end;
  }
}

/* ===========================
   TESTEMUNHOS
=========================== */

.section-testimonials {
  background: radial-gradient(circle at bottom, rgba(200, 169, 106, 0.12), transparent 60%);
}

/* Header + resumo rating */

.buffet-testimonials__header {
  text-align: left;
  margin-bottom: 2rem;
}

.buffet-testimonials__eyebrow {
  font-size: var(--font-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.buffet-testimonials__description {
  max-width: 40rem;
  color: var(--color-text-muted);
}

.buffet-testimonials__rating-summary {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.rating-summary__score {
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
}

.rating-summary__value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-secondary);
}

.rating-summary__max {
  font-size: 0.9rem;
  color: var(--muted);
}

.rating-summary__stars {
  font-size: 1.1rem;
  letter-spacing: 0.1em;
}

.rating-summary__meta {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* Grid de testemunhos */

.testimonials-grid,
.buffet-testimonials__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

/* Card */

.testimonial-card,
.buffet-testimonials__card {
  background: var(--color-surface);
  border-radius: var(--raio-borda);
  padding: 1.5rem 1.35rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: var(--sombra-leve);
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.testimonial-card::before,
.buffet-testimonials__card::before {
  content: "“";
  position: absolute;
  top: 0.4rem;
  right: 0.9rem;
  font-size: 3rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.testimonial-card:hover,
.buffet-testimonials__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  border-color: rgba(200, 169, 106, 0.7);
}

/* Texto + autor */

.testimonial-text {
  font-style: italic;
  margin-bottom: 0.75rem;
}

.testimonial-author,
.testimonial-author__name {
  font-size: 0.9rem;
  color: var(--muted);
}

/* Footer CTA */

.buffet-testimonials__footer {
  margin-top: 2rem;
  text-align: center;
}

.buffet-testimonials__btn {
  /* assume .btn base já definida */
}

/* Responsividade – Testemunhos */

@media (min-width: 768px) {
  .testimonials-grid,
  .buffet-testimonials__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .buffet-testimonials__rating-summary {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
}

/* ===========================
   FAQ
=========================== */

.section-faq {
  background: #101010;
}

/* Layout */

.faq-layout,
.buffet-faq__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

/* Intro */

.faq-intro,
.buffet-faq__intro {
  max-width: 34rem;
}

.faq-intro h2,
.buffet-faq__title {
  margin-bottom: 0.5rem;
}

.buffet-faq__eyebrow {
  font-size: var(--font-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.buffet-faq__description {
  color: var(--color-text-muted);
}

/* Lista de FAQs */

.faq-list,
.buffet-faq__list {
  display: grid;
  gap: 1.1rem;
}

.faq-item,
.buffet-faq__item {
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 1rem 1.1rem;
  background: rgba(255, 255, 255, 0.02);
}

.faq-item h3,
.faq-item__question {
  margin-bottom: 0.25rem;
  font-size: 1rem;
}

.faq-item__answer {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/* ===========================
   CTA FINAL + MAPA
=========================== */

.section-cta-final {
  background: radial-gradient(circle at top, rgba(200, 169, 106, 0.18), #0b0b0b 70%);
}

/* Layout */

.cta-final-layout,
.buffet-cta__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
}

/* Texto */

.cta-final-text h2,
.buffet-cta__title {
  margin-bottom: 0.8rem;
}

.cta-final-text > p,
.buffet-cta__description {
  margin-bottom: 1.2rem;
  max-width: 34rem;
}

.buffet-cta__eyebrow {
  font-size: var(--font-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

/* Ações */

.cta-final-actions,
.buffet-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.buffet-cta__btn {
  /* assume .btn base já definida */
}

.cta-final-note,
.buffet-cta__note {
  font-size: 0.9rem;
  color: var(--muted);
  max-width: 34rem;
}

/* Mapa – versão final responsiva */

.cta-final-map,
.buffet-cta__map {
  width: 100%;
  max-width: 900px;          /* ajusta se quiseres mais largo/estreito */
  justify-self: center;
}

.cta-final-map .map-placeholder,
.buffet-cta__map-placeholder {
  border-radius: var(--raio-borda);
  border: 1px solid rgba(255, 255, 255, 0.18);
  overflow: hidden;
  padding: 0;                /* tiramos o padding que encolhia o iframe */
  background: #000;          /* base neutra atrás do iframe */
}

.map-placeholder__label {
  padding: 0.75rem 1.25rem;
  text-align: center;
  color: var(--ink);
  font-weight: 500;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.85),
    rgba(0, 0, 0, 0.6)
  );
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* iframe ocupa sempre toda a largura do container */

.map-placeholder iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;      /* controla a altura; podes mudar para 4/3, etc. */
  border: 0;
}

/* ===========================
   MEDIA QUERIES (AJUSTES FINAIS)
=========================== */

/* Tablet small / médio */
@media (min-width: 640px) {
  /* FAQ em duas colunas quando houver espaço */
  .faq-layout,
  .buffet-faq__layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
  }
}

/* Desktop médio */
@media (min-width: 900px) {
  .cta-final-layout,
  .buffet-cta__layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

/* Desktop grande */
@media (min-width: 1100px) {
  .buffet-cta__layout {
    column-gap: 3rem;
  }
}

/* =================================== */
/* PÁGINA GALERIA                      */
/*                                     */
/* =================================== */

/* =========================================
   GALERIA MASTER LEVEL - VERSÃO FINAL
   ========================================= */

/* --- Contentor Principal --- */
.galeria-section {
  background-color: var(--cor-preta);
  padding: var(--espacamento-grande) 0;
  overflow: hidden;
}

/* --- Tipografia --- */
.galeria-heading {
  font-family: var(--font-titulo);
  font-size: var(--font-xl);
  color: var(--cor-dourado);
  text-align: center;
  margin-bottom: 0.5rem;
}

.galeria-subtitle {
  font-family: var(--font-texto);
  font-size: var(--font-md);
  color: var(--cor-branca);
  text-align: center;
  opacity: 0.85;
  margin-bottom: var(--espacamento-grande);
  padding: 0 var(--espacamento-base);
}

/* --- Slider Wrapper --- */
.galeria-slider-custom {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
  z-index: 1; 
}

/* --- Pista de Scroll (Track) --- */
.galeria-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  
  /* Scroll Snap Moderno */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  
  /* Padding lateral para o item não colar na borda */
  padding: 2rem max(1rem, 5vw); 
  
  -webkit-overflow-scrolling: touch;
  
  /* Esconder Scrollbar */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.galeria-track::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* --- Imagens do Slider --- */
.galeria-track img {
  /* 1. Impede o Flexbox de esmagar a imagem */
  flex: 0 0 auto;
  
  /* 2. Força tamanhos mínimos e fixos */
  min-width: 300px;
  height: 400px;
  
  /* 3. Responsividade: cresce se houver espaço */
  width: clamp(300px, 30vw, 450px);
  
  /* 4. Estética e Performance */
  object-fit: cover;
  border-radius: var(--raio-borda);
  box-shadow: var(--sombra-leve);
  
  scroll-snap-align: center;
  
  cursor: zoom-in;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
  will-change: transform;
}

/* Ajuste para Mobile */
@media (max-width: 768px) {
  .galeria-track img {
    height: 300px; 
    min-width: 280px;
  }
}

/* Efeito Hover (Desktop) */
@media (hover: hover) {
  .galeria-track img:hover {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
    z-index: 2;
  }
}

/* --- Setas de Navegação --- */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border: none;
  z-index: 10;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.3s ease;
  
  background-color: var(--cor-dourado);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 50%;
  mask-size: 50%;
}

.arrow:hover {
  background-color: var(--cor-branca);
  transform: translateY(-50%) scale(1.1);
}

.arrow:active {
  transform: translateY(-50%) scale(0.95);
}

.arrow.prev {
  left: 1rem;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 24 24' stroke='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M15 19L8 12L15 5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 24 24' stroke='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M15 19L8 12L15 5'/%3E%3C/svg%3E");
}

.arrow.next {
  right: 1rem;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 24 24' stroke='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 24 24' stroke='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}

@media (max-width: 768px) {
  .arrow { display: none; }
}

/* --- LIGHTBOX CORRIGIDA --- */
.lightbox-overlay {
  position: fixed;
  inset: 0; /* Ocupa todo o ecrã */
  z-index: 9999;
  
  background: rgba(0, 0, 0, 0.95); /* Fundo bem escuro */
  backdrop-filter: blur(5px);
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Garante que não há scroll extra */
  overflow: hidden;
  
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox-overlay.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-overlay img {
  /* AQUI ESTÁ A CORREÇÃO: Usa viewport units (vw/vh) */
  max-width: 90vw;
  max-height: 90vh;
  
  /* Garante que a imagem nunca é cortada */
  object-fit: contain;
  
  width: auto;
  height: auto;
  
  box-shadow: 0 0 30px rgba(0,0,0,0.8);
  border-radius: 4px;
  
  /* Animação de entrada */
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

.lightbox-overlay.active img {
  transform: scale(1);
}

/* Botões Lightbox */
.lightbox-close,
.lightbox-nav {
  background: transparent;
  border: none;
  color: var(--cor-branca);
  cursor: pointer;
  transition: color 0.3s ease, transform 0.2s ease;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  z-index: 10000; /* Garante que ficam sempre por cima */
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 2.5rem;
  padding: 10px;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  padding: 20px;
}

.lightbox-nav:hover,
.lightbox-close:hover {
  color: var(--cor-dourado);
  transform: scale(1.1);
}

.lightbox-nav.prev { left: 1%; }
.lightbox-nav.next { right: 1%; }

@media (max-width: 768px) {
  .lightbox-nav { font-size: 2rem; padding: 10px; }
  .lightbox-close { font-size: 2rem; top: 15px; right: 15px; }
}

#lightboxImage {
  /* Garante que a opacidade pode ser animada pelo JS */
  transition: opacity 0.2s ease;
}

/* ============================================
   PÁGINA RECRUTAMENTO - IDENTIDADE VISUAL CORRETA
   ============================================ */

/* NOTA: Este ficheiro assume que as variáveis :root 
   (cores, fontes, etc.) já estão carregadas no CSS global.
*/

/* --- 1. CORREÇÃO ESTRUTURAL (SEM GAPS) --- */
/* Garante que nesta página as secções se tocam perfeitamente */
section {
  width: 100%;
  margin: 0;
  /* Espaçamento interno generoso usando clamp para responsividade */
  padding: clamp(4rem, 8vw, 6rem) 0;
  overflow: hidden;
}

/* Reset específico para evitar linhas brancas em imagens */
section img, 
section video {
  display: block;
  width: 100%;
}

/* --- 2. HERO SECTION --- */
.hero-recrutamento {
  position: relative;
  height: 90vh; /* Imersivo */
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0; /* Hero não tem padding padrão */
  background-color: var(--cor-preta); /* Fallback */
}

.hero-background {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6; /* Ajuste para o texto brilhar */
}

.hero-overlay {
  position: absolute;
  inset: 0;
  /* Gradiente suave usando a tua cor preta */
  background: linear-gradient(
    to bottom, 
    rgba(18, 18, 18, 0.3) 0%, 
    rgba(18, 18, 18, 0.95) 100%
  );
  z-index: 1;
}

.hero-conteudo {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
  padding: 0 var(--container-padding);
}

.hero-tag {
  display: inline-block;
  font-family: var(--font-texto);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cor-dourado);
  margin-bottom: 1rem;
  opacity: 0;
  animation: fadeInUp var(--reveal-dur) var(--reveal-ease) forwards;
}

.hero-titulo {
  font-family: var(--font-titulo);
  font-size: var(--font-xl); /* Usa a tua variável clamp */
  color: var(--cor-branca);
  line-height: 1.1;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeInUp var(--reveal-dur) var(--reveal-ease) 0.2s forwards;
}

.text-dourado {
  color: var(--cor-dourado);
  font-style: italic;
}

.hero-subtitulo {
  font-family: var(--font-texto);
  font-size: var(--font-md);
  color: var(--ink); /* Usando a tua cor de texto secundária */
  margin-bottom: 3rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  animation: fadeInUp var(--reveal-dur) var(--reveal-ease) 0.4s forwards;
}

/* --- Botões (Usando a tua identidade) --- */
.hero-botoes {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeInUp var(--reveal-dur) var(--reveal-ease) 0.6s forwards;
}

.btn-primario, .btn-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.5rem;
  border-radius: var(--raio-pill); /* Identidade Pill */
  font-family: var(--font-texto);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: var(--transicao-padrao);
  cursor: pointer;
}

.btn-primario {
  background-color: var(--cor-dourado);
  color: var(--cor-preta);
  border: 2px solid var(--cor-dourado);
}

.btn-primario:hover {
  background-color: transparent;
  color: var(--cor-dourado);
  transform: translateY(-3px);
}

.btn-secundario {
  background-color: transparent;
  color: var(--cor-branca);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.btn-secundario:hover {
  border-color: var(--cor-branca);
  background-color: rgba(255, 255, 255, 0.05);
  transform: translateY(-3px);
}

/* --- 3. SECÇÕES GERAIS (Alternância de Fundo) --- */

/* Helpers de Texto */
.section-header {
  max-width: 800px;
  margin: 0 auto 4rem;
  text-align: center;
}

.section-tag {
  color: var(--cor-dourado);
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  display: block;
  margin-bottom: 1rem;
}

.section-title {
  font-family: var(--font-titulo);
  font-size: var(--font-lg);
  color: var(--cor-dourado);
  margin-bottom: 1rem;
}

.section-subtitle {
  color: var(--ink);
  font-size: var(--font-md);
  line-height: 1.6;
}

/* SECÇÃO: CULTURA (Fundo Cinza Escuro) */
.culture-section {
  background-color: var(--cor-cinza-escuro);
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  list-style: none;
  padding: 0;
}

.benefit-card {
  /* Surface color ligeiramente mais clara que o fundo */
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: var(--raio-borda);
  padding: 3rem 2rem;
  text-align: center;
  transition: var(--transicao-padrao);
}

.benefit-card:hover {
  transform: translateY(-5px);
  border-color: var(--cor-dourado);
  box-shadow: var(--sombra-leve);
}

.icon-wrapper {
  font-size: 2.5rem;
  color: var(--cor-dourado);
  margin-bottom: 1.5rem;
}

.benefit-content h3 {
  font-family: var(--font-titulo);
  font-size: 1.5rem;
  color: var(--cor-branca);
  margin-bottom: 1rem;
}

.benefit-content p {
  color: var(--muted);
  font-size: var(--font-sm);
  line-height: 1.7;
}

/* SECÇÃO: TESTEMUNHOS (Fundo Preto) */
.testimonials-section {
  background-color: var(--cor-preta);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  list-style: none;
  padding: 0;
}

.testimonial-card {
  background-color: var(--cor-cinza-escuro);
  border-radius: var(--raio-borda);
  padding: 3rem 2rem;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: var(--transicao-padrao);
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra-leve);
}

.quote-icon {
  font-size: 2rem;
  color: var(--cor-vinho); /* Accent com a cor vinho */
  opacity: 0.5;
  margin-bottom: 1.5rem;
}

.testimonial-text p {
  font-family: var(--font-titulo); /* Playfair para citações fica elegante */
  font-style: italic;
  font-size: 1.1rem;
  color: var(--cor-branca);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid var(--color-border);
  padding-top: 1.5rem;
}

.avatar-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--cor-dourado);
  color: var(--cor-preta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--font-texto);
}

.author-name {
  font-weight: 700;
  color: var(--cor-branca);
  display: block;
  font-style: normal;
}

.author-role {
  font-size: 0.85rem;
  color: var(--muted);
  font-style: normal;
}

/* SECÇÃO: VAGAS (Fundo Cinza Escuro) */
.jobs-section {
  background-color: var(--cor-cinza-escuro);
}

.jobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  list-style: none;
  padding: 0;
}

.job-card {
  background-color: var(--cor-preta);
  border: 1px solid var(--color-border);
  border-radius: var(--raio-borda);
  padding: 2.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: var(--transicao-padrao);
}

.job-card:hover {
  border-color: var(--cor-dourado);
  transform: translateY(-5px);
}

.job-icon {
  font-size: 2.5rem;
  color: var(--cor-dourado);
  margin-bottom: 1.5rem;
}

.job-title {
  font-family: var(--font-titulo);
  font-size: 1.5rem;
  color: var(--cor-branca);
  margin-bottom: 1rem;
}

.job-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.tag {
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.4rem 1rem;
  border-radius: var(--raio-pill);
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--ink);
}

.job-desc {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 2rem;
  flex-grow: 1;
}

.btn-vaga {
  color: var(--cor-dourado);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: var(--transicao-padrao);
}

.btn-vaga:hover {
  color: var(--cor-branca);
  gap: 1rem; /* Efeito de seta a mexer */
}

/* SECÇÃO: PERFIL (Fundo Preto) */
.profile-section {
  background-color: var(--cor-preta);
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  list-style: none;
  padding: 0;
}

.profile-item {
  text-align: center;
  padding: 2rem;
  background-color: var(--cor-cinza-escuro);
  border-radius: var(--raio-borda);
  transition: var(--transicao-padrao);
}

.profile-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  transform: translateY(-5px);
}

.profile-icon-wrapper {
  font-size: 2rem;
  color: var(--cor-vinho); /* Destaque cor vinho */
  margin-bottom: 1rem;
}

.profile-title {
  font-family: var(--font-titulo);
  font-size: 1.25rem;
  color: var(--cor-branca);
  margin-bottom: 0.5rem;
}

.profile-text {
  color: var(--muted);
  font-size: 0.9rem;
}

/* SECÇÃO: FORMULÁRIO (Fundo Cinza Escuro) */
.application-section {
  background-color: var(--cor-cinza-escuro);
}

.form-wrapper {
  max-width: 750px;
  margin: 0 auto;
  background-color: var(--cor-preta);
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: var(--raio-borda);
  box-shadow: var(--sombra-forte);
  border: 1px solid var(--color-border);
}

.application-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cor-branca);
  margin-bottom: 0.5rem;
}
.required { color: var(--cor-vinho); }

.input-wrapper { position: relative; }

.input-icon {
  position: absolute;
  left: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 1rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  background-color: var(--cor-cinza-escuro);
  border: 1px solid var(--color-border);
  border-radius: var(--raio-borda);
  padding: 1rem 1rem 1rem 3.5rem; /* Espaço para o ícone */
  color: var(--cor-branca);
  font-family: var(--font-texto);
  font-size: 1rem;
  transition: var(--transicao-padrao);
}

textarea {
  padding: 1rem; /* Textarea não precisa de ícone lateral */
  resize: vertical;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--cor-dourado);
  background-color: #222;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

/* Botão de Upload Customizado */
.file-upload-box {
  border: 2px dashed var(--color-border);
  border-radius: var(--raio-borda);
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: var(--transicao-padrao);
  background-color: rgba(255,255,255,0.02);
}

.file-upload-box:hover {
  border-color: var(--cor-dourado);
  background-color: rgba(255,255,255,0.05);
}

.file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.file-custom-label i {
  font-size: 2rem;
  color: var(--cor-dourado);
  margin-bottom: 0.5rem;
  display: block;
}

/* Checkbox */
.form-checkbox {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-top: 1rem;
}

.form-checkbox input {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.2rem;
  accent-color: var(--cor-dourado);
}

.form-checkbox label {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
}
.form-checkbox a { color: var(--cor-dourado); }

/* Botão Enviar */
.btn-submit {
  width: 100%;
  padding: 1.2rem;
  border-radius: var(--raio-pill);
  background-color: var(--cor-vinho);
  color: var(--cor-branca);
  border: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transicao-padrao);
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}

.btn-submit:hover {
  background-color: var(--cor-dourado);
  color: var(--cor-preta);
  transform: translateY(-2px);
}

/* --- ANIMAÇÕES --- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- RESPONSIVO --- */
@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
  }
  .form-wrapper {
    padding: 2rem 1.5rem;
  }
  /* Ajuste de padding mobile para não ficar gigante */
  section {
    padding: 4rem 0;
  }
}

/* ============================================
   PÁGINA CONTACTOS - CSS CORRIGIDO (ALTA ESPECIFICIDADE)
   ============================================ */

/* --- 1. ESTRUTURA E ESPAÇAMENTO --- */
/* Esta regra garante o "ar" (padding) e remove as "linhas brancas" (margin) */
.hero-contacto,
.info-section,
.form-section,
.map-section {
  width: 100%;
  margin: 0;
  padding: clamp(4rem, 8vw, 6rem) 0; /* Espaçamento vertical fluido */
  overflow: hidden; /* Contém margens internas */
}

/* --- 2. HERO SECTION --- */
/* Exceção: Hero é ecrã total, sem padding vertical */
.hero-contacto {
  position: relative;
  height: 90vh; /* Imersivo */
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0; 
  background-color: var(--cor-preta);
}

.hero-background {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6; /* Deixa o vídeo mais escuro */
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom, 
    rgba(18, 18, 18, 0.3) 0%, 
    rgba(18, 18, 18, 0.95) 100%
  );
  z-index: 1;
}

.hero-conteudo {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
  padding: 0 var(--container-padding);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp var(--reveal-dur, 0.8s) var(--reveal-ease, ease-out) 0.3s forwards;
}

.hero-tag {
  display: inline-block;
  font-family: var(--font-texto);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cor-dourado);
  margin-bottom: 1rem;
}

.hero-titulo {
  font-family: var(--font-titulo);
  font-size: var(--font-xl);
  color: var(--cor-branca);
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.hero-subtitulo {
  font-family: var(--font-texto);
  font-size: var(--font-md);
  color: var(--ink);
  margin-bottom: 3rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Botões (usam --raio-pill) */
.hero-botoes {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-primario, .btn-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.5rem;
  border-radius: var(--raio-pill);
  font-family: var(--font-texto);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: var(--transicao-padrao);
  cursor: pointer;
}

.btn-primario {
  background-color: var(--cor-dourado);
  color: var(--cor-preta);
  border: 2px solid var(--cor-dourado);
}
.btn-primario:hover {
  background-color: transparent;
  color: var(--cor-dourado);
  transform: translateY(-3px);
}

.btn-secundario {
  background-color: transparent;
  color: var(--cor-branca);
  border: 2px solid var(--color-border, rgba(255,255,255,0.1));
}
.btn-secundario:hover {
  border-color: var(--cor-branca);
  background-color: rgba(255, 255, 255, 0.05);
  transform: translateY(-3px);
}

.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.4);
  font-size: 1.5rem;
  animation: bounce 2s infinite;
  z-index: 2;
  transition: color 0.3s;
}
.scroll-indicator:hover { color: var(--cor-dourado); }

/* --- 3. HELPERS DE SECÇÃO (Usam especificidade) --- */
.info-section .section-header,
.form-section .section-header,
.map-section .section-header {
  max-width: 800px;
  margin: 0 auto 4rem;
  text-align: center;
}

.info-section .section-tag,
.form-section .section-tag,
.map-section .section-tag {
  color: var(--cor-dourado);
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  display: block;
  margin-bottom: 1rem;
}

.info-section .section-title,
.form-section .section-title,
.map-section .section-title {
  font-family: var(--font-titulo);
  font-size: var(--font-lg);
  color: var(--cor-dourado);
  margin-bottom: 1rem;
}

.info-section .section-subtitle,
.form-section .section-subtitle,
.map-section .section-subtitle {
  color: var(--ink);
  font-size: var(--font-md);
  line-height: 1.6;
}

/* --- 4. INFO SECTION (A secção que falhava) --- */
.info-section {
  background-color: var(--cor-cinza-escuro);
  color: var(--cor-branca);
}

/* Usando especificidade e Flexbox - COM !IMPORTANT */
.info-section .info-grid {
  display: flex !important; /* FORÇA O FLEX */
  flex-wrap: wrap !important; 
  justify-content: center !important;
  gap: 2rem !important;
  color: var(--cor-branca) !important;
  visibility: visible !important; /* FORÇA A VISIBILIDADE */
  opacity: 1 !important;
  min-height: 100px; /* FORÇA A ALTURA MÍNIMA */
}

/* Usando especificidade */
.info-section .info-card {
  flex-basis: 320px !important; /* FORÇA A LARGURA BASE */
  flex-grow: 1 !important;
  min-width: 300px !important;
  min-height: 200px !important; /* FORÇA A ALTURA */
  display: block !important; /* FORÇA A SER UM BLOCO */
  visibility: visible !important;
  opacity: 1 !important;
  
  background-color: var(--cor-preta) !important;
  border: 1px solid var(--color-border, rgba(255,255,255,0.1)) !important;
  border-radius: var(--raio-borda) !important;
  padding: 3rem 2rem !important;
  text-align: center !important;
  transition: var(--transicao-padrao) !important;
  color: var(--cor-branca) !important;
}

.info-section .info-card:hover {
  transform: translateY(-5px);
  border-color: var(--cor-dourado);
  box-shadow: var(--sombra-leve);
}

.info-section .info-card .icon-wrapper {
  font-size: 2.5rem !important;
  color: var(--cor-dourado) !important;
  margin-bottom: 1.5rem !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.info-section .info-title {
  font-family: var(--font-titulo) !important;
  font-size: var(--font-lg) !important;
  color: var(--cor-branca) !important;
  margin-bottom: 0.5rem !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.info-section .info-desc {
  color: var(--muted) !important;
  font-size: var(--font-sm) !important;
  margin-bottom: 1.5rem !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.info-section .info-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.info-section .contact-link {
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  color: var(--cor-branca) !important;
  text-decoration: none !important;
  transition: var(--transicao-padrao) !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.info-section .contact-link:hover { color: var(--cor-dourado) !important; }

.info-section .network-info {
  font-size: 0.8rem !important;
  color: var(--muted) !important;
  margin-left: 0.5rem !important;
}

.info-section .info-address, 
.info-section .info-schedule {
  color: var(--muted) !important;
  font-style: normal !important;
  line-height: 1.6 !important;
  margin-bottom: 1.5rem !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.info-section .info-schedule {
  margin-top: 1.5rem !important;
  padding-top: 1.5rem !important;
  border-top: 1px solid var(--color-border, rgba(255,255,255,0.1)) !important;
}
.info-section .info-schedule strong {
  color: var(--cor-branca) !important;
  font-weight: 600 !important;
}

.info-section .btn-text {
  color: var(--cor-dourado) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  transition: var(--transicao-padrao) !important;
  margin-top: 1rem !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.info-section .btn-text:hover {
  color: var(--cor-branca);
  gap: 1rem;
}

/* --- 5. FORMULÁRIO DE CONTACTO --- */
.form-section {
  background-color: var(--cor-preta);
  color: var(--cor-branca);
}

.form-wrapper {
  max-width: 750px;
  margin: 0 auto;
  background-color: var(--color-surface, #1a1a1a);
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: var(--raio-borda);
  border: 1px solid var(--color-border, rgba(255,255,255,0.1));
  box-shadow: var(--sombra-forte);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cor-branca);
  margin-bottom: 0.5rem;
}
.required { color: var(--cor-vinho); }

.input-wrapper { position: relative; }
.input-icon {
  position: absolute;
  left: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 1rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  background-color: var(--cor-preta);
  border: 1px solid var(--color-border, rgba(255,255,255,0.1));
  border-radius: var(--raio-borda);
  padding: 1rem 1rem 1rem 3.5rem;
  color: var(--cor-branca);
  font-family: var(--font-texto);
  font-size: 1rem;
  transition: var(--transicao-padrao);
}

textarea {
  padding: 1rem;
  resize: vertical;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--cor-dourado);
  background-color: var(--cor-cinza-escuro);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

/* Seta do Select */
.select-arrow {
  position: absolute;
  top: 50%;
  right: 1.2rem;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

/* Checkbox RGPD */
.form-checkbox {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-top: 1rem;
}
.form-checkbox input {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.2rem;
  accent-color: var(--cor-dourado);
}
.form-checkbox label {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
}
.form-checkbox a { color: var(--cor-dourado); }

/* Botão Enviar (Vinho) */
.btn-submit {
  width: 100%;
  padding: 1.2rem;
  border-radius: var(--raio-pill);
  background-color: var(--cor-vinho);
  color: var(--cor-branca);
  border: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transicao-padrao);
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}
.btn-submit:hover {
  background-color: var(--cor-dourado);
  color: var(--cor-preta);
  transform: translateY(-2px);
}

/* --- 6. SECÇÃO MAPA --- */
.map-section {
  background-color: var(--cor-cinza-escuro);
}

.map-wrapper {
  border-radius: var(--raio-borda);
  overflow: hidden; /* Força o border-radius no iframe */
  border: 1px solid var(--color-border, rgba(255,255,255,0.1));
  box-shadow: var(--sombra-forte);
}

.google-map-iframe {
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
  /* Filtro removido */
  filter: none;
}

/* --- 7. ANIMAÇÕES GLOBAIS --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-10px); }
  60% { transform: translateX(-50%) translateY(-5px); }
}

/* --- 8. RESPONSIVO --- */
@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
  }
  .form-wrapper {
    padding: 2rem 1.5rem;
  }
  /* Ajuste de padding mobile */
  section {
    padding: 4rem 0;
  }
  .hero-botoes {
    flex-direction: column;
    width: 100%;
  }
}

/* =========================================
   ESTILOS ESPECÍFICOS DA BIOLINK
   ========================================= */

/* --- 1. Configuração da Página --- */

/* Garante o fundo com gradiente vinho e padding */
body.biolink-page {
  background-image: radial-gradient(circle at 50% 0%, #2a0e0e 0%, var(--cor-preta) 70%);
  padding-bottom: 40px; /* Espaço no fundo */
  /* OTIMIZAÇÃO: Garante que âncoras internas não ficam escondidas */
  scroll-padding-top: 20px;
}

/* Textura de Fundo */
.bg-noise {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");
}

/* Container principal da Biolink */
.biolink-wrap {
  max-width: 560px; /* Otimizado para mobile */
  margin: 0 auto;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 28px; /* Espaço entre secções */
}

/* --- 2. Hero Section --- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding-bottom: 10px;
}

/* A imagem do avatar/logo em si (CORRIGIDO FINAL) */
.avatar-img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  
  /* CORREÇÃO: 'contain' para mostrar o logo todo */
  object-fit: contain; 
  
  /* CORREÇÃO: Fundo transparente para melhor integração */
  background-color: transparent; 
  
  /* CORREÇÃO: Removemos a borda para um look mais limpo */
  border: none; 
  
  display: block;
  
  /* CORREÇÃO: Pequeno padding para o logo não tocar nas bordas */
  padding: 8px; 
}

.brand-title {
  font-size: clamp(2rem, 6vw, 2.5rem);
  margin-bottom: 0;
  color: var(--color-secondary); /* Dourado */
}
.subtitle {
  color: var(--color-text-muted);
  font-size: var(--font-md);
  max-width: 40ch;
  margin-bottom: 0;
}

/* Status Aberto/Fechado */
.hero-status {
  font-weight: 600;
  font-size: var(--font-sm);
  padding: 4px 12px;
  border-radius: var(--raio-pill);
  transition: color 0.3s, background-color 0.3s;
  margin-bottom: 0;
}
.hero-status.open { color: #fff; background-color: #22c55e; }
.hero-status.closed { color: #fff; background-color: #ef4444; }
.hero-note {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  max-width: 45ch;
  margin-top: 8px;
  margin-bottom: 0;
}

/* --- 3. Botão CTA Principal --- */

.hero-actions.full-width {
  width: 100%;
}
.btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: var(--raio-borda);
  font-family: var(--font-texto);
  font-weight: 700;
  font-size: var(--font-md);
  text-align: center;
  transition: var(--transicao-padrao);
  width: 100%;
}
.btn-hero:active {
  transform: scale(0.98);
}
.btn-hero svg {
  width: 20px; height: 20px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
}
.btn-hero.primary {
  background-color: var(--color-primary); /* Vinho */
  color: var(--cor-branca);
  box-shadow: 0 4px 20px rgba(102, 0, 0, 0.4);
}
.btn-hero.primary:hover {
  background-color: #4d0000; /* Vinho mais escuro */
  transform: translateY(-2px);
}
.cta-helper {
  font-size: var(--font-sm);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 12px;
  margin-bottom: 0;
}

/* --- 4. Cabeçalhos de Secção --- */

.section-header {
  margin-bottom: 16px;
  text-align: left;
}
.section-header h2 {
  font-size: var(--font-lg);
  color: var(--color-text); /* Branco */
  border-left: 3px solid var(--color-primary); /* Vinho */
  padding-left: 12px;
  margin-bottom: 4px;
}
.section-tagline {
  font-size: var(--font-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* --- 5. Cartões (Buffet & Review) --- */

.biolink-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--raio-borda);
  padding: 20px;
  transition: var(--transicao-padrao);
  position: relative;
  overflow: hidden;
  text-align: left;
}
.biolink-card:hover {
  border-color: var(--color-secondary); /* Dourado */
}

/* ***** ATUALIZAÇÃO: BANNER DE NOVIDADE VISUAL ***** */
.banner-card {
  display: block;
  position: relative;
  border-radius: var(--raio-borda);
  overflow: hidden;
  transition: var(--transicao-padrao);
  box-shadow: var(--sombra-leve);
  background: var(--cor-cinza-escuro); /* Fallback */
}
.banner-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-forte);
}
.banner-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
  filter: brightness(0.7);
  transition: filter 0.3s;
}
.banner-card:hover .banner-img {
  filter: brightness(0.6);
}
.banner-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
}
.banner-overlay .card-badge {
  position: static;
  display: inline-block;
  margin-bottom: 8px;
}
.banner-overlay .banner-title {
  font-family: var(--font-texto);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--cor-branca);
  margin: 0;
}
.banner-overlay .banner-desc {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-secondary); /* Dourado */
  margin: 0;
}

/* Card de Destaque (Buffet) - REMOVIDO */
/* .highlight-card { ... } */

.card-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.card-title {
  font-size: 1.1rem;
  color: var(--cor-branca);
  font-family: var(--font-texto);
  font-weight: 700;
  margin: 0;
}
.card-desc {
  font-size: var(--font-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
  /* CORREÇÃO 3: Equilibra o texto */
  text-wrap: balance;
}

/* Card de Review */
.review-card {
  display: flex;
  align-items: center;
  gap: 16px;
  border-color: rgba(200, 169, 106, 0.3);
}
.review-card .card-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(200, 169, 106, 0.1);
  color: var(--color-secondary);
  font-size: 1.25rem;
  flex-shrink: 0;
}
.review-card .card-title {
  color: var(--color-secondary);
}
.reviews-helper {
  font-size: var(--font-sm);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 12px;
  margin-bottom: 0;
}

/* --- 6. Lista de Links --- */

.list-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.list-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: var(--raio-borda);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: var(--transicao-padrao);
  text-align: left;
  width: 100%;
}
.list-item:hover {
  border-color: var(--color-secondary);
  transform: translateY(-2px);
  box-shadow: var(--sombra-leve);
}
.list-item:active {
  transform: scale(0.99);
}

.list-item .icon {
  font-size: 1.2rem;
  width: 24px;
  text-align: center;
  color: var(--color-secondary);
  flex-shrink: 0;
}
.list-item .text {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* CORREÇÃO 2: Evita sobreposição */
  min-width: 0; 
}
.list-item .name {
  font-weight: 600;
  font-size: var(--font-md);
  color: var(--cor-branca);
}
.list-item .meta {
  font-size: var(--font-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-item .arrow {
  color: var(--color-text-muted);
  transition: transform 0.2s;
  /* CORREÇÃO 2: Força a seta para o fim */
  margin-left: auto;
  padding-left: 16px;
}
.list-item:hover .arrow {
  transform: translateX(4px);
}

/* --- 7. Horário Dropdown --- */

.hours-compact summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--raio-borda);
  cursor: pointer;
  font-weight: 600;
}
.hours-compact summary::-webkit-details-marker {
  display: none;
}
.hours-compact[open] summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-color: var(--color-secondary);
}
.summary-title {
  color: var(--cor-branca);
}
.summary-status {
  font-size: var(--font-sm);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--raio-pill);
}
.summary-status.open { color: #22c55e; background: rgba(34, 197, 94, 0.15); }
.summary-status.closed { color: #ef4444; background: rgba(239, 68, 68, 0.15); }

.hours-content {
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-secondary);
  border-top: none;
  border-radius: 0 0 var(--raio-borda) var(--raio-borda);
}
.hours-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px dashed var(--color-border);
  font-size: var(--font-sm);
  color: var(--color-text-muted);
}
.hours-row:last-of-type {
  border-bottom: none;
}
.hours-row.highlight span {
  color: var(--color-primary);
  font-weight: 600;
}
.hours-note {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 12px 0 0;
}

/* --- 8. Social & Footer --- */

.social-nav {
  display: flex;
  gap: 16px;
  justify-content: center;
}
.social-link {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  transition: var(--transicao-padrao);
}
.social-link:hover {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
  transform: translateY(-3px);
  box-shadow: var(--sombra-leve);
}
.social-link svg {
  width: 22px; height: 22px;
  stroke: currentColor;
  fill: none;
}

.footer {
  text-align: center;
  padding: 20px 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-sm);
}
.footer p {
  margin-bottom: 0;
  max-width: none;
}

/* --- 9. Toast (Notificação) --- */

.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--cor-branca);
  color: var(--cor-preta);
  padding: 12px 24px;
  border-radius: var(--raio-pill);
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--sombra-forte);
  font-weight: 600;
  font-size: var(--font-sm);
  opacity: 0;
  visibility: hidden;
  transition: var(--transicao-padrao);
  z-index: 1000;
}
.toast.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* --- 10. Animações de Entrada --- */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-entry {
  opacity: 0;
  animation: fadeUp var(--reveal-dur) var(--reveal-ease) forwards;
}
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; }
.delay-7 { animation-delay: 0.7s; }

/* =========================================
   11. ADIÇÃO: CARROSSEL DE DESTAQUES
   ========================================= */

.horizontal-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 -16px;
  padding: 0 16px;
}
.horizontal-scroll-wrapper::-webkit-scrollbar {
  display: none;
}

.specials-scroll-grid {
  display: flex;
  flex-flow: row nowrap;
  gap: 14px;
  padding: 4px 2px 16px 2px;
}

.special-card {
  width: 160px;
  flex-shrink: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--raio-borda);
  overflow: hidden;
  transition: var(--transicao-padrao);
  box-shadow: var(--sombra-leve);
}
.special-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-secondary);
}

.special-img-box {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  /* CORREÇÃO 4: Fallback profissional p/ imgs partidas */
  display: grid;
  place-items: center;
  background-color: var(--cor-cinza-escuro);
}
.special-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* CORREÇÃO 4: Esconde o ícone/texto de img partida */
  color: transparent;
  font-size: 0;
}

.special-info {
  padding: 12px;
  text-align: center;
}
.special-info h3 {
  font-family: var(--font-texto);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--cor-branca);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Card "Ver Mais" */
.more-card {
  width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-text-muted);
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.03);
}
.more-card .more-icon {
  font-size: 1.5rem;
  color: var(--color-secondary);
  line-height: 1;
}
.more-card:hover {
  color: var(--color-secondary);
  background: var(--color-surface);
}


/* =========================================
   12. ADIÇÃO: BOTÃO VOLTAR AO TOPO
   ========================================= */

/* Botão Voltar ao Topo – versão única e funcional */
.back-to-top {
  position: fixed;
  right: clamp(12px, 2vw, 16px);
  bottom: clamp(12px, 2vw, 16px);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--color-secondary);
  color: var(--cor-preta);
  border: none;
  box-shadow: var(--sombra-forte);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  transition:
    opacity var(--transicao-padrao),
    visibility var(--transicao-padrao),
    transform var(--transicao-padrao),
    background var(--transicao-padrao),
    box-shadow var(--transicao-padrao);
  z-index: 999;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  background: #e0c28c;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}