/* 
Theme Name: Selinkgroup Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Tema custom per SelinkGroup
Author: Xavier Gadea
Author URI: https://wwwoood.info
Template: hello-elementor
Version: 2.0.0
Text Domain: selinkgroup-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

.scroll-reveal-text {
    font-size: 35px;
    line-height: 43px;
    
}

.scroll-reveal-text span {
    opacity: 0.2;
    display: inline-block;
    
}

/* Responsive */
@media (max-width: 768px) {
    .scroll-reveal-text {
        font-size: 1.8rem;
    }
}

/* Añadir espacio entre columnas */
.section-images-hover .elementor-container {
    column-gap: 30px !important;
}

/* Eliminar el padding lateral del contenedor para mantener alineación */
.section-images-hover .elementor-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Asegurar que las columnas no tengan padding extra */
.section-images-hover .elementor-column {
    /*padding: 0 !important;*/
}

/* Mantener tu código de hover */
.image-hover-container {
    position: relative;
    overflow: hidden;
}

.image-hover-container .hover-image,
.image-hover-container .hover-text {
    transition: opacity 0.5s ease-in-out;
}

.image-hover-container .hover-image {
    opacity: 1;
}

.image-hover-container .hover-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: start;
    justify-content: left;
    opacity: 0;
    background-color: #FFF; /* Fondo oscuro */
    color: #000000;
    padding: 36px 27px 23px 10px;
    text-align: left;
    border: 1px solid #000;
}

.image-hover-container:hover .hover-image {
    opacity: 0;
}

.image-hover-container:hover .hover-text {
    opacity: 1;
}

/* Contenedor del icon-box para manejar el hover */
.elementor-icon-box-wrapper {
    transition: all 0.3s ease;
}

/* Cambiar color del texto al hacer hover en el wrapper */
.elementor-icon-box-wrapper:hover .elementor-icon-box-title a {
    color: #07877480;
}
.ion-white .elementor-icon-box-wrapper:hover a ,.ion-white a:hover {
    color: #FFF !important;
}

/* Cambiar color del SVG al hacer hover */
.btFlecha .elementor-icon-box-wrapper:hover .elementor-icon svg path {
    fill: #07877480;
}

/* Mover la flecha a la derecha al hacer hover */
.elementor-icon-box-wrapper:hover .elementor-icon {
    transform: translateX(10px); /* Ajusta los píxeles que quieras */
}

/* Añadir transición suave a la flecha */
.elementor-icon {
    display: inline-block;
    transition: transform 0.3s ease;
}



/************ GALERIA DE PORTADA AMB HOVER ****************/

.tintas-list .elementor-icon-list-text:hover {
    color: #000 !important;
}
/* Ocultar todas las imágenes de la galería por defecto */
.tintas-gallery .gallery-item {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.4s ease-in-out, visibility 0s 0.4s !important;
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
}

/* Contenedor de la galería con posición relativa */
.tintas-gallery .gallery {
    position: relative !important;
    min-height: 100% !important;
    height: 100% !important;
}

/* Asegurar que la columna de la galería tenga altura completa */
.tintas-gallery-column {
    position: relative !important;
}

.tintas-gallery {
    position: relative !important;
    height: 100% !important;
}

/* Mostrar la imagen activa */
.tintas-gallery .gallery-item.active {
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute !important;
    transition: opacity 0.4s ease-in-out, visibility 0s 0s !important;
}

/* Configurar el item de lista con flexbox */
.tintas-list .elementor-icon-list-item {
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    padding: 10px 0 !important;
    transition: all 0.3s ease !important;
    flex-direction: row !important;
}

/* El texto va primero */
.tintas-list .elementor-icon-list-text {
    order: 1 !important;
}

/* El icono va después con espacio de 20px */
.tintas-list .elementor-icon-list-icon {
    order: 2 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease-in-out !important;
    margin-left: 20px !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
}

/* Mostrar el icono en hover con fade-in */
.tintas-list .elementor-icon-list-item:hover .elementor-icon-list-icon {
    opacity: 1 !important;
}

/* Ajustar el tamaño del SVG */
.tintas-list .elementor-icon-list-icon svg {
    width: 20px !important;
    height: auto !important;
    display: block !important;
}



/* Estado hover - botón presionado */
.elementor-field-type-submit .elementor-button:hover {
    border-width: 1px 1px 1px 1px !important;
    /* Mover el botón ligeramente abajo y a la derecha para simular la presión */
    transform: translate(2px, 2px) !important;
}

/* Opcional: efecto al hacer click */
.elementor-field-type-submit .elementor-button:active {
    border-width: 1px 1px 1px 1px;
    transform: translate(2px, 2px);
}

.textoTinta {
    display: none;
}
input, textarea {
    padding-left: 0px !important;
}
.barra-seguridad {
    position: relative;
    width: 585px;
    height: 13px;
    background-color: white;
    border: 1px solid black;
    border-radius: 6px;
    overflow: hidden;
}

