/* =========================================
   Variables de Marca (Paleta Coni Cheesecake)
========================================= */
:root {
    --color-white: #FFFFFF;
    --color-bg-light: #F9F7FA;
    --color-primary: #5A3A82;
    --color-secondary: #B098C6;
    --color-accent: #D28C33;
    --color-text-dark: #2C1F4A;
    --color-text-light: #6B5C82;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Lato', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-body); color: var(--color-text-dark); background-color: var(--color-bg-light); line-height: 1.6; padding-top: 80px;}
.container { width: 90%; max-width: 1200px; margin: 0 auto; }
.section { padding: 90px 0; }
.bg-white { background-color: var(--color-white); }
.text-center { text-align: center; }

/* Tipografía y Logos */
h1, h2, h3, .logo-text { font-family: var(--font-heading); color: var(--color-primary); font-weight: 700; }
.nav-logo { height: 60px; width: auto; display: block; border-radius: 50%; }
.hero-logo { height: 180px; width: auto; margin-bottom: 20px; filter: drop-shadow(0 4px 6px rgba(90, 58, 130, 0.1)); border-radius: 50%; }

/* Botones y Formularios */
.btn { display: inline-block; padding: 14px 28px; font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; border-radius: 50px; border: none; transition: all 0.3s ease; text-decoration: none; text-align: center; font-size: 0.9rem;}
.btn-primary { background-color: var(--color-primary); color: var(--color-white); box-shadow: 0 4px 15px rgba(90, 58, 130, 0.3); }
.btn-primary:hover { background-color: #422960; transform: translateY(-2px); }
.btn-outline { background-color: transparent; border: 2px solid var(--color-primary); color: var(--color-primary); }
.btn-outline:hover { background-color: var(--color-primary); color: var(--color-white); }
.w-100 { width: 100%; }
.size-selector { width: 100%; padding: 12px; margin: 15px 0; border: 1px solid var(--color-secondary); border-radius: 8px; font-family: var(--font-body); color: var(--color-text-dark); background-color: var(--color-white); outline: none; cursor: pointer; }
.size-selector:focus { border-color: var(--color-primary); }

/* Navegación (Morada) */
nav { position: fixed; top: 0; width: 100%; padding: 10px 0; background-color: var(--color-primary); z-index: 2000; border-bottom: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s; box-shadow: 0 2px 10px rgba(0,0,0,0.1);}
.nav-container { display: flex; justify-content: space-between; align-items: center; }
.logo { display: flex; align-items: center; text-decoration: none; }
.nav-links { display: flex; gap: 35px; align-items: center; }
.nav-links a { text-decoration: none; color: var(--color-white); font-weight: 600; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 1px; transition: color 0.3s; }
.nav-links a:hover { color: var(--color-accent); }

/* Controles de Cesta y Animación */
.cart-btn { background: none; border: none; font-weight: 700; cursor: pointer; color: var(--color-white); font-size: 1.1rem; display: flex; align-items: center; gap: 8px; transition: color 0.3s;}
.cart-btn:hover { color: var(--color-accent); }
@keyframes cartBounce { 0% { transform: scale(1); } 50% { transform: scale(1.3); color: var(--color-accent); } 100% { transform: scale(1); } }
.cart-bounce { animation: cartBounce 0.4s ease; }
.quantity-controls { display: flex; align-items: center; gap: 8px; border: 1px solid var(--color-secondary); border-radius: 6px; overflow: hidden; background: var(--color-white); }
.quantity-controls button { background: var(--color-bg-light); border: none; padding: 4px 12px; cursor: pointer; color: var(--color-primary); font-weight: bold; font-size: 1.1rem; transition: background 0.2s; }
.quantity-controls button:hover { background: var(--color-secondary); color: var(--color-white); }
.quantity-controls span { font-weight: bold; font-size: 0.95rem; min-width: 20px; text-align: center; color: var(--color-text-dark); }

/* Botones para Menú Móvil */
.hamburger { display: none; background: none; border: none; font-size: 2.2rem; color: var(--color-white); cursor: pointer; transition: color 0.3s; }
.hamburger:hover { color: var(--color-accent); }
.close-menu { display: none; background: none; border: none; font-size: 3rem; color: var(--color-white); cursor: pointer; position: absolute; top: 10px; right: 20px; }
.cart-text { display: inline; }

/* Etiquetas, Alérgenos, Mapas e IG */
.bestseller-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--color-accent); color: var(--color-white); padding: 5px 16px; border-radius: 20px; font-size: 0.75rem; font-weight: bold; text-transform: uppercase; z-index: 10; box-shadow: 0 4px 10px rgba(210, 140, 51, 0.4); white-space: nowrap;}
.allergen-icons { display: flex; gap: 8px; justify-content: center; margin-bottom: 12px; }
.allergen-icons img { width: 22px; height: 22px; opacity: 0.5; filter: grayscale(100%); transition: all 0.3s ease; }
.allergen-icons img:hover { opacity: 1; filter: grayscale(0%); transform: scale(1.1); }
.ig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: 40px; }
.ig-grid img { width: 100%; height: 250px; object-fit: cover; border-radius: 12px; transition: transform 0.4s; cursor: pointer;}
.ig-grid img:hover { transform: scale(1.03); }
.map-container iframe { width: 100%; height: 350px; border-radius: 16px; border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }

