/* 🎨 Fuente general para toda la página */
body {
    font-family: 'Open Sans', sans-serif;
    background: linear-gradient(135deg, white, white); /* Fondo degradado */
    color: #222; /* Color oscuro para mejor contraste */
}

/* 🏷️ Estilo para los títulos */
h1, h2, h3, h4, h5 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700; /* Hace los títulos más gruesos */
    color: #222; /* Color oscuro */
    text-shadow: none; /* Elimina sombras innecesarias */
}

/* 🔹 Estilo para el título "¿Qué es Feria Emprender?" */
.titulo-feria {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    letter-spacing: -0.3px; /* Reduce el espacio entre letras */
    word-spacing: -1px; /* Reduce el espacio entre palabras */
    color: #222; /* Oscuro */
    margin-bottom: 10px;
}

/* 🔹 Estilo para el texto descriptivo */
.texto-feria {
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    letter-spacing: -0.2px;
    color: #333; /* Un poco más suave */
    line-height: 1.5;
    max-width: 800px;
    margin: 0 auto;
}

/* Contenedor del video o imagen */
.video-container, .feria-imagen {
    position: relative;
    width: 100%;
    max-width: 600px; /* Tamaño máximo en pantallas grandes */
    margin: 40px auto 0; /* Aumenta el espacio arriba del video */
}

