/* ======================================================
   TABLE OF CONTENTS
======================================================
1.  Font Face Declarations
2.  Root Variables
3.  General Style
    3.1 Headings
    3.2 Paragraphs
    3.3 Links
    3.4 Buttons
    3.5 Image
    3.6 Lists
4.  Utility Classes
    4.1 Color Utilities
    4.2 Background Utilities
    4.3 Sizing Utilities
    4.4 Other Utilities
5.  Navbar Styles
    5.1 Offcanvas
    5.1.1 Offcanvas Social Icon
    5.2 Dropdown
6.  Hero Styles
7.  About Styles
8.  Service Styles
9.  How It Works Styles
10. Why Choose Us Styles
11. Testimonials Styles
12. FAQs Styles
13. Banner Styles
14. Blog Post Styles
15. Core Values Styles
16. Team Styles
17. Contact Styles
18. Maps Styles
19. Services Detail Styles
20. Footer Styles
21. Animation
22. Media Queries
====================================================== */

/* ======================================================
   1. FONT FACE DECLARATIONS
   Define custom fonts used throughout the template.
====================================================== */
@font-face {
    font-family: 'manrope';
    src: url(../font/manrope.ttf) format('truetype');
    font-weight: 200 800;
    font-style: normal;
}

@font-face {
    font-family: 'playfair';
    src: url(../font/playfair.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* ======================================================
   2. ROOT VARIABLES
   Global variables for colors, fonts, and reusable values.
====================================================== */
:root {
    --text-color-1: #646464;
    --text-color-2: #DDDDDD;
    --heading-color: #1F3D2B;
    --heading-color-2: #333333;
    --color-main: #D69F5F;
    --color-darker: #0D2003;
    --color-lighter: #CDBA9A;
    --color-subtle: #F4EFE6;
    --color-border: #9C9C9C;
    --color-accent: #F4F6E4;
    --color-error: #E22D2D;
    --color-warning: #E2D52D;
    --color-info: #2663cf;
    --color-success: #20bd3c;
    --font-1: "manrope";
    --font-2: "playfair";

    /* ======================================================
       Reserva Guarani - Brand Palette
       (extraída del Book Reserva Guarani Compactado Versión Digital)
    ====================================================== */
    /* Primario */
    --rg-forest: #1F3D2B;       /* verde bosque - fachada, títulos */
    --rg-deep-green: #0D2003;   /* verde profundo - fondos oscuros */
    --rg-grass: #3C6D50;        /* verde medio - acentos typográficos / íconos */

    /* Neutro cálido */
    --rg-beige: #CDBA9A;        /* beige - texto sobre oscuro, detalles */
    --rg-paper: #F4EFE6;        /* papel - derivado claro del beige para fondos */

    /* Acento */
    --rg-gold: #D69F5F;         /* dorado - CTA, detalles */

    /* Single font size shared by every CTA */
    --cta-font-size: 16px;
}

/* Prevent horizontal overflow */
html,
body {
    width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

/* ======================================================
   3. GENERAL STYLE
   Base styles for HTML elements.
====================================================== */

/* ------------------------------------------------------
   3.1 HEADINGS
   Typography for all heading levels.
------------------------------------------------------ */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-2);
    font-weight: 400;
    line-height: 1.2;
}

h1 {
    font-size: 80px;
    line-height: 1.1em;
}

h2 {
    font-size: 56px;
}

h3 {
    font-size: 40px;
}

h4 {
    font-size: 32px;
}

h5 {
    font-size: 24px;
}

h6 {
    font-size: 16px;
}

/* ------------------------------------------------------
   3.2 PARAGRAPHS
   Styles for paragraph text.
------------------------------------------------------ */
p {
    font-size: 16px;
    color: var(--text-color-1);
    font-weight: 400;
    font-family: var(--font-1);
    line-height: 1.5em;
}

/* ------------------------------------------------------
   3.3 LINKS
   Anchor tag styles.
------------------------------------------------------ */
a {
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s ease;
    color: var(--heading-color);
    font-family: var(--font-1);
}

/* ------------------------------------------------------
   3.4 BUTTONS
   Button base styles.
------------------------------------------------------ */
button {
    font-family: var(--font-1);
    font-weight: 600;
    font-size: 14px;
}

.btn-1 {
    border: 1px solid white;
    padding: 6px 12px;
    color: white;
    background-color: transparent;
    font-family: var(--font-1);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-1:hover {
    background-color: white;
    color: var(--heading-color)
}

.btn-2 {
    width: fit-content;
    border: 1px solid black;
    padding: 10px 16px;
    color: black;
    background-color: transparent;
    font-family: var(--font-1);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-2:hover {
    border: 1px solid var(--color-main);
    background-color: var(--color-main);
    color: white;
}

.btn-2 {
    width: fit-content;
    border: 1px solid black;
    padding: 10px 16px;
    color: black;
    background-color: transparent;
    font-family: var(--font-1);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-2:hover {
    border: 1px solid var(--color-main);
    background-color: var(--color-main);
    color: white;
}

.btn-3 {
    width: fit-content;
    border: none;
    padding: 10px 16px;
    color: black;
    background-color: var(--color-accent);
    font-family: var(--font-1);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-3:hover {
    background-color: var(--color-main);
    color: white;
}

.btn-4 {
    width: fit-content;
    border: none;
    padding: 10px 16px;
    color: white;
    background-color: black;
    font-family: var(--font-1);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-4:hover {
    background-color: var(--color-main);
}

/* ------------------------------------------------------
   3.5 IMAGE
   Image element styles.
------------------------------------------------------ */
img {
    width: 100%;
    object-fit: cover;
    object-position: center;
}

/* ------------------------------------------------------
   3.6 LISTS
   List element styles.
------------------------------------------------------ */
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul li {
    font-family: var(--font-1) !important;
    font-weight: 400;
    color: var(--heading-color-2);
}

/* 4.1 Color Utilities */
.c-text-1 {
    color: var(--text-color-1);
}

.c-text-2 {
    color: var(--text-color-2);
}

.c-heading {
    color: var(--heading-color) !important;
}

.c-heading-2 {
    color: var(--heading-color-2) !important;
}

.c-main {
    color: var(--color-main);
}

.c-darker {
    color: var(--color-darker);
}

.c-lighter {
    color: var(--color-lighter);
}

.c-subtle {
    color: var(--color-subtle);
}

.c-border {
    color: var(--color-border);
}

.c-error {
    color: var(--color-error);
}

.c-warning {
    color: var(--color-warning);
}

.c-info {
    color: var(--color-info);
}

.c-success {
    color: var(--color-success);
}

.c-accent {
    color: var(--color-accent);
}

.c-white {
    color: white !important;
}

.c-black {
    color: black;
}

/* 4.2 Background Utilities */
.bg-text-1 {
    background-color: var(--text-color-1);
}

.bg-text-2 {
    background-color: var(--text-color-2);
}

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

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

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

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

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

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

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

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

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

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

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

.bg-white {
    background-color: white;
}

.bg-discover {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../img/template/discover-1.jpg);
    background-size: cover;
    background-position: center;
}

.bg-sign-up {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../img/template/sign-up.jpg);
    background-size: cover;
    background-position: center;
    padding: 32px;
}


/* 4.3 Sizing Utilities */
.navbar-size {
    width: 1300px;
}

.page-size {
    width: 1300px;
    padding-top: 100px;
    padding-bottom: 100px;
    margin-left: auto;
    margin-right: auto;
}

.get-started-size {
    width: 1280px;
    padding-top: 100px;
    padding-bottom: 100px;
    margin-left: auto;
    margin-right: auto;
}

/* 4.4 Other Utilities */
.border-radius {
    border-radius: 5px;
}

.slideshow {
    position: relative;
    max-height: 900px;
    min-height: 670px;
    height: 100vh;
    background-image: url('../img/areas-comuns/piscinas-adulto-e-infantil-2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.slideshow-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .slideshow-video {
        display: none;
    }
}

.slideshow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 1;
}

/* ======================================================
   5. NAVBAR STYLES
   Styles for navigation bar and navigation elements.
====================================================== */
.navbar-toggler {
    border: none;
}

.navbar-toggler .custom-toggler-icon {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    box-shadow: none;
    outline: none;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: end;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 9px;
    padding-bottom: 9px;
    color: white !important;
}

.navbar-toggler .bar {
    display: block;
    height: 1px;
    border-radius: 2px;
    width: 100%;
    background-color: rgb(195, 195, 195);
    border: none;
}

.navbar-toggler .bar-1 {
    width: 100%;
}

.navbar-toggler .bar-2 {
    width: 100%;
}

.navbar-toggler .bar-3 {
    width: 100%;
}

.navbar-toggler:focus,
.navbar-toggler:active {
    outline: none;
    box-shadow: none;
}

.nav-logo-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-logo {
    max-width: 180px;
}

.nav-link {
    color: var(--text-color-1);
    font-size: 15px;
    font-family: var(--font-1);
    font-weight: 600;
    box-shadow: none;
}

.custom-toggler {
    border: 1px solid rgba(255, 255, 255, 0.344);
    padding: 4px 14px;
    font-size: 16px !important;
}

.navbar-toggler-icon {
    width: 30px;
    height: 30px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2844, 131, 145, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-toggler-icon:hover {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-border {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* ------------------------------------------------------
   5.1 OFFCANVAS
   Styles for offcanvas navigation menu.
------------------------------------------------------ */
.offcanvas-header .btn-close-custom {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
    background-color: transparent;
    border: 1px solid var(--text-color-2);
    border-radius: 10px;
    font-size: 16px;
    padding: 5px 12px;
    cursor: pointer;
}

.btn-close {
    color: var(--color-main) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a0893f'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    opacity: 1 !important;
}

.btn-close:hover {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");

}

.offcanvas {
    background-color: var(--color-darker) !important;
}

/* ------------------------------------------------------
   5.1.1 OFFCANVAS SOCIAL ICON
   Social icon styles in offcanvas menu.
------------------------------------------------------ */
.social-icon-32 {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.39);
    border-radius: 50%;
    color: var(--color-subtle);
    background-color: transparent;
    font-size: 14px;
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
    cursor: pointer;
}

.social-icon-32:hover {
    color: var(--heading-color);
    background-color: white;
}

/* Dark variant for light surfaces (e.g. the footer). */
.social-icon-32.social-icon-dark {
    border-color: rgba(0, 0, 0, 0.25);
    color: var(--heading-color);
}

.social-icon-32.social-icon-dark:hover {
    background-color: var(--color-darker);
    border-color: var(--color-darker);
    color: white;
}

/* ------------------------------------------------------
   5.2 DROPDOWN
   Dropdown menu styles in navbar.
------------------------------------------------------ */
.nav-item.dropdown .nav-link:hover {
    color: var(--color-main);
    box-shadow: none;
}

.nav-item.dropdown .nav-link:active {
    box-shadow: none;
}

.nav-link {
    color: var(--color-main) !important;
    font-size: 20px;
    font-family: var(--font-1);
    font-weight: 500;
}

.nav-item:hover .nav-link {
    color: white !important;
}

.nav-link.active {
    color: white !important;
    box-shadow: none;
}

.nav-link:focus,
.dropdown-item:focus {
    color: var(--color-main);
    outline: none;
    box-shadow: none !important;
}

.dropdown-toggle {
    box-shadow: none !important;
}

.dropdown-toggle::after {
    display: none;
}

.dropdown-icon-size {
    font-size: 10px;
}

.dropdown-menu {
    padding-left: 0px;
    padding-bottom: 12px;
    padding-right: 0px;
    background-color: var(--color-darker);
    min-width: 210px;
    border: none;
    box-shadow: none;
    border-radius: 5px;
}

.dropdown-menu a {
    padding-top: 10px;
    padding-bottom: 10px;
}

.dropdown-menu:hover a:hover {
    color: #fff;
    background-color: var(--color-main);
}

.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
}

.dropdown-item {
    font-size: 20px;
    color: var(--color-main) !important;
    font-weight: 500 !important;
    border-radius: 5px;
}

.dropdown-item:hover {
    background-color: var(--color-darker) !important;
    color: white !important;
}

/* ======================================================
   6. HERO STYLES
   Styles for hero section and hero forms.
====================================================== */
.ff-playfair {
    font-family: var(--font-2);
    font-weight: 500 !important;
    color: var(--rg-grass);
}

/* Keep the playfair accents readable on dark surfaces: inherit the
   parent's white/light color instead of forcing the brand green. */
/* Hero accents: italic in the primary gold, which reads well on the
   dark video overlay */
.hero-title .ff-playfair {
    font-style: italic;
    color: var(--color-main);
}

.bg-why-choose-us .ff-playfair,
.bg-discover .ff-playfair,
.bg-sign-up .ff-playfair {
    color: inherit;
}

/* Reserve Guarani hero headline: long PT-BR copy, so cap the scale
   and keep it to a maximum of two lines on desktop. */
.hero-title {
    font-size: clamp(36px, 4.5vw, 56px);
    line-height: 1.15;
    max-width: 830px;
}

.hero-subtitle {
    max-width: 400px;
    font-size: 18px;
}

/* Empreendimiento section: centered title with capped width and
   65px bottom space before the intro */
.emprendimiento-title {
    max-width: 890px;
    margin: 0 auto 64px;
    text-align: center;
}

/* Intro gallery: stacked photo cards (Swiper "cards" effect) */
.emp-gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
    padding: 24px 0 0;
}

/* Narrower than the column so the rotated cards behind can peek out */
.swiper-emp-cards {
    width: 84%;
    max-width: 580px;
    overflow: visible;
}

.swiper-emp-cards .swiper-slide {
    display: block;
    aspect-ratio: 6 / 5;
    overflow: hidden;
    border-radius: 24px;
    background-color: var(--rg-paper);
    opacity: 1;
    box-shadow: 0 18px 40px -18px rgba(31, 61, 43, 0.35);
}

.swiper-emp-cards .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
}

.emp-gallery-controls {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 16px;
    width: 84%;
    max-width: 580px;
}

.emp-gallery-caption {
    margin: 0;
    text-align: center;
    font-size: 15px;
    line-height: 1.35;
    color: var(--rg-forest);
}

.emp-gallery-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--rg-grass);
    border-radius: 50%;
    background-color: transparent;
    color: var(--rg-forest);
    font-size: 20px;
    transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s ease;
}

