:root {
    --green-logo-dark: #2D4B2A;    /* O verde profundo do texto/ícone */
    --green-logo-vivid: #77B82A;   /* O verde lima das folhas superiores */
    --green-logo-mid: #4C8C2B;     /* O verde intermediário */
    
    --green-deep: var(--green-logo-dark); /* Para títulos e botões principais */
    --green-main: var(--green-logo-mid);  /* Para destaques e ícones */
    --green-soft: #F4F9F1;                /* Fundo ultra leve para contraste */
    
    --white: #FFFFFF;
    --dark: #1A1F19;                      /* Quase preto, mas com fundo esverdeado */
    --gray: #6B7280;
    --shadow-sm: 0 4px 6px -1px rgba(0,0,0,0.05);
    --shadow-lg: 0 20px 25px -5px rgba(45, 75, 42, 0.15);
    --radius: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Plus Jakarta Sans', sans-serif; }
html{
    scroll-behavior: smooth;
}
body{
   
    color: var(--dark);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Header Modernizado */
header{
    position: fixed;
    top: 0;
    width: 100%;
    padding: 1.2rem 8%;
    background-color: var(--green-soft);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
}
span{
    color: #D9781D;
}

.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--green-logo-dark); font-weight: 800; font-size: 1.5rem; }
.logo span span { color: var(--green-main); }
.logo-icon { background: var(--green-main); color: white; padding: 8px; border-radius: 10px; font-size: 1.2rem; }


nav ul { display: flex; gap: 2.5rem; list-style: none; }
nav a{
    position: relative;
    text-decoration: none;
    color: var(--dark);
}
nav a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: var(--green-logo-vivid);
    transition: 0.3s ease;
}
nav a:hover::after{
    width: 100%;
}
/* Seções */
section{
    width: 100%;
    min-height: 100vh;

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

    padding: 140px 8% 90px;

    position: relative;
    overflow: hidden;
}
.subtitle { color: var(--green-main); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 1.8rem; display: block; margin-bottom: 0.5rem; }
.section-title { font-size: 2.5rem; color: var(--green-deep); font-weight: 800; margin-bottom: 3rem; }
#produtos{
    background:
    radial-gradient(circle at top left, rgba(119,184,42,0.08), transparent 30%),
    linear-gradient(to bottom, #ffffff, #f7faf5);
}
/* Cards */



