/* public_html/assets/css/styles.css (Versão 92 - Correção da tira auto-scroll) */

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* --- Variáveis CSS --- */
:root {
    --base-width: 1080; /* Largura base em pixels para cálculos VW */
    --header-height-px: 160; /* Altura do cabeçalho em pixels */
    --strip-image-height-px: 720; /* Altura desejada da imagem da tira em pixels */
    --vertical-spacing-px: 15; /* Espaçamento vertical padrão em pixels */

    /* Cálculos VW baseados na largura de 1080px */
    --header-height-vw: calc(var(--header-height-px) / var(--base-width) * 100vw);
    --strip-image-height-vw: calc(var(--strip-image-height-px) / var(--base-width) * 100vw);
    --vertical-spacing-vw: calc(var(--vertical-spacing-px) / var(--base-width) * 100vw);
    --button-size-vw: calc(130 / var(--base-width) * 100vw); /* Tamanho dos botões do header */
    --button-top-vw: calc(15 / var(--base-width) * 100vw); /* Topo dos botões do header */
    --btn-inicio-left-vw: calc(30 / var(--base-width) * 100vw);
    --btn-menu-left-vw: calc(170 / var(--base-width) * 100vw);
    --btn-contactos-left-vw: calc(780 / var(--base-width) * 100vw);
    --btn-lang-left-vw: calc(920 / var(--base-width) * 100vw);
    --logo-width-vw: calc(320 / var(--base-width) * 100vw);
    --logo-height-vw: calc(95 / var(--base-width) * 100vw);
    --logo-top-vw: calc(80 / var(--base-width) * 100vw); /* Metade da altura do header */
    --content-padding-vw: calc(0 / var(--base-width) * 100vw);
    --menu-gap-vw: calc(15 / var(--base-width) * 100vw);
    --menu-radius-vw: calc(8 / var(--base-width) * 100vw);
    --menu-shadow-offset-vw: calc(2 / var(--base-width) * 100vw);
    --menu-shadow-blur-vw: calc(5 / var(--base-width) * 100vw);
    --menu-hover-shadow-offset-vw: calc(4 / var(--base-width) * 100vw);
    --menu-hover-shadow-blur-vw: calc(10 / var(--base-width) * 100vw);
}

/* Estilos globais do corpo */
body {
    background-color: white;
    touch-action: manipulation; /* Melhora a resposta ao toque em dispositivos móveis */
    /* Padding no topo em vw para escalar ABAIXO de 1080px */
    padding-top: var(--header-height-vw);
    overflow-x: hidden; /* Previne scroll horizontal */
    font-family: sans-serif; /* Adiciona uma fonte padrão */
}

/* Container principal */
.page-container {
    width: 100%; /* Ocupa toda a largura disponível */
    max-width: 1080px; /* Limita a largura máxima */
    margin: 0 auto; /* Centraliza o container */
    position: relative;
    overflow: hidden; /* Garante que nada transborde */
    background-color: white; /* Fundo branco para o conteúdo */
}

/* Cabeçalho Principal */
.main-header {
    width: 100%; /* Ocupa toda a largura disponível */
    max-width: 1080px; /* Limita a largura máxima */
    height: var(--header-height-vw); /* Altura responsiva */
    background-color: #000; /* Fundo preto */
    position: fixed; /* Fixo no topo */
    top: 0;
    left: 50%; /* Centraliza horizontalmente */
    transform: translateX(-50%);
    z-index: 1000; /* Garante que fique acima de outros conteúdos */
    border-bottom: 1px solid #eee; /* Linha subtil de separação */
}

/* Navegação do Cabeçalho */
.header-nav {
    position: relative; /* Para posicionamento absoluto dos filhos */
    width: 100%;
    height: 100%;
}

/* Botões (Navegação e Idioma) - Estilos Base VW */
.nav-btn, .language-btn {
    position: absolute;
    top: var(--button-top-vw);
    width: var(--button-size-vw);
    height: var(--button-size-vw);
    cursor: pointer;
    border: none; /* Remove borda padrão de botões */
    background: none; /* Remove fundo padrão de botões */
    padding: 0; /* Remove padding padrão */
}

.nav-btn img, .language-btn img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Garante que a imagem caiba sem distorcer */
}

/* Posições horizontais dos botões (VW Base) */
.btn-inicio { left: var(--btn-inicio-left-vw); }
.btn-menu   { left: var(--btn-menu-left-vw); }
.btn-contactos { left: var(--btn-contactos-left-vw); }
.language-btn { left: var(--btn-lang-left-vw); }

/* Container do Logo - Estilos Base VW */
.logo-container {
    position: absolute;
    left: 50%; /* Centraliza */
    top: var(--logo-top-vw); /* Metade da altura do header (em VW) */
    transform: translate(-50%, -50%); /* Ajuste fino para centralização perfeita */
    width: var(--logo-width-vw);
    height: var(--logo-height-vw);
}

