@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    scroll-behavior:smooth;
    font-family:"Poppins",sans-serif;
}

:root{
    --bg:#07090d;
    --bg-soft:#0d1117;
    --panel:rgba(255,255,255,0.05);
    --panel-strong:rgba(255,255,255,0.08);
    --border:rgba(255,255,255,0.10);
    --text:#ffffff;
    --muted:#b8c0cc;
    --red:#e50914;
    --red-hover:#b8060f;
    --shadow:0 18px 40px rgba(0,0,0,0.35);
    --radius:22px;
}

html,body{
    width:100%;
    min-height:100%;
    overflow-x:hidden;
    background:
        radial-gradient(circle at top left, rgba(229,9,20,0.10), transparent 28%),
        radial-gradient(circle at bottom right, rgba(255,255,255,0.04), transparent 22%),
        linear-gradient(135deg, #050607 0%, #0b0e13 45%, #10141b 100%);
    color:var(--text);
}

section{
    scroll-margin-top:100px;
    padding:80px 5%;
}

*::selection{
    color:#fff;
    background:var(--red);
}

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

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

.container{
    max-width:1280px;
    margin:0 auto;
}

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

/* HEADER */
header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:14px 5%;
    background:rgba(5,7,10,0.78);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(255,255,255,0.08);
    box-shadow:0 10px 28px rgba(0,0,0,0.22);
}

.logo img{
    width:92px;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,0.35));
}

.navbar{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex-grow:1;
}

.navbar a{
    color:#fff;
    font-size:0.95rem;
    font-weight:500;
    padding:10px 16px;
    border-radius:12px;
    transition:all .25s ease;
    position:relative;
}

.navbar a:hover{
    color:#fff;
    background:rgba(255,255,255,0.06);
}

.btn-login{
    background:linear-gradient(135deg, var(--red), #ff2a34);
    color:#fff;
    padding:11px 20px;
    border-radius:14px;
    font-size:0.92rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.4px;
    border:1px solid rgba(255,255,255,0.10);
    box-shadow:0 12px 26px rgba(229,9,20,0.28);
    transition:all .25s ease;
    white-space:nowrap;
}

.btn-login:hover{
    transform:translateY(-2px);
    background:linear-gradient(135deg, #ff2a34, var(--red-hover));
    box-shadow:0 16px 32px rgba(229,9,20,0.36);
}

#menu-icon{
    font-size:26px;
    color:#fff;
    cursor:pointer;
    display:none;
}

/* HOME */
.home{
    width:100%;
    min-height:100vh;
    display:flex;
    align-items:center;
    background-image:url("../KingFixer/KingFixer.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    position:relative;
    padding:0 5%;
}

.home::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(0,0,0,0.76) 0%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.66) 100%);
    z-index:1;
}

.home *{
    position:relative;
    z-index:2;
}

.home-text{
    max-width:760px;
}

.home-text span{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 18px;
    border-radius:999px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.12);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    font-size:.95rem;
    font-weight:600;
    text-transform:uppercase;
    color:#fff;
    margin-bottom:20px;
    box-shadow:var(--shadow);
}

.home-text h1{
    font-size:3.4rem;
    line-height:1.08;
    color:#fff;
    font-weight:800;
    margin-bottom:18px;
    max-width:760px;
}

.home-text p{
    font-size:1.05rem;
    color:#f1f1f1;
    margin:0 0 28px;
    line-height:1.8;
    max-width:680px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px 24px;
    border-radius:14px;
    color:#fff;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.4px;
    background:rgba(255,255,255,0.07);
    border:1px solid rgba(255,255,255,0.14);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 14px 30px rgba(0,0,0,0.26);
    transition:all .25s ease;
}

.btn:hover{
    transform:translateY(-2px);
    background:rgba(229,9,20,0.18);
    border-color:rgba(229,9,20,0.34);
}

/* TITLES */
.section-title{
    font-size:2.35rem;
    font-weight:800;
    color:#fff;
    margin-bottom:18px;
    position:relative;
    display:inline-block;
    letter-spacing:-.4px;
}

