/* ==========================================
   STAYMAXIMO
   PREMIUM BRAND STYLE CSS
   Navy + Turquoise SaaS Identity
========================================== */


/* ==========================
   ROOT COLORS
========================== */

:root{

    --stay-navy:#06182C;

    --stay-blue:#0B2948;

    --stay-turquoise:#00B8D9;

    --stay-turquoise-dark:#008FA8;

    --stay-white:#FFFFFF;

    --stay-light:#F4F8FB;

    --stay-gray:#667085;

    --stay-text:#263445;

}



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


*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

    font-family:'Inter',sans-serif;

    color:var(--stay-text);

    background:var(--stay-white);

    line-height:1.6;

}



img{

    max-width:100%;

    display:block;

}



a{

    text-decoration:none;

    color:inherit;

}



ul{

    list-style:none;

}



.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}



.section{

    padding:100px 0;

}





/* ==========================
   TYPOGRAPHY
========================== */


h1,
h2,
h3{

    font-family:'Playfair Display',serif;

    line-height:1.2;

}



h2{

    font-size:42px;

    margin-bottom:20px;

    color:var(--stay-navy);

}



p{

    font-size:16px;

    color:var(--stay-gray);

}





/* ==========================
   HEADER
========================== */


.header{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:999;

    background:var(--stay-navy);

    box-shadow:0 5px 25px rgba(0,0,0,.25);

}



.nav-container{

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}





/* ==========================
   LOGO
========================== */


.logo img{

    width:180px;

}





/* ==========================
   MENU
========================== */


.navbar ul{

    display:flex;

    align-items:center;

    gap:28px;

}



.navbar a{

    font-size:15px;

    font-weight:500;

    color:white;

    transition:.3s;

}



.navbar a:hover{

    color:var(--stay-turquoise);

}





/* ==========================
   LANGUAGE
========================== */


.language-selector{

    position:relative;

}



.language-selector button{

    background:none;

    border:none;

    cursor:pointer;

    font-size:15px;

    display:flex;

    gap:8px;

    align-items:center;

    color:white;

}



.languages{

    position:absolute;

    top:45px;

    right:0;

    background:white;

    width:200px;

    padding:12px;

    border-radius:12px;

    box-shadow:0 15px 35px rgba(0,0,0,.18);

    opacity:0;

    visibility:hidden;

    transform:translateY(10px);

    transition:.25s;

}



.language-selector:hover .languages{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}



.languages a{

    display:block;

    padding:10px;

    color:#333;

    border-radius:8px;

}



.languages a:hover{

    background:var(--stay-light);

    color:var(--stay-turquoise-dark);

}





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


.mobile-menu{

    display:none;

    font-size:28px;

    cursor:pointer;

    color:white;

}

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


.hero{

    height:100vh;

    min-height:700px;

    background:

    linear-gradient(
    rgba(6,24,44,.78),
    rgba(6,24,44,.78)
    ),

    url('../images/hero.jpg');

    background-size:cover;

    background-position:center;

    display:flex;

    align-items:center;

    position:relative;

}



.hero-content{

    color:white;

}



.hero-text{

    max-width:700px;

}



.subtitle{

    color:var(--stay-turquoise);

    font-size:16px;

    text-transform:uppercase;

    letter-spacing:2px;

    font-weight:600;

}



.hero h1{

    font-size:60px;

    margin:25px 0;

    color:white;

}



.hero p{

    color:white;

    font-size:18px;

    margin-bottom:35px;

}





/* ==========================
   BUTTONS
========================== */


.hero-buttons{

    display:flex;

    gap:20px;

}



.btn-primary{

    background:var(--stay-turquoise);

    color:white;

    padding:15px 35px;

    border-radius:50px;

    display:inline-flex;

    align-items:center;

    gap:10px;

    font-weight:600;

    transition:.3s;

}



.btn-primary:hover{

    background:var(--stay-turquoise-dark);

    transform:translateY(-3px);

}



.btn-whatsapp{

    background:#25d366;

    color:white;

    padding:15px 35px;

    border-radius:50px;

    display:inline-flex;

    align-items:center;

    gap:10px;

    font-weight:600;

    transition:.3s;

}



