html {
    scroll-behavior: smooth;
}

body {
    margin:0;
    font-family:"Segoe UI", Arial, sans-serif;
    background:#080b14;
    color:#f8fafc;
}


/* HEADER */

.header {

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

    padding:22px 8%;

    background:#0b1120;

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

}


.logo {

    color:#38bdf8;

    font-size:30px;

    font-weight:800;

    text-decoration:none;

}


.header nav {

    display:flex;

    gap:30px;

}


.header nav a {

    color:#cbd5e1;

    text-decoration:none;

    transition:.2s;

}


.header nav a:hover {

    color:#38bdf8;

}


/* HERO */


.hero {

    min-height:550px;

    display:flex;

    align-items:center;

    padding:80px 8%;

    background:
    radial-gradient(circle at top right,#2563eb55,transparent 40%),
    linear-gradient(135deg,#111827,#020617);

}


.hero-contenido {

    max-width:750px;

}


.hero h1 {

    font-size:clamp(35px,5vw,60px);

    line-height:1.1;

}


.hero p {

    color:#cbd5e1;

    font-size:20px;

    line-height:1.6;

}



/* BOTON */

.boton {

    display:inline-block;

    margin-top:30px;

    padding:16px 35px;

    border-radius:14px;

    background:#2563eb;

    color:white;

    text-decoration:none;

    font-weight:700;

    transition:.25s;

}


.boton:hover {

    transform:translateY(-3px);

    background:#3b82f6;

}



/* PRODUCTOS */


.productos {

    padding:80px 8%;

}


.productos h2 {

    text-align:center;

    font-size:40px;

    margin-bottom:50px;

}


.productos-grid {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

}



/* CARD */


.producto-card {

    background:#111827;

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

    border-radius:22px;

    padding:25px;

    transition:.3s;

}


.producto-card:hover {

    transform:translateY(-8px);

    border-color:#2563eb;

}


.producto-card img {

    width:100%;

    height:220px;

    object-fit:cover;

    border-radius:16px;

}


.producto-card h3 {

    font-size:22px;

}


.producto-card strong {

    display:block;

    color:#38bdf8;

    font-size:25px;

    margin:15px 0;

}


.producto-card a {

    display:block;

    text-align:center;

    background:#2563eb;

    color:white;

    padding:13px;

    border-radius:12px;

    text-decoration:none;

}


/* PRODUCTO INDIVIDUAL */


.producto-detalle {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    padding:80px 8%;

}


.producto-imagen img {

    width:100%;

    border-radius:25px;

}


.producto-info h1 {

    font-size:45px;

}


.precio {

    font-size:35px;

    color:#38bdf8;

    font-weight:800;

}


.boton-compra {

    margin-top:30px;

    padding:16px 40px;

    border:none;

    border-radius:15px;

    background:#22c55e;

    color:white;

    font-size:18px;

    cursor:pointer;

}



/* FOOTER */


.footer {

    padding:40px;

    text-align:center;

    background:#020617;

    color:#94a3b8;

}



/* MOVIL */


@media(max-width:700px){

    .header {

        flex-direction:column;

        gap:20px;

    }


    .header nav {

        flex-direction:column;

        text-align:center;

    }


    .producto-detalle {

        grid-template-columns:1fr;

    }

}