/*
Theme Name: Mercantile Child
Theme URI: https://ejemplo.com/
Description: Tema hijo personalizado para Mercantile
Author: Tu Nombre
Template: mercantile
Version: 1.0
Text Domain: mercantile-child
*/

/* A partir de aquí puedes añadir tu CSS personalizado */

.custom-center-class {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center; /* Centra el texto si es necesario */
  margin: 0 auto; /* Asegura que el contenedor esté centrado */
	width: 365px;
}

.custom-center-class .tlp-team {
  max-width: 600px; /* Ajusta el ancho máximo según sea necesario */
}

.custom-center-class-text {
  text-align: center; /* Centra el texto si es necesario */
}

/*menu qween*/

/* Ocultar botón hamburguesa en escritorio */
@media (min-width: 992px) {
    .navbar-toggler {
        display: none;
    }
    
    /* Forzar el menú a mostrarse siempre en escritorio */
    .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
    
    /* Alinear el buscador al final */
    .navbar-right-items {
        margin-left: auto;
    }
}

/* El buscador y carrito se ven como flex horizontal */
.search-woo.navbar-right-items {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Ajuste para que el logo no se aplaste */
.navbar-brand-wrap {
    flex-shrink: 0;
}

/*menu qween*/
/* Asegurar que los dropdowns se vean bien */
.navbar .dropdown-menu {
    border: 1px solid rgba(0,0,0,.1);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
}

/* Estilo para items activos */
.navbar .nav-link.active,
.navbar .nav-link:hover {
    color: #2196F3;
}

/* Dropdown items */
.navbar .dropdown-item:hover {
    background-color: #f8f9fa;
}

/*descripcion debajo del titulo*/
/* Apilar título y descripción verticalmente */
.navbar-brand-wrap {
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* Espacio entre título y descripción */
.site-title {
    margin-bottom: 5px !important;
}

/* Asegurar que la descripción no tenga margen superior */
.site-description {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Ajustar tamaño de la descripción para que se vea bien */
.site-description {
    font-size: 0.85em;
    opacity: 0.8;
}
/*menu desplegable qween*/

/* ========================================
   MENÚ DESPLEGABLE CON HOVER (Bootstrap 5)
   ======================================== */

/* En escritorio: mostrar dropdown al pasar el mouse */
@media (min-width: 992px) {
    /* Mostrar el dropdown cuando se hace hover sobre el item padre */
    .navbar .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0; /* Elimina el espacio entre el item y el menú */
    }
    
    /* Mantener el dropdown visible cuando se hace hover sobre el menú mismo */
    .navbar .dropdown-menu:hover {
        display: block;
    }
    
    /* Quitar el foco del toggle cuando se hace hover (para que no quede marcado) */
    .navbar .nav-item.dropdown:hover > .nav-link.dropdown-toggle {
        background-color: rgba(0,0,0,.05);
    }
    
    /* Animación suave de aparición */
    .navbar .dropdown-menu {
        display: none;
        animation: fadeIn 0.3s ease-in-out;
    }
    
    .navbar .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
    }
}

/* Animación de fade-in para el dropdown */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   SUBMENÚS ANIDADOS (Nivel 2, 3, etc.)
   ======================================== */

/* En escritorio: submenús aparecen al hacer hover */
@media (min-width: 992px) {
    .navbar .dropdown-menu .dropdown:hover > .dropdown-menu {
        display: block;
        top: 0;
        left: 100%;
        margin-top: 0;
    }
    
    /* Posicionar submenús a la derecha del padre */
    .navbar .dropdown-menu .dropdown-menu {
        left: 100%;
        top: 0;
    }
}

/* ========================================
   COMPATIBILIDAD CON MÓVILES
   ======================================== */

/* En móviles: mantener el comportamiento de clic (no hover) */
@media (max-width: 991px) {
    /* Asegurar que en móviles funcione con clic */
    .navbar .dropdown-menu {
        display: none;
    }
    
    .navbar .dropdown-menu.show {
        display: block;
    }
    
    /* El toggle de Bootstrap 5 maneja esto automáticamente en móviles */
}

/* ========================================
   ESTILOS ADICIONALES PARA MEJOR APARIENCIA
   ======================================== */

/* Sombra y borde del dropdown */
.navbar .dropdown-menu {
    border: 1px solid rgba(0,0,0,.1);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
    border-radius: 0.375rem;
    padding: 0.5rem 0;
}

/* Estilo de los items del dropdown */
.navbar .dropdown-item {
    padding: 0.5rem 1.5rem;
    transition: all 0.2s ease;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background-color: #f8f9fa;
    color: #2196F3;
    padding-left: 1.75rem; /* Efecto de desplazamiento al hacer hover */
}

/* Item activo en el dropdown */
.navbar .dropdown-item.active {
    background-color: #2196F3;
    color: white;
}

/* Separador en el dropdown (si lo usas) */
.navbar .dropdown-divider {
    margin: 0.5rem 0;
    border-color: rgba(0,0,0,.1);
}

/* Indicador visual de que hay submenú (flecha) */
.navbar .dropdown-toggle::after {
    transition: transform 0.3s ease;
}

.navbar .nav-item.dropdown:hover > .nav-link.dropdown-toggle::after {
    transform: rotate(180deg);
}

/*descripcion debajo del titulo en negrita qween*/

/* Hacer la descripción del sitio más grande y en negrita */
/*.navbar-brand-wrap .site-description {
    font-weight: 600 !important; /* 700 es negrita, puedes usar 600 para semi-negrita */
   /* font-size: 1.15em !important; /* Un poco más grande (ajusta este número si lo quieres más o menos grande) */
  /*  line-height: 1.3 !important; /* Mejora la lectura */
   /* margin-top: 6px !important; /* Un pequeño espacio para separarla del título */
   /* color: #222222 !important; /* Un gris oscuro para que se lea bien (opcional) */
   /* font-style: normal !important; /* Quita la cursiva si la tenía */
/*}*/

/*menu fijo al hacer sroll*/
/* ========================================
   MENÚ FIJO AL HACER SCROLL (STICKY)
   ======================================== */

.at-navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1030 !important; /* Se mantiene por encima de todo el contenido */
    background-color: #ffffff !important; /* Fondo blanco para que no se transparente */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Sombra elegante al bajar */
    transition: all 0.3s ease;
}

