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

body{
    font-family:Arial, sans-serif;
       background:
        linear-gradient(
            rgba(0,0,0,0.75),
            rgba(0,0,0,0.75)
        ),
        url("https://i.all3dp.com/workers/images/fit=scale-down,w=1200,h=675,quality=79,gravity=0.5x0.5,format=auto/wp-content/uploads/2025/09/24102026/WASP_CUBO_HDP_pellet_3D_printer.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    color: white;
    color:white;
    overflow-x:hidden;
}

/* ---------------- FONDO ---------------- */

.fondo{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;

    background:
    linear-gradient(rgba(122, 122, 122, 0.92), rgba(15,15,15,0.92)),
    url("https://www.bing.com/images/search?view=detailV2&ccid=rWuSQ6kG&id=2C252071288ED08A08AF004F386EBCEE1102F2C8&thid=OIP.rWuSQ6kGulhwUK5n1Y7pegHaDt&mediaurl=https%3a%2f%2fsicnova3d.com%2fwp-content%2fuploads%2f1-7.png&cdnurl=https%3a%2f%2fth.bing.com%2fth%2fid%2fR.ad6b9243a906ba587050ae67d58ee97a%3frik%3dyPICEe68bjhPAA%26pid%3dImgRaw%26r%3d0&exph=600&expw=1200&q=imagen+de+un+prototipo&FORM=IRPRST&ck=D9B88E8B1EC9297FA54B042E2582196A&selectedIndex=13&itb=0"),
    url("imagenes/impresora2.jpg"),
    url("imagenes/impresora3.jpg");

    background-size:
    cover,
    350px,
    350px,
    350px;

    background-position:
    center,
    left center,
    center center,
    right center;

    background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;

    z-index:-1;
    opacity:0.35;
}

/* ---------------- HEADER ---------------- */

header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:30px 10%;
}

.logo{
    font-size:28px;
    font-weight:bold;
    letter-spacing:2px;
}

nav a{
    color:white;
    text-decoration:none;
    margin-left:30px;
    transition:0.3s;
}

nav a:hover{
    color:#00bfff;
}

/* ---------------- HERO ---------------- */

.hero{
    min-height:80vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:20px;
}

.hero h1{
    font-size:70px;
    margin-bottom:20px;
}

.hero p{
    max-width:700px;
    color:#b0b0b0;
    font-size:22px;
    margin-bottom:40px;
}

/* ---------------- BOTÓN ---------------- */

.boton{
    padding:15px 35px;
    background:#00bfff;
    color:white;
    text-decoration:none;
    border-radius:8px;
    transition:0.3s;
}

.boton:hover{
    transform:scale(1.05);
}

/* ---------------- SERVICIOS ---------------- */

.servicios{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:30px;
    padding:100px 10%;
}

.tarjeta{
    width:320px;
    background:rgba(255,255,255,0.05);
    backdrop-filter:blur(10px);

    padding:40px;
    border-radius:20px;

    transition:0.3s;
}

.tarjeta:hover{
    transform:translateY(-10px);
}

.tarjeta h2{
    margin-bottom:15px;
    color:#00bfff;
}

.tarjeta p{
    color:#b0b0b0;
}

/* ---------------- FORMULARIO ---------------- */

.contenedor{
    max-width: 900px;
    margin: 50px auto;
    padding: 40px;
}

.contenedor h1{
    text-align: center;
    margin-bottom: 40px;
    font-size: 45px;
}

/* Dos columnas automáticas */
form{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px,1fr));
    gap: 25px;
}

/* Recuadro individual de cada campo */
.campo{
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.12);

    border-radius: 18px;
    padding: 25px;

    transition: 0.3s;
}

.campo:hover{
    transform: translateY(-5px);
    border-color: #00bfff;
    box-shadow: 0 0 25px rgba(0,191,255,0.3);
}

.campo label{
    display: block;
    margin-bottom: 12px;
    font-size: 17px;
    color: #00bfff;
    font-weight: bold;
}