.btn-whatsapp:hover{

    opacity:.85;

    transform:translateY(-3px);

}





/* ==========================
   SECTION HEADER
========================== */


.section-header{

    text-align:center;

    max-width:800px;

    margin:0 auto 60px;

}



.section-header span{

    color:var(--stay-turquoise);

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:14px;

    font-weight:700;

}



.section-header h2{

    margin-top:15px;

}



.section-header p{

    margin-top:15px;

}





/* ==========================
   ABOUT
========================== */


.about{

    background:white;

}



.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}



.about-image{

    height:450px;

    background:url('../images/about.jpg');

    background-size:cover;

    background-position:center;

    border-radius:20px;

}



.about-text p{

    margin-bottom:20px;

}



.about-text .btn-primary{

    margin-top:20px;

}





/* ==========================
   SERVICES
========================== */


.services{

    background:var(--stay-light);

}



.services-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}



.service-card{

    background:white;

    padding:35px 25px;

    border-radius:20px;

    text-align:center;

    transition:.3s;

    box-shadow:0 10px 30px rgba(6,24,44,.08);

}



.service-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 40px rgba(6,24,44,.15);

}



.service-card .icon{

    width:70px;

    height:70px;

    margin:0 auto 20px;

    background:var(--stay-navy);

    color:var(--stay-turquoise);

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

}



.service-card h3{

    font-size:22px;

    margin-bottom:15px;

    color:var(--stay-navy);

}



.service-card p{

    font-size:15px;

}
/* ==========================
   FEATURES
========================== */


.features{

    background:white;

}



.features-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}



.feature-item{

    text-align:center;

    padding:30px;

}



.feature-item i{

    font-size:40px;

    color:var(--stay-turquoise);

    margin-bottom:20px;

}



.feature-item h3{

    font-size:22px;

    margin-bottom:15px;

    color:var(--stay-navy);

}





/* ==========================
   PROCESS
========================== */


.process{

    background:var(--stay-light);

}



.process-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}



.process-step{

    background:white;

    padding:35px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 10px 30px rgba(6,24,44,.06);

}



.process-step .number{

    width:60px;

    height:60px;

    background:var(--stay-navy);

    color:var(--stay-turquoise);

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    margin:0 auto 20px;

    font-size:22px;

    font-weight:700;

}



.process-step h3{

    margin-bottom:15px;

    color:var(--stay-navy);

}





/* ==========================
   GALLERY
========================== */


.gallery{

    background:white;

}



.gallery-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}



.gallery-item{

    height:300px;

    overflow:hidden;

    border-radius:20px;

}



.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}



.gallery-item:hover img{

    transform:scale(1.1);

}





/* ==========================
   CONTACT
========================== */


.contact{

    background:var(--stay-light);

}



.contact-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}



.contact-info span{

    color:var(--stay-turquoise);

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:14px;

    font-weight:700;

}



.contact-info h2{

    margin:20px 0;

}



.contact-details{

    margin-top:35px;

}



.contact-details div{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:20px;

}



.contact-details i{

    width:45px;

    height:45px;

    background:var(--stay-navy);

    color:var(--stay-turquoise);

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

}



.contact-details span{

    color:#555;

    text-transform:none;

    letter-spacing:0;

}





/* ==========================
   CONTACT FORM
========================== */


.contact-form{

    background:white;

    padding:40px;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(6,24,44,.10);

}



.input-group{

    margin-bottom:20px;

}



.input-group input,
.input-group select,
.input-group textarea{

    width:100%;

    padding:15px 18px;

    border:1px solid #ddd;

    border-radius:10px;

    font-size:15px;

    font-family:'Inter',sans-serif;

}



.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus{

    outline:none;

    border-color:var(--stay-turquoise);

}



.input-group textarea{

    height:130px;

    resize:none;

}



.contact-form button{

    border:none;

    cursor:pointer;

}

/* ==========================
   CTA
========================== */


.cta{

    background:

    linear-gradient(
    rgba(6,24,44,.80),
    rgba(6,24,44,.80)
    ),

    url('../images/cta.jpg');


    background-size:cover;

    background-position:center;

    padding:100px 0;

    text-align:center;

    color:white;

}



.cta h2{

    color:white;

    font-size:45px;

}