/* Ajustar el video para que sea responsivo */
.feria-video {
    width: 100%;
    height: auto;
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Ajuste del texto para que no esté pegado */
.texto-feria {
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    color: #333;
    line-height: 1.5;
    max-width: 800px;
    margin: 0 auto 30px; /* Espacio debajo del texto */
}

/* Ajuste en móviles */
@media (max-width: 768px) {
    .video-container, .feria-imagen {
        max-width: 90%;
        margin: 30px auto 0; /* Reduce un poco el espacio en pantallas pequeñas */
    }
}

/* 🎭 Estilo para botones */
.btn-primary {
    background: linear-gradient(135deg, #0072bb, #4da0dd);
    border: none;
    color: #ffffff;
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 4px 10px rgba(0, 123, 255, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #0072bb, #4da0dd);
    transform: translateY(-2px);
    box-shadow: 0px 6px 14px rgba(0, 123, 255, 0.5);
}

/* 🔍 Barra de búsqueda */
.form-control {
    background-color: #ffffff;
    border: 1px solid #007bff;
    color: #000;
}

/* 🖼️ Carrusel: Ajuste de imágenes */
.carousel-inner img {
    height: 400px;
    object-fit: cover;
    border-radius: 15px;
}

/* Ajuste de la tarjeta */
.card {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between; /* Asegura que los elementos se distribuyan uniformemente */
}

/* Ajuste de la imagen dentro de la tarjeta */
.product-image {
    background-color: #ffffff !important; /* Fuerza fondo blanco */
    object-fit: contain !important;        /* Escala sin recortar */
    width: 100% !important;
    height: 250px !important;
    padding: 5px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: block;
}


/* Contenedor del cuerpo de la tarjeta */
.card-body {
    flex-grow: 1; /* Permite que el contenido crezca y distribuya el espacio */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Botón de 'Ver Producto' alineado al fondo */
.card-body .btn {
    margin-top: auto;
}


/* ℹ️ Paginación */
.pagination .page-item.active .page-link {
    background-color: #0072bb;
    border-color: #0072bb;
}

.pagination .page-link {
    color: #0072bb;
}

.pagination .page-item .page-link:hover {
    background-color: #0072bb;
    color: #ffffff;
}

/* 🏁 Footer */
footer {
    background: rgba(10, 15, 44, 0.95);
    padding: 25px;
    text-align: center;
    font-size: 14px;
    box-shadow: 0px -2px 8px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
}

footer a {
    color: #0072bb;
    transition: color 0.3s ease-in-out;
}

footer a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* 🔧 Fuerza color blanco en todo el contenido del footer */
footer, footer * {
    color: #ffffff !important;
}


/* 🏷️ Pequeño texto */
.small-text {
    font-size: 12px;
    margin-top: 8px;
}

/* 🌟 Iconos redondos */
.icon-round {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 2px solid #ddd;
}

/* Contenedor de los iconos - Reduce la distancia debajo */
.icon-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px; /* Espaciado entre iconos */
    padding: 10px;
    margin-bottom: 40px !important; /* Reduce la distancia debajo de los iconos */
}

/* Si los iconos están dentro de una sección específica */
.section-icons {
    margin-bottom: 50px !important; /* Reduce aún más la separación */
}

/* Ajuste del espacio para la siguiente sección */
.siguiente-seccion {
    margin-top: 40px !important; /* Reduce la distancia con los iconos */
}

/* Ajuste en móviles */
@media (max-width: 768px) {
    .icon-container {
        margin-bottom: 30px !important; /* Menos espacio en pantallas pequeñas */
    }

    .section-icons {
        margin-bottom: 40px !important;
    }

    .siguiente-seccion {
        margin-top: 30px !important;
    }
}



/* En pantallas grandes (escritorio), los íconos estarán en una sola fila */
@media (min-width: 992px) {
    .icon-container {
        flex-wrap: nowrap; /* Asegura que estén en una sola línea */
        overflow-x: auto; /* Permite desplazamiento horizontal si es necesario */
    }
}


.icon-round {
    width: 80px; /* Reduce el tamaño si es necesario */
    height: 80px;
    object-fit: cover;
    border: 2px solid #ddd;
    margin: 0px 5px; /* Reduce márgenes laterales */
}


@media (min-width: 992px) {
    .icon-round {
        width: 150px;
        height: 150px;
    }
}

/* 🏷️ Estilo para nombres de rubros */
.rubro-name {
    display: inline-block;
    font-size: 0.8rem; /* Reduce el tamaño del texto */
    font-weight: 600; /* Mantiene buena legibilidad */
    color: #ffffff;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
    background: #0072bb;
    padding: 6px 10px; /* Ajusta el espaciado para evitar que se vea grande */
    border-radius: 6px; /* Reduce los bordes redondeados para que se vea más compacto */
    margin-top: 8px; /* Reduce el margen superior */
    transition: background 0.3s ease, transform 0.3s ease;
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
    overflow: hidden;
    text-overflow: ellipsis; /* Si el texto es muy largo, agrega "..." */
}


.rubro-name:hover {
    background: rgba(0, 0, 0, 0.5);
    transform: scale(1.05);
}

/* 🛒 Links de vendedores */
.vendedor-link {
    color: inherit;
    font-weight: bold;
    text-decoration: none;
}

.vendedor-link:hover {
    text-decoration: underline;
}

/* 🌑 Downbar mejorado */
#downbar {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: rgba(10, 15, 44, 0.95);
    color: #fff;
    padding: 14px 0;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    box-shadow: 0px -4px 10px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    z-index: 99999;
}

@media screen and (max-width: 768px) {
    #downbar {
        font-size: 15px;
        padding: 10px 5px;
    }

    .news-content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        text-align: center;
    }

    .animated-icon {
        font-size: 20px;
    }
}

/* 📰 Contenedor de noticias */
.news-container {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* ✨ Iconos animados */
.animated-icon {
    transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
    text-shadow: 2px 2px 8px rgba(255, 255, 255, 0.2);
    animation: pulse 2s infinite alternate;
}

@keyframes pulse {
    0% { transform: scale(1); text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.2); }
    100% { transform: scale(1.1); text-shadow: 3px 3px 10px rgba(255, 255, 255, 0.3); }
}

.animated-icon:hover {
    transform: scale(1.3);
    color: #f39c12;
}

/* 📜 Animación de entrada y salida */
.fade-in {
    animation: fadeIn 0.7s ease-in-out;
}
.fade-out {
    animation: fadeOut 0.7s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-5px); }
}

/* 🏁 Footer no cubierto por el downbar */
footer {
    margin-bottom: 50px;
}

/* Contenedor de producto */
.product-container {
    width: 100%;
    max-width: 250px; /* Ajusta el tamaño deseado */
    height: 450px; /* Ajusta la altura según lo necesario */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: #fff; /* Fondo uniforme */
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para mejor estética */
    text-align: center;
}

