/* ---------------------------------------------------- */
/* IMPORTAÇÃO DE FONTES */
/* Forum é uma fonte serifada que se assemelha ao estilo do título. */
/* Inter está sendo usada como placeholder para Telegraf (sans-serif moderno). */
/* ---------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Forum&family=Inter:wght@100..900&family=Manrope:wght@200..800&family=Nunito+Sans:wght@200..800&family=Poppins:wght@300..800&family=Quicksand:wght@300..700&family=Plus+Jakarta+Sans:wght@200..800&display=swap');


/* ---------------------------------------------------- */
/* Estilos Globais */
/* ---------------------------------------------------- */
body {
    font-family: 'Quicksand', 'Manrope', sans-serif; /* Placeholder para Telegraf */
    margin: 0;
    padding: 0;
    color: #333;
    line-height: 1;
}

.page-top-anchor {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

html {
    scroll-behavior: smooth;
}

section {
    scroll-margin-top: 100px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Cores de Fundo do Site */
.bg-light-beige {
    background-color: #f7f3ed; /* Cor clara predominante */
}

.bg-medium-beige {
    background-color: #e8e0d5; /* Cor da seção "O que fazemos" */
    padding: 40px 0;
}

.bg-dark-brown {
    background-color: #553b2b; /* Cor do rodapé */
    color: #fff;
    padding: 50px 0;
}

/* ---------------------------------------------------- */
/* Tipografia e Títulos */
/* ---------------------------------------------------- */
h1, h2, h3 {
    font-weight: normal;
    margin-top: 0;
}

/* Estilo do Título Principal (H1 - Forum, 56px) */
.forum-font {
    font-family: 'Forum', serif;
    font-size: 72px; /* Tamanho exato do título */
    line-height: 0.9;
	text-align: center;
    color: #553b2b; /* Cor marrom clara do título */
    margin-bottom: 20px;
}

/* Estilo do Texto Normal (Telegraf, 18px) */
p {
    font-size: 24px;
    font-family: 'Quicksand', 'Manrope', sans-serif; /* Placeholder para Telegraf */
        text-align: center;
        font-weight: 480;
        line-height: 1.3;
        color: #5d4239;
        padding: 50px 50px 50px 50px;
        letter-spacing: 0.05em;
}

h2 {
    font-size: 30px;
    text-align: center;
    margin-bottom: 20px;
}

/* Título de Seção */
.uppercase-title {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 2px;
    color: #5d4239;
    font-weight: bold;
    margin-bottom: 10px;
}

/* ---------------------------------------------------- */
/* NAVBAR (Barra de Navegação) - Desktop */
/* ---------------------------------------------------- */
.header {
    padding: 0; /* O padding é colocado no .navbar */
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #f7f3ed;
    box-shadow: 0 4px 12px rgba(85, 59, 43, 0.08);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0; /* Padding vertical ajustado */
}

.logo-img {
    height: 80px; /* Tamanho ajustado conforme novo anexo */
    width: auto;
}

.nav-links {
    list-style: none;
    padding: 0;
    margin: 40px;
    display: flex;
    gap: 60px;
}

.nav-links a {
    text-decoration: none;
    color: #553b2b;
    font-weight: 500;
    font-size: 16px; /* Tamanho exato do menu */
    letter-spacing: 2px;
    font-family: 'Quicksand', 'Manrope', sans-serif; /* Placeholder para Telegraf */
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #5d4239;
}

.back-to-top { 
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: #553b2b;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 22px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 999;
}

/* ---------------------------------------------------- */
/* BARRA VTIS */
/* ---------------------------------------------------- */
.vtis-bar {
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 16px 20px;
    font-size: 16px;
    letter-spacing: 0.05em;
}

.vtis-bar span {
    display: inline-block;
}

.vtis-bar a {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
}

.vtis-bar a:hover,
.vtis-bar a:focus {
    color: #f7f3ed;
}

/* ---------------------------------------------------- */
/* MODAL DO PORTFÓLIO */
/* ---------------------------------------------------- */
.portfolio-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 24px;
    background: rgba(0, 0, 0, 0.85);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 2000;
}

.portfolio-modal.is-active {
    opacity: 1;
    visibility: visible;
}

.portfolio-modal-content {
    max-width: min(1000px, 90vw);
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portfolio-modal-image {
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}

.modal-control {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}

.modal-control:hover,
.modal-control:focus {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.05);
    outline: none;
}

.modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 28px;
    width: 44px;
    height: 44px;
}

