/* ==========================================
   STAYPOLO NOVO SITE CSS
   PARTE 1/5
========================================== */


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

:root{

    --stay-navy:#06182c;
    --stay-turquoise:#00c7d9;
    --stay-light:#f8fafc;
    --stay-text:#475569;
    --stay-white:#ffffff;
    --stay-border:#e2e8f0;

}



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


*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

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

    color:var(--stay-text);

    background:#ffffff;

}



a{

    text-decoration:none;

}



img{

    max-width:100%;

    display:block;

}



ul{

    list-style:none;

}



h1,
h2,
h3{

    color:var(--stay-navy);

}



p{

    line-height:1.7;

}



.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}



.section{

    padding:100px 0;

}





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


.btn-primary{


    background:var(--stay-turquoise);


    color:white!important;


    padding:15px 35px;


    border-radius:50px;


    display:inline-flex;


    align-items:center;


    justify-content:center;


    gap:10px;


    font-weight:700;


    transition:.3s;


}



.btn-primary:hover{

    transform:translateY(-3px);

}




.btn-secondary{


    background:transparent;


    color:white;


    border:2px solid white;


    padding:15px 35px;


    border-radius:50px;


    display:inline-flex;


    align-items:center;


    justify-content:center;


    gap:10px;


    font-weight:600;


    transition:.3s;


}



.btn-secondary:hover{


    background:white;


    color:var(--stay-navy);


}






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


.header{


    position:fixed;


    top:0;


    left:0;


    width:100%;


    height:90px;


    background:white;


    z-index:999;


    box-shadow:

    0 5px 20px rgba(0,0,0,.05);


}




.nav-container{


    height:90px;


    display:flex;


    align-items:center;


    justify-content:space-between;


}




.logo img{


    width:160px;


}





.navbar ul{


    display:flex;


    align-items:center;


    gap:30px;


}




.navbar a{


    color:var(--stay-navy);


    font-weight:600;


}



.navbar a:hover{


    color:var(--stay-turquoise);


}





.mobile-menu{


    display:none;


    font-size:30px;


    color:var(--stay-navy);


}






/* ==========================
HERO PRINCIPAL
INDEX.HTML
========================== */


.hero{


    min-height:800px;


    padding-top:160px;


    display:flex;


    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;


}




.hero-text{


    max-width:750px;


}





.subtitle{


    color:var(--stay-turquoise);


    font-size:14px;


    font-weight:800;


    letter-spacing:2px;


}





.hero h1{


    color:white;


    font-size:60px;


    line-height:1.1;


    font-weight:800;


    margin:25px 0;


}





.hero p{


    color:white;


    font-size:20px;


    max-width:650px;


}





.hero-buttons{


    display:flex;


    gap:20px;


    margin-top:40px;


}







/* ==========================
HERO PAGINAS INTERNAS
========================== */


.page-hero{


    padding-top:180px;


    padding-bottom:100px;


    background:


    linear-gradient(

    rgba(6,24,44,.95),

    rgba(6,24,44,.95)

    ),


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


    background-size:cover;


    background-position:center;


    text-align:center;


}





.page-hero h1{


    color:white;


    font-size:50px;


    margin:25px auto;


    max-width:900px;


}





.page-hero p{


    color:white;


    max-width:750px;


    margin:auto;


    font-size:18px;


}

/* ==========================================
   STAYPOLO NOVO SITE CSS
   PARTE 2/5
========================================== */


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


.section-header{


    text-align:center;


    max-width:800px;


    margin:0 auto 60px;


}




.section-header span{


    color:var(--stay-turquoise);


    font-weight:800;


    letter-spacing:2px;


}





.section-header h2{


    font-size:42px;


    margin:20px 0;


    font-weight:800;


}





.section-header p{


    color:#64748b;


    font-size:18px;


}







/* ==========================
DASHBOARD
INDEX.HTML
========================== */


.dashboard-preview{


    background:var(--stay-light);


    padding:80px 0;


}





.dashboard-image{


    max-width:1100px;


    margin:auto;


}





.dashboard-image img{


    width:100%;


    border-radius:25px;


    box-shadow:


    0 30px 80px rgba(6,24,44,.18);


}