.card{
    width: 100%;

    min-height: 78vh;

    border-radius: 28px;

    overflow: hidden;

    position: relative;

    background-image: url('./assetsindex/backgrounddef.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    box-shadow:
    0 30px 60px rgba(45,75,42,0.18);

    border: 1px solid rgba(255,255,255,0.08);

    transition: 0.45s ease;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.card:hover{
    transform: translateY(-10px);
}
.card-img i{
    font-size: clamp(5rem, 10vw, 9rem);
    color: rgba(255,255,255,0.92);

    filter: drop-shadow(0 10px 25px rgba(0,0,0,0.25));
}
.card-img{
    width: 100%;
    height: 58%;

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

    position: relative;

    overflow: hidden;

    background:
    radial-gradient(circle at center,
    rgba(255,255,255,0.12),
    transparent 60%);
}
.card-content{
    flex: 1;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 3rem;

    position: relative;
}
.card h3{
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 1.1;

    color: white;

    margin-bottom: 1rem;

    font-weight: 800;
}
.card p{
    color: rgba(255,255,255,0.78);

    font-size: 1.1rem;

    max-width: 600px;

    margin-bottom: 2rem;
}

.btn-comprar{
    width: fit-content;

    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 16px 24px;

    border-radius: 16px;

    background: white;

    color: var(--green-logo-dark);

    text-decoration: none;

    font-weight: 700;

    font-size: 1rem;

    transition: 0.3s ease;

    box-shadow:
    0 10px 25px rgba(0,0,0,0.15);
}
.btn-comprar:hover{
    transform: translateY(-4px) scale(1.03);

    background: var(--green-logo-vivid);

    color: white;
}

/* Sobre */
.sobrecls{
    position: relative;

    min-height: 100vh;

    background-image:
    linear-gradient(
        rgba(0,0,0,0.55),
        rgba(0,0,0,0.55)
    ),
    url('./assetsindex/backgroundimage.png');

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    display: flex;
    align-items: center;
}
.sobre-texto h2{
    font-size: clamp(2.0rem, 4vw, 3rem);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -1.5px;

    color: #ecffe3;

    text-shadow:
    0 3px 12px rgba(0,0,0,0.28);
}
.sobre-texto p{
    font-size: 1.05rem;

    font-weight: 400;

    line-height: 1.9;

    letter-spacing: 0.2px;

    color: rgba(242, 243, 242, 0.92);

    text-shadow:
    0 2px 8px rgba(0,0,0,0.18);

    max-width: 720px;
}
.sobre-texto .subtitle{
    font-size: 0.82rem;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: #d9ffab;

    margin-bottom: 1rem;
}
.sobre-container{
    width: 100%;

    display: flex;
    align-items: center;

    z-index: 2;
}
.stats { display: flex; gap: 2rem; margin-top: 2rem; }
.stat-item strong { display: block; font-size: 1.8rem; color: var(--green-main); }
.sobre-imagem {position: relative; }

/* Footer */
footer { background: var(--dark); color: white; padding: 80px 8% 20px; margin-top: 0px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4rem; margin-bottom: 60px; }
.footer-col h4 { margin-bottom: 1.5rem; font-size: 1.1rem; color: var(--green-main); }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.8rem; color: #9ca3af; font-size: 0.9rem; display: flex; align-items: center; gap: 10px; }
.footer-col a { color: #9ca3af; text-decoration: none; transition: 0.3s; }
.footer-col a:hover { color: white; }
.socials { display: flex; gap: 15px; margin-top: 20px; }
.socials a { font-size: 1.2rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; text-align: center; color: #6b7280; font-size: 0.8rem; }

/* WhatsApp */
.whatsapp-btn { position: fixed; bottom: 30px; right: 30px; background: #25D366; color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; z-index: 1001; animation: pulse 2s infinite;}

/* Esconde o ícone antigo */
.whatsapp-btn i {
    display: none;
}

/* Garante base correta */
.whatsapp-btn {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Novo SVG perfeito */
.whatsapp-btn::before {
    content: "";
    width: 34px;
    height: 34px;

    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M20.52 3.48A11.8 11.8 0 0 0 12.01 0C5.38 0 .02 5.36.02 11.99c0 2.11.55 4.17 1.6 5.98L0 24l6.19-1.62a11.93 11.93 0 0 0 5.82 1.49h.01c6.63 0 11.99-5.36 11.99-11.99 0-3.2-1.25-6.2-3.49-8.4zM12.02 21.5c-1.8 0-3.55-.48-5.08-1.38l-.36-.21-3.68.96.98-3.58-.24-.37a9.48 9.48 0 0 1-1.46-5.03c0-5.26 4.28-9.54 9.54-9.54 2.55 0 4.94.99 6.75 2.79a9.46 9.46 0 0 1 2.79 6.75c0 5.26-4.28 9.54-9.54 9.54zm5.23-7.12c-.29-.14-1.72-.85-1.99-.94-.27-.1-.46-.14-.66.14-.19.29-.76.94-.93 1.13-.17.19-.34.21-.63.07-.29-.14-1.22-.45-2.32-1.43-.86-.77-1.44-1.72-1.61-2.01-.17-.29-.02-.45.13-.6.14-.14.29-.34.43-.5.14-.17.19-.29.29-.48.1-.19.05-.36-.02-.5-.07-.14-.66-1.6-.9-2.2-.24-.58-.49-.5-.66-.51l-.56-.01c-.19 0-.5.07-.76.36-.26.29-1 1-1 2.43s1.02 2.8 1.16 3c.14.19 2 3.05 4.84 4.28.68.29 1.21.46 1.63.59.68.22 1.29.19 1.77.12.54-.08 1.72-.7 1.96-1.38.24-.68.24-1.27.17-1.38-.07-.12-.26-.19-.54-.33z'/%3E%3C/svg%3E") no-repeat center;

    background-size: contain;
}
  
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(20, 114, 55, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }

/*STYLES PRODUTOS/*
/* SECTION */

.produtos{
    padding: 100px 8%;

    
}

/* TÍTULO */

.titulo{
    margin-bottom: 3rem;
}

.titulo span{
    color: #4C8C2B;

    font-size: 0.8rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 2px;
}

.titulo h2{
    font-size: clamp(2rem, 4vw, 4rem);

    color: #2D4B2A;

    margin-top: 0.5rem;

    font-weight: 800;
}

/* GRID */

.grid-produtos{
    display: grid;

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

    gap: 2rem;
}

/* CARD */

.produto-card{
    background: white;

    border-radius: 22px;

    overflow: hidden;

    border: 1px solid rgba(0,0,0,0.05);

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

    transition: 0.3s ease;
}

.produto-card:hover{
    transform: translateY(-6px);

    box-shadow:
    0 20px 40px rgba(0,0,0,0.10);
}

/* IMAGEM */

.produto-img{
    width: 100%;

    height: 240px;

    overflow: hidden;

    background: #eef3ea;
}

/* CONFIGURAÇÃO DA IMAGEM */

.produto-img img{
    width: 100%;

    height: 100%;

    object-fit: cover;
    /* cover = imagem preenche tudo */

    object-position: center;
    /* center = enquadramento central */

    display: block;

    transition: 0.4s ease;
}

.produto-card:hover img{
    transform: scale(1.05);
}

/* INFORMAÇÕES */

.produto-info{
    padding: 1.5rem;
}

.produto-info h3{
    font-size: 1.2rem;

    color: #2D4B2A;

    margin-bottom: 0.7rem;

    font-weight: 700;
}

.produto-info p{
    color: #6B7280;

    line-height: 1.7;

    font-size: 0.95rem;
}
/*CARROSEIS PRODUTOS*/

.carrossel-produtos {
    margin-bottom: 60px;
}

.categoria-titulo {
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.carrossel-controles {
    display: flex;
    align-items: center;
    gap: 15px;
}

.grid-produtos {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.grid-produtos::-webkit-scrollbar {
    display: none;
}

.produto-card {
    min-width: 280px;
    flex: 0 0 280px;
}

.carrossel-btn {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
}
.gradiente{
    min-height: 100vh;
    background: linear-gradient(
    145deg,
    #163d1d 0%,
    #245c2a 20%,
    #3d8b37 45%,
    #8fae2e 70%,
    #f1c232 100%
);
}


/* RESPONSIVO */

@media (max-width: 600px){

    .produtos{
        padding: 80px 5%;
    }

    .produto-img{
        height: 210px;
    }

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

    .produto-img{
        height: 210px;
    }
    .logo h1 {
    font-size: 0.78rem;
    line-height: 1.2;
}
.card{
        background-image: url('./assetsindex/testeback2.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    }
    
}



/* Tablets grandes */
@media (max-width: 1200px) {

    header {
        padding: 1.2rem 5%;
    }

    section {
        padding: 130px 5% 70px;
    }

    .footer-grid {
        gap: 2rem;
    }

    .sobre-container {
        gap: 2rem;
    }

    .card {
        min-width: 290px;
    }
    .logo h1 {
    font-size: 0.78rem;
    line-height: 1.2;
}
    
}

/* Tablets */
@media (max-width: 968px) {

    header {
        padding: 1rem 5%;
        flex-direction: column;
        gap: 1rem;
    }

    .logo {
        text-align: center;
        justify-content: center;
        flex-wrap: wrap;
    }

    .logo h3 {
        font-size: 1.1rem;
        text-align: center;
        line-height: 1.3;
    }

    nav ul {
        gap: 1.5rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    nav a {
        font-size: 0.9rem;
    }

    section {
        padding: 170px 5% 70px;
        min-height: auto;
    }

    .section-title {
        font-size: 2rem;
        margin-bottom: 2rem;
        line-height: 1.2;
    }

    .sobre-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

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

    .stats {
        justify-content: center;
        flex-wrap: wrap;
        gap: 1.5rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 3rem;
    }

    .footer-col li {
        justify-content: center;
    }

    .socials {
        justify-content: center;
    }

    .carousel-wrapper {
        position: relative;
    }

    .carousel {
        gap: 1.2rem;
        scroll-snap-type: x mandatory;
        padding-bottom: 10px;
    }

    .card {
        min-width: 260px;
        scroll-snap-align: center;
    }

    .carousel-btn {
        width: 44px;
        height: 44px;
    }
    .logo h1 {
    font-size: 0.78rem;
    line-height: 1.2;
}
    
    

}

/* Celulares */
@media (max-width: 600px) {

    header {
        padding: 1rem 4%;
        position: relative;
        padding: 1rem 4%;
    }

    .logo {
        gap: 8px;
    }

    .logo img {
        height: 42px !important;
    }

    .logo h3 {
        font-size: 0.95rem;
    }

    nav ul {
        gap: 0.8rem;
    }

    nav a {
        font-size: 0.82rem;
    }

   section {
    padding: 20px 4% 60px;
}

    .subtitle {
        font-size: 0.7rem;
        letter-spacing: 1px;
    }

    .section-title {
        font-size: 1.7rem;
    }

    .card {
        min-width: 85%;
    }

    .card-img {
        height: 170px;
        font-size: 2.5rem;
    }

    .card-content {
        padding: 1.2rem;
    }

    .card p {
        font-size: 0.85rem;
    }

    .btn-comprar {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.85rem;
        padding: 8px 12px;
    }

    .carousel-btn {
        display: none;
    }

    .sobre-texto h2 {
        font-size: 1.8rem;
        line-height: 1.2;
    }

    .sobre-texto p {
        font-size: 0.95rem;
    }

    .stats {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .stat-item strong {
        font-size: 1.5rem;
    }

    .sobre-imagem {
        height: 320px;
    }

    footer {
        padding: 60px 4% 20px;
    }

    .footer-col h4 {
        font-size: 1rem;
    }

    .footer-col li,
    .footer-col a,
    .footer-bottom {
        font-size: 0.85rem;
    }

    .whatsapp-btn {
        width: 55px;
        height: 55px;
        right: 18px;
        bottom: 18px;
    }

    .whatsapp-btn::before {
        width: 30px;
        height: 30px;
    }
    .logo h1 {
    font-size: 0.78rem;
    line-height: 1.2;
}
    
}

/* Celulares muito pequenos */
@media (max-width: 400px) {

    .logo h3 {
        font-size: 0.8rem;
    }

    nav ul {
        gap: 0.6rem;
    }

    nav a {
        font-size: 0.75rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .card {
        min-width: 92%;
    }

    .card-content {
        padding: 1rem;
    }

    .sobre-texto h2 {
        font-size: 1.5rem;
    }

    .sobre-imagem {
        height: 260px;
    }
    .logo h1 {
    font-size: 0.78rem;
    line-height: 1.2;
}
   
}