.modal-prev,
.modal-next {
    font-size: 28px;
}

.modal-prev {
    order: -1;
}

@media (max-width: 768px) {
    .portfolio-modal {
        gap: 12px;
        padding: 16px;
    }

    .portfolio-modal-image {
        max-height: 70vh;
        border-radius: 12px;
    }

    .modal-control {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .modal-close {
        top: 16px;
        right: 16px;
    }
}

.back-to-top:hover,
.back-to-top:focus {
    transform: translateY(-3px);
    opacity: 0.9;
}

.back-to-top:focus {
    outline: 2px solid #f28c6a;
    outline-offset: 4px;
}

/* Esconde o botão do menu mobile no desktop */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #5d4239;
}

/* ---------------------------------------------------- */
/* PRIMEIRA DOBRA / HERO */
/* ---------------------------------------------------- */
.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 100px 0;
}

.hero-text {
    max-width: 50%;
}

.hero-subtitle {
    font-size: 24px;
    font-family: 'Quicksand', 'Manrope', sans-serif; /* Placeholder para Telegraf */
    text-align: center;
    font-weight: 480;
    line-height: 1.3;
    color: #5d4239;
    letter-spacing: 0.05em;
    padding: 0;
    margin-top: 20px;
    margin-bottom: 0;
}

.hero-image-placeholder {
    /* Cor de fundo ajustada para o segundo anexo (tom mais neutro) */
    width: 500px;
    height: 380px; /* Altura ajustada */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 8px; /* Mantido para o mockup */
        margin: -50px 0 0 0;
}

.hero-image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* ---------------------------------------------------- */
/* SEÇÃO SOBRE NÓS (Foto e Texto) */
/* ---------------------------------------------------- */
.about-us {
    padding: 50px 0;
}

.about-images {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    margin-bottom: 40px;
    height: min(70vh, 768px);
}

.profile-image-placeholder {
    background-color: #5d4239;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-title {
    font-size: 36px;
    color: #5d4239;
    margin: 16px 0 32px;
    text-align: center;
}

.about-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

.about-column {
    flex: 1;
}

.about-column h3 {
    font-size: 22px;
    color: #553b2b;
    margin-bottom: 16px;
    text-align: left;
}

.about-column p {
    padding: 0;
    text-align: left;
    line-height: 1.6;
    font-size: 18px;
    letter-spacing: 0.02em;
}

.about-description {
    padding: 0;
    text-align: left;
    line-height: 1.6;
    font-size: 18px;
    letter-spacing: 0.02em;
    font-weight: 480;
    color: #5d4239;
    margin: 40px 0 0;
}

/* ---------------------------------------------------- */
/* SEÇÃO O QUE FAZEMOS (3 Colunas + Imagem) */
/* ---------------------------------------------------- */
.what-we-do-content {
    margin-top: 30px;
}

.what-we-do-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

.what-we-do-item h3 {
    font-size: 24px;
    color: #553b2b;
    margin-bottom: 16px;
    text-align: left;
    font-family: 'Forum', serif;
}

.what-we-do-item p {
    padding: 0;
    text-align: left;
    line-height: 1.6;
    font-size: 18px;
    letter-spacing: 0.02em;
}

@media (max-width: 1024px) {
    .what-we-do-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------- */
/* SEÇÃO PORTFÓLIO (Galeria de Fotos) */
/* ---------------------------------------------------- */
.portfolio {
    padding: 80px 0;
}

.portfolio-block {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 48px;
}

.portfolio-item {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
}

.portfolio-item::before {
    content: "";
    display: block;
    padding-top: 100%;
}

.portfolio-item.span-horizontal::before {
    padding-top: 50%;
}

.portfolio-item.span-vertical::before {
    padding-top: 200%;
}

.portfolio-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.portfolio-item:hover img,
.portfolio-item:focus-within img {
    transform: scale(1.05);
}

.portfolio-item img:focus {
    outline: 3px solid #553b2b;
    outline-offset: 4px;
}

.block-1 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
        "image1 image2 image3"
        "image4 image5 image3";
}