.cta p{

    color:white;

    margin:20px auto 35px;

    font-size:18px;

    max-width:700px;

}





/* ==========================
   FOOTER
========================== */


.footer{

    background:var(--stay-navy);

    color:white;

    padding-top:70px;

}



.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:50px;

    padding-bottom:50px;

}



.footer-brand img{

    width:180px;

    margin-bottom:20px;

}



.footer p{

    color:rgba(255,255,255,.65);

}



.footer h3{

    color:white;

    margin-bottom:20px;

    font-size:22px;

}



.footer-links a,
.footer-social a{

    display:block;

    color:rgba(255,255,255,.65);

    margin-bottom:12px;

    transition:.3s;

}



.footer-links a:hover,
.footer-social a:hover{

    color:var(--stay-turquoise);

}



.footer-social i{

    margin-right:10px;

}





/* ==========================
   COPYRIGHT
========================== */


.copyright{

    border-top:1px solid rgba(255,255,255,.15);

    padding:25px 0;

    text-align:center;

}



.copyright p{

    color:rgba(255,255,255,.45);

}





/* ==========================
   WHATSAPP FLOAT
========================== */


.whatsapp-float{

    position:fixed;

    right:25px;

    bottom:25px;

    width:60px;

    height:60px;

    background:#25d366;

    color:white;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    z-index:999;

    box-shadow:0 10px 25px rgba(0,0,0,.25);

    transition:.3s;

}



.whatsapp-float:hover{

    transform:scale(1.1);

}





/* ==========================
   GENERAL TRANSITIONS
========================== */


button,
a,
.service-card,
.feature-item,
.process-step,
.gallery-item{

    transition:all .3s ease;

}





/* ==========================
   IMAGE FALLBACKS
========================== */


.about-image,
.cta{

    background-color:#dfe7ef;

}





/* ==========================
   TABLET HEADER SUPPORT
========================== */


@media(max-width:1100px){

.navbar{

    display:block;
    position:fixed;
    top:0;
    right:-100%;
    width:80%;
    height:100vh;
    background:#06182C;
    padding:100px 40px;
    transition:0.4s;
    z-index:1000;

}


.navbar.active{

    right:0;

}


.navbar ul{

    display:flex;
    flex-direction:column;
    gap:25px;

}


.mobile-menu{

    display:block;
    position:relative;
    z-index:2000;
    color:white;

}


.nav-container{

    height:80px;

}

}

.mobile-menu{
    display:block !important;
    color:white;
    font-size:30px;
    cursor:pointer;
    z-index:99999;
}


.navbar{
    transition:0.4s;
}


@media(max-width:1100px){

.navbar{
    display:block !important;
    position:fixed;
    top:0;
    right:-100%;
    width:80%;
    height:100vh;
    background:#06182C;
    padding:100px 40px;
    z-index:9999;
}


.navbar.active{
    right:0;
}

}

/* ===== MENU MOBILE PREMIUM ===== */

@media (max-width:1100px){

    .navbar{
        position:fixed;
        top:0;
        right:-100%;
        width:280px;
        height:100vh;
        background:#06182C;
        transition:.35s;
        z-index:9999;
        padding-top:90px;
    }

    .navbar.active{
        right:0;
    }

    .navbar ul{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        padding:0 30px;
        gap:25px;
    }

    .navbar a{
        font-size:18px;
        color:#fff;
    }

    .mobile-menu{
        display:block;
        font-size:30px;
        color:#fff;
        cursor:pointer;
        z-index:10000;
    }

}

/* ==========================
   OWNER LOGIN PAGE
========================== */

.owner-login{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

    linear-gradient(
    rgba(6,24,44,.85),
    rgba(6,24,44,.85)
    ),

    url('../images/hero.jpg');

    background-size:cover;

    background-position:center;

    padding:40px;

}



.login-box{

    width:100%;

    max-width:450px;

    background:white;

    padding:50px 40px;

    border-radius:25px;

    text-align:center;

    box-shadow:0 20px 50px rgba(0,0,0,.25);

}



.login-box img{

    width:180px;

    margin:0 auto 30px;

}



.login-box h1{

    font-size:36px;

    color:var(--stay-navy);

    margin-bottom:15px;

}



