:root {
    --cor-principal: #C86B85;
    --cor-secundaria: #D98FA4;
    --cor-destaque: #E7AFC1;

    --cor-fundo: #FFF3F7;
    --cor-card: #FFFFFF;

    --cor-texto: #4A3A3F;
    --cor-texto-claro: #FFFFFF;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    line-height: 1.6;
}



header{
    background: linear-gradient(
        135deg,
        var(--cor-principal),
        var(--cor-secundaria)
    );

    padding: 25px 60px;
}

.header-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo-titulo{
    display:flex;
    align-items:center;
    gap:20px;
}

.logo-titulo img{
    width:130px;
    height:130px;
    object-fit:contain;
    background:none;
   
}

.texto-header h1{
    color:white;
    margin:0;
    font-size:3rem;
}


.texto-header p{
    margin-top:5px;
    color:rgba(255,255,255,.8);
     font-size: 18px;
  
}


main {
    width: 90%;
    max-width: 1200px;
    margin: 30px auto;
}

.caixa {
    background: var(--cor-card);

    padding: 30px;
    margin-bottom: 25px;

    border-radius: 20px;

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

      transition: .3s;
}

.caixa:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0,0,0,.12);
}

.caixa h2 {
    text-align: center;
    color: var(--cor-secundaria);

    margin-bottom: 15px;
}

.caixa p {
    text-align: justify;
}


.container-colunas {
    display: flex;
    gap: 25px;
}

.coluna {
    flex: 1;
}



.equipe p {
    text-align: center;
    font-weight: bold;
    font-size: 1.1rem;
}

.grupo{
    width: 300px;
    height: 300px;
    
}

footer {
    background: linear-gradient(
        135deg,
        var(--cor-principal),
        var(--cor-secundaria)
    );

    color: white;
    text-align: center;

    padding: 30px 20px;
    margin-top: 50px;

    border-top-left-radius: 25px;
    border-top-right-radius: 25px;

    box-shadow: 0 -4px 15px rgba(0,0,0,0.1);
}

footer p {
    margin: 5px 0;
}

footer .texto {
    font-size: 14px;
    opacity: 0.8;
}


@media (max-width: 768px) {

    header h1 {
        font-size: 2.2rem;
    }

    .container-colunas {
        flex-direction: column;
    }

    .caixa {
        padding: 20px;
    }

    .caixa p {
        text-align: left;
    }
}

p{
    text-align: center;
}