.block-1 .portfolio-item:nth-child(1) { grid-area: image1; }
.block-1 .portfolio-item:nth-child(2) { grid-area: image2; }
.block-1 .portfolio-item:nth-child(3) { grid-area: image3; }
.block-1 .portfolio-item:nth-child(4) { grid-area: image4; }
.block-1 .portfolio-item:nth-child(5) { grid-area: image5; }

.block-2 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
        "image1 image1 image2"
        "image3 image4 image5";
}

.block-2 .portfolio-item:nth-child(1) { grid-area: image1; }
.block-2 .portfolio-item:nth-child(2) { grid-area: image2; }
.block-2 .portfolio-item:nth-child(3) { grid-area: image3; }
.block-2 .portfolio-item:nth-child(4) { grid-area: image4; }
.block-2 .portfolio-item:nth-child(5) { grid-area: image5; }

.block-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
        "image1 image2 image3"
        "image4 image2 image5";
}

.block-3 .portfolio-item:nth-child(1) { grid-area: image1; }
.block-3 .portfolio-item:nth-child(2) { grid-area: image2; }
.block-3 .portfolio-item:nth-child(3) { grid-area: image3; }
.block-3 .portfolio-item:nth-child(4) { grid-area: image4; }
.block-3 .portfolio-item:nth-child(5) { grid-area: image5; }

.block-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
        "image1 image2 image3"
        "image4 image5 image5";
}

.block-4 .portfolio-item:nth-child(1) { grid-area: image1; }
.block-4 .portfolio-item:nth-child(2) { grid-area: image2; }
.block-4 .portfolio-item:nth-child(3) { grid-area: image3; }
.block-4 .portfolio-item:nth-child(4) { grid-area: image4; }
.block-4 .portfolio-item:nth-child(5) { grid-area: image5; }

.block-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
        "image1 image2 image3"
        "image4 image5 image6";
}

.block-5 .portfolio-item:nth-child(1) { grid-area: image1; }
.block-5 .portfolio-item:nth-child(2) { grid-area: image2; }
.block-5 .portfolio-item:nth-child(3) { grid-area: image3; }
.block-5 .portfolio-item:nth-child(4) { grid-area: image4; }
.block-5 .portfolio-item:nth-child(5) { grid-area: image5; }
.block-5 .portfolio-item:nth-child(6) { grid-area: image6; }

.portfolio-cta {
    margin-top: 32px;
    font-size: 18px;
    color: #5d4239;
    padding: 0;
    text-align: center;
}

/* ---------------------------------------------------- */
/* FOOTER */
/* ---------------------------------------------------- */
.footer {
    padding: 80px 0;
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 64px;
    flex-wrap: wrap;
}

.footer-text {
    flex: 1 1 320px;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.footer-heading {
    font-family: 'Forum', serif;
    font-size: 48px;
    color: #f7ede4;
    margin: 0 0 16px;
    text-align: center;
    letter-spacing: 0.05em;
}

.footer-subheading {
    font-size: 18px;
    color: #f7ede4;
    margin: 0 0 32px;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-align: center;
    padding: 0;
}

.footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    text-align: center;
}

.footer-contact li {
    color: #f7ede4;
    font-size: 18px;
    letter-spacing: 0.08em;
    text-align: center;
    padding: 0;
    font-weight: 500;
}

.footer-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.footer-contact-link:hover,
.footer-contact-link:focus {
    text-decoration: underline;
}

