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

body{font-family: Garamond; line-height:1.6; color:#222; background:#f5f5f5;}

header{background:#1e1e1e; color:#fff; padding:5px 0; position:center; top:0; z-index:1000; display: grid; place-items: center;}

.containerMenu a {text-decoration: none;}
.containerMenu a:hover {background-color: red; border-radius: 5px;}
.containerMenu p {font-family: 'Bodoni Moda', serif; font-size:1.7rem;}

.container{width:90vw; max-width:1200px; margin:auto;}
.container a {text-decoration: none;}


@media(max-width:500px){
    nav{   margin-top:15px; }
    nav a{ color:#fff; text-decoration:none; display:inline-block;   margin:10px 10px 0 0; }
    .containerMenu{width:90vw; max-width:1200px; margin:10px; display:grid; place-items: center;}
    .imgWa {height: 50px;}
    .hero h2{ color:#fff; font-size:1.7rem;}
    .hero h3{ color:#cfcece; font-size:1rem; margin:20px 0;}

    .products-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(125px,1fr)); gap:15px; margin-top:15px;}
    .product-card{ display:block; text-decoration:none; color:inherit; background:#f1cea6; border-radius:6px; overflow:hidden; box-shadow:0 1px 5px rgba(0,0,0,.12); transition:transform .2s ease;}
    .product-card:hover{ transform:translateY(-8px);}
    .product-card img{ width:100%; height:130px; object-fit:cover;}
    .product-card h3{ padding:10px; text-align:center;}

    .carousel-wrapper{width:100%; max-width:1200px; height:60vh; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:0px;} 
    .carousel-btn{ border:none; padding:10px 14px; font-size:18px;; cursor:pointer; border-radius:8px;}
}

@media (min-width:501px) {
    nav a{ color:#fff; margin-left:20px; text-decoration:none; padding: 14px 10px;}
    .containerMenu{width:90vw; max-width:1200px; margin:auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;}
    .imgWa {height: 80px;}
    .hero h2{ color:#fff; font-size:3rem;}
    .hero h3{ color:#cfcece; font-size:2rem; margin:20px 0;}

    .products-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:30px; margin-top:30px;}
    .product-card{ display:block; text-decoration:none; color:inherit; background:#f1cea6; border-radius:12px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.12); transition:transform .2s ease;}
    .product-card:hover{ transform:translateY(-4px);}
    .product-card img{ width:100%; height:260px; object-fit:cover;}
    .product-card h3{ padding:20px; text-align:center;}

    .carousel-wrapper{ width:100%; max-width:1200px; height:80vh; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:0px;}
    .carousel-btn{ border:none; padding:15px 20px; font-size:24px; cursor:pointer; border-radius:8px;}
}

.imgAnt {height: 8vw;}
.imgProdName {height: 20vw; border-radius: 5px;}

.fondoPage{background:url('web\ images/fondo_page.png') top center/cover no-repeat; width: 100%; height: auto; display: block; }
.hero{ background:url('web\ images/fondo_landscape.png') top center/cover no-repeat; height:85vh; width: 100%; overflow: hidden;}
.hero img{width: 100%; height: auto; display: block; }

.overlay{ background:rgba(0,0,0,0.55); width:100%; height:100%; display:flex; align-items:center;}
.btn{ display:inline-block; background:#c29b5b; color:#fff; padding:12px 24px; text-decoration:none; border-radius:4px;}
.btn:hover {background-color: red; border-radius: 5px;}

.section{ padding:20px 0;}
.dark{ background:#1e1e1e; color:#fff;}
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:25px; margin-top:40px;}
.card{ background:#fff; color:#222; border-radius:10px; overflow:hidden; transition:0.3s;}
.card:hover{ transform:translateY(-5px);}
.card img{ width:100%; height:250px; object-fit:cover;}
.card h3{ padding:20px;}

footer{ background:#111; color:#fff; text-align:center; padding:20px;}

.carousel-container{ display:flex; align-items:center; justify-content:center; gap:15px; margin-top:0px;}
.carousel-image{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:none;}