/* =============================================
       VARIÁVEIS GLOBAIS
    ============================================= */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 :root {
     --vinho: #9B2C2C;
     --vinho-escuro: #7A1F1F;
     --vinho-claro: #FBE9E9;
     --tinta: #1A2A3A;
     --tinta-suave: #2C3E4E;
     --areia: #F5F0E6;
     --areia-escura: #E8DFD2;
     --branco: #FFFFFF;
     --ouro: #C9A87C;
     --ouro-escuro: #B48C54;
     --pedra: #6F7C8B;
     --borda: #EDE6DC;
     --verde-wa: #25A36D;
     --verde-wa-esc: #1a7a52;
     --sombra-fraca: 0 4px 14px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.05);
     --sombra-media: 0 12px 28px rgba(0, 0, 0, 0.06);
     --raio-cartao: 24px;
 }

 body {
     font-family: 'Inter', sans-serif;
     background: var(--areia);
     color: var(--tinta);
     line-height: 1.5;
     overflow-x: hidden;
 }

 ::selection {
     background: var(--vinho);
     color: white;
 }

 h1,
 h2,
 h3,
 .serifada {
     font-family: 'Cormorant Garamond', serif;
     font-weight: 600;
     letter-spacing: -0.01em;
 }

 .etiqueta-secao {
     font-size: 0.7rem;
     text-transform: uppercase;
     letter-spacing: 0.2em;
     font-weight: 500;
     color: var(--vinho);
     background: rgba(155, 44, 44, 0.08);
     display: inline-block;
     padding: 0.35rem 1rem;
     border-radius: 40px;
     margin-bottom: 1rem;
 }

 /* =============================================
       NAVEGAÇÃO
    ============================================= */
 .barra-navegacao {
     position: sticky;
     top: 0;
     z-index: 300;
     background: rgba(255, 252, 248, 0.98);
     backdrop-filter: blur(16px);
     border-bottom: 1px solid var(--borda);
     padding: 0.7rem 4%;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 0.8rem;
 }

 .area-logo {
     display: flex;
     align-items: center;
     gap: 10px;
     cursor: pointer;
     flex-shrink: 0;
 }

 .imagem-logo {
     width: 42px;
     height: 42px;
     background: linear-gradient(135deg, var(--vinho-claro), var(--areia-escura));
     border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid rgba(155, 44, 44, 0.2);
     transition: all 0.2s;
     overflow: hidden;
 }

 .imagem-logo img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     padding: 4px;
     border-radius: 10px;
 }

 .texto-marca {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.25rem;
     font-weight: 700;
     background: linear-gradient(135deg, var(--vinho), var(--ouro));
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }

 .botao-menu {
     display: none;
     background: none;
     border: none;
     font-size: 1.6rem;
     cursor: pointer;
     color: var(--vinho);
 }

 .lista-links-nav {
     display: flex;
     gap: 1.5rem;
     list-style: none;
     flex-wrap: wrap;
 }

 .lista-links-nav a {
     text-decoration: none;
     font-size: 0.85rem;
     font-weight: 500;
     color: var(--tinta-suave);
     transition: 0.2s;
     position: relative;
 }

 .lista-links-nav a::after {
     content: '';
     position: absolute;
     bottom: -4px;
     left: 0;
     width: 0;
     height: 2px;
     background: var(--vinho);
     transition: width 0.25s ease;
 }

 .lista-links-nav a:hover::after,
 .lista-links-nav a.pagina-ativa::after {
     width: 100%;
 }

 .lista-links-nav a.pagina-ativa {
     color: var(--vinho);
 }

 .botao-encomendar-nav {
     background: var(--vinho);
     color: white;
     padding: 0.5rem 1.2rem;
     border-radius: 40px;
     font-size: 0.8rem;
     font-weight: 500;
     text-decoration: none;
     white-space: nowrap;
     transition: background 0.2s;
 }

 .botao-encomendar-nav:hover {
     background: var(--vinho-escuro);
 }

 @media (max-width: 780px) {
     .botao-menu {
         display: block;
     }

     .lista-links-nav {
         display: none;
         width: 100%;
         flex-direction: column;
         align-items: center;
         gap: 1rem;
         padding: 1rem 0;
         border-top: 1px solid var(--borda);
     }

     .lista-links-nav.aberto {
         display: flex;
     }

     .botao-encomendar-nav {
         display: none;
     }
 }

 @media (min-width: 781px) {
     .botao-encomendar-nav {
         display: inline-block;
     }

     .botao-menu {
         display: none;
     }
 }

 /* =============================================
       BOTÕES
    ============================================= */
 .botao {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 0.75rem 1.5rem;
     border-radius: 50px;
     font-weight: 500;
     font-size: 0.85rem;
     transition: all 0.25s ease;
     cursor: pointer;
     border: none;
     text-decoration: none;
     font-family: 'Inter', sans-serif;
 }

 .botao-principal {
     background: var(--vinho);
     color: white;
     box-shadow: 0 4px 12px rgba(155, 44, 44, 0.2);
 }

 .botao-principal:hover {
     background: var(--vinho-escuro);
     transform: translateY(-2px);
 }

 .botao-contorno {
     border: 1.5px solid var(--vinho);
     color: var(--vinho);
     background: transparent;
 }

 .botao-contorno:hover {
     background: var(--vinho-claro);
 }

 /* ✅ BOTÃO WHATSAPP SUPER ELEGANTE */
 .botao-whatsapp-elegante {
     background: linear-gradient(135deg, #25A36D 0%, #0f5c3e 100%);
     color: white;
     font-size: 1rem;
     font-weight: 600;
     padding: 1rem 1.5rem;
     border-radius: 60px;
     border: none;
     cursor: pointer;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 12px;
     box-shadow: 0 8px 24px rgba(37, 163, 109, 0.35);
     transition: all 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1);
     font-family: 'Inter', sans-serif;
     letter-spacing: 0.02em;
     position: relative;
     overflow: hidden;
 }

 .botao-whatsapp-elegante::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transition: left 0.5s ease;
 }

 .botao-whatsapp-elegante:hover::before {
     left: 100%;
 }

 .botao-whatsapp-elegante:hover {
     transform: translateY(-3px);
     box-shadow: 0 14px 32px rgba(37, 163, 109, 0.5);
     background: linear-gradient(135deg, #1f9260 0%, #0a4a30 100%);
 }

 .botao-whatsapp-elegante:active {
     transform: translateY(1px);
 }

 .botao-whatsapp-elegante .icone-wa {
     width: 26px;
     height: 26px;
     fill: white;
     flex-shrink: 0;
 }

 .botao-whatsapp-elegante .badge-wa {
     background: rgba(255, 255, 255, 0.25);
     padding: 0.2rem 0.8rem;
     border-radius: 40px;
     font-size: 0.7rem;
     font-weight: 500;
     letter-spacing: 0.05em;
 }

 /* =============================================
       PÁGINAS
    ============================================= */
 .pagina {
     display: none;
     animation: entrarPagina 0.4s ease forwards;
 }

 .pagina.pagina-ativa {
     display: block;
 }

 @keyframes entrarPagina {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* =============================================
       HERO
    ============================================= */
 .secao-hero {
     padding: 3rem 5%;
     background: linear-gradient(105deg, #FFFBF5 0%, #FCF5EA 100%);
     display: flex;
     align-items: center;
     gap: 2rem;
     flex-wrap: wrap;
 }

 .coluna-esquerda-hero {
     flex: 1;
     min-width: 250px;
 }

 .coluna-esquerda-hero h1 {
     font-size: clamp(2rem, 7vw, 4rem);
     line-height: 1.2;
 }

 .linha-estatisticas {
     display: flex;
     gap: 1rem;
     margin-top: 1.8rem;
     flex-wrap: wrap;
 }

 .cartao-estatistica {
     background: white;
     padding: 0.6rem 1rem;
     border-radius: 32px;
     box-shadow: var(--sombra-fraca);
     border: 1px solid var(--borda);
     flex: 1;
     min-width: 90px;
     text-align: center;
 }

 .numero-estatistica {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.6rem;
     font-weight: 700;
     color: var(--vinho);
 }

 .coluna-direita-hero {
     flex: 1;
     text-align: center;
 }

 .moldura-imagem-hero {
     background: var(--vinho-claro);
     border-radius: 40px;
     padding: 1rem;
     display: inline-block;
 }

 .caixa-imagem-hero {
     width: 280px;
     height: 320px;
     background: white;
     border-radius: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid var(--borda);
     overflow: hidden;
 }

 .caixa-imagem-hero img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center top;
 }

 @media (max-width: 600px) {
     .caixa-imagem-hero {
         width: 220px;
         height: 260px;
     }
 }

 /* =============================================
       CARTÃO DE PRODUTO
    ============================================= */
 .cartao-produto-unico {
     background: var(--branco);
     border-radius: var(--raio-cartao);
     overflow: hidden;
     border: 1px solid var(--borda);
     box-shadow: var(--sombra-fraca);
     max-width: 480px;
     margin: 1.5rem auto 0;
     transition: all 0.35s ease;
 }

 .cartao-produto-unico:hover {
     box-shadow: var(--sombra-media);
     transform: translateY(-3px);
 }

 .area-imagem-produto {
     width: 100%;
     height: 360px;
     background: linear-gradient(135deg, var(--vinho-claro) 0%, #FFF5EE 100%);
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     overflow: hidden;
 }

 .foto-produto {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);
     border-radius: 0;
     filter: brightness(1.02) contrast(1.02);
 }

 .cartao-produto-unico:hover .foto-produto {
     transform: scale(1.05);
     filter: brightness(1.05) contrast(1.03);
 }

 .etiqueta-destaque {
     position: absolute;
     top: 16px;
     left: 16px;
     background: var(--ouro);
     color: white;
     font-size: 0.7rem;
     font-weight: 700;
     padding: 0.3rem 1rem;
     border-radius: 40px;
     z-index: 2;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
     backdrop-filter: blur(2px);
 }

 .conteudo-cartao {
     padding: 1.5rem;
 }

 .preco-produto {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.6rem;
     font-weight: 700;
     color: var(--vinho);
     margin: 0.5rem 0 0.2rem;
 }

 .preco-produto span {
     font-size: 0.85rem;
     font-weight: 500;
     color: var(--pedra);
     font-family: 'Inter', sans-serif;
 }

 .estrelas-avaliacao {
     display: flex;
     gap: 4px;
     margin-top: 8px;
     color: var(--ouro);
     font-size: 0.9rem;
 }

 /* =============================================
       PERSONALIZADOR
    ============================================= */
 .secao-personalizador {
     padding: 2.5rem 5%;
     background: white;
 }

 .titulo-personalizador {
     text-align: center;
     margin-bottom: 1.5rem;
 }

 .titulo-personalizador h2 {
     font-size: 1.8rem;
     margin-bottom: 0.4rem;
 }

 .titulo-personalizador p {
     color: var(--pedra);
     font-size: 0.9rem;
 }

 .grelha-sabores {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
     gap: 1rem;
     margin-bottom: 1.5rem;
 }

 .opcao-sabor {
     background: var(--areia);
     border: 2px solid var(--borda);
     border-radius: 24px;
     padding: 1rem 0.5rem;
     text-align: center;
     cursor: pointer;
     transition: all 0.2s ease;
     position: relative;
 }

 .opcao-sabor.disponivel:hover {
     border-color: var(--vinho);
     background: var(--vinho-claro);
     transform: translateY(-2px);
 }

 .opcao-sabor.selecionada {
     border-color: var(--vinho);
     background: var(--vinho-claro);
     box-shadow: 0 0 0 3px rgba(155, 44, 44, 0.2);
 }

 .opcao-sabor.indisponivel {
     opacity: 0.6;
     filter: grayscale(0.2);
     cursor: not-allowed;
     background: #E8E0D6;
     border-color: #D1C7BB;
 }

 .badge-epoca {
     font-size: 0.6rem;
     background: var(--ouro-escuro);
     color: white;
     padding: 0.2rem 0.5rem;
     border-radius: 30px;
     display: inline-block;
     margin-top: 6px;
     font-weight: 500;
 }

 .badge-indisponivel {
     background: #9e8b74;
     font-size: 0.6rem;
     padding: 0.2rem 0.5rem;
     border-radius: 30px;
     color: white;
     margin-top: 6px;
     display: inline-block;
 }

 .emoji-sabor {
     font-size: 2rem;
     display: block;
     margin-bottom: 0.3rem;
 }

 .nome-sabor {
     font-size: 0.8rem;
     font-weight: 600;
     color: var(--tinta);
     display: block;
 }

 .resumo-selecao {
     background: var(--areia);
     border: 1.5px dashed var(--borda);
     border-radius: 18px;
     padding: 0.9rem 1.2rem;
     font-size: 0.85rem;
     color: var(--pedra);
     margin-bottom: 1.2rem;
 }

 .resumo-selecao strong {
     color: var(--vinho);
 }

 .aviso-safra {
     background: #FFF1E0;
     border-left: 4px solid var(--ouro);
     padding: 0.7rem 1rem;
     border-radius: 16px;
     font-size: 0.75rem;
     color: #7A5C2E;
     margin-bottom: 1rem;
     text-align: center;
 }

 /* =============================================
       FORMULÁRIOS
    ============================================= */
 .formulario-elegante {
     background: var(--branco);
     border-radius: 28px;
     padding: 1.5rem;
     box-shadow: var(--sombra-media);
     border: 1px solid var(--borda);
 }

 .linha-campo {
     margin-bottom: 1rem;
 }

 .linha-campo label {
     font-size: 0.7rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: var(--pedra);
     display: block;
     margin-bottom: 0.4rem;
 }

 .linha-campo input,
 .linha-campo select,
 .linha-campo textarea {
     width: 100%;
     padding: 12px 14px;
     border-radius: 20px;
     border: 1.5px solid var(--borda);
     background: var(--areia);
     font-family: 'Inter', sans-serif;
     font-size: 0.9rem;
     transition: 0.2s;
 }

 .linha-campo input:focus,
 .linha-campo select:focus,
 .linha-campo textarea:focus {
     outline: none;
     border-color: var(--vinho);
     background: white;
 }

 .area-estrelas {
     display: flex;
     gap: 10px;
     margin: 8px 0;
 }

 .botao-estrela {
     background: none;
     border: none;
     font-size: 1.8rem;
     cursor: pointer;
     color: #DDD2C4;
     transition: 0.1s;
 }

 .botao-estrela.ativa {
     color: var(--ouro);
 }

 .layout-duas-colunas {
     display: grid;
     grid-template-columns: 1fr;
     gap: 1.8rem;
 }

 @media (min-width: 820px) {
     .layout-duas-colunas {
         grid-template-columns: 1fr 1.4fr;
     }
 }

 .lista-opinioes {
     max-height: 560px;
     overflow-y: auto;
     padding-right: 4px;
 }

 .cartao-opiniao {
     background: white;
     border-radius: 24px;
     padding: 1rem;
     margin-bottom: 1rem;
     border: 1px solid var(--borda);
 }

 .cabecalho-opiniao {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: flex-start;
     gap: 8px;
     margin-bottom: 10px;
 }

 .info-utilizador {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .avatar-inicial {
     width: 40px;
     height: 40px;
     background: linear-gradient(145deg, var(--vinho), var(--vinho-escuro));
     border-radius: 24px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-weight: 600;
     flex-shrink: 0;
 }

 .estado-carregando {
     text-align: center;
     padding: 2rem;
     color: var(--pedra);
     font-size: 0.88rem;
 }

 .vitrine-estatisticas {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
     gap: 1rem;
     margin: 1.5rem 0;
 }

 .cartao-estatistica-ouro {
     background: white;
     border-radius: 24px;
     padding: 1rem;
     text-align: center;
     box-shadow: var(--sombra-fraca);
 }

 .rodape-principal {
     background: var(--tinta);
     color: rgba(255, 245, 235, 0.7);
     padding: 2.5rem 5% 1.5rem;
     margin-top: 2rem;
 }

 .conteudo-rodape {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     gap: 2rem;
 }

 .coluna-rodape h4 {
     color: white;
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.1rem;
     font-weight: 600;
     margin-bottom: 0.7rem;
 }

 .coluna-rodape p,
 .coluna-rodape address {
     font-style: normal;
     font-size: 0.88rem;
     line-height: 1.8;
 }

 .area-redes-sociais {
     display: flex;
     gap: 10px;
     margin-top: 0.8rem;
 }

 .link-rede-social {
     width: 40px;
     height: 40px;
     border-radius: 12px;
     background: rgba(255, 245, 235, 0.08);
     border: 1px solid rgba(255, 245, 235, 0.12);
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.2s;
     text-decoration: none;
 }

 .link-rede-social:hover {
     background: rgba(255, 245, 235, 0.16);
     transform: translateY(-2px);
 }

 .link-rede-social svg {
     width: 18px;
     height: 18px;
     fill: rgba(255, 245, 235, 0.8);
 }

 .divisor-rodape {
     border: none;
     border-top: 1px solid rgba(255, 245, 235, 0.1);
     margin: 2rem 0 1rem;
 }

 .copyright-rodape {
     text-align: center;
     font-size: 0.7rem;
     color: rgba(255, 245, 235, 0.35);
 }

 .nota-formulario {
     font-size: 0.65rem;
     text-align: center;
     margin-top: 0.8rem;
     color: var(--pedra);
 }

 @media (max-width: 560px) {
     .conteudo-rodape {
         flex-direction: column;
     }

     .linha-estatisticas {
         justify-content: center;
     }
 }
 /* =============================================
       SECÇÃO SOBRE (HISTÓRIA ESTILIZADA)
    ============================================= */
 .secao-sobre {
    text-align: center;
     padding: 3rem 5%;
     background: linear-gradient(135deg, var(--branco) 0%, var(--areia) 100%);
 }

 .container-sobre {
     max-width: 1280px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr 0.9fr;
     gap: 3rem;
     align-items: start;
 }

 @media (max-width: 900px) {
     .container-sobre {
         grid-template-columns: 1fr;
         gap: 2rem;
     }
 }

 /* Coluna da História */
 .coluna-historia {
     padding-right: 1rem;
 }

 .titulo-historia {
     font-size: 2.2rem;
     font-family: 'Cormorant Garamond', serif;
     color: var(--tinta);
     margin-bottom: 1.5rem;
     position: relative;
     display: inline-block;
 }

 .titulo-historia::after {
     content: '';
     position: absolute;
     bottom: -8px;
     left: 0;
     width: 60px;
     height: 3px;
     background: linear-gradient(90deg, var(--vinho), var(--ouro));
     border-radius: 3px;
 }

 .texto-historia {
     color: var(--tinta-suave);
     line-height: 1.7;
     font-size: 1rem;
 }

 .texto-historia p {
     margin-bottom: 1.2rem;
 }

 .paragrafo-destaque {
     font-size: 1.1rem;
     font-weight: 600;
     color: var(--vinho);
     border-left: 3px solid var(--vinho);
     padding-left: 1rem;
     margin: 1.5rem 0;
 }

 .paragrafo-frase {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.4rem;
     font-weight: 600;
     font-style: italic;
     color: var(--vinho);
     text-align: center;
     margin: 1.5rem 0;
     letter-spacing: -0.01em;
 }

 .paragrafo-assinatura {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.2rem;
     font-weight: 500;
     text-align: right;
     margin-top: 1.5rem;
     padding-top: 0.5rem;
     border-top: 1px dashed var(--borda);
     color: var(--ouro-escuro);
 }

 /* Carrossel Novo */
 .coluna-carrossel {
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .carrossel-sobre {
     width: 100%;
     max-width: 420px;
     background: transparent;
 }

 .moldura-carrossel {
     background: linear-gradient(145deg, var(--vinho-claro), var(--areia-escura));
     border-radius: 32px;
     padding: 1rem;
     box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.15);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .moldura-carrossel:hover {
     transform: translateY(-5px);
     box-shadow: 0 25px 40px -15px rgba(0, 0, 0, 0.2);
 }

 .area-imagem-carrossel {
     width: 100%;
     aspect-ratio: 4 / 5;
     background: var(--branco);
     border-radius: 24px;
     overflow: hidden;
     box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 2px 5px rgba(0, 0, 0, 0.02);
 }

 .area-imagem-carrossel img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     transition: opacity 0.4s ease, transform 0.6s ease;
 }

 .moldura-carrossel:hover .area-imagem-carrossel img {
     transform: scale(1.02);
 }

 .controles-carrossel {
     margin-top: 1.2rem;
     text-align: center;
 }

 .indicadores-carrossel {
     display: flex;
     gap: 0.6rem;
     justify-content: center;
     margin-bottom: 0.8rem;
 }

 .indicador {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background-color: var(--borda);
     border: none;
     padding: 0;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
 }

 .indicador.ativo {
     width: 28px;
     border-radius: 12px;
     background: linear-gradient(90deg, var(--vinho), var(--ouro));
 }

 .legenda-carrossel {
     font-size: 0.85rem;
     color: var(--pedra);
     font-style: italic;
     margin-top: 0.3rem;
     letter-spacing: 0.02em;
 }