/* projetos.css */

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

body{
    font-family: 'Nunito', sans-serif;
    background: #0f0f0f;
    color: white;
}

/* HERO */

.projects-hero{
    width: 100%;
    min-height: 45vh;
    background: linear-gradient(135deg, #3d1d66, #140022);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    text-align: center;
}

.projects-hero h1{
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(4rem, 9vw, 7rem);
    letter-spacing: 3px;
    margin-bottom: 1rem;
}

.projects-hero p{
    max-width: 700px;
    font-size: 1.2rem;
    opacity: 0.9;
}

/* PROJETOS */

.projects-container{
    max-width: 1300px;
    margin: auto;
    padding: 5rem 2rem;

    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.project-card{
    background: #1b1b1b;
    border-radius: 20px;
    overflow: hidden;

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

    transition: 0.4s;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.project-card:hover{
    transform: translateY(-10px);
}

.project-card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-content{
    padding: 3rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.project-tag{
    background: #6c2bd9;
    width: fit-content;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.project-content h2{
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

.project-content p{
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.project-content ul{
    margin-bottom: 2rem;
    padding-left: 1.2rem;
}

.project-content li{
    margin-bottom: 0.7rem;
}

.project-content a{
    width: fit-content;

    background: white;
    color: black;

    text-decoration: none;
    padding: 1rem 2rem;
    border-radius: 10px;

    font-weight: 700;

    transition: 0.3s;
}

.project-content a:hover{
    background: #6c2bd9;
    color: white;
}

/* AQUAFLOW SECTION */

.aquaflow-section{

    background: #0d0d0d;

    padding: 8rem 2rem;

    position: relative;

    overflow: hidden;

}

.aquaflow-section::before{

    content: '';

    position: absolute;

    width: 400px;
    height: 400px;

    background: rgba(140, 82, 255, 0.18);

    filter: blur(120px);

    top: -100px;
    right: -100px;

    border-radius: 50%;

}

.aquaflow-container{

    max-width: 1400px;

    margin: auto;

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

    gap: 4rem;

    align-items: center;

    position: relative;
    z-index: 2;

}

.aquaflow-image img{

    width: 100%;

    border-radius: 20px;

    object-fit: cover;

    box-shadow: 0 20px 60px rgba(0,0,0,0.5);

    transition: 0.4s;

}

.aquaflow-image img:hover{

    transform: scale(1.03);

}

.aquaflow-tag{

    display: inline-block;

    background: rgba(140, 82, 255, 0.15);

    color: #b892ff;

    border: 1px solid rgba(140, 82, 255, 0.3);

    padding: 0.6rem 1rem;

    border-radius: 50px;

    font-size: 0.9rem;

    letter-spacing: 1px;

    margin-bottom: 1.5rem;

}

.aquaflow-content h2{

    font-family: 'Bebas Neue', sans-serif;

    font-size: 5rem;

    color: white;

    letter-spacing: 3px;

    margin-bottom: 1rem;

}

.aquaflow-description{

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

    font-size: 1.15rem;

    line-height: 1.8;

    margin-bottom: 2rem;

}

.aquaflow-features{

    display: flex;

    flex-direction: column;

    gap: 1rem;

    margin-bottom: 2.5rem;

}

.feature-item{

    display: flex;

    align-items: center;

    gap: 1rem;

    color: white;

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

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

    padding: 1rem 1.2rem;

    border-radius: 14px;

    transition: 0.3s;

}

.feature-item:hover{

    border-color: rgba(140, 82, 255, 0.4);

    transform: translateX(5px);

}

.feature-item i{

    font-size: 1.3rem;

    color: #b892ff;

}

.aquaflow-btn{

    background: linear-gradient(135deg, #8c52ff, #5f2eea);

    color: white;

    border-radius: 12px;

}

.aquaflow-btn:hover{

    box-shadow: 0 10px 35px rgba(140, 82, 255, 0.35);

}

/* RESPONSIVO */

@media(max-width: 900px){

    .aquaflow-container{

        grid-template-columns: 1fr;

    }

    .aquaflow-content h2{

        font-size: 3.5rem;

    }

}

@media(max-width: 600px){

    .aquaflow-content h2{

        font-size: 2.8rem;

    }

}

/* BEM-ESTAR SECTION */

.bemestar-section{

    background: #080808;

    padding: 8rem 2rem;

    position: relative;

    overflow: hidden;

}

.bemestar-section::before{

    content: '';

    position: absolute;

    width: 450px;
    height: 450px;

    background: rgba(140, 82, 255, 0.15);

    filter: blur(130px);

    left: -120px;
    bottom: -120px;

    border-radius: 50%;

}

.bemestar-container{

    max-width: 1400px;

    margin: auto;

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

    gap: 4rem;

    align-items: center;

    position: relative;
    z-index: 2;

}

.bemestar-image img{

    width: 100%;

    border-radius: 24px;

    object-fit: cover;

    box-shadow: 0 25px 60px rgba(0,0,0,0.45);

    transition: 0.4s;

}

.bemestar-image img:hover{

    transform: scale(1.03);

}

.bemestar-tag{

    display: inline-block;

    background: rgba(140, 82, 255, 0.15);

    border: 1px solid rgba(140, 82, 255, 0.3);

    color: #c5a3ff;

    padding: 0.6rem 1rem;

    border-radius: 50px;

    font-size: 0.9rem;

    letter-spacing: 1px;

    margin-bottom: 1.5rem;

}

.bemestar-content h2{

    font-family: 'Bebas Neue', sans-serif;

    font-size: 5rem;

    color: white;

    letter-spacing: 3px;

    margin-bottom: 1rem;

}

.bemestar-description{

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

    font-size: 1.15rem;

    line-height: 1.9;

    margin-bottom: 2rem;

}

.bemestar-features{

    display: flex;

    flex-direction: column;

    gap: 1rem;

    margin-bottom: 2.5rem;

}

.bemestar-item{

    display: flex;

    align-items: center;

    gap: 1rem;

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

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

    padding: 1rem 1.2rem;

    border-radius: 14px;

    color: white;

    transition: 0.3s;

}

.bemestar-item:hover{

    transform: translateX(6px);

    border-color: rgba(140,82,255,0.4);

}

.bemestar-item i{

    font-size: 1.3rem;

    color: #b892ff;

}

.bemestar-btn{

    background: linear-gradient(135deg,
    #8c52ff,
    #5f2eea);

    color: white;

    border-radius: 12px;

}

.bemestar-btn:hover{

    box-shadow: 0 12px 35px rgba(140,82,255,0.35);

}

/* RESPONSIVO */

@media(max-width: 900px){

    .bemestar-container{

        grid-template-columns: 1fr;

    }

    .bemestar-content h2{

        font-size: 3.5rem;

    }

}

@media(max-width: 600px){

    .bemestar-content h2{

        font-size: 2.7rem;

    }

}

/* PETCONTROL SECTION */

.petcontrol-section{

    background: #0b0b0f;

    padding: 8rem 2rem;

    position: relative;

    overflow: hidden;

}

.petcontrol-section::before{

    content: '';

    position: absolute;

    width: 420px;
    height: 420px;

    background: rgba(140,82,255,0.18);

    filter: blur(130px);

    top: -120px;
    left: -120px;

    border-radius: 50%;

}

.petcontrol-container{

    max-width: 1400px;

    margin: auto;

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

    gap: 4rem;

    align-items: center;

    position: relative;
    z-index: 2;

}

.petcontrol-image img{

    width: 100%;

    border-radius: 24px;

    object-fit: cover;

    box-shadow: 0 25px 60px rgba(0,0,0,0.45);

    transition: 0.4s;

}

.petcontrol-image img:hover{

    transform: scale(1.03);

}

.petcontrol-tag{

    display: inline-block;

    background: rgba(140,82,255,0.15);

    border: 1px solid rgba(140,82,255,0.3);

    color: #c5a3ff;

    padding: 0.6rem 1rem;

    border-radius: 50px;

    font-size: 0.9rem;

    letter-spacing: 1px;

    margin-bottom: 1.5rem;

}

.petcontrol-content h2{

    font-family: 'Bebas Neue', sans-serif;

    font-size: 5rem;

    color: white;

    letter-spacing: 3px;

    margin-bottom: 1rem;

}

.petcontrol-description{

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

    font-size: 1.15rem;

    line-height: 1.9;

    margin-bottom: 2rem;

}

.petcontrol-features{

    display: flex;

    flex-direction: column;

    gap: 1rem;

    margin-bottom: 2.5rem;

}

.petcontrol-item{

    display: flex;

    align-items: center;

    gap: 1rem;

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

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

    padding: 1rem 1.2rem;

    border-radius: 14px;

    color: white;

    transition: 0.3s;

}

.petcontrol-item:hover{

    transform: translateX(6px);

    border-color: rgba(140,82,255,0.4);

}

.petcontrol-item i{

    font-size: 1.3rem;

    color: #b892ff;

}

.petcontrol-btn{

    background: linear-gradient(135deg,
    #8c52ff,
    #5f2eea);

    color: white;

    border-radius: 12px;

}

.petcontrol-btn:hover{

    box-shadow: 0 12px 35px rgba(140,82,255,0.35);

}

/* RESPONSIVO */

@media(max-width: 900px){

    .petcontrol-container{

        grid-template-columns: 1fr;

    }

    .petcontrol-content h2{

        font-size: 3.5rem;

    }

}

@media(max-width: 600px){

    .petcontrol-content h2{

        font-size: 2.7rem;

    }

}


/* AQUAFLOW ANALYTICS */

.aquaflow-analytics{

    padding: 8rem 2rem;

    background: #07070d;

}

.analytics-header{

    text-align: center;

    margin-bottom: 5rem;

}

.analytics-header span{

    color: #b892ff;

    letter-spacing: 2px;

    font-size: 0.9rem;

}

.analytics-header h2{

    font-family: 'Bebas Neue', sans-serif;

    font-size: 5rem;

    color: white;

    letter-spacing: 3px;

    margin: 1rem 0;

}

.analytics-header p{

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

    max-width: 750px;

    margin: auto;

    line-height: 1.8;

}

.analytics-grid{

    max-width: 1400px;

    margin: auto;

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px,1fr));

    gap: 2rem;

}

.analytics-card{

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

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

    border-radius: 24px;

    padding: 3rem 2rem;

    transition: 0.4s;

    position: relative;

    overflow: hidden;

}

.analytics-card:hover{

    transform: translateY(-10px);

    border-color: rgba(140,82,255,0.4);

    box-shadow: 0 20px 45px rgba(0,0,0,0.35);

}

.analytics-icon{

    width: 75px;
    height: 75px;

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

    border-radius: 18px;

    background: rgba(140,82,255,0.12);

    margin-bottom: 2rem;

}

.analytics-icon i{

    font-size: 2rem;

    color: #b892ff;

}

.analytics-card h3{

    color: white;

    font-size: 1.7rem;

    margin-bottom: 1rem;

}

.analytics-card p{

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

    line-height: 1.8;

    margin-bottom: 2rem;

}

.analytics-number{

    color: #b892ff;

    font-size: 2rem;

    font-weight: 700;

}

/* AQUAFLOW PRODUCTS */

.aquaflow-products{

    padding: 8rem 2rem;

    background: #0b0b10;

}

.products-header{

    text-align: center;

    margin-bottom: 5rem;

}

.products-header span{

    color: #b892ff;

    letter-spacing: 2px;

    font-size: 0.9rem;

}

.products-header h2{

    font-family: 'Bebas Neue', sans-serif;

    font-size: 5rem;

    color: white;

    letter-spacing: 3px;

    margin: 1rem 0;

}

.products-header p{

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

    max-width: 750px;

    margin: auto;

    line-height: 1.8;

}

.aquaflow-products-grid{

    max-width: 1400px;

    margin: auto;

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(320px,1fr));

    gap: 2rem;

}

.aquaflow-product-card{

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

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

    border-radius: 24px;

    overflow: hidden;

    transition: 0.4s;

}

.aquaflow-product-card:hover{

    transform: translateY(-10px);

    border-color: rgba(140,82,255,0.4);

    box-shadow: 0 20px 45px rgba(0,0,0,0.35);

}

.aquaflow-product-card img{

    width: 100%;

    height: 280px;

    object-fit: cover;

}

.aquaflow-product-info{

    padding: 2rem;

}

.aquaflow-product-info h3{

    color: white;

    font-size: 1.7rem;

    margin-bottom: 0.8rem;

}

.aquaflow-product-info p{

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

    line-height: 1.8;

    margin-bottom: 1.5rem;

}

.aquaflow-product-bottom{

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.aquaflow-product-bottom span{

    color: #b892ff;

    font-size: 1.3rem;

    font-weight: 700;

}

.aquaflow-product-bottom a{

    background: linear-gradient(135deg,
    #8c52ff,
    #5f2eea);

    color: white;

    text-decoration: none;

    padding: 0.8rem 1.4rem;

    border-radius: 10px;

    transition: 0.3s;

}

.aquaflow-product-bottom a:hover{

    transform: scale(1.05);

    box-shadow: 0 10px 30px rgba(140,82,255,0.35);

}

/* RESPONSIVO */

@media(max-width: 600px){

    .analytics-header h2,
    .products-header h2{

        font-size: 3rem;

    }

}

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

html,
body{
    width: 100%;
    height: 100%;
}

body{

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

    background:
    radial-gradient(circle at top left,
    rgba(140,82,255,0.25),
    transparent 30%),

    radial-gradient(circle at bottom right,
    rgba(95,46,234,0.2),
    transparent 30%),

    #050507;

    min-height: 100vh;

    overflow-x: hidden;

    color: white;

}

/* SECTION */

.register-section{

    width: 100%;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 2rem;

    position: relative;

    overflow: hidden;

}

/* GLOWS */

.bg-glow{

    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    filter: blur(120px);

    opacity: 0.35;

    z-index: 1;

}

.glow-1{

    background: #8c52ff;

    top: -120px;
    left: -120px;

}

.glow-2{

    background: #5f2eea;

    bottom: -120px;
    right: -120px;

}

/* CARD */

.register-card{

    width: 100%;

    max-width: 1250px;

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

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

    border-radius: 30px;

    overflow: hidden;

    display: grid;

    grid-template-columns: 1fr 1fr;

    backdrop-filter: blur(18px);

    position: relative;

    z-index: 2;

    box-shadow:
    0 25px 60px rgba(0,0,0,0.45);

    max-height: 92vh;

    overflow-y: auto;

}

/* LEFT */

.register-left{

    padding: 4rem;

    background:
    linear-gradient(
    135deg,
    rgba(140,82,255,0.25),
    rgba(95,46,234,0.08));

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.mini-title{

    color: #c8a8ff;

    letter-spacing: 4px;

    font-size: 0.9rem;

    margin-bottom: 1.5rem;

}

.register-left h1{

    font-family: 'Bebas Neue', sans-serif;

    font-size: clamp(3.5rem, 6vw, 6rem);

    color: white;

    line-height: 0.95;

    letter-spacing: 3px;

    margin-bottom: 1.5rem;

}

.register-left p{

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

    line-height: 1.9;

    font-size: 1.05rem;

}

/* RIGHT */

.register-right{

    padding: 4rem;

    display: flex;

    flex-direction: column;

    justify-content: center;

}

/* FORM */

form{

    display: flex;

    flex-direction: column;

    gap: 1.3rem;

}

form h2{

    color: white;

    font-size: 2.3rem;

    margin-bottom: 0.5rem;

}

/* INPUTS */

.input-group{

    display: flex;

    flex-direction: column;

    gap: 0.7rem;

}

.input-group label{

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

    font-size: 0.95rem;

}

.input-group input{

    width: 100%;

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

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

    padding: 1rem 1.2rem;

    border-radius: 14px;

    color: white;

    outline: none;

    transition: 0.3s;

    font-size: 1rem;

}

.input-group input:focus{

    border-color: #8c52ff;

    box-shadow:
    0 0 25px rgba(140,82,255,0.3);

}

/* BUTTON */

button{

    border: none;

    padding: 1rem;

    border-radius: 14px;

    background:
    linear-gradient(
    135deg,
    #8c52ff,
    #5f2eea);

    color: white;

    font-size: 1rem;

    font-weight: 700;

    cursor: pointer;

    transition: 0.3s;

    margin-top: 0.5rem;

}

button:hover{

    transform: translateY(-4px);

    box-shadow:
    0 15px 35px rgba(140,82,255,0.35);

}

/* RESULT */

.result{

    margin-top: 2rem;

    background: rgba(140,82,255,0.08);

    border: 1px solid rgba(140,82,255,0.25);

    padding: 2rem;

    border-radius: 20px;

}

.result h3{

    color: white;

    margin-bottom: 1rem;

}

.result p{

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

    margin-bottom: 1.5rem;

}

.credentials{

    display: flex;

    flex-direction: column;

    gap: 1rem;

}

.credentials span{

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

    padding: 1rem;

    border-radius: 12px;

    color: white;

}

/* PLANOS */

.plans{

    margin-top: 2.5rem;

}

.plans h2{

    color: white;

    margin-bottom: 2rem;

    font-size: 2rem;

}

.plans-grid{

    display: grid;

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

    gap: 1.2rem;

}

.plan-card{

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

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

    padding: 1.7rem;

    border-radius: 20px;

    transition: 0.3s;

}

.plan-card:hover{

    transform: translateY(-8px);

    border-color: #8c52ff;

    box-shadow:
    0 10px 30px rgba(140,82,255,0.2);

}

.plan-card h3{

    color: white;

    font-size: 1.5rem;

    margin-bottom: 1rem;

}

.plan-card p{

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

    line-height: 1.7;

    margin-bottom: 1.5rem;

    font-size: 0.95rem;

}

.plan-card span{

    display: block;

    color: #b892ff;

    font-weight: 700;

    margin-bottom: 2rem;

}

.plan-card a{

    display: inline-block;

    background:
    linear-gradient(
    135deg,
    #8c52ff,
    #5f2eea);

    color: white;

    text-decoration: none;

    padding: 0.9rem 1.5rem;

    border-radius: 12px;

    font-weight: 700;

    transition: 0.3s;

}

.plan-card a:hover{

    transform: scale(1.05);

}

.premium-plan{

    border: 1px solid rgba(140,82,255,0.35);

    box-shadow:
    0 0 35px rgba(140,82,255,0.15);

}

/* SCROLLBAR */

.register-card::-webkit-scrollbar{

    width: 8px;

}

.register-card::-webkit-scrollbar-thumb{

    background: #8c52ff;

    border-radius: 20px;

}

/* RESPONSIVO */

@media(max-width: 1100px){

    .plans-grid{

        grid-template-columns: 1fr;

    }

}

@media(max-width: 950px){

    body{

        overflow-y: auto;

    }

    .register-card{

        grid-template-columns: 1fr;

        max-height: none;

    }

    .register-left,
    .register-right{

        padding: 3rem;

    }

}

@media(max-width: 600px){

    .register-left h1{

        font-size: 4rem;

    }

    .register-left,
    .register-right{

        padding: 2rem;

    }

}

.back-btn{
  position: fixed;
  top: 25px;
  left: 25px;
  z-index: 999;

  display:inline-block;
  padding:1rem 2.5rem;
  background:var(--accent);
  color:#1a0a33;
  text-decoration:none;
  font-weight:700;
  font-size:0.95rem;
  letter-spacing:1px;
  text-transform:uppercase;
  border-radius:50px;
  transition:all 0.3s ease;
}

.back-btn:hover{
  background:#d8a4ff;
  transform:translateY(-3px);
  box-shadow:0 15px 40px rgba(192,132,252,0.4);
}





































/* RESPONSIVO */

@media(max-width: 900px){

    .project-card{
        grid-template-columns: 1fr;
    }

    .project-card img{
        height: 300px;
    }

    .project-content{
        padding: 2rem;
    }

    .project-content h2{
        font-size: 2.2rem;
    }
}

.btn-voltar{

    position: fixed;

    top: 20px;
    left: 20px;

    z-index: 9999;

    background: #8c52ff;

    color: white;

    padding: 12px 20px;

    border-radius: 50px;

    text-decoration: none;

    font-weight: bold;

    transition: 0.3s;
}

.btn-voltar:hover{

    transform: translateY(-2px);

    background: #6d3be6;

}

/* BOTÃO VER MAIS DETALHES */

.cta-button{

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 16px 32px;

    border-radius: 50px;

    text-decoration: none;

    font-weight: 700;

    font-size: 1rem;

    letter-spacing: 1px;

    transition: all 0.3s ease;

    position: relative;

    overflow: hidden;
}

.aquaflow-btn{

    background: linear-gradient(
    135deg,
    #8c52ff,
    #5f2eea);

    color: white;

    box-shadow:
    0 10px 30px rgba(140,82,255,0.35);
}

.aquaflow-btn:hover{

    transform: translateY(-4px);

    box-shadow:
    0 20px 40px rgba(140,82,255,0.5);
}

.aquaflow-btn::before{

    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 100%;
    height: 100%;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.25),
    transparent);

    transition: 0.6s;
}

.aquaflow-btn:hover::before{

    left: 100%;
}

@media(max-width:768px){

    .cta-button{

        width: 100%;

        text-align: center;
    }

}