/* ==========================
CONFIANÇA
========================== */


.trust{


    background:white;


}





.trust-grid{


    display:grid;


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


    gap:30px;


}





.trust-card{


    background:white;


    padding:40px 30px;


    border-radius:20px;


    text-align:center;


    box-shadow:


    0 10px 30px rgba(6,24,44,.08);


    transition:.3s;


}





.trust-card:hover{


    transform:translateY(-8px);


}





.trust-card i{


    font-size:40px;


    color:var(--stay-turquoise);


    margin-bottom:20px;


}





.trust-card h3{


    font-size:24px;


    margin-bottom:15px;


}






/* ==========================
SOBRE / PROBLEMA
========================== */


.about-grid{


    display:grid;


    grid-template-columns:1fr 1fr;


    gap:60px;


    align-items:center;


}





.about-text h2{


    font-size:42px;


    margin:20px 0;


}





.about-text p{


    margin-bottom:20px;


}





.about-image img{


    width:100%;


    border-radius:25px;


    box-shadow:


    0 20px 60px rgba(6,24,44,.12);


}






/* ==========================
FUNCIONALIDADES
FUNCIONALIDADES.HTML
========================== */


.features{


    background:#ffffff;


}





.features-grid{


    display:grid;


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


    gap:25px;


}





.feature-item{


    background:white;


    padding:35px 25px;


    border-radius:20px;


    box-shadow:


    0 10px 30px rgba(6,24,44,.08);


    transition:.3s;


}





.feature-item:hover{


    transform:translateY(-8px);


}





.feature-item i{


    color:var(--stay-turquoise);


    font-size:40px;


    margin-bottom:20px;


}





.feature-item h3{


    margin-bottom:15px;


    font-size:22px;


}





.feature-item p{


    color:#64748b;


}








/* ==========================
PLATAFORMA
INDEX.HTML
========================== */


.platform{


    background:white;


}





.platform-image{


    margin-bottom:60px;


}





.platform-image img{


    width:100%;


    border-radius:25px;


    box-shadow:


    0 25px 70px rgba(6,24,44,.15);


}





.platform-grid{


    display:grid;


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


    gap:25px;


}





.platform-card{


    background:white;


    padding:35px 25px;


    text-align:center;


    border-radius:20px;


    box-shadow:


    0 10px 30px rgba(6,24,44,.08);


    transition:.3s;


}





.platform-card:hover{


    transform:translateY(-8px);


}





.platform-card i{


    font-size:35px;


    color:var(--stay-turquoise);


    margin-bottom:20px;


}





.platform-card h3{


    margin-bottom:15px;


}







/* ==========================
SOLUÇÕES
SOLUCOES.HTML
========================== */


.solutions{


    background:var(--stay-light);


}





.services-grid{


    display:grid;


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


    gap:25px;


}





.service-card{


    background:white;


    padding:35px 25px;


    border-radius:20px;


    text-align:center;


    box-shadow:


    0 10px 30px rgba(6,24,44,.08);


    transition:.3s;


}





.service-card:hover{


    transform:translateY(-8px);


}





.service-card .icon{


    width:70px;


    height:70px;


    margin:0 auto 20px;


    border-radius:50%;


    background:rgba(0,199,217,.1);


    display:flex;


    align-items:center;


    justify-content:center;


}





.service-card i{


    font-size:35px;


    color:var(--stay-turquoise);


}





.service-card h3{


    margin-bottom:15px;


    font-size:22px;


}





.service-card p{


    color:#64748b;


}

/* ==========================================
   STAYPOLO NOVO SITE CSS
   PARTE 3/5
========================================== */


/* ==========================
PREÇOS
PRECOS.HTML
========================== */


.pricing{


    background:#f8fafc;


    padding:100px 0;


}





.pricing-grid{


    display:grid;


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


    gap:30px;


    align-items:stretch;


}





.price-card{


    background:white;


    padding:45px 35px;


    border-radius:25px;


    border:1px solid var(--stay-border);


    display:flex;


    flex-direction:column;


    position:relative;


    transition:.3s;


}





.price-card:hover{


    transform:translateY(-8px);


    box-shadow:


    0 20px 50px rgba(6,24,44,.12);


}