.contact-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.footer-contact-item.whatsapp .contact-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2325D366'/%3E%3Cpath fill='%23fff' d='M17.5 6.5c-1.5-1.5-3.4-2.3-5.4-2.3-4.2 0-7.7 3.4-7.7 7.6 0 1.3.3 2.5.9 3.7L4 20l4.7-1.2c1.1.6 2.3.9 3.5.9h0c4.2 0 7.7-3.4 7.7-7.6 0-2-.8-3.9-2.4-5.4zm-5.3 11.7h0c-1 0-2-.3-2.9-.8l-.2-.1-2.8.7.8-2.7-.1-.2c-.5-.9-.8-2-.8-3 0-3.3 2.7-5.9 6-5.9 1.6 0 3.1.6 4.2 1.7 1.1 1.1 1.7 2.6 1.7 4.2 0 3.3-2.7 5.9-6 5.9zm3.3-4.3c-.2-.1-1.4-.7-1.6-.8-.2-.1-.4-.1-.6.1-.2.2-.6.8-.7.9-.1.2-.3.2-.5.1-.2-.1-.9-.3-1.7-1-.6-.5-1-1.1-1.1-1.3-.1-.2 0-.3.1-.4.1-.1.2-.3.3-.4.1-.1.1-.2.2-.3.1-.1.1-.2.1-.3 0-.1 0-.2 0-.3 0-.1-.5-1.3-.7-1.7-.2-.4-.4-.4-.6-.4h-.5c-.2 0-.4.1-.6.3-.2.2-.8.8-.8 1.9 0 1.1.8 2.1.9 2.2.1.1 1.5 2.3 3.6 3.2.5.2.9.3 1.2.4.5.2.9.2 1.2.1.4-.1 1.2-.5 1.3-.9.2-.4.2-.8.2-.9-.2-.1-.3-.2-.5-.3z'/%3E%3C/svg%3E");
}

.footer-contact-item.email .contact-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='4' fill='%23F28C6A'/%3E%3Cpath fill='%23fff' d='M5 7h14c.6 0 1 .4 1 1v8c0 .6-.4 1-1 1H5c-.6 0-1-.4-1-1V8c0-.6.4-1 1-1zm13.3 2-6 4.5c-.2.1-.5.1-.7 0L5.7 9H5l6.3 4.7c.4.3.9.3 1.3 0L19 9h-.7z'/%3E%3C/svg%3E");
}

.footer-contact-item.instagram .contact-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3ClinearGradient id='a' x1='0%' y1='0%' x2='100%' y2='100%25'%3E%3Cstop offset='0' stop-color='%23F58529'/%3E%3Cstop offset='0.5' stop-color='%23DD2A7B'/%3E%3Cstop offset='1' stop-color='%235154F1'/%3E%3C/linearGradient%3E%3Crect width='24' height='24' rx='5' fill='url(%23a)'/%3E%3Cpath fill='%23fff' d='M12 8.5A3.5 3.5 0 1 0 12 15.5 3.5 3.5 0 1 0 12 8.5zm0 5.6c-1.1 0-2.1-1-2.1-2.1S10.9 9.9 12 9.9s2.1 1 2.1 2.1S13.1 14.1 12 14.1zm4.4-6.6a.9.9 0 1 0 0-1.8.9.9 0 0 0 0 1.8zM17 6H7c-.6 0-1 .4-1 1v10c0 .6.4 1 1 1h10c.6 0 1-.4 1-1V7c0-.6-.4-1-1-1zm-.2 10.2c0 .1-.1.2-.2.2H7.4c-.1 0-.2-.1-.2-.2V7.8c0-.1.1-.2.2-.2h9.2c.1 0 .2.1.2.2v8.4z'/%3E%3C/svg%3E");
}

.footer-image {
    flex: 1 1 320px;
    display: flex;
    justify-content: flex-end;
}

.footer-image-mask {
    position: relative;
    max-width: 460px;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 260px 120px 80px 260px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(93, 66, 57, 0.15));
}

.footer-image-mask::before {
    content: "";
    position: absolute;
    top: -35%;
    left: -35%;
    width: 70%;
    height: 70%;
    background: #553b2b;
    border-radius: 50%;
    z-index: 1;
}

.footer-image-mask img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ---------------------------------------------------- */
/* CSS RESPONSIVO (Media Queries) */
/* ---------------------------------------------------- */

