/* Reset básico e Estilos Globais */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    color: #f4f4f4;
    background-color: #1a1a2e; /* Cor de fundo principal (azul escuro/roxo) */
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    margin-bottom: 1rem;
}

h1 {
    font-size: 2.8rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 2.5rem;
    color: #e0e0e0; /* Um pouco mais claro para destaque */
}

p {
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.container {
    width: 90%;
    max-width: 1100px;
    margin: auto;
    padding: 20px 0;
}

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

a {
    text-decoration: none;
    color: #ff69b4; /* Rosa Tixen */
}

/* Cor de Fundo das Seções Alternadas (opcional) */
section:nth-child(even) {
    background-color: #161625; /* Um tom ligeiramente diferente para variação */
}

section {
    padding: 60px 0;
}

/* Cor inspirada na caixa (gradiente ou cor sólida) */
.hero-section,
.problem-solution-section,
.features-section,
.how-to-use-section,
.kit-section,
.reviews-section,
.specs-section,
.final-cta-section {
    background: linear-gradient(135deg, #1a1a2e 0%, #2c2c54 100%); /* Gradiente escuro */
    /* Adicionar imagem de fundo com estrelas/partículas se tiver uma */
    /* background-image: url('../images/background_estrelas.png'); */
    /* background-repeat: repeat; */
}

/* Estilo do Logo */
.logo {
    width: 150px;
    margin: 0 auto 20px auto;
}

/* --- Hero Section --- */
.hero-section {
    text-align: center;
    padding: 80px 0;
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero-section .subtitle {
    font-size: 1.3rem;
    max-width: 700px;
    margin: 1rem auto 2rem auto;
    color: #ccc;
}

.hero-image {
    width: 100%;
    max-width: 450px; /* Ajuste conforme o tamanho da imagem */
    margin: 20px auto;
    border-radius: 10px;
    /* box-shadow: 0 10px 20px rgba(0,0,0,0.3); */
}

.cta-button {
    display: inline-block;
    background-color: #ff69b4; /* Rosa Tixen */
    color: #fff;
    padding: 15px 35px;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin-top: 20px;
    box-shadow: 0 5px 15px rgba(255, 105, 180, 0.4);
}

.cta-button:hover {
    background-color: #ff47a3;
    transform: translateY(-3px);
}

.hero-benefits {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.hero-benefits span {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    background-color: rgba(255,255,255,0.1);
    padding: 8px 15px;
    border-radius: 20px;
}

.hero-benefits img {
    width: 20px;
    margin-right: 8px;
    /* Para SVGs brancos: filter: invert(1); */
}


/* --- Problem Solution Section --- */
.problem-solution-section {
    background-color: #161625; /* Cor alternada */
}

.problem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    text-align: center;
}

.problem-item {
    background-color: rgba(255,255,255,0.05);
    padding: 25px;
    border-radius: 10px;
    transition: transform 0.3s ease;
}
.problem-item:hover {
    transform: translateY(-5px);
}

.problem-item img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
}

.problem-item h3 {
    color: #ff8dcb; /* Rosa mais claro para títulos internos */
    font-size: 1.5rem;
}

/* --- Features Section --- */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.feature-item {
    background-color: #202038;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

.feature-item img {
    width: 250px; /* Ajuste para ícones ou imagens menores */
    height: 250px;
    object-fit: contain;
    margin: 0 auto 15px auto;
}

.feature-item h3 {
    color: #ff69b4;
    font-size: 1.4rem;
}

/* --- How To Use Section --- */
.how-to-use-section .section-subtitle {
    text-align: center;
    margin-bottom: 40px;
    font-size: 1.2rem;
    color: #bbb;
}
.heads-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}
.head-item {
    background-color: rgba(255,255,255,0.07);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}
.head-item img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin: 0 auto 10px auto;
}
.head-item h4 {
    color: #ff8dcb;
    font-size: 1.2rem;
    margin-bottom: 5px;
}
.diagrama-corpo {
    text-align: center;
    margin-top: 40px;
}
.diagrama-corpo img {
    max-width: 500px;
    margin: 0 auto 15px auto;
    border-radius: 5px;
}

/* --- Kit Section --- */
.kit-section .kit-image {
    max-width: 600px;
    margin: 30px auto;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    background-color: rgba(255,255,255,0.05);
}
.kit-section ul {
    list-style: none;
    padding-left: 0;
    max-width: 600px;
    margin: 20px auto;
}
.kit-section li {
    background-color: rgba(255,255,255,0.05);
    padding: 10px 15px;
    margin-bottom: 8px;
    border-radius: 5px;
    display: flex;
    align-items: center;
}
.kit-section li img {
    width: 18px;
    margin-right: 10px;
    /* Assumindo que check_icon.svg é branco. Se for preto, use: filter: invert(1); */
}


/* --- Reviews Section --- */
.reviews-section {
     background-color: #161625;
}
.review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.review-item {
    background-color: #2a2a4a;
    padding: 25px;
    border-radius: 8px;
    border-left: 5px solid #ff69b4;
}
.review-item p {
    font-style: italic;
    margin-bottom: 10px;
}
.review-item span {
    font-weight: bold;
    color: #ccc;
}

/* --- Specs Section --- */
.specs-list {
    background-color: rgba(255,255,255,0.05);
    padding: 30px;
    border-radius: 10px;
    max-width: 700px;
    margin: 0 auto;
}
.specs-list p {
    margin-bottom: 0.7rem;
    font-size: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 0.7rem;
}
.specs-list p:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.certs-icon {
    display: inline-block;
    vertical-align: middle;
    height: 20px; /* Ajuste conforme o tamanho do seu ícone */
    margin-left: 5px;
}

/* --- Final CTA Section --- */
.final-cta-section {
    text-align: center;
    background-color: #202038;
}
.final-cta-section .final-cta-image {
    max-width: 400px;
    margin: 30px auto;
    border-radius: 8px;
}
.final-cta-section p {
    max-width: 600px;
    margin: 1rem auto 2rem auto;
}
.security-info {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    gap: 25px;
    font-size: 0.9rem;
    color: #bbb;
}
.security-info span {
    display: flex;
    align-items: center;
}
.security-info img {
    width: 20px;
    margin-right: 8px;
    /* filter: invert(0.8); para ícones escuros em fundo escuro */
}

/* --- Footer --- */
footer {
    background-color: #0f0f1a;
    color: #aaa;
    text-align: center;
    padding: 30px 0;
}

.logo-footer {
    width: 120px;
    margin: 0 auto 15px auto;
    opacity: 0.8;
}

footer p {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.footer-nav a {
    color: #aaa;
    margin: 0 10px;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-nav a:hover {
    color: #ff69b4;
}

/* Novo: Estilos para o container dos links de redes sociais */
.social-links-container {
    margin-top: 20px; /* Espaço após os links de navegação do rodapé */
    display: flex; /* Permite alinhar itens lado a lado */
    justify-content: center; /* Centraliza os links dentro do container */
    flex-wrap: wrap; /* Permite que os links quebrem para a próxima linha em telas menores */
    gap: 20px; /* Espaço entre os links */
}

.social-link {
    display: inline-flex; /* Para alinhar ícone e texto na mesma linha */
    align-items: center; /* Alinha verticalmente ícone e texto */
    color: #aaa; /* Cor do texto do link */
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease, transform 0.2s ease;
}

.social-link:hover {
    color: #ff69b4; /* Cor ao passar o mouse */
    transform: translateY(-2px); /* Efeito sutil ao passar o mouse */
}

.social-icon-img {
    width: 20px;  /* Ajuste o tamanho do ícone conforme necessário */
    height: 20px; /* Ajuste o tamanho do ícone conforme necessário */
    margin-right: 8px; /* Espaço entre o ícone e o texto */
    /* Se os SVGs não forem brancos, e você precisar que sejam:
       filter: invert(75%) sepia(6%) saturate(8%) hue-rotate(315deg) brightness(99%) contrast(97%);
       Isso tentará transformar um ícone escuro em um tom de cinza claro similar ao #aaa
       Ou, se o SVG já for branco, esta linha não é necessária.
       Se for um SVG com stroke="currentColor", a cor será herdada do .social-link
    */
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.social-link:hover .social-icon-img {
    opacity: 1;
}


/* --- Media Queries para Responsividade --- */
@media (max-width: 768px) {
    h1 {
        font-size: 2.2rem;
    }
    h2 {
        font-size: 1.8rem;
    }
    .hero-section .subtitle {
        font-size: 1.1rem;
    }
    .cta-button {
        padding: 12px 25px;
        font-size: 1rem;
    }
    .hero-benefits {
        flex-direction: column;
        gap: 10px;
    }
    .problem-grid, .features-grid, .heads-showcase, .review-grid {
        grid-template-columns: 1fr; /* Coluna única em telas menores */
    }
    .kit-section ul {
        padding-left: 10px; /* Pequeno ajuste para lista */
    }
    .security-info {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.8rem;
    }
    h2 {
        font-size: 1.5rem;
    }
    body {
        font-size: 0.95rem; /* Ajuste geral da fonte base */
    }
    p {
        font-size: 1rem;
    }
    .hero-section .subtitle {
        font-size: 1rem;
    }
    .container {
        width: 95%;
    }
    .final-cta-section .final-cta-image {
        max-width: 340px;
        padding-left: 10px;
        border-radius: 8px;
    }
    .kit-section .kit-image {
        max-width: 340px;
        padding-left: 10px;
        border-radius: 10px;
        box-shadow: 0 8px 16px rgba(0,0,0,0.2);
        background-color: rgba(255,255,255,0.05);
    }
    .diagrama-corpo img {
        max-width: 340px;
        margin: 0 auto 15px auto;
        border-radius: 5px;
    }
    .security-info {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .footer-nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        margin-bottom: 15px;
    }
    .social-links-container {
        flex-direction: column; /* Links um abaixo do outro */
        align-items: center;
        gap: 15px; /* Reduz o espaço entre os links */
    }
}