/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;

    overflow-x: hidden;

    background: #c6a36f;
}

body {
    font-family:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;
}


/* =========================================================
   HERO
========================================================= */

.hero {

    position: relative;

    width: 100%;
    height: 100vh;
    height: 100svh;

    min-height: 600px;

    overflow: hidden;

    background: #07100d;
}


/* =========================================================
   PNG BACKGROUND
========================================================= */

.hero-image {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
       Slight oversizing prevents empty edges
       during the parallax movement.
    */

    transform: scale(1.03);

    z-index: 1;

    pointer-events: none;

    will-change: transform;
}


/* =========================================================
   CINEMATIC OVERLAY
========================================================= */

.hero::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:

        linear-gradient(
            180deg,
            rgba(0,0,0,0.22) 0%,
            rgba(0,0,0,0.02) 35%,
            rgba(0,0,0,0.08) 70%,
            rgba(0,0,0,0.40) 100%
        );
}


/* =========================================================
   NAVIGATION
========================================================= */

.hero-nav {

    position: absolute;

    top: 0;
    right: 10px;

    width: 200px;

    padding: 32px 50px;

    z-index: 20;

   

    align-items: center;
    justify-content: space-between;

    color: white;
}

.logo{
  width:30%;
  cursor: pointer;
  animation: top-down 1.5s forwards;
  position: absolute;
  z-index: 10;
  top: 20px;
  left: 50px;
  z-index: 10000;
}

 /**********************   Início - logo ********************************/

 .logo img{
    
  width: 55%;

  z-index: 10000;

 }

 /**********************  Fim - logo  ***********************************/




.nav-right {

    display: flex;

    gap: 30px;

    align-items: center;
}


.nav-link {

    color: white;

    text-decoration: none;

    font-size: 11px;

    letter-spacing: 0.22em;

    text-transform: uppercase;

    opacity: 0.9;

    transition:
        opacity 0.3s ease;
}


.nav-link:hover {

    opacity: 0.5;
}


/* =========================================================
   HERO TEXT
========================================================= */

.hero-content {

    position: absolute;

    left: 40px;
    bottom: 5px;

    z-index: 10;

    color: #FFFF;

    max-width: 650px;
}


.eyebrow {

    font-size: 16px;

    color: #FFFF;
   

    letter-spacing: 0.35em;

    text-transform: uppercase;

    margin-bottom: 18px;

    opacity: 0.85;
}


.hero-title {
      font-family: "Roboto", sans-serif;

    font-size:
        clamp(42px, 6vw, 92px);

    font-weight: 300;

    line-height: 0.95;

    letter-spacing: -0.035em;
}


.hero-subtitle {
    font-family: "Roboto", sans-serif;

    margin-top: 24px;

    max-width: 700px;

    font-size: 17px;

    font-weight: 700;

    line-height: 1.7;

    letter-spacing: 0.04em;

    opacity: 0.85;
   color: #FFFF;
}


/* =========================================================
   LOCATION MARKER
========================================================= */

.location {

    position: absolute;

    z-index: 15;

    width: 30px;
    height: 30px;

    transform:
        translate(-50%, -50%);

    cursor: pointer;

    display: flex;

    align-items: center;
    justify-content: center;
}


/* =========================================================
   LOCATION CORE
========================================================= */

.location-core {

    position: relative;

    width: 10px;
    height: 10px;

    border-radius: 70%;

    background:
        rgba(255, 255, 255, 0.98);

    border:
        1px solid rgba(255,255,255,0.95);

    box-shadow:

        0 0 0 2px
        rgba(255,255,255,0.16),

        0 0 16px
        rgba(255,255,255,0.55);

    z-index: 3;
}


/* =========================================================
   PULSING RINGS
========================================================= */

.location::before,
.location::after {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    border:
        1px solid
        rgba(255,255,255,0.75);

    transform:
        translate(-50%, -50%)
        scale(1);

    opacity: 0;

    animation:

        locationPulse
        3.2s
        cubic-bezier(
            0.25,
            0.46,
            0.45,
            0.94
        )
        infinite;
}


.location::after {

    animation-delay: 1.6s;
}


/* =========================================================
   PULSE
========================================================= */

@keyframes locationPulse {

    0% {

        transform:
            translate(-50%, -50%)
            scale(1);

        opacity: 0.8;
    }

    70% {

        transform:
            translate(-50%, -50%)
            scale(3.8);

        opacity: 0;
    }

    100% {

        transform:
            translate(-50%, -50%)
            scale(3.8);

        opacity: 0;
    }
}