.emp-gallery-btn:hover {
    background-color: var(--rg-grass);
    color: var(--rg-paper);
}

.emp-gallery-btn:active {
    transform: scale(0.96);
}

.emp-gallery-btn:focus-visible {
    outline: 2px solid var(--rg-grass);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .emp-gallery-btn {
        transition: none;
    }
}

@media (max-width: 767.98px) {
    .emp-gallery {
        gap: 28px;
        padding-top: 12px;
    }

    .swiper-emp-cards,
    .emp-gallery-controls {
        width: 88%;
    }

    .swiper-emp-cards .swiper-slide {
        border-radius: 18px;
    }
}

.emp-intro-text {
    max-width: 460px;
}

.emp-lead {
    margin-bottom: 24px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--rg-forest);
}

.emp-text {
    margin-bottom: 16px;
}

.emp-text:last-child {
    margin-bottom: 0;
}

/* Space between the empreendimiento intro and Destaques */
.destaques-row-spacing {
    margin-top: 112px;
}

.destaques-title {
    margin-bottom: 40px;
    font-size: 36px;
}

@media (max-width: 991.98px) {
    .emprendimiento-title {
        margin-bottom: 40px;
    }

    .emp-intro-text {
        max-width: 640px;
    }

    .emp-lead {
        font-size: 21px;
    }

    .destaques-row-spacing {
        margin-top: 72px;
    }

    .destaques-title {
        margin-bottom: 28px;
        font-size: 30px;
    }
}

/* Supporting text under section titles: centered, capped width */
.subtexto {
    max-width: 570px;
    margin: 0 auto;
    text-align: center;
}

.testimonial-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 0 auto;
    border: 2px solid white;
}

.testimonial-circle-2 {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin: 0 auto;
    border: 2px solid white;
}

.testimonial-margin {
    margin-left: -16px;
}

.testimonial-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.666);
    font-family: var(--font-1);
}

.hero-form {
    height: fit-content;
    background-color: transparent;
    font-size: 16px;
    font-family: var(--font-1);
    color: white;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

.hero-form::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.hero-form:focus {
    border: none;
    outline: none;
    color: white;
    border-bottom: 1px solid white;
}

.hero-form-select {
    width: 220px;
    height: fit-content;
    background-color: transparent;
    font-size: 16px;
    font-family: var(--font-1);
    color: white;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    padding: 4px 0;
    cursor: pointer;
}

.hero-form-select:focus {
    outline: none;
    border-bottom: 1px solid white;
}

.hero-form-select option {
    background-color: white;
    color: black;
    font-family: var(--font-1);
    font-size: 16px;
}

.subtitle {
    font-size: 14px;
    color: var(--rg-grass);
    font-family: var(--font-1);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* Section eyebrow: spaced uppercase label flanked by thin lines */
.section-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
    font-family: var(--font-1);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--rg-grass);
}

/* Line ending in a leaf sprig (img/ornamentos/ornament-sprig.svg) that points
   toward the label. Both drawn as mask layers so they take currentColor. */