.price-card.featured{


    border:3px solid var(--stay-turquoise);


    transform:translateY(-15px);


}





.price-card.featured:hover{


    transform:translateY(-20px);


}





.popular{


    position:absolute;


    top:-18px;


    left:50%;


    transform:translateX(-50%);


    background:var(--stay-turquoise);


    color:white;


    padding:8px 25px;


    border-radius:50px;


    font-size:13px;


    font-weight:800;


}





.price-header h3{


    font-size:30px;


    margin-bottom:15px;


}





.price-header p{


    color:#64748b;


}





.price{


    margin:30px 0;


}





.price span{


    font-size:38px;


    font-weight:800;


    color:var(--stay-navy);


}





.price small{


    color:#64748b;


}





.price-card ul{


    margin-bottom:35px;


}





.price-card li{


    display:flex;


    align-items:center;


    gap:10px;


    margin-bottom:15px;


}





.price-card li i{


    color:var(--stay-turquoise);


}





.price-card .btn-primary{


    width:100%;


    margin-top:auto;


}






/* ==========================
OFERTA LANÇAMENTO
========================== */


.launch-offer{


    margin-top:60px;


    background:white;


    padding:45px;


    border-radius:25px;


    text-align:center;


    box-shadow:


    0 15px 40px rgba(6,24,44,.08);


}





.launch-offer h2{


    font-size:36px;


    margin-bottom:15px;


}





.launch-offer p{


    color:#64748b;


}






/* ==========================
LOGIN PROPRIETÁRIO
LOGIN.HTML
========================== */


.owner-login{


    min-height:100vh;


    display:flex;


    align-items:center;


    justify-content:center;


    background:#f8fafc;


    padding:120px 20px 40px;


}





.login-box{


    width:100%;


    max-width:450px;


    background:white;


    padding:45px;


    border-radius:25px;


    text-align:center;


    box-shadow:


    0 20px 60px rgba(15,23,42,.12);


}





.login-box img{


    width:180px;


    margin:0 auto 25px;


}





.login-box h1{


    font-size:32px;


    color:#0f172a;


    margin-bottom:15px;


}





.login-box p{


    color:#64748b;


    margin-bottom:30px;


}





.login-box label{


    display:block;


    text-align:left;


    font-weight:600;


    margin-bottom:8px;


    color:#334155;


}





.login-box input{


    width:100%;


    padding:15px;


    margin-bottom:20px;


    border:1px solid #e2e8f0;


    border-radius:12px;


    font-size:15px;


}





.login-box button{


    width:100%;


    border:none;


    cursor:pointer;


}





.login-box a{


    display:block;


    margin-top:20px;


    color:#2563eb;


}






/* ==========================
DEMONSTRAÇÃO
DEMO.HTML
========================== */


.demo-hero{


    padding:160px 0 100px;


    background:#f8fafc;


}





.demo-grid{


    display:grid;


    grid-template-columns:1fr 450px;


    gap:70px;


    align-items:center;


}





.demo-content h1{


    font-size:52px;


    line-height:1.1;


    margin-bottom:25px;


}





.demo-content p{


    font-size:18px;


    color:#64748b;


    margin-bottom:35px;


}





.demo-benefits{


    display:flex;


    flex-direction:column;


    gap:18px;


}





.demo-benefits div{


    display:flex;


    align-items:center;


    gap:12px;


    font-weight:600;


}





.demo-benefits i{


    color:var(--stay-turquoise);


}






/* FORMULARIO DEMO */


.demo-form-wrapper{


    background:white;


    padding:40px;


    border-radius:25px;


    box-shadow:


    0 20px 60px rgba(15,23,42,.12);


}





.demo-form h2{


    font-size:28px;


    margin-bottom:15px;


}





.demo-form p{


    color:#64748b;


    margin-bottom:25px;


}





.demo-form label{


    display:block;


    margin-bottom:8px;


    font-weight:600;


}





.demo-form input,
.demo-form select,
.demo-form textarea{


    width:100%;


    padding:14px 16px;


    margin-bottom:20px;


    border-radius:12px;


    border:1px solid #e2e8f0;


    font-size:15px;


}