/* =========================================================
   LOCATION LABEL
========================================================= */

.location-label {

    position: absolute;

    left: 26px;
    top: 50%;

    transform:
        translateY(-50%)
        translateX(10px);

    white-space: nowrap;

    padding:
        10px 14px;

    background:
        #c6a36f;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    border:
        1px solid
        rgba(255,255,255,0.16);

    color: white;

    font-size: 10px;

    letter-spacing: 0.18em;

    text-transform: uppercase;

    opacity: 0;

    pointer-events: none;

    transition:

        opacity 0.35s ease,

        transform 0.35s ease;
}


.location:hover .location-label,
.location.active .location-label {

    opacity: 1;

    transform:
        translateY(-50%)
        translateX(0);
}


/* =========================================================
   LOCATION NUMBERS
========================================================= */

.location-number {

    position: absolute;

    right: 25px;
    top: 50%;

    transform:
        translateY(-50%);

    color:
        rgba(255,255,255,0.65);

    font-size: 9px;

    letter-spacing: 0.15em;
}


/* =========================================================
   LOCATION POSITIONS
========================================================= */

/* POINT 01 */

.location-1 {

    left: 45%;
    top: 36%;
}


/* POINT 02 */

.location-2 {

    left: 46.4%;
    top: 86.3%;
}


/* POINT 03 */

.location-3 {

    left: 40%;
    top: 52%;
}


/* POINT 04 */

.location-4 {

    left: 38%;
    top: 37%;
}


/* POINT 05 */

.location-5 {

    left: 44%;
    top: 87.9%;
}


/* =========================================================
   SCROLL INDICATOR
========================================================= */

.scroll-indicator {

    position: absolute;

    bottom: 34px;
    right: 50px;

    z-index: 20;

    color: white;

    display: flex;

    align-items: center;

    gap: 13px;

    font-size: 9px;

    letter-spacing: 0.25em;

    text-transform: uppercase;

    opacity: 0.8;
}


.scroll-line {

    width: 42px;

    height: 1px;

    background:
        rgba(255,255,255,0.7);
}


/* =========================================================
   LOADER
========================================================= */

.loader {

    position: absolute;

    inset: 0;

    z-index: 100;

    background: #07100d;

    display: flex;

    align-items: center;
    justify-content: center;

    pointer-events: none;

    animation:
        loaderFade
        1.2s
        ease
        forwards;

    animation-delay: 1.1s;
}


.loader-text {

    color: white;

    font-size: 11px;

    letter-spacing: 0.35em;

    text-transform: uppercase;

    opacity: 0.8;
}


@keyframes loaderFade {

    0% {

        opacity: 1;
    }

    100% {

        opacity: 0;

        visibility: hidden;
    }
}





/*******************  Início -  WhatsApp ***********************/



.whatsapp{

  position: fixed;
  bottom: 14px;
  right: 18px;
  z-index: 100;
 }


.whatsapp img{


 width: 50px;
}




@media (max-width: 430px) {

  .whatsapp img{
    width: 35px;
}

  .whatsapp{

    position: fixed;
    bottom: 5px;
    right: 18px;
     z-index: 100;
   }
  
}




/******************* Fim -  WhatsApp ***********************/


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .hero-nav {

        padding:
            25px 28px;
    }


    .hero-content {

        left: 28px;

        bottom: 45px;

        max-width: 500px;
    }


    .scroll-indicator {

        right: 28px;

        bottom: 28px;
    }


    .location-label {

        font-size: 9px;

        padding:
            8px 11px;
    }

}


/* =========================================================
   MOBILE
========================================================= */