/* Menú Grid Normal */
.menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; margin-top: 50px;}
.product-card { position: relative; background: var(--color-white); border-radius: 16px; overflow: visible; box-shadow: 0 10px 30px rgba(0,0,0,0.04); transition: transform 0.4s ease, box-shadow 0.4s ease; border: 1px solid rgba(176, 152, 198, 0.1); }
.product-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(90, 58, 130, 0.1); }
.product-card > img { width: 100%; height: 280px; object-fit: cover; border-top-left-radius: 16px; border-top-right-radius: 16px; }
.card-content { padding: 30px; text-align: center; }
.card-content h3 { font-size: 1.5rem; margin-bottom: 5px; }
.card-content p.desc { color: var(--color-text-light); font-size: 0.95rem; margin-bottom: 15px; min-height: 45px; }

/* Menú Grid Especiales */
.specials-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 80px; }
.special-cake-col { background: linear-gradient(135deg, var(--color-primary) 0%, #3D245A 100%); color: var(--color-white); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 40px rgba(90, 58, 130, 0.2); display: flex; flex-direction: column; }
.special-cake-col > img { width: 100%; height: 250px; object-fit: cover; }
.special-cake-col .special-content { padding: 40px; display: flex; flex-direction: column; flex-grow: 1;}
.special-content h3 { color: var(--color-white); font-size: 2rem; margin-bottom: 10px; }
.badge { background: var(--color-accent); color: var(--color-white); padding: 6px 16px; border-radius: 30px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; display: inline-block; margin-bottom: 20px; align-self: flex-start;}

/* Secciones Informativas */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px; }
.step-card { text-align: center; padding: 40px 20px; background: var(--color-bg-light); border-radius: 16px; }
.step-number { width: 50px; height: 50px; background: var(--color-secondary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-family: var(--font-heading); margin: 0 auto 20px; }
.testimonial-card { background: var(--color-bg-light); padding: 40px 30px; border-radius: 16px; position: relative; border: 1px solid rgba(176, 152, 198, 0.2); }
.testimonial-card::before { content: '"'; font-size: 5rem; color: var(--color-secondary); opacity: 0.2; position: absolute; top: 10px; left: 20px; font-family: var(--font-heading); line-height: 1;}
.testimonial-text { font-style: italic; font-size: 1.1rem; margin-bottom: 20px; position: relative; z-index: 1;}
.testimonial-author { font-weight: 700; color: var(--color-primary); }
.faq-container { max-width: 800px; margin: 50px auto 0; }
.faq-item { background: var(--color-white); margin-bottom: 15px; border-radius: 8px; border: 1px solid rgba(176, 152, 198, 0.2); overflow: hidden; }
.faq-question { padding: 20px; font-weight: 700; font-family: var(--font-heading); font-size: 1.2rem; cursor: pointer; display: flex; justify-content: space-between; color: var(--color-primary); }
.faq-answer { padding: 0 20px 20px; color: var(--color-text-light); display: none; line-height: 1.7; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; margin-top: 50px; }
.profile-img { width: 100%; border-radius: 20px; box-shadow: 0 15px 40px rgba(90, 58, 130, 0.15); }

/* Cesta Lateral y Overlay */
.cart-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(44, 31, 74, 0.4); backdrop-filter: blur(3px); z-index: 1990; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.cart-overlay.show { opacity: 1; visibility: visible; }
.cart-sidebar { position: fixed; top: 0; right: -450px; width: 400px; max-width: 100%; height: 100vh; background: var(--color-white); box-shadow: -10px 0 30px rgba(0,0,0,0.1); transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); z-index: 2010; display: flex; flex-direction: column; }
.cart-sidebar.open { right: 0; }
.cart-header { padding: 25px; border-bottom: 1px solid var(--color-bg-light); display: flex; justify-content: space-between; align-items: center; }
.cart-items { padding: 25px; flex-grow: 1; overflow-y: auto; }
.cart-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--color-bg-light); }
.cart-item-info h4 { font-family: var(--font-body); font-size: 1.1rem; color: var(--color-primary); }
.cart-item-info small { color: var(--color-text-light); }
.cart-footer { padding: 25px; border-top: 1px solid var(--color-bg-light); background: var(--color-bg-light); }
.total-line { display: flex; justify-content: space-between; font-size: 1.4rem; font-family: var(--font-heading); font-weight: 700; color: var(--color-primary); margin-bottom: 20px; }
.close-cart { background: none; border: none; font-size: 2rem; color: var(--color-text-light); cursor: pointer; transition: color 0.3s; }
.close-cart:hover { color: var(--color-primary); }