.demo-form button{


    width:100%;


    border:none;


    cursor:pointer;


}

/* ==========================================
   STAYPOLO NOVO SITE CSS
   PARTE 4/5
========================================== */


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


.cta{


    background:var(--stay-navy);


    padding:100px 20px;


    text-align:center;


}





.cta h2{


    color:white;


    font-size:45px;


    margin-bottom:20px;


}





.cta p{


    color:white;


    max-width:750px;


    margin:0 auto 35px;


    font-size:18px;


}







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


.footer{


    background:#06182c;


    color:white;


    padding:70px 0 20px;


}





.footer-grid{


    display:grid;


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


    gap:40px;


}





.footer-brand img{


    width:160px;


    margin-bottom:20px;


}





.footer-brand p{


    color:white;


}





.footer-links{


    display:flex;


    flex-direction:column;


    gap:15px;


}





.footer-links h3{


    color:white;


    font-size:18px;


    margin-bottom:15px;


}





.footer-links a{


    color:white;


    display:flex;


    align-items:center;


    gap:10px;


    transition:.3s;


}





.footer-links a:hover{


    color:var(--stay-turquoise);


    transform:translateX(5px);


}





.footer-links i{


    color:var(--stay-turquoise);


    font-size:18px;


}





.copyright{


    margin-top:50px;


    padding-top:20px;


    text-align:center;


    border-top:


    1px solid rgba(255,255,255,.15);


}





.copyright p{


    color:white;


    font-size:14px;


}








/* ==========================
PÁGINA OBRIGADO
OBRIGADO.HTML
========================== */


.thank-section{


    min-height:80vh;


    display:flex;


    align-items:center;


    justify-content:center;


    text-align:center;


    padding-top:150px;


}





.thank-box{


    max-width:700px;


    margin:auto;


}





.thank-box > i{


    font-size:70px;


    color:var(--stay-turquoise);


    margin-bottom:30px;


}





.thank-box h1{


    font-size:45px;


    margin-bottom:25px;


}





.thank-box p{


    font-size:18px;


    margin-bottom:20px;


    color:#64748b;


}





.next-steps{


    margin:50px auto;


    max-width:500px;


    text-align:left;


}





.next-steps h3{


    text-align:center;


    margin-bottom:30px;


}





.next-steps div{


    display:flex;


    align-items:center;


    gap:15px;


    margin-bottom:20px;


}





.next-steps i{


    width:35px;


    height:35px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:var(--stay-turquoise);


    color:white;


}








/* ==========================
EMPRESA
EMPRESA.HTML
========================== */


.company-hero{


    padding-top:160px;


    padding-bottom:100px;


    background:#f8fafc;


}





.company-grid{


    display:grid;


    grid-template-columns:1fr 1fr;


    gap:60px;


    align-items:center;


}





.company-grid img{


    border-radius:25px;


    box-shadow:


    0 20px 60px rgba(6,24,44,.12);


}





.company-content h1{


    font-size:50px;


    margin-bottom:25px;


}





.company-content p{


    font-size:18px;


    margin-bottom:20px;


}








/* ==========================
ANIMAÇÕES
========================== */


.trust-card,
.feature-item,
.service-card,
.platform-card,
.testimonial-card{


    opacity:0;


    transform:translateY(30px);


    transition:.6s ease;


}





.show{


    opacity:1;


    transform:translateY(0);


}






/* ==========================
EFEITOS
========================== */


.btn-primary,
.btn-secondary,
.price-card,
.service-card,
.feature-item,
.platform-card{


    will-change:transform;


}





/* ==========================
SCROLLBAR
========================== */


::-webkit-scrollbar{


    width:10px;


}





::-webkit-scrollbar-track{


    background:#f8fafc;


}





::-webkit-scrollbar-thumb{


    background:var(--stay-turquoise);


    border-radius:20px;


}






/* ==========================
FORMULARIOS GERAIS
========================== */


input,
textarea,
select{


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


}





button{


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


}





::selection{


    background:var(--stay-turquoise);


    color:white;


}


/* ==========================================
   STAYPOLO NOVO SITE CSS
   PARTE 5/5
========================================== */


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