.section-title::after{
    content:"";
    display:block;
    width:64px;
    height:4px;
    margin:12px auto 0;
    border-radius:999px;
    background:linear-gradient(90deg, var(--red), #ff5963);
}

.section-description{
    font-size:1.05rem;
    color:var(--muted);
    line-height:1.8;
    max-width:900px;
    margin:0 auto 46px;
}

/* SECTIONS */
.kingfixer,
.distribuidores,
.licenses-section,
#benefits{
    background:transparent;
}

.about-us{
    background:rgba(255,255,255,0.015);
    border-top:1px solid rgba(255,255,255,0.05);
    border-bottom:1px solid rgba(255,255,255,0.05);
}

/* GRID */
.row{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:26px;
    justify-content:center;
    align-items:stretch;
    max-width:1280px;
    margin:0 auto;
}

.benefits-container,
.licenses-container,
.footer-container{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:26px;
    max-width:1280px;
    margin:0 auto;
}

/* GLASS CARDS */
.card,
.info-box,
.benefit-card,
.license-card,
#benefits .card{
    position:relative;
    background:linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.04));
    border:1px solid rgba(255,255,255,0.10);
    border-radius:var(--radius);
    padding:28px 24px;
    box-shadow:var(--shadow);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    overflow:hidden;
    transition:all .30s ease;
    height:100%;
}

.card::before,
.info-box::before,
.benefit-card::before,
.license-card::before,
#benefits .card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.01));
    pointer-events:none;
}

.card:hover,
.info-box:hover,
.benefit-card:hover,
.license-card:hover,
#benefits .card:hover{
    transform:translateY(-7px);
    border-color:rgba(229,9,20,0.24);
    box-shadow:0 24px 46px rgba(0,0,0,0.42);
}

/* ICONOS TRANSPARENTES */
.card-icon,
.info-box i,
.benefit-card i,
#benefits .card i{
    width:74px;
    height:74px;
    margin:0 auto 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:20px;
    font-size:1.85rem;
    color:#fff;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.14);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 10px 24px rgba(0,0,0,0.24);
}

/* CARD TEXT */
.card{
    text-align:center;
}

.card-title,
.info-box h3,
.benefit-card h4,
.license-card h3,
#benefits .card h5{
    font-size:1.18rem;
    font-weight:700;
    color:#fff;
    margin-bottom:10px;
}

.card-description,
.info-box p,
.benefit-card p,
.license-card p,
#benefits .card p{
    font-size:.98rem;
    color:var(--muted);
    line-height:1.75;
}

/* ABOUT */
.info-box{
    text-align:left;
}

.info-box i{
    margin:0 0 18px 0;
}

/* DISTRIBUIDORES */
.buttons{
    display:flex;
    justify-content:center;
    gap:16px;
    margin-bottom:48px;
    flex-wrap:wrap;
}

.btn-whatsapp,
.btn-distribuidores,
.buy-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:13px 22px;
    border-radius:14px;
    font-size:.96rem;
    font-weight:600;
    border:1px solid rgba(255,255,255,0.12);
    transition:all .25s ease;
    cursor:pointer;
}

.btn-whatsapp{
    color:#fff;
    background:linear-gradient(135deg, #1fb85b, #25D366);
    box-shadow:0 14px 30px rgba(37,211,102,0.22);
}

.btn-whatsapp:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 34px rgba(37,211,102,0.28);
}

.btn-distribuidores{
    color:#fff;
    background:linear-gradient(135deg, #d3131d, #ff3b43);
    box-shadow:0 14px 30px rgba(229,9,20,0.25);
}

.btn-distribuidores:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 34px rgba(229,9,20,0.34);
}

.benefits-title{
    font-size:1.9rem;
    font-weight:800;
    color:#fff;
    margin-bottom:32px;
}

/* LICENSES */
.licenses-section{
    text-align:center;
}

.licenses-section h2{
    font-size:2.35rem;
    font-weight:800;
    color:#fff;
    margin-bottom:16px;
}

.licenses-section > p{
    color:var(--muted);
    max-width:800px;
    margin:0 auto 40px;
    line-height:1.8;
}

.license-card{
    text-align:center;
    padding:30px 24px;
}

.license-card img{
    max-width:92px;
    margin:0 auto 18px;
    filter:drop-shadow(0 8px 18px rgba(0,0,0,0.30));
}

.license-card h3{
    font-size:1.28rem;
}

.license-card p{
    margin:6px 0;
}