/* 🔹 Asegurar que todas las tarjetas tengan el mismo tamaño */
.card {
    width: 100%; /* Para que tome el ancho máximo permitido por la columna */
    max-width: 280px; /* Ajusta según lo que necesites */
    height: 100%; /* Asegura que todas tengan la misma altura */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 🔹 Imagen del producto */
.product-image {
    width: 100%; /* Asegura que la imagen ocupe todo el ancho */
    height: 250px; /* Mantiene una altura fija */
    object-fit: cover; /* Recorta la imagen sin deformarla */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* 🔹 Contenedor de productos */
.products-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* Espaciado uniforme */
}

/* Ajuste del cuerpo de la tarjeta */
.card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Botón en la parte inferior */
.card-body a.btn {
    margin-top: auto; /* Empuja el botón al fondo de la tarjeta */
}

/* 🔹 Fondo oscuro de la ventana emergente */
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* 🔹 Contenedor de la ventana emergente */
.popup-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    position: relative;
    max-width: 90%;
    width: 500px; /* Ajuste en escritorio */
    max-height: 90%;
    overflow: auto;
}

/* 🔹 Imagen dentro del modal */
.popup-img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

/* 🔹 Botón de cerrar */
.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: black;
}

/* 🔹 Responsividad para móviles */
@media (max-width: 768px) {
    .popup-content {
        width: 90%;
        max-width: 350px;
    }
}

@media (max-width: 768px) {
    .products-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center; /* Centrar productos verticalmente si es necesario */
        gap: 15px;
    }

    .products-grid .col-md-3 {
        display: flex;
        justify-content: center; /* Centra cada producto horizontalmente */
        width: 100%;
    }

    .card {
        width: 90%; /* Ajusta el tamaño de la tarjeta en pantallas pequeñas */
        max-width: 320px; /* Evita que sea demasiado grande */
    }
}

@media (max-width: 768px) {
    .row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 15px;
    }

    .col-md-4 {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .card {
        width: 90%;
        max-width: 320px;
    }
}

.emprendedor-link {
    font-size: 1.2rem; /* Aumenta el tamaño */
    font-weight: bold; /* Resalta el texto */
    color: #0072bb; /* Color azul profesional */
    text-decoration: none; /* Elimina el subrayado */
    transition: color 0.3s ease-in-out, transform 0.2s ease-in-out;
}

.emprendedor-link:hover {
    color: #004a80; /* Azul más oscuro al pasar el mouse */
    text-decoration: underline; /* Añade subrayado en hover */
    transform: scale(1.05); /* Efecto de crecimiento leve */
}

.product-image {
    display: block;
    margin: 0 auto; /* Centrar la imagen */
    width: 100%; /* Se adapta al ancho disponible */
    max-width: 100%; /* En móviles ocupa el ancho completo */
    height: auto;
    object-fit: contain; /* Evita que la imagen se recorte */
}

/* En computadoras (pantallas grandes) */
@media (min-width: 992px) {
    .product-image {
        max-width: 600px; /* Agranda la imagen en PC */
        max-height: 500px;
    }
}

.profile-image {
    display: block;
    margin: 0 auto; /* Centrar la imagen */
    width: 100px; /* Tamaño por defecto */
    height: 100px;
    border-radius: 50%; /* Mantiene la forma circular */
    object-fit: cover;
}

/* Reducir más la imagen en computadoras */
@media (min-width: 992px) {
    .profile-image {
        width: 150px; /* Más pequeña en PC */
        height: 150px;
    }
}

.pagination .page-item .page-link {
    color: #0072bb;
    border-radius: 6px;
    padding: 8px 12px;
    transition: all 0.3s ease-in-out;
}

.pagination .page-item.active .page-link {
    background-color: #0072bb;
    border-color: #0072bb;
    color: #ffffff;
    font-weight: bold;
}

.pagination .page-item.disabled .page-link {
    color: #bbb;
    pointer-events: none;
    cursor: not-allowed;
}

.pagination .page-item .page-link:hover {
    background-color: #004a80;
    color: #ffffff;
    transform: scale(1.05);
}

.card .card-body {
    background-color: #ffffff;
}