@media(max-width:1024px){


.features-grid{

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

}



.platform-grid{

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

}



.services-grid{

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

}



.demo-grid{

    grid-template-columns:1fr;

}



.pricing-grid{

    grid-template-columns:1fr;

}



.price-card.featured{

    transform:none;

}



.about-grid{

    gap:40px;

}


}




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


@media(max-width:768px){



.section{

    padding:70px 0;

}




.container{

    width:92%;

}




/* HEADER */


.header{

    height:80px;

}



.nav-container{

    height:80px;

}



.logo img{

    width:140px;

}



.navbar{

    display:none;

}



.mobile-menu{

    display:block;

}




/* HERO */


.hero{

    min-height:700px;

    padding-top:120px;

}



.hero h1{

    font-size:36px;

}



.hero p{

    font-size:16px;

}



.hero-buttons{

    flex-direction:column;

}



.hero-buttons a{

    width:100%;

}




/* HERO PAGINAS */


.page-hero{

    padding-top:140px;

    padding-bottom:70px;

}



.page-hero h1{

    font-size:34px;

}




/* TITULOS */


.section-header h2{

    font-size:32px;

}




.about-grid{

    grid-template-columns:1fr;

}



.about-text h2{

    font-size:32px;

}




/* CARDS */


.features-grid{

    grid-template-columns:1fr;

}



.platform-grid{

    grid-template-columns:1fr;

}



.services-grid{

    grid-template-columns:1fr;

}



.trust-grid{

    grid-template-columns:1fr;

}



.footer-grid{

    grid-template-columns:1fr;

}





/* PREÇOS */


.price-card{

    padding:35px 25px;

}




/* DEMO */


.demo-hero{

    padding-top:120px;

}



.demo-content h1{

    font-size:36px;

}



.demo-form-wrapper{

    padding:30px 20px;

}





/* LOGIN PROPRIETÁRIO */


.owner-login{

    padding-top:110px;

}



.login-box{

    padding:35px 25px;

}



.login-box h1{

    font-size:28px;

}




/* CTA */


.cta h2{

    font-size:32px;

}



.cta p{

    font-size:16px;

}




/* EMPRESA */


.company-grid{

    grid-template-columns:1fr;

}



.company-content h1{

    font-size:36px;

}




}







/* ==========================
TELAS PEQUENAS
========================== */


@media(max-width:480px){



.hero h1{

    font-size:32px;

}



.page-hero h1{

    font-size:30px;

}



.btn-primary,
.btn-secondary{

    padding:14px 25px;

}



.login-box{

    border-radius:18px;

}



.cta{

    padding:70px 20px;

}



}






/* ==========================
CORREÇÃO IMAGENS
========================== */


.hero img,
.dashboard-image img,
.about-image img,
.platform-image img{

    object-fit:cover;

}





/* ==========================
ÁREA PROPRIETÁRIO
MANTIDA
========================== */


.owner-login .btn-primary{

    background:var(--stay-turquoise);

}



.owner-login a{

    transition:.3s;

}



.owner-login a:hover{

    color:var(--stay-turquoise);

}




/* ==========================
FINAL
========================== */


body{

    overflow-x:hidden;

}

/* ======================================
   SOLUÇÕES STAYPOLO - CARDS
====================================== */


.solutions {
    padding: 90px 0;
}



.solutions .section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
}



.solutions .section-header span {
    color: #2563eb;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
}



.solutions .section-header h2 {
    font-size: 38px;
    font-weight: 800;
    margin: 15px 0;
    color: #111827;
}



.solutions .section-header p {
    color: #6b7280;
    font-size: 18px;
}





/* GRID DOS CARDS */

.solutions-grid {

    display: grid;

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

    gap: 30px;

}





/* CARD */

.solution-card {

    background: #ffffff;

    border-radius: 18px;

    padding: 35px 30px;

    border: 1px solid #e5e7eb;

    transition: all .3s ease;

    text-align: left;

}





.solution-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 40px rgba(0,0,0,0.08);

    border-color: #2563eb;

}





/* ICONE */

.solution-card i {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #2563eb;

    color: #ffffff;

    border-radius: 14px;

    font-size: 24px;

    margin-bottom: 25px;

}