@media (max-width: 768px) {
    /* Ajustes Gerais */
    .container {
        padding: 0 10px;
    }

    .header {
        position: static;
        top: auto;
    }

    .back-to-top {
        width: 44px;
        height: 44px;
        right: 16px;
        bottom: 16px;
        font-size: 20px;
    }

    /* 1. NAVBAR - Mobile */
    .navbar {
        padding: 15px 10px;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .logo-link {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .nav-desktop {
        display: block;
        width: 100%;
    }

    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 16px;
        margin: 0 auto;
        padding: 0;
        max-width: 320px;
        text-align: center;
    }

    .nav-links li {
        flex: 0 1 auto;
    }

    .nav-links a {
        font-size: 12px; /* Redução de 30% em relação ao desktop */
        line-height: 0.9;
        font-weight: 600;
    }

    .menu-toggle {
        display: none;
    }

    /* 2. PRIMEIRA DOBRA / HERO */
    .hero {
        flex-direction: column;
        padding: 30px 0;
        text-align: center; /* Centraliza o conteúdo no mobile */
        align-items: center;
        gap: 20px;
    }

    .hero-text {
        max-width: 100%;
        order: 1;
        margin-top: 0;
        padding: 0 24px;
    }

    .forum-font {
        font-size: 36px; /* Reduz o título para mobile */
        padding: 0 8px;
    }

    .hero-image-placeholder {
        width: 100%;
        max-width: 320px;
        height: auto;
        order: 2;
        margin: 0;
    }

    .hero-subtitle {
        font-size: 16px; /* Reduz o texto normal para mobile */
        padding: 0 8px;
    }

    .hero-image-placeholder img {
        height: auto;
    }

    /* 3. SEÇÃO SOBRE NÓS */
    .about-us {
        padding: 40px 20px;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .about-content,
    .about-description,
    .about-column p {
        padding-left: 8px;
        padding-right: 8px;
    }

    .about-images {
        grid-template-columns: 1fr;
        height: auto;
        gap: 20px;
    }

    .profile-image-placeholder {
        height: auto;
        max-height: 480px;
    }

    .about-title {
        font-size: 24px;
        margin: 24px 0;
    }

    .about-content {
        flex-direction: column;
        gap: 24px;
    }

    .about-column h3 {
        text-align: center;
    }

    .about-column p {
        font-size: 16px;
    }

    .about-images,
    .about-content {
        display: contents;
    }

    .about-title {
        order: 1;
    }

    .about-images .profile-image-placeholder:nth-child(1) {
        order: 2;
    }

    .about-content .about-column:nth-child(1) {
        order: 3;
    }

    .about-images .profile-image-placeholder:nth-child(2) {
        order: 4;
    }

    .about-content .about-column:nth-child(2) {
        order: 5;
    }

    .about-description {
        order: 6;
        margin: 16px 0 0;
    }

    /* 4. SEÇÃO O QUE FAZEMOS */
    .bg-medium-beige .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .what-we-do-item {
        padding-left: 8px;
        padding-right: 8px;
    }

    .what-we-do-grid {
        grid-template-columns: 1fr; /* 1 coluna no mobile */
        gap: 24px;
    }

    /* 5. SEÇÃO PORTFÓLIO */
    .portfolio-block {
        grid-template-columns: 1fr;
        grid-template-areas: none;
        margin-bottom: 32px;
        justify-items: center;
    }

    .portfolio-block.block-1,
    .portfolio-block.block-2,
    .portfolio-block.block-3,
    .portfolio-block.block-4,
    .portfolio-block.block-5 {
        grid-template-columns: 1fr;
        grid-template-areas: none;
    }

    .portfolio-block.block-1 .portfolio-item,
    .portfolio-block.block-2 .portfolio-item,
    .portfolio-block.block-3 .portfolio-item,
    .portfolio-block.block-4 .portfolio-item,
    .portfolio-block.block-5 .portfolio-item {
        grid-area: auto;
    }

    .portfolio-item::before,
    .portfolio-item.span-horizontal::before,
    .portfolio-item.span-vertical::before {
        padding-top: 100%;
    }

    .portfolio-item {
        max-width: 260px;
        width: 100%;
        margin: 0 auto;
    }

    /* 6. FOOTER */
    .footer {
        padding: 60px 0;
    }

    .footer-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }

    .footer-heading {
        font-size: 36px;
    }

    .footer-subheading {
        font-size: 20px;
    }

    .footer-image {
        width: 100%;
        justify-content: center;
    }

    .footer-image-mask {
        border-radius: 280px 280px 120px 280px;
        aspect-ratio: 4 / 3;
    }

    .footer-image-mask::before {
        top: -45%;
        left: -25%;
        width: 65%;
        height: 65%;
    }

}