/* Footer */
footer { background-color: var(--color-primary); color: var(--color-white); padding: 80px 0 30px; text-align: center;}
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 50px; text-align: left; }
.footer-col h4 { color: var(--color-secondary); font-family: var(--font-body); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; font-size: 0.9rem; }
.footer-col p, .footer-col a { color: rgba(255,255,255,0.8); text-decoration: none; margin-bottom: 10px; display: block; }
.footer-divider { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 30px; font-size: 0.85rem; color: rgba(255,255,255,0.5); }

/* =========================================
   MEDIA QUERIES (OPTIMIZACIÓN MÓVIL)
========================================= */
@media (max-width: 768px) {
    .specials-grid { grid-template-columns: 1fr; }
    .profile-grid { grid-template-columns: 1fr; }
    .steps-grid, .footer-grid { grid-template-columns: 1fr; text-align: center; gap: 30px;}
    .ig-grid { grid-template-columns: 1fr 1fr; } 
    
    .hamburger { display: block; }
    .cart-text { display: none; }
    
    /* Menú Móvil en Morado */
    .nav-links { 
        position: fixed; top: 0; left: -100%; width: 280px; height: 100vh; 
        background-color: var(--color-primary); 
        flex-direction: column; 
        align-items: flex-start; padding: 100px 40px; gap: 40px; 
        box-shadow: 2px 0 15px rgba(0,0,0,0.5); transition: left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
        z-index: 2001; 
    }
    .nav-links.open { left: 0; }
    .close-menu { display: block; }
    .nav-links a { display: block; font-size: 1.3rem; }
    
    h1 { font-size: 2.8rem !important; }
    h2 { font-size: 2.2rem !important; }
    .hero-logo { height: 140px; }
    .section { padding: 60px 0; }
}