/* Efecto visual extra: reducir un poco el padding al hacer scroll (opcional pero se ve muy profesional) */
.at-navbar.scrolled {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* ========================================
   AJUSTE PARA LA BARRA DE ADMINISTRACIÓN DE WORDPRESS
   (Para que no se oculte cuando estás logueado)
   ======================================== */
.admin-bar .at-navbar {
    top: 32px !important;
}

/* Ajuste para móviles cuando la barra de admin de WP se compacta */
@media (max-width: 782px) {
    .admin-bar .at-navbar {
        top: 46px !important;
    }
}

/*menu de navegacion con las letras mas grandes qween*/
.at-navbar .navbar-nav .nav-link {
    line-height: 65px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /* Si necesitas un poco de espacio a los lados, puedes dejar o ajustar esto: */
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/*descripcion debajo del titulo qween*/
/* Estilos exactos para la descripción del sitio */
.navbar-brand-wrap .site-description {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}
/*letras del menu navegacion qween*/

/* Aumentar el tamaño de la letra del menú de navegación en Bootstrap 5 */
.navbar-nav .nav-link {
    font-size: 1.25rem !important; /* Equivale a 20px. Puedes cambiarlo a 1.125rem (18px) o 1.5rem (24px) */
    font-weight: 300; /* Opcional: hace la letra un poco más gruesa para mejor legibilidad */
    line-height: 1.5; /* Mejora el espaciado vertical */
}

/* Si el menú desplegable (dropdown) también se ve pequeño, usa esto: */
.dropdown-menu .dropdown-item {
    font-size: 1.1rem !important;
}

/* Asegurar que el menú móvil (hamburguesa) también tenga buen tamaño */
.navbar-toggler {
    font-size: 1.2rem !important;
}
/*boton buscar qween*/
/* 1. Contenedor principal como referencia */
.search-wrap {
    position: relative !important;
}

/* 2. El formulario de búsqueda (oculto por defecto) */
.search-wrap .search-block {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    width: 280px !important;
    background: #ffffff !important;
    padding: 15px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15) !important;
    border-radius: 4px !important;
    z-index: 999999 !important;
    
    /* Estado oculto suave */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(10px) !important;
    transition: all 0.2s ease-in-out !important;
}

/* 3. EL PUENTE MÁGICO: Evita que se cierre al mover el mouse */
/* Crea un área invisible que conecta el icono con el formulario */
.search-wrap .search-block::before {
    content: '' !important;
    position: absolute !important;
    top: -20px !important; /* Extiende el área hacia arriba hasta tocar el icono */
    left: 0 !important;
    width: 100% !important;
    height: 20px !important;
    background: transparent !important;
}

/* 4. Mostrar al pasar el mouse por el contenedor padre */
.search-wrap:hover .search-block {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* 5. Eliminar la "franja azul" y asegurar que se pueda escribir */
.search-wrap .search-block input[type="text"] {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: #212529 !important;
    font-size: 14px !important;
    
    /* ESTO ELIMINA LA FRANJA AZUL MOLESTA */
    outline: none !important;
    box-shadow: none !important;
    
    position: relative !important;
    z-index: 9999999 !important;
    pointer-events: auto !important;
}

/* Un azul suave y controlado SOLO cuando haces clic para escribir */
.search-wrap .search-block input[type="text"]:focus {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* 6. Limpiar cualquier estilo raro del tema en el icono */
.search-wrap .search-icon, 
.search-wrap .search-icon i,
.search-wrap .search-icon a {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: inherit !important;
    text-decoration: none !important;
}

/*widget para ponerlo mas a la derecha qween*/

/* ==========================================================================
   MOVER EL WIDGET DE SERVICIOS INFORMÁTICOS HACIA LA DERECHA
   ========================================================================== */

/* Aplica solo al widget que tiene la clase col-md-offset-7 */
.col-md-offset-7 {
    /* Empuja la columna hacia la derecha */
    margin-left: auto !important;
    margin-right: 0 !important;
    
    /* En pantallas medianas y grandes, limita el ancho para que no ocupe todo */
    max-width: 41.666667% !important; /* Equivale a col-md-5 (5/12 del ancho) */
}

/* Asegura que el contenido interno se alinee bien */
.col-md-offset-7 .col-details {
    width: 100%;
    text-align: left;
}

/* En móviles, que el widget ocupe todo el ancho y no se vea cortado */
@media (max-width: 767px) {
    .col-md-offset-7 {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}
/*alinear el footer horizontal qween*/

/* ==========================================================================
   ALINEAR FOOTER EN 3 COLUMNAS HORIZONTALES
   ========================================================================== */

/* Convierte el contenedor del footer en un flexbox */
.footer-columns {
    display: flex !important;
    flex-wrap: wrap !important; /* Permite que se apilen en móviles */
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Cada columna del footer ocupa 1/3 del ancho (33.33%) */
.footer-sidebar {
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
    width: 33.333333% !important;
    box-sizing: border-box !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Asegura que los widgets internos se vean bien */
.footer-sidebar .widget {
    width: 100% !important;
    margin-bottom: 20px !important;
}

/* Lista de enlaces con espaciado adecuado */
.footer-sidebar ul.wp-block-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

.footer-sidebar ul.wp-block-list li {
    margin-bottom: 8px !important;
    line-height: 1.5 !important;
}

.footer-sidebar ul.wp-block-list li a {
    color: white !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.footer-sidebar ul.wp-block-list li a:hover {
    color: #0073e6 !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   RESPONSIVE: En móviles, las columnas se apilan verticalmente
   ========================================================================== */
@media (max-width: 767px) {
    .footer-columns {
        flex-direction: column !important;
    }
    
    .footer-sidebar {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 30px !important;
    }
}

/* En tablets, 2 columnas arriba y 1 abajo */
@media (min-width: 768px) and (max-width: 991px) {
    .footer-sidebar {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
    
    /* La tercera columna ocupa todo el ancho abajo */
    .footer-sidebar:nth-child(3) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}
/*reducir mensaje de contacto qween*/

/* ==========================================================================
   REDUCIR EL TAMAÑO DEL TEXTAREA DEL FORMULARIO DE CONTACTO
   ========================================================================== */

/* Reduce la altura del textarea */
.wpcf7-textarea {
    height: 120px !important; /* <--- AJUSTA ESTE VALOR (antes era mucho más alto) */
    min-height: 120px !important;
    max-height: 200px !important; /* Limita el máximo por si el usuario redimensiona */
    resize: vertical !important; /* Permite al usuario estirarlo solo verticalmente si necesita */
}

/* Opcional: Reduce también el padding interno para que se vea más compacto */
.wpcf7-textarea {
    padding: 8px 12px !important;
    font-size: 14px !important;
}

/*quitar subrayados de los enlaces qween*/

/* Quitar subrayado a todos los enlaces */
a {
    text-decoration: none !important;
}

/* (Opcional) Si quieres que se subrayen solo al pasar el ratón */
a:hover {
    text-decoration: underline !important;
}

/*ocultar mercantile del pie pagina qween*/

.site-info {
    display: none !important;
}

/* 3. Elimina líneas decorativas (pseudo-elementos) si el tema las usa */
.site-info::before, 
.site-info::after,
.footer-bottom::before, 
.footer-bottom::after {
    display: none !important;
    border: none !important;
}

/*ocultar la raya blanca pie pagina*/

/* Elimina solo la línea blanca (bordes) del footer */
.footer-copyright.border,
.footer-copyright,
.footer-bottom {
    border-top: none !important;
    border-bottom: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Elimina líneas decorativas generadas con pseudo-elementos */
.footer-copyright::before,
.footer-copyright::after,
.footer-bottom::before,
.footer-bottom::after {
    display: none !important;
    border: none !important;
    content: "" !important;
    height: 0 !important;
}