*{
    margin:0;

    padding:0;

    box-sizing:border-box;

}

body{

    background:#f8fafc;

    color:#0f172a;

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

}

/* =====================================
   MAIN NAVIGATION
===================================== */

.main-nav{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1000;

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

    padding:0 4%;
    height:72px;

    background:rgba(6,13,26,.92);
    backdrop-filter:blur(14px);

    border-bottom:1px solid rgba(79,195,247,.15);
}

.nav-logo img{

    height:55px;
    width:auto;
    display:block;

}

.nav-links{
    display:flex;
    align-items:center;
    gap:1.8rem;
    list-style:none;
}

.nav-links a{

    color:#a0aec0;

    text-decoration:none;

    font-size:.88rem;

    font-weight:500;

    letter-spacing:.03em;

    transition:color .2s;
}

.nav-links a:hover{

    color:#4fc3f7;

}

.nav-cta{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:.55rem 1.2rem;

    border-radius:6px;

    background:#1a56db;

    color:#fff;

    text-decoration:none;

    font-size:.88rem;

    font-weight:600;

    transition:all .2s;
}

.nav-cta:hover{

    background:#2a7fff;

    transform:translateY(-1px);

}




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

.product-header {
    width: 100%;
    padding: 18px 40px;
    background: #08111f;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo img {
    width: 120px;
    height: auto;
    display: block;
}

.product-header nav {
    display: flex;
    align-items: center;
    gap: 25px;
}

.product-header nav a {
    text-decoration: none;
    color: #ffffff;
    font-weight: 500;
    font-size: 15px;
    padding: 8px 0;
    transition: color 0.3s ease;
}

.product-header nav a:hover {
    color: #38bdf8;
}

/* =====================================
   PRODUCT PAGE
===================================== */


.product-page{

    width:min(1400px,94%);

    margin:auto;

    padding-top:100px;

    background:#ffffff;
}



/* ===============================
   BREADCRUMB
================================ */

.product-breadcrumb{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:14px;

    color:#94a3b8;

    margin-bottom:35px;

}


.product-breadcrumb strong{

    color:#ffffff;

    font-weight:600;

}





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


.product-hero{

    display:grid;

    grid-template-columns:1fr 1.1fr 0.75fr;

    gap:40px;

    align-items:center;

}


/* ===============================
   PRODUCT COVER
================================ */

.product-cover{

    display:flex;

    justify-content:center;

    align-items:center;

    padding-top:25px;
    padding-bottom:20px;
    
}



.product-cover img{

    width:100%;

    max-width:480px;

    height:auto;

    object-fit:contain;

    filter:
    drop-shadow(0 40px 55px rgba(15,23,42,.28));

    cursor:pointer;

    transition:.3s ease;

}



.product-cover img:hover{

    transform:scale(1.05);

}


/* ===============================
   PRODUCT INFORMATION
================================ */


.product-info{

    padding-top:20px;

}



.product-badge{

    display:inline-flex;

    align-items:center;

    padding:7px 16px;

    border-radius:999px;

    background:#dbeafe;

    color:#1d4ed8;

    font-size:12px;

    font-weight:700;

    letter-spacing:.08em;

    margin-bottom:24px;

}


.product-info h1,
#product-title{

    color:#0f172a !important;

    font-size:44px;

    line-height:1.15;

    font-weight:800;

    letter-spacing:-1px;

}



.subtitle{

    font-size:22px;

    font-weight:700;

    color:#2563eb;

    margin-bottom:22px;

}

/* ===============================
   PRODUCT DESCRIPTION
================================ */

.product-info .description{

    max-width:560px;

    color:#475569;

    font-size:16px;

    line-height:1.7;

    margin-top:20px;

}


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


.hero-features{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

    margin-top:35px;

}



.hero-feature{

    display:flex;

    align-items:center;

    gap:12px;

    color:#334155;

    font-size:15px;

    line-height:1.5;

}



.feature-icon{

    width:32px;

    height:32px;

    min-width:32px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eff6ff;

    color:#2563eb;

    font-size:15px;

    font-weight:700;

}

/* ===============================
   PURCHASE CARD
================================ */


.purchase-card{

   position:sticky;

    top:100px;

    background:#ffffff;

    border-radius:20px;

    padding:32px;

    border:1px solid #e2e8f0;

    box-shadow:
    0 20px 45px rgba(15,23,42,.12);

    min-height:540px;


}



.purchase-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.purchase-badge{

    font-size:12px;

    font-weight:700;

    color:#0f172a;

}



.rating{

    color:#f59e0b;

    font-size:15px;

}



.rating small{

    color:#64748b;

}



.purchase-tier{

    text-align:center;

    margin-top:20px;

    font-size:14px;

    font-weight:600;

}



.purchase-price{

    text-align:center;

    font-size:56px;

    font-weight:800;

    color:#0f172a;

    margin:20px 0 5px;

}



