/* Hover de enlaces del menú principal con bordes redondeados */
#top-menu li>a,
.main-menu__tree__link {
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: 6px;
    /* bordes redondeados */
    padding: 6px 12px;
    /* opcional: ajusta tamaño del botón */
    display: inline-flex;
    /* para alinear iconos y texto */
    align-items: center;
}

/* Hover: fondo oscuro + texto claro */
#top-menu li:hover>a,
.main-menu__tree__link:hover {
    background-color: #243163 !important;
    color: #fff !important;
}

/* Iconos dentro del enlace */
#top-menu li:hover>a .material-icons,
.main-menu__tree__link:hover .material-icons {
    color: #fff !important;
}

/* Fondo del pie de página */
footer#footer,
footer.footer,
.footer {
    background: #243163 !important;
}

/* El tema usa bloques internos con fondo negro */
.footer__before,
.footer__main,
.footer__main__top,
.footer__main__bottom {
    background: transparent !important;
}

/* Hover del botón del acordeón de deatlles del producto */
.info .accordion-button:hover,
.info .accordion-button:focus {
    color: #ffffff !important;
    background-color: #243163 !important;
}

/*Hover a categorias del menu izquierdo*/
.category-tree__item__link {
    display: block;
    padding: 3px 5px;
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: 5px;
}

.category-tree__item__link:hover {
    background-color: #243163;
    color: #fff;
    border-radius: 5px;
}

/*Fondo del header-top */
.header-top {
    background-color: #243163;
    /* azul oscuro */
}

/*Todos los textos y enlaces por defecto */
.header-top a,
.header-top .header-block__action-btn,
.header-top .header-block__action-btn .header-block__icon,
.header-top .header-block__action-btn .header-block__title,
.header-top #contact-link a {
    color: #fff;
    /* blanco por defecto */
    transition: color 0.2s ease;
}

/*Flecha del dropdown del usuario por defecto */
.header-top .dropdown-toggle::after {
    border-top-color: #fff;
    /* flecha blanca normal */
    transition: border-top-color 0.2s ease;
}

/*Hover sobre links (usuario, carrito y contactanos) */
.header-top .header-block__action-btn:hover .header-block__icon,
.header-top .header-block__action-btn:hover .header-block__title,
.header-top #contact-link a:hover {
    color: #6ea0f5;
    /* azul claro */
}

/* Flecha por defecto */
.header-top .dropdown-toggle::after {
    border-top-color: #fff;
    /* blanca por defecto */
    transition: border-top-color 0.2s ease;
}

/* Cambiar color de la flecha al hacer hover sobre el mismo link */
.header-top .dropdown-toggle:hover::after {
    border-top-color: #6ea0f5;
    /* azul claro al hover */
}

/*Badge del carrito - siempre verde */
.header-top .header-block__badge {
    background-color: #60AF30;
    color: #fff;
    transition: none;
    /* no cambia al hover */
}

/* Fondo del dropdown del usuario */
.header-top .dropdown-menu {
    background-color: #243163;
    color: #fff;
}

/* Items del menú */
.header-top .dropdown-menu .dropdown-item {
    color: #fff;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover de los items */
.header-top .dropdown-menu .dropdown-item:hover {
    background-color: #6ea0f5;
    color: #243163;
}

/* Divisor */
.header-top .dropdown-menu .dropdown-divider {
    border-top: 1px solid #224c86;
}

/* Contenedor general */
.services-section {
    overflow: hidden;
}

/* Texto */
.service-text h2 {
    font-size: 2.2rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.service-text p {
    font-size: 1.3rem;
    color: #555;
    line-height: 1.6;
    text-align: justify;
}

/* Imagen */
.service-image img {
    border-radius: 12px;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Hover */
.service-item:hover .service-image img {
    transform: scale(1.05);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* Estado inicial (ocultos) */
.service-image,
.service-text {
    opacity: 0;
    transition: all 1.5s ease;
}

/* Direcciones */
.from-left {
    transform: translateX(-120px);
}

.from-right {
    transform: translateX(120px);
}

/* Cuando entran en viewport */
.visible .from-left,
.visible .from-right {
    opacity: 1;
    transform: translateX(0);
}

/* Hover se mantiene */
.service-item:hover .service-image img {
    transform: scale(1.05);
}

/* Texto titulo verde */
.green-text {
    color: #60AF30 !important;
}