/* ==========================================================
   GUSTAVO CATRINCK | STYLE.CSS
   PARTE 1/4
   Reset • Variáveis • Base • Header • Hero
========================================================== */

/* ---------- RESET ---------- */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Inter",sans-serif;
    background:#F7F5F2;
    color:#303030;
    line-height:1.75;
    -webkit-font-smoothing:antialiased;
}

img{
    display:block;
    max-width:100%;
}

a{
    text-decoration:none;
    color:inherit;
}

button{
    border:none;
    background:none;
    cursor:pointer;
    font-family:inherit;
}

ul{
    list-style:none;
}

/* ---------- VARIÁVEIS ---------- */

:root{

    --background:#F7F5F2;
    --surface:#FFFFFF;

    --primary:#6F7865;
    --primary-dark:#58614F;

    --text:#2F2F2F;
    --text-light:#666666;

    --border:#E7E2DB;

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

    --radius:22px;

    --transition:.35s ease;

    --container:1180px;

}

/* ---------- BASE ---------- */

body{
    background:var(--background);
    color:var(--text);
}

.container{
    width:min(92%,var(--container));
    margin:auto;
}

section{
    padding:110px 0;
}

h1,h2,h3{
    font-family:"Playfair Display",serif;
    color:#222;
    line-height:1.2;
    font-weight:600;
}

h1{
    font-size:clamp(2.5rem,5vw,4.5rem);
    margin-bottom:28px;
}

h2{
    font-size:clamp(2rem,4vw,3.2rem);
    margin-bottom:22px;
}

h3{
    font-size:1.35rem;
    margin-bottom:14px;
}

p{
    color:var(--text-light);
    font-size:1.05rem;
}

.section-label{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:20px;

    color:var(--primary);

    font-size:.85rem;

    text-transform:uppercase;

    letter-spacing:2px;

    font-weight:600;

}

.section-label::before{

    content:"";

    width:36px;

    height:2px;

    background:var(--primary);

}

/* ---------- BOTÕES ---------- */

.primary-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:17px 34px;

    border-radius:999px;

    background:var(--primary);

    color:#fff;

    font-weight:600;

    transition:var(--transition);

    box-shadow:0 15px 35px rgba(111,120,101,.25);

}

.primary-button:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

}

.menu-button{

    background:var(--primary);

    color:#fff !important;

    padding:14px 24px;

    border-radius:999px;

    transition:var(--transition);

}

.menu-button:hover{

    background:var(--primary-dark);

}

/* ---------- HEADER ---------- */

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    backdrop-filter:blur(18px);

    background:rgba(247,245,242,.88);

    border-bottom:1px solid rgba(0,0,0,.05);

}

