/* ======================================================
   LT PROTEÇÕES
   STYLE.CSS
   PARTE 1
====================================================== */


/* =========================
RESET
========================= */

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


html {
    scroll-behavior: smooth;
}


body {

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

    background: #0b0b0b;

    color: #ffffff;

    line-height: 1.6;

}


img {

    max-width: 100%;

    display: block;

}


a {

    text-decoration: none;

    color: inherit;

}


ul {

    list-style: none;

}


/* =========================
VARIÁVEIS
========================= */


:root {


    --black:
    #080808;


    --dark:
    #111111;


    --gray:
    #1b1b1b;


    --light:
    #f5f5f5;


    --orange:
    #ff6b00;


    --orange-light:
    #ff8c33;


    --text:
    #ffffff;


    --text-gray:
    #b5b5b5;


    --border:
    rgba(255,255,255,0.08);


    --radius:
    18px;


    --transition:
    .3s ease;


}


/* =========================
CONTAINER
========================= */


.container {

    width: 90%;

    max-width: 1200px;

    margin: auto;

}


/* =========================
SEÇÕES
========================= */


section {

    padding: 100px 0;

}



.section-title {

    text-align: center;

    max-width: 750px;

    margin: 0 auto 60px;

}


.section-tag {

    display: inline-block;

    color: var(--orange);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 15px;

}



.section-title h2 {

    font-size: clamp(30px,4vw,48px);

    line-height: 1.1;

    margin-bottom: 20px;

}



.section-title p {

    color: var(--text-gray);

    font-size: 18px;

}



/* =========================
BOTÕES
========================= */


.btn-primary,
.btn-secondary,
.btn-loja {


    display: inline-flex;

    align-items: center;

    justify-content: center;


    padding: 15px 32px;


    border-radius: 50px;


    font-weight: 700;


    transition:
    var(--transition);


}



.btn-primary {


    background:
    var(--orange);


    color:
    #fff;


}



.btn-primary:hover {


    background:
    var(--orange-light);


    transform:
    translateY(-3px);


}



.btn-secondary {


    border:

    1px solid rgba(255,255,255,.2);


}



.btn-secondary:hover {


    border-color:
    var(--orange);


    color:
    var(--orange);


}




.btn-loja {


    background:

    var(--orange);


    padding:

    12px 25px;


}



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


.header {


    position:

    fixed;


    top:

    0;


    width:

    100%;


    z-index:

    999;


    background:

    rgba(8,8,8,.75);


    backdrop-filter:

    blur(12px);


    border-bottom:

    1px solid var(--border);


}



.header .container {


    height:

    85px;


    display:

    flex;


    align-items:

    center;


    justify-content:

    space-between;


}



.logo img {


    width:

    50px;


}



.menu ul {


    display:

    flex;


    gap:

    35px;


}



.menu a {


    color:

    #ddd;


    font-size:

    15px;


    font-weight:

    500;


    transition:

    var(--transition);


}



.menu a:hover {


    color:

    var(--orange);


}



.menu-mobile {


    display:

    none;


}



/* =========================
HERO
========================= */


.hero {


    min-height:

    100vh;


    display:

    flex;


    align-items:

    center;


    padding-top:

    120px;


    background:


    radial-gradient(
    circle at top right,
    rgba(255,107,0,.18),
    transparent 35%
    ),

    var(--black);


}



.hero-grid {


    display:

    grid;


    grid-template-columns:

    1fr 1fr;


    gap:

    60px;


    align-items:

    center;


}



.hero-text .tag {


    display:

    inline-block;


    background:

    rgba(255,107,0,.12);


    color:

    var(--orange);


    padding:

    8px 18px;


    border-radius:

    30px;


    font-size:

    13px;


    font-weight:

    700;


    margin-bottom:

    25px;


}



.hero h1 {


    font-size:


    clamp(38px,5vw,64px);


    line-height:

    1.05;


    margin-bottom:

    25px;


}



.hero p {


    color:

    var(--text-gray);


    font-size:

    18px;


    max-width:

    560px;


    margin-bottom:

    35px;


}



.hero-buttons {


    display:

    flex;


    gap:

    15px;


    flex-wrap:

    wrap;


}



.hero-image {


    position:

    relative;


}



.hero-image img {


    animation:

    float 5s infinite ease-in-out;


    filter:

    drop-shadow(
    0 30px 40px rgba(0,0,0,.5)
    );


}



.hero-numbers {


    display:

    flex;


    gap:

    35px;


    margin-top:

    50px;


}



.hero-numbers h3 {


    font-size:

    28px;


    color:

    var(--orange);


}



.hero-numbers span {


    font-size:

    13px;


    color:

    var(--text-gray);


}

/* ======================================================
   BENEFÍCIOS
====================================================== */


.benefits {

    background:
    var(--dark);

}