.section-eyebrow::before,
.section-eyebrow::after {
    --orn-leaf: 44px; /* sprig width; artwork ratio is 2.2:1 */
    content: "";
    flex: 0 0 120px;
    height: 20px;
    background-color: currentColor;
    opacity: 0.65;
    -webkit-mask:
        url(../img/ornamentos/ornament-sprig.svg) right center / var(--orn-leaf) auto no-repeat,
        linear-gradient(#000 0 0) left center / calc(100% - var(--orn-leaf) + 2px) 1px no-repeat;
    mask:
        url(../img/ornamentos/ornament-sprig.svg) right center / var(--orn-leaf) auto no-repeat,
        linear-gradient(#000 0 0) left center / calc(100% - var(--orn-leaf) + 2px) 1px no-repeat;
}

/* Mirror the right side; compensate trailing letter-spacing so both
   ornaments sit at equal distance from the label */
.section-eyebrow::after {
    margin-left: -0.32em;
    transform: scaleX(-1);
}

/* Section title: serif headline, green italic accents */
.section-title {
    font-family: var(--font-2);
    font-weight: 400;
    color: var(--rg-forest);
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.section-title .ff-playfair {
    font-style: italic;
    color: var(--rg-grass);
}

@media (max-width: 767.98px) {
    .section-eyebrow {
        gap: 14px;
        font-size: 12px;
    }

    .section-eyebrow::before,
    .section-eyebrow::after {
        --orn-leaf: 34px;
        flex-basis: 72px;
    }
}

/* ======================================================
   7. ABOUT STYLES
   Styles for about section and cards.
====================================================== */
.about-card {
    background-color: var(--color-darker);
    padding: 24px;
    width: 100%;
}

/* Empreendimento highlights: 17 items rendered as icon boxes with the
   label pinned to the base of each box. */
.amenities-grid {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

/* Destaques: icon in soft green circle, title + optional detail stacked
   from the top so every card reads the same regardless of copy length */
.amenity-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    padding: 28px 24px 30px;
    background-color: #ffffff;
    border: 1px solid rgba(31, 61, 43, 0.08);
    border-radius: 5px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.amenity-box:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--rg-grass) 35%, transparent);
    box-shadow: 0 16px 32px -20px rgba(31, 61, 43, 0.35);
}

.amenity-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 28px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--rg-grass) 14%, #ffffff);
    color: var(--rg-forest);
    font-size: 28px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.amenity-icon i {
    -webkit-text-stroke: 0.6px currentColor;
}

.amenity-box:hover .amenity-icon {
    background-color: var(--rg-grass);
    color: var(--rg-paper);
}

.amenity-title {
    display: block;
    font-family: var(--font-2);
    font-size: 21px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--rg-forest);
}

.amenity-sub {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.4;
    color: color-mix(in srgb, var(--rg-forest) 65%, #ffffff);
}

@media (prefers-reduced-motion: reduce) {
    .amenity-box,
    .amenity-icon {
        transition: none;
    }

    .amenity-box:hover {
        transform: none;
    }
}

@media screen and (max-width: 992px) {
    .amenities-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (max-width: 450px) {
    .amenities-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ======================================================
   8. SERVICE STYLES
   Styles for services section and icons.
====================================================== */
.services-icon {
    width: 35px;
    height: 100%;
}

/* ======================================================
   4.15 PLANTAS E METRAGENS
   Cards for the two floor plans (57 m² / 78 m²).
====================================================== */
.planta-grid {
    margin-top: 48px;
}

.planta-card {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid rgba(31, 61, 43, 0.08);
    border-radius: 5px;
    overflow: hidden;
}

.planta-media {
    position: relative;
}

.planta-media > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1600 / 1131;
    object-fit: cover;
    background-color: var(--rg-forest);
}

/* Opens the technical plan (with measurements and descriptions) */
.planta-detail-btn {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid rgba(244, 239, 230, 0.55);
    border-radius: 999px;
    background-color: rgba(13, 32, 3, 0.55);
    color: var(--rg-paper);
    font-family: var(--font-1);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.planta-detail-btn i {
    font-size: 18px;
    -webkit-text-stroke: 0.6px currentColor;
}

.planta-detail-btn:hover {
    border-color: var(--rg-gold);
    background-color: var(--rg-gold);
    color: var(--rg-deep-green);
}

.planta-detail-btn:focus-visible {
    outline: 2px solid var(--rg-gold);
    outline-offset: 3px;
}

.planta-modal-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100vh - 160px);
    object-fit: contain;
    /* Technical plans are transparent WebP: the brand green shows through */
    background-color: var(--rg-forest);
    /* Zoom: translate + scale from the top-left corner, driven by js/reserva.js */
    transform-origin: 0 0;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
}

.planta-zoom {
    position: relative;
    overflow: hidden;
    background-color: var(--rg-forest);
    cursor: zoom-in;
    /* Pinch and pan are handled in JS */
    touch-action: none;
}

.planta-zoom.is-zoomed {
    cursor: grab;
}

.planta-zoom.is-dragging {
    cursor: grabbing;
}

.planta-zoom.is-animating .planta-modal-img {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.planta-zoom-controls {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
}

.planta-zoom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(244, 239, 230, 0.5);
    border-radius: 50%;
    background-color: transparent;
    color: var(--rg-paper);
    font-size: 19px;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

.planta-zoom-btn:hover:not(:disabled) {
    background-color: var(--rg-grass);
}

.planta-zoom-btn:focus-visible {
    outline: 2px solid var(--rg-gold);
    outline-offset: 2px;
}

.planta-zoom-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.planta-zoom-btn[data-zoom="reset"] {
    margin-left: 4px;
}

.planta-zoom-level {
    min-width: 46px;
    font-size: 13px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--rg-beige);
}

.planta-modal .gal-modal-footer {
    align-items: center;
}

@media (max-width: 575.98px) {
    .planta-modal .gal-modal-footer {
        flex-wrap: wrap;
        padding: 12px 16px 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .planta-zoom.is-animating .planta-modal-img {
        transition: none;
    }
}

/* Body grows to fill the card so both feature lists align at the bottom */
.planta-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 40px 44px 44px;
}

.planta-badge {
    align-self: flex-start;
    display: inline-block;
    padding: 6px 14px;
    background-color: var(--rg-forest);
    border-radius: 5px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.planta-title {
    margin: 24px 0 12px;
    font-family: var(--font-2);
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--rg-forest);
}

.planta-title .ff-playfair {
    font-style: italic;
}

.planta-text {
    max-width: 52ch;
    margin-bottom: 32px;
}

/* Features: 2 columns, separated from the intro by a single hairline */
.planta-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 24px;
    margin: auto 0 0;
    padding: 28px 0 0;
    list-style: none;
    border-top: 1px solid rgba(31, 61, 43, 0.1);
}

.planta-features li {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--rg-forest);
    font-size: 15px;
    line-height: 1.35;
}

/* Icon in soft green circle (reference: plantas features) */
.planta-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--rg-grass) 14%, #ffffff);
    color: var(--rg-forest);
    font-size: 24px;
    transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.planta-icon i {
    -webkit-text-stroke: 0.6px currentColor;
}

.planta-features li:hover .planta-icon {
    background-color: var(--rg-grass);
    color: var(--rg-paper);
    transform: scale(1.05);
}

.planta-cta {
    margin-top: 56px;
}

/* Mobile only (hidden from lg up via d-lg-none): CTA inside each card,
   full width below the feature list */
.planta-card-cta {
    align-self: stretch;
    margin-top: 28px;
}

@media (prefers-reduced-motion: reduce) {
    .planta-icon {
        transition: none;
    }

    .planta-features li:hover .planta-icon {
        transform: none;
    }
}

@media (max-width: 1199.98px) {
    .planta-body {
        padding: 32px;
    }

    .planta-title {
        font-size: 28px;
    }
}

@media (max-width: 767.98px) {
    .planta-grid {
        margin-top: 32px;
    }

    .planta-body {
        padding: 24px 20px 28px;
    }

    .planta-title {
        margin-top: 20px;
        font-size: 24px;
    }

    .planta-features {
        grid-template-columns: 1fr;
        gap: 12px;
        padding-top: 24px;
    }

    .planta-text {
        margin-bottom: 24px;
    }

    .planta-cta {
        margin-top: 40px;
    }
}

/* Diferenciales - bento: 5 cards in a 7+5 / 4+4+4 rhythm.
   Two photo cards (text over a dark scrim), one forest card, two light. */
.diferencial-intro {
    margin-top: 20px;
}

.dif-bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 20px;
    margin-top: 64px;
}

.dif-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    min-height: 340px;
    border-radius: 5px;
}

.dif-card--wide {
    grid-column: span 7;
    min-height: 440px;
}

.dif-card--narrow {
    grid-column: span 5;
    min-height: 440px;
}

.dif-card--third {
    grid-column: span 4;
}

.dif-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 auto;
    padding: 36px 36px 38px;
}

.dif-icon + .dif-title,
.dif-plan-preview + .dif-title {
    margin-top: 28px;
}

/* Plantas card: real floor plan as a preview on the brand green */
.dif-plan-preview {
    width: 100%;
    margin-top: 24px;
    padding: 10px;
    border-radius: 5px;
    background-color: var(--rg-forest);
}

.dif-plan-preview img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2400 / 1697;
    object-fit: cover;
}

/* Icon pinned to the top; auto margin pushes title + text to the bottom */
.dif-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: auto;
    border-radius: 50%;
    font-size: 26px;
}