.login-box p{

    margin-bottom:30px;

}



.login-box input{

    width:100%;

    padding:15px 18px;

    margin-bottom:20px;

    border:1px solid #ddd;

    border-radius:10px;

    font-family:'Inter',sans-serif;

    font-size:15px;

}



.login-box input:focus{

    outline:none;

    border-color:var(--stay-turquoise);

}



.login-box button{

    width:100%;

    border:none;

    cursor:pointer;

}



.login-box a{

    color:var(--stay-turquoise-dark);

    font-size:14px;

}

/* OWNER LOGIN PREMIUM */

.owner-login{

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

background:

linear-gradient(
rgba(6,24,44,.90),
rgba(6,24,44,.90)
),

url('../images/hero.jpg');

background-size:cover;

background-position:center;

padding:30px;

}



.login-box{

background:white;

width:100%;

max-width:430px;

padding:50px;

border-radius:25px;

box-shadow:
0 30px 80px rgba(0,0,0,.35);

text-align:center;

}



.login-box img{

width:180px;

margin:0 auto 35px;

}



.login-subtitle{

color:var(--stay-turquoise);

font-size:13px;

font-weight:700;

letter-spacing:3px;

}



.login-box h1{

font-size:38px;

color:var(--stay-navy);

margin:15px 0;

}



.login-box p{

margin-bottom:35px;

}



.login-input{

display:flex;

align-items:center;

gap:12px;

background:#f4f8fb;

border-radius:12px;

padding:0 18px;

margin-bottom:18px;

}



.login-input i{

color:var(--stay-turquoise);

}



.login-input input{

width:100%;

border:0;

background:transparent;

padding:17px 0;

font-size:15px;

}



.login-input input:focus{

outline:none;

}



.login-box button{

width:100%;

justify-content:center;

border:0;

cursor:pointer;

}



.login-links{

margin-top:25px;

}



.login-links a{

color:var(--stay-turquoise-dark);

font-size:14px;

}

.owner-login{

    min-height:100vh;

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:
    linear-gradient(
    rgba(6,24,44,.90),
    rgba(6,24,44,.90)
    ),
    url('../images/hero.jpg');

    background-size:cover;

    background-position:center;

    padding:30px;

}


.login-box{

    width:100%;

    max-width:430px;

    background:white;

    padding:50px;

    border-radius:25px;

    text-align:center;

    box-shadow:
    0 30px 80px rgba(0,0,0,.35);

}

/* ==========================
   OWNER PAGE
========================== */


.owner-hero{

    height:80vh;

    min-height:650px;

    background:

    linear-gradient(
    rgba(6,24,44,.80),
    rgba(6,24,44,.80)
    ),

    url('../images/proprietarios/hero.jpg');

    background-size:cover;

    background-position:center;

    display:flex;

    align-items:center;

    position:relative;

}



.owner-content{

    color:white;

    max-width:750px;

}



.owner-content span{

    color:var(--stay-turquoise);

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}



.owner-content h1{

    color:white;

    font-size:55px;

    margin:25px 0;

}



.owner-content p{

    color:white;

    font-size:18px;

    margin-bottom:35px;

}




/* PROPERTY IMAGE */


.owner-image-section{

    padding:80px 0;

    background:white;

}



.owner-image-section img{

    width:100%;

    height:500px;

    object-fit:cover;

    border-radius:25px;

    box-shadow:
    0 20px 50px rgba(6,24,44,.15);

}



/* MOBILE */

@media(max-width:768px){


.owner-hero{

    height:auto;

    padding:160px 0 100px;

}


.owner-content h1{

    font-size:38px;

}


.owner-image-section img{

    height:300px;

}


}

/* OWNER PAGE HERO IMAGE */

.owner-page-hero{

    background:

    linear-gradient(
    rgba(0,0,0,.45),
    rgba(0,0,0,.45)
    ),

    url('../images/proprietarios/hero.jpg');

    background-size:cover;

    background-position:center;

}

.owner-page-hero{

    background:

    linear-gradient(
    rgba(0,0,0,.45),
    rgba(0,0,0,.45)
    ),

    url('../images/proprietarios/hero.jpg');

    background-size:cover;

    background-position:center;

}