@media (max-width: 1210px) {

   .logo img{
    
  width: 60%;

  z-index: 10000;

 }


    .hero {

        min-height: 520px;
    }


    .hero-nav {

        padding:
            22px 20px;
    }


    .logo {

        

        letter-spacing:
            0.22em;
    }


    .nav-right {
        position: relative;
        left: 70px;
        top: 8px;
        gap: 18px;
        font-size: 20px;
    }


    .nav-link {

        font-size: 10px;

        letter-spacing:
            0.15em;
    }


    .hero-content {

        left: 20px;
        right: 20px;

        bottom: 65px;

        max-width: none;
    }


    .eyebrow {
      font-family: "Roboto", sans-serif;
      font-size: 9px;
      letter-spacing: 0.25em;
      margin-bottom: 12px;
    }


    .hero-title {

        font-size:
            clamp(40px,13vw,64px);
    }


    .hero-subtitle {

        font-size: 11px;

        max-width: 320px;

        margin-top: 16px;
    }


    .location {

        width: 30px;
        height: 30px;
    }


    .location-core {

        width: 8px;
        height: 8px;
    }


    .location-label {

        left: 20px;

        padding:
            7px 9px;

        font-size: 7px;

        letter-spacing:
            0.12em;
    }


/* =========================================================
   LOCATION POSITIONS
========================================================= */

/* POINT 01 */

.location-1 {

    left: 33%;
    top: 39%;
}


/* POINT 02 */

.location-2 {

    left: 40%;
    top: 82.5%;
}


/* POINT 03 */

.location-3 {

    left: 23.8%;
    top: 43%;
}


/* POINT 04 */

.location-4 {

    left: 26.5%;
    top: 27%;
    z-index: 9999
    ;
}


/* POINT 05 */

.location-5 {

    left: 36.5%;
    top: 81.9%;
}



}







@media (max-width: 440px) {

    .hero {

        min-height: 520px;
    }


    .hero-nav {

        padding:
            22px 20px;
    }


    .logo {

        

        letter-spacing:
            0.22em;
    }

  

   .logo img{
    position: relative;
    left: -26px;
    top: 8px;
    width: 95%;

    z-index: 10000;

 }


    .nav-right {
        position: relative;
        left: 20px;
        top: 5px;
        gap: 18px;
        font-size: 20px;
    }


    .nav-link {

      position: relative;
      top: 9px;
      left: 80px;
        font-size: 10px;

        letter-spacing:
            0.15em;
    }


    .hero-content {

        left: 20px;
        right: 20px;

        bottom: 65px;

        max-width: none;
    }


    .eyebrow {
      font-family: "Roboto", sans-serif;
      font-size: 14px;
      letter-spacing: 0.25em;
      margin-bottom: 12px;
    }


    .hero-title {
      position: relative;
      top: 30px;

        font-size:
           40px;
    }


    .hero-subtitle {
      position: relative;
      top: 30px;


        font-size: 13px;

        max-width: 320px;

        margin-top: 16px;
    }


    .location {

        width: 30px;
        height: 30px;
    }


    .location-core {

        width: 8px;
        height: 8px;
    }


    .location-label {

        left: 20px;

        padding:
            7px 9px;

        font-size: 7px;

        letter-spacing:
            0.12em;
    }

    

    
/* =========================================================
   LOCATION POSITIONS
========================================================= */

/* POINT 01 */

.location-1 {

    left: 27%;
    top: 38%;
}


/* POINT 02 */

.location-2 {

    left: 40%;
    top: 82.5%;
}


/* POINT 03 */


.location-3 {

    left: 8.8%;
    top: 50.5%;
}


/* POINT 04 */

.location-4 {

    left: 3.5%;
    top: 38%;
    z-index: 9999
    ;
}


/* POINT 05 */

.location-5 {

    left: 36.5%;
    top: 81.9%;
}



}


@media (max-width: 430px) {


    
/* =========================================================
   LOCATION POSITIONS
========================================================= */

/* POINT 01 */

.location-1 {

    left: 26%;
    top: 38%;
}


/* POINT 02 */

.location-2 {

    left: 30%;
    top: 82.5%;
}


/* POINT 03 */

.location-3 {

    left: 8.8%;
    top: 50.5%;
}


/* POINT 04 */

.location-4 {

    left: 3.5%;
    top: 38%;
    z-index: 9999
    ;
}


/* POINT 05 */

.location-5 {

    left: 36.5%;
    top: 81.9%;
}



}







/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 390px) {

    .hero-content {

        bottom: 45px;
    }



    .hero-title {
      position: relative;

      top: 35px;

      left: -5px;

      font-size: 40px;
    }


    .hero-subtitle {
        position: relative;

        top: 35px;

        left: -5px;

        font-size: 13px;

        max-width: 320px;

       
    }



    .location-label {

        display: none;
    }




 .nav-link {

      position: relative;
      top: 9px;
      left: 90px;
        font-size: 9px;

        letter-spacing:
            0.15em;
    }




 




}





































/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .location::before,
    .location::after {

        animation: none;

        opacity: 0.35;

        transform:
            translate(-50%, -50%)
            scale(1.8);
    }


    .loader {

        animation: none;

        opacity: 0;

        visibility: hidden;
    }

}