.dif-icon i {
    -webkit-text-stroke: 0.6px currentColor;
}

.dif-title {
    margin: 0 0 12px;
    font-family: var(--font-2);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.dif-title .ff-playfair {
    font-style: italic;
}

.dif-text {
    max-width: 42ch;
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
}

/* Light cards: white surface */
.dif-card--light {
    background-color: #ffffff;
    border: 1px solid rgba(31, 61, 43, 0.08);
}

.dif-card--light .dif-icon {
    background-color: color-mix(in srgb, var(--rg-grass) 14%, #ffffff);
    color: var(--rg-forest);
}

.dif-card--light .dif-title {
    color: var(--rg-forest);
}

.dif-card--light .dif-title .ff-playfair {
    color: var(--rg-grass);
}

.dif-card--light .dif-text {
    color: var(--heading-color-2);
}

/* Forest card */
.dif-card--forest {
    background-color: var(--rg-forest);
}

/* Photo cards: image fills the card, scrim keeps the text legible */
.dif-card-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.dif-card--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Light veil at the top for the icon, heavier at the bottom for the text */
    background: linear-gradient(180deg, rgba(13, 32, 3, 0.38) 0%, rgba(13, 32, 3, 0) 26%, rgba(13, 32, 3, 0) 38%, rgba(13, 32, 3, 0.55) 64%, rgba(13, 32, 3, 0.88) 100%);
}

/* Narrow photo card (Lazer): text wraps into more lines, so the scrim starts higher and goes darker */
.dif-card--photo.dif-card--third::before {
    background: linear-gradient(180deg, rgba(13, 32, 3, 0.45) 0%, rgba(13, 32, 3, 0.08) 22%, rgba(13, 32, 3, 0.35) 40%, rgba(13, 32, 3, 0.78) 62%, rgba(13, 32, 3, 0.94) 100%);
}

.dif-card--photo:hover .dif-card-bg {
    transform: scale(1.04);
}

/* Shared light-on-dark treatment for photo and forest cards */
.dif-card--photo .dif-icon,
.dif-card--forest .dif-icon {
    background-color: rgba(244, 239, 230, 0.14);
    color: var(--rg-paper);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.dif-card--photo .dif-title,
.dif-card--forest .dif-title {
    color: var(--rg-paper);
}

.dif-card--photo .dif-title .ff-playfair,
.dif-card--forest .dif-title .ff-playfair {
    color: var(--rg-beige);
}

.dif-card--photo .dif-text,
.dif-card--forest .dif-text {
    color: rgba(244, 239, 230, 0.86);
}

@media (prefers-reduced-motion: reduce) {
    .dif-card-bg {
        transition: none;
    }

    .dif-card--photo:hover .dif-card-bg {
        transform: none;
    }
}

@media (max-width: 991.98px) {
    .dif-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        margin-top: 48px;
    }

    .dif-card--wide {
        grid-column: 1 / -1;
        min-height: 380px;
    }

    .dif-card--narrow,
    .dif-card--third {
        grid-column: span 1;
        min-height: 320px;
    }

    /* Last card spans both columns so the grid has no hole */
    .dif-card:last-child {
        grid-column: 1 / -1;
        min-height: 0;
    }

    .dif-card-body {
        padding: 28px;
    }

    .dif-title {
        font-size: 23px;
    }
}

@media (max-width: 767.98px) {
    .dif-bento {
        grid-template-columns: 1fr;
        margin-top: 36px;
    }

    .dif-card--wide,
    .dif-card--narrow,
    .dif-card--third,
    .dif-card:last-child {
        grid-column: auto;
    }

    .dif-card--photo {
        min-height: 360px;
    }

    .dif-card--light,
    .dif-card--forest {
        min-height: 0;
    }

    .dif-card-body {
        padding: 24px 22px 26px;
    }

    .dif-icon {
        width: 46px;
        height: 46px;
        font-size: 23px;
    }

    .dif-title {
        font-size: 22px;
    }
}

.link-1 {
    color: var(--color-darker);
    font-size: 16px;
    font-family: var(--font-1);
    transition: color 0.3s ease;
}

.link-1:hover {
    color: var(--color-main);
}

/* ======================================================
   9. HOW IT WORKS STYLES
   Styles for property listings and related elements.
====================================================== */
.bg-listing-1,
.bg-listing-2,
.bg-listing-3,
.bg-listing-4,
.bg-listing-5,
.bg-listing-6 {
    background-size: cover;
    background-position: center;
    height: 512px;
    position: relative;
    overflow: hidden;
    padding: 32px;
}

.bg-listing-1::after,
.bg-listing-2::after,
.bg-listing-3::after,
.bg-listing-4::after,
.bg-listing-5::after,
.bg-listing-6::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
    pointer-events: none;
    z-index: 1;
}

.bg-listing-1 {
    background-image: url('../img/template/listing-1.jpg');
}

.bg-listing-2 {
    background-image: url('../img/template/listing-2.jpg');
}

.bg-listing-3 {
    background-image: url('../img/template/listing-3.jpg');
}

.bg-listing-4 {
    background-image: url('../img/template/listing-4.jpg');
}

.bg-listing-5 {
    background-image: url('../img/template/listing-5.jpg');
}

.bg-listing-6 {
    background-image: url('../img/template/listing-6.jpg');
}

.detail-img {
    width: 100%;
    height: 512px;
    object-fit: cover;
}

.text-listing {
    font-size: 13px;
    color: white;
    font-family: var(--font-1);
    font-weight: 500;
}

.text-detail {
    font-size: 13px;
    color: var(--color-main);
    font-family: var(--font-1);
    font-weight: 500;
}