.benefits-grid {

    display:

    grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:

    25px;

}



.benefit-card {


    background:

    rgba(255,255,255,.03);


    border:

    1px solid var(--border);


    padding:

    35px 25px;


    border-radius:

    var(--radius);


    text-align:

    center;


    transition:

    var(--transition);


}



.benefit-card:hover {


    transform:

    translateY(-10px);


    border-color:

    rgba(255,107,0,.4);


    background:

    rgba(255,107,0,.05);


}



.benefit-card .icon {


    font-size:

    42px;


    margin-bottom:

    20px;


}



.benefit-card h3 {


    font-size:

    21px;


    margin-bottom:

    12px;


}



.benefit-card p {


    color:

    var(--text-gray);


    font-size:

    15px;


}



/* ======================================================
   CATEGORIAS
====================================================== */


.categories {


    background:

    var(--black);


}



.categories-grid {


    display:

    grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:

    20px;


}



.category-card {


    height:

    140px;


    display:

    flex;


    align-items:

    center;


    justify-content:

    center;


    border-radius:

    var(--radius);


    background:

    linear-gradient(
    145deg,
    #181818,
    #0d0d0d
    );


    border:

    1px solid var(--border);


    position:

    relative;


    overflow:

    hidden;


    transition:

    var(--transition);


}



.category-card::before {


    content:"";


    position:

    absolute;


    width:

    80px;


    height:

    80px;


    background:

    var(--orange);


    filter:

    blur(70px);


    opacity:

    0;


    transition:

    var(--transition);


}



.category-card:hover {


    transform:

    translateY(-8px);


    border-color:

    var(--orange);


}



.category-card:hover::before {


    opacity:

    .35;


}



.category-card h3 {


    position:

    relative;


    z-index:

    2;


    font-size:

    22px;


}



/* ======================================================
   PRODUTOS
====================================================== */


.featured {


    background:

    var(--dark);


}



.products-grid {


    display:

    grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:

    25px;


}



.product-card {


    background:

    #101010;


    border:

    1px solid var(--border);


    border-radius:

    var(--radius);


    padding:

    25px;


    transition:

    var(--transition);


}



.product-card:hover {


    transform:

    translateY(-10px);


    border-color:

    var(--orange);


}



.product-card img {


    width:

    100%;


    height:

    230px;


    object-fit:

    contain;


    margin-bottom:

    25px;


}



.product-card h3 {


    font-size:

    20px;


    margin-bottom:

    10px;


}



.product-card p {


    color:

    var(--text-gray);


    font-size:

    14px;


    margin-bottom:

    20px;


}



.btn-card {


    display:

    inline-flex;


    padding:

    10px 20px;


    border-radius:

    30px;


    background:

    rgba(255,107,0,.12);


    color:

    var(--orange);


    font-weight:

    600;


    transition:

    var(--transition);


}



.btn-card:hover {


    background:

    var(--orange);


    color:

    white;


}



/* ======================================================
   COMO FUNCIONA
====================================================== */


.steps {


    background:

    var(--black);


}



.steps-grid {


    display:

    grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:

    25px;


}



.step {


    text-align:

    center;


    position:

    relative;


}



.step span {


    display:

    inline-flex;


    width:

    70px;


    height:

    70px;


    align-items:

    center;


    justify-content:

    center;


    border-radius:

    50%;


    background:

    rgba(255,107,0,.12);


    color:

    var(--orange);


    font-size:

    22px;


    font-weight:

    800;


    margin-bottom:

    20px;


}



.step h3 {


    font-size:

    22px;


    margin-bottom:

    12px;


}



.step p {


    color:

    var(--text-gray);


    font-size:

    15px;


}

/* ======================================================
   SOBRE A LT PROTEÇÕES
====================================================== */


.about {

    background:
    var(--dark);

}



.about-grid {

    display:

    grid;


    grid-template-columns:

    1fr 1fr;


    gap:

    70px;


    align-items:

    center;


}



.about-grid img {


    border-radius:

    var(--radius);


    border:

    -- 1px solid var(--border);

    


}



.about-grid h2 {


    font-size:

    clamp(30px,4vw,45px);


    line-height:

    1.15;


    margin-bottom:

    25px;


}



.about-grid p {


    color:

    var(--text-gray);


    margin-bottom:

    20px;


}



.about-grid ul {


    margin-top:

    30px;


}



.about-grid li {


    margin-bottom:

    12px;


    color:

    #ddd;


}





/* ======================================================
   DEPOIMENTOS
====================================================== */


.testimonials {


    background:

    var(--black);


}



.testimonial-grid {


    display:

    grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:

    25px;


}



.testimonial-card {


    background:

    rgba(255,255,255,.03);


    border:

    1px solid var(--border);


    border-radius:

    var(--radius);


    padding:

    35px;


    transition:

    var(--transition);


}



