/*
=====================================================
Estilos Globales y de Tipografía
=====================================================
*/
body {
    /* Opcional: Fuente más moderna si la predeterminada no te gusta */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* Ajuste para evitar que el contenido inicial se oculte bajo el menú fijo */
    
    /*padding-top: 56px; *//* Ajusta este valor al alto de tu navbar. Bootstrap por defecto tiene unos 56px */
    background-color: #f8f9fa; /* Un fondo suave para el cuerpo */
}

/*
=====================================================
Estilos de la Barra de Navegación (Header)
=====================================================
*/
.navbar {
    /* Convierte la barra de navegación en fija */
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030; /* Asegura que el navbar esté por encima de otros elementos */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil para destacarla */
    transition: background-color 0.3s ease; /* Transición suave para el color de fondo */
}

/* Estilo para los enlaces de navegación */
.navbar .nav-link {
    color: rgba(255, 255, 255, 1) !important; /* Color de texto más claro */
    font-weight: 500;
    transition: color 0.3s ease;
    margin-right: 15px; /* Espacio entre los elementos del menú */
    font-weight: bold;
}

.navbar .nav-link:hover,
.navbar .nav-item .active {
    color: #ffffff !important; /* Texto blanco puro al pasar el ratón o si está activo */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* Sombra para resaltar */
    background: #000000bd;
    border-radius: 30px
}

/* Estilo para el botón del "toggler" (menú hamburguesa) */
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.navbar-toggler-icon {
    /* Cambia el color del icono del toggler a blanco para que se vea mejor en fondo verde */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

/*
=====================================================
Estilos del Contenedor Principal
=====================================================
*/
.container.mt-4 {
    /* Asegura que haya suficiente espacio entre el menú fijo y el contenido */
    margin-top: 2rem !important; /* Ajuste si es necesario, pero el padding-top del body debería ser suficiente */
    min-height: calc(100vh - 150px); /* Asegura que el contenido ocupe al menos la altura de la ventana */
}

/*
=====================================================
Estilos del Footer
=====================================================
*/
footer {
    /* Mejora la estética del footer */
    border-top: 3px solid #198754; /* Borde sutil del color de tu navbar (verde éxito) */
    background-color: #198754 !important; /* Color de fondo verde oscuro */
    padding: 1.5rem 0; /* Más espacio vertical */
    font-size: 0.95rem;
}

footer p {
    font-weight: 400;
}

/* Media Query: Para pantallas más grandes (Desktop) */
@media (min-width: 992px) {
    /* Centra los enlaces del menú en pantallas grandes */
    .navbar-nav {
        display: flex;
        align-items: center;
        /* Puedes cambiar 'ms-auto' por 'mx-auto' en el HTML si quieres centrar todo */
    }
}





/* ===================================== */
/* 1. Carrusel Principal (Ajustes) */
/* ===================================== */

/* Altura y ajuste de imagen (Mantenido del paso anterior) */
#promoCarousel .carousel-inner {
    height: 350px; 
}
#promoCarousel .carousel-item {
    height: 100%;
}
.main-carousel-img {
    height: 100%;
    width: 100%; 
    object-fit: contain; 
    background-color: #ffffff;
}

/* Flechas Negras */
.carousel-control-black {
    /* Base del ícono de flecha - SVG codificado en base64 para el color negro */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
    /* Para el ícono "next" (derecha), se usa una imagen similar con la flecha apuntando a la derecha */
    background-color: rgba(255, 255, 255, 0.7); /* Fondo semi-transparente blanco para que resalte */
    border-radius: 50%; /* Opcional: para que el fondo sea redondo */
    width: 3rem; /* Tamaño más visible */
    height: 3rem; /* Tamaño más visible */
}

