/* =====================================
   DELICIAS CREATIVAS
   Diseño principal
===================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Playfair+Display:wght@700&display=swap');

:root{
    --rosa:#e88ca8;
    --rosa-claro:#ffe7ef;
    --marron:#6b4638;
    --crema:#fffaf5;
    --blanco:#ffffff;
    --texto:#444;
    --verde:#25D366;
    --sombra: 0 15px 40px rgba(0,0,0,.08);
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:var(--crema);
    color:var(--texto);
}

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

a{
    text-decoration:none;
}

h1,h2{
    font-family:'Playfair Display',serif;
    color:var(--marron);
}

h2{
    text-align:center;
    font-size:2.5rem;
    margin-bottom:20px;
}

.subtitle{
    text-align:center;
    max-width:700px;
    margin:0 auto 50px;
    color:#777;
}

/* =====================================
          NAVBAR (con ocultamiento al scroll)
===================================== */
.navbar{
    position:sticky;
    top:0;
    z-index:1000;
    background:white;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:15px 5%;
    box-shadow:0 5px 20px rgba(0,0,0,.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.navbar.hidden {
    transform: translateY(-100%);
    box-shadow: none;
}

.logo{
    display:flex;
    align-items:center;
    gap:15px;
}

.logo img{
    width:65px;
    height:65px;
    object-fit:cover;
    border-radius:50%;
}

.logo h2{
    font-family:'Poppins';
    font-size:1.2rem;
    margin:0;
}

.navbar nav{
    display:flex;
    gap:30px;
}

.navbar nav a{
    color:var(--texto);
    font-weight:500;
    transition:.3s;
    font-size:0.95rem;
}

.navbar nav a:hover{
    color:var(--rosa);
}

.btn-nav{
    background:var(--rosa);
    color:white;
    padding:12px 25px;
    border-radius:30px;
    font-weight:600;
}

.nav-buttons {
    display: flex;
    gap: 15px;
    align-items: center;
}

.btn-instagram {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: white;
    font-size: 1.5rem;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

.btn-instagram:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(225, 48, 108, 0.4);
}

/* =====================================
             HERO
===================================== */
.hero{
    min-height:90vh;
    width:90%;
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:50px;
}

.hero-text span{
    background:var(--rosa-claro);
    color:#d25b7c;
    padding:10px 20px;
    border-radius:30px;
    font-weight:600;
}

.hero h1{
    font-size:4rem;
    line-height:1.1;
    margin:25px 0;
}

.hero p{
    font-size:1.1rem;
    line-height:1.8;
    color:#666;
}

.hero-buttons{
    margin-top:35px;
    display:flex;
    gap:20px;
}

.btn-primary,
.btn-whatsapp{
    padding:16px 30px;
    border-radius:40px;
    font-weight:700;
    transition:.3s;
}

.btn-primary{
    background:var(--rosa);
    color:white;
}

.btn-whatsapp{
    background:var(--verde);
    color:white;
}

.btn-primary:hover,
.btn-whatsapp:hover{
    transform:translateY(-5px);
}

.hero-image img{
    border-radius:35px;
    box-shadow:var(--sombra);
}

/* =====================================
          SECCIONES
===================================== */
section{
    width:90%;
    max-width:1200px;
    margin:auto;
    padding:80px 0;
}

/* =====================================
          PRODUCTOS
===================================== */
.productos-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
}

.product-card{
    background:white;
    border-radius:25px;
    overflow:hidden;
    box-shadow:var(--sombra);
    transition:.3s;
    display:flex;
    flex-direction:column;
}

.product-card:hover{
    transform:translateY(-5px);
}

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

.product-info{
    padding:20px 25px;
    flex:1;
    display:flex;
    flex-direction:column;
}

.product-info h3{
    color:var(--marron);
    margin-bottom:10px;
}

.precio{
    color:var(--rosa);
    font-size:1.4rem;
    font-weight:700;
}

.btn-producto{
    display:block;
    margin-top:15px;
    background:var(--verde);
    color:white;
    text-align:center;
    padding:12px;
    border-radius:30px;
    transition:.3s;
}

.btn-producto:hover{
    opacity:.85;
}

/* =====================================
          COMENTARIOS
===================================== */
.comentarios-section {
    margin-top: 20px;
    border-top: 1px solid #f0e0e8;
    padding-top: 15px;
}

.comentarios-toggle {
    background: transparent;
    border: none;
    color: var(--rosa);
    font-weight: 600;
    cursor: pointer;
    font-size: 0.95rem;
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: .2s;
}

.comentarios-toggle:hover {
    color: var(--marron);
}

.comentarios-list {
    max-height: 300px;
    overflow-y: auto;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.comentario-item {
    background: #f9f4f6;
    border-radius: 14px;
    padding: 12px 16px;
    border-left: 4px solid var(--rosa);
}

.comentario-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.comentario-nombre {
    font-weight: 600;
    color: var(--marron);
    font-size: 0.95rem;
}

.comentario-fecha {
    font-size: 0.75rem;
    color: #999;
}

.comentario-texto {
    font-size: 0.9rem;
    line-height: 1.4;
    color: #555;
    margin: 4px 0;
}

.comentario-estrellas {
    color: #ffc107;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.comentario-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    background: #faf7f8;
    padding: 15px;
    border-radius: 16px;
}

.comentario-form input,
.comentario-form textarea {
    border: 1px solid #e8dbe0;
    border-radius: 30px;
    padding: 10px 16px;
    font-family: inherit;
    font-size: 0.9rem;
    background: white;
    transition: .2s;
}

.comentario-form input:focus,
.comentario-form textarea:focus {
    outline: none;
    border-color: var(--rosa);
    box-shadow: 0 0 0 3px rgba(232, 140, 168, 0.2);
}

.comentario-form textarea {
    border-radius: 16px;
    min-height: 60px;
    resize: vertical;
}

.comentario-form .fila-estrellas {
    display: flex;
    align-items: center;
    gap: 12px;
}

.comentario-form .fila-estrellas label {
    font-size: 0.9rem;
    font-weight: 500;
}

.comentario-form .estrellas-input {
    display: flex;
    gap: 4px;
}

.comentario-form .estrellas-input .estrella {
    font-size: 1.4rem;
    cursor: pointer;
    color: #ddd;
    transition: .2s;
    line-height: 1;
}

.comentario-form .estrellas-input .estrella.activa {
    color: #ffc107;
}

.comentario-form .btn-enviar-comentario {
    background: var(--rosa);
    color: white;
    border: none;
    padding: 10px;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
    transition: .3s;
    font-size: 0.95rem;
}

.comentario-form .btn-enviar-comentario:hover {
    opacity: .8;
}

.sin-comentarios {
    color: #999;
    font-style: italic;
    text-align: center;
    padding: 10px;
}

/* =====================================
          EVENTOS
===================================== */
.eventos-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:25px;
}

.evento-card{
    background:white;
    padding:30px;
    text-align:center;
    border-radius:20px;
    box-shadow:var(--sombra);
    transition:.3s;
}

.evento-card:hover{
    transform:translateY(-8px);
}

.evento-card strong{
    color:var(--rosa);
    font-size:1.3rem;
}

/* =====================================
   MENÚ COMPLETO (sección eventos)  👈 NUEVO
===================================== */
.menu-completo {
    text-align: center;
    margin: 30px 0 40px;
}

.menu-completo img {
    max-width: 100%;
    border-radius: 25px;
    box-shadow: var(--sombra);
    transition: transform 0.3s;
}

.menu-completo img:hover {
    transform: scale(1.02);
}

.menu-caption {
    margin-top: 12px;
    color: #777;
    font-weight: 500;
    font-size: 1rem;
}

/* =====================================
        TESTIMONIOS
===================================== */
.testimonios-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:25px;
}