.license-card .buy-button{
    margin-top:18px;
    width:100%;
    color:#fff;
    background:linear-gradient(135deg, var(--red), #ff2a34);
    box-shadow:0 14px 28px rgba(229,9,20,0.24);
    border:none;
}

.license-card .buy-button:hover{
    transform:translateY(-2px);
    background:linear-gradient(135deg, #ff2a34, var(--red-hover));
}

/* BENEFITS */
#benefits{
    text-align:center;
}

#benefits h2{
    color:#fff;
    font-size:2.25rem;
    font-weight:800;
    margin-bottom:18px;
}

#benefits > p{
    color:var(--muted);
    font-size:1.03rem;
    max-width:800px;
    margin:0 auto 34px;
    line-height:1.8;
}

#benefits .card{
    min-height:240px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

/* FOOTER */
#footer{
    background:rgba(0,0,0,0.24);
    border-top:1px solid rgba(255,255,255,0.06);
    margin-top:30px;
    padding:70px 5% 24px;
}

.footer-container{
    align-items:flex-start;
}

.footer-section{
    text-align:left;
}

.footer-logo{
    width:92px;
    margin-bottom:18px;
}

.footer-section h4{
    font-size:1.08rem;
    color:#fff;
    margin-bottom:16px;
    font-weight:700;
}

.footer-section p,
.footer-section ul,
.footer-section a{
    font-size:.96rem;
    color:var(--muted);
    line-height:1.9;
}

.footer-section ul li{
    margin-bottom:6px;
}

.footer-section ul li a:hover{
    color:#fff;
}

.social-icons{
    display:flex;
    gap:12px;
    margin-top:14px;
    flex-wrap:wrap;
}

.social-icons a{
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    color:#fff;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.10);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    transition:all .25s ease;
}

.social-icons a:hover{
    transform:translateY(-3px);
    background:rgba(229,9,20,0.18);
    border-color:rgba(229,9,20,0.32);
}

.footer-bottom{
    margin-top:38px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,0.08);
    text-align:center;
}

.footer-bottom p{
    font-size:.92rem;
    color:#9ea7b5;
}

/* MOBILE MENU */
@media (max-width:992px){
    .navbar{
        display:none;
        position:fixed;
        top:76px;
        left:5%;
        right:5%;
        width:auto;
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;
        gap:8px;
        padding:16px;
        background:rgba(9,12,18,0.96);
        border:1px solid rgba(255,255,255,0.08);
        border-radius:18px;
        box-shadow:0 20px 40px rgba(0,0,0,0.35);
    }

    .navbar.active{
        display:flex;
    }

    .navbar a{
        padding:14px 16px;
        text-align:center;
        border-radius:12px;
    }

    #menu-icon{
        display:block;
    }

    .btn-login{
        padding:10px 14px;
        font-size:.82rem;
    }

    .home-text h1{
        font-size:2.7rem;
    }

    .section-title,
    .licenses-section h2,
    #benefits h2{
        font-size:2rem;
    }
}

@media (max-width:768px){
    section{
        padding:65px 5%;
    }

    .home{
        padding:0 5%;
    }

    .home-text h1{
        font-size:2.2rem;
    }

    .home-text p{
        font-size:.96rem;
    }

    .section-title,
    .licenses-section h2,
    #benefits h2{
        font-size:1.75rem;
    }

    .section-description,
    .licenses-section > p,
    #benefits > p{
        font-size:.97rem;
    }

    .card,
    .info-box,
    .benefit-card,
    .license-card,
    #benefits .card{
        padding:24px 20px;
    }

    .footer-section{
        text-align:center;
    }

    .social-icons{
        justify-content:center;
    }
}

@media (max-width:480px){
    header{
        padding:12px 4%;
    }

    section{
        padding:55px 4%;
    }

    .logo img{
        width:78px;
    }

    .home-text h1{
        font-size:1.9rem;
    }

    .home-text span{
        font-size:.82rem;
        padding:8px 14px;
    }

    .btn,
    .btn-login,
    .btn-whatsapp,
    .btn-distribuidores,
    .buy-button{
        font-size:.84rem;
    }

    .card-icon,
    .info-box i,
    .benefit-card i,
    #benefits .card i{
        width:66px;
        height:66px;
        font-size:1.6rem;
    }
}