/* ======================================================
   10. WHY CHOOSE US STYLES
   Styles for Why Choose Us section.
====================================================== */
.bg-why-choose-us {
    height: max-content;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../img/template/why-choose-us-1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.head-why-choose-us {
    font-size: 19px;
    color: var(--text-color-2);
    font-family: var(--font-1);
    font-weight: 500;
}

.gallery-img {
    display: inline-block;
    border-radius: 8px;
    object-fit: cover;
    cursor: pointer;
}

/* ======================================================
   11. TESTIMONIALS STYLES
   Styles for testimonials section and cards.
====================================================== */
.testimonial-card {
    background-color: var(--color-accent);
    padding: 30px;
}

.testimonial-job {
    font-size: 13px;
    color: var(--color-border);
}

/* ======================================================
   12. FAQS Style
   Styles for faqs section and cards.
====================================================== */
.accordion,
.accordion-button,
.accordion-item,
.accordion-header,
.accordion-body {
    border: none !important;
    box-shadow: none !important;
}

.accordion-button {
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.6px;
    color: var(--text-color-1);
    background-color: var(--color-subtle);
    border-bottom: 1px solid var(--color-border) !important;
}

.accordion-subtle {
    background-color: var(--color-subtle) !important;
}

.accordion-button:focus {
    box-shadow: none !important;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("../icon/left.svg");
    background-size: auto;
    background-position: center;
}

.accordion-button.collapsed::after {
    background-image: url("../icon/left.svg");
    transform: rotate(270deg);
    background-size: auto;
    background-position: center;
}

.accordion-button:not(.collapsed) {
    background-color: var(--color-subtle) !important;
}

.accordion-button:hover {
    background-color: var(--color-subtle) !important;
}

.accordion-button:active {
    background-color: transparent !important;
}

.accordion-body {
    background-color: var(--color-subtle) !important;
}

.accordion-item {
    margin-bottom: 10px;
}

.accordion-item {
    border: none;
    border-radius: 0px !important;
}

.accordion-header,
.accordion-body,
.accordion-button {
    border-radius: 0px !important;
}

/* ======================================================
   13. BANNER STYLES
   Styles for banners and banner backgrounds.
====================================================== */
.bg-banner {
    position: relative;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/template/banner-1.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-banner-2 {
    position: relative;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/template/banner-2.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-banner-3 {
    position: relative;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/template/banner-3.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-banner-4 {
    position: relative;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/template/banner-4.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-banner-5 {
    position: relative;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/template/banner-5.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-banner-6 {
    position: relative;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/template/banner-6.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-404 {
    position: relative;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/template/404.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
}

.banner {
    height: 442px;
}

.text-404 {
    font-size: 200px;
    color: white;
    text-align: center;
}

.banner-subtitle {
    color: white;
    font-family: var(--font-1);
    opacity: 0.8;
}

.banner-subtitle:hover {
    opacity: 1;
}

/* ======================================================
   14. BLOG POST STYLES
   Styles for blog post cards and links.
====================================================== */
.blog-link {
    color: var(--color-main);
    font-size: 15px;
    font-family: var(--font-1);
}

.blog-img-wrapper {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.blog-img-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s ease;
    opacity: 0;
    z-index: 10;
}

.blog-img {
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
}

.blog-img-2 {
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.blog-img-wrapper:hover .blog-img,
.blog-col-1:hover .blog-img,
.blog-col-2:hover .blog-img,
.blog-col-3:hover .blog-img,
.blog-col-4:hover .blog-img,
.blog-col-5:hover .blog-img,
.blog-col-6:hover .blog-img,
.blog-col-7:hover .blog-img,
.blog-col-8:hover .blog-img {
    transform: scale(1.05) rotate(2deg);
}

.blog-img-wrapper:hover::before {
    opacity: 1;
}

.blog-meta {
    color: var(--text-color-2);
    font-size: 16px;
}

.blog-card {
    background-color: var(--color-darker);
    padding: 24px;
}

/* ======================================================
   15. CORE VALUES STYLES
   Styles for core values section and cards.
====================================================== */
.accent-card {
    background-color: var(--color-accent);
    padding: 24px;
}

/* ======================================================
   16. TEAM STYLES
   Styles for team section and team cards.
====================================================== */
.team-card {
    background-color: var(--color-accent);
}

.team-img {
    height: 455px;
    border-radius: var(--border-radius-sm);
    display: block;
    transition: transform var(--transition-normal);
    object-fit: cover;
}

.img-team-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-sm);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.img-team-wrapper .img-team-overlay {
    position: absolute;
    top: 3%;
    left: 5%;
    width: 90%;
    height: 94%;
    background-color: rgba(46, 47, 48, 0.5);
    opacity: 0;
    transition: opacity var(--transition-normal, 0.4s cubic-bezier(0.4, 0, 0.2, 1));
    z-index: 10;
}

.img-team-wrapper .social-team {
    position: absolute;
    bottom: 40%;
    left: 50%;
    transform: translateX(-50%);
    font-weight: bold;
    opacity: 0;
    transition: opacity var(--transition-normal, 0.4s cubic-bezier(0.4, 0, 0.2, 1)), transform var(--transition-normal, 0.4s cubic-bezier(0.4, 0, 0.2, 1));
    z-index: 11;
}

.img-team-wrapper:hover .img-team-overlay {
    opacity: 1;
}

.img-team-wrapper:hover .social-team {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.icon-social-team {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border: 1px solid white;
    border-radius: 50%;
    color: white;
    background-color: transparent;
    font-size: 24px;
    transition: all var(--transition-normal);
    cursor: pointer;
}

.icon-social-team:hover {
    color: var(--color-main);
    background-color: white;
    border: none;
}

/* ======================================================
   17. CONTACT STYLES
   Styles for contact forms and input fields.
====================================================== */
.comment-form {
    background-color: var(--color-accent);
    padding: 48px;
}

.contact-input {
    background: transparent;
    color: black;
    border: none;
    outline: none;
    font-size: 14px;
    font-family: var(--font-1);
    letter-spacing: 0.6px;
    padding: 12px;
    border-bottom: 1px solid var(--color-border);
    width: 100%;
}

.contact-input::placeholder {
    color: var(--text-color-1);
}

.contact-input:focus {
    outline: none;
}

.contact-input:hover {
    outline: none;
}

/* ======================================================
   18. MAPS STYLES
   Styles for embedded maps and overlays.
====================================================== */
.maps-wrapper {
    position: relative;
    width: 100%;
    height: 388px;
    overflow: hidden;
}

.maps-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 10;
    transition: background-color 0.3s ease;
}

.maps-overlay:hover {
    background-color: transparent;
}

.maps {
    position: relative;
    width: 100%;
    height: 100%;
    border: none;
    z-index: 1;
    pointer-events: auto;
}

/* ======================================================
   19. SERVICES DETAIL STYLES
   Styles for service detail cards and backgrounds.
====================================================== */
.service-detail-card-1 {
    background-color: var(--color-darker);
    padding: 24px;
}

.service-detail-card-2 {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/template/service-detail-card.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 24px;
}

.pricing-card {
    background-color: var(--color-darker);
    padding: 64px 32px;
}

.icon-post-terms {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-main);
    border-radius: 50%;
    color: var(--color-main);
    background-color: transparent;
    font-size: 16px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.icon-post-terms:hover {
    color: var(--color-subtle);
    background-color: var(--color-main);
    border: 1px solid var(--color-main);
}

/* ======================================================
   20. FOOTER STYLES
   Styles for footer sections, newsletter, and footer links.
====================================================== */
.newsletter-container {
    border-bottom: var(--color-accent) 1px solid;
    width: 75%;
}

.newsletter-container:hover {
    border-bottom: white 1px solid;
}

.newsletter-form {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    border-radius: 5px;
    overflow: hidden;
}

.btn-newsletter {
    background: transparent;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-newsletter i {
    background-color: transparent;
    color: #c9c9c9;
}

.btn-newsletter:hover i {
    color: white;
}

.email-input {
    flex: 1;
    background-color: transparent;
    color: white;
    border: none;
    outline: none;
}

.email-input::placeholder {
    color: white;
    opacity: 0.8;
}

.email-input:focus {
    outline: none;
}

.footer-logo {
    max-width: 240px;
    /* The Reserva Guarani mark is white (built for dark backgrounds).
       Invert it for the light footer while keeping the gold accent hue. */
    filter: invert(1) hue-rotate(180deg);
}

.footer-link {
    color: var(--text-color-1);
}

.footer-link:hover {
    color: var(--color-darker);
}

.footer-links {
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin-top: 24px;
}

.footer-links li {
    margin: 12px 0;
}

/* ======================================================
   21. ANIMATION
   Animation keyframes and animation utility classes.
====================================================== */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(120px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-120px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-120px);
    }

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

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(120px);
    }

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

.fade-in-up,
.fade-in-down,
.fade-in-left,
.fade-in-right {
    opacity: 0;
    transform: translate(0, 0);
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
}

.fade-in-up {
    animation-name: fadeInUp;
}

.fade-in-down {
    animation-name: fadeInDown;
}

.fade-in-left {
    animation-name: fadeInLeft;
}

.fade-in-right {
    animation-name: fadeInRight;
}

.delay-1 {
    animation-delay: 0.1s;
}

.delay-2 {
    animation-delay: 0.2s;
}

.delay-3 {
    animation-delay: 0.3s;
}

.delay-4 {
    animation-delay: 0.4s;
}

.fade-in-up,
.fade-in-down,
.fade-in-left,
.fade-in-right {
    animation-fill-mode: both;
}

.popup-message {
    display: none;
    background-color: var(--color-border);
    color: white;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    width: 100%;
    max-width: 400px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    margin-left: 0;
    margin-right: 0;
}

.popup-message-2 {
    display: none;
    background-color: var(--color-border);
    color: var(--heading-color);
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}

/* ======================================================
   22. MEDIA QUERIES
   Responsive styles for different screen sizes.
====================================================== */
@media screen and (max-width: 992px) {

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        line-height: 1.1em;
    }

    h1 {
        font-size: 60px;
    }

    h2 {
        font-size: 40px;
    }

    h3 {
        font-size: 28px;
    }

    h4 {
        font-size: 24px;
    }

    h5 {
        font-size: 22px;
    }

    h6 {
        font-size: 16px;
    }

    .page-size {
        width: 100%;
        padding: 50px 32px;
    }

    .navbar-size {
        width: 100%;
        padding-left: 32px;
        padding-right: 32px;
    }

    .nav-link {
        font-size: 15px;
    }

    .dropdown-menu {
        border: none;
        background-color: var(--color-darker);
    }

    .dropdown-item {
        font-size: 14px;
        color: var(--color-main) !important;
    }

    .dropdown-item:hover {
        color: white !important;
    }

    .search-form {
        width: 500px;
    }

    .banner {
        height: 260px;
    }

    .pricing-card {
        padding: 48px 24px;
    }
}

@media screen and (max-width: 450px) {
    h1 {
        font-size: 40px;
    }

    h2 {
        font-size: 32px;
    }

    h3 {
        font-size: 24px;
    }

    h4 {
        font-size: 22px;
    }

    h5 {
        font-size: 18px;
    }

    h6 {
        font-size: 16px;
        font-weight: 500;
    }

    .page-size {
        padding: 50px 20px;
    }

    .navbar-size {
        padding-left: 20px;
        padding-right: 20px;
    }

    .nav-logo {
        width: 100%;
        max-height: 20px;
    }

    .search-form {
        width: 100%;
    }

    .bg-sign-up {
        padding: 16px;
    }

    .banner {
        height: 220px;
    }

    .pricing-card {
        padding: 24px 16px;
    }
}
/* ======================================================
   LOCALIZAÇÃO
   Split: address + proximity list on the left, Google Maps embed on the right.
====================================================== */
.loc-layout {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 56px;
    align-items: stretch;
    margin-top: 56px;
}

.loc-address {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    font-family: var(--font-2);
    font-size: 22px;
    line-height: 1.3;
    color: var(--rg-forest);
}

.loc-address-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: var(--rg-forest);
    color: var(--rg-paper);
    font-size: 26px;
}

.loc-text {
    max-width: 52ch;
    margin-bottom: 28px;
}

.loc-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.loc-item {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--rg-forest) 8%, transparent);
    border-radius: 5px;
    background-color: color-mix(in srgb, #ffffff 60%, transparent);
    color: var(--rg-forest);
    text-align: left;
    font: inherit;
    transition: background-color 0.3s ease;
}

button.loc-item {
    cursor: pointer;
}

button.loc-item:hover,
.loc-item.is-active {
    border-color: color-mix(in srgb, var(--rg-grass) 35%, transparent);
    background-color: #ffffff;
}

.loc-item:focus-visible {
    outline: 2px solid var(--rg-grass);
    outline-offset: 2px;
}

.loc-item-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--rg-grass) 14%, #ffffff);
    font-size: 22px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.loc-item-icon i {
    -webkit-text-stroke: 0.6px currentColor;
}

.loc-item.is-active .loc-item-icon {
    background-color: var(--rg-grass);
    color: var(--rg-paper);
}

.loc-item-body {
    display: flex;
    flex: 1 1 auto;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    flex-wrap: wrap;
    min-width: 0;
}

.loc-item-name {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
}

.loc-item-meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 14px;
    color: color-mix(in srgb, var(--rg-forest) 70%, #ffffff);
}

.loc-dist {
    font-family: var(--font-2);
    font-size: 18px;
    color: var(--rg-grass);
    white-space: nowrap;
}

.loc-time {
    white-space: nowrap;
}

.loc-desc {
    line-height: 1.4;
}

.loc-note {
    margin: 16px 0 0 14px;
    font-size: 13px;
    color: color-mix(in srgb, var(--rg-forest) 60%, #ffffff);
}

/* Map: embed on top, actions bar below (nothing covers Google's UI).
   Desktop puts it in the left column; mobile keeps the text first. */
.loc-map-wrap {
    order: -1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 560px;
}

.loc-map {
    flex: 1 1 auto;
    width: 100%;
    min-height: 480px;
    border: 0;
    border-radius: 5px;
    background-color: var(--rg-paper);
    box-shadow: 0 24px 48px -28px rgba(31, 61, 43, 0.4);
}

.loc-map-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.loc-map-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    background-color: var(--rg-forest);
    color: var(--rg-paper);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.loc-map-link:hover {
    background-color: var(--rg-grass);
    color: var(--rg-paper);
}

.loc-map-link:active {
    transform: scale(0.98);
}

/* Back-to-home button (shown after picking a place) */
.loc-map-reset {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
    padding: 10px 16px;
    border: 1px solid var(--rg-grass);
    border-radius: 999px;
    background-color: transparent;
    color: var(--rg-forest);
    font-family: var(--font-1);
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.loc-map-reset[hidden] {
    display: none;
}

.loc-map-reset i {
    font-size: 18px;
    -webkit-text-stroke: 0.6px currentColor;
}

.loc-map-reset:hover {
    background-color: var(--rg-forest);
    color: var(--rg-paper);
}

.loc-map-reset:focus-visible {
    outline: 2px solid var(--rg-grass);
    outline-offset: 3px;
}

/* Decorative leaves for this section */
.leaves-localizacao::before {
    --leaf-img: url(../img/ornamentos/Leaf_40.svg);
    --leaf-size: 420px;
    top: -40px;
    left: -150px;
    transform: rotate(-12deg);
}

.leaves-localizacao::after {
    --leaf-img: url(../img/ornamentos/Leaf_37.svg);
    --leaf-size: 340px;
    bottom: -60px;
    right: -110px;
    transform: rotate(18deg);
}

.leaves-localizacao {
    --leaf-color: var(--rg-forest);
    --leaf-opacity: 0.07;
}

@media (prefers-reduced-motion: reduce) {
    .loc-item,
    .loc-item-icon,
    .loc-map-link {
        transition: none;
    }
}

@media (max-width: 991.98px) {
    .loc-layout {
        grid-template-columns: 1fr;
        gap: 36px;
        margin-top: 40px;
    }

    .loc-map-wrap {
        order: 0;
        min-height: 0;
    }

    .loc-map {
        min-height: 400px;
    }
}

@media (max-width: 767.98px) {
    .loc-address {
        font-size: 19px;
    }

    .loc-address-icon {
        width: 46px;
        height: 46px;
        font-size: 23px;
    }

    .loc-item {
        padding: 10px 8px;
        gap: 12px;
    }

    .loc-map {
        min-height: 340px;
    }

    .loc-note {
        margin-left: 8px;
    }
}

/* ======================================================
   BUTTONS (brand)
   Solid forest + outlined variants, pill shape for all CTAs.
====================================================== */
.btn-rg,
.btn-outline-rg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border: 1px solid var(--rg-forest);
    border-radius: 999px;
    font-family: var(--font-1);
    font-size: var(--cta-font-size);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

.btn-rg {
    background-color: var(--rg-forest);
    color: var(--rg-paper);
}

.btn-rg:hover {
    border-color: var(--rg-grass);
    background-color: var(--rg-grass);
    color: var(--rg-paper);
}

.btn-outline-rg {
    background-color: transparent;
    color: var(--rg-forest);
}

.btn-outline-rg:hover {
    background-color: var(--rg-forest);
    color: var(--rg-paper);
}

.btn-rg:active,
.btn-outline-rg:active {
    transform: scale(0.98);
}

.btn-rg:focus-visible,
.btn-outline-rg:focus-visible {
    outline: 2px solid var(--rg-grass);
    outline-offset: 3px;
}

.btn-rg:disabled {
    opacity: 0.7;
    cursor: progress;
}

.btn-rg--light {
    border-color: var(--rg-paper);
    background-color: var(--rg-paper);
    color: var(--rg-forest);
}

.btn-rg--light:hover {
    border-color: var(--rg-beige);
    background-color: var(--rg-beige);
    color: var(--rg-deep-green);
}

/* Primary conversion CTA: brand gold stands out on both the dark hero
   and the light sections */
.btn-rg--gold {
    border-color: var(--rg-gold);
    background-color: var(--rg-gold);
    color: var(--rg-deep-green);
    box-shadow: 0 18px 36px -16px rgba(214, 159, 95, 0.75);
}

.btn-rg--gold:hover {
    border-color: #E4B47B;
    background-color: #E4B47B;
    color: var(--rg-deep-green);
    transform: translateY(-2px);
    box-shadow: 0 22px 40px -16px rgba(214, 159, 95, 0.9);
}

.btn-rg--gold i {
    font-size: 20px;
    -webkit-text-stroke: 1px currentColor;
    transition: transform 0.3s ease;
}

.btn-rg--gold:hover i {
    transform: translateX(4px);
}

.btn-rg--lg {
    padding: 18px 34px;
    font-weight: 700;
}

/* CTA pulse: grows slightly and returns. Uses the `scale` property
   (not `transform`) so it composes with the hover lift and the
   fade-in-up entrance instead of overriding them. */
@keyframes ctaPulse {
    0%, 100% {
        scale: 1;
    }
    50% {
        scale: 1.05;
    }
}

.btn-rg,
.btn-outline-rg {
    animation: ctaPulse 2.4s ease-in-out infinite;
}

/* Keep the entrance animation and start pulsing once it ends */
.btn-rg.fade-in-up {
    animation: fadeInUp 1s ease-in-out both, ctaPulse 2.4s ease-in-out 1s infinite;
}

.btn-rg:disabled {
    animation: none;
}

/* Offcanvas menu CTA */
.nav-item-cta {
    margin-top: 12px;
}

.nav-cta {
    display: inline-flex;
    padding: 12px 24px;
    border-radius: 999px;
    background-color: var(--rg-gold);
    color: var(--rg-deep-green);
    font-family: var(--font-1);
    font-size: var(--cta-font-size);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.nav-cta:hover {
    background-color: var(--rg-paper);
    color: var(--rg-deep-green);
}

/* Left-aligned eyebrow variant (lines only on the right) */
.section-eyebrow--start {
    justify-content: flex-start;
}

.section-eyebrow--start::before {
    display: none;
}

/* ======================================================
   CONDIÇÕES COMERCIAIS
====================================================== */
.cond-intro {
    margin-top: 20px;
}

.cond-prices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 960px;
    margin: 56px auto 0;
}

.cond-price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 44px;
    border-radius: 5px;
    background-color: var(--rg-forest);
    color: var(--rg-paper);
}

.cond-price-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--rg-beige);
}

.cond-price-from {
    margin-top: 28px;
    font-size: 14px;
    color: rgba(244, 239, 230, 0.75);
}

.cond-price-value {
    margin-top: 4px;
    font-family: var(--font-2);
    font-size: 52px;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.cond-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    max-width: 960px;
    margin: 44px auto 0;
    padding: 0;
    list-style: none;
}

.cond-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--rg-forest);
    font-size: 15px;
    line-height: 1.4;
}