.solution-card h3 {

    font-size: 22px;

    font-weight: 700;

    color: #111827;

    margin-bottom: 15px;

}





.solution-card p {

    color: #6b7280;

    line-height: 1.7;

    font-size: 16px;

    margin-bottom: 25px;

}





.solution-card a {

    display: inline-flex;

    align-items: center;

    color: #2563eb;

    font-weight: 700;

    text-decoration: none;

    transition: .3s;

}





.solution-card a:hover {

    color: #1d4ed8;

}







/* RESPONSIVO */

@media(max-width: 992px){


    .solutions-grid {

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

    }


}




@media(max-width: 600px){


    .solutions-grid {

        grid-template-columns: 1fr;

    }


    .solutions .section-header h2 {

        font-size: 30px;

    }


}


/* ==========================================
   AJUSTES FINAIS INDEX NOVO STAYPOLO
   COLOCAR NO FINAL DO SITENOVO.CSS
========================================== */


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

.whatsapp-float{

    position:fixed;

    right:25px;

    bottom:25px;

    width:60px;

    height:60px;

    background:#25d366;

    color:white;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    z-index:999;

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

    transition:.3s;

}


.whatsapp-float:hover{

    transform:translateY(-5px);

}



/* ==========================
BENEFÍCIOS
========================== */


.benefits{

    background:#ffffff;

}



.benefits-grid{

    display:grid;

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

    gap:25px;

}



.benefit-card{

    background:white;

    padding:35px 25px;

    border-radius:20px;

    text-align:center;

    box-shadow:

    0 10px 30px rgba(6,24,44,.08);

    transition:.3s;

}



.benefit-card:hover{

    transform:translateY(-8px);

}



.benefit-card i{

    font-size:40px;

    color:var(--stay-turquoise);

    margin-bottom:20px;

}



.benefit-card h3{

    margin-bottom:15px;

    font-size:22px;

}



.benefit-card p{

    color:#64748b;

}



/* ==========================
SOLUTION CARD ANIMATION
========================== */


.solution-card{

    opacity:1;

    transform:none;

}



/* ==========================
BOTÃO NO MENU
========================== */


.navbar .btn-primary{

    color:white!important;

}



.navbar .btn-primary:hover{

    color:white!important;

}



/* ==========================
CARDS SEM SUMIR
========================== */


.trust-card,
.feature-item,
.service-card,
.platform-card,
.solution-card,
.benefit-card{

    opacity:1;

    transform:none;

}



/* ==========================
MELHORIA PAGE HERO
========================== */


.page-hero{

    min-height:650px;

    display:flex;

    align-items:center;

}



.page-hero h1{

    font-weight:800;

    letter-spacing:-1px;

}



.page-hero p{

    margin-top:20px;

    margin-bottom:35px;

}



/* ==========================
SOLUTIONS GRID NOVO
========================== */


.solutions-grid{

    display:grid;

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

    gap:30px;

}



.solution-card{

    background:white;

    border-radius:20px;

    padding:35px 30px;

    border:1px solid var(--stay-border);

    transition:.3s;

}



.solution-card:hover{

    transform:translateY(-8px);

    box-shadow:

    0 20px 40px rgba(6,24,44,.10);

}



.solution-card i{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,199,217,.12);

    color:var(--stay-turquoise);

    border-radius:15px;

    font-size:25px;

    margin-bottom:25px;

}



.solution-card h3{

    margin-bottom:15px;

}



.solution-card p{

    color:#64748b;

    margin-bottom:20px;

}



.solution-card a{

    color:var(--stay-turquoise);

    font-weight:700;

}



/* ==========================
RESPONSIVO FINAL
========================== */


@media(max-width:1024px){


    .benefits-grid{

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

    }


    .solutions-grid{

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

    }


}



@media(max-width:768px){


    .benefits-grid{

        grid-template-columns:1fr;

    }


    .solutions-grid{

        grid-template-columns:1fr;

    }


    .whatsapp-float{

        width:55px;

        height:55px;

        font-size:26px;

        right:18px;

        bottom:18px;

    }


}

/* ==========================
BENEFITS
========================== */


.benefits{

    background:#f8fafc;

}



