*{ text-decoration: none;}
:root{
    --terracota: #dd6e34;     
    --beige-arena: #f3ddbc;   
    --verde-olivo: #4a6433;    
    --blanco-hueso: #f3f4ea;   
    --max-width: 1100px;
    --radius: 12px;
    --shadow: 0 6px 8px rgba(0, 0, 0, 0.301);
    --header-height: 100px; /* Definida la altura del header (por defecto) */
    --header-height-scrolled: 65px; /* Altura del header al hacer scroll */
}
/* Base styles */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Arial;background:var(--blanco-hueso);color:#222}

/* Global wrappers */
.wrap{max-width:var(--max-width);margin:0 auto;padding:20px} 

/* Header & Navbar (Sticky Header) */
header{
    background:var(--blanco-hueso);
    border-bottom:1px solid rgba(0,0,0,0.04);
    transition: padding 0.3s ease, background-color 0.3s ease;
    z-index: 1030;
    box-shadow: none;
}
.header-scrolled {
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: rgba(250, 243, 224, 0.95);
    box-shadow: var(--shadow);
}
.nav{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:14px}
.brand img{width:158px;height:auto; transition: width 0.3s ease;}
.header-scrolled .brand img { width: 90px; }
.brand h1{font-family:'Playfair Display',serif;font-size:28px;color:var(--terracota);margin:0; transition: font-size 0.3s ease;}
.header-scrolled .brand h1 { font-size: 20px; }

nav a{font-family:'Playfair Display',serif;text-decoration:none;color:#333;padding:6px 4px;border-radius:6px}
nav a:hover{color:var(--verde-olivo);text-decoration:underline; font-size: 105%; transition: 0.3 ease;}

/* HERO */
.hero{
    background:var(--beige-arena);
    padding-top: var(--header-height) !important; 
    padding-bottom: 0 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.363);
} 
.hero-copy{ color: #0c0c0c;} 
.eyebrow{font-size:14px;color:var(--verde-olivo);font-weight:600}
.hero h2{font-family:'Playfair Display',serif;font-size:40px;color:var(--terracota);margin:8px 0}
.hero p{margin:12px 0 20px;color:#0c0c0c;line-height:1.5}
.cta{background:var(--verde-olivo);color:var(--blanco-hueso);border:none;padding:12px 18px;border-radius:10px;font-weight:600;cursor:pointer; transition: background-color 0.2s}
.cta:hover{background-color: #4a5d2a;}

/* Ajuste de imagen estática */
.hero-media .cover {
    width: 100%;
    height: 400px;
    border-radius: 14px;
    object-fit: cover;
    display: block;
}


/* About */
.about{padding:48px 0;background:var(--blanco-hueso)}
.about img{width:100%;border-radius:12px;box-shadow:var(--shadow)}
.about h3{font-family:'Playfair Display',serif;color:var(--terracota);margin:0 0 10px}

/* Catalog */
.catalog{padding:48px 0;background:var(--beige-arena)}
.catalog-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    max-width: var(--max-width);
    margin: 0 auto;
}
.card{background:var(--blanco-hueso);border-radius:12px;padding:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.card .img{height:200px;border-radius:10px;background:#e6d0b6;display:flex;align-items:center;justify-content:center;color:rgba(0,0,0,0.35); overflow: hidden;}
.card .img img{width:100%; height:100%; object-fit: cover;} 
.prod-title{font-family:'Playfair Display',serif;color:var(--terracota);font-weight:600;margin:0}
.price{color:var(--verde-olivo);font-weight:700}
.card .actions{margin-top:auto;display:flex;gap:8px}
.btn-outline{background:transparent;border:1px solid var(--terracota);color:var(--terracota);padding:8px 12px;border-radius:8px;cursor:pointer; flex-grow: 1; transition: background-color 0.2s}
.btn-primary{background:var(--verde-olivo);color:var(--blanco-hueso);border:none;padding:8px 12px;border-radius:8px;cursor:pointer; flex-grow: 1; transition: background-color 0.2s}
.btn-outline:hover{background-color: var(--terracota); color: var(--blanco-hueso);}
.btn-primary:hover{background-color: #4a5d2a;}


/* Special section */
.special{display:flex;gap:0;border-radius:14px;overflow:hidden; padding: 0 !important; margin: 40px auto;} 
.special .left{background:var(--beige-arena);flex:1;padding:36px}
.special .right{background:var(--terracota);flex:1;padding:36px;color:var(--blanco-hueso)}

/* Footer */
footer{background:var(--terracota);color:var(--blanco-hueso);padding:28px 0}
.footer-inner{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.socials{display:flex;gap:12px}
.socials a{color:var(--blanco-hueso);text-decoration:none}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:none;align-items:center;justify-content:center;padding:20px; z-index: 1040;}
.modal.show{display:flex}
.modal-card{background:var(--blanco-hueso);width:100%;max-width:820px;border-radius:12px;padding:18px;box-shadow:var(--shadow)}

/* Animacion */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease;
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}

/* Carrito Fijo (Whatsapp) */
#fixed-cart-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1020;
    background-color: #25D366; 
    border-color: #25D366;
    display: none; 
    opacity: 0;
    transition: opacity 0.5s ease;
}
#fixed-cart-btn:hover {
    background-color: #128C7E;
    border-color: #128C7E;
}
#fixed-cart-btn .badge {
    position: absolute;
    top: -5px;
    right: -5px;
    padding: 5px 8px;
    font-size: 0.75rem;
}
.fixed-cart-show {
    display: block !important;
    opacity: 1 !important;
}

/* Notificación Burbuja (Toast) */
#toast-notification {
    visibility: hidden;
    min-width: 250px;
    background-color: var(--verde-olivo);
    color: var(--blanco-hueso);
    text-align: center;
    border-radius: 8px;
    padding: 16px;
    position: fixed;
    z-index: 1050;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    bottom: 30px;
    font-size: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.5s, transform 0.5s;
}

#toast-notification i {
    color: var(--beige-arena);
    font-size: 1.2em;
}

#toast-notification.show-toast {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


/* Media Queries para Responsive */
@media(max-width:992px){
    /* Secciones 'about' y 'special' se apilan automáticamente con Bootstrap col-12 */
    .special{flex-direction: column;}
    .modal-card #modal-content{grid-template-columns: 1fr;}
    
    /* En pantallas md y sm, el padding del hero puede ser más pequeño */
    .hero .container {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}

@media(max-width:600px){
    /* Ocultar nombre del logo en móvil */
    .brand h1{display: none;}
    .hero h2{font-size:28px}
    .wrap{padding: 15px;}
}

/* Ajuste adicional para el logo en el Offcanvas */
.offcanvas-header .brand img {
    width: 60px; /* Tamaño del logo en el offcanvas */
}