/* Flecha de Siguiente (Next) */
.carousel-control-next-icon.carousel-control-black {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Indicadores (puntos/líneas) */
#promoCarousel .carousel-indicators button {
    background-color: #198754; /* Color de tu clase 'text-success' */
    opacity: 0.5;
    width: 25px; /* Hacemos los indicadores más anchos (como líneas cortas) */
    height: 3px;
    margin: 0 5px;
}
#promoCarousel .carousel-indicators .active {
    opacity: 1;
}


/* ===================================== */
/* 2. Categorías Circulares */
/* ===================================== */

.category-circle-link {
    text-decoration: none; /* Quita el subrayado del enlace */
    color: inherit;
    display: block;
}

.category-circle {
    width: 150px; /* Tamaño del círculo */
    height: 150px;
    border-radius: 50%; /* CLAVE: Convierte el contenedor en círculo */
    overflow: hidden; /* Oculta partes de la imagen fuera del círculo */
    border: 3px solid #198754; /* Borde verde para destacar */
    display: flex; /* Para centrar la imagen */
    align-items: center;
    justify-content: center;
}

.category-img-circle {
    width: 100%;
    height: 100%;
    /* CLAVE: Ajusta la imagen dentro del círculo sin dejar espacios blancos. 
       Podría recortar partes de la imagen si no es cuadrada. */
    object-fit: cover; 
}

/* ===================================== */
/* 3. Botón "Ver todos los productos" */
/* ===================================== */

/* El botón ya tiene la clase 'invisible' de Bootstrap para ocultarse inicialmente */

.invisible {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.3s, opacity 0.3s ease; /* Transición para ocultar/mostrar */
}

.visible {
    visibility: visible !important;
    opacity: 1 !important;
    transition-delay: 0s !important; /* Muestra inmediatamente */
}







/* ------------------------------------------------------- */



/* Estilo específico para la sección Conócenos */

#banner-conocenos {
    background-image: url('../img/fondo_conocenos.jpg'); /* Reemplaza con una imagen de fondo de Milpa Alta */
    background-size: cover;
    background-position: center;
    color: #343a40; /* Texto oscuro sobre el fondo */
    min-height: 300px; /* Altura mínima para que se vea el fondo */
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.7); /* Sombra para que el texto resalte */
}

/* Opcional: Estilo para el hover en las tarjetas de valores */
.p-4.border.rounded-3:hover {
    border-color: #198754 !important; /* Resalta el borde al pasar el ratón */
    transform: translateY(-5px); /* Pequeño efecto 3D */
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


/*
=====================================================
Estilo para el Banner Parallax de "Conócenos"
=====================================================
*/

.parallax-banner {
    /* Establece el contenedor para el efecto */
    position: relative;
    width: 100%;
    min-height: 400px; /* Altura del banner */
    overflow: hidden; /* Oculta cualquier parte de la imagen que se desborde al moverse */
    
    /* Configuración de la imagen de fondo inicial (¡usa una imagen grande!) */
    /*background-image: url('../img/fondo_milpa_alta.jpg');  REEMPLAZA ESTO con la ruta de tu imagen */
    background-image: url('https://mexicocity.cdmx.gob.mx/wp-content/uploads/2022/04/descubre-villa-milpa-alta-1.png'); 
    background-size: 110% 110%; /* Lo hacemos un poco más grande para que haya espacio para el movimiento */
    background-position: center;
    background-repeat: no-repeat;
    display: flex; /* Para centrar el texto verticalmente */
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: background-position 0.1s linear; /* Transición suave para el movimiento */
}

.banner-content {
    /* Contenedor del texto: se queda fijo */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2; /* Asegura que el texto esté por encima de la imagen */
    
    /* Sombra de texto para mejorar la legibilidad sobre la imagen */
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.6), 0 0 10px rgba(0, 0, 0, 0.4);
}

/* En dispositivos móviles, deshabilita el efecto de movimiento del ratón para ahorrar recursos */
@media (max-width: 768px) {
    .parallax-banner {
        background-size: cover; /* Vuelve al tamaño normal */
        background-position: center center !important; /* Desactiva la posición por JS */
        min-height: 300px; /* Altura menor en móviles */
    }
}