.testimonios-grid img{
    border-radius:20px;
    box-shadow:var(--sombra);
    transition:.3s;
}

.testimonios-grid img:hover{
    transform:scale(1.05);
}

/* =====================================
          GALERIA
===================================== */
.galeria-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
}

.galeria-grid img{
    height:250px;
    object-fit:cover;
    border-radius:25px;
    box-shadow:var(--sombra);
}

/* =====================================
             FOOTER
===================================== */
footer{
    background:var(--marron);
    color:white;
    text-align:center;
    padding:60px 20px;
}

footer img{
    width:100px;
    border-radius:50%;
    margin:auto;
    margin-bottom:20px;
}

footer h2{
    color:white;
}

.footer-social {
    margin-top: 25px;
}

.footer-instagram {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: white;
    font-weight: 600;
    text-decoration: none;
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    padding: 10px 22px;
    border-radius: 30px;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.footer-instagram:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 18px rgba(225, 48, 108, 0.5);
}

/* =====================================
       WHATSAPP FLOTANTE
===================================== */
.floating-whatsapp{
    position:fixed;
    right:25px;
    bottom:25px;
    width:65px;
    height:65px;
    border-radius:50%;
    background:var(--verde);
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:2rem;
    box-shadow:var(--sombra);
    z-index:2000;
}