.purchase-subtitle{

    text-align:center;

    color:#64748b;

}



.purchase-features{

    margin:30px 0;

    display:grid;

    gap:16px;

    list-style:none;

}



.purchase-features li{

    color:#334155;

    display:flex;

    align-items:center;

    gap:8px;

    font-size:14px;

}

/* ===============================
   PURCHASE CHECK ICON
================================ */

.check-green{

    color:#16a34a;

    font-weight:800;

    font-size:16px;

}

.checkout-button{

    width:100%;

    padding:17px;

    border-radius:12px;

    border:none;

    background:#2563eb;

    color:#ffffff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

}



.checkout-button:hover{

    background:#1d4ed8;

}



.purchase-note{

    text-align:center;

    font-size:13px;

    color:#64748b;

    margin-top:18px;

}

/* ===============================
   SECURE CHECKOUT BADGE
================================ */


.secure-badge{

    text-align:center;

    margin-top:20px;

    padding:8px 12px;

    border-radius:8px;

    background:#f1f5f9;

    color:#475569;

    font-size:13px;

    font-weight:600;

}

.payment-icons{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-top:20px;

    font-size:12px;

    color:#2563eb;

}

/* ==================================
   PRODUCT STATISTICS
================================== */

.product-stats{

    width:100%;

    padding:45px 5%;

    background:#ffffff;

    display:grid;

    grid-template-columns:repeat(6,1fr);

    gap:25px;

    margin-top:80px;

    border-top:1px solid #e2e8f0;

    border-bottom:1px solid #e2e8f0;

}

.product-stats div{

    text-align:center;

}


.product-stats strong{

    display:block;

    color:#0f172a;

    font-size:32px;

    font-weight:800;

    margin-bottom:8px;

}


.product-stats span{

    color:#94a3b8;

    font-size:14px;

}
/* =====================================
   TSEC Lead Capture Modal
===================================== */

.lead-modal {

    display: none;

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(0,0,0,0.65);

    z-index: 9999;

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

}


/* Modal Container */

.lead-modal-content {

    background: #ffffff;

    width: 90%;
    max-width: 480px;

    padding: 35px;

    border-radius: 14px;

    position: relative;

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

}


/* Close Button */

.close-modal {

    position: absolute;

    top: 15px;
    right: 18px;

    border: none;

    background: transparent;

    font-size: 28px;

    cursor: pointer;

}


/* Title */

.lead-modal-content h2 {

    margin-top: 0;

    font-size: 28px;

}


/* Description */

.lead-modal-content p {

    color: #666;

    margin-bottom: 25px;

}


/* Form */

#lead-form {

    display: flex;

    flex-direction: column;

    gap: 14px;

}


#lead-form input {

    padding: 13px;

    border-radius: 8px;

    border: 1px solid #ccc;

    font-size: 15px;

}


#lead-form input:focus {

    outline: none;

    border-color: #2563eb;

}


/* Consent */

.consent {

    display: flex;

    gap: 8px;

    align-items: flex-start;

    font-size: 13px;

    color: #555;

}


/* Submit Button */

#lead-form button {

    margin-top: 15px;

    padding: 14px;

    border-radius: 8px;

    border: none;

    cursor: pointer;

    font-size: 16px;

    font-weight: 600;

}

.footer-logo img{
    width:120px;
    max-width:120px;
    height:auto;
    display:block;
}

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


footer{

    padding:2rem 4%;

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

    background:#060d1a;

    color:#ffffff;

}


.footer-inner{

    max-width:1100px;

    margin:0 auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:1rem;

}


.footer-logo img{

    height:80px;

    width:auto;

    display:block;

}


.footer-copy{

    font-size:.78rem;

    color:#94a3b8;

}


.footer-links{

    display:flex;

    gap:1.5rem;

}


.footer-links a{

    color:#94a3b8;

    text-decoration:none;

    font-size:.78rem;

    transition:.2s;

}


.footer-links a:hover{

    color:#4fc3f7;

}

.product-meta{

    display:grid;

    grid-template-columns:repeat(5,180px);

    gap:20px;

    justify-content:center;

    width:100%;

}

.meta-item{

   background:#ffffff;

    border:1px solid #e2e8f0;

    border-radius:16px;

    padding:22px 18px;

     min-height:140px;
}


.meta-item strong{

    display:block;

    color:#2563eb;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

    margin-bottom:12px;

}


.meta-item span{

    color:#1e293b;

    font-size:15px;

    line-height:1.6;

    font-weight:500;

}

/* ================================
   CHECKOUT PAGE
================================ */


/* Checkout Layout */

.checkout-page{

    width:min(1200px,94%);

    margin:auto;

}



/* Checkout Progress */

.checkout-progress{

    max-width:900px;

    margin:60px auto 40px;

    display:flex;

    align-items:center;

    justify-content:center;

}