/* --------------------------------------------------- */
/* Contenedor de la imagen del producto */
.product-image-container {
    position: relative;
    overflow: hidden;
}

/* Botón de "Agregar al carrito" centrado como overlay */
.add-to-cart-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    background-color: rgba(0, 128, 0, 0.8); /* verde semitransparente */
    color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

/* Mostrar el botón solo al hacer hover sobre la imagen o tarjeta */
.card:hover .add-to-cart-overlay {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1.05); /* leve zoom al mostrar */
}

/* Efecto en la tarjeta al hacer hover (opcional) */
.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}
/* ------------------------------------------------------------------------- */

/* 1. Contenedor principal de la imagen: DEBE ser relativo */
.product-image-container {
    position: relative;
    overflow: hidden; /* Asegura que el contenido extra no se desborde */
    height: 200px; /* La altura que ya definiste en el HTML */
    display: flex; /* Para centrar la imagen dentro */
    justify-content: center;
    align-items: center;
}

/* 2. La capa de superposición: Oculta por defecto */
.overlay-detalle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Fondo semi-transparente */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Oculto por defecto */
    transition: opacity 0.3s ease; /* Transición suave */
     
}

/* 3. Mostrar la capa al pasar el mouse sobre el contenedor */
.product-image-container:hover .overlay-detalle {
    opacity: 1; /* Se hace visible */
}

/* 4. Estilo del botón (opcional, pero mejora la apariencia) */
.overlay-btn {
    border-width: 2px !important; /* Borde más grueso */
    font-size: 1.5rem; /* Icono más grande */
}


/* ----------------------------------------------- */

/* 🎨 Estilos Adicionales para Temática de Dulces 🍬 */
:root {
    --color-success-dark: #198754; /* Tu verde actual */
    --color-candy-pink: #ff69b4;
    --color-chocolate-brown: #795548;
    --color-caramel-orange: #ff9800;
}

body {
    background-color: #f8f9fa; /* Fondo gris muy claro para resaltar el contenido */
}
/* Preloader */
#preloader-overlay {
    background: rgba(0, 0, 0, 0.7);
    z-index: 1050; /* Sobreponer a casi todo */
}

.spinner-border {
    border-width: .3em;
}

#preloader-overlay p {
    color: #fff !important;
    text-shadow: 1px 1px 2px var(--color-chocolate-brown);
}
  

/* Carrusel Principal (Promociones) */
.main-carousel-img {
    height: 350px; /* Altura fija para el carrusel principal */
    
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.carousel-control-black {
    filter: invert(100%); /* Hace que los iconos sean blancos o muy claros */
}

/* Títulos de Sección */
.fw-bold {
    font-weight: 700 !important;
}

h3.text-success {
    color: var(--color-chocolate-brown) !important; /* Cambiamos el verde por un marrón más temático */
    border-bottom: 3px solid var(--color-caramel-orange);
    padding-bottom: 5px;
}

/* --- Sección de Categorías --- */
.category-circle-link {
    text-decoration: none;
    display: block;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.category-circle-link:hover {
    transform: translateY(-5px);
    opacity: 0.9;
}

.category-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid var(--color-caramel-orange); /* Borde llamativo */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}

.category-img-circle {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-title.text-success {
    color: var(--color-chocolate-brown) !important;
}

/* Badge para Novedades */
.badge-nuevo {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: var(--color-candy-pink);
    color: white;
    padding: 5px 10px;
    border-radius: 50rem;
    font-size: 0.8rem;
    font-weight: bold;
    z-index: 10;
}



/* ESTILOS PARA EL PRELOADER */
#preloader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Fondo oscuro semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 9999; /* Asegura que esté por encima de todo */
    transition: opacity 0.5s ease; /* Para un desvanecimiento suave */
}

/* Oculta el preloader y lo hace invisible */
.hidden-preloader {
    opacity: 0;
    visibility: hidden;
}