/* =====================================
             MOVIL
===================================== */
@media(max-width:850px){
    .navbar{
        flex-wrap: wrap;
        padding: 10px 5%;
        gap: 8px;
    }
    .logo img{
        width: 45px;
        height: 45px;
    }
    .logo h2{
        font-size: 0.95rem;
    }
    .navbar nav{
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        order: 3;
    }
    .navbar nav a{
        font-size: 0.8rem;
        padding: 4px 0;
    }
    .nav-buttons{
        gap: 10px;
    }
    .btn-nav{
        padding: 8px 16px;
        font-size: 0.85rem;
    }
    .btn-instagram{
        width: 36px;
        height: 36px;
        font-size: 1.2rem;
    }
    .hero{
        grid-template-columns:1fr;
        text-align:center;
    }
    .hero h1{
        font-size:2.8rem;
    }
    .hero-buttons{
        flex-direction:column;
    }
    .productos-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:500px){
    .navbar{
        padding: 8px 4%;
        gap: 6px;
    }
    .logo img{
        width: 38px;
        height: 38px;
    }
    .logo h2{
        font-size: 0.8rem;
    }
    .navbar nav a{
        font-size: 0.7rem;
        padding: 3px 0;
    }
    .btn-nav{
        padding: 6px 14px;
        font-size: 0.75rem;
    }
    .btn-instagram{
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
    .navbar nav{
        gap: 8px;
    }
}

/* ================================
   FILTROS
================================ */
.filtros{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-bottom:40px;
    flex-wrap:wrap;
}

.filtros input,
.filtros select{
    padding:15px 20px;
    border:none;
    border-radius:30px;
    background:white;
    box-shadow:var(--sombra);
    font-size:1rem;
}

.filtros input{
    width:300px;
}

.etiqueta{
    display:inline-block;
    background:#ffe7a8;
    color:#8a6200;
    padding:7px 15px;
    border-radius:20px;
    margin-top:10px;
    font-size:.85rem;
    font-weight:bold;
}

@media(max-width:600px){
    .filtros{
        flex-direction:column;
    }
    .filtros input{
        width:100%;
    }
}

/* ==================================
   SLIDERS (MEJORADO PARA TÁCTIL)
================================== */
.slider-container{
    position:relative;
    display:flex;
    align-items:center;
    gap:15px;
}

.slider{
    display:flex;
    gap:25px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x;
    width:100%;
    scroll-snap-type:x mandatory;
    padding:10px 0;
}

.slider img{
    min-width:300px;
    height:380px;
    object-fit:cover;
    border-radius:25px;
    box-shadow:var(--sombra);
    transition:transform .3s;
    scroll-snap-align:start;
    flex-shrink:0;
}

.slider img:hover{
    transform:scale(1.03);
}

.slider-btn{
    border:none;
    background:var(--rosa);
    color:white;
    width:50px;
    height:50px;
    border-radius:50%;
    cursor:pointer;
    font-size:1.5rem;
    z-index:5;
    flex-shrink:0;
}

.slider-btn:hover{
    transform:scale(1.1);
}

@media(max-width:700px){
    .slider img{
        min-width:260px;
        height:330px;
        scroll-snap-align:center;
    }
    .slider-btn{
        width:40px;
        height:40px;
    }
}

/* ==================================
        LIGHTBOX
================================== */
.lightbox{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.85);
    z-index:9999;
    justify-content:center;
    align-items:center;
    padding:20px;
}

.lightbox img{
    max-width:90%;
    max-height:90vh;
    border-radius:20px;
}

#cerrar-lightbox{
    position:absolute;
    top:30px;
    right:40px;
    color:white;
    font-size:40px;
    cursor:pointer;
}

.estrellas{
    color:#ffc107;
    letter-spacing:3px;
    margin:10px 0;
    font-size:1.1rem;
}

.tipo-entrega{
    display:flex;
    margin:18px 0;
    border-radius:40px;
    overflow:hidden;
    border:2px solid #f1d2dc;
}

.btn-entrega{
    flex:1;
    border:none;
    background:white;
    padding:12px;
    cursor:pointer;
    font-weight:600;
    transition:.3s;
}

.btn-entrega.activo{
    background:#e88ca8;
    color:white;
}

.nota-delivery{
    font-size:.85rem;
    color:#666;
    min-height:20px;
    margin-bottom:15px;
}

.precio{
    font-size:1.5rem;
    font-weight:bold;
    transition:.25s;
}

/* ==================================
   CONTROLES DE CANTIDAD
================================== */
.cantidad-control {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 15px 0;
    justify-content: center;
}

.cantidad-control input {
    width: 50px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px;
    font-size: 1rem;
    background: white;
    -moz-appearance: textfield;
}

.cantidad-control input::-webkit-outer-spin-button,
.cantidad-control input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.btn-cantidad {
    width: 35px;
    height: 35px;
    border: none;
    border-radius: 50%;
    background: var(--rosa);
    color: white;
    font-size: 1.3rem;
    cursor: pointer;
    transition: .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.btn-cantidad:hover {
    transform: scale(1.1);
}