.benefits-grid{

    display:grid;

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

    gap:25px;

}




.benefit-card{


    background:white;

    padding:35px 25px;

    border-radius:20px;

    text-align:center;

    box-shadow:

    0 10px 30px rgba(6,24,44,.08);

    transition:.3s;

}




.benefit-card:hover{

    transform:translateY(-8px);

}




.benefit-card i{

    font-size:38px;

    color:var(--stay-turquoise);

    margin-bottom:20px;

}




.benefit-card h3{

    font-size:22px;

    margin-bottom:15px;

}




.benefit-card p{

    color:#64748b;

}



/* RESPONSIVO */

@media(max-width:1024px){

    .benefits-grid{

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

    }

}



@media(max-width:768px){

    .benefits-grid{

        grid-template-columns:1fr;

    }

}



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


.btn-access{

    display:flex;

    align-items:center;

    gap:7px;

    padding:10px 15px;

    border-radius:10px;

    font-size:14px;

    font-weight:700;

    text-decoration:none;

    transition:.3s;

}



.btn-access i{

    font-size:14px;

}



/* Proprietário */

.owner-access{

    color:#087f8c;

    background:#e8f8fa;

    border:1px solid #bdeef3;

}



.owner-access:hover{

    background:#d5f4f8;

    transform:translateY(-2px);

}



/* Imobiliária */

.company-access{

    color:#243b53;

    background:#eef2f7;

    border:1px solid #d9e2ec;

}



.company-access:hover{

    background:#e2e8f0;

    transform:translateY(-2px);

}

/* =====================================================
   BENEFÍCIOS DO PROCESSO
===================================================== */

.processo-beneficios {

    display: grid;

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

    gap: 14px;

    margin-top: 28px;

    margin-bottom: 28px;

}


.processo-beneficio {

    padding: 18px;

    border-radius: 13px;

    border: 1px solid;

    transition:
        transform .2s,
        box-shadow .2s;

}


.processo-beneficio:hover {

    transform: translateY(-2px);

    box-shadow:
        0 8px 22px rgba(0,0,0,.07);

}


/* =====================================================
   ÍCONE
===================================================== */

.processo-beneficio-icon {

    width: 38px;

    height: 38px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 12px;

    font-size: 15px;

}


/* =====================================================
   TÍTULO
===================================================== */

.processo-beneficio h3 {

    margin: 0 0 6px;

    font-size: 13px;

    font-weight: 800;

}


/* =====================================================
   DESCRIÇÃO
===================================================== */

.processo-beneficio p {

    margin: 0;

    font-size: 11px;

    line-height: 1.55;

}


/* =====================================================
   VERDE
===================================================== */

.processo-beneficio.seguro {

    background: #f0faf3;

    border-color: #ccebd5;

    color: #236b38;

}


.processo-beneficio.seguro
.processo-beneficio-icon {

    background: #d9f3e1;

    color: #25833d;

}


/* =====================================================
   AZUL
===================================================== */

.processo-beneficio.suporte {

    background: #f0f6ff;

    border-color: #d1e2fa;

    color: #285b91;

}


.processo-beneficio.suporte
.processo-beneficio-icon {

    background: #dcecff;

    color: #3478bd;

}


/* =====================================================
   ROXO
===================================================== */

.processo-beneficio.simples {

    background: #f7f2ff;

    border-color: #e3d5f7;

    color: #68449a;

}


.processo-beneficio.simples
.processo-beneficio-icon {

    background: #eadcff;

    color: #7950b3;

}


/* =====================================================
   RESPONSIVO
===================================================== */

@media (max-width: 850px) {

    .processo-beneficios {

        grid-template-columns: 1fr;

    }

}


/* =====================================================
   STAYPOLO - INFORMAÇÕES DA CONTRATAÇÃO
===================================================== */

.contratacao-info {

    margin-top: 25px;

    padding-top: 22px;

    border-top: 1px solid #eceef1;

    display: flex;

    flex-direction: column;

    gap: 12px;

}


/* =====================================================
   ITEM
===================================================== */

.contratacao-item {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    padding: 13px;

    border-radius: 11px;

    transition: .2s ease;

}


