h1, h2, h3, .section-title{
                    font-family:'Playfair Display', serif;
                    font-weight:600;
                    letter-spacing:0.5px;
                    
                }


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

                nav h1{
                    color:#EFE6D8;
                    font-weight:700;
                }

                nav ul{
                    list-style:none;
                    display:flex;
                    gap:30px;
                }

                nav ul li a{
                    text-decoration:none;
                    color:#333;
                    font-weight:500;
                    transition:0.3s;
                }

                nav ul li a:hover{
                    color:#ED5752; 
                }

                /* HERO 
                .hero{
                    height:100vh;
                    background:linear-gradient(135deg,#00a896,#02c39a);
                    display:flex;
                    flex-direction:column;
                    justify-content:center;
                    align-items:center;
                    text-align:center;
                    color:white;
                    padding:20px;
                }*/

                .hero h2{
                    font-size:3rem;
                    margin-bottom:20px;
                }

                .hero p{
                    max-width:600px;
                    margin-bottom:30px;
                    font-size:1.2rem;
                }

                .btn{
                    padding:15px 30px;
                    background:white;
                    color:#ED5752;
                    border:none;
                    border-radius:30px;
                    font-weight:600;
                    cursor:pointer;
                    transition:0.3s;
                }

                .btn:hover{
                    background:#ED5752;
                    color:white;
                }

                /* SECCIONES */
                section{
                    padding:100px 10%;
                }

                .section-title{
                    font-family: 'Yellowtail', cursive;   /* Tipografía decorativa */
                    text-align:center;
                    margin-bottom:50px;
                    font-size:2.5rem; /* Tamaño del titulo Mis historias */
                    color:#ED5752; /* Color del titulo Mis historias */
                    font-weight: 450;                    /* Grosor */
                    margin-bottom: 30px; /* menos espacio debajo */
                }

                #productos {
                    padding: 50px 100px ; /* top, right, bottom, left */
                }


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

                .card{
                    background:#f8f9fa;
                    padding:30px;
                    border-radius:15px;
                    text-align:center;
                    transition:0.3s;
                }

                .card:hover{
                    transform:translateY(-10px);
                    box-shadow:0 10px 25px rgba(0,0,0,0.1);
                }



                /* ============================= */
                /* VERSIÓN MÓVIL */
                /* ============================= */

                @media(max-width:768px){


                     /* 👇 ESTA ES LA LÍNEA IMPORTANTE */

                     #productos{
                        padding: 50px 20px; /* 👈 reduce los costados en mobile */
                    }
                    
                    .product-grid{
                        grid-template-columns: 1fr;   /* 👈 UNA sola columna */
                        justify-items: center;        /* 👈 centra el contenido */
                    }

                    .product-item{
                        width: 300px;                 /* tu tamaño original */
                    }
                }

                /* Animaciones Hero */
                .hero h2, .hero p, .hero .btn{
                    opacity:0;
                    transform:translateY(20px);
                    transition:all 0.8s ease-out;
                }

                .hero h2.show{
                    opacity:1;
                    transform:translateY(0);
                    transition-delay:0.2s;
                }

                .hero p.show{
                    opacity:1;
                    transform:translateY(0);
                    transition-delay:0.5s;
                }

                .hero .btn.show{
                    opacity:1;
                    transform:translateY(0);
                    transition-delay:0.8s;
                    animation:buttonBounce 1s ease;
                }

                /* Efecto leve de bounce para botón */
                @keyframes buttonBounce{
                    0%{transform:translateY(20px);}
                    50%{transform:translateY(-5px);}
                    70%{transform:translateY(2px);}
                    100%{transform:translateY(0);}
                }

                /* Botones estilo premium */
                .btn{
                    display:inline-block;
                    padding:14px 28px;
                    background:linear-gradient(135deg,#ED5752,#ff7b76);
                    color:white;
                    font-weight:600;
                    border:none;
                    border-radius:40px;
                    text-decoration:none;
                    transition:all 0.3s ease;
                    box-shadow:0 8px 20px rgba(0,0,0,0.2);
                }

                .btn:hover{
                    transform:translateY(-3px);
                    box-shadow:0 15px 35px rgba(0,0,0,0.3);
                }

                .btn::after{
                    content:'';
                    position:absolute;
                    top:0; left:0;
                    width:100%;
                    height:100%;
                    background:rgba(255,255,255,0.1);
                    transition:0.3s;
                    border-radius:50px;
                    z-index:0;
                }

                .btn:hover::after{
                    background:rgba(255,255,255,0.2);
                }
            
                /* ============================= */
                /* PRODUCTOS CON IMÁGENES */
                /* ============================= */

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

                .product-item{
                    background:#ffffff;
                    border-radius:18px;
                    overflow:hidden;
                    cursor:pointer;
                    box-shadow:0 15px 35px rgba(0,0,0,0.12);
                    transition:all 0.35s ease;
                    height: 350px;  /* altura fija del contenedor */
                    width: 300px;   /* ancho fijo opcional */
                    text-decoration: none;  /* quita el subrayado */
                }

                .product-item:hover{
                    transform:translateY(-10px);
                    box-shadow:0 25px 45px rgba(0,0,0,0.18);
                }

                .product-item img {
                    width: 100%;
                    height: 300px;
                    object-fit: cover;
                    /*border: 3px solid red;*/
                }

                .product-item1{
                    background:#ffffff;
                    border-radius:18px;
                    overflow:hidden;
                    cursor:pointer;
                    box-shadow:0 15px 35px rgba(0,0,0,0.12);
                    transition:all 0.35s ease;
                }

                .product-item1:hover{
                    transform:translateY(-10px);
                    box-shadow:0 25px 45px rgba(0,0,0,0.18);
                }

                .product-item1 img {
                    width: 100%;
                    height: auto;
                    max-height: 260px;  /* la imagen no pasará de 260px de alto */
                    display: block;
                }

                .product-info{
                    padding:20px;
                    text-align:center;
                }

                /* Título ligeramente más arriba */
                .product-item .product-info h3 {
                    font-family: 'Yellowtail', cursive;
                    color: #ED5752;
                    font-size: 25px;
                    font-weight: 400;            /* Grosor de la letra */
                    margin: -12px 0 0 0;   /* negativo arriba para subir el título */
                    padding: 0;
                    line-height: 1.2;
                    text-align: center;   /* centrado horizontal */
                    
                }


                .product-info p{
                    font-size:0.95rem;
                    color:#666;
                }

                /* ============================= */
                /* MODAL PRODUCTO */
                /* ============================= */

                .product-modal{
                    position:fixed;
                    inset:0;
                    background:rgba(0,0,0,0.85);
                    display:none;
                    justify-content:center;  /* 👈 SE QUEDA */
                    align-items:center;      /* 👈 SE QUEDA */
                    padding:30px;
                    z-index:2000;
                    overflow-y:auto;         /* 👈 ESTE ES EL NUEVO IMPORTANTE */
                }

                .product-modal.active{
                    display:flex;
                }

                .modal-content{
                    background:white;
                    border-radius:20px;
                    max-width:900px;
                    width:100%;
                    display:grid;
                    grid-template-columns:1fr 1fr;
                    overflow:hidden;
                    max-height:90vh;   /* 👈 IMPORTANTE */
                }

                .modal-content img{
                    width:100%;
                    height:100%;
                    object-fit:cover;
                }

                .modal-text{
                    padding:40px;
                    overflow-y:auto;   /* 👈 AGREGA ESTO */
                }

                .modal-text h3{
                    color:#ED5752; /*cAMBIA LA LETRA QUE ESTÁ ADENTRO DE LOS BOTONES, CUANDO SE ABRE A UNA PAGINA*/
                    margin-bottom:15px;
                }

                .modal-text p{
                    color:#555;
                    line-height:1.6;
                }

                #modalBotones{
                    margin-top:20px;
                    text-align:center;
                }
                #modalBotones .btn{
                    margin:5px; /* espacio entre botones */
                }

                .modal-close{
                    position:fixed; /* antes estaba absolute */
                    top:15px;
                    right:20px;
                    font-size:35px;
                    color:white;
                    cursor:pointer;
                    z-index:2100; /* más alto que todo */
                }

                /* Cuando NO hay imagen */
                .modal-content.no-image{
                    grid-template-columns:1fr;
                    max-width:500px;
                    margin:auto; /* centra el bloque */
                }

                .modal-content.no-image .modal-text{
                    text-align:center;
                }

                /* Responsive modal */
                @media(max-width:768px){
                    .modal-content{
                        grid-template-columns:1fr;
                    }
                }

                /* ============================= */
                /* BADGES PRODUCTOS */
                /* ============================= */

                .badge{
                    position:absolute;
                    top:15px;
                    left:15px;
                    padding:6px 14px;
                    font-size:0.75rem;
                    font-weight:600;
                    border-radius:20px;
                    color:white;
                    z-index:10;
                    box-shadow:0 5px 15px rgba(0,0,0,0.25);
                }

                /* Badge Nuevo */
                .badge-new{
                    background:linear-gradient(135deg,#ED5752,#00a896);
                    color: #333;
                }

                /* Badge Más Vendido */
                .badge-top{
                    background:linear-gradient(135deg,#ff9f1c,#ffbf69);
                    color:#333;
                }

                /* Ajuste contenedor */
                .product-item{
                    position:relative;
                }