.cond-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--rg-grass) 14%, #ffffff);
    font-size: 24px;
}

.cond-icon i,
.gal-nav i,
.gal-modal-close i {
    -webkit-text-stroke: 0.6px currentColor;
}

.cond-legal {
    max-width: 640px;
    margin: 44px auto 0;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    color: color-mix(in srgb, var(--rg-forest) 60%, #ffffff);
}

/* ======================================================
   DECORADO E GALERIA
====================================================== */
.gal-intro {
    margin-top: 20px;
}

/* Toolbar above the mosaic: segmented category switch + "see all" */
.gal-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 40px;
}

.gal-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid color-mix(in srgb, var(--rg-forest) 18%, transparent);
    border-radius: 999px;
    background-color: #ffffff;
}

.gal-tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: 999px;
    background-color: transparent;
    color: var(--rg-forest);
    font-family: var(--font-1);
    font-size: 15px;
    font-weight: 500;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.gal-tab:hover {
    background-color: color-mix(in srgb, var(--rg-grass) 10%, #ffffff);
}

.gal-tab.is-active {
    border-color: var(--rg-forest);
    background-color: var(--rg-forest);
    color: var(--rg-paper);
}

.gal-tab:focus-visible {
    outline: 2px solid var(--rg-grass);
    outline-offset: 3px;
}

.gal-count {
    font-size: 13px;
    opacity: 0.7;
}

.gal-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    border: 0;
    background: none;
    color: var(--rg-forest);
    font-family: var(--font-1);
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--rg-forest) 35%, transparent);
    text-underline-offset: 6px;
    transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

