:root {

    --primary-brown: #B0815D;
    --soft-pink: #FFDEEA;
    --soft-blue: #CAFBFC;
    --soft-yellow: #FFFFB5;

    --white: #FFFFFF;
    --text-dark: #5a4533;
    --text-soft: #7a5e4a;

}

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

body {

    background: linear-gradient(180deg,
            #FFDEEA 0%,
            #ffffff 45%,
            #ffffff 70%,
            #CAFBFC 100%);

    font-family: 'Open Sans', sans-serif;

    color: var(--text-dark);

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

    min-height: 100vh;

    padding: 20px 0;

}


/* container */

.container {

    text-align: center;

    width: 92%;
    max-width: 400px;

    padding: 45px 28px;

    background: rgba(255, 255, 255, 0.85);

    backdrop-filter: blur(14px);

    border-radius: 28px;

    border: 1px solid rgba(176, 129, 93, 0.15);

    box-shadow: 0 25px 50px rgba(176, 129, 93, 0.15);

    animation: fadeIn 0.7s ease-out;

}


/* animação inicial */

@keyframes fadeIn {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ========== LOGO ========== */

.logo {

    width: 140px;
    height: 140px;

    object-fit: contain;

    margin-bottom: 20px;

    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.08));

    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    padding: 10px;

}


/* título */

h1 {

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

    color: var(--primary-brown);

    font-size: 26px;

    letter-spacing: 0.3px;

    margin-bottom: 8px;

}


/* subtítulo */

.subtitle {

    font-size: 14px;

    line-height: 1.5;

    opacity: 0.9;

    margin-bottom: 8px;

}


/* desde - AGORA MAIS DISCRETO, SÓ COM BORDA COLORIDA */

.since {

    display: inline-block;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 1px;

    color: var(--primary-brown);

    font-weight: 600;

    margin-bottom: 30px;

    /* BORDA SUTIL COM AS CORES, SEM FUNDO */
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--soft-pink), var(--soft-blue));
    border-image-slice: 1;
    padding-bottom: 4px;

}


/* botão principal */

.btn-whatsapp {

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

    gap: 10px;

    text-decoration: none;

    background: linear-gradient(135deg, #B0815D, #9a6e4c);

    color: white;

    padding: 18px;

    border-radius: 16px;

    font-size: 17px;
    font-weight: 700;

    letter-spacing: 0.3px;

    box-shadow: 0 10px 25px rgba(176, 129, 93, 0.35);

    transition: all 0.25s ease;

}

.btn-whatsapp span {

    font-size: 20px;

}

.btn-whatsapp:hover {

    transform: translateY(-3px) scale(1.01);

    box-shadow: 0 15px 30px rgba(176, 129, 93, 0.45);

}


/* texto abaixo do botão */

.atendimento {

    font-size: 13px;

    margin-top: 10px;

    color: var(--text-soft);

    font-style: italic;

}


/* ========== BENEFÍCIOS ========== */
/* AGORA COM DETALHES COLORIDOS, SEM EFEITO DE BOTÃO */

.benefits {

    margin: 32px 0;

    display: grid;

    gap: 12px;

}


.benefit {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px 16px;

    border-radius: 14px;

    font-size: 13px;

    font-weight: 600;

    text-align: left;

    background: white;

    border: 1px solid rgba(176, 129, 93, 0.15);

    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.04);

    /* CADA BENEFÍCIO RECEBE UMA COR DE FUNDO SUTIL */
    position: relative;
    overflow: hidden;

}

/* PRIMEIRO BENEFÍCIO - DETALHE ROSA */
.benefit:first-child {
    background: linear-gradient(90deg, rgba(255, 222, 234, 0.3), white 70%);
}

/* SEGUNDO BENEFÍCIO - DETALHE AZUL */
.benefit:last-child {
    background: linear-gradient(90deg, rgba(202, 251, 252, 0.3), white 70%);
}

.benefit span {

    font-size: 20px;

    /* ÍCONES COM BACKGROUND COLORIDO */
    padding: 6px;
    border-radius: 8px;

}

/* ÍCONE DO PRIMEIRO BENEFÍCIO */
.benefit:first-child span {
    background: rgba(255, 222, 234, 0.8);
    color: #B0815D;
}

/* ÍCONE DO SEGUNDO BENEFÍCIO */
.benefit:last-child span {
    background: rgba(202, 251, 252, 0.8);
    color: #B0815D;
}


/* seção matrizes */

.section-title {

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 12px;

    color: var(--text-soft);

}


/* ========== BOTÃO MATRIZES ========== */
/* FUNDO BRANCO, TEXTO E ÍCONE NA COR PRINCIPAL */

.btn-matrizes {

    display: flex;

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

    gap: 8px;

    text-decoration: none;

    background: white;

    color: var(--primary-brown); /* TEXTO NA COR PRINCIPAL */

    border: 1px solid var(--primary-brown); /* BORDA MARROM */

    padding: 13px;

    border-radius: 14px;

    font-weight: 700;

    transition: all 0.25s;

    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.04);

}

.btn-matrizes span {

    color: var(--primary-brown); /* ÍCONE TAMBÉM NA COR PRINCIPAL */
    transition: transform 0.2s ease;

}

.btn-matrizes:hover {

    background: var(--primary-brown);

    color: white;

    transform: translateY(-2px);

}

.btn-matrizes:hover span {
    color: white; /* ÍCONE FICA BRANCO NO HOVER */
    transform: scale(1.1);
}


/* ========== RODAPÉ ========== */
/* VOLTOU AO ESTILO ORIGINAL, SEM CORES */

footer {

    margin-top: 35px;

    font-size: 11px;

    opacity: 0.6;

    color: var(--text-dark);

    background: none; /* REMOVE O FUNDO COLORIDO */
    padding: 0; /* VOLTA AO PADDING ORIGINAL */
    border-radius: 0;

}


/* ícones */

.material-symbols-outlined {

    font-variation-settings:
        'FILL' 0,
        'wght' 500,
        'GRAD' 0,
        'opsz' 24;

}