:root {
    --marrom: #594433;
    --verde: #9ba657;
    --borda: rgba(90, 67, 53, .10);
    --sombra: 0 12px 35px rgba(75, 53, 40, .10);
    --main-color: #f0e5c9;
    --black: #13131a;
    --bg: #f0e5c9;
    --border: 0.1rem solid rgba(252, 229, 155, 0.253);
    font-size: 62.5%; /* 1rem = 10px */
}

/* RESET */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    outline:none;
    border:none;
    text-decoration:none;
    transition:0.2s linear;
    font-family: "Roboto", sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    background-color:var(--bg);
    overflow-x:hidden;
}

/* IMAGENS */
img{
    max-width:100%;
    height:auto;
    display:block;
}

/* SEÇÕES */
section{
    padding:3rem 2rem;
    margin:0 auto;
    max-width:1200px;
}

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

.header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1000;
    background-color:var(--bg);
    border-bottom:var(--border);
}

.header section{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:1rem 2rem;
}

.logo img{
    width:120px;
}

/* MENU */

.navbar{
    display:flex;
    align-items:center;
    gap:4rem;
    flex-wrap:wrap;
    justify-content:center;
}

.navbar a{
    font-size:1.8rem;
    color:#594433;
    font-weight:500;
}

.navbar a:hover{
    color: var(--verde);
    padding-bottom:0.3rem;
}

/* ÍCONES */

.icons img{
    width:3rem;
    cursor:pointer;
}

.icons img:hover{
    transform:scale(1.2);
}

/* BOTÕES */

.button,
.button2{
    color:#fff;
    padding:1.2rem 3rem;
    font-size:1.7rem;
    cursor:pointer;
    margin-top:2rem;
    display:inline-block;
    border-radius:0.8rem;
    font-weight:500;
}

.button{
    background:#594433;
}

.button:hover{
    background:var(--verde);
}

.button2{
    background:#9ba657;
}

.button2:hover{
    background:#879149;
}

/* ================= HOME ================= */

.home-container{
    background:url("./img/Design\ sem\ nome\ \(2\).png") center/cover no-repeat;
}

.home-container section{
    min-height:100vh;
    display:flex;
    align-items:center;
    padding-top:10rem; /* espaço para o header fixo */
}

.home-container .content{
    max-width:60rem;
}

.home-container .content h3{
    color:#fff;
    font-size:clamp(3rem, 6vw, 6rem);
    line-height:1.1;
    margin-bottom:1.5rem;
}

.home-container .content p{
    color:#fff;
    font-size:clamp(1.6rem, 2vw, 2rem);
    font-weight:300;
    line-height:1.6;
}

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

.sobre{

    background:#f4e9c8;
    padding:90px 20px;

}

.sobre-container{

    max-width:900px;
    margin:auto;
    text-align:center;

}

.sobre h2{

    font-size:4.5rem;
    color:#5b412e;
    margin-bottom:30px;

}

.sobre h2 span{

    color:#9ba657;

}

.descricao{

    font-size:2rem;
    line-height:1.8;
    color:#5b412e;
    max-width:750px;
    margin:auto auto 60px;

}

.cards{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;

}

.card{

    background:#fff;

    padding:35px;

    border-radius:18px;

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

}

.card span{

    font-size:4rem;

}

.card h3{

    margin-top:15px;

    font-size:2rem;

    color:#5b412e;

}

.button2{

    margin-top:50px;

    display:inline-block;

    background:#9ba657;

    color:#fff;

    padding:16px 40px;

    border-radius:10px;

    font-size:1.8rem;

}

.redes{

    margin-top:70px;
    text-align:center;

}

.redes h3{

    font-size:3rem;
    color:#594433;
    margin-bottom:10px;

}

.redes p{

    font-size:1.8rem;
    color:#6d5847;
    margin-bottom:35px;

}

.social-links{

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:20px;

}

.social{

    width:220px;

    padding:18px;

    border-radius:12px;

    background:white;

    color:#594433;

    font-size:1.8rem;

    font-weight:600;

    box-shadow:0 6px 18px rgba(0,0,0,.08);

    transition:.3s;

}

.social:hover{

    transform:translateY(-6px);

    background:#9ba657;

    color:white;

}


@media (max-width:768px){

    .sobre-card{
        padding:40px 30px;
    }

    .titulo{
        font-size:4.5rem;
    }

    .sobre-card h3{
        font-size:3.8rem;
    }

    .sobre-card p{
        font-size:2.1rem;
    }

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

    .beneficios div{
        font-size:2rem;
    }

    .button2{
        width:100%;
        font-size:2rem;
    }

}