.gal-more i {
    font-size: 20px;
    -webkit-text-stroke: 0.6px currentColor;
}

.gal-more:hover {
    color: var(--rg-grass);
    text-decoration-color: currentColor;
}

.gal-more:focus-visible {
    outline: 2px solid var(--rg-grass);
    outline-offset: 3px;
    border-radius: 3px;
}

/* Mosaic: first photo 2x2 + 4 photos = two full rows (no empty cell);
   the full set opens in the lightbox */
.gal-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 200px;
    gap: 12px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

.gal-item:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

.gal-item:nth-child(n + 6) {
    display: none;
}

.gal-thumb {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 5px;
    background-color: color-mix(in srgb, var(--rg-grass) 12%, #ffffff);
    cursor: zoom-in;
}

.gal-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.gal-thumb:hover img {
    transform: scale(1.04);
}

.gal-thumb:focus-visible {
    outline: 2px solid var(--rg-grass);
    outline-offset: 3px;
}

.gal-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 48px;
}

/* Lightbox */
.gal-modal .modal-content {
    position: relative;
    border: 0;
    border-radius: 5px;
    background-color: var(--rg-deep-green);
    overflow: hidden;
}

.gal-swiper {
    width: 100%;
}

.gal-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    aspect-ratio: 16 / 10;
    background-color: var(--rg-deep-green);
}

.gal-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.gal-nav,
.gal-modal-close {
    position: absolute;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(244, 239, 230, 0.5);
    border-radius: 50%;
    background-color: rgba(13, 32, 3, 0.45);
    color: var(--rg-paper);
    font-size: 20px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background-color 0.3s ease;
}

.gal-nav:hover,
.gal-modal-close:hover {
    background-color: var(--rg-grass);
}

.gal-nav {
    top: 50%;
    transform: translateY(-50%);
}

.gal-nav-prev {
    left: 16px;
}

.gal-nav-next {
    right: 16px;
}

.gal-nav.swiper-button-disabled {
    opacity: 0.3;
    pointer-events: none;
}

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

.gal-modal-footer {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px 18px;
    color: var(--rg-paper);
}

.gal-modal-caption {
    margin: 0;
    font-size: 15px;
    color: var(--rg-paper);
}

.gal-modal-count {
    font-size: 13px;
    color: rgba(244, 239, 230, 0.7);
    white-space: nowrap;
}

/* ======================================================
   FORMULÁRIO
====================================================== */
.form-layout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: start;
}

.form-title {
    margin-top: 4px;
    font-size: 44px;
}

.form-sub {
    max-width: 44ch;
    margin: 20px 0 0;
}

.form-photo {
    margin: 36px 0 0;
    overflow: hidden;
    border-radius: 5px;
}

.form-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.lead-form {
    display: grid;
    gap: 22px;
    padding: 44px;
    border: 1px solid rgba(31, 61, 43, 0.08);
    border-radius: 5px;
    background-color: #ffffff;
    box-shadow: 0 24px 48px -32px rgba(31, 61, 43, 0.35);
}