.barra-progreso {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #078774;
    border-right: 1px solid black;
    border-radius: 6px 0 0 6px;
    /* Ajusta el ancho aquí (en porcentaje o píxeles) */
    width: 44.6%;
}
.elementor-post-navigation__link {
  display: flex;
  justify-content: center; /* centra horitzontalment */
  align-items: center;     /* centra verticalment */
  text-align: center;
}

.elementor-post-navigation__link a {
  display: flex;
  align-items: center;
  gap: 8px; /* espai entre fletxa i text */
}

.elementor-post-navigation__prev .post-navigation__arrow-prev {
  order: -1; /* assegura que la fletxa quedi a l'esquerra del text */
}

.elementor-post-navigation {
    align-items: stretch;
}
.elementor-post-navigation .elementor-post-navigation__link {
    margin-top:20px;
    margin-bottom: 20px
}
.filter-tintas .elementor-nav-menu--layout-horizontal .elementor-nav-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* o flex-start si vols alineació a l’esquerra */
  gap: 0px 19px; /* incrementa l'espai entre elements */
}

.filter-tintas .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li > a {
  margin-inline: 0 !important;
  margin-right: 19px !important; /* petit espai intern per si hi ha separadors */
}
.swiper-pagination-bullet {
    background-color: transparent;
    border: 1px solid #000 !important;
}
.swiper-pagination-bullet-active {
    background-color: #000 !important;
}
.content-tintas ul {
    margin-bottom: 20px;
}
@media screen and (max-width: 760px) {
    .elementor-main-swiper, .swiper-slide {
        max-width: 270px !important;
    }

    /* Estilos para el select mobile */
    .mobile-menu-select {
        width: 100%;
        padding: 12px 15px;
        font-size: 16px;
        font-family: inherit;
        border-bottom: 1px solid #000;
        border-top: none;
        border-right: none;
        border-left: none;
        border-radius: 0px;
        background-color: #fff;
        color: #333;
        cursor: pointer;
        appearance: none;
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 24px;
        padding-right: 40px;
        margin-bottom: 20px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23333' stroke-width='2'%3E%3Cpath d='M5 7l5 5 5-5'/%3E%3C/svg%3E");
        
    }

    .mobile-menu-select:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
    }

    .mobile-menu-select option {
        padding: 10px;
    }
    .navegador-tintas .elementor-post-navigation .elementor-post-navigation__link a {
        max-width: 85% !important;
    }
}
/* Ocultar select en desktop */
@media (min-width: 769px) {
    .mobile-menu-select {
        display: none !important;
    }
}

/* Asegurar que el menú original se muestre en desktop */
@media (min-width: 769px) {
    .mobile-dropdown-menu .elementor-nav-menu--main,
    .mobile-dropdown-menu .elementor-menu-toggle {
        display: block !important;
    }
}
/* Estilos cuando el header se vuelve sticky */
.elementor-sticky--effects {
  transition: padding 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease !important;
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

/* Estat quan s'afegeix la classe .is-sticky (scroll down) */
.elementor-sticky--effects.is-sticky {
  background-color: #ffffff !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  /*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);*/
  border-bottom: 1px solid #000;
}
@media screen and (min-width: 1366px) 
{
    .col-50-left {
        margin-left: -100px;
    }
}
@media screen and (min-width: 1280px) and (max-width: 1365px) 
{
    .col-50-left {
        margin-left: -30px;
    }
}
/* Animación hover para las flechas del navegador de posts */
.elementor-post-navigation__prev a,
.elementor-post-navigation__next a {
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

/* Flecha anterior - se mueve a la izquierda */
.elementor-post-navigation__prev a:hover .post-navigation__arrow-prev {
    transform: translateX(-8px);
}

/* Flecha siguiente - se mueve a la derecha */
.elementor-post-navigation__next a:hover .post-navigation__arrow-next {
    transform: translateX(8px);
}

/* Transición suave para las flechas */
.post-navigation__arrow-prev,
.post-navigation__arrow-next {
    transition: transform 0.3s ease;
    display: inline-flex;
    align-items: center;
}
/* Mostrar siempre el título */
/*.elementor-image-carousel*/
/* Desactivar el overlay hover */
/*.elementor-image-carousel .elementor-carousel-image-overlay {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none;
    background: transparent !important;
    position: static !important;
    display: block !important;
    padding: 10px 40px !important;
    height: 30px;
    text-align: left !important;
    font-size: 14px;
    color: #333;
    width: 100% !important;
}

.elementor-image-carousel .elementor-carousel-image-overlay.e-overlay-animation-fade {
    transition: none !important;
}


.elementor-image-carousel .swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
}


.elementor-image-carousel .elementor-carousel-image,
.elementor-carousel-image.video-slide {
    flex: 1;
    width: 100%;
}*/
/* Estado inicial del texto */
.textoTinta {
    display: none;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, max-height 0.3s ease, transform 0.3s ease;
}

/* Estado visible del texto */
.textoTinta.texto-visible {
    opacity: 1;
    max-height: 500px; /* Ajusta según tu contenido */
    transform: translateY(0);
}