/* Definição da fonte personalizada */
@font-face {
    font-family: 'Brittoone Regular';
    src: url('Fonts/Brittoone-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Estilização do corpo da página */
body {
    font-family: 'Brittoone Regular', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Garante que o conteúdo comece do topo */
    min-height: 100vh; /* Permite rolagem se precisar */
    margin: 0;
    background-color: #ffaec9;
    color: #361a23;
}
/* barra de navegação topo */
header {
    position: relative;
    top: 10px;
    width: auto;
    max-height: 30px;
    background-color: rgba(255,174,201,1.000);
    padding: 10px 0;
    text-align: center;
    border-radius: 10px;
    font-size: auto;
    margin-bottom: 20px; /* Added margin to separate from content */
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

nav ul li {
    display: inline;
}

nav ul li a {
    text-decoration: none;
    font-weight: bold;
    color: #6b3b49;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background 0.3s;
}

nav ul li a:hover {
    background: #ff8ab1;
    color: #6b3b49;
}

/* Centraliza o conteúdo */
.container, .projetos, .animador {
    width: 100%; /* Garante que cada seção ocupe toda a largura */
    text-align: center; /* Centraliza os conteúdos */
    margin-bottom: 50px; /* Dá um espaçamento entre as seções */
    position: relative;
}

/* === Projetos com Marcas Section Styling === */
.projetos {
    text-align: center;
    margin-bottom: 50px;
    background-color: #fffbfd;
    border: solid;
    border-color: #361a23;
    border-width: 3px 0px 0px 0px; /* Top border for the section */
    padding-top: 40px; /* Space for the section title */
    /*padding-bottom: 20px;  Space at the bottom of the section */
}

.projetos h1 {
    margin-bottom: 40px; /* Space after section title, before the grid */
    font-size: 2.5em; /* Larger title for section */
    color: #361a23;
}

/* ===== Carrossel: Projetos com Marcas ===== */
.projetos-carousel{
    position: relative;
    width: 100%;
    max-width: 1480px;   /* mais largo */
    margin: 0 auto 30px;
    padding: 0 12px;     /* menos borda */
}

.projetos-carousel::before,
.projetos-carousel::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;              /* largura do fade */
    pointer-events: none;     /* não atrapalha o scroll/clique */
    z-index: 2;
}

.projetos-carousel::before{
    left: 0;
    background: linear-gradient(to right, rgba(255, 251, 253, 1), rgba(23,23,23,0));
}

.projetos-carousel::after{
    right: 0;
    background: linear-gradient(to left, rgba(255, 251, 253, 1), rgba(23,23,23,0));
}

.projetos-viewport{
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    padding-bottom: 10px;
}
.projetos-viewport::-webkit-scrollbar{ display: none; } /* Chrome/Safari */

.projetos-track{
    display: flex;
    gap: 30px;
    padding: 0 10px 10px;
    scroll-snap-type: x mandatory;
}

.projetos-track .projeto{
    flex: 0 0 auto;
    scroll-snap-align: start;
}

/* Botões setinha */
.carousel-btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;

    background: transparent;
    border: 0;
    padding: 0;

    font-size: 48px;
    line-height: 1;
    color: rgb(37, 36, 35);

    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.carousel-btn:hover{
    opacity: 1;
    transform: translateY(-50%) scale(1.06);
}

.carousel-btn:disabled{
    opacity: 0.25;
    cursor: default;
}

/* posicionamento */
.carousel-btn.prev{ left: 8px; }
.carousel-btn.next{ right: 8px; }

.carousel-btn:disabled{
    opacity: 0.4;
    cursor: default;
}
/* ===== fim do carrossel ===== */


.projeto {
    background-color: #fef6f8; /* Light pinkish background for cards */
    border: 8px solid #e7d8dd; /* Subtle border for cards */
    border-radius: 12px; /* Rounded corners for cards */
    width: 300px; /* Fixed width for each card */
    padding: 20px;
    box-shadow: 0 3px 7px rgba(54, 26, 35, 0.12); /* Softer shadow */
    text-align: center;
    color: #724452; /* Text color inside card */
    display: flex;
    flex-direction: column; /* Stack card content vertically */
    transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out, border-color 0.3s ease;
    
}

.projeto:hover {
    transform: translateY(-6px); /* Lift card on hover */
    box-shadow: 0 6px 18px rgba(54, 26, 35, 0.18); /* Enhanced shadow on hover */
    border-color: #361a23;
}

.projeto h2 {
    font-size: 1.3em; /* Project title font size */
    color: #6b3b49; /* Darker pink for project titles */
    margin-bottom: 15px;
    min-height: 3em; /* To somewhat align titles if one wraps to 2-3 lines */
    display: flex; /* For vertical centering of text if needed */
    align-items: center;
    justify-content: center;
}

.projeto .print-link { /* Styles for the <a> tag wrapping the project image */
    display: block; /* Make it a block element */
    margin-bottom: 20px; /* Space below the image link */
    text-decoration: none; /* Remove underline from link */
    border-radius: 8px; /* Rounded corners for the link area */
    transition: transform 0.25s ease;
    overflow: hidden; /* Ensures image scaling stays within these bounds if desired */
}

.projeto .print-link:hover {
    transform: scale(1.03); /* Slightly zoom the link (and image within) on hover */
}

.projeto .print { /* Styles for the project image itself */
    width: 100%; /* Image takes full width of its .print-link container */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Rounded corners for the image */
    display: block; /* Removes extra space below image if any */
    border: 1px solid #e0c5cf; /* Light border for the image */
    transition: border-color 0.3s ease;
}

.projeto .print-link:hover .print {
    border-color: #c9a9b6; /* Darker border for image on link hover */
}

.imagem-marcas { /* Styles for brand logos */
    width: auto; /* Let height or max-width constrain it */
    max-width: 100px; /* Maximum width for the logo */
    height: 40px; /* Fixed height for logos to try and keep them visually similar in size */
    object-fit: contain; /* Ensures logo scales nicely within the bounds */
    display: block; /* To allow margin auto for centering */
    margin: 20px auto 0; /* Top margin, centered horizontally, no bottom margin */
}
/* === End of Projetos com Marcas Section Styling === */


/* Ícone acima do título */
.titulo-icone {
    padding-top: 100%; /* This seems like a lot, might be specific to its usage */
    width: 130px; /* Ajuste o tamanho do ícone */
    /*height: 100px;*/
    display: block;
    margin: 0 auto 50px; /* Centraliza e adiciona um espaço abaixo */
    transition: transform 0.2s ease;
}

.titulo-icone:hover {
     transform: scale(1.02);

}


.imgbutton{
    padding: 20px;
    align-items: bottom;
    height: 300px;
    max-height: auto;
    width: auto;
    border-radius: 50px;
}

/* Estilização dos botões */
button {
    font-family: 'Brittoone Regular', sans-serif;
    background-color: #fcbdd2;
    color: #361a23;
    border: solid;
    border-color: #b2798c;
    border-width: 2px 4px 6px 4px;
    padding: 15px 32px;
    font-weight: bold;
    text-align: center;
    font-size: 25px;
    cursor: pointer;
    margin: 10px;
    border-radius: 20px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.2s ease, transform 0.2s ease; /* Added color transition */
}

/* Efeito ao passar o mouse */
button:hover {
    background-color: #ff8ab1;
    transform: scale(1.02);
    border-color:#361a23
}

#personagem {
    position: absolute;
    z-index: 998;  
    top: 29em;
    left: 80vw;
    height: 15em;
    cursor: pointer;
}

.britto {
    position: absolute;
    z-index: 999;  
    top: 34em;
    left: 90vw;
    height: 10em;
    pointer-events: none;
}

.cbox{
    position: absolute;
    top: 1450px;
    left: 1500px;
    z-index: 998;
}

footer{
    position: relative;
    bottom: 0;
    width: 100%;
    text-align: center;
    background-color: #fffbfd;
    color: #361a23;
    font-size: 18px;
    padding: 15px 5px; /* Increased padding slightly */
    border: solid;
    border-color: #361a23;
    border-width: 3px 0px 0px 0px; /* Top border for footer */
}