.header .container{

    height:82px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.logo{

    display:flex;

    flex-direction:column;

}

.logo-name{

    font-weight:700;

    letter-spacing:1px;

    font-size:1rem;

}

.logo-sub{

    color:var(--text-light);

    font-size:.83rem;

    margin-top:4px;

}

.desktop-menu{

    display:flex;

    align-items:center;

    gap:34px;

}

.desktop-menu a{

    color:#444;

    transition:var(--transition);

    font-size:.95rem;

}

.desktop-menu a:hover{

    color:var(--primary);

}

.hamburger{

    display:none;

    width:48px;

    height:48px;

    border-radius:50%;

    background:#fff;

    box-shadow:var(--shadow);

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:5px;

}

.hamburger span{

    width:22px;

    height:2px;

    background:#333;

    transition:.3s;

}

/* ---------- MENU MOBILE ---------- */

.mobile-menu{

    position:fixed;

    top:82px;

    left:0;

    width:100%;

    background:#fff;

    display:none;

    flex-direction:column;

    padding:25px;

    box-shadow:var(--shadow);

    z-index:998;

}

.mobile-menu a{

    padding:16px 0;

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

}

.mobile-whatsapp{

    margin-top:20px;

    background:var(--primary);

    color:#fff !important;

    text-align:center;

    border-radius:14px;

    border:none !important;

}

/* ---------- HERO ---------- */

.hero{

    padding-top:170px;

}

.hero-grid{

    display:grid;

    grid-template-columns:1fr 520px;

    gap:70px;

    align-items:center;

}

.hero-tag{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    background:#ECE9E2;

    color:var(--primary);

    font-size:.82rem;

    font-weight:600;

    margin-bottom:28px;

}

.hero-description{

    max-width:620px;

    margin-bottom:38px;

}

.hero-info{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-top:34px;

}

.hero-info span{

    background:#fff;

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

    padding:10px 18px;

    border-radius:999px;

    color:#555;

    font-size:.9rem;

}

.crp{

    margin-top:26px;

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    font-size:.95rem;

}

.crp span{

    color:#777;

}

.hero-image{

    position:relative;

}

.hero-image::before{

    content:"";

    position:absolute;

    inset:-20px;

    background:linear-gradient(
        135deg,
        rgba(111,120,101,.08),
        transparent
    );

    border-radius:32px;

    z-index:-1;

}

.hero-image img{

    width:100%;

    aspect-ratio:4/5;

    object-fit:cover;

    border-radius:30px;

    background:#DDD;

    box-shadow:var(--shadow);

}

/* ==========================================================
   GUSTAVO CATRINCK | STYLE.CSS
   PARTE 2/4
   Identificação • Sobre • TCC
========================================================== */

/* ---------- IDENTIFICAÇÃO ---------- */

.identification{
    background:#FCFBF9;
}

.identification h2{
    max-width:720px;
    margin:0 auto 60px;
    text-align:center;
}

.problem-grid{

    display:grid;

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

    gap:24px;

}

.problem-card{

    background:var(--surface);

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

    border-radius:var(--radius);

    padding:34px 28px;

    transition:var(--transition);

    box-shadow:0 12px 30px rgba(0,0,0,.04);

}

.problem-card:hover{

    transform:translateY(-8px);

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

}

.problem-card h3{

    margin-bottom:16px;

}

.problem-card p{

    color:var(--text-light);

}

/* ---------- SOBRE ---------- */

.about{

    background:var(--background);

}

.about-grid{

    display:grid;

    grid-template-columns:460px 1fr;

    gap:80px;

    align-items:center;

}

.about-image{

    position:relative;

}

.about-image::after{

    content:"";

    position:absolute;

    inset:18px;

    border:1px solid rgba(111,120,101,.15);

    border-radius:28px;

    pointer-events:none;

}

.about-image img{

    width:100%;

    aspect-ratio:4/5;

    object-fit:cover;

    border-radius:28px;

    box-shadow:var(--shadow);

    background:#ddd;

}

.about-content{

    max-width:720px;

}

.about-content h2{

    margin-bottom:34px;

}

.about-content p{

    margin-bottom:22px;

    font-size:1.05rem;

}

.about-content strong{

    color:var(--primary);

    font-weight:600;

}

.about-content p:last-child{

    margin-bottom:0;

}

/* ---------- ABORDAGEM ---------- */

.approach{

    background:#FCFBF9;

}

.approach h2{

    max-width:720px;

}

.approach-grid{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:70px;

    margin-top:60px;

    align-items:center;

}

.approach-text{

    max-width:700px;

}

.approach-text p{

    margin-bottom:22px;

}

.approach-text p:last-child{

    margin-bottom:0;

}

/* ---------- VISUAL TCC ---------- */

.tcc-visual{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:18px;

}

.tcc-box{

    width:260px;

    padding:24px;

    text-align:center;

    background:#fff;

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

    border-radius:18px;

    box-shadow:0 12px 30px rgba(0,0,0,.05);

    font-weight:600;

    letter-spacing:1px;

    color:#333;

    transition:var(--transition);

}

.tcc-box:hover{

    transform:translateY(-6px);

    border-color:rgba(111,120,101,.4);

}

.tcc-arrow{

    font-size:2rem;

    color:var(--primary);

    font-weight:300;

}

/* ---------- DESTAQUES ---------- */

.about strong,
.approach strong{

    color:var(--primary);

}

.about p,
.approach p{

    text-wrap:pretty;

}

/* ---------- ESPAÇAMENTOS ---------- */

.about,
.approach,
.identification{

    position:relative;

}

.about::after,
.approach::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

    width:120px;

    height:1px;

    background:rgba(0,0,0,.06);

}

/* ---------- ANIMAÇÃO SUAVE ---------- */

