/* ==========================================================================
   ESTILO E-COMMERCE PREMIUM - LIMPIO Y MINIMALISTA
   ========================================================================== */

:root {
    --color-principal: #2B2B2B;     /* Textos destacados, títulos y botones oscuros */
    --color-acento: #C4484E;        /* Destacados secundarios, alertas o estados activos */
    --color-fondo-bloques: #FFFFFF; /* Fondo de tarjetas, filtros y cajas contenedoras */
    --color-borde: #EAEAEA;         /* Líneas divisorias sutiles y bordes limpios */
    --color-texto-mutado: #707070;  /* Subtítulos y textos secundarios con menor contraste */
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: #FAF3EC;      /* Tono crema suave y cálido de fondo general */
    color: var(--color-principal);
    overflow-x: hidden;             /* Evita desplazamientos horizontales no deseados */
    font-size: 14px;
}

/* --- MENÚ SUPERIOR PERMANENTE (NAVBAR) --- */
.navbar {
    background-color: #f2d9de;      /* Tono rosa viejo/pastel de la marca */
    border-bottom: 1px solid var(--color-borde);
    padding: 0.75rem 1rem;
    position: sticky;
    top: 0;
    z-index: 1060;                  /* Se asegura de flotar sobre cualquier otro elemento */
}

.contenedor-logo-navbar {
    width: 50px;
    height: 50px;
    border-radius: 50%;             /* Recorte perfectamente circular */
    overflow: hidden;
    border: 1px solid var(--color-borde);
    display: inline-block;
}

.img-logo-nav {
    width: 100%;
    height: 100%;
    object-fit: cover;              /* Ajusta la imagen al círculo sin deformarla */
}

.brand-title {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
    color: var(--color-principal);
}

/* --- HERO BANNER ROTATIVO (CAROUSEL) --- */
.carousel-tienda {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-borde);
}

.carousel-inner img {
    width: 100%;
    height: 220px;
    object-fit: cover;              /* Mantiene la composición de la foto en móviles */
}

.carousel-caption-custom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* Degradado oscuro inferior para que el texto blanco siempre sea legible */
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    padding: 2.5rem 1rem 1rem 1rem;
    color: #ffffff;
    text-align: left;
}

.carousel-caption-custom h3 {
    font-family: 'Playfair Display', serif; /* Serif elegante para títulos destacados */
    font-size: 1.5rem;
    margin: 0;
}

/* --- FILTROS SUPERIORES DE CATEGORÍAS (SCROLL HORIZONTAL) --- */
.contenedor-filtros {
    background-color: var(--color-fondo-bloques);
    border-bottom: 1px solid var(--color-borde);
    padding: 0.5rem 0;
    position: sticky;
    top: 67px;                      /* Se fija exactamente debajo del Navbar */
    z-index: 1040;
    overflow-x: auto;               /* Permite arrastrar de izquierda a derecha en celulares */
    white-space: nowrap;            /* Evita que los botones se salten de línea */
    -webkit-overflow-scrolling: touch;
}

.contenedor-filtros::-webkit-scrollbar {
    display: none;                  /* Oculta la barra de scroll para mantener la limpieza visual */
}

.btn-filtro-cat {
    background: none;
    border: none;
    color: var(--color-texto-mutado);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.5rem 1.2rem;
    display: inline-block;
    text-decoration: none;
    transition: color 0.2s ease;
}

.btn-filtro-cat.activo {
    color: var(--color-acento);
    border-bottom: 2px solid var(--color-acento); /* Línea inferior indicadora */
}

/* --- GRILLA Y TARJETAS DE PRODUCTOS --- */
.seccion-productos {
    display: none;
    animation: fadeIn 0.3s ease-in-out forwards;
}

.seccion-productos.activa {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.card-producto-premium {
    background-color: var(--color-fondo-bloques);
    border: 1px solid var(--color-borde);
    border-radius: 0px;             /* Diseño cuadrado minimalista de alta gama */
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribuye el contenido de forma equitativa */
    transition: transform 0.2s ease;
}

.contenedor-img-card {
    width: 100%;
    height: 170px;
    background-color: var(--color-fondo-bloques);
    position: relative;
    overflow: hidden;
}

.img-card-real {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.badge-promocion {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: var(--color-principal);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 3px 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-card-contenido {
    padding: 0.85rem;
    text-align: left;
}

.categoria-tag {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--color-texto-mutado);
    letter-spacing: 0.5px;
    margin-bottom: 0.2rem;
    display: block;
}

.titulo-card-producto {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-principal);
    margin-bottom: 0.4rem;
    line-height: 1.3;
    height: 38px;                   /* Altura fija para que todas las tarjetas se alineen perfectamente */
    overflow: hidden;
}

.precio-card-producto {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-principal);
    margin-bottom: 0.7rem;
}

.btn-comprar-premium {
    background-color: var(--color-principal);
    color: #ffffff !important;
    border: none;
    border-radius: 0px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 0.55rem 1rem;
    text-transform: uppercase;
    width: 100%;
    display: block;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.btn-comprar-premium:active {
    background-color: var(--color-acento);
}

/* --- SECCIÓN CONTACTO / INFORMACIÓN --- */
.info-desplegable-box {
    background-color: var(--color-fondo-bloques);
    border: 1px solid var(--color-borde);
    padding: 1.5rem;
    margin-top: 1rem;
}

.info-row {
    border-bottom: 1px solid var(--color-borde);
    padding: 0.85rem 0;
}

.info-row:last-child {
    border-bottom: none;            /* Quita la línea final para no sobrecargar el diseño */
}

.info-label {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    color: var(--color-texto-mutado);
    display: block;
}

.info-value {
    font-size: 0.95rem;
    color: var(--color-principal);
}

/* PIE DE PÁGINA / CRÉDITOS */
.footer-branding {
    text-align: center;
    padding: 2.5rem 1rem;
    font-size: 0.75rem;
    color: var(--color-texto-mutado);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}