.logo-container img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Área de Conteúdo Principal */
.content-area {
    padding: var(--content-padding-vw);
    box-sizing: border-box;
    width: 100%;
}
#content-container {
    width: 100%;
}
/* Estilo padrão para imagens verticais (fora da tira) */
#content-container > img { /* Seletor > para aplicar apenas a imagens diretamente dentro do container */
    width: 100%;
    height: auto; /* Mantém proporção */
    display: block;
    margin-bottom: var(--vertical-spacing-vw); /* Espaçamento vertical responsivo */
}
/* Remove margem inferior da última imagem vertical */
#content-container > img:last-child {
    margin-bottom: 0;
}


/* Estilos específicos para a página de menu */
.menu-page .menu-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: var(--content-padding-vw);
    gap: var(--menu-gap-vw);
    width: 100%;
    box-sizing: border-box;
}
.menu-page .menu-btn { text-decoration: none; }
.menu-page .menu-btn img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--menu-radius-vw);
    box-shadow: 0 var(--menu-shadow-offset-vw) var(--menu-shadow-blur-vw) rgba(0,0,0,0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.menu-page .menu-btn:hover img {
    transform: scale(1.03);
    box-shadow: 0 var(--menu-hover-shadow-offset-vw) var(--menu-hover-shadow-blur-vw) rgba(0,0,0,0.3);
}

/* Estilo para imagens clicáveis na página de contactos */
#content-container img.contact-link-image {
    cursor: pointer;
}

/* ========== Tira Horizontal Auto-Scrolling (Correção v77) ========== */
#strip-wrapper { /* Novo wrapper para controlar overflow e margem */
    overflow: hidden; /* Esconde o conteúdo que sai da área visível */
    width: 100%; /* Ocupa a largura total disponível */
    margin: var(--vertical-spacing-vw) 0; /* Adiciona espaçamento vertical antes e depois da tira */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

#strip-container {
    display: flex; /* Alinha as imagens horizontalmente */
    flex-wrap: nowrap; /* Impede que as imagens quebrem linha */
    width: max-content; /* Largura baseada no conteúdo (todas as imagens lado a lado) */
    /* A animação 'slide' moverá este container */
    animation: slide 40s linear infinite; /* Duração aumentada para scroll mais lento, ajuste conforme necessário */
}

#strip-container img {
    flex: 0 0 auto; /* Impede que a imagem encolha ou estique */
    height: var(--strip-image-height-vw); /* Altura responsiva baseada em 720px */
    width: auto; /* Largura automática para manter a proporção */
    /* margin-right: 0; REMOVIDO - Sem espaço entre imagens */
    display: block; /* Remove espaço extra abaixo da imagem */
    cursor: pointer; /* Indica que é clicável (se tiver link) */
}
/* Se houver links na tira, estiliza o 'a' */
#strip-container a {
    flex: 0 0 auto; /* Para que o link não afete o layout flex */
    display: block; /* Para que o link se comporte como a imagem */
    line-height: 0; /* Remove possível espaço extra do link */
}


/* Animação de deslize */
@keyframes slide {
    0% {
        transform: translateX(0%); /* Começa na posição inicial */
    }
    100% {
        /* Move para a esquerda pela largura exata da primeira metade do conteúdo */
        /* Como duplicamos o conteúdo, mover -50% faz o loop parecer contínuo */
        transform: translateX(-50%);
    }
}

/* Pausa a animação quando o mouse está sobre a tira */
#strip-wrapper:hover #strip-container {
    animation-play-state: paused;
}


/* --- Media Query para Ecrãs >= 1081px --- */
@media (min-width: 1081px) {
    body {
        padding-top: calc(var(--header-height-px) * 1px); /* Adiciona 'px' */
    }
    .main-header {
        width: 1080px;
        height: calc(var(--header-height-px) * 1px); /* Adiciona 'px' */
    }
    .nav-btn, .language-btn {
        top: 15px; /* Valor fixo */
        width: 130px; /* Valor fixo */
        height: 130px; /* Valor fixo */
    }
    .btn-inicio { left: 30px; }
    .btn-menu   { left: 170px; }
    .btn-contactos { left: 780px; }
    .language-btn  { left: 920px; }
    .logo-container {
        left: 540px; /* Metade da largura fixa */
        top: 80px; /* Metade da altura fixa */
        width: 320px; /* Valor fixo */
        height: 95px; /* Valor fixo */
    }
    .content-area { padding: 20px; } /* Padding fixo */
    #content-container > img { margin-bottom: var(--vertical-spacing-px); } /* Espaçamento fixo */

    /* Tira de imagens em telas maiores */
    #strip-wrapper { margin: var(--vertical-spacing-px) 0; }
    #strip-container img {
        height: var(--strip-image-height-px); /* Altura fixa de 720px */
    }

    /* Menu em telas maiores */
    .menu-page .menu-container { padding: 20px; gap: 15px; }
    .menu-page .menu-btn img {
         border-radius: 8px; /* Raio fixo */
         box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Sombra fixa */
    }
     .menu-page .menu-btn:hover img {
        box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Sombra hover fixa */
    }
    #strip-container img {
        height: calc(var(--strip-image-height-px) * 1px); /* Adiciona 'px' */
    }
}