.problem-card,
.about-image,
.about-content,
.tcc-box{

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        opacity .35s ease;

}

.about-image:hover{

    transform:translateY(-6px);

}

.about-image:hover img{

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

}

.about-content h2,
.approach h2{

    color:#232323;

}

.approach .section-label,
.about .section-label{

    margin-bottom:18px;

}
/* ==========================================================
   GUSTAVO CATRINCK | STYLE.CSS
   PARTE 3/4
   Processo • Avaliações • CTA • Rodapé
========================================================== */

/* ---------- COMO FUNCIONA ---------- */

.process{
    background:var(--background);
}

.process h2{
    max-width:650px;
}

.steps{

    display:grid;

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

    align-items:start;

    gap:26px;

    margin-top:60px;

}

.step{

    background:#fff;

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

    border-radius:var(--radius);

    padding:36px 30px;

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

    transition:var(--transition);

}

.step:hover{

    transform:translateY(-8px);

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

}

.step-number{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    font-weight:700;

    margin-bottom:24px;

}

.step-line{

    align-self:center;

    width:60px;

    height:2px;

    background:rgba(111,120,101,.35);

}

.process-button{

    text-align:center;

    margin-top:60px;

}

/* ---------- AVALIAÇÕES ---------- */

.testimonials{

    background:#FCFBF9;

}

.testimonials h2{

    text-align:center;

}

.section-description{

    text-align:center;

    max-width:620px;

    margin:0 auto 55px;

}

.testimonial-slider{

    display:grid;

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

    gap:28px;

}

.testimonial-card{

    background:#fff;

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

    border-radius:22px;

    padding:34px;

    transition:var(--transition);

    box-shadow:0 15px 40px rgba(0,0,0,.05);

}

.testimonial-card:hover{

    transform:translateY(-8px);

}

.stars{

    color:#D6A93A;

    font-size:1.15rem;

    margin-bottom:18px;

}

.testimonial-card p{

    color:#555;

    margin-bottom:24px;

    font-style:italic;

}

.testimonial-card span{

    color:#777;

    font-size:.9rem;

    font-weight:600;

}

.reviews-note{

    text-align:center;

    margin-top:40px;

    color:#888;

    font-size:.9rem;

}

/* ---------- CTA ---------- */

.cta{

    padding:120px 0;

}

.cta-box{

    background:#fff;

    border-radius:32px;

    padding:80px 60px;

    text-align:center;

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

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

}

.cta-box h2{

    max-width:700px;

    margin:20px auto 25px;

}

.cta-box p{

    max-width:700px;

    margin:0 auto 35px;

}

.cta-small{

    margin-top:24px !important;

    color:#777;

    font-size:.95rem;

}

/* ---------- RODAPÉ ---------- */

footer{

    background:#FFFFFF;

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

}

.footer-grid{

    display:grid;

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

    gap:50px;

    padding:70px 0;

}

.footer-grid h3{

    margin-bottom:18px;

}

.footer-grid h4{

    font-family:Inter,sans-serif;

    font-size:1rem;

    margin-bottom:18px;

    color:#222;

}

.footer-grid p{

    margin-bottom:12px;

}

.footer-grid a{

    display:block;

    margin-bottom:14px;

    color:#666;

    transition:var(--transition);

}

.footer-grid a:hover{

    color:var(--primary);

}

.footer-bottom{

    padding:25px 0;

    text-align:center;

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

}

.footer-bottom p{

    color:#888;

    font-size:.9rem;

}

/* ---------- WHATSAPP ---------- */

.floating-whatsapp{

    position:fixed;

    right:24px;

    bottom:24px;

    width:64px;

    height:64px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 18px 40px rgba(111,120,101,.35);

    transition:var(--transition);

    z-index:999;

}

.floating-whatsapp:hover{

    background:var(--primary-dark);

    transform:translateY(-5px) scale(1.05);

}

/* ==========================================================
   GUSTAVO CATRINCK | STYLE.CSS
   PARTE 4/4
   Responsividade • Animações • Utilitários
========================================================== */