.progress-step{

    display:flex;

    align-items:center;

    gap:15px;

    opacity:.45;

}


.progress-step.active{

    opacity:1;

}


.step-number{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#1e293b;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    color:white;

}


.progress-step.active .step-number{

    background:#2563eb;

}


.step-content h4{

    margin:0;

    font-size:16px;

    color:white;

}


.step-content p{

    margin:4px 0 0;

    font-size:13px;

    color:#94a3b8;

}


.progress-line{

    width:80px;

    height:1px;

    background:#334155;

    margin:0 25px;

}



/* Checkout Cards */

.checkout-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

    margin-bottom:80px;

}


.order-summary,
.payment-box{

    background:#111c2e;

    border:1px solid #23324a;

    border-radius:16px;

    padding:30px;

}



.checkout-product{

    display:flex;

    gap:25px;

    align-items:center;

}


.checkout-product img{

    width:120px;

    border-radius:10px;

}


.checkout-product span{

    font-size:28px;

    font-weight:700;

    color:white;

}



.checkout-button{

    width:100%;

    padding:16px;

    border:none;

    border-radius:8px;

    background:#2563eb;

    color:white;

    font-size:16px;

    cursor:pointer;

}



/* Mobile */

@media(max-width:768px){


    .checkout-container{

        grid-template-columns:1fr;

    }


    .checkout-progress{

        flex-direction:column;

        gap:20px;

    }


    .progress-line{

        width:1px;

        height:40px;

    }

}

/* ==================================
   PRODUCT INFORMATION SECTION
================================== */

.product-information-section{

    width:min(1200px,94%);

    margin:80px auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

    background:#f8fafc;

}

.product-information-image img{

    width:100%;

    max-width:420px;

}

.meta-item strong{

    display:block;

    color:#4fc3f7;

    margin-bottom:8px;

}


.meta-item span{

    color:#cbd5e1;

}



/* ==================================
 WHAT'S INCLUDED
================================== */


.included-section{

    width:100%;

    padding:90px 5%;

    margin:0;

    background:#ffffff;

    text-align:center;

}


.included-section h2{

    color:#0f172a;

    font-size:42px;

    font-weight:800;

}


.included-section > p{

    color:#64748b;

    margin-bottom:45px;

}



.included-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}



.included-card{

    background:#ffffff;

    border:1px solid #e2e8f0;

    border-radius:16px;

    padding:25px;

    text-align:left;

    box-shadow:0 10px 25px rgba(15,23,42,.06);

}


.included-card h3{

    color:#0f172a;

    font-size:20px;

    margin-bottom:12px;

}


.included-card p{

    color:#64748b;

    line-height:1.6;

}

/* ==================================
   FRAMEWORK COVERAGE
================================== */


.framework-section{

    width:100%;

    padding:70px 5% 90px;

    background:#ffffff;

    text-align:center;

}


.framework-section h2{

    color:#0f172a;

    font-size:38px;

    margin-bottom:15px;

}


.framework-section > p{

    color:#94a3b8;

    margin-bottom:45px;

}



.framework-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}



.framework-card{

    background:#ffffff;

    border:1px solid #e2e8f0;

    border-radius:16px;

    padding:25px;

}

/* Framework Icons */

.framework-card img{

    width:110px;

    height:110px;

    object-fit:contain;

    margin-bottom:20px;

    filter:drop-shadow(0 10px 20px rgba(0,0,0,.35));

}

/* ICONOS DE FRAMEWORK */

.framework-icon{

    width:120px;

    height:120px;

    margin:0 auto 25px;

    display:flex;

    align-items:center;

    justify-content:center;

}


.framework-icon img{

    width:130px;

    height:130px;

    object-fit:contain;

}


.framework-card h3{

    color:#0f172a;

    font-size:18px;

    margin-bottom:12px;

}



.framework-card p{

    color:#64748b;

    font-size:14px;

    line-height:1.6;

}

/* ===============================
   PRODUCT DETAILS SECTION
================================ */


.product-details-section{

    width:min(1200px,94%);

    margin:90px auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}



.product-information-image{

    display:flex;

    justify-content:center;

}


.product-information-image img{

    width:100%;

    max-width:420px;

    filter:drop-shadow(0 35px 45px rgba(0,0,0,.25));

}

.meta-item strong{

    display:block;

    color:#38bdf8;

    font-size:14px;

    margin-bottom:8px;

    text-transform:uppercase;

    letter-spacing:.08em;

}



.meta-item span{

    color:#cbd5e1;

    font-size:16px;

    line-height:1.7;

}

/* ==================================
   PRODUCT HERO TITLE FIX
================================== */

.product-info h1,
#product-title{

    color:#0f172a !important;

    font-size:58px;

    line-height:1.05;

    font-weight:800;

    letter-spacing:-2px;

}
  
}