/* ==========================
   SAÚDE
========================== */

/* ==========================
   CORES
========================== */

:root{

--verde-saude:#0b9b5d;
--verde-claro:#eafaf2;

--azul-saude:#2e86de;
--azul-claro:#eef7ff;

--texto:#2c3e50;

}

/* ==========================
   HERO (BANNER)
========================== */

.hero-saude{
height:500px;
background:url("../imagens/saude-banner.jpg");
background-size:cover;
background-position:center;
position:relative;
}

.hero-saude-overlay{

position:absolute;
width:100%;
height:100%;

background:linear-gradient(
    180deg,
    rgba(11,155,93,0.55),
    rgba(46,134,222,0.45)
);

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

color:white;
text-align:center;

}

.hero-saude-overlay h1{
font-size:60px;
margin-bottom:15px;
text-shadow:0 4px 15px rgba(0,0,0,.3);
}

.hero-saude-overlay p{
font-size:20px;
opacity:.95;
}

/* ==========================
   DESTAQUE
========================== */

.saude-destaque{

max-width:1200px;
margin:70px auto;

padding:35px;

background:white;

border-radius:20px;

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

gap:50px;

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

}

.saude-img img{

width:100%;
height:100%;

object-fit:cover;

border-radius:15px;

}

.saude-texto{
display:flex;
flex-direction:column;
justify-content:center;
}

.saude-texto span{

color:var(--azul-saude);

font-weight:700;

letter-spacing:2px;

}

.saude-texto h2{
font-size:40px;
margin-bottom:20px;
color:var(--texto);
line-height:1.2;
}

.saude-texto p{
line-height:1.8;
margin-bottom:25px;
}

/* ==========================
   BOTÃO
========================== */

.btn-saude{

display:inline-block;

padding:14px 30px;

background:linear-gradient(
45deg,
var(--verde-saude),
var(--azul-saude)
);

color:white;

text-decoration:none;

border-radius:50px;

font-weight:bold;

transition:.3s;

}

.btn-saude:hover{

transform:translateY(-3px);

}

/* ==========================
   CARDS SAÚDE
========================== */

.saude-cards{

max-width:1200px;

margin:auto;

padding:20px;

display:grid;

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

gap:25px;

}

.saude-card{

background:white;

border-radius:15px;

overflow:hidden;

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

transition:.3s;

cursor:pointer;

text-decoration:none;

color:inherit;

}

.saude-card:hover{

transform:translateY(-10px);

box-shadow:0 10px 30px rgba(46,134,222,.15);

}

.saude-card img{
width:100%;
height:220px;
object-fit:cover;
}

.saude-card h3{
padding:20px 20px 10px;
}

.saude-card p{
padding:0 20px 20px;
line-height:1.5;
}

/* ==========================
   PARCEIROS
========================== */

.parceiros-saude{

padding:80px 20px;

text-align:center;

background:var(--verde-claro);

margin-top:70px;

}

.parceiros-saude h2{
font-size:32px;
margin-bottom:30px;
color:var(--texto);
}

.parceiros-grid{

max-width:1200px;

margin:auto;

display:grid;

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

gap:25px;

}

.parceiro-box{

background:white;

padding:25px;

border-radius:15px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:12px;

text-decoration:none;

color:#333;

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

transition:.3s;

}

.parceiro-box:hover{

transform:translateY(-8px);

box-shadow:0 10px 30px rgba(11,155,93,.2);

}

.parceiro-redes{

display:flex;

flex-direction:column;

gap:8px;

font-size:14px;

color:var(--verde-saude);

margin-top:10px;

}

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

@media(max-width:768px){

.hero-saude-overlay h1{
font-size:38px;
}

.saude-destaque{
grid-template-columns:1fr;
}

.saude-texto h2{
font-size:28px;
}

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

}