/* ---------- ANIMAÇÕES ---------- */

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(30px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fade{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

.fade-up{
    animation:fadeUp .7s ease both;
}

.fade{
    animation:fade .7s ease both;
}

/* ---------- UTILITÁRIOS ---------- */

.text-center{
    text-align:center;
}

.mt-0{
    margin-top:0;
}

.mt-1{
    margin-top:10px;
}

.mt-2{
    margin-top:20px;
}

.mt-3{
    margin-top:30px;
}

.mt-4{
    margin-top:40px;
}

.mb-1{
    margin-bottom:10px;
}

.mb-2{
    margin-bottom:20px;
}

.mb-3{
    margin-bottom:30px;
}

.mb-4{
    margin-bottom:40px;
}

.hidden{
    display:none;
}

/* ---------- TRANSIÇÕES ---------- */

section{
    transition:opacity .4s ease,
               transform .4s ease;
}

img{
    transition:transform .35s ease;
}

img:hover{
    transform:scale(1.015);
}

.primary-button,
.menu-button,
.problem-card,
.step,
.testimonial-card,
.tcc-box,
.floating-whatsapp{
    transition:all .3s ease;
}

/* ---------- TABLETS ---------- */

@media (max-width:1100px){

.hero-grid{
    grid-template-columns:1fr;
    gap:50px;
}

.about-grid{
    grid-template-columns:1fr;
    gap:50px;
}

.approach-grid{
    grid-template-columns:1fr;
    gap:45px;
}

.steps{
    grid-template-columns:1fr;
}

.step-line{
    display:none;
}

.footer-grid{
    grid-template-columns:1fr 1fr;
}

.hero-content{
    order:2;
}

.hero-image{
    order:1;
}

.hero-description{
    max-width:100%;
}

}

/* ---------- CELULARES ---------- */

@media (max-width:768px){

section{
    padding:80px 0;
}

.header .container{
    height:74px;
}

.desktop-menu{
    display:none;
}

.hamburger{
    display:flex;
}

.mobile-menu.active{
    display:flex;
}

.hero{
    padding-top:130px;
}

.hero-grid{
    gap:35px;
}

.hero h1{
    font-size:2.5rem;
}

.hero-description{
    font-size:1rem;
}

.hero-info{
    flex-direction:column;
    align-items:flex-start;
}

.hero-info span{
    width:100%;
}

.crp{
    flex-direction:column;
    gap:8px;
}

.problem-grid{
    grid-template-columns:1fr;
}

.problem-card{
    padding:28px;
}

.about-image img{
    aspect-ratio:4/4.8;
}

.tcc-box{
    width:100%;
}

.cta-box{
    padding:50px 28px;
    border-radius:24px;
}

.footer-grid{
    grid-template-columns:1fr;
    gap:35px;
}

.footer-bottom{
    padding:18px 0;
}

.floating-whatsapp{
    width:58px;
    height:58px;
    right:18px;
    bottom:18px;
}

}

/* ---------- TELAS MUITO PEQUENAS ---------- */

@media (max-width:480px){

.container{
    width:90%;
}

h1{
    font-size:2.15rem;
}

h2{
    font-size:1.9rem;
}

p{
    font-size:1rem;
}

.primary-button{
    width:100%;
    padding:16px 20px;
}

.menu-button{
    width:100%;
    text-align:center;
}

.hero-info{
    gap:10px;
}

.hero-tag{
    font-size:.75rem;
}

.step{
    padding:28px 24px;
}

.testimonial-card{
    padding:28px;
}

.cta-box{
    padding:42px 22px;
}

}

/* ---------- SCROLLBAR ---------- */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#F3F1ED;
}

::-webkit-scrollbar-thumb{
    background:#B9B3A8;
    border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
    background:#9E988E;
}

/* ---------- SELEÇÃO ---------- */

::selection{
    background:rgba(111,120,101,.18);
    color:#222;
}

/* ---------- FOCO ACESSÍVEL ---------- */

a:focus-visible,
button:focus-visible{
    outline:3px solid rgba(111,120,101,.35);
    outline-offset:4px;
    border-radius:10px;
}

/* ---------- IMPRESSÃO ---------- */

@media print{

.header,
.mobile-menu,
.floating-whatsapp{
    display:none !important;
}

body{
    background:#fff;
    color:#000;
}

section{
    padding:30px 0;
}

.hero{
    padding-top:0;
}

}

/* ==========================================================
   FIM DO ARQUIVO STYLE.CSS
========================================================== */