.campo input,
.campo select,
.campo textarea{
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 10px;

    background: rgba(163, 163, 163, 0.08);
    color: rgb(151, 151, 151);
    font-size: 16px;

    outline: none;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus{
    border: 1px solid #00bfff;
    box-shadow: 0 0 15px rgba(0,191,255,0.4);
}

textarea{
    resize: vertical;
    min-height: 120px;
}

/* El campo descripción ocupa todo el ancho */
.campo:nth-of-type(9){
    grid-column: 1 / -1;
}

/* Botones */
button{
    padding: 18px;
    border: none;
    border-radius: 12px;

    background: #00bfff;
    color: rgb(255, 255, 255);
    font-size: 18px;
    font-weight: bold;

    cursor: pointer;
    transition: 0.3s;
}

button:hover{
    transform: scale(1.03);
    background: #0099cc;
}

button[type="submit"]{
    background: #00c96d;
}

button[type="submit"]:hover{
    background: #00a85b;
}

/* Los botones ocupan todo el ancho */
button{
    grid-column: 1 / -1;
}

/* Precio */
.precio{
    margin-top: 40px;
    padding: 35px;

    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(12px);

    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.12);

    text-align: center;
}

#precio{
    font-size: 55px;
    color: #00ff88;
    font-weight: bold;
    margin: 20px 0;
}

/* Móvil */
@media(max-width:768px){

    .hero h1{
        font-size: 45px;
    }

    form{
        grid-template-columns: 1fr;
    }

    .campo:nth-of-type(9){
        grid-column: auto;
    }
}


.contenedor-contacto{
    max-width: 1200px;
    margin: 60px auto;
    padding: 40px;
}

.contenedor-contacto h1{
    text-align: center;
    font-size: 55px;
    margin-bottom: 20px;
}

.subtitulo{
    text-align: center;
    color: #b0b0b0;
    margin-bottom: 50px;
}

.contacto-grid{
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 40px;
}

.info-contacto,
.formulario-contacto{
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
}

.info-contacto h2{
    color: #00bfff;
    margin-bottom: 30px;
}

.info-contacto p{
    margin-bottom: 10px;
}