/* ==========================
   TABLETS
========================== */

@media (max-width:992px){

    section{
        padding:3rem;
    }

    .header section{
        padding:1rem 3rem;
    }

    .navbar{
        gap:2.5rem;
    }

    .home-container section{
        justify-content:center;
        text-align:center;
        padding:14rem 3rem 6rem;
    }

    .content{
        max-width:70rem;
    }

    .cards{
        grid-template-columns:repeat(2,1fr);
    }

}


/* ==========================
   CELULARES
========================== */

@media (max-width:768px){

    .header{
        position:relative;
    }

    .header section{
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:20px;
        padding:20px;
    }

    .logo img{
        width:100px;
    }

    .navbar{
        width:100%;
        display:flex;
        justify-content:center;
        flex-wrap:wrap;
        gap:18px;
    }

    .navbar a{
        font-size:1.6rem;
    }

    .icons{
        display:none;
    }

    .home-container{
        min-height:70vh;
        height:auto;
    }

    .home-container section{
        min-height:70vh;
        padding:50px 20px;
        justify-content:center;
        align-items:center;
        text-align:center;
    }

    .home-container .content{
        max-width:100%;
    }

    .home-container .content h3{
        font-size:3.8rem;
    }

    .home-container .content p{
        font-size:1.8rem;
    }

    .sobre{
        padding:70px 20px;
    }

    .sobre h2{
        font-size:3.5rem;
    }

    .descricao{
        font-size:1.8rem;
    }

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

    .card{
        padding:30px;
    }

    .social-links{
        flex-direction:column;
        align-items:center;
    }

    .social{
        width:100%;
        max-width:350px;
    }

    .button,
    .button2{
        width:auto;
        min-width:230px;
        text-align:center;
    }

}


/* ==========================
   CELULARES PEQUENOS
========================== */

@media (max-width:480px){

    html{
        font-size:56.25%;
    }

    .logo img{
        width:85px;
    }

    .navbar{
        gap:12px;
    }

    .navbar a{
        font-size:1.5rem;
    }

    .home-container{
        min-height:60vh;
    }

    .home-container section{
        min-height:60vh;
        padding:40px 15px;
    }

    .home-container .content h3{
        font-size:3rem;
    }

    .home-container .content p{
        font-size:1.6rem;
    }

    .button,
    .button2{
        width:100%;
        max-width:280px;
    }

    .sobre h2{
        font-size:3rem;
    }

    .descricao{
        font-size:1.6rem;
    }

    .card{
        padding:25px;
    }

    .social{
        font-size:1.6rem;
    }

    footer{
        padding:20px;
        font-size:1.4rem;
    }

}

/* ================= CELULARES PEQUENOS ================= */

@media (max-width: 480px){

    :root{
        font-size:56.25%; /* 1rem = 9px */
    }

    .logo img{
        width:9rem;
    }

    .navbar{
        flex-direction:column;
        gap:1.5rem;
    }

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

    .home-container .content h3{
        line-height:1.2;
    }
}

/* Configuração do container principal da capa */
.home-container {
    position: relative;
    width: 100%;
    height: 100vh; /* Ocupa a tela cheia */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Container das imagens de fundo */
.carrossel-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Fica atrás do conteúdo */
}

/* Configuração de cada slide */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    animation: animacaoCarrossel 15s infinite ease-in-out;
}

/* Filtro escuro opcional para destacar o texto branco por cima */
.slide::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); 
}

/* Tempos de atraso para a transição dos 3 slides */
.slide:nth-child(1) {
    animation-delay: 0s;
}
.slide:nth-child(2) {
    animation-delay: 5s;
}
.slide:nth-child(3) {
    animation-delay: 10s;
}

/* Garante que o texto e botões fiquem acima das imagens */
#inicio {
    position: relative;
    z-index: 2; 
    text-align: center;
    color: #ffffff; /* Texto em branco para melhor contraste */
}

/* Regra de animação (Fade-in / Fade-out) */
@keyframes animacaoCarrossel {
    0% { opacity: 0; }
    8% { opacity: 1; }   /* Transiciona para visível */
    33% { opacity: 1; }  /* Permanece visível */
    41% { opacity: 0; }  /* Transiciona para invisível */
    100% { opacity: 0; }
}

 footer {
      margin-top: 65px;
      padding: 38px 20px;
      text-align: center;
      background: var(--marrom);
      color: #eadfce;
      font-size: 1.15rem;
      line-height: 1.8;
    }

 footer p + p {
      margin-top: 4px;
      opacity: .7;
    }