.testimonial-card:hover {


    transform:

    translateY(-8px);


    border-color:

    rgba(255,107,0,.4);


}



.stars {


    color:

    var(--orange);


    font-size:

    22px;


    margin-bottom:

    20px;


}



.testimonial-card p {


    color:

    #ddd;


    font-style:

    italic;


    margin-bottom:

    25px;


}



.testimonial-card strong {


    color:

    white;


}





/* ======================================================
   FAQ
====================================================== */


.faq {


    background:

    var(--dark);


}



.faq details {


    max-width:

    850px;


    margin:

    15px auto;


    background:

    #111;


    border:

    1px solid var(--border);


    border-radius:

    12px;


    padding:

    20px 25px;


    cursor:

    pointer;


}



.faq summary {


    font-weight:

    700;


    font-size:

    17px;


    list-style:

    none;


}



.faq summary::-webkit-details-marker {


    display:

    none;


}



.faq details p {


    margin-top:

    20px;


    color:

    var(--text-gray);


}





/* ======================================================
   CTA FINAL
====================================================== */


.cta {


    text-align:

    center;


    background:


    radial-gradient(

    circle,

    rgba(255,107,0,.25),

    transparent 50%

    ),

    var(--black);


}



.cta span {


    color:

    var(--orange);


    font-weight:

    800;


    letter-spacing:

    3px;


}



.cta h2 {


    max-width:

    850px;


    margin:

    25px auto;


    font-size:

    clamp(32px,5vw,55px);


    line-height:

    1.1;


}



.cta p {


    color:

    var(--text-gray);


    font-size:

    18px;


    margin-bottom:

    35px;


}





/* ======================================================
   FOOTER
====================================================== */


footer {


    background:

    #050505;


    padding-top:

    80px;


}



.footer-grid {


    display:

    grid;


    grid-template-columns:

    2fr 1fr 1fr 1fr;


    gap:

    40px;


    padding-bottom:

    50px;


}



.footer-logo {


    width:

    150px;


    margin-bottom:

    20px;


}



footer p {


    color:

    var(--text-gray);


}



footer h3 {


    margin-bottom:

    20px;


}



footer li {


    margin-bottom:

    12px;


    color:

    #aaa;


}



footer a:hover {


    color:

    var(--orange);


}



.copyright {


    border-top:

    1px solid var(--border);


    padding:

    25px 0;


    text-align:

    center;


}





/* ======================================================
   WHATSAPP
====================================================== */


.whatsapp {


    position:

    fixed;


    right:

    25px;


    bottom:

    25px;


    width:

    60px;


    height:

    60px;


    border-radius:

    50%;


    background:

    #25d366;


    display:

    flex;


    align-items:

    center;


    justify-content:

    center;


    z-index:

    999;


    box-shadow:

    0 10px 30px rgba(0,0,0,.4);


    transition:

    var(--transition);


}



.whatsapp:hover {


    transform:

    scale(1.1);


}





/* ======================================================
   ANIMAÇÕES
====================================================== */


@keyframes float {


    0% {

        transform:
        translateY(0);

    }


    50% {

        transform:
        translateY(-15px);

    }


    100% {

        transform:
        translateY(0);

    }

}

.buy-menu{

    position:relative;

}

.buy-button{

    background:var(--orange);

    color:white;

    border:none;

    padding:12px 24px;

    border-radius:40px;

    cursor:pointer;

    font-weight:700;

}

.buy-menu{

    position:relative;

}

.buy-button{

    display:flex;
    align-items:center;
    gap:8px;

    background:var(--orange);
    color:white;

    border:none;

    border-radius:40px;

    padding:12px 24px;

    cursor:pointer;

    font-weight:700;

    transition:.3s;

}

.buy-button:hover{

    transform:translateY(-2px);

}

.arrow{

    font-size:12px;

    transition:.3s;

}

.buy-menu.open .arrow{

    transform:rotate(180deg);

}

.buy-dropdown{

    position:absolute;

    top:calc(100% + 8px);

    right:0;

    width:240px;

    background:#151515;

    border:1px solid rgba(255,255,255,.08);

    border-radius:14px;

    overflow:hidden;

    box-shadow:0 20px 50px rgba(0,0,0,.35);

    opacity:0;

    visibility:hidden;

    transform:translateY(-10px);

    transition:.25s;

    z-index:9999;

}

.buy-menu.open .buy-dropdown{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.buy-dropdown a{

    display:block;

    padding:16px 22px;

    color:#FFF;

    transition:.25s;

}

.buy-dropdown a:hover{

    background:#222;

    color:var(--orange);

}

.buy-dropdown img{

    width:22px;

    height:22px;

    object-fit:contain;

}

.buy-dropdown a{

    display:flex;

    align-items:center;

    gap:14px;

}