.formulario-contacto{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media(max-width:768px){
    .contacto-grid{
        grid-template-columns: 1fr;
    }

    .contenedor-contacto h1{
        font-size: 40px;
    }
}

/* ---------------- GALERÍA ---------------- */

.galeria{
    max-width: 1400px;
    margin: 50px auto;
    padding: 40px;
}

.galeria h1{
    text-align: center;
    font-size: 60px;
    margin-bottom: 20px;
}

.subtitulo{
    text-align: center;
    color: #b0b0b0;
    margin-bottom: 50px;
}

.grid-galeria{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
    gap: 30px;
}

.pieza{
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    transition: 0.3s;
}

.pieza:hover{
    transform: translateY(-10px);
    box-shadow: 0 0 25px rgba(0,191,255,0.3);
}

.pieza img{
    width: 100%;
    height: 260px;
    object-fit: cover;
}

.pieza h3{
    color: #00bfff;
    padding: 20px 20px 10px;
}

.pieza p{
    color: #b0b0b0;
    padding: 0 20px 20px;
}

@media(max-width:768px){
    .galeria h1{
        font-size: 40px;
    }
}

/* ================= RESPONSIVE ================= */

/* Tablets */
@media (max-width: 1024px){

    header{
        padding: 20px 5%;
        flex-direction: column;
        gap: 20px;
    }

    nav{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    nav a{
        margin-left: 0;
    }

    .hero h1{
        font-size: 50px;
    }

    .hero p{
        font-size: 18px;
    }

    .servicios{
        padding: 60px 5%;
    }

    .tarjeta{
        width: 100%;
        max-width: 400px;
    }

    .contacto-grid{
        grid-template-columns: 1fr;
    }

    .catalogo-llaveros{
        grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    }

    .grid-galeria{
        grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    }
}


/* Móviles */
@media (max-width: 768px){

    header{
        padding: 20px;
    }

    .logo{
        font-size: 22px;
        text-align: center;
    }

    nav{
        width: 100%;
        flex-direction: column;
        align-items: center;
    }

    nav a{
        padding: 10px 0;
    }

    .hero{
        min-height: 60vh;
    }

    .hero h1{
        font-size: 38px;
    }

    .hero p{
        font-size: 16px;
    }

    .boton{
        padding: 12px 25px;
    }

    .servicios{
        flex-direction: column;
        align-items: center;
        padding: 50px 20px;
    }

    .tarjeta{
        width: 100%;
    }

    .contenedor{
        width: 95%;
        padding: 20px;
        margin: 20px auto;
    }

    form{
        grid-template-columns: 1fr !important;
    }

    .campo{
        padding: 18px;
    }

    input,
    select,
    textarea{
        font-size: 16px;
    }

    button{
        width: 100%;
    }

    .galeria h1,
    .llaveros h1,
    .contenedor-contacto h1{
        font-size: 36px;
    }

    .pieza img,
    .llavero-card img{
        height: 220px;
    }

    #precio{
        font-size: 40px;
    }
}


/* Móviles pequeños */
@media (max-width: 480px){

    .hero h1{
        font-size: 30px;
    }

    .hero p{
        font-size: 14px;
    }

    .logo{
        font-size: 20px;
    }

    .galeria h1,
    .llaveros h1,
    .contenedor-contacto h1{
        font-size: 30px;
    }

    .subtitulo{
        font-size: 15px;
    }

    .tarjeta,
    .llavero-card,
    .pieza,
    .info-contacto,
    .formulario-contacto{
        padding: 20px;
    }

    .pieza img,
    .llavero-card img{
        height: 180px;
    }
}


/* ================= ADAPTACIÓN GLOBAL ================= */

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

html,body{
    width:100%;
    overflow-x:hidden;
}

.tarjeta,
.pieza,
.llavero-card{
    width:100%;
    max-width:350px;
}

/* Tablets */
@media (max-width:1024px){

    header{
        flex-direction:column;
        gap:20px;
        padding:20px 5%;
    }

    nav{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:15px;
    }

    nav a{
        margin-left:0;
    }

    .hero h1{
        font-size:52px;
    }

    .hero p{
        font-size:20px;
    }

    .servicios{
        padding:60px 5%;
    }

    .contacto-grid{
        grid-template-columns:1fr;
    }
}

/* Móviles */
@media (max-width:768px){

    header{
        padding:20px;
    }

    .logo{
        font-size:22px;
        text-align:center;
    }

    nav{
        flex-direction:column;
        align-items:center;
    }

    .hero{
        min-height:60vh;
    }

    .hero h1{
        font-size:38px;
    }

    .hero p{
        font-size:16px;
    }

    .contenedor,
    .contenedor-contacto,
    .galeria,
    .llaveros{
        width:95%;
        padding:20px;
        margin:20px auto;
    }

    form,
    .contacto-grid{
        grid-template-columns:1fr !important;
    }

    .campo{
        padding:18px;
    }

    .galeria h1,
    .contenedor-contacto h1,
    .llaveros h1{
        font-size:38px;
    }

    .pieza img,
    .llavero-card img{
        height:220px;
    }

    #precio{
        font-size:42px;
    }
}

/* Móviles pequeños */
@media (max-width:480px){

    .hero h1{
        font-size:30px;
    }

    .hero p{
        font-size:14px;
    }

    .logo{
        font-size:20px;
    }

    .galeria h1,
    .contenedor-contacto h1,
    .llaveros h1{
        font-size:30px;
    }

    .subtitulo{
        font-size:15px;
    }

    .pieza img,
    .llavero-card img{
        height:180px;
    }
}