/*
* W-Empreendimentos - Main Styles
* Theme: Black & White, Fine Lines, Modern
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap');

:root {
    --primary-color: #000000;
    --secondary-color: #ffffff;
    --text-color: #1a1a1a;
    --bg-light: #f9f9f9;
    --border-color: #e0e0e0;
    --line-width: 1px;
}

body {
    font-family: 'Montserrat', sans-serif;
    color: var(--text-color);
    background-color: var(--secondary-color);
    overflow-x: hidden;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 300;
    letter-spacing: 1px;
    color: var(--primary-color);
}

.fw-medium {
    font-weight: 500;
}

.fw-light {
    font-weight: 300;
}

/* Buttons */
.btn-custom {
    border: var(--line-width) solid var(--primary-color);
    background: transparent;
    color: var(--primary-color);
    border-radius: 0;
    padding: 10px 30px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.btn-custom:hover {
    background: var(--primary-color);
    color: var(--secondary-color);
}

/* Navbar */
.navbar {
    background-color: transparent;
    /* Default transparent at top */
    border-bottom: var(--line-width) solid transparent;
    padding: 0.5rem 0;
    /* Thinner */
    transition: all 0.3s ease;
}

.navbar.scrolled {
    background-color: #ffffff!important;
    /* White when scrolled */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for depth */
}

/* Make navbar transparent when on top if needed, but for now user asked for transparent to see background.
   Assuming they want it always valid or over the hero.
   Let's set it to transparent absolute over hero?
   The current code has .fixed-top.
*/
/* .navbar.fixed-top handled by .navbar and .scrolled classes */

.navbar-brand {
    font-weight: 600;
    letter-spacing: 2px;
    font-size: 1.5rem;
    position: relative;
    display: flex;
    align-items: center;
}

.navbar-brand img {
    height: 100px;
    /* Larger logo */
    width: auto;
    position: absolute;
    top: -40px;
    /* Move up to center vertically in the thinner bar or overflow downwards */
    top: -25px;
    /* Adjust to vertically align or overflow */
    left: 0;
    /* To let it overflow the container, we need to ensure container doesn't clip. Bootstrap nav usually doesn't. */
}

/* Adjusting logo position more precisely */
.navbar-brand {
    height: 40px;
    /* Keep the brand container strictly sized so it doesn't push nav height */
    width: 200px;
    /* Reserve space */
}

.navbar-brand img {
    height: 50px;
    /* Slightly reduced */
    position: absolute;
    top: -4px;
    /* Adjusted centering */
}

.nav-link {
    color: var(--primary-color) !important;
    /* Make sure text is black if background is transparent? Or white? */
    /* User said "ver a imagem de fundo", so background is likely dark imagery?
       In index.html hero is dark overlay. Text should be white?
       But current style uses var(--text-color) which is dark.
       Wait, original text color was var(--text-color) (dark).
       The Hero has a dark overlay. If I make nav transparent, I need WHITE text.
       But the user didn't explicitly ask to change text color, but it's implied if background is image.
       However, on other pages, it might be white background.
       Let's stick to black text for now unless on Home?
       Actually, `fixed-top` is on all pages.
       If I make it transparent on all pages, it breaks visibility on white pages.
       I should probably only make it transparent on Home or pages with Hero Image at top.
       But the user said "menu superior no desktop seja mais fino... e transparente".
       I will set it to transparent but maybe add a background on scroll via JS?
       Or just transparent for now as requested.
       I will use a mix-blend-mode or text-shadow?
       Let's just keep text dark for now and see, or maybe white with shadow.
       Actually, let's look at the hero image provided in index.html... it has an overlay.
       The styling says `.navbar-brand img { height: 70px; }`.
       I will use the plan's approach.
    */
    font-weight: 500;
    font-size: 0.85rem;
    text-transform: uppercase;
    margin-left: 1.5rem;
    position: relative;
    /* Removed text-shadow as requested */
}

/* Parallax Section */
.parallax-section {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 400px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* Hero Section */
.hero-section {
    height: 100vh;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover;
}

.hero-message {
    z-index: 2;
    /* background: rgba(255, 255, 255, 0.05); */
    /* Very subtle */
    /* backdrop-filter: blur(5px); */
    /* -webkit-backdrop-filter: blur(5px); */
    padding: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    max-width: 800px;
    width: 90%;
    /* box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2); */
}

.hero-message h1 {
    font-size: 3.5rem;
    font-weight: 300;
    margin-bottom: 1rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-message p {
    font-size: 1.2rem;
    font-weight: 300;
    color: #f0f0f0;
    letter-spacing: 1px;
    margin-bottom: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Interest Form Section */
.interest-section {
    background-color: var(--bg-light);
    padding: 5rem 0;
}

.interest-form {
    background: #fff;
    padding: 3rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.form-control {
    border-radius: 0;
    border: 1px solid #ddd;
    padding: 12px 15px;
    margin-bottom: 1.5rem;
    background-color: #fcfcfc;
}

.form-control:focus {
    box-shadow: none;
    border-color: var(--primary-color);
    background-color: #fff;
}

.form-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    color: #555;
}

.hero-internal {
    height: 60vh;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Dark overlay for readability */
    z-index: 1;
}

.hero-content {
    z-index: 2;
    position: relative;
    text-align: center;
    width: 100%;
}

.hero-title {
    font-size: 4.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-subtitle {
    font-size: 1.5rem;
    margin-bottom: 2.5rem;
    color: #f0f0f0;
    font-weight: 300;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.btn-custom-light {
    border: 1px solid #fff;
    background: transparent;
    color: #fff;
    border-radius: 0;
    padding: 12px 40px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 2px;
}

.btn-custom-light:hover {
    background: #fff;
    color: #000;
}

/* Section General */
section {
    padding: 5rem 0;
}

.section-title {
    margin-bottom: 3rem;
    position: relative;
    display: inline-block;
    padding-bottom: 1rem;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 1px;
    background-color: var(--primary-color);
}

/* Cards */
.project-card {
    border: var(--line-width) solid var(--border-color);
    background: var(--secondary-color);
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.project-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.project-img-wrapper {
    position: relative;
    overflow: hidden;
    padding-top: 66.66%;
    /* 3:2 Aspect Ratio */
}

.project-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1);
}

.project-card:hover .project-img {
    transform: scale(1.1);
}

.project-body {
    padding: 1.5rem;
}

.project-status {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    display: block;
}

.status-launch {
    color: #555;
}

.status-construction {
    color: #333;
}

.status-delivered {
    color: #000;
}

.project-title {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.project-location {
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 1rem;
}

/* Footer */
/* Footer */
footer {
    background-color: var(--secondary-color);
    /* White */
    color: var(--primary-color);
    /* Black */
    padding: 2rem 0;
    border-top: 1px solid var(--border-color);
}

footer p {
    color: var(--text-color);
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 1px;
}

/* Animations */
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Utility */
.bg-black {
    background-color: var(--primary-color);
}

.text-black {
    color: var(--primary-color);
}

.bg-white {
    background-color: var(--secondary-color);
}

.border-fine {
    border: 1px solid var(--border-color);
}

/* Map Drawing Style */
.map-drawing-style {
    filter: grayscale(100%) contrast(120%);
    -webkit-filter: grayscale(100%) contrast(120%);
    transition: filter 0.3s ease;
}

.map-drawing-style:hover {
    /* filter: grayscale(0%); */
    /* -webkit-filter: grayscale(0%); */
    /* Keep grayscale on hover as requested */
    filter: grayscale(100%) contrast(120%);
    -webkit-filter: grayscale(100%) contrast(120%);
}

/* Amenities Grid */
.amenity-card {
    border: 1px solid var(--border-color);
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
}

.amenity-card:hover {
    border-color: var(--primary-color);
    background-color: var(--bg-light);
    transform: translateY(-5px);
}

.amenity-icon {
    /* Removed font-size as we are using images */
    margin-bottom: 1rem;
    display: block;
}

.amenity-icon-img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    filter: grayscale(100%) contrast(120%);
    transition: transform 0.3s ease;
    mix-blend-mode: multiply;
    /* Ensure white background blends if processing failed */
}

.amenity-card:hover .amenity-icon-img {
    transform: scale(1.1);
}

/* Carousel */
.carousel-item img {
    height: 500px;
    object-fit: cover;
    cursor: pointer;
    /* Indicate clickable */
}

.carousel-caption {
    background: rgba(0, 0, 0, 0.5);
    padding: 1rem;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
}

/* Progress Bars */
.progress {
    height: 10px;
    background-color: #eee;
    border-radius: 0;
    overflow: visible;
    margin-bottom: 0.5rem;
}

.progress-bar {
    background-color: var(--primary-color);
    position: relative;
    overflow: visible;
}

.progress-label {
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: flex;

    justify-content: space-between;
}

/* Header Geometric Shapes */
/* Header Geometric Shapes */
.header-geometric {
    margin-top: 55px !important;
    position: relative;
    overflow: hidden;
}

.header-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.shape {
    position: absolute;
    /* Removed border */
}

/* Large Circle Top Left - Gradient Fade */
.shape-1 {
    top: -100px;
    left: -100px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.08), transparent 70%);
}

/* Rotated Square Bottom Right - Gradient Fade */
.shape-2 {
    bottom: -150px;
    right: -100px;
    width: 500px;
    height: 500px;
    transform: rotate(45deg);
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.12), transparent 60%);
}

/* Small Circle Top Right - Radial Accent */
.shape-3 {
    top: 20px;
    right: 10%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(0, 0, 0, 0.15), transparent 80%);
}