.contratacao-item:hover {

    transform: translateY(-1px);

}


/* =====================================================
   ÍCONE
===================================================== */

.contratacao-item-icon {

    width: 36px;

    height: 36px;

    min-width: 36px;

    border-radius: 9px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 14px;

}


/* =====================================================
   TEXTO
===================================================== */

.contratacao-item-content {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.contratacao-item-content strong {

    font-size: 12px;

    font-weight: 800;

    color: #292929;

}


.contratacao-item-content span {

    font-size: 11px;

    line-height: 1.5;

    color: #777;

}


/* =====================================================
   CONTRATAÇÃO SEGURA
===================================================== */

.contratacao-item.segura {

    background: #f0f8f3;

    border: 1px solid #d7ecde;

}


.contratacao-item.segura
.contratacao-item-icon {

    background: #dff2e5;

    color: #25833d;

}


/* =====================================================
   SUPORTE
===================================================== */

.contratacao-item.suporte {

    background: #f1f6fc;

    border: 1px solid #dbe8f5;

}


.contratacao-item.suporte
.contratacao-item-icon {

    background: #e0edf9;

    color: #2874b8;

}


/* =====================================================
   PROCESSO SIMPLES
===================================================== */

.contratacao-item.processo {

    background: #faf7ef;

    border: 1px solid #eee5ce;

}


.contratacao-item.processo
.contratacao-item-icon {

    background: #f3ead2;

    color: #9a7425;

}


/* =====================================================
   RESPONSIVO
===================================================== */

@media (max-width: 650px) {

    .contratacao-info {

        margin-top: 22px;

        padding-top: 18px;

    }


    .contratacao-item {

        padding: 12px;

    }


    .contratacao-item-icon {

        width: 34px;

        height: 34px;

        min-width: 34px;

    }

}

/* =====================================================
   STAYPOLO - BENEFÍCIOS DA CONTRATAÇÃO
===================================================== */

.contratacao-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;

    margin-top: 25px !important;
    padding-top: 22px !important;

    border-top: 1px solid #eceef1 !important;
}


/* =====================================================
   ITEM
===================================================== */

.contratacao-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;

    padding: 14px !important;

    border-radius: 12px !important;

    transition: all .2s ease !important;
}


.contratacao-item:hover {
    transform: translateY(-2px) !important;
}


/* =====================================================
   ÍCONE
===================================================== */

.contratacao-item-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 10px !important;

    font-size: 15px !important;
}


/* =====================================================
   TEXTO
===================================================== */

.contratacao-item-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}


.contratacao-item-content strong {
    display: block !important;

    font-size: 12px !important;
    font-weight: 800 !important;

    color: #222222 !important;
}


.contratacao-item-content span {
    display: block !important;

    font-size: 11px !important;
    line-height: 1.5 !important;

    color: #707070 !important;
}


/* =====================================================
   1 - CONTRATAÇÃO SEGURA
===================================================== */

.contratacao-item.segura {
    background: #eaf7ee !important;

    border: 1px solid #c9e8d2 !important;
}


.contratacao-item.segura .contratacao-item-icon {
    background: #ccefd6 !important;

    color: #20843b !important;
}


/* =====================================================
   2 - SUPORTE
===================================================== */

.contratacao-item.suporte {
    background: #eaf3fb !important;

    border: 1px solid #c9dfef !important;
}


.contratacao-item.suporte .contratacao-item-icon {
    background: #d3e8f8 !important;

    color: #1769a8 !important;
}


/* =====================================================
   3 - PROCESSO SIMPLES
===================================================== */

.contratacao-item.processo {
    background: #fff8e8 !important;

    border: 1px solid #f0dfb5 !important;
}


.contratacao-item.processo .contratacao-item-icon {
    background: #f7e8bd !important;

    color: #9a7015 !important;
}


/* =====================================================
   RESPONSIVO
===================================================== */

@media (max-width: 650px) {

    .contratacao-info {
        margin-top: 22px !important;
        padding-top: 18px !important;
    }


    .contratacao-item {
        padding: 12px !important;
    }


    .contratacao-item-icon {
        width: 35px !important;
        height: 35px !important;
        min-width: 35px !important;
    }

}