/* --- Etiquetas de categoría: estilo común en toda la web --------------- Fondo blanco, borde negro e icono a 20px, estén en la home, en el listado de casos o en el detalle del proyecto. */ /* Nombre del cliente en las cards: sin corchetes ni mayúsculas forzadas */ .tribal-success-card .tribal-success-client { margin: 0 0 8px; font-family: "Suisse Intl"; font-size: 14px; line-height: 32px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #5D5D5D; } /* Imagen de las cards: misma proporción en todas, en cualquier resolución. Se recorta, nunca se deforma ni cambia de alto entre cards. */ .tribal-success-card > img, .tribal-success-card .tribal-success-image { width: 100%; height: auto !important; aspect-ratio: var(--mt-card-img-ratio, 16 / 10) !important; object-fit: cover !important; /* Sin esto la imagen se estira al alto de la fila y cada card sale distinta */ align-self: flex-start !important; } /* Separación entre la imagen de la card y el nombre del cliente */ .tribal-success-card img + .heading-5, .tribal-success-card img + .tribal-success-client, .tribal-success-card > img + * { margin-top: 16px; } .tribal-success-category { display: flex; flex-wrap: wrap; /* 8px entre etiquetas y 5px entre filas cuando saltan de línea */ gap: 5px 8px; align-items: center; /* Van debajo de la descripción, antes del enlace */ margin: 8px 0 24px; } .tribal-success-category .tribal-success-category-tag { display: inline-flex; line-height: 20px; align-items: center; justify-content: center; gap: 8px; max-width: 100%; padding: 4px 12px; min-height: 32px; white-space: nowrap; border: 1px solid #1E1E1E; border-radius: 50px; background: #FFFFFF; color: #1E1E1E; font-weight: 400; } .tribal-success-category .tribal-success-category-tag img { flex: 0 0 20px; width: 20px; height: 20px; max-width: 20px; margin: 0; object-fit: contain; } #tribal-project { } #tribal-project .tribal-project-container { display: flex; flex-direction: row; gap: 0 125px; flex: 0 1 auto; justify-content: space-between; margin-top: 80px; margin-bottom: 80px; } #tribal-project .tribal-project-column-left { width: calc(100% - 476px - 125px); } #tribal-project .tribal-project-column-right { width: 476px; } #tribal-project .tribal-project-image { width: 100%; margin-bottom: 20px; } #tribal-project h3 { margin-bottom: 20px; } /* PDP: nombre del cliente entre la imagen y el titular (como en las cards) */ #tribal-project p.tribal-project-client { margin: 0 0 8px; font-family: "Suisse Intl"; font-size: 14px; line-height: 32px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #5D5D5D; } #tribal-project p { margin-bottom: 20px; } #tribal-project .tribal-success-category { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 24px 0; } #tribal-project .tribal-success-category .tribal-success-category-tag { display: inline-flex; justify-content: center; align-items: center; gap: 8px; max-width: 100%; padding: 4px 12px; min-height: 32px; white-space: nowrap; border: 1px solid #1E1E1E; border-radius: 50px; color: #1E1E1E; background: #FFFFFF; font-weight: 400; } #tribal-project .tribal-success-category .tribal-success-category-tag img { flex: 0 0 20px; width: 20px; height: 20px; object-fit: contain; margin: 0; } @media (max-width: 1024px) { #tribal-project .tribal-project-container { gap: 0 0; flex-direction: column; } #tribal-project .tribal-project-column-left { width: 100%; } #tribal-project .tribal-project-column-right { width: 100%; } } /* Antes de que Owl arranque, el carrusel ya ocupa su hueco: si no, el contenido de debajo sube y luego salta al inicializarse. */ #tribal-home-carousel:not(.owl-loaded) { display: block; aspect-ratio: 16 / 8.65; overflow: hidden; background: #1E1E1E; } #tribal-home-carousel:not(.owl-loaded) .tribal-home-carousel-item { display: none; } #tribal-home-carousel:not(.owl-loaded) .tribal-home-carousel-item:first-child { display: flex; } @media screen and (max-width: 1024px) { #tribal-home-carousel:not(.owl-loaded) { aspect-ratio: 16 / 12; } } /* Con un solo slide no hacen falta ni flechas ni puntos */ #tribal-home-carousel.owl-carousel:not(.owl-loaded) .owl-nav, #tribal-home-carousel .owl-nav.disabled, #tribal-home-carousel .owl-dots.disabled { display: none !important; } #tribal-home-carousel:has(.owl-item:only-child) .owl-nav, #tribal-home-carousel:has(.owl-item:only-child) .owl-dots, #tribal-home-carousel.mt-single-slide .owl-nav, #tribal-home-carousel.mt-single-slide .owl-dots { display: none !important; } #tribal-home-carousel { margin-top: 0px; margin-bottom: 0px; position: relative; } /* Esquinas rectas en todo el carrusel: anula radios de Owl, de Elementor (widget y ajustes globales de imagen) y de cualquier otro CSS */ .elementor-widget-tribal_carousel, .elementor-widget-tribal_carousel > .elementor-widget-container, #tribal-home-carousel, #tribal-home-carousel .owl-stage-outer, #tribal-home-carousel .owl-stage, #tribal-home-carousel .owl-item, #tribal-home-carousel .tribal-home-carousel-item, #tribal-home-carousel .tribal-home-carousel-item-media, #tribal-home-carousel .tribal-home-carousel-item-media img, #tribal-home-carousel .tribal-home-carousel-item-media video, #tribal-home-carousel .tribal-home-carousel-item-content, #tribal-home-carousel .tribal-video-wrap { border-radius: 0 !important; } #tribal-home-carousel .tribal-home-carousel-item { width: 100%; display: flex; margin-bottom: 80px; } #tribal-home-carousel .tribal-home-carousel-item .tribal-home-carousel-item-media { flex-basis: 636px; width: 636px; height: auto; } #tribal-home-carousel .tribal-home-carousel-item .tribal-home-carousel-item-media img { width: 100%; height: auto; border-radius: 0; } #tribal-home-carousel .tribal-home-carousel-item .tribal-home-carousel-item-media video { width: 100%; height: auto; } #tribal-home-carousel .tribal-home-carousel-item .tribal-home-carousel-item-media.tribal-home-carousel-item-media-full { flex-basis: 100%; width: 100%; height: 548px; overflow: hidden; display: flex; border-radius: 0; justify-content: center; align-items: center; } /* Slides a ancho completo (imagen o vídeo): el medio cubre todo el slide */ #tribal-home-carousel .tribal-home-carousel-item .tribal-home-carousel-item-media.tribal-home-carousel-item-media-full img, #tribal-home-carousel .tribal-home-carousel-item .tribal-home-carousel-item-media.tribal-home-carousel-item-media-full video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; } /* Controles de vídeo del carrusel (play/pausa, sonido y volumen) */ #tribal-home-carousel .tribal-video-wrap { position: relative; width: 100%; /* Mientras carga el vídeo se ve el poster (o el color de fondo), nunca el hueco con el texto de debajo */ background-color: #1E1E1E; background-position: center; background-size: cover; background-repeat: no-repeat; } #tribal-home-carousel .tribal-video-wrap video { opacity: 0; -webkit-transition: opacity 0.4s; transition: opacity 0.4s; } #tribal-home-carousel .tribal-video-wrap.is-ready video { opacity: 1; } #tribal-home-carousel .tribal-home-carousel-item-media-full .tribal-video-wrap { height: 100%; } #tribal-home-carousel .tribal-video-wrap video { display: block; } #tribal-home-carousel .tribal-video-controls { position: absolute; /* El carrusel pasa por debajo del header, así que los controles bajan la altura del header (88px en desktop, 50px en tablet/mobile) + 16px */ top: 104px; right: 16px; z-index: 3; display: flex; align-items: center; gap: 8px; } /* En el slide de vídeo el contenido ya empieza bajo el menú: los controles solo necesitan su margen */ #tribal-home-carousel .tribal-home-carousel-item--video-slide .tribal-video-controls { top: 16px; } #tribal-home-carousel .tribal-video-btn { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(30, 30, 30, 0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #FFFFFF; cursor: pointer; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; } #tribal-home-carousel .tribal-video-btn:hover { background: rgba(30, 30, 30, 0.85); } #tribal-home-carousel .tribal-video-btn:focus-visible, #tribal-home-carousel .tribal-video-range:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; } #tribal-home-carousel .tribal-video-btn svg { width: 20px; height: 20px; fill: currentColor; } /* Volumen: píldora que se despliega al pasar el ratón por el botón de sonido */ #tribal-home-carousel .tribal-video-volume { display: flex; align-items: center; height: 40px; border-radius: 20px; background: rgba(30, 30, 30, 0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } #tribal-home-carousel .tribal-video-volume .tribal-video-btn { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } #tribal-home-carousel .tribal-video-range { --tribal-vol: 0%; -webkit-appearance: none; appearance: none; width: 0; height: 4px; margin: 0; padding: 0; opacity: 0; border-radius: 2px; background: linear-gradient(to right, #FFFFFF var(--tribal-vol), rgba(255, 255, 255, 0.35) var(--tribal-vol)); cursor: pointer; -webkit-transition: width 0.3s, opacity 0.3s, margin 0.3s; transition: width 0.3s, opacity 0.3s, margin 0.3s; } #tribal-home-carousel .tribal-video-volume:hover .tribal-video-range, #tribal-home-carousel .tribal-video-volume:focus-within .tribal-video-range { width: 80px; margin-right: 14px; opacity: 1; } #tribal-home-carousel .tribal-video-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; border: 0; border-radius: 50%; background: #FFFFFF; } #tribal-home-carousel .tribal-video-range::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #FFFFFF; } #tribal-home-carousel .tribal-video-range::-moz-range-track { background: transparent; } /* Icono según el estado */ #tribal-home-carousel .tribal-video-wrap .icon-play, #tribal-home-carousel .tribal-video-wrap .icon-sound, #tribal-home-carousel .tribal-video-wrap.is-paused .icon-pause, #tribal-home-carousel .tribal-video-wrap.is-unmuted .icon-muted { display: none; } #tribal-home-carousel .tribal-video-wrap.is-paused .icon-play, #tribal-home-carousel .tribal-video-wrap.is-unmuted .icon-sound { display: block; } /* Pantallas táctiles: sin barra de volumen (iOS no permite cambiarlo desde la web; se usa el volumen del dispositivo) */ @media (hover: none) { #tribal-home-carousel .tribal-video-range { display: none; } } @media screen and (max-width: 768px) { #tribal-home-carousel .tribal-video-controls { top: 80px; right: 12px; } #tribal-home-carousel .tribal-home-carousel-item--video-slide .tribal-video-controls { top: 12px; right: 12px; } #tribal-home-carousel .tribal-video-btn, #tribal-home-carousel .tribal-video-volume { height: 36px; } #tribal-home-carousel .tribal-video-btn { width: 36px; } } #tribal-home-carousel .tribal-home-carousel-item .tribal-home-carousel-item-content { flex-basis: calc(100% - 636px); width: calc(100% - 636px); padding: 0 48px 0 88px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background: #F3F0E7; border-radius: 0; } #tribal-home-carousel .tribal-home-carousel-item .tribal-home-carousel-item-content .heading-5 { color: #5E5E5B; margin-top: 24px; } #tribal-home-carousel .tribal-home-carousel-item .tribal-home-carousel-item-content .tribal-btn { margin-top: 18px; } #tribal-home-carousel .owl-dots { position: absolute; left: 0; bottom: 100px; display: flex; align-items: center; } #tribal-home-carousel .owl-dots .owl-dot { display: inline-block; margin-right: 24px; height: 4px; width: 88px; border-radius: 8px; background: #E8E5DC; -webkit-transition: 0.6s; transition: 0.3s; } #tribal-home-carousel .owl-dots .owl-dot.active { background: #1E1E1E; } #tribal-home-carousel .owl-dots .owl-dot:last-child { margin-right: 0; } #tribal-home-carousel .owl-nav { position: absolute; right: 0; bottom: 100px; } #tribal-home-carousel .owl-nav .owl-prev { margin-right: 32px; } /* --- Slide "Imagen de fondo + imagen + texto" ------------------------- .tribal-home-carousel-item-visual lleva el fondo y la imagen de primer plano. Desktop: la capa cubre todo el slide y el texto va encima. Tablet/mobile: la capa es el bloque superior y el texto va debajo, sobre blanco. */ #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg { position: relative; overflow: hidden; background-color: #FFFFFF; } #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-visual { background-color: #D9D9D9; /* Fondo por dispositivo: mobile por defecto y, si falta, hereda del mayor */ background-image: var(--mt-bg-m, var(--mt-bg-t, var(--mt-bg-d))); background-size: cover; background-position: center; background-repeat: no-repeat; } @media screen and (min-width: 768px) { #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-visual { background-image: var(--mt-bg-t, var(--mt-bg-d, var(--mt-bg-m))); } } @media screen and (min-width: 1025px) { #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-visual { background-image: var(--mt-bg-d, var(--mt-bg-t, var(--mt-bg-m))); } } #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-media picture { display: block; width: 100%; height: 100%; } #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-media { display: flex; align-items: center; justify-content: center; background: transparent; } #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-media img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; } #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-content { position: relative; z-index: 1; background: transparent; border-radius: 0; } /* Títulos grandes del slide (h1 / h2 del editor) */ #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-content h1, #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-content h2, #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-content .heading-1, #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-content .heading-2 { margin: 0 0 24px; font-size: 80px; line-height: 88px; font-weight: 400; letter-spacing: 0; } #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-content p { margin: 0 0 24px; font-size: 18px; line-height: 24px; } /* --- Desktop (más de 1024px) ----------------------------------------------- */ @media screen and (min-width: 1025px) { /* El carrusel sube por debajo del header translúcido (88px) */ #tribal-home-carousel { margin-top: -88px; } /* Proporción 16 / 8,65 en todos los slides */ #tribal-home-carousel .tribal-home-carousel-item { aspect-ratio: 16 / 8.65; height: auto; margin-bottom: 0; align-items: stretch; } #tribal-home-carousel .tribal-home-carousel-item .tribal-home-carousel-item-media, #tribal-home-carousel .tribal-home-carousel-item .tribal-home-carousel-item-media.tribal-home-carousel-item-media-full { height: 100%; overflow: hidden; } #tribal-home-carousel .tribal-home-carousel-item .tribal-home-carousel-item-media img, #tribal-home-carousel .tribal-home-carousel-item .tribal-home-carousel-item-media video { width: 100%; height: 100%; object-fit: cover; } #tribal-home-carousel .tribal-home-carousel-item .tribal-home-carousel-item-media .tribal-video-wrap { height: 100%; } /* El slide de vídeo empieza por debajo de la barra del menú (88px) */ #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--video-slide { padding-top: 88px; box-sizing: border-box; } /* Slide con fondo: capa visual a todo el slide */ #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-visual { position: absolute; inset: 0; } #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-media { position: absolute; top: 0; bottom: 0; left: 0; width: 55%; flex-basis: auto; padding: 88px 0 0; box-sizing: border-box; } #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg.tribal-home-carousel-item--text-left .tribal-home-carousel-item-media { left: auto; right: 0; } #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-media img { object-fit: contain; } /* Texto: empieza al 59,5% del ancho (como en Figma) */ #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-content { flex: 0 0 auto; width: 40.5%; margin-left: auto; padding: 88px 88px 0 0; box-sizing: border-box; } #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg.tribal-home-carousel-item--text-left .tribal-home-carousel-item-content { margin-left: 0; margin-right: auto; padding: 88px 0 0 88px; } /* Texto claro */ #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg.tribal-home-carousel-item--light .tribal-home-carousel-item-content, #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg.tribal-home-carousel-item--light .tribal-home-carousel-item-content p, #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg.tribal-home-carousel-item--light .tribal-home-carousel-item-content li, #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg.tribal-home-carousel-item--light .tribal-home-carousel-item-content h1, #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg.tribal-home-carousel-item--light .tribal-home-carousel-item-content h2, #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg.tribal-home-carousel-item--light .tribal-home-carousel-item-content h3, #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg.tribal-home-carousel-item--light .tribal-home-carousel-item-content h4, #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg.tribal-home-carousel-item--light .tribal-home-carousel-item-content h5, #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg.tribal-home-carousel-item--light .tribal-home-carousel-item-content .heading-1, #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg.tribal-home-carousel-item--light .tribal-home-carousel-item-content .heading-2, #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg.tribal-home-carousel-item--light .tribal-home-carousel-item-content .heading-5 { color: #FFFFFF; } /* Puntos abajo a la izquierda y flechas abajo a la derecha, dentro del slide */ #tribal-home-carousel .owl-dots { left: 88px; bottom: 56px; z-index: 2; } #tribal-home-carousel .owl-dots .owl-dot { width: 64px; margin-right: 24px; } #tribal-home-carousel .owl-nav { right: 88px; bottom: 46px; z-index: 2; display: flex; align-items: center; } #tribal-home-carousel .owl-nav .owl-prev { margin-right: 48px; } /* Puntos y flechas en blanco cuando el slide activo tiene texto claro */ #tribal-home-carousel.is-light-slide .owl-dots .owl-dot { background: rgba(255, 255, 255, 0.45); } #tribal-home-carousel.is-light-slide .owl-dots .owl-dot.active { background: #FFFFFF; } #tribal-home-carousel.is-light-slide .owl-nav button { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } } /* --- Tablet y mobile (hasta 1024px) ---------------------------------------- */ @media screen and (max-width: 1024px) { /* El carrusel sube por debajo del header translúcido (64px) */ #tribal-home-carousel { margin-top: -64px; margin-bottom: 40px; } /* Orden: slides → puntos → flechas (en flujo normal, no superpuestos) */ #tribal-home-carousel.owl-carousel.owl-loaded { display: flex; flex-direction: column; } #tribal-home-carousel .owl-stage-outer { order: 1; } #tribal-home-carousel .owl-dots { order: 2; position: static; display: flex; width: 100%; box-sizing: border-box; padding: 0 16px; margin-top: 32px; } #tribal-home-carousel .owl-dots .owl-dot { flex: 1 1 0; width: auto; margin-right: 24px; } #tribal-home-carousel .owl-nav { order: 3; position: static; display: flex; justify-content: flex-end; align-items: center; box-sizing: border-box; padding: 0 16px; margin-top: 24px; } #tribal-home-carousel .owl-nav .owl-prev { margin-right: 32px; } /* Controles del vídeo: por debajo del header (64px) */ #tribal-home-carousel .tribal-video-controls { top: 80px; } #tribal-home-carousel .tribal-home-carousel-item--video-slide .tribal-video-controls { top: 12px; } /* Slides: imagen arriba y texto debajo */ #tribal-home-carousel .tribal-home-carousel-item { flex-wrap: wrap; margin-bottom: 0; } #tribal-home-carousel .tribal-home-carousel-item .tribal-home-carousel-item-media { width: 100%; flex-basis: 100%; } #tribal-home-carousel .tribal-home-carousel-item .tribal-home-carousel-item-media.tribal-home-carousel-item-media-full { height: auto; aspect-ratio: 16 / 8.65; } /* Owl iguala el alto de todos los slides al del más alto. Solo el slide de vídeo se estira para ocupar ese alto; el resto, intactos. */ #tribal-home-carousel .owl-item:has(.tribal-home-carousel-item--video-slide), #tribal-home-carousel .owl-item.mt-video-slide { display: flex; align-items: stretch; } /* El vídeo empieza por debajo de la barra del menú (64px) */ #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--video-slide { padding-top: 64px; box-sizing: border-box; } #tribal-home-carousel .owl-item:has(.tribal-home-carousel-item--video-slide) > div, #tribal-home-carousel .owl-item.mt-video-slide > div, #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--video-slide { display: flex; width: 100%; } #tribal-home-carousel .tribal-home-carousel-item .tribal-home-carousel-item-media.tribal-home-carousel-item-video { flex: 1 1 auto; width: 100%; height: auto; min-height: 100%; aspect-ratio: auto; overflow: hidden; } #tribal-home-carousel .tribal-home-carousel-item .tribal-home-carousel-item-media.tribal-home-carousel-item-video .tribal-video-wrap, #tribal-home-carousel .tribal-home-carousel-item .tribal-home-carousel-item-media.tribal-home-carousel-item-video video { height: 100%; object-fit: cover; } /* El vídeo cubre todo el hueco: un 16:9 dentro de un 16:8,65 dejaba franjas y se veía pequeño */ #tribal-home-carousel .tribal-home-carousel-item .tribal-home-carousel-item-media.tribal-home-carousel-item-media-full, #tribal-home-carousel .tribal-home-carousel-item .tribal-home-carousel-item-media.tribal-home-carousel-item-video { overflow: hidden; } #tribal-home-carousel .tribal-home-carousel-item .tribal-home-carousel-item-media.tribal-home-carousel-item-media-full .tribal-video-wrap, #tribal-home-carousel .tribal-home-carousel-item .tribal-home-carousel-item-media.tribal-home-carousel-item-video .tribal-video-wrap { height: 100%; } #tribal-home-carousel .tribal-home-carousel-item .tribal-home-carousel-item-media.tribal-home-carousel-item-media-full img, #tribal-home-carousel .tribal-home-carousel-item .tribal-home-carousel-item-media.tribal-home-carousel-item-media-full video { width: 100%; height: 100%; object-fit: cover; } #tribal-home-carousel .tribal-home-carousel-item .tribal-home-carousel-item-content { width: 100%; flex-basis: 100%; box-sizing: border-box; padding: 24px 16px 0; background: transparent; } #tribal-home-carousel .tribal-home-carousel-item .tribal-home-carousel-item-content .heading-5 { margin-top: 16px; } /* Slide con fondo: el fondo pasa a ser el bloque superior */ #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg { display: flex; flex-direction: column; } #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-visual { position: relative; width: 100%; aspect-ratio: 16 / 12; padding-top: 64px; box-sizing: border-box; } #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-media { width: 100%; height: 100%; } /* Texto oscuro sobre blanco (también en los slides de texto claro) */ #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-content, #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-content h1, #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-content h2, #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-content h3, #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-content .heading-1, #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-content .heading-2 { color: #1E1E1E; } #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-content p, #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-content li { color: #5E5E5B; } #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-content h1, #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-content h2, #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-content .heading-1, #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-content .heading-2 { font-size: 56px; line-height: 64px; margin-bottom: 16px; } #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-content p { font-size: 16px; line-height: 24px; margin-bottom: 16px; } } /* --- Mobile (hasta 430px) -------------------------------------------------- */ @media screen and (max-width: 430px) { #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-visual { aspect-ratio: 16 / 13; } #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-content h1, #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-content h2, #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-content .heading-1, #tribal-home-carousel .tribal-home-carousel-item.tribal-home-carousel-item--bg .tribal-home-carousel-item-content .heading-2 { font-size: 40px; line-height: 48px; } #tribal-home-carousel .owl-dots .owl-dot { margin-right: 12px; } } #tribal-more-cases-home .heading-2 { color: #fff; } #tribal-more-cases-home .tribal-more-cases-home-links { width: 100%; margin-top: 24px; display: flex; flex-wrap: wrap; color: #BBB9B2; } #tribal-more-cases-home .tribal-more-cases-home-links a { display: inline-block; color: #BBB9B2; text-decoration: none; -webkit-transition: 0.6s; transition: 0.3s; } #tribal-more-cases-home .tribal-more-cases-home-links a:hover { color: #FFFFFF; } /* Enlaces escritos en un contenedor de texto dentro del módulo: mismo formato que el listado de industrias. Se aplica a los textos del propio módulo y, fuera de él, con la clase "mt-cases-links". */ #tribal-more-cases-home .elementor-widget-text-editor, #tribal-more-cases-home .elementor-widget-text-editor p, .mt-cases-links, .mt-cases-links p { /* Mismo tamaño que el listado de industrias que había antes */ font-size: var(--mt-cases-links-size, 40px); line-height: var(--mt-cases-links-lh, 48px); font-weight: 400; color: #BBB9B2; } @media screen and (max-width: 1024px) { #tribal-more-cases-home .elementor-widget-text-editor, #tribal-more-cases-home .elementor-widget-text-editor p, .mt-cases-links, .mt-cases-links p { font-size: var(--mt-cases-links-size, 32px); line-height: var(--mt-cases-links-lh, 40px); } } @media screen and (max-width: 768px) { #tribal-more-cases-home .elementor-widget-text-editor, #tribal-more-cases-home .elementor-widget-text-editor p, .mt-cases-links, .mt-cases-links p { font-size: var(--mt-cases-links-size, 24px); line-height: var(--mt-cases-links-lh, 32px); } } #tribal-more-cases-home .elementor-widget-text-editor a, .mt-cases-links a { display: inline; color: #BBB9B2; text-decoration: none !important; -webkit-transition: color 0.3s; transition: color 0.3s; } #tribal-more-cases-home .elementor-widget-text-editor a:hover, #tribal-more-cases-home .elementor-widget-text-editor a:focus-visible, .mt-cases-links a:hover, .mt-cases-links a:focus-visible { color: #FFFFFF; } .help-home p { color: #1E1E1E; } .help-home p:nth-child(1) { font-size: 40px; line-height: 120%; font-weight: 400; font-family: "Suisse Intl"; } .help-home p:nth-child(2) { margin: 16px 0; font-size: 16px; line-height: 28px; } .card-home-solution { border-radius: 8px; -webkit-transition: 0.6s; transition: 0.3s; } .card-home-solution img { -webkit-transition: 0.6s; transition: 0.3s; } .card-home-solution h4, .card-home-solution .heading-4 { margin-bottom: 8px; } .card-home-solution p { color: #1E1E1E; } .card-home-solution:hover { background: #F3F0E7; } .card-home-solution:hover img { transform: scale(1.01); } #tribal-industries { width: 100%; display: flex; justify-content: space-between; } #tribal-industries .tribal-industries-name { flex-basis: 60%; width: 60%; padding-right: 24px; } #tribal-industries .tribal-industries-name a { color: #BBB9B2; -webkit-transition: 0.6s; transition: 0.3s; } #tribal-industries .tribal-industries-name a:hover, #tribal-industries .tribal-industries-name a.active { color: #1E1E1E; } #tribal-industries .tribal-industries-images { flex-basis: 40%; width: 40%; } #tribal-industries .tribal-industries-images * { width: 100%; height: auto; border-radius: 4px; } @media screen and (max-width: 768px) { #tribal-industries { flex-wrap: wrap; } #tribal-industries .tribal-industries-name, #tribal-industries .tribal-industries-images { flex-basis: 100%; width: 100%; } #tribal-industries .tribal-industries-name { margin-bottom: 24px; } } #tribal-industrias-cards { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } #tribal-industrias-cards .tribal-industria-card { height: 285px; background: transparent; border-radius: 8px; padding: 8px; -webkit-transition: 0.6s; transition: 0.3s; } #tribal-industrias-cards .tribal-industria-card .tribal-industria-card-content { border-radius: 4px; display: flex; justify-content: space-between; align-items: end; width: 100%; height: 100%; padding: 16px; } #tribal-industrias-cards .tribal-industria-card .tribal-industria-card-content h3 { color: #fff; } #tribal-industrias-cards .tribal-industria-card:hover { background: #E8E5DC; } @media screen and (max-width: 1024px) { #tribal-industrias-cards { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 768px) { #tribal-industrias-cards { grid-template-columns: repeat(1, 1fr); } } #tribal-success-projects-cards-filter { width: 100%; margin-top: 24px; } #tribal-success-projects-cards-filter .tribal-filter-button { display: flex; align-items: center; cursor: pointer; height: 33px; padding: 0 8px; align-items: center; font-size: 14px; line-height: 20px; border-radius: 8px; color: #1E1E1E; border: 1px solid #1E1E1E; } #tribal-success-projects-cards-filter .tribal-filter-button img { width: 24px; margin-right: 4px; } #tribal-success-projects-cards-filter .tribal-success-header-filter { width: 100%; margin-bottom: 80px; } #tribal-success-projects-cards-filter .tribal-success-header-filter label { display: block; margin-bottom: 8px; } #tribal-success-projects-cards-filter .tribal-success-header-filter .tribal-success-header-filter-services { margin-bottom: 24px; } #tribal-success-projects-cards-filter .tribal-success-header-filter .tribal-success-header-filter-services .header-filter-services-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } #tribal-success-projects-cards-filter .tribal-success-header-filter .tribal-success-header-filter-services .header-filter-services-links .tribal-services-select { display: none; } #tribal-success-projects-cards-filter .tribal-success-header-filter .tribal-success-header-filter-services .header-filter-services-links a { min-height: 33px; padding: 4px 12px; display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; font-size: 14px; line-height: 20px; border-radius: 8px; color: #1E1E1E; border: 1px solid #1E1E1E; margin: 0; } #tribal-success-projects-cards-filter .tribal-success-header-filter .tribal-success-header-filter-services .header-filter-services-links a img { flex: 0 0 22px; width: 22px; height: 22px; object-fit: contain; } #tribal-success-projects-cards-filter .tribal-success-header-filter .tribal-success-header-filter-services .header-filter-services-links a.active { background: #EDEDED; } #tribal-success-projects-cards-filter .tribal-success-header-filter .tribal-success-header-filter-services .header-filter-services-links a.active:after { content: ""; width: 16px; height: 16px; display: flex; justify-content: center; align-items: center; margin-left: 4px; background: url("/wp-content/themes/tribalworld/assets/icons/close.svg") no-repeat center center; background-size: cover; } #tribal-success-projects-cards-filter .tribal-success-header-filter .tribal-success-header-filter-industry { padding-bottom: 24px; border-bottom: 1px solid #D9D9D9; } #tribal-success-projects-cards-filter .tribal-success-header-filter .tribal-success-header-filter-industry .tribal-industry-link { width: 100%; display: flex; } #tribal-success-projects-cards-filter .tribal-success-header-filter .tribal-success-header-filter-industry .tribal-industry-link a { display: flex; justify-content: space-between; align-items: center; color: #1E1E1E; margin: 0 8px 8px 0; padding: 0 8px; height: 32px; font-size: 14px; border-radius: 8px; font-weight: 400; border: 1px solid #1E1E1E; -webkit-transition: 0.6s; transition: 0.3s; } #tribal-success-projects-cards-filter .tribal-success-header-filter .tribal-success-header-filter-industry .tribal-industry-link a.active { background: #1E1E1E; color: #fff; } #tribal-success-projects-cards-filter .tribal-success-header-filter .tribal-success-header-filter-industry .tribal-industry-link a.active img { margin-left: 11px; width: 16px; height: 16px; } #tribal-success-projects-cards-filter .tribal-success-header-filter .tribal-success-header-filter-industry .tribal-industry-link a.active:hover { background: #1E1E1E; color: #fff; } #tribal-success-projects-cards-filter .tribal-success-header-filter .tribal-success-header-filter-industry .tribal-industry-link a:hover { background: #EDEDED; } #tribal-success-projects-cards-filter .tribal-success-header-filter .tribal-success-header-filter-services .header-filter-services-links a:hover { background: #EDEDED; } #tribal-success-projects-cards-filter .tribal-success-header-filter .tribal-success-subcategories-selected a:hover { background: #EDEDED; } #tribal-success-projects-cards-filter .tribal-success-header-filter .tribal-success-header-filter-industry .tribal-industry-select { display: none; } #tribal-success-projects-cards-filter .tribal-success-header-filter .tribal-success-subcategories-selected { margin-top: 24px; display: flex; flex-wrap: wrap; margin-bottom: 24px; } #tribal-success-projects-cards-filter .tribal-success-header-filter .tribal-success-subcategories-selected a { margin: 0 8px 8px 0; display: flex; justify-content: center; align-items: center; padding: 0 8px; height: 33px; border-radius: 8px; color: #1E1E1E; border: 1px solid #1E1E1E; background: #EDEDED; font-size: 14px; line-height: 20px; } #tribal-success-projects-cards-filter .tribal-success-header-filter .tribal-success-subcategories-selected a:after { content: ""; width: 16px; height: 16px; display: flex; justify-content: center; align-items: center; margin-left: 4px; background: url("/wp-content/themes/tribalworld/assets/icons/close.svg") no-repeat center center; background-size: cover; } #tribal-success-projects-cards-filter .tribal-success-header-filter .tribal-success-number { font-size: 14px; line-height: 20px; } #tribal-success-projects-cards-filter .tribal-success-card { width: 100%; display: flex; margin-bottom: 40px; padding: 8px; border-radius: 8px; -webkit-transition: 0.6s; transition: 0.3s; } #tribal-success-projects-cards-filter .tribal-success-card img { flex: 0 1 411px; width: 411px; max-width: 45%; /* Todas las cards con la misma proporción: la imagen se recorta, nunca se deforma ni cambia de alto entre cards */ height: auto; aspect-ratio: var(--mt-card-img-ratio, 16 / 10); object-fit: cover; align-self: flex-start; margin-right: 24px; border-radius: 4px; } #tribal-success-projects-cards-filter .tribal-success-card .tribal-success-content { flex: 1; display: flex; flex-direction: column; } #tribal-success-projects-cards-filter .tribal-success-card .tribal-success-content .tribal-success-category { width: 100%; display: flex; flex-wrap: wrap; /* 8px entre etiquetas y 5px entre filas */ gap: 5px 8px; align-items: center; /* 24px de separación con la descripción */ margin: 24px 0 24px 0; } #tribal-success-projects-cards-filter .tribal-success-card .tribal-success-content .tribal-success-category .tribal-success-category-tag { display: inline-flex; justify-content: center; align-items: center; gap: 8px; max-width: 100%; padding: 4px 12px; min-height: 32px; white-space: nowrap; border: 1px solid #1E1E1E; border-radius: 50px; color: #1E1E1E; background: #FFFFFF; font-weight: 400; } #tribal-success-projects-cards-filter .tribal-success-card .tribal-success-content .tribal-success-category .tribal-success-category-tag img { flex: 0 0 20px; width: 20px; height: 20px; object-fit: contain; margin: 0; } /* Cliente: Body/caption/big/regular (tamaño h5) */ #tribal-success-projects-cards-filter .tribal-success-card .tribal-success-content .tribal-success-client { margin: 16px 0 8px; font-family: "Suisse Intl"; font-size: 14px; line-height: 32px; font-weight: 400; letter-spacing: 0; color: #5D5D5D; } #tribal-success-projects-cards-filter .tribal-success-card .tribal-success-content h3 { margin-bottom: 8px; } #tribal-success-projects-cards-filter .tribal-success-card .tribal-success-content p { color: #5E5E5B; font-weight: 400; font-size: 14px; line-height: 20px; } #tribal-success-projects-cards-filter .tribal-success-card .tribal-success-content .tribal-success-links { display: flex; margin-top: auto; } #tribal-success-projects-cards-filter .tribal-success-card .tribal-success-content .tribal-success-links a { display: flex; align-items: center; padding: 16px 24px 16px 0; color: #1E1E1E; margin-right: 24px; } #tribal-success-projects-cards-filter .tribal-success-card .tribal-success-content .tribal-success-links a img { margin-left: 8px; width: 24px !important; flex-basis: 24px !important; margin-bottom: 0 !important; height: auto; } #tribal-success-projects-cards-filter .tribal-success-card .tribal-success-content .tribal-success-links a:hover { text-decoration: underline; } #tribal-success-projects-cards-filter .tribal-success-card .tribal-success-content .tribal-success-links a:last-child { margin-right: 0; } #tribal-success-projects-cards-filter .tribal-success-card:hover { background: #F3F0E7; } #tribal-success-projects-cards-filter .tribal-success-footer { width: 100%; display: flex; justify-content: center; margin-top: 40px; margin-bottom: 40px; } @media screen and (max-width: 1024px) { #tribal-success-projects-cards-filter { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 0px; padding: 0 0 40px 0; } #tribal-success-projects-cards-filter .tribal-success-header-filter .tribal-success-header-filter-services .header-filter-services-links { width: 100%; justify-content: space-between; } #tribal-success-projects-cards-filter .tribal-success-header-filter .tribal-success-header-filter-services .header-filter-services-links a { display: none; } #tribal-success-projects-cards-filter .tribal-success-header-filter .tribal-success-header-filter-services .header-filter-services-links .tribal-services-select { display: inline-block; min-width: 170px; } #tribal-success-projects-cards-filter .tribal-success-header-filter .tribal-success-header-filter-services .header-filter-services-links .tribal-services-select form { width: 100%; } #tribal-success-projects-cards-filter .tribal-success-header-filter .tribal-success-header-filter-services .header-filter-services-links .tribal-services-select form select { width: 100%; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid #787672; background: transparent; color: #1E1E1E; } #tribal-success-projects-cards-filter .tribal-success-card { width: calc(50% - 8px); flex-basis: calc(50% - 8px); flex-wrap: wrap; /* Las dos cards de la fila miden lo mismo y su contenido se reparte igual: el enlace queda abajo y los textos empiezan a la misma altura */ align-items: flex-start; align-content: flex-start; align-self: stretch; } #tribal-success-projects-cards-filter .tribal-success-card .tribal-success-content { display: flex; flex-direction: column; flex: 1 1 100%; } #tribal-success-projects-cards-filter .tribal-success-card img { width: 100%; max-width: 100%; flex: 0 0 auto; height: auto; aspect-ratio: var(--mt-card-img-ratio, 16 / 10); object-fit: cover; align-self: flex-start; margin-right: 0px; margin-bottom: 24px; } #tribal-success-projects-cards-filter .tribal-success-card .tribal-success-content { flex: 1; width: 100%; } #tribal-success-projects-cards-filter .tribal-success-card .tribal-success-content .tribal-success-category { gap: 5px 8px; margin: 24px 0 16px 0; } } @media screen and (max-width: 768px) { #tribal-success-projects-cards-filter .tribal-success-card .tribal-success-content .tribal-success-client { font-size: 14px; line-height: 32px; } #tribal-success-projects-cards-filter .tribal-success-card { flex-basis: 100%; width: 100%; } } #tribal-success-filter-item { position: fixed; z-index: 30; top: 0; right: -120vw; opacity: 0; width: 100vw; height: 100vh; display: flex; justify-content: flex-end; background: rgba(30, 30, 30, 0); -webkit-transition: opacity 0.6s; transition: opacity 0.6s; } #tribal-success-filter-item .tribal-success-filter-content { width: 100%; max-width: 488px; height: 100vh; background: #FFFFFF; border-left: 1px solid #787672; } #tribal-success-filter-item .tribal-success-filter-content .tribal-success-filter-item-header { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 40px 16px; } #tribal-success-filter-item .tribal-success-filter-content .tribal-success-filter-item-header .tribal-success-filter-header-text { display: flex; align-items: center; } #tribal-success-filter-item .tribal-success-filter-content .tribal-success-filter-item-header .tribal-success-filter-header-text img { width: 32px; height: auto; margin-right: 8px; } #tribal-success-filter-item .tribal-success-filter-content .tribal-success-filter-item-header .tribal-success-filter-header-text p { display: inline-block; margin-bottom: -8px; } #tribal-success-filter-item .tribal-success-filter-content .tribal-success-filter-item-header .tribal-filter-close-button { width: 32px; padding: 0; margin: 0; background: transparent; border: none; } #tribal-success-filter-item .tribal-success-filter-content .tribal-success-filter-item-content { height: calc(100vh - 91px - 128px); border-top: 1px solid #787672; overflow-y: auto; padding: 0 16px; } #tribal-success-filter-item .tribal-success-filter-content .tribal-success-filter-item-content .tribal-success-filter-item-category { padding: 16px 0 24px 0; margin-right: 8px; border-bottom: 1px solid #787672; } #tribal-success-filter-item .tribal-success-filter-content .tribal-success-filter-item-content .tribal-success-filter-item-category:last-child { border-bottom: none; } #tribal-success-filter-item .tribal-success-filter-content .tribal-success-filter-item-content .tribal-success-filter-item-category .tribal-success-filter-item-category-header { width: 100%; display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; } #tribal-success-filter-item .tribal-success-filter-content .tribal-success-filter-item-content .tribal-success-filter-item-category .tribal-success-filter-item-category-header .tribal-filter-collapse { display: flex; justify-content: flex-end; align-items: center; } #tribal-success-filter-item .tribal-success-filter-content .tribal-success-filter-item-content .tribal-success-filter-item-category .tribal-success-filter-item-category-header .tribal-filter-collapse span { display: flex; justify-content: center; align-items: center; margin-right: 16px; height: 24px; padding: 0px 8px; border-radius: 4px; background: #E8E5DC; font-size: 14px; line-height: 20px; } #tribal-success-filter-item .tribal-success-filter-content .tribal-success-filter-item-content .tribal-success-filter-item-category .tribal-success-filter-item-category-header .tribal-filter-collapse button { width: 24px; height: 24px; border: none; background: transparent; padding: 0; margin: 0; } #tribal-success-filter-item .tribal-success-filter-content .tribal-success-filter-item-content .tribal-success-filter-item-category .tribal-success-filter-item-category-header .tribal-filter-collapse button img { width: 100%; height: auto; } #tribal-success-filter-item .tribal-success-filter-content .tribal-success-filter-item-content .tribal-success-filter-item-category .tribal-success-filter-item-category-body .tribal-filter-check { width: 100%; display: flex; align-items: center; margin-bottom: 16px; } #tribal-success-filter-item .tribal-success-filter-content .tribal-success-filter-item-content .tribal-success-filter-item-category .tribal-success-filter-item-category-body .tribal-filter-check input { margin-right: 16px; } #tribal-success-filter-item .tribal-success-filter-content .tribal-success-filter-item-content .tribal-success-filter-item-category .tribal-success-filter-item-category-body .tribal-filter-check label { display: flex; align-items: center; } #tribal-success-filter-item .tribal-success-filter-content .tribal-success-filter-item-content .tribal-success-filter-item-category .tribal-success-filter-item-category-body .tribal-filter-check label span { display: flex; justify-content: center; align-items: center; margin-left: 8px; height: 24px; padding: 0px 8px; border-radius: 4px; background: #E8E5DC; font-size: 14px; color: #5E5E5B; } #tribal-success-filter-item .tribal-success-filter-content .tribal-success-filter-item-buttons { height: 128px; width: 100%; padding: 16px; background: #E2E2E2; display: flex; flex-direction: column; justify-content: center; align-items: center; } #tribal-success-filter-item .tribal-success-filter-content .tribal-success-filter-item-buttons .tribal-btn { width: 100%; margin-bottom: 10px; } #tribal-success-filter-item .tribal-success-filter-content .tribal-success-filter-item-buttons span:not(.tribal-btn-content) { cursor: pointer; display: inline-block; text-align: center; color: #1E1E1E; text-decoration: none; font-weight: 400; } #tribal-success-filter-item .tribal-success-filter-content .tribal-success-filter-item-buttons span:not(.tribal-btn-content):hover { text-decoration: underline; } #tribal-success-filter-item.active { opacity: 1; right: 0; background: rgba(30, 30, 30, 0.5); } @media screen and (max-width: 1024px) { #tribal-success-filter-item .tribal-success-filter-content .tribal-success-filter-item-header { padding: 16px; } #tribal-success-filter-item .tribal-success-filter-content .tribal-success-filter-item-content { height: calc(100vh - 70px - 128px); } } #cta-solutions h3, #cta-solutions .heading-3, #cta-solutions p { color: #FFFFFF; } .tribal-resources-content { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .tribal-resources-content .tribal-resources-card { width: 100%; display: flex; padding: 8px; border-radius: 8px; -webkit-transition: 0.6s; transition: 0.3s; color: #1E1E1E; } .tribal-resources-content .tribal-resources-card .tribal-resource-card-image { width: 306px; min-width: 306px; flex-basis: 306px; height: auto; margin-right: 24px; border-radius: 8px; } .tribal-resources-content .tribal-resources-card .tribal-resource-card-image img { width: 100%; height: auto; border-radius: 4px; } .tribal-resources-content .tribal-resources-card .tribal-resource-card-content { width: 100%; flex-basis: 100%; display: flex; flex-direction: column; } .tribal-resources-content .tribal-resources-card .tribal-resource-card-content .tribal-resource-car-content-tags { width: 100%; display: flex; margin-bottom: 24px; } .tribal-resources-content .tribal-resources-card .tribal-resource-card-content .tribal-resource-car-content-tags span { display: flex; justify-content: center; align-items: center; height: 32px; padding: 0 24px; border-radius: 40px; border: 1px solid #1E1E1E; } .tribal-resources-content .tribal-resources-card .tribal-resource-card-content h5 { margin-bottom: 5px; } .tribal-resources-content .tribal-resources-card .tribal-resource-card-content .tribal-recource-links { display: flex; margin-top: auto; } .tribal-resources-content .tribal-resources-card .tribal-resource-card-content .tribal-recource-links a, .tribal-resources-content .tribal-resources-card .tribal-resource-card-content .tribal-recource-links span { cursor: pointer; display: flex; align-items: center; padding: 16px 24px 16px 0; color: #1E1E1E; margin-right: 24px; } .tribal-resources-content .tribal-resources-card .tribal-resource-card-content .tribal-recource-links a img, .tribal-resources-content .tribal-resources-card .tribal-resource-card-content .tribal-recource-links span img { margin-left: 8px; width: 24px !important; flex-basis: 24px !important; height: auto; } .tribal-resources-content .tribal-resources-card .tribal-resource-card-content .tribal-recource-links a:hover, .tribal-resources-content .tribal-resources-card .tribal-resource-card-content .tribal-recource-links span:hover { text-decoration: underline; } .tribal-resources-content .tribal-resources-card .tribal-resource-card-content .tribal-recource-links a:last-child, .tribal-resources-content .tribal-resources-card .tribal-resource-card-content .tribal-recource-links span:last-child { margin-right: 0; } .tribal-resources-content .tribal-resources-card:hover { background: #F3F0E7; } .tribal-share-modal { position: fixed; z-index: -10; opacity: 0; top: 0; left: 0; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background: rgba(30, 30, 30, 0.5); -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .tribal-share-modal .tribal-share-modal-content { width: 100%; max-width: 636px; position: relative; padding: 64px 32px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 24px; background: #E8E5DC; border-radius: 8px; } .tribal-share-modal .tribal-share-modal-content .tribal-share-close { cursor: pointer; position: absolute; top: 16px; right: 16px; width: 24px; height: auto; } .tribal-share-modal .tribal-share-modal-content .tribal-share-modal-buttons { width: 100%; display: grid; grid-template-columns: repeat(6, 1fr); justify-content: space-between; } .tribal-share-modal .tribal-share-modal-content .tribal-share-modal-buttons a { display: flex; flex-direction: column; justify-content: center; align-items: center; color: #1E1E1E; } .tribal-share-modal .tribal-share-modal-content .tribal-share-modal-buttons a img { width: 55px; height: auto; padding: 0; margin: 0 0 6px 0; } .tribal-share-modal .tribal-share-modal-content .tribal-share-modal-buttons a span { font-size: 14px; line-height: 20px; text-align: center; } .tribal-share-modal .tribal-share-modal-content .share-link { width: 100%; color: #5E5E5B; overflow-wrap: break-word; } .tribal-share-modal.active { opacity: 1; z-index: 30; } @media screen and (max-width: 768px) { .tribal-share-modal { padding: 0 16px; } .tribal-share-modal .tribal-share-modal-content { padding: 64px 16px; } .tribal-share-modal .tribal-share-modal-content .tribal-share-modal-buttons { gap: 48px; grid-template-columns: repeat(3, 1fr); } .tribal-share-modal .tribal-share-modal-content .tribal-share-modal-buttons a img { width: 48px; height: auto; } } @media screen and (max-width: 1024px) { .tribal-resources-content .tribal-resources-card { flex-wrap: wrap; } .tribal-resources-content .tribal-resources-card .tribal-resource-card-image { width: 100%; flex-basis: 100%; height: auto; margin-right: 0; margin-bottom: 24px; } } @media screen and (max-width: 768px) { .tribal-resources-content { grid-template-columns: repeat(1, 1fr); } } .tribal-profiles-items { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; } .tribal-profiles-items .tribal-profiles-item-left ul { list-style: none; margin: 0; padding: 0; } .tribal-profiles-items .tribal-profiles-item-left ul li { cursor: pointer; font-size: 18px; line-height: 24px; font-weight: 600; margin-bottom: 16px; color: #BBB9B2; -webkit-transition: 0.6s; transition: 0.3s; } .tribal-profiles-items .tribal-profiles-item-left ul li.active, .tribal-profiles-items .tribal-profiles-item-left ul li:hover { color: #1E1E1E; } .tribal-profiles-items .tribal-profiles-item-right .tribal-profile-item-right-content { display: none; } .tribal-profiles-items .tribal-profiles-item-right .tribal-profile-item-right-content.active { display: inline-block; } @media screen and (max-width: 768px) { .tribal-profiles-items { grid-template-columns: repeat(1, 1fr); } } .tribal-accordion-item { width: 100%; } .tribal-accordion-item .tribal-accordion-item-header { cursor: pointer; position: relative; width: 100%; display: flex; align-items: center; height: 96px; } .tribal-accordion-item .tribal-accordion-item-header .tribal-accordion-item-icon { margin-right: 16px; } .tribal-accordion-item .tribal-accordion-item-header .tribal-accordion-item-icon .normal-image { display: none; } .tribal-accordion-item .tribal-accordion-item-header .tribal-accordion-item-icon .white-image { display: block; } .tribal-accordion-item .tribal-accordion-item-header .tribal-accordion-item-button { position: absolute; top: 50%; margin: -16px 0 0 0; padding: 0; right: 0; width: 32px; height: 32px; background: transparent; border: none; display: flex; justify-content: center; align-items: center; transform: rotate(180deg); -webkit-transition: 0.6s; transition: 0.3s; } .tribal-accordion-item .tribal-accordion-item-header .tribal-accordion-item-button img { width: 100%; height: auto; } .tribal-accordion-item .tribal-accordion-item-content { display: none; margin-top: -96px; width: 100%; align-self: stretch; } .tribal-accordion-item .tribal-accordion-item-content .tribal-accordion-item-content-left { flex: 1; margin-top: 96px; padding-bottom: 24px; padding-right: 48px; } .tribal-accordion-item .tribal-accordion-item-content .tribal-accordion-item-content-left p { color: #5E5E5B; margin-bottom: 24px; } .tribal-accordion-item .tribal-accordion-item-content .tribal-accordion-item-content-right { flex: 1; height: 100%; padding-top: 35px; padding-bottom: 20px; } .tribal-accordion-item .tribal-accordion-item-content .tribal-accordion-item-content-right h5 { margin-bottom: 24px; font-weight: 700; } .tribal-accordion-item .tribal-accordion-item-content .tribal-accordion-item-content-right .tribal-accordion-item-content-right-text { max-height: 720px; overflow-y: auto; padding-right: 24px; } .tribal-accordion-item .tribal-accordion-item-content .tribal-accordion-item-content-right .tribal-accordion-item-content-right-text p { color: #5E5E5B; } .tribal-accordion-item .tribal-accordion-item-content .tribal-accordion-item-content-right .tribal-accordion-item-content-right-text p strong { /* La línea va en el borde superior del : 32px por encima (margen) y 32px por debajo (padding), independientemente de cómo el editor agrupe el título y su párrafo. */ display: block; width: 100%; margin-top: 32px; padding: 32px 0 8px; line-height: 24px; border-top: 1px solid #BBB9B2; color: #1E1E1E; text-transform: uppercase; } .tribal-accordion-item .tribal-accordion-item-content .tribal-accordion-item-content-right .tribal-accordion-item-content-right-text p:not(:has(strong)) { /* La separación con la línea siguiente la pone el propio */ margin-bottom: 0; } .tribal-accordion-item .tribal-accordion-item-content .tribal-accordion-item-content-right .tribal-accordion-item-content-right-text > p:first-child strong { margin-top: 0; } .tribal-accordion-item.strategy { background: var(--green); } .tribal-accordion-item.product { background: var(--blue); position: sticky; bottom: 96px; z-index: 20; } .tribal-accordion-item.product.active { position: relative; bottom: 0; } .tribal-accordion-item.growth { background: var(--purple); position: sticky; bottom: 0px; z-index: 20; } .tribal-accordion-item.growth.active { position: relative; bottom: 0; } .tribal-accordion-item.active { background: transparent; } .tribal-accordion-item.active .tribal-accordion-item-header .tribal-accordion-item-icon .normal-image { display: block; } .tribal-accordion-item.active .tribal-accordion-item-header .tribal-accordion-item-icon .white-image { display: none; } .tribal-accordion-item.active .tribal-accordion-item-header .tribal-accordion-item-button { transform: rotate(0deg); } .tribal-accordion-item.active .tribal-accordion-item-content { display: flex; } /* Alto máximo del acordeón abierto: 720px (el listado de la derecha scrollea dentro) */ @media screen and (min-width: 1025px) { /* Tope duro del item abierto: cabecera + contenido nunca pasan de 720px */ .tribal-accordion-item.active { max-height: 720px; overflow: hidden; } .tribal-accordion-item.active .tribal-accordion-item-content { max-height: 720px; overflow: hidden; } .tribal-accordion-item .tribal-accordion-item-content .tribal-accordion-item-content-left { overflow-y: auto; } .tribal-accordion-item .tribal-accordion-item-content .tribal-accordion-item-content-right { display: flex; flex-direction: column; /* height:100% del tema impide que la columna se ajuste al alto máximo */ height: auto; min-height: 0; } .tribal-accordion-item .tribal-accordion-item-content .tribal-accordion-item-content-right .tribal-accordion-item-content-right-text { flex: 1 1 auto; min-height: 0; max-height: 720px; overflow-y: auto; } } /* --- Columna fija al hacer scroll (Elementor) --------------------------- Añade "mt-sticky-row" al contenedor que agrupa las dos columnas y "mt-sticky-col" a la que debe quedarse fija (título + descripción). La columna se suelta al terminar su contenedor, así que ese contenedor debe acabar justo antes del módulo siguiente. */ @media screen and (min-width: 1025px) { .mt-sticky-row { /* Sin stretch la columna puede quedarse fija */ align-items: flex-start !important; } .mt-sticky-col, .sticky-text { position: -webkit-sticky; position: sticky; /* 88px del header + 24px de aire */ top: var(--mt-sticky-top, 112px); align-self: flex-start; } /* El contenedor padre no debe estirar la columna */ .e-con:has(> .sticky-text), .elementor-container:has(> .sticky-text) { align-items: flex-start !important; } } /* --- Texto fijo con el parallax pasando por encima ---------------------- En el MISMO contenedor, en vertical: · "mt-parallax-intro" en el contenedor del texto · "mt-parallax-over" en el contenedor del bloque de parallax El texto se queda fijo y las imágenes le pasan por encima; se suelta al terminar el contenedor, es decir, al acabar el parallax. */ @media screen and (min-width: 1025px) { .mt-parallax-intro { position: -webkit-sticky; position: sticky; /* 88px del header + 24px de aire */ top: var(--mt-sticky-top, 112px); z-index: 0; } .mt-parallax-over { position: relative; z-index: 1; } /* El contenedor padre no puede recortar ni estirar */ .e-con:has(> .mt-parallax-intro), .elementor-container:has(> .mt-parallax-intro) { align-items: stretch; overflow: visible !important; } } /* --- Bloque "¿Crees que podemos ayudarte?" ----------------------------- Clase "btn_ayudarte" en el contenedor de Elementor. */ @media screen and (max-width: 768px) { .btn_ayudarte { padding-bottom: 50px !important; } /* El hueco venía de dentro: contenedores internos y último elemento */ .btn_ayudarte > .e-con, .btn_ayudarte > .elementor-widget-wrap, .btn_ayudarte .e-con-inner { padding-bottom: 0 !important; } .btn_ayudarte > *:last-child, .btn_ayudarte .e-con-inner > *:last-child, .btn_ayudarte .elementor-widget:last-child { margin-bottom: 0 !important; } .btn_ayudarte + * { margin-top: 0 !important; } /* El contenedor es un grid: las filas definidas en desktop (1fr) se igualan al alto de la más alta, y en mobile las que quedan vacías o cortas dejan el hueco. Cada fila mide ahora solo lo que ocupa su contenido. */ .btn_ayudarte.e-grid { grid-template-rows: none !important; grid-auto-rows: auto !important; align-content: start !important; min-height: 0 !important; height: auto !important; } } /* --- Textos de clientes y sectores (home) ------------------------------ Clases "txt_clientes" y "txt_sectores" en el contenedor de Elementor. */ .txt_clientes, .txt_clientes p, .txt_clientes li, .txt_sectores, .txt_sectores p, .txt_sectores li { font-size: 18px !important; line-height: 24px !important; } /* --- Textos legales (aviso legal, privacidad, cookies) ----------------- Clase "txt-legales" en el contenedor de texto de Elementor. */ /* Con !important: el tema pone margin: 0 a los

del contenido */ .txt-legales p, .txt-legales ul, .txt-legales ol, .txt-legales table, .elementor-widget-container .txt-legales p { margin-bottom: 16px !important; } .txt-legales li { margin-bottom: 8px; } .txt-legales > *:last-child { margin-bottom: 0 !important; } /* --- Columnas 530 / 130 / 636 para bloques de Elementor ---------------- Añade la clase "mt-cols-530-636" al contenedor padre (Avanzado → Clases CSS). Sus dos hijos directos pasan a medir 530px y 636px con 130px de separación. */ .mt-cols-530-636 { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 130px; } .mt-cols-530-636 > * { min-width: 0; } .mt-cols-530-636 > *:first-child { flex: 0 1 530px; width: auto; max-width: 530px; } .mt-cols-530-636 > *:last-child { flex: 0 1 636px; width: auto; max-width: 636px; } @media screen and (max-width: 1024px) { .mt-cols-530-636 { gap: 40px; } .mt-cols-530-636 > *:first-child, .mt-cols-530-636 > *:last-child { flex: 1 1 100%; max-width: 100%; } } /* Columnas del acordeón (Figma, ancho grande): 530px · 130px de separación · 636px. Por debajo de 1296px de contenido, las dos columnas se reducen en proporción. */ @media screen and (min-width: 1025px) { .tribal-accordion-item .tribal-accordion-item-content { gap: 130px; } .tribal-accordion-item .tribal-accordion-item-content .tribal-accordion-item-content-left { flex: 0 1 530px; min-width: 0; padding-right: 0; } .tribal-accordion-item .tribal-accordion-item-content .tribal-accordion-item-content-right { flex: 0 1 636px; min-width: 0; } } @media screen and (max-width: 1024px) { .tribal-accordion-item .tribal-accordion-item-header { height: auto; min-height: 80px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; padding: 16px 40px 16px 0; } .tribal-accordion-item .tribal-accordion-item-header .tribal-accordion-item-icon { margin-right: 0; } .tribal-accordion-item .tribal-accordion-item-content { gap: 0; flex-wrap: wrap; margin-top: 0; } .tribal-accordion-item .tribal-accordion-item-content .tribal-accordion-item-content-left { flex-basis: 100%; width: 100%; margin-top: 0; padding-right: 0; } .tribal-accordion-item .tribal-accordion-item-content .tribal-accordion-item-content-left .tribal-btn { width: 100%; } .tribal-accordion-item .tribal-accordion-item-content .tribal-accordion-item-content-right { flex-basis: 100%; width: 100%; margin-top: 0; } .tribal-accordion-item .tribal-accordion-item-content .tribal-accordion-item-content-right .tribal-accordion-item-content-right-text { max-height: 100%; } .tribal-accordion-item.product { bottom: 80px; } } /* --- Acordeón Soluciones: estilo línea (fondo blanco + separadores) ---- Se aplica al wrapper .tribal-accordion--line del widget Tribal Accordion. Va después de los estilos antiguos para anular colores y sticky. */ .tribal-accordion--line { border-top: 1px solid #BBB9B2; } .tribal-accordion--line .tribal-accordion-item, .tribal-accordion--line .tribal-accordion-item.active { position: relative; bottom: auto; z-index: auto; background: #FFFFFF; border-bottom: 1px solid #BBB9B2; } .tribal-accordion--line .tribal-accordion-item .tribal-accordion-item-header { gap: 16px; padding-right: 48px; } .tribal-accordion--line .tribal-accordion-item .tribal-accordion-item-header .tribal-accordion-item-icon { flex: 0 0 48px; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0; } .tribal-accordion--line .tribal-accordion-item .tribal-accordion-item-header .tribal-accordion-item-icon img { display: block; width: 48px; height: 48px; object-fit: contain; } .tribal-accordion--line .tribal-accordion-item .tribal-accordion-item-header h3 { /* Figma: Heading/h3/regular — 32 / 36, color text/main-default */ margin: 0; font-family: "Suisse Intl"; font-size: 32px; line-height: 36px; font-weight: 400; letter-spacing: 0; color: #1E1E1E; } .tribal-accordion--line .tribal-accordion-item .tribal-accordion-item-header .tribal-accordion-item-button { width: 24px; height: 24px; margin-top: -12px; } @media screen and (max-width: 768px) { .tribal-accordion--line .tribal-accordion-item .tribal-accordion-item-header h3 { font-size: 24px; line-height: 32px; } .tribal-accordion--line .tribal-accordion-item .tribal-accordion-item-header .tribal-accordion-item-icon, .tribal-accordion--line .tribal-accordion-item .tribal-accordion-item-header .tribal-accordion-item-icon img { flex-basis: 40px; width: 40px; height: 40px; } } *::-webkit-scrollbar { width: 4px; } *::-webkit-scrollbar-track { background: #fff; border-radius: 15px; } *::-webkit-scrollbar-thumb { background: #E8E5DC; border-radius: 15px; } .partners-title { margin-bottom: 16px; } .partners-title p:first-child { margin-bottom: 8px; } .partners-title p:last-child { margin-bottom: 0; } .tribal-partners-slider { overflow: hidden; width: 100%; } .tribal-partners-slider .tribal-partners-track { display: flex; align-items: center; width: max-content; animation: scroll-logos 30s linear infinite; } /* El listado de logos va duplicado en el HTML: al llegar al -50% vuelve a empezar */ @keyframes scroll-logos { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .tribal-partners-slider .tribal-partners-track img { flex: 0 0 auto; width: auto; max-height: 150px; margin-right: 40px; object-fit: contain; } @media screen and (max-width: 1024px) { .tribal-partners-slider .tribal-partners-track img { max-height: 130px; margin-right: 32px; } } @media screen and (max-width: 768px) { .tribal-partners-slider .tribal-partners-track img { max-height: 105px; margin-right: 24px; } } @media (prefers-reduced-motion: reduce) { .tribal-partners-slider .tribal-partners-track { animation: none; } } footer { padding: 80px 0; background: #1E1E1E; } /* =================================================================== FOOTER V2 — MRM TRIBAL (sustituye al footer anterior) =================================================================== */ /* El tema pone padding al