/* Shape 4: Centered Medium Circle - Subtle Radial */
.shape-4 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.03) 0%, transparent 70%);
}

/* Shape 5: Thin vertical line - Linear Gradient */
.shape-5 {
    top: 10%;
    left: 10%;
    width: 4px;
    /* Slightly thicker for gradient visibility */
    height: 150px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), transparent);
    transform: rotate(15deg);
}

/* Shape 6: Floating square - Angular Gradient */
.shape-6 {
    bottom: 20px;
    left: 20%;
    width: 60px;
    height: 60px;
    transform: rotate(30deg);
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.15) 0%, transparent 100%);
}

/* Gallery Styles */
.gallery-item-wrapper {
    position: relative;
    overflow: hidden;
    padding-top: 100%;
    /* 1:1 Aspect Ratio (Square) */
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.gallery-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-icon {
    font-size: 2rem;
    color: #fff;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.gallery-item-link:hover .gallery-item-wrapper {
    border-color: var(--primary-color);
}

.gallery-item-link:hover .gallery-img {
    transform: scale(1.1);
}

.gallery-item-link:hover .gallery-overlay {
    opacity: 1;
}

.gallery-item-link:hover .gallery-icon {
    transform: translateY(0);
}

/* FAQ Accordion Styles */
.custom-accordion .accordion-item {
    border: none;
    border-bottom: 1px solid var(--border-color);
    background-color: transparent;
    border-radius: 0;
}

.custom-accordion .accordion-item:last-child {
    border-bottom: none;
}

.custom-accordion .accordion-button {
    background-color: transparent;
    color: var(--primary-color);
    box-shadow: none;
    padding: 1.5rem 0;
    font-weight: 400;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}

.custom-accordion .accordion-button:not(.collapsed) {
    color: var(--primary-color);
    background-color: transparent;
    box-shadow: none;
    font-weight: 500;
}

.custom-accordion .accordion-button::after {
    filter: grayscale(100%);
    /* Make default icon black/grey */
    background-size: 1rem;
    transition: transform 0.3s ease;
}

.custom-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.custom-accordion .accordion-body {
    padding: 0 0 1.5rem 0;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* News Styles */
.news-card {
    transition: all 0.3s ease;
    border-radius: 0;
}

.news-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.news-card .card-img-top {
    height: 250px;
    object-fit: cover;
    border-radius: 0;
}

.grayscale-img {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.news-card:hover .grayscale-img,
.grayscale-img:hover {
    filter: grayscale(0%);
}

.ls-1 {
    letter-spacing: 1px;
}

@media (max-width: 991.98px) {
    .navbar {
        background-color: #ffffff !important;
        /* Force white on mobile */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    }

    .navbar-collapse {
        background-color: #ffffff;
        padding: 1rem;
        margin-top: 0.5rem;
    }

    h1 {
        font-size: 1.8rem !important;
        /* Título menor */
    }
}

.navbar.navbar-expand-lg.fixed-top{
    background-color: rgba(255, 255, 255, 0.5);
}