.form-row-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.form-field {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.form-field label,
.form-field legend {
    margin: 0;
    padding: 0;
    float: none;
    width: auto;
    font-family: var(--font-1);
    font-size: 14px;
    font-weight: 600;
    color: var(--rg-forest);
}

.form-field legend {
    margin-bottom: 8px;
}

.form-field input[type="text"],
.form-field input[type="tel"],
.form-field input[type="email"] {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border: 1px solid color-mix(in srgb, var(--rg-forest) 25%, #ffffff);
    border-radius: 5px;
    background-color: #ffffff;
    color: var(--rg-forest);
    font-family: var(--font-1);
    font-size: 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-field input::placeholder {
    color: color-mix(in srgb, var(--rg-forest) 50%, #ffffff);
}

.form-field input:focus {
    outline: none;
    border-color: var(--rg-grass);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rg-grass) 22%, transparent);
}

.form-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.form-choices--stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-choice {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.form-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.form-choice span {
    display: inline-flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid color-mix(in srgb, var(--rg-forest) 25%, #ffffff);
    border-radius: 999px;
    color: var(--rg-forest);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.form-choices--stack .form-choice span {
    border-radius: 5px;
}

.form-choice:hover span {
    border-color: var(--rg-grass);
}

.form-choice input:checked + span {
    border-color: var(--rg-forest);
    background-color: var(--rg-forest);
    color: var(--rg-paper);
}

.form-choice input:focus-visible + span {
    outline: 2px solid var(--rg-grass);
    outline-offset: 2px;
}

.form-error {
    display: none;
    margin: 0;
    font-size: 13px;
    color: #b3261e;
}

.form-field.is-invalid .form-error {
    display: block;
}

.form-field.is-invalid input[type="text"],
.form-field.is-invalid input[type="tel"],
.form-field.is-invalid input[type="email"],
.form-field.is-invalid .form-choice span {
    border-color: #b3261e;
}

.form-consent {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: color-mix(in srgb, var(--rg-forest) 70%, #ffffff);
}

.form-submit {
    justify-self: start;
    min-width: 200px;
}

.form-status {
    display: none;
    padding: 12px 16px;
    border-radius: 5px;
    font-size: 14px;
}

.form-status.is-success {
    display: block;
    background-color: color-mix(in srgb, var(--rg-grass) 14%, #ffffff);
    color: var(--rg-forest);
}

.form-status.is-error {
    display: block;
    background-color: #fbeaea;
    color: #8c1d18;
}

/* ======================================================
   ENCERRAMENTO
====================================================== */
.closing {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--rg-deep-green);
}

.closing-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.closing::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Darker overall, with an extra centered pool behind the headline and text */
    background:
        radial-gradient(ellipse 60% 55% at 50% 50%, rgba(13, 32, 3, 0.45) 0%, rgba(13, 32, 3, 0) 100%),
        linear-gradient(180deg, rgba(13, 32, 3, 0.72) 0%, rgba(13, 32, 3, 0.9) 100%);
}

.closing-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 140px;
    padding-bottom: 140px;
    text-align: center;
}

.closing-title {
    max-width: 820px;
    color: var(--rg-paper);
}

.closing-title .ff-playfair {
    color: var(--rg-beige);
}

.closing-text {
    max-width: 56ch;
    margin: 20px 0 36px;
    color: rgba(244, 239, 230, 0.88);
    font-size: 17px;
    line-height: 1.6;
}

/* ======================================================
   FOOTER
====================================================== */
.site-footer {
    background-color: var(--rg-deep-green);
    color: rgba(244, 239, 230, 0.8);
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    padding-top: 72px;
    padding-bottom: 48px;
}

/* Logo artwork is dark green: render it in paper tone on the dark footer */
.site-footer .footer-logo {
    max-width: 180px;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.footer-address {
    display: flex;
    gap: 10px;
    margin: 24px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(244, 239, 230, 0.8);
}

.footer-address i {
    margin-top: 3px;
    font-size: 20px;
    color: var(--rg-beige);
}

.footer-title {
    margin: 0 0 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rg-beige);
}

.footer-contact ul {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-contact li {
    display: flex;
    gap: 10px;
    font-size: 15px;
    line-height: 1.5;
}

.footer-contact i {
    margin-top: 2px;
    font-size: 20px;
    color: var(--rg-beige);
}

.footer-contact a {
    color: rgba(244, 239, 230, 0.85);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-contact a:hover {
    color: var(--rg-beige);
}

.footer-nav {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 12px 48px;
}

.footer-nav a {
    color: rgba(244, 239, 230, 0.85);
    font-size: 15px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-nav a:hover {
    color: var(--rg-beige);
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 32px;
    padding-top: 24px;
    /* Room for the fixed WhatsApp button at the very end of the page */
    padding-bottom: 104px;
    border-top: 1px solid rgba(244, 239, 230, 0.12);
}

.footer-bottom p {
    margin: 0;
    max-width: 70ch;
    font-size: 13px;
    color: rgba(244, 239, 230, 0.6);
}

/* ======================================================
   WHATSAPP FLUTUANTE
====================================================== */
.wa-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    /* Below Bootstrap's offcanvas/modal backdrops (1040+) */
    z-index: 1030;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 22px 0 16px;
    border-radius: 999px;
    background-color: #1f9d55;
    color: #ffffff;
    font-family: var(--font-1);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 14px 28px -12px rgba(13, 32, 3, 0.55);
    transition: transform 0.2s ease, background-color 0.3s ease;
}

.wa-float i {
    font-size: 26px;
}

.wa-float-label--short {
    display: none;
}

.wa-float:hover {
    background-color: #178a48;
    color: #ffffff;
    transform: translateY(-2px);
}

.wa-float:focus-visible {
    outline: 3px solid var(--rg-beige);
    outline-offset: 3px;
}

/* Pulse ring to draw attention */
.wa-float::before,
.wa-float::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: #1f9d55;
    animation: waPulse 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
    pointer-events: none;
}

.wa-float::after {
    animation-delay: 1.2s;
}

@keyframes waPulse {
    0% {
        opacity: 0.55;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.35, 1.6);
    }
}

/* Decorative leaves for the new light sections */
.leaves-condicoes::before {
    --leaf-img: url(../img/ornamentos/Leaf_44.svg);
    --leaf-size: 380px;
    top: -40px;
    right: -130px;
    transform: rotate(16deg);
}

.leaves-condicoes::after {
    --leaf-img: url(../img/ornamentos/Leaf_29.svg);
    --leaf-size: 300px;
    bottom: -50px;
    left: -100px;
    transform: rotate(-22deg);
}

.leaves-decorado {
    --leaf-color: var(--rg-forest);
    --leaf-opacity: 0.07;
}

.leaves-decorado::before {
    --leaf-img: url(../img/ornamentos/Leaf_17.svg);
    --leaf-size: 380px;
    top: -60px;
    left: -140px;
    transform: rotate(-18deg);
}

.leaves-decorado::after {
    --leaf-img: url(../img/ornamentos/Leaf_9.svg);
    --leaf-size: 320px;
    bottom: -40px;
    right: -110px;
    transform: rotate(20deg);
}

.leaves-formulario::before {
    --leaf-img: url(../img/ornamentos/Leaf_39.svg);
    --leaf-size: 400px;
    top: -60px;
    right: -150px;
    transform: rotate(10deg);
}

.leaves-formulario::after {
    --leaf-img: url(../img/ornamentos/Leaf_26.svg);
    --leaf-size: 320px;
    bottom: -60px;
    left: -120px;
    transform: rotate(-16deg);
}

@media (prefers-reduced-motion: reduce) {
    .btn-rg,
    .btn-outline-rg,
    .gal-thumb img,
    .wa-float {
        transition: none;
    }

    .gal-thumb:hover img,
    .wa-float:hover {
        transform: none;
    }

    .wa-float::before,
    .wa-float::after {
        animation: none;
        opacity: 0;
    }

    .btn-rg--gold:hover,
    .btn-rg--gold:hover i {
        transform: none;
    }

    .btn-rg,
    .btn-outline-rg,
    .btn-rg.fade-in-up {
        animation: none;
        opacity: 1;
    }
}

@media (max-width: 991.98px) {
    .cond-price {
        padding: 32px;
    }

    .cond-price-value {
        font-size: 42px;
    }

    .cond-list {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: 560px;
    }

    .gal-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: 180px;
    }

    /* 3 columns: 2x2 + 1, 1, then a row of 3 */
    .gal-item:nth-child(n + 6) {
        display: block;
    }

    .gal-item:nth-child(n + 7) {
        display: none;
    }

    .form-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .form-photo {
        display: none;
    }

    .closing-inner {
        padding-top: 100px;
        padding-bottom: 100px;
    }
}

@media (max-width: 767.98px) {
    .btn-rg,
    .btn-outline-rg {
        padding: 13px 22px;
        white-space: normal;
        text-align: center;
    }

    .cond-prices {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 36px;
    }

    .cond-price {
        padding: 28px 24px;
    }

    .cond-price-from {
        margin-top: 18px;
    }

    .cond-price-value {
        font-size: 38px;
    }

    .gal-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .gal-tabs {
        display: flex;
    }

    .gal-tab {
        flex: 1 1 0;
        justify-content: center;
        padding: 10px 12px;
        font-size: 14px;
        white-space: normal;
        text-align: center;
    }

    .gal-more {
        align-self: center;
    }

    .btn-rg--lg {
        padding: 16px 26px;
    }

    .gal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 140px;
        gap: 8px;
    }

    .gal-item:first-child {
        grid-column: 1 / -1;
        grid-row: span 2;
    }

    .gal-item:nth-child(n + 6) {
        display: none;
    }

    .gal-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .gal-modal-footer {
        padding: 12px 16px 14px;
    }

    .gal-nav {
        width: 38px;
        height: 38px;
    }

    .gal-nav-prev {
        left: 8px;
    }

    .gal-nav-next {
        right: 8px;
    }

    .form-title {
        font-size: 32px;
    }

    .lead-form {
        padding: 24px 20px;
    }

    .form-row-2,
    .form-choices--stack {
        grid-template-columns: 1fr;
    }

    .form-submit {
        justify-self: stretch;
    }

    .closing-text {
        font-size: 16px;
    }

    .footer-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 24px;
    }

    /* Mobile: shorter label from the briefing */
    .wa-float {
        right: 16px;
        bottom: 16px;
        height: 52px;
        padding: 0 18px 0 14px;
        font-size: 14px;
    }

    .wa-float-label--long {
        display: none;
    }

    .wa-float-label--short {
        display: inline;
    }
}

/* ======================================================
   DECORATIVE LEAVES
   Line-art leaves from img/ornamentos used as CSS masks, so they
   take the brand green at low opacity. Purely decorative:
   pseudo-elements, no pointer events, behind the content.
====================================================== */
.has-leaves {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.has-leaves > .page-size {
    position: relative;
    z-index: 1;
}

.has-leaves::before,
.has-leaves::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: var(--leaf-size, 420px);
    aspect-ratio: 1;
    background-color: var(--leaf-color, var(--rg-grass));
    opacity: var(--leaf-opacity, 0.1);
    -webkit-mask: var(--leaf-img) center / contain no-repeat;
    mask: var(--leaf-img) center / contain no-repeat;
    pointer-events: none;
}

/* O empreendimento: fern top-left, broad leaf bottom-right */
.leaves-empreendimento::before {
    --leaf-img: url(../img/ornamentos/Leaf_35.svg);
    --leaf-size: 460px;
    top: -60px;
    left: -150px;
    transform: rotate(-18deg);
}

.leaves-empreendimento::after {
    --leaf-img: url(../img/ornamentos/Leaf_33.svg);
    --leaf-size: 380px;
    bottom: 200px;
    right: -130px;
    transform: rotate(24deg);
}

/* Diferenciais: forest green reads better on the lighter green-cream */
.leaves-diferenciais {
    --leaf-color: var(--rg-forest);
    --leaf-opacity: 0.07;
}

.leaves-diferenciais::before {
    --leaf-img: url(../img/ornamentos/Leaf_42.svg);
    --leaf-size: 440px;
    top: -40px;
    right: -140px;
    transform: rotate(10deg);
}

.leaves-diferenciais::after {
    --leaf-img: url(../img/ornamentos/Leaf_22.svg);
    --leaf-size: 340px;
    bottom: -60px;
    left: -110px;
    transform: rotate(-30deg);
}

/* Plantas */
.leaves-plantas::before {
    --leaf-img: url(../img/ornamentos/Leaf_13.svg);
    --leaf-size: 400px;
    top: -50px;
    right: -120px;
    transform: rotate(-14deg) scaleX(-1);
}

.leaves-plantas::after {
    --leaf-img: url(../img/ornamentos/Leaf_34.svg);
    --leaf-size: 360px;
    bottom: -40px;
    left: -120px;
    transform: rotate(20deg);
}

@media (max-width: 991.98px) {
    .has-leaves::before,
    .has-leaves::after {
        width: calc(var(--leaf-size, 420px) * 0.6);
    }
}

@media (max-width: 767.98px) {
    .has-leaves {
        --leaf-opacity: 0.07;
    }

    .leaves-diferenciais {
        --leaf-opacity: 0.05;
    }

    .has-leaves::before,
    .has-leaves::after {
        width: calc(var(--leaf-size, 420px) * 0.5);
    }
}

/* Destaque do nome do empreendimento */
strong {
    font-weight: 700;
}