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

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;
    color:#333;
    background:linear-gradient(
180deg,
#FAF8F3 0%,
#F5F1E9 100%
);
}

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

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

/* ===========================
CONTAINER
=========================== */

.container{

    width:90%;
    max-width:1200px;
    margin:auto;

}

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

header{

    width:100%;

    position:fixed;

    top:0;

    left:0;

    background:#F8F5F0;

    box-shadow:0 2px 15px rgba(0,0,0,.08);

    z-index:999;

}

header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:90px;

}

.logo img{

    width:180px;

}

nav ul{

    display:flex;

    gap:35px;

}

nav a{

    color:#222;

    font-weight:600;

    transition:.3s;

}

nav a:hover{

    color:#0f6d8c;

}

.btn-header{

    background:#F2C94C;

    color:#222;

    padding:14px 26px;

    border-radius:40px;

    font-weight:700;

    transition:.3s;

}

.btn-header:hover{

    transform:translateY(-2px);

    background:#e9be39;

}

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

.hero{

    padding-top:150px;

    padding-bottom:90px;

    background:#F4EFE7;

}

.hero-content{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:60px;

}

.hero-text{

    flex:1;

}

.destaque{

    display:inline-block;

    background:#F2C94C;

    color:#333;

    padding:8px 18px;

    border-radius:40px;

    font-size:13px;

    font-weight:700;

    margin-bottom:20px;

}

.hero h1{

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

    font-size:56px;

    line-height:1.1;

    margin-bottom:25px;

    color:#12384d;

}

.hero p{

    font-size:18px;

    line-height:1.8;

    margin-bottom:35px;

    color:#666;

}

.hero-buttons{

    display:flex;

    gap:20px;

}

.btn-primary{

    background:#0f6d8c;

    color:white;

    padding:16px 32px;

    border-radius:50px;

    font-weight:700;

    transition:.3s;

}

.btn-primary:hover{

    background:#0a5871;

    transform:translateY(-3px);

}

.btn-secondary{

    border:2px solid #0f6d8c;

    color:#0f6d8c;

    padding:16px 32px;

    border-radius:50px;

    font-weight:700;

    transition:.3s;

}

.btn-secondary:hover{

    background:#0f6d8c;

    color:white;

}

.hero-image{

    flex:1;

}

.hero-image img{

    width:100%;

    max-width:520px;

    margin:auto;

}

/* ===========================
TÍTULOS
=========================== */

section{

    padding:90px 0;

}

.titulo{

    text-align:center;

    margin-bottom:60px;

}

.titulo span{

    color:#0f6d8c;

    font-weight:700;

    letter-spacing:2px;

    font-size:14px;

}

.titulo h2{

    margin-top:10px;

    font-size:40px;

    color:#12384d;

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

}

/* ===========================
CAIXA TÉRMICA
=========================== */

.termica-content{

    display:flex;

    gap:60px;

    align-items:center;

}

.termica-img{

    flex:1;

}

.termica-text{

    flex:1;

}

.termica-text p{

    font-size:18px;

    line-height:1.8;

    margin-bottom:25px;

}

.termica-text li{

    margin-bottom:15px;

    font-size:18px;

}

/* ===========================
PRODUTOS
=========================== */

.produtos-grid{

    display:grid;

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

    gap:30px;

}

.produto{

    background:#fff;

    border-radius:18px;

    padding:35px 25px;

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

    text-align:center;

    transition:.3s;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    min-height:340px;

}

.produto:hover{

    transform:translateY(-8px);

}

.produto img{

    width:220px;

    height:170px;

    object-fit:contain;

    margin-bottom:25px;

    transition:.3s;

}

.produto:hover img{

    transform:scale(1.05);

}

.produto h3{

    color:#12384d;

    margin-bottom:10px;

    font-size:24px;

}

.produto p{

    color:#666;

    line-height:1.6;

}

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

#sobre{

    background:#F8F5F0;

}

#sobre p{

    max-width:900px;

    margin:auto;

    text-align:center;

    line-height:1.9;

    font-size:18px;

}

/* ===========================
CONTATO
=========================== */

#contato{

    text-align:center;

}

#contato p{

    margin-bottom:15px;

    font-size:20px;

}

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

footer{

    background:#12384d;

    color:white;

    padding:30px;

    text-align:center;

}

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

@media(max-width:900px){

.hero-content{

flex-direction:column;

text-align:center;

}

.termica-content{

flex-direction:column;

}

.produtos-grid{

grid-template-columns:1fr;

}

nav{

display:none;

}

.btn-header{

display:none;

}

.hero h1{

font-size:40px;

}

.hero-buttons{

justify-content:center;

flex-wrap:wrap;

}

}