@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@300;400;600&display=swap');

/* --- 1. BASE E RESET --- */
:root {
    --gold-1: #c5a059;
    --vivi-1: #0f1724;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    overflow-x: hidden;
    /* Evita rolagem horizontal indesejada */
}

body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    color: #1f2937;
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3 {
    font-family: 'Playfair Display', serif;
}

/* --- 2. UTILITÁRIOS --- */
.gold-gradient {
    background: linear-gradient(90deg, #c5a059 0%, #d3b567 50%, #f1e5b9 100%);
}

.bg-vivi {
    background: linear-gradient(120deg, #23325a 0%, #1b2a4e 50%);
}

nav {
    backdrop-filter: blur(6px);
    z-index: 100;
}

/* --- 3. CARROSSEL DE LOGOS (TRUSTED BY) --- */
.trusted-wrap {
    display: flex;
    overflow: hidden;
    width: 100%;
}

.trusted-track {
    display: flex;
    gap: 4rem;
    width: max-content;
    align-items: center;
}

.trusted-track img {
    height: 50px;
    flex-shrink: 0;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.4s ease;
}

.trusted-track img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

.track-left {
    animation: scroll-left 15s linear infinite;
}

.track-right {
    animation: scroll-right 15s linear infinite;
}

.trusted-wrap:hover .trusted-track {
    animation-play-state: paused;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes scroll-right {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

/* --- 4. CARROSSEL DE FOTOS (ESTILO INSTAGRAM) --- */
.carousel-container {
    position: relative;
    max-width: 500px;
    margin: 0 auto;
    overflow: hidden;
}

.carousel-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.carousel-slider::-webkit-scrollbar {
    display: none;
}

.carousel-item {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

.carousel-item img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 8px;
}

.carousel-dots {
    text-align: center;
    padding: 10px 0;
}

.dot {
    height: 8px;
    width: 8px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    margin: 0 4px;
    transition: 0.3s;
}

.dot.active {
    background-color: var(--gold-1);
}

/* --- 5. RESPONSIVIDADE (MEDIA QUERIES) --- */

/* Ajustes para Tablets e Celulares */
@media (max-width: 768px) {

    /* Logos menores e menos espaço entre elas no mobile */
    .trusted-track {
        gap: 2rem;
    }

    .trusted-track img {
        height: 35px;
    }

    /* Ajuste do Carrossel de Fotos */
    .carousel-container {
        max-width: 90%;
        /* Ocupa quase toda a largura em telas pequenas */
    }

    .carousel-item img {
        height: 350px;
        /* Foto menos alta no celular */
    }

    /* Tipografia agora usa classes Tailwind diretas no HTML */
}

/* Ajustes para celulares muito pequenos */
@media (max-width: 480px) {
    .trusted-track img {
        height: 28px;
    }

    .trusted-track {
        gap: 1.5rem;
    }
}

/* Esconde a scrollbar para um visual mais limpo */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Garante que o container do Instagram não quebre o layout */
.instagram-media {
    margin: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
}

/* --- TRAVA DE RESPONSIVIDADE --- */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
    /* IMPEDE a rolagem horizontal que corta o site */
    position: relative;
}

/* Ajuste fino para os botões de contato no Mobile */
@media (max-width: 640px) {
    #contato .flex {
        flex-direction: column !important;
        /* Botões um sobre o outro */
        align-items: center;
    }

    #contato a {
        width: 100% !important;
        /* Botão ocupa a largura total do telemóvel */
        max-width: 300px;
    }

    /* Ajuste do carrossel de fotos para não quebrar o layout */
    .carousel-item img {
        height: 350px !important;
    }
}

/* --- 6. TEXTURAS --- */
.bg-texture {
    background-image: linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)), url('Texture.jpg');
    background-repeat: repeat;
    background-size: 600px;
    /* Aumentado para 600px conforme solicitado */
}

/* --- 7. NOVOS UTILITÁRIOS --- */
